.sub_text_ani{ transform:translateY(-160%) translateZ(0); -webkit-transform:translateY(-160%) translateZ(0); -moz-transform:translateY(-160%) translateZ(0); -ms-transform:translateY(-160%) translateZ(0); -o-transform:translateY(-160%) translateZ(0); animation: sub_text_ani forwards 1.4s ease-out; -webkit-animation: sub_text_ani forwards 1.4s ease-out; -moz-animation: sub_text_ani forwards 1.4s ease-out; -ms-animation: sub_text_ani forwards 1.4s ease-out; -o-animation: sub_text_ani forwards 1.4s ease-out; } @keyframes sub_text_ani { 0% {transform:translateY(-160%) translateZ(0);} 100% {transform: translateY(0) translateZ(0);} } @-webkit-keyframes sub_text_ani { 0% {transform:translateY(-160%) translateZ(0);} 100% {transform: translateY(0) translateZ(0);} } .root_daum_roughmap .wrap_controllers,.root_daum_roughmap .cont{display:none} .sub_top_cont{ position:relative; width:100%; height:713px; min-height:500px; max-height: 807px; overflow:hidden; } .sub_top_cont_wrap{ position:relative; width:100%; height:100%; overflow:hidden; } .sub_top_view_bg{ position:absolute; bottom:0px; left:0; width:100%; height:100%; overflow:hidden; transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); animation: sub_top_view_bg forwards 5s 0.5s ease-in-out; -webkit-animation: sub_top_view_bg forwards 5s 0.5s ease-in-out; -moz-animation: sub_top_view_bg forwards 5s 0.5s ease-in-out; -ms-animation: sub_top_view_bg forwards 5s 0.5s ease-in-out; -o-animation: sub_top_view_bg forwards 5s 0.5s ease-in-out; } @keyframes sub_top_view_bg { 0% { transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); } 100% { transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -webkit-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -moz-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -ms-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -o-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); } } @-moz-keyframes sub_top_view_bg { 0% { transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -webkit-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -moz-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -ms-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); -o-transform:perspective(500px) scale(1.05) rotate(.001deg) translateZ(0); } 100% { transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -webkit-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -moz-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -ms-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); -o-transform:perspective(500px) scale(1) rotate(.001deg) translateZ(0); } } .sub_top_text{ position:absolute; top:47%; left:50%; width:100%; transform: translate(-50%, -0%) translateZ(0); -webkit-transform: translate(-50%, -0%) translateZ(0); -moz-transform: translate(-50%, -0%) translateZ(0); -ms-transform: translate(-50%, -0%) translateZ(0); -o-transform: translate(-50%, -0%) translateZ(0); text-align: center; color: #fff; } .ov{overflow:hidden} b{font-weight:700} .sub_bg_wrap{position: relative;width:100%;margin:0 auto;height:604px;overflow:hidden} .sub_bg01-4{background: url(../sub/img/sub_bg01-4_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg02{background: url(../sub/img/sub02_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg02-2{background: url(../sub/img/sub02-2_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg02-5{background: url(../sub/img/sub_bg02-5_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg03-2{background: url(../sub/img/sub_bg03-2_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg04-2{background: url(../sub/img/sub_bg04-2_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg05-2{background: url(../sub/img/sub_bg05-2_bg.webp) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg05-3{background: url(../sub/img/sub_bg05-3_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_bg06-1{background: url(../sub/img/sub_bg06-1_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;} .sub_top_text{position: absolute;text-align: center;margin:0 auto;left: 50%;top: 56%;transform: translate(-50%, -50%);z-index:1} .sub_top_text div{overflow:hidden;position: relative;} .sub_top_text h2{font-size:18px;color:#fff;padding-bottom:25px;} .sub_top_text h2.ivy{font-size:28px;padding-bottom:46px} .sub_top_text h3{font-size:33px;color:#fff;font-weight:600;padding-bottom:55px;} .sub_top_text h4{font-size:18px;color:#fff;padding-bottom:38px;font-weight: 100;} .sub_top_text p{font-size:20px;color:#fff;font-weight:300;line-height:32px;} /* ///////////////// 오시는길 ////////////////// */ .loc-left{border-radius:32px;overflow: hidden;} .loc_txx p{font-sizE:17px;color:#393939;line-height:30px;font-weight: bold;} .loc-map-btns{margin-top:35px;} .loc_txx {border-bottom:2px solid #dfdddd;padding: 50px 30px 35px;} .loc-time-block{padding-top:45px;} /* New Location Map Style */ .loc-premium-section {background-color: #520a0d; padding: 175px 0; color: #fff; text-align: center; margin-top: 100px;} .loc-premium-section .inner {max-width: 1525px; margin: 0 auto;} .loc-premium-section .map-img-box {overflow: hidden; margin-bottom: 40px;} .loc-premium-section .map-img-box img {width: 100%; display: block;} .loc-premium-section .info-addr {font-size: 30px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px;} .loc-premium-section .info-floor {font-size: 23px; font-weight: 400; color: rgba(255,255,255,1); margin-bottom: 40px;} .loc-premium-section .info-btns {display: flex; justify-content: center; gap: 20px; margin-bottom: 70px;} .loc-premium-section .info-btn {display: flex; align-items: center; justify-content: center; background-color: #fff; color: #333; height: 60px; padding: 0 40px; border-radius: 30px; font-size: 17px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 10px 20px rgba(0,0,0,0.2);} .loc-premium-section .info-btn:hover {transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0,0,0,0.3);} .loc-premium-section .info-btn img {height: 24px; margin-right: 12px;} .loc-premium-section .info-parking {padding-top: 65px;font-size: 23px; color: rgba(255,255,255,1); font-weight: 400;} .info-content .loc-map-btns{justify-content: center;} /* Transport Guide Style */ .transport-guide-section {background-color: #fff; padding: 120px 0;} .transport-guide-section .inner {max-width: 1525px; margin: 0 auto;} .transport-guide-section .transport-flex {display: flex; gap: 40px; align-items: stretch;} .transport-guide-section .transport-left {flex: 1;max-width: 714px;} .transport-guide-section .transport-right {flex: 1;max-width: 764px;} .transport-guide-section .transport-right .map-guide-img {width: 100%; height: 100%; object-fit: cover; border-radius: 30px; box-shadow: 0 10px 30px rgba(0,0,0,0.05);} .transport-guide-section .info-box {border: 1px solid #f2f2f2; border-radius: 30px; padding: 28px 50px; display: flex; margin-bottom: 20px;} .transport-guide-section .info-box:last-child {margin-bottom: 0;padding: 35px 50px;} .transport-guide-section .box-tit {flex-shrink: 0; width: 180px; font-size: 21px; font-weight: 700; color: #862d27; display: flex; align-items: flex-start; gap: 12px; padding-top: 5px;} .transport-guide-section .box-tit img {width: 20px;} .transport-guide-section .bus-box .box-tit{padding-top: 0px;} .transport-guide-section .box-content {flex-grow: 1; font-size: 17px; line-height: 1.8; color: #393939;font-weight: 500;} .transport-guide-section .box-content strong {color: #393939; font-weight: 700;} .transport-guide-section .box-content p {margin-bottom: 5px;} .transport-guide-section .bus-box .scroll-area {flex-grow: 1; max-height: 480px; overflow-y: auto; padding-right: 20px;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar {width: 4px;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar-track {background: transparent;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar-thumb {background: #ccc; border-radius: 10px;} .transport-guide-section .bus-item {margin-bottom: 40px;} .transport-guide-section .bus-item:last-child {margin-bottom: 0;} .transport-guide-section .stop-name {display: block; font-size: 17px; font-weight: 700; color: #570f12; margin-bottom: 20px;} .transport-guide-section .bus-info-line {margin-bottom: 10px; display: flex;font-size: 17px;color: #000000;font-weight: 700;} .transport-guide-section .bus-info-line strong {display: inline-block; width: 45px; color: #393939; flex-shrink: 0;} .transport-guide-section .bus-info-line strong em{padding-left:3px} .transport-guide-section .bus-item01 .bus-info-line strong em{padding-left:1px} .transport-guide-section .bus-info-line.bus-info-line2 span{line-height:22px;} /* ///////////////// 스마일라식 2-1 ////////////////// */ .smile_feature_wrap { padding: 150px 0; background: #fff; text-align: center; overflow: hidden; } .smile_feature_wrap .section_title { font-size: 55px; color: #832e29; font-weight: 800; margin-bottom: 90px; } .smile_feature_inner { max-width: 1530px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 40px; position: relative; } .smile_side { flex: 1; display: flex; flex-direction: column; gap: 150px; } .smile_side.left { text-align: left; } .smile_side.right { text-align: right; } .feature_box { transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.6; transform: scale(0.95); } .feature_box.active { opacity: 1; transform: scale(1); } .feature_box.active .en{color:#393939} .feature_box.active .ko{color:#393939} .feature_box.active .desc{color:#393939} .feature_box .ko { font-size: 33px; color: #D3D3D3; font-weight: 700; margin-bottom: 25px; display: block; } .feature_box .en { font-size: 60px; color: #D3D3D3; font-weight: 300; letter-spacing: 0.02em; line-height: 1; margin-bottom: 25px; transition: color 0.6s; font-family: "Sorts Mill Goudy", serif; } .feature_box .en b { color: inherit; font-weight: 300; transition: all 0.6s; } .feature_box.active .en b { color: #832e29; font-weight: 800; } .feature_box .desc { font-size: 18px; color: #D3D3D3; line-height: 1.6; word-break: keep-all; font-weight: 500; } .feature_box .desc span { font-size: 15px; color: #999; display: block; margin-top: 8px; font-weight: 400; } .smile_center { flex: 0 0 540px; position: relative; display: flex; align-items: center; justify-content: center; } .diagram_bg { position: absolute; width: 100%; height: 100%; border: 1px solid #f0f0f0; border-radius: 50%; pointer-events: none; } .diagram_bg.inner_circle { width: 70%; height: 70%; } .diagram_bg.cross_h { width: 100%; height: 1px; border: none; background: #f0f0f0; border-radius: 0; } .diagram_bg.cross_v { width: 1px; height: 100%; border: none; background: #f0f0f0; border-radius: 0; } .line_container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .dia_line { position: absolute; width: 6px; height: 85px; background: #832e29; border-radius: 10px; transform-origin: center; transition: all 0.8s; opacity: 0.3; } .feature_box.active ~ .smile_center .dia_line { opacity: 1; } /* Individual highlight logic could be more complex, but let's keep it simple or use JS if needed */ /* Video Section */ .smile_video_section { padding: 120px 0 120px; background: #F6F8F9; text-align: center; } .video_wrap { max-width: 1177px; margin: 0 auto 50px; } .video_container { width: 100%; position: relative; overflow: hidden; } .video_container img { width: 100%; display: block; } .video_overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 50px; text-align: left; background: rgba(0,0,0,0.05); } .video_tit { font-size: 45px; color: #fff; font-weight: 300; letter-spacing: 0.02em; font-family: "Sorts Mill Goudy", serif; text-shadow: 0 2px 10px rgba(0,0,0,0.2); } .play_btn_box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .play_btn { background: none; border: none; cursor: pointer; transition: all 0.3s; opacity: 0.8; } .play_btn:hover { transform: scale(1.1); opacity: 1; } .video_text_area { max-width: 1530px; margin: 0 auto; padding: 0 20px; } .video_text_area .desc_txt { font-size: 23px; line-height: 1.7; color: #393939; margin-bottom: 30px; font-weight: 500; word-break: keep-all; letter-spacing: -0.02em; } .highlight_box { background: #862D27; color: #fff; font-size: 28px; padding: 20px 41px; display: inline-block; line-height: 1.6; font-weight: 600; box-shadow: 0 15px 40px rgba(131, 46, 41, 0.2); letter-spacing: -0.02em; word-break: keep-all; } /* YouTube Section */ .smile_youtube_section { padding: 150px 0; background: #fff; } .youtube_flex { display: flex; align-items: center; gap: 80px; max-width: 1530px; margin: 0 auto; padding: 0 20px; } .iframe_placeholder{width:100%;height:100%} .youtube_left { width:857px } .video_box { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; overflow: hidden; box-shadow: 20px 20px 60px rgba(0,0,0,0.05); } .video_box img { width: 100%; height: 100%; object-fit: cover; } .video_caption { margin-top: 15px; font-size: 15px; color: #999; text-align: center; letter-spacing: -0.02em; } .youtube_right { } .youtube_right .tit { font-size: 33px; line-height: 1.4; color: #393939; font-weight: 700; margin-bottom: 40px; word-break: keep-all; letter-spacing: -0.03em; } .youtube_right .tit em { color: #862D27; font-style: normal; } .youtube_right .desc { font-size: 19px; line-height: 1.8; color: #393939; font-weight: 500; word-break: keep-all; letter-spacing: -0.02em; } .zeiss_partner_section { padding: 150px 0; background: #fff; } .zeiss_top_flex { display: flex; align-items: center; gap: 60px; max-width: 1400px; margin: 0 auto 60px; padding: 0 10px; } .zeiss_txt_side { flex: 1; text-align: left; } .zeiss_txt_side .tit { font-size: 33px; line-height: 1.4; color: #393939; font-weight: 700; margin-bottom: 35px; letter-spacing: -0.03em; word-break: keep-all; } .zeiss_txt_side .tit span { color: #862D27; } .zeiss_txt_side .desc { font-size:19px; line-height: 1.7; color: #393939; font-weight: 500; letter-spacing: -0.02em; } .zeiss_img_side { flex: 1.4; } .main_device_box { position: relative; width: 100%; overflow: hidden; } .main_device_box img { width: 100%; display: block; } .zeiss_logo { position: absolute; top: 30px; right: 30px; width: 80px; } .zeiss_grid_wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px; max-width: 1400px; margin: 0 auto; padding: 0 10px; } .zeiss_grid_wrap .grid_item { text-align: center; } .zeiss_grid_wrap .thumb { width: 100%; margin-bottom: 20px; overflow: hidden; } .zeiss_grid_wrap .thumb img { width: 100%; display: block; filter: brightness(0.98); transition: transform 0.5s; } .zeiss_grid_wrap .grid_item:hover .thumb img { transform: scale(1.05); } .zeiss_grid_wrap .caption { font-size: 19px; line-height: 1.5; color: #393939; font-weight: 500; letter-spacing: -0.02em; } .zeiss_grid_wrap .caption span { color: #862D27; font-weight: 800; } .main-sc-center .item-desc b{font-size:23px;} .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('./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.175rem; line-height: 1.6; font-weight: 500;margin-top: 1rem;} .dream-adv .adv-item .tit { font-size: 2.0625rem; font-weight: 400; line-height: 1.4; } .s-main-ttl{font-size:2.7rem;font-weight: 700;} /* ///////////////// 스마일프로 2-2 ////////////////// */ .smile-pro-section {padding: 200px 0 120px; background: #fff;} .smile-pro-section .inner {max-width: 1440px; margin: 0 auto;} .smile-pro-section .section-title {text-align: center; font-size: 50px; font-weight: 800; color: #862D27; margin-bottom: 100px; letter-spacing: -1.5px;} .smile-pro-flex {display: flex; align-items: center; gap: 75px;} .smile-pro-flex .left-img {flex: 1.4;} .smile-pro-flex .left-img img {width: 100%; display: block; } .smile-pro-flex .right-text {flex: 1; font-size: 19px; line-height: 1.8; color: #393939; word-break: keep-all;font-weight: 500;} .smile-pro-flex .right-text .desc-1 {margin-bottom: 30px;} .smile-pro-flex .right-text .desc-1 strong {color: #862D27; font-weight: 700;} .smile-pro-flex .right-text .desc-2 {margin-bottom: 30px; font-size: 19px; color: #393939;} .smile-pro-flex .right-text .desc-3 {font-weight: 700; color: #393939; font-size: 23px; line-height: 1.6; letter-spacing: -0.5px;} .smile-pro-intro-section {background-color: #862D27; padding: 120px 0; color: #fff; text-align: center;} .smile-pro-intro-section .inner {max-width: 1200px; margin: 0 auto;} .smile-pro-intro-section .intro-header h3 {font-size: 33px; font-weight: 700; line-height: 1.4; margin-bottom: 40px; letter-spacing: -1.5px;} .smile-pro-intro-section .intro-img-wrap {position: relative; margin-bottom: 25px; border-radius: 0px; overflow: hidden;} .smile-pro-intro-section .intro-img-wrap .main-img {width: 100%; display: block;} .smile-pro-intro-section .intro-img-wrap .badge-img {position: absolute; top: 30px; right: 30px; width: 140px;} .smile-pro-intro-section .intro-img-wrap .badge-img img {width: 100%;} .smile-pro-intro-section .intro-footer {font-size: 23px; line-height: 1.7; word-break: keep-all; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-1 {margin-bottom: 40px; font-weight: 500;} .smile-pro-intro-section .intro-footer .txt-2 {margin-bottom: 40px; font-size: 19px; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-3 {font-size: 19px; color: #fff;} .smile-pro-features-section {padding: 120px 0; background-color: #fff; text-align: center;} .smile-pro-features-section .inner {max-width: 1440px; margin: 0 auto;} .smile-pro-features-section .header .t1 {font-size: 44px; color: #862D27; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px;} .smile-pro-features-section .header .t2 {font-size: 44px; color: #393939; font-weight: 700; margin-bottom: 30px; letter-spacing: -1.5px;} .smile-pro-features-section .header .desc {font-size: 19px; color: #393939; line-height: 1.6; margin-bottom: 100px;} .hexagon-wrap {position: relative; width: 700px; height: 700px; margin: 0 auto; display: flex; align-items: center; justify-content: center;} .hexagon-outer { width: 700px; height: 700px; display: flex; align-items: center; justify-content: center; } .hexagon-inner { width: 600px; height: 688px; } .hexagon-inner img { width: 100%; height: 100%; object-fit: cover; } .feature-item {position: absolute; text-align: center; transition: 0.3s;text-align: center;} .feature-item .num {display: inline-block; height: 40px;padding: 0 15px; line-height: 40px; background: #570C07; color: #fff; border-radius:30px; font-weight: 700; margin-bottom: 18px; font-size: 23px;} .feature-item p {font-size: 23px; color: #393939; line-height: 1.8; word-break: keep-all; letter-spacing: -0.5px;} /* Position Items */ .item-1 {top: -12px; left: -113px; } .item-2 {top: -12px; right: -140px; } .item-3 {top: 50%; right: -264px; transform: translateY(-50%); } .item-4 {bottom: 0; right: -140px; } .item-5 {bottom: 0; left: -140px;} .item-6 {top: 50%; left: -250px; transform: translateY(-50%);} .smile-pro-process-section {padding: 120px 0; background-color: #F6F8F9; text-align: center;} .smile-pro-process-section .inner {max-width: 1440px; margin: 0 auto;} .smile-pro-process-section h2.title {font-size: 44px; font-weight: 700; color: #393939; margin-bottom: 80px; letter-spacing: -1.5px;} .smile-pro-process-section h2.title .txt-red {color: #862D27;} .smile-pro-process-section .process-flex {display: flex; align-items: center; gap: 80px; text-align: left;} .smile-pro-process-section .left-video { overflow: hidden; width:807px;height:478px;} .smile-pro-process-section .left-video video {width: 100%; height: 100%;display: block;object-fit: cover;} .smile-pro-process-section .right-steps {flex: 1; display: flex; flex-direction: column; gap: 58px;} .smile-pro-process-section .step-item {position: relative; text-align: center;} .smile-pro-process-section .badge {display: inline-block; padding:14px 24px; border-radius: 30px; font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 16px;} .smile-pro-process-section .badge.gray {background: #999;} .smile-pro-process-section .badge.red {background: #862D27;} .smile-pro-process-section .badge.black {background: #333;} .smile-pro-process-section .step-tit {font-size: 23px; font-weight: 700; color: #393939; margin-bottom: 12px; letter-spacing: -0.5px;} .smile-pro-process-section .step-desc {font-size: 19px; color: #393939; font-weight: 500;} .smile-pro-points-section {background-color: #862D27; padding: 120px 0; color: #fff; position: relative; overflow: hidden;} .smile-pro-points-section .inner {max-width: 1410px; margin: 0 auto; z-index: 2;} .smile-pro-points-section h2.title {text-align: center; font-size: 44px; font-weight: 700; margin-bottom: 100px; letter-spacing: -1.5px;} .points-list {display: flex; flex-direction: column; gap: 100px;} .point-item {display: flex; align-items: flex-start; gap: 100px;} .point-item .img-area {overflow: hidden;} .point-item .img-area img {width: 100%; display: block;} .point-item .text-area {flex: 1;padding-top: 10px;} .point-item .point-badge {display: inline-block; background: #fff; color: #862D27; padding: 14px 22px; border-radius: 30px; font-size: 17px; font-weight: 700; margin-bottom: 60px;} .point-item .point-tit {font-size: 33px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px;} .point-item .point-desc {font-size: 19px; line-height: 1.7; color: #fff; word-break: keep-all;} .point-item .point-desc strong {color: #fff; font-weight: 700; margin-right: 5px;} .smile-pro-points-section .watermark-text { position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); font-size: 180px; font-weight: 900; color: rgba(255,255,255,0.03); white-space: nowrap; pointer-events: none; z-index: 1; letter-spacing: 5px; } .smile-pro-compare-section {padding: 120px 0; background: #fff; text-align: center;} .smile-pro-compare-section .inner {max-width: 1040px; margin: 0 auto;} .smile-pro-compare-section .header h2 {font-size: 44px; font-weight: 700; color: #393939; margin-bottom: 20px; letter-spacing: -1.5px;} .smile-pro-compare-section .header h2 .vs {color: #393939; font-weight: 700; margin: 0 1px;} .smile-pro-compare-section .header h2 strong{font-weight: 700;color:#862D27} .smile-pro-compare-section .header p {font-size: 18px; color: #666; margin-bottom: 70px;} .compare-table-wrap {width: 100%; overflow-x: auto;} .compare-table {width: 100%; border-spacing: 0; border-collapse: collapse; table-layout: fixed;} .compare-table th, .compare-table td {background: #F6F6F6;padding: 28px 15px; border: 1px solid #CFCFCF; font-size: 23px; color: #151515; vertical-align: middle;font-weight:700;} .compare-table thead th {background: #F6F6F6; font-weight: 700; font-size: 23px; color: #151515; border-bottom: 2px solid #ddd;} .compare-table thead th.col-vs {background: #fff; width: 28%; font-size: 23px; color: #505050;} .compare-table tbody th {background: #fff; font-weight: 700; color: #505050; width: 25%; font-size: 23px;} .compare-table .highlight { border-left: 6px solid #862D27; border-right: 6px solid #862D27; background: #FFF7F6; color: #862D27; font-weight: 800; } .compare-table thead th.highlight {border-top: 6px solid #862D27;/* border-bottom: 6px solid #862D27; */} .compare-table tbody tr:last-child td.highlight {border-bottom: 6px solid #862D27;} /* YouTube Section */ .smile-pro-youtube-section {padding: 120px 0; background: #fcfcfc; text-align: center;} .smile-pro-youtube-section .inner {max-width: 1440px; margin: 0 auto;} .smile-pro-youtube-section h2.title {font-size: 44px; font-weight: 700; color: #393939; margin-bottom: 65px; display: flex; align-items: center; justify-content: center; gap: 17px;} .smile-pro-youtube-section h2.title .yt-icon {display: inline-block;padding-top: 5px; } .youtube-flex {display: flex; align-items: center; gap: 80px; text-align: left;} .thumbnail-area {width: 807px;height: 452px;position: relative; border: 8px solid #ff0000; overflow: hidden;} .thumbnail-area iframe{width:100%;height:100%;} .thumbnail-area img {width: 100%; display: block;} .thumbnail-area .play-btn {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(255,255,255,0.9) url('/img/play_icon.png') no-repeat center/30px; border-radius: 50%;} .youtube-flex .text-area {flex: 1;} .youtube-flex .text-area .tit {font-size: 33px; font-weight: 700; color: #393939; line-height: 1.4; margin-bottom: 35px;} .youtube-flex .text-area .tit .hl {color: #862D27;} .youtube-flex .text-area .desc1 {font-size: 19px; color: #393939; margin-bottom: 25px; line-height: 1.7; word-break: keep-all;} .youtube-flex .text-area .desc2 {font-size: 19px; color: #393939; margin-bottom: 50px; line-height: 1.7; word-break: keep-all;} a.yt-link-btn {display: inline-flex; align-items: center; gap: 10px; background: #862D27; color: #fff; padding: 11px 31px; border-radius: 40px; font-size: 19px; font-weight: 600; transition: 0.3s;} a.yt-link-btn .btn-play-icon{padding-top:2px;} .yt-link-btn:hover {background: #000;} /* Recommend Section */ .smile-pro-recommend-section {padding: 120px 0; background: #fff; text-align: center;} .smile-pro-recommend-section .header h3 {font-size: 43px; color: #393939; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px;} .smile-pro-recommend-section .header h2 {font-size: 43px; color: #862D27; font-weight: 700; margin-bottom: 40px; letter-spacing: -1.5px;} .recommend-list {max-width: 870px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px;} .recommend-list .item {padding: 25px; border: 1px solid #C9C9C9; border-radius: 50px; font-size: 23px; color: #393939; font-weight: 500; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.02);} .recommend-list .item:hover {border-color: #862D27; color: #862D27; background: #fffafa;} /* Dynamic Section (Review & Event) */ .smile-pro-dynamic-section {padding: 120px 0; background:#FBFBFB;} .smile-pro-dynamic-section .inner {max-width: 1800px; margin: 0 auto; width: 95%;} .dynamic-flex {display: flex; gap: 60px;} .dynamic-box {flex: 1; min-width: 0;} .box-header {display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 40px;} .box-header .tit-area h2 {font-size: 38px; font-weight: 700; color: #393939; margin-bottom: 27px; letter-spacing: -1px;} .box-header .tit-area h2 .hl {color: #862D27;} .box-header .tit-area p {font-size: 19px; color: #393939; font-weight: 500;} .box-header .more-btn {display: inline-block; padding: 12px 28px; background: #333; color: #fff; border-radius: 30px; font-size: 15px; font-weight: 600; transition: 0.3s;} .box-header .more-btn:hover {background: #000;} .list-area {position: relative; padding-bottom: 40px;} .list-area .swiper-slide {width: 380px;} .list-area .img-wrap {width: 100%; aspect-ratio: 1/1; overflow: hidden; margin-bottom: 22px; background: #f9f9f9; box-shadow: 0 5px 15px rgba(0,0,0,0.05);} .list-area .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-out;} .list-area .swiper-slide:hover img {transform: scale(1.08);} .list-area .txt-wrap .cat {display: block; font-size: 15px; color: #380a0a; font-weight: 800; margin-bottom: 8px;} .list-area .txt-wrap .subject {font-size: 20px; font-weight: 700; color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: 0.3s;} .list-area .swiper-slide:hover .subject {color: #380a0a;} .swiper-scrollbar {height: 4px !important; background: #f0f0f0 !important; bottom: 0 !important; border-radius: 2px !important;} .swiper-scrollbar-drag {background: #ccc !important; border-radius: 2px !important;} /* ///////////////// 스마일센터 2-3 ////////////////// */ .smile-pro-flex .right-text .title01{font-size: 33px;font-weight: 700;color: #393939;line-height:48px;padding-bottom: 32px;} .smile-pro-flex .right-text .title01 span{color: #862D27;} .sub2-3_w .smile-pro-intro-section{background:#F6F8F9} .sub2-3_w .smile-pro-intro-section .intro-header h3{margin-bottom: 32px;color: #393939;text-align: center;font-size: 44px;font-weight: 700;line-height: 148%;} .sub2-3_w .smile-pro-intro-section .intro-header h3 span{color: #862D27;} .sub2-3_w .smile-pro-intro-section .intro-header p{color: #393939;font-size: 19px;font-weight: 500;line-height: 164%; /* 31.16px */} .sub2-3_w .smile-pro-intro-section .intro-img-wrap{margin-top:48px;margin-bottom: 48px;} .sub2-3_w .smile-pro-intro-section .intro-footer{color: #393939;font-size: 28px;font-weight: 700; line-height: 159%;} .sub2-3_w .smile-pro-intro-section .intro-footer .txt-1{font-weight:700;} .sub2-3_w .smile-pro-intro-section .intro-footer .txt-1 span{color: #862D27;} .main-sc-zeiss {position: relative; overflow: hidden; background: #862D27; padding: 100px 0;} .main-sc-zeiss .inner {position: relative; z-index: 2;} .main-sc-zeiss .zeiss-flex-wrap {display: flex; align-items: center; justify-content: center; gap: 80px;} .main-sc-zeiss .zeiss-card-area {display: flex; gap: 0px;} .main-sc-zeiss .card-item {width: 250px; filter: drop-shadow(20px 20px 30px rgba(0,0,0,0.3));} .main-sc-zeiss .card-item img {width: 100%; display: block;} .main-sc-zeiss .zeiss-txt-area {color: #fff;} .main-sc-zeiss .s-main-ttl {font-size: 43px; font-weight: 700; line-height: 1.5; letter-spacing: -0.03em;} .main-sc-zeiss .s-main-desc {margin-top:30px; font-size: 19px; line-height: 1.6;color:#fff; font-weight: 500;} .main-sc-zeiss .zeiss-bg-text {position: absolute; bottom: -33px; right: -36px; font-size: 165px; font-weight:500; color: rgba(255,255,255,0.05); white-space: nowrap; pointer-events: none; z-index: 1;font-family: "Sorts Mill Goudy", serif;} .main-sc-research {position: relative; background: #3d1c19 url('../sub/img/main-sc-research_bg.jpg') no-repeat center; background-size: cover; padding: 120px 0; text-align: center;} .main-sc-research .inner {position: relative; z-index: 2;} .main-sc-research .research-txt-area {color: #fff;} .main-sc-research .s-main-ttl {font-size: 44px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em;} .main-sc-research .s-main-desc {margin-top: 32px; font-size: 19px; line-height: 1.6; font-weight: 300;} .main-sc-research .research-swiper-container {margin-top: 60px; position: relative; width: 100%; overflow: hidden;} .main-sc-research .paper-item {width: 100%; background: #fff; padding: 5px; box-shadow: 10px 10px 30px rgba(0,0,0,0.2);} .main-sc-research .paper-item img {width: 100%; display: block;} .main-sc-research .research-pagination {margin-top: 50px; position: relative; display: flex; justify-content: center; align-items: center; gap: 0;} .main-sc-research .research-pagination .swiper-pagination-bullet {width: 120px; height: 2px; background: rgba(255,255,255,0.2); border-radius: 0; margin: 0 !important; opacity: 1; transition: all 0.3s;} .main-sc-research .research-pagination .swiper-pagination-bullet-active {border-radius: 99px; background: #F3DDDB; height: 5px;} .main-sc-research .research-progress-bar {margin-top: 60px; width: 100%; max-width: 700px; height: 5px; background: #7C5151;position: relative; margin-left: auto; margin-right: auto;} .main-sc-research .progress-fill {position: absolute; top: 0; left: 0; height: 100%; background: #fff; width: 0; transition: width 0.3s ease;} .main-sc-center {padding: 120px 0; text-align: center; background: #fff;} .main-sc-center .center-txt-area {color: #333;} .main-sc-center .s-main-ttl {font-size: 44px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2;font-weight:800} .main-sc-center .s-main-desc {margin-top: 30px; font-size: 17px; line-height: 1.6; color: #393939; font-weight: 500;} .main-sc-center .center-list-wrap {margin-top: 60px; display: flex; gap: 85px; justify-content: center;} .main-sc-center .center-item {flex: 1; max-width: 417px;} .main-sc-center .thumb-box {width: 100%; overflow: hidden; background: #f8f8f8;} .main-sc-center .thumb-box img {width: 100%; display: block; transition: transform 0.5s ease;} .main-sc-center .center-item:hover .thumb-box img {transform: scale(1.05);} .main-sc-center .point-badge {display: inline-block; margin-top: 20px; padding: 14px 23px; background: #862D27; color: #fff; border-radius: 50px; font-size: 17px; font-weight: 400;} .main-sc-center .item-ttl {margin-top: 16px; font-size: 23px; font-weight: 700; color: #393939;line-height: 1.4; letter-spacing: -0.02em;} .main-sc-center .item-ttl small {font-size: 19px; color: #8C8C8C; font-weight: 700; display: block; margin-top: 0px;} .main-sc-center .item-desc {margin-top: 9px; font-size: 19px; line-height: 1.6; color: #393939; word-break: keep-all;} .laser-features {position: relative; padding: 7.5rem 0; overflow: hidden; background: #F6F8F9; } .laser-features .inner {max-width: 1422px; margin: 0 auto; } .laser-features .feature-list {margin-top: 6rem;} .laser-features .l-feature-item {display: flex; align-items: center; justify-content: space-between; margin-top: 5.1rem;} .laser-features .l-feature-item.inverse {flex-direction: row-reverse;} .laser-features .l-feature-item .img-box {width: 50%;max-width: 674px;} .laser-features .l-feature-item .img-box img {width: 100%; display: block;} .laser-features .l-feature-item .txt-box {width: 42%; position: relative;} .laser-features .l-feature-item.inverse .txt-box { padding-left: 6.4rem;} .laser-features .l-feature-item .num {font-size: 5.225rem; font-family: "EB Garamond", serif; font-weight: 700; color: rgba(205, 85, 77, 0.20); position: absolute; top: -55px; left: -3.7rem; line-height: 1; z-index: 1;} .laser-features .l-feature-item.inverse .num {right: auto; left: -6rem; top: -7rem;} .laser-features .l-feature-item .tit {font-size: 2.0625rem; color: #862D27; font-weight: 700; position: relative; z-index: 2;} .laser-features .l-feature-item .desc {margin-top: 1.8rem; font-size: 1.1875rem; line-height: 1.6; } /* ///////////////// icl pro 센터 3-2 ////////////////// */ .sub3-2_w .smile-pro-flex .right-text .desc-2{font-size:28px;} .sub3-2_w .smile-pro-youtube-section{background:#fff} .sub3-2_w .smile-pro-youtube-section h2.title{display:block;line-height: 65px;} .sub3-2_w .youtube-flex .text-area .tit{font-size:23px;} .main-sc-criteria {padding: 120px 0; background: #FBFBFB;text-align: center;} .main-sc-criteria .em {color: #862D27;} .main-sc-criteria .s-main-ttl {font-size: 44px; font-weight: 700; letter-spacing: -0.02em;} .main-sc-criteria .s-main-desc {margin-top: 32px; font-size: 19px; line-height: 1.6; color: #393939; font-weight: 400;} .main-sc-criteria .criteria-swiper-wrap {margin-top: 60px; width:1400px;margin:0 auto;position: relative; text-align: left;} .main-sc-criteria .swiper-nav-area {position: absolute; top: 30px; left: 51%; display: flex; align-items: center; gap: 40px; z-index: 10;width: 100%;max-width:680px;justify-content: space-between;} .main-sc-criteria .swiper-fraction {font-size: 32px; font-family: 'Times New Roman', serif; color: #393939;} .main-sc-criteria .swiper-fraction .current {color: #B2B2B2; font-weight: 500;} .main-sc-criteria .swiper-buttons {display: flex; gap: 10px;} .main-sc-criteria .swiper-buttons button {width: 96px; height: 60px; border-radius: 5px; background: #f8f8f8 no-repeat center; border: none; cursor: pointer; transition: background 0.3s;} .main-sc-criteria .swiper-buttons .btn-prev {background-image: url('../img/focus_left.png');} .main-sc-criteria .swiper-buttons .btn-next {background-image: url('../img/focus_right.png');} .main-sc-criteria .swiper-buttons button:hover {background-color: #eee;} .main-sc-criteria .criteria-container {margin-top: 40px;} .main-sc-criteria .slide-flex {display: flex; align-items: flex-end; gap: 90px;height:517px} .main-sc-criteria .img-box {overflow: hidden;} .main-sc-criteria .img-box img {width: 100%; display: block;} .main-sc-criteria .info-box {flex: 1;padding-bottom: 48px;} .main-sc-criteria .info-ttl {font-size: 33px; font-weight: 700; color: #862D27;} .main-sc-criteria .info-sub {margin-top: 25px; font-size: 23px; font-weight: 600; color: #393939;} .main-sc-criteria .info-desc {margin-top: 30px; font-size: 19px; line-height: 1.7; color: #393939; word-break: keep-all;font-weight: 500;} .main-sc-doctor {position: relative; padding: 217px 0; background: url('../sub/img/s32doctor_bg.jpg') no-repeat center; background-size: cover; text-align: center; color: #fff;} .main-sc-doctor .inner {position: relative; z-index: 2;} .main-sc-doctor .s-main-ttl {font-size: 43px; font-weight: 700; line-height: 1.3; letter-spacing: -0.03em; word-break: keep-all;} .main-sc-doctor .s-main-desc {margin-top: 32px; font-size: 23px; font-weight: 300; opacity: 0.9;} .main-sc-doctor .doctor-tags {margin-top: 100px; display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;} .main-sc-doctor .tag {font-size: 23px; font-weight: 700; position: relative;} .main-sc-doctor .tag:not(:last-child)::after {content: '·'; margin-left: 20px; font-weight: 700;} .sub3-2_w .main-sc-research{ background: url(../sub/img/s32main-sc-research_bg.jpg) no-repeat center;padding:99px 0;background-size: cover;} /* ///////////////// 재교정 3-3 ////////////////// */ /* 재교정 ICL 기준 섹션 */ .smile-pro-flex .right-text .desc-3{color: #862D27;font-size: 22px;font-weight: 700;line-height: 164%;} .recali-importance {padding: 100px 0; background: url(../sub/img/recali-importance_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; text-align: center; } .recali-importance .main-title {font-size: 43px; font-weight: 700; color: #393939; margin-bottom: 32px; letter-spacing: -1px;} .recali-importance .main-title .highlight {color: #862D27;} .recali-importance .sub-desc {font-size: 19px; color: #393939; line-height: 1.8; margin-bottom: 13px; font-weight: 500;} .recali-box {max-width: 950px; margin: 100px auto 50px; background: #fff; border-radius: 20px; position: relative; text-align: left; border: 1px solid #f0f0f0;} .recali-box .box-header {letter-spacing: -0.5px;display: inline-flex;height: 60px;justify-content: center;align-items: center;background: #393939;color: #FFF;font-size: 28px; font-weight: 700;line-height: 148%;position: absolute;left: 50%;transform: translate(-50%, 0);top: -27px;width: 653px;} .reason-list {padding: 60px 86px; margin: 0;} .reason-list li {display: flex; align-items: flex-start; padding: 25px ; font-size: 23px; color: #393939; font-weight: 500; border-bottom: 1px solid #C9C9C9; position: relative; list-style: none;margin-bottom: 18px;} .reason-list li:last-child {margin-bottom: 0;} .reason-list li::before {content: ''; display: inline-block; width: 10px; height: 10px; background: #862D27; margin-top: 8px; margin-right: 20px; flex-shrink: 0;} .bottom-txt {font-size: 23px; color: #393939; font-weight: 600; margin-bottom: 25px;} a.btn-kakao {display: inline-flex; align-items: center; justify-content: center; background: #862D27; color: #fff; padding: 16px 45px; border-radius: 50px; font-size: 18px; font-weight: 600; text-decoration: none; transition: all 0.3s;} a.btn-kakao:hover {background: #6d241f; transform: translateY(-2px); color: #fff; text-decoration: none;} .btn-kakao i {margin-left: 10px; border: solid #fff; border-width: 0 2px 2px 0; display: inline-block; padding: 3px; transform: rotate(-45deg);} .re_bar{width: 948px;height: 1px;background: #D4D4D4;margin: 0 auto 60px;} /* 퇴행 후 ICL 재교정 이유 섹션 */ .recali-why {padding: 120px 0; background: url(../sub/img/recali-why_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%;text-align: center; color: #fff; position: relative; overflow: hidden;} .recali-why .top-tit {font-size: 19px; font-weight: 500; opacity: 0.9; margin-bottom: 40px; letter-spacing: -0.5px;} .recali-why .main-tit {font-size: 43px; font-weight: 700; margin-bottom: 80px; letter-spacing: -1.5px;} .why-grid {display: flex; flex-wrap: wrap; justify-content: center; gap: 80px; max-width: 1100px; margin: 0 auto;} .why-item {background: #fff; width: 289px; height: 289px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; color: #333; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: transform 0.3s;} .why-item:hover {transform: translateY(-10px);} .why-item .icon {width: 20px; height: 20px; background: #862D27; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; position: relative;} .why-item .icon::after {content: ''; display: block; width: 12px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-top: -2px;} .why-item .item-tit {font-size: 23px; font-weight: 700; color: #862D27; margin-bottom: 14px; letter-spacing: -0.5px;} .why-item .item-desc {font-size: 19px; line-height: 1.5; color: #393939; font-weight: 500; word-break: keep-all;} /* 데이터 증명 섹션 */ .recali-data {padding: 155px 0; background: #FBFBFB; text-align: left; color: #393939;} .data-flex-wrap {display: flex; align-items: center; justify-content: space-between; max-width: 1425px; margin: 0 auto; gap: 80px;} .data-txt-box {flex: 1;} .data-txt-box .title {font-size: 33px; font-weight: 700; line-height: 1.5; margin-bottom: 35px; letter-spacing: -1.5px; color: #393939;} .data-txt-box .title .red {color: #862D27;} .data-txt-box .desc1 {font-size: 19px; font-weight: 500; color: #393939; margin-bottom: 35px;} .data-txt-box .desc2 {font-size: 19px; line-height: 1.7; color: #393939; font-weight: 700;} .data-txt-box .base-date {display: block; font-size: 17px; color: #767676; margin-top: 100px; font-weight: 400;} .data-graph-box {display: flex; align-items: flex-end; justify-content: space-between; gap: 150px;} .graph-item {text-align: center; position: relative;} .graph-item .graph-tit {font-size: 21px; font-weight: 700; color: #862D27; margin-top: 35px;} /* Bar Graph */ .bar-graph .chart-container {display: flex; align-items: flex-end; gap: 45px; height: 300px; padding-bottom: 10px;} .bar-item {width: 70px; text-align: center;position: relative;} .bar-item .bar-value {font-size: 20px; font-weight: 700; margin-bottom: 15px; opacity: 0; transform: translateY(10px); transition: all 0.5s 0.8s;} .bar-item.post .bar-value {color: #862D27;} .recali-data.active .bar-item .bar-value {opacity: 1; transform: translateY(0);} .bar-item .bar-inner {width: 100%; height: 298px; background: transparent; position: relative;} .bar-item .bar-fill {width: 100%; height: 0; position: absolute; bottom: 0; left: 0; border-radius: 12px 12px 0 0; transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);border-radius: 20px 20px 0 0;} .bar-item.pre .bar-fill {border-radius: 20px 20px 0 0;background: linear-gradient(180deg, #9A9A9A 0%, #E2E2E2 100%);} .bar-item.post .bar-fill {background: linear-gradient(180deg, #862D27 0%, #D0938F 136.91%);} .bar-item.pre .bar-value{position: absolute;bottom: 190px;left: 19px;font-weight: 400;} .recali-data.active .bar-item.pre .bar-fill {height: 157px;} .recali-data.active .bar-item.post .bar-fill {height: 298px;} .bar-item .bar-label {font-size: 19px; font-weight: 700; color: #393939; margin-top: 18px; white-space: nowrap;} .bar-item.pre .bar-label{font-weight:500} /* Circle Graph */ .circle-graph .chart-container {position: relative; width: 300px; height: 300px;} .circle-graph svg {width: 100%; height: 100%; transform: rotate(-90deg);} .circle-graph circle {fill: none; stroke-width: 16; } .circle-graph circle.bg {stroke: #f3f3f3;} .circle-graph circle.active {stroke: #862D27; stroke-dasharray: 237.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s ease-in-out;} .recali-data.active .circle-graph circle.active {stroke-dashoffset: 5.03;} .circle-graph .percent-txt {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 35px; font-weight: 700; color: #862D27; letter-spacing: -2px;} .circle-graph .note {position: absolute; top: -10px; right: 0; font-size: 15px; color: #666; font-weight: 500;} /* 재교정 센터 인트로 */ .recali-center-intro {padding: 180px 0; background:url('../sub/img/recali_center_bg.jpg') no-repeat center / cover; background-attachment: fixed; color: #fff;} .recali-center-intro .inner {max-width: 1425px; margin: 0 auto; padding: 0 20px;} .recali-center-intro .title {font-size: 33px; font-weight: 700; line-height: 1.6; margin-bottom: 32px; letter-spacing: -1.5px;} .recali-center-intro .desc {font-size: 19px; line-height: 1.7; opacity: 0.9; font-weight: 400; color: #fff;} .sub3-3_w .smile-pro-flex .right-text .desc-3{color: #862D27;font-size: 22px;font-weight: 700;line-height: 164%;} /* ///////////////// 라식 라섹 4-1 ////////////////// */ /* 라식 라섹 비교 섹션 */ .lasik-vs-lasek {display: flex; gap: 30px; margin-top: 60px; padding: 0 20px;margin-left: auto; margin-right: auto;justify-content: center;} .lasik-vs-lasek .comp-item {flex: 1; text-align: center; max-width: 710px;} .lasik-vs-lasek .img-box {width: 100%; margin-bottom: 30px; overflow: hidden; border-radius: 0px;} .lasik-vs-lasek .img-box img {width: 100%; display: block;} .lasik-vs-lasek .name {font-size: 33px; font-weight: 700; color: #862D27; margin-bottom: 25px; letter-spacing: -1px;} .lasik-vs-lasek .hash-tags {display: flex; flex-direction: column; gap: 8px;} .lasik-vs-lasek .tag-row {display: flex; gap: 15px; font-size: 19px; color: #393939; font-weight: 500; white-space: nowrap;justify-content: center;} /* 올레이저 시스템 섹션 */ .all-laser-system {background: url(../sub/img/all-laser-system_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; padding: 120px 0; color: #fff;} .all-laser-system .inner {max-width: 1425px; margin: 0 auto; padding: 0 20px;} .laser-flex-wrap {display: flex; align-items: center; justify-content: space-between; gap: 100px;} .all-laser-system .img-box {flex: 1.2;} .all-laser-system .img-box img {width: 100%; display: block;} .all-laser-system .txt-box {flex: 1; text-align: left;} .all-laser-system .title {font-size: 44px; font-weight: 600; line-height: 1.3; margin-bottom: 40px; letter-spacing: -1.5px;} .all-laser-system .subtitle {font-size: 23px; font-weight: 600; margin-bottom: 30px; line-height: 1.5; } .all-laser-system .desc {font-size: 19px; line-height: 1.8; font-weight: 400;} /* 올레이저 라섹 섹션 */ .all-laser-lasek {padding: 120px 0; background: #F8F8F9; text-align: center;} .all-laser-lasek .inner {max-width: 1440px; margin: 0 auto; } .all-laser-lasek .top-header {margin-bottom: 80px;} .all-laser-lasek .title {font-size: 44px; font-weight: 700; color: #393939; margin-bottom: 32px; letter-spacing: -1px;} .all-laser-lasek .desc {font-size: 19px; color: #666; line-height: 1.6; font-weight: 500;} .lasek-content-wrap {display: flex; align-items: center; justify-content: space-between; gap: 135px;} .all-laser-lasek .video-box {flex: 1.2; background: #000; position: relative; border-radius: 0px; overflow: hidden; line-height: 0;} .all-laser-lasek .video-box video {width: 100%; display: block;} .all-laser-lasek .info-box {flex: 1; text-align: left;} .all-laser-lasek .item {position: relative; padding-top: 10px; margin-bottom: 70px;} .all-laser-lasek .item:last-child {margin-bottom: 0;} .all-laser-lasek .num {font-size: 84px; font-weight: 500; color: #862D27; opacity: 0.1; font-family: "EB Garamond", serif;position: absolute; left: -30px; top: -45px; z-index: 1;} .all-laser-lasek .item-tit {font-size: 33px; font-weight: 700; color: #862D27; position: relative; z-index: 2; margin-bottom: 20px; letter-spacing: -0.5px;} .all-laser-lasek .item-desc {font-size:23px; color: #393939; line-height: 1.6; font-weight: 500;} /* 비쥬맥스 시스템 섹션 */ .visumax-system {padding: 120px 0; background: #fff;} .visumax-system .inner {max-width: 1440px; margin: 0 auto;} .visumax-flex-wrap {display: flex; align-items: center; justify-content: space-between; gap: 100px;} .visumax-system .txt-box {flex: 1;} .visumax-system .img-box {flex: 1.2; position: relative;} .visumax-system .img-box img {width: 100%; display: block;} .visumax-system .zeiss-logo {position: absolute; top: 40px; right: 40px; width: 90px;} .visumax-system .title {font-size: 33px; font-weight: 700; color: #393939; line-height: 1.4; margin-bottom: 60px; letter-spacing: -1.5px;} .visumax-system .title .red {color: #862D27;} .visumax-system .feature-list {list-style: none; padding: 0; margin: 0;} .visumax-system .feature-list li {position: relative; padding-left: 25px; margin-bottom: 25px; font-size: 23px; color: #393939; font-weight: 500; letter-spacing: -0.5px;} .visumax-system .feature-list li::before {content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; background: #393939; border-radius: 50%;} .sub4-1_w .smile-pro-section.cl .section-title { color:#393939; font-size: 4rem; line-height: 1.3;} .sub4-1_w .cl .smile-pro-flex{ flex-direction: column; gap:2.7rem; } .sub4-1_w .cl .smile-pro-flex.cl .right-text { text-align: center;} .sub4-1_w .cl .smile-pro-flex.cl .right-text strong { color:#862D27; font-weight: 700;} .sub4-1_w .cl .smile-pro-flex.cl .right-text strong.bl { color:#393939;} .sub4-1_w .cl .smile-pro-flex.cl .right-text .desc-4 { font-size: 1.62rem; font-weight:600} .sub4-1_w .cl .smile-pro-flex.cl .right-text .desc-4 + .desc-4 { margin-top: 2rem;} .sub4-1_w .smile-pro-flex .highlight { background: #862D27; padding: 1rem 1.75rem; color:#fff; font-size: 1.75rem; font-weight: 700; margin:2.5rem auto 0; line-height: 1.6;} /* ///////////////// 4-2 ////////////////// */ .sub4-2_w .smile-pro-section.cl .section-title { color:#393939; font-size: 4rem; line-height: 1.3;} .sub4-2_w .cl .smile-pro-flex{ flex-direction: column; gap:2.7rem; } .sub4-2_w .cl .smile-pro-flex.cl .right-text { text-align: center;} .sub4-2_w .cl .smile-pro-flex.cl .right-text strong { color:#862D27; font-weight: 700;} .sub4-2_w .cl .smile-pro-flex.cl .right-text strong.bl { color:#393939;} .sub4-2_w .cl .smile-pro-flex.cl .right-text .desc-4 { text-align:center;font-size: 1.62rem; font-weight:600;padding-bottom: 60px;} .sub4-2_w .cl .smile-pro-flex.cl .right-text .desc-4 + .desc-4 { margin-top: 2rem;} .sub4-2_w .smile-pro-flex .highlight {display: inline-block; background: #862D27; padding: 1rem 1.75rem; color:#fff; font-size: 1.75rem; font-weight: 700; margin:2.5rem auto 0; line-height: 1.6;} .sub4-2_w .main-sc-center{background: #FBFBFB;} .main-sc-center .point-badge.bag01{background:#A9A9A9} .main-sc-center .point-badge.bag02{background:#862D27} .main-sc-center .point-badge.bag03{background:#393939} .sub4-2_w .main-sc-center .item-desc{margin-top:12px} .main-sc-extra {padding: 120px 0; background: url(../sub/img/main-sc-extra_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; text-align: center;} .main-sc-extra .sub-ttl {font-size: 32px; color: #862D27; font-weight: 700;font-family: "EB Garamond", serif;} .main-sc-extra .s-main-ttl {margin-top: 20px; font-size: 44px; font-weight: 700; color: #393939; line-height: 1.4;} .main-sc-extra .s-main-desc {margin-top: 40px; font-size: 19px; color: #393939; font-weight: 600;} .main-sc-extra .extra-bottom-flex {margin-top: 80px; display: flex; align-items: center; gap: 60px; text-align: left;max-width: 1320px; margin: 0 auto;padding-top: 60px;} .main-sc-extra .extra-info-side {flex: 1;} .main-sc-extra .info-ttl {font-size: 23px; font-weight: 700; color: #862D27; line-height: 1.4;} .main-sc-extra .info-ttl .em {color: #862D27;} .main-sc-extra .info-desc {margin-top: 40px; font-size: 19px; line-height: 1.7; color: #393939; word-break: keep-all;} .main-sc-extra .extra-video-side {flex: 1.2; position: relative;} .main-sc-extra .video-thumb {position: relative; width: 100%; box-shadow: 20px 20px 40px rgba(0,0,0,0.1);} .main-sc-extra .video-thumb img {width: 100%; display: block;} .main-sc-extra .btn-play {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: url('/img/play_btn.png') no-repeat center; background-size: contain; border: none; cursor: pointer;} .main-sc-extra02 {padding: 120px 0; background: url(../sub/img/main-sc-extra2_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; text-align: center; color: #fff; position: relative; overflow: hidden;} .main-sc-extra02::before {content: ''; position: absolute; top: -50%; left: -10%; width: 120%; height: 120%; background: radial-gradient(circle, rgba(134, 45, 39, 0.1) 0%, transparent 70%); pointer-events: none;} .main-sc-extra02 .sub-ttl {font-size: 32px; color: #fff; font-weight: 700; font-family: "EB Garamond", serif; display: block; margin-bottom: 20px;} .main-sc-extra02 .s-main-ttl {font-size: 44px; font-weight: 700; color: #fff; line-height: 1.3; margin-bottom: 40px;} .main-sc-extra02 .s-main-desc {font-size: 20px; color: #fff; font-weight: 500; line-height: 1.6; word-break: keep-all; opacity: 0.9;} .main-sc-extra02 .s-sub-desc {margin-top: 30px; font-size: 19px; color: #fff; line-height: 1.6; word-break: keep-all; font-weight: 600; opacity: 0.9;} .main-sc-extra02 .extra-bottom-flex {margin-top: 80px; display: flex; align-items: center; gap: 80px; text-align: left; max-width: 1320px; margin: 80px auto 0; padding: 0 20px;} .main-sc-extra02 .extra-info-side {flex: 1;} .main-sc-extra02 .feature-item {margin-bottom: 40px;position: unset;text-align: left;} .main-sc-extra02 .feature-badge {display: inline-block; padding: 12px 35px; background:#862D27; border-radius: 50px; font-size: 23px; font-weight: 700; color: #fff; margin-bottom: 12px; } .main-sc-extra02 .feature-desc {font-size: 19px; color: #fff; line-height: 1.6; word-break: keep-all; font-weight: 400; } .main-sc-extra02 .extra-img-side {} .main-sc-extra02 .extra-img-side img {width: 100%; border-radius: 4px;} @media (max-width: 1560px) { /* ///////////////// 스마일라식 2-1 ////////////////// */ .smile_feature_wrap { padding: 9.6154vw 0; background: #fff; } .smile_feature_wrap .section_title { font-size: 3.5256vw; margin-bottom: 5.7692vw; } .smile_feature_inner { max-width: 95.0769vw; margin: 0 auto; align-items: center; justify- gap: 2.5641vw; } .smile_side { flex: 1; flex-direction: column; gap: 9.6154vw; } .smile_side.left { } .smile_side.right { } .feature_box { transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.6; transform: scale(0.95); } .feature_box.active { opacity: 1; transform: scale(1); } .feature_box.active .en{color:#393939} .feature_box.active .ko{color:#393939} .feature_box.active .desc{color:#393939} .feature_box .ko { font-size: 2.1154vw; margin-bottom: 1.6026vw; } .feature_box .en { font-size: 3.8462vw; letter-spacing: 0.02em; line-height: 1; margin-bottom: 1.6026vw; transition: color 0.6s; font-family: "Sorts Mill Goudy", serif; } .feature_box .en b { transition: all 0.6s; } .feature_box.active .en b { } .feature_box .desc { font-size: 1.1538vw; line-height: 1.6; word-break: keep-all; } .feature_box .desc span { font-size: 0.9615vw; margin-top: 0.5128vw; } .smile_center { flex: 0 0 34.6154vw; align-items: center; justify- } .diagram_bg { width: 100%; height: 100%; border: 0.0641vw solid #f0f0f0; border-radius: 50%; pointer-events: none; } .diagram_bg.inner_circle { width: 70%; height: 70%; } .diagram_bg.cross_h { width: 100%; height: 0.0641vw; border: none; background: #f0f0f0; border-radius: 0; } .diagram_bg.cross_v { width: 0.0641vw; height: 100%; border: none; background: #f0f0f0; border-radius: 0; } .line_container { width: 100%; height: 100%; align-items: center; justify- } .dia_line { width: 0.3846vw; height: 5.4487vw; background: #832e29; border-radius: 0.6410vw; transform-origin: center; transition: all 0.8s; opacity: 0.3; } .feature_box.active ~ .smile_center .dia_line { opacity: 1; } /* Individual highlight logic could be more complex, but let's keep it simple or use JS if needed */ /* Video Section */ .smile_video_section { padding: 7.6923vw 0 7.6923vw; background: #F6F8F9; } .video_wrap { max-width: 75.4487vw; margin: 0 auto 3.2051vw; } .video_container { width: 100%; } .video_container img { width: 100%; } .video_overlay { top: 0; left: 0; width: 100%; height: 100%; padding: 3.2051vw; background: rgba(0,0,0,0.05); } .video_tit { font-size: 2.8846vw; letter-spacing: 0.02em; font-family: "Sorts Mill Goudy", serif; text-shadow: 0 0.1282vw 0.6410vw rgba(0,0,0,0.2); } .play_btn_box { top: 50%; left: 50%; transform: translate(-50%, -50%); } .play_btn { background: none; border: none; cursor: pointer; transition: all 0.3s; opacity: 0.8; } .play_btn:hover { transform: scale(1.1); opacity: 1; } .video_text_area { max-width: 98.0769vw; margin: 0 auto; padding: 0 1.2821vw; } .video_text_area .desc_txt { font-size: 1.4744vw; line-height: 1.7; margin-bottom: 1.9231vw; word-break: keep-all; letter-spacing: -0.02em; } .highlight_box { background: #862D27; font-size: 1.7949vw; padding: 1.2821vw 2.6282vw; line-height: 1.6; box-shadow: 0 0.9615vw 2.5641vw rgba(131, 46, 41, 0.2); letter-spacing: -0.02em; word-break: keep-all; } /* YouTube Section */ .smile_youtube_section { padding: 9.6154vw 0; background: #fff; } .youtube_flex { align-items: center; gap: 5.1282vw; max-width: 98.0769vw; margin: 0 auto; padding: 0 1.2821vw; } .iframe_placeholder{width:100%;height:100%} .youtube_left { width:54.9359vw } .video_box { width: 100%; aspect-ratio: 16/9; background: #000; box-shadow: 1.2821vw 1.2821vw 3.8462vw rgba(0,0,0,0.05); } .video_box img { width: 100%; height: 100%; object-fit: cover; } .video_caption { margin-top: 0.9615vw; font-size: 0.9615vw; letter-spacing: -0.02em; } .youtube_right { } .youtube_right .tit { font-size: 2.1154vw; line-height: 1.4; margin-bottom: 2.5641vw; word-break: keep-all; letter-spacing: -0.03em; } .youtube_right .tit em { font-style: normal; } .youtube_right .desc { font-size: 1.2179vw; line-height: 1.8; word-break: keep-all; letter-spacing: -0.02em; } .zeiss_partner_section { padding: 9.6154vw 0; background: #fff; } .zeiss_top_flex { align-items: center; gap: 3.8462vw; max-width: 89.7436vw; margin: 0 auto 3.8462vw; padding: 0 0.6410vw; } .zeiss_txt_side { flex: 1; } .zeiss_txt_side .tit { font-size: 2.1154vw; line-height: 1.4; margin-bottom: 2.2436vw; letter-spacing: -0.03em; word-break: keep-all; } .zeiss_txt_side .tit span { } .zeiss_txt_side .desc { font-size:1.2179vw; line-height: 1.7; letter-spacing: -0.02em; } .zeiss_img_side { flex: 1.4; } .main_device_box { width: 100%; } .main_device_box img { width: 100%; } .zeiss_logo { top: 1.9231vw; right: 1.9231vw; width: 5.1282vw; } .zeiss_grid_wrap { grid-template-columns: repeat(3, 1fr); gap: 4.1026vw; max-width: 89.7436vw; margin: 0 auto; padding: 0 0.6410vw; } .zeiss_grid_wrap .grid_item { } .zeiss_grid_wrap .thumb { width: 100%; margin-bottom: 1.2821vw; } .zeiss_grid_wrap .thumb img { width: 100%; filter: brightness(0.98); transition: transform 0.5s; } .zeiss_grid_wrap .grid_item:hover .thumb img { transform: scale(1.05); } .zeiss_grid_wrap .caption { font-size: 1.2179vw; line-height: 1.5; letter-spacing: -0.02em; } .zeiss_grid_wrap .caption span { } .main-sc-center .item-desc b{font-size:1.4744vw;} .dream-adv .adv-grid{gap: 6.9rem 2.25rem;} .dream-adv .adv-item{max-width: calc(50% - 3rem);} .dream-adv .inner{max-width: 95vw;} /* ///////////////// 스마일프로 2-2 ////////////////// */ .smile-pro-section {padding: 12.8205vw 0 7.6923vw; background: #fff;} .smile-pro-section .inner {max-width: 92.3077vw; margin: 0 auto;} .smile-pro-section .section-title { font-size: 3.2051vw; margin-bottom: 6.4103vw; letter-spacing: -0.0962vw;} .smile-pro-flex { align-items: center; gap: 4.8077vw;} .smile-pro-flex .left-img {flex: 1.4;} .smile-pro-flex .left-img img {width: 100%; } .smile-pro-flex .right-text {flex: 1; font-size: 1.2179vw; line-height: 1.8; word-break: keep-all;} .smile-pro-flex .right-text .desc-1 {margin-bottom: 1.9231vw;} .smile-pro-flex .right-text .desc-1 strong { } .smile-pro-flex .right-text .desc-2 {margin-bottom: 1.9231vw; font-size: 1.2179vw; } .smile-pro-flex .right-text .desc-3 { font-size: 1.4744vw; line-height: 1.6; letter-spacing: -0.0321vw;} .smile-pro-intro-section { padding: 7.6923vw 0; } .smile-pro-intro-section .inner {max-width: 76.9231vw; margin: 0 auto;} .smile-pro-intro-section .intro-header h3 {font-size: 2.1154vw; line-height: 1.4; margin-bottom: 2.5641vw; letter-spacing: -0.0962vw;} .smile-pro-intro-section .intro-img-wrap { margin-bottom: 1.6026vw; border-radius: 0.0000vw; box-shadow: 0 1.2821vw 3.2051vw rgba(0,0,0,0.3);} .smile-pro-intro-section .intro-img-wrap .main-img {width: 100%; } .smile-pro-intro-section .intro-img-wrap .badge-img { top: 1.9231vw; right: 1.9231vw; width: 8.9744vw;} .smile-pro-intro-section .intro-img-wrap .badge-img img {width: 100%;} .smile-pro-intro-section .intro-footer {font-size: 1.4744vw; line-height: 1.7; word-break: keep-all; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-1 {margin-bottom: 2.5641vw; } .smile-pro-intro-section .intro-footer .txt-2 {margin-bottom: 2.5641vw; font-size: 1.2179vw; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-3 {font-size: 1.2179vw; } .smile-pro-features-section {padding: 7.6923vw 0; } .smile-pro-features-section .inner {max-width: 92.3077vw; margin: 0 auto;} .smile-pro-features-section .header .t1 {font-size: 2.8205vw; margin-bottom: 1.2821vw; letter-spacing: -0.0641vw;} .smile-pro-features-section .header .t2 {font-size: 2.8205vw; margin-bottom: 1.9231vw; letter-spacing: -0.0962vw;} .smile-pro-features-section .header .desc {font-size: 1.2179vw; line-height: 1.6; margin-bottom: 6.4103vw;} .hexagon-wrap { width: 44.8718vw; height: 44.8718vw; margin: 0 auto; align-items: center; justify-} .hexagon-outer { width: 44.8718vw; height: 44.8718vw; align-items: center; justify- } .hexagon-inner { width: 38.4615vw; height: 44.1026vw; } .hexagon-inner img { width: 100%; height: 100%; object-fit: cover; } .feature-item { transition: 0.3s;} .feature-item .num { height: 2.5641vw;padding: 0 0.9615vw; line-height: 2.5641vw; background: #570C07; border-radius:1.9231vw; margin-bottom: 1.1538vw; font-size: 1.4744vw;} .feature-item p {font-size: 1.4744vw; line-height: 1.8; word-break: keep-all; letter-spacing: -0.0321vw;} /* Position Items */ .item-1 {top: -0.7692vw; left: -7.2436vw; } .item-2 {top: -0.7692vw; right: -8.9744vw; } .item-3 {top: 50%; right: -16.9231vw; transform: translateY(-50%); } .item-4 {bottom: 0; right: -8.9744vw; } .item-5 {bottom: 0; left: -8.9744vw;} .item-6 {top: 50%; left: -16.0256vw; transform: translateY(-50%);} .smile-pro-process-section {padding: 7.6923vw 0; } .smile-pro-process-section .inner {max-width: 92.3077vw; margin: 0 auto;} .smile-pro-process-section h2.title {font-size: 2.8205vw; margin-bottom: 5.1282vw; letter-spacing: -0.0962vw;} .smile-pro-process-section h2.title .txt-red {} .smile-pro-process-section .process-flex { align-items: center; gap: 5.1282vw; } .smile-pro-process-section .left-video { width:51.7308vw;height:30.6410vw;} .smile-pro-process-section .left-video video {width: 100%; height: 100%;object-fit: cover;} .smile-pro-process-section .right-steps {flex: 1; flex-direction: column; gap: 3.7179vw;} .smile-pro-process-section .step-item { } .smile-pro-process-section .badge { padding:0.8974vw 1.5385vw; border-radius: 1.9231vw; font-size: 1.0897vw; margin-bottom: 1.0256vw;} .smile-pro-process-section .badge.gray {background: #999;} .smile-pro-process-section .badge.red {background: #862D27;} .smile-pro-process-section .badge.black {background: #333;} .smile-pro-process-section .step-tit {font-size: 1.4744vw; margin-bottom: 0.7692vw; letter-spacing: -0.0321vw;} .smile-pro-process-section .step-desc {font-size: 1.2179vw; } .smile-pro-points-section { padding: 7.6923vw 0; } .smile-pro-points-section .inner {max-width: 90.3846vw; margin: 0 auto; } .smile-pro-points-section h2.title { font-size: 2.8205vw; margin-bottom: 6.4103vw; letter-spacing: -0.0962vw;} .points-list { flex-direction: column; gap: 6.4103vw;} .point-item { align-items: flex-start; gap: 6.4103vw;} .point-item .img-area {flex:1} .point-item .img-area img {width: 100%; } .point-item .text-area {flex: 1;padding-top: 0.6410vw;} .point-item .point-badge { background: #fff; padding: 0.8974vw 1.4103vw; border-radius: 1.9231vw; font-size: 1.0897vw; margin-bottom: 3.8462vw;} .point-item .point-tit {font-size: 2.1154vw; margin-bottom: 1.2821vw; letter-spacing: -0.0641vw;} .point-item .point-desc {font-size: 1.2179vw; line-height: 1.7; word-break: keep-all;} .point-item .point-desc strong { margin-right: 0.3205vw;} .smile-pro-points-section .watermark-text { top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); font-size: 11.5385vw; color: rgba(255,255,255,0.03); white-space: nowrap; pointer-events: none; letter-spacing: 0.3205vw; } .smile-pro-compare-section {padding: 7.6923vw 0; background: #fff; } .smile-pro-compare-section .inner {max-width: 66.6667vw; margin: 0 auto;} .smile-pro-compare-section .header h2 {font-size: 2.8205vw; margin-bottom: 1.2821vw; letter-spacing: -0.0962vw;} .smile-pro-compare-section .header h2 .vs { margin: 0 0.0641vw;} .smile-pro-compare-section .header h2 strong{color:#862D27} .smile-pro-compare-section .header p {font-size: 1.1538vw; margin-bottom: 4.4872vw;} .compare-table-wrap {width: 100%; overflow-x: auto;} .compare-table {width: 100%; border-spacing: 0; } .compare-table th, .compare-table td {background: #F6F6F6;padding: 1.7949vw 0.9615vw; border: 0.0641vw solid #CFCFCF; font-size: 1.4744vw; } .compare-table thead th {background: #F6F6F6; font-size: 1.4744vw; border-bottom: 0.1282vw solid #ddd;} .compare-table thead th.col-vs {background: #fff; width: 28%; font-size: 1.4744vw; } .compare-table tbody th {background: #fff; width: 25%; font-size: 1.4744vw;} .compare-table .highlight { border-left: 0.3846vw solid #862D27; border-right: 0.3846vw solid #862D27; background: #FFF7F6; } .compare-table thead th.highlight {border-top: 0.3846vw solid #862D27;/* border-bottom: 0.3846vw solid #862D27; */} .compare-table tbody tr:last-child td.highlight {border-bottom: 0.3846vw solid #862D27;} /* YouTube Section */ .smile-pro-youtube-section {padding: 7.6923vw 0; background: #fcfcfc; } .smile-pro-youtube-section .inner {max-width: 92.3077vw; margin: 0 auto;} .smile-pro-youtube-section h2.title {font-size: 2.8205vw; margin-bottom: 4.1667vw; align-items: center; justify- gap: 1.0897vw;} .smile-pro-youtube-section h2.title .yt-icon {padding-top: 0.3205vw; } .youtube-flex { align-items: center; gap: 5.1282vw; } .thumbnail-area {width: 51.7308vw;height: 28.9744vw; border: 0.5128vw solid #ff0000; } .thumbnail-area iframe{width:100%;height:100%;} .thumbnail-area img {width: 100%; } .thumbnail-area .play-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5.1282vw; height: 5.1282vw; background: rgba(255,255,255,0.9) url('/img/play_icon.png') no-repeat center/1.9231vw; border-radius: 50%;} .youtube-flex .text-area {flex: 1;} .youtube-flex .text-area .tit {font-size: 2.1154vw; line-height: 1.4; margin-bottom: 2.2436vw;} .youtube-flex .text-area .tit .hl {} .youtube-flex .text-area .desc1 {font-size: 1.2179vw; margin-bottom: 1.6026vw; line-height: 1.7; word-break: keep-all;} .youtube-flex .text-area .desc2 {font-size: 1.2179vw; margin-bottom: 3.2051vw; line-height: 1.7; word-break: keep-all;} a.yt-link-btn { align-items: center; gap: 0.6410vw; background: #862D27; padding: 0.7051vw 1.9872vw; border-radius: 2.5641vw; font-size: 1.2179vw; transition: 0.3s;} a.yt-link-btn .btn-play-icon{padding-top:0.1282vw;} .yt-link-btn:hover {background: #000;} /* Recommend Section */ .smile-pro-recommend-section {padding: 7.6923vw 0; background: #fff; } .smile-pro-recommend-section .header h3 {font-size: 2.7564vw; margin-bottom: 1.2821vw; letter-spacing: -0.0641vw;} .smile-pro-recommend-section .header h2 {font-size: 2.7564vw; margin-bottom: 2.5641vw; letter-spacing: -0.0962vw;} .recommend-list {max-width: 55.7692vw; margin: 0 auto; flex-direction: column; gap: 1.2821vw;} .recommend-list .item {padding: 1.6026vw; border: 0.0641vw solid #eeeeee; border-radius: 3.2051vw; font-size: 1.4744vw; transition: 0.3s; box-shadow: 0 0.3205vw 0.9615vw rgba(0,0,0,0.02);} .recommend-list .item:hover {border- background: #fffafa;} /* Dynamic Section (Review & Event) */ .smile-pro-dynamic-section {padding: 7.6923vw 0; background:#FBFBFB;} .smile-pro-dynamic-section .inner {max-width: 115.3846vw; margin: 0 auto; width: 95%;} .dynamic-flex { gap: 3.8462vw;} .dynamic-box {flex: 1; min-width: 0;} .box-header { justify- align-items: flex-end; margin-bottom: 2.5641vw;} .box-header .tit-area h2 {font-size: 2.4359vw; margin-bottom: 1.7308vw; letter-spacing: -0.0641vw;} .box-header .tit-area h2 .hl {} .box-header .tit-area p {font-size: 1.2179vw; } .box-header .more-btn { padding: 0.7692vw 1.7949vw; background: #333; border-radius: 1.9231vw; font-size: 0.9615vw; transition: 0.3s;} .box-header .more-btn:hover {background: #000;} .list-area { padding-bottom: 2.5641vw;} .list-area .swiper-slide {width: 20.5128vw;} .list-area .img-wrap {width: 100%; aspect-ratio: 1/1; border-radius: 0.7692vw; margin-bottom: 1.4103vw; background: #f9f9f9; box-shadow: 0 0.3205vw 0.9615vw rgba(0,0,0,0.05);} .list-area .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-out;} .list-area .swiper-slide:hover img {transform: scale(1.08);} .list-area .txt-wrap .cat { font-size: 0.9615vw; margin-bottom: 0.5128vw;} .list-area .txt-wrap .subject {font-size: 1.2821vw; text- white-space: nowrap; transition: 0.3s;} .list-area .swiper-slide:hover .subject {} .swiper-scrollbar {height: 0.2564vw !important; background: #f0f0f0 !important; bottom: 0 !important; border-radius: 0.1282vw !important;} .swiper-scrollbar-drag {background: #ccc !important; border-radius: 0.1282vw !important;} /* ///////////////// icl pro 센터 3-2 ////////////////// */ .sub3-2_w .smile-pro-flex .right-text .desc-2{font-size:1.7949vw;} .sub3-2_w .smile-pro-youtube-section{background:#fff} .sub3-2_w .smile-pro-youtube-section h2.title{line-height: 4.1667vw;} .sub3-2_w .youtube-flex .text-area .tit{font-size:1.4744vw;} .main-sc-criteria {padding: 7.6923vw 0; background: #FBFBFB;} .main-sc-criteria .em {} .main-sc-criteria .s-main-ttl {font-size: 2.8205vw; letter-spacing: -0.02em;} .main-sc-criteria .s-main-desc {margin-top: 2.0513vw; font-size: 1.2179vw; line-height: 1.6; } .main-sc-criteria .criteria-swiper-wrap {margin-top: 3.8462vw; width:89.7436vw;margin:0 auto; } .main-sc-criteria .swiper-nav-area { top: 1.9231vw; left: 51%; align-items: center; gap: 2.5641vw; width: 100%;max-width:43.5897vw;justify-} .main-sc-criteria .swiper-fraction {font-size: 2.0513vw; font-family: 'Times New Roman', serif; } .main-sc-criteria .swiper-fraction .current { } .main-sc-criteria .swiper-buttons { gap: 0.6410vw;} .main-sc-criteria .swiper-buttons button {width: 6.1538vw; height: 3.8462vw; border-radius: 0.3205vw; background: #f8f8f8 no-repeat center; border: none; cursor: pointer; transition: background 0.3s;} .main-sc-criteria .swiper-buttons .btn-prev {background-image: url('../img/focus_left.png');} .main-sc-criteria .swiper-buttons .btn-next {background-image: url('../img/focus_right.png');} .main-sc-criteria .swiper-buttons button:hover {} .main-sc-criteria .criteria-container {margin-top: 2.5641vw;} .main-sc-criteria .slide-flex { align-items: flex-end; gap: 5.7692vw;height:33.1410vw} .main-sc-criteria .img-box {} .main-sc-criteria .img-box img {width:40.2564vw } .main-sc-criteria .info-box {flex: 1;padding-bottom: 3.0769vw;} .main-sc-criteria .info-ttl {font-size: 2.1154vw; } .main-sc-criteria .info-sub {margin-top: 1.6026vw; font-size: 1.4744vw; } .main-sc-criteria .info-desc {margin-top: 1.9231vw; font-size: 1.2179vw; line-height: 1.7; word-break: keep-all;} .main-sc-doctor { padding: 13.9103vw 0; background: url('../sub/img/s32doctor_bg.jpg') no-repeat center; } .main-sc-doctor .inner { } .main-sc-doctor .s-main-ttl {font-size: 2.7564vw; line-height: 1.3; letter-spacing: -0.03em; word-break: keep-all;} .main-sc-doctor .s-main-desc {margin-top: 2.0513vw; font-size: 1.4744vw; opacity: 0.9;} .main-sc-doctor .doctor-tags {margin-top: 6.4103vw; align-items: center; gap: 1.2821vw; flex-wrap: wrap;} .main-sc-doctor .tag {font-size: 1.4744vw; } .main-sc-doctor .tag:not(:last-child)::after {content: '·'; margin-left: 1.2821vw; } .sub3-2_w .main-sc-research{ background: url(../sub/img/s32main-sc-research_bg.jpg) no-repeat center;padding:6.3462vw 0} .main-sc-research .s-main-ttl {font-size: 2.8205vw; line-height: 1.3; letter-spacing: -0.03em;} .main-sc-research .s-main-desc {margin-top: 2.0513vw; font-size: 1.2179vw; line-height: 1.6; } /* ///////////////// 재교정 3-3 ////////////////// */ .smile-pro-flex .left-img{flex:1} .recali-data {padding: 9.9359vw 0; background: #FBFBFB; } .data-flex-wrap { align-items: center; max-width: 91.3462vw; margin: 0 auto; gap: 5.1282vw;} .data-txt-box {flex: 1;} .data-txt-box .title {font-size: 2.1154vw; line-height: 1.5; margin-bottom: 2.2436vw; letter-spacing: -0.0962vw; } .data-txt-box .title .red {} .data-txt-box .desc1 {font-size: 1.2179vw; margin-bottom: 2.2436vw;} .data-txt-box .desc2 {font-size: 1.2179vw; line-height: 1.7; } .data-txt-box .base-date { font-size: 1.0897vw; margin-top: 6.4103vw; } .data-graph-box { align-items: flex-end; gap: 9.6154vw;} .graph-item { } .graph-item .graph-tit {font-size: 1.3462vw; margin-top: 2.2436vw;} /* Bar Graph */ .bar-graph .chart-container { align-items: flex-end; gap: 2.8846vw; height: 19.2308vw; padding-bottom: 0.6410vw;} .bar-item {width: 4.4872vw; } .bar-item .bar-value {font-size: 1.2821vw; margin-bottom: 0.9615vw; opacity: 0; transform: translateY(0.6410vw); transition: all 0.5s 0.8s;} .bar-item.post .bar-value {} .recali-data.active .bar-item .bar-value {opacity: 1; transform: translateY(0);} .bar-item .bar-inner {width: 100%; height: 19.1026vw; background: transparent; } .bar-item .bar-fill {width: 100%; height: 0; bottom: 0; left: 0; border-radius: 0.7692vw 0.7692vw 0 0; transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);border-radius: 1.2821vw 1.2821vw 0 0;} .bar-item.pre .bar-fill {border-radius: 1.2821vw 1.2821vw 0 0;background: linear-gradient(180deg, #9A9A9A 0%, #E2E2E2 100%);} .bar-item.post .bar-fill {background: linear-gradient(180deg, #862D27 0%, #D0938F 136.91%);} .bar-item.pre .bar-value{bottom: 12.1795vw;left: 1.2179vw;} .recali-data.active .bar-item.pre .bar-fill {height: 10.0641vw;} .recali-data.active .bar-item.post .bar-fill {height: 19.1026vw;} .bar-item .bar-label {font-size: 1.2179vw; margin-top: 1.1538vw; white-space: nowrap;} .bar-item.pre .bar-label{font-weight:500} /* Circle Graph */ .circle-graph .chart-container { width: 19.2308vw; height: 19.2308vw;} .circle-graph svg {width: 100%; height: 100%; transform: rotate(-90deg);} .circle-graph circle {fill: none; stroke-width: 16; } .circle-graph circle.bg {stroke: #f3f3f3;} .circle-graph circle.active {stroke: #862D27; stroke-dasharray: 237.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s ease-in-out;} .recali-data.active .circle-graph circle.active {stroke-dashoffset: 5.03;} .circle-graph .percent-txt { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.2436vw; letter-spacing: -0.1282vw;} .circle-graph .note { top: -0.6410vw; right: 0; font-size: 0.9615vw; } /* 재교정 센터 인트로 */ .recali-center-intro {padding: 11.5385vw 0; background:url('../sub/img/recali_center_bg.jpg') no-repeat center / cover; background-attachment: fixed; } .recali-center-intro .inner {max-width: 91.3462vw; margin: 0 auto; padding: 0 1.2821vw;} .recali-center-intro .title {font-size: 2.1154vw; line-height: 1.6; margin-bottom: 2.0513vw; letter-spacing: -0.0962vw;} .recali-center-intro .desc {font-size: 1.2179vw; line-height: 1.7; opacity: 0.9; } /* ///////////////// 라식 라섹 4-1 ////////////////// */ /* 라식 라섹 비교 섹션 */ .lasik-vs-lasek { gap: 1.9231vw; margin-top: 3.8462vw; padding: 0 1.2821vw;margin-left: auto; margin-right: auto;justify-} .lasik-vs-lasek .comp-item {flex: 1; max-width: 45.5128vw;} .lasik-vs-lasek .img-box {width: 100%; margin-bottom: 1.9231vw; border-radius: 0.0000vw;} .lasik-vs-lasek .img-box img {width: 100%; } .lasik-vs-lasek .name {font-size: 2.1154vw; margin-bottom: 1.6026vw; letter-spacing: -0.0641vw;} .lasik-vs-lasek .hash-tags { flex-direction: column; gap: 0.5128vw;} .lasik-vs-lasek .tag-row { gap: 0.9615vw; font-size: 1.2179vw; white-space: nowrap;justify-} /* 올레이저 시스템 섹션 */ .all-laser-system {background: url(../sub/img/all-laser-system_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; padding: 7.6923vw 0; } .all-laser-system .inner {max-width: 91.3462vw; margin: 0 auto; padding: 0 1.2821vw;} .laser-flex-wrap { align-items: center; justify- gap: 6.4103vw;} .all-laser-system .img-box {flex: 1.2;} .all-laser-system .img-box img {width: 100%; } .all-laser-system .txt-box {flex: 1; } .all-laser-system .title {font-size: 2.8205vw; line-height: 1.3; margin-bottom: 2.5641vw; letter-spacing: -0.0962vw;} .all-laser-system .subtitle {font-size: 1.4744vw; margin-bottom: 1.9231vw; line-height: 1.5; } .all-laser-system .desc {font-size: 1.2179vw; line-height: 1.8; } /* 올레이저 라섹 섹션 */ .all-laser-lasek {padding: 7.6923vw 0; background: #F8F8F9; } .all-laser-lasek .inner {max-width: 92.3077vw; margin: 0 auto; } .all-laser-lasek .top-header {margin-bottom: 5.1282vw;} .all-laser-lasek .title {font-size: 2.8205vw; margin-bottom: 2.0513vw; letter-spacing: -0.0641vw;} .all-laser-lasek .desc {font-size: 1.2179vw; line-height: 1.6; } .lasek-content-wrap { align-items: center; justify- gap: 8.6538vw;} .all-laser-lasek .video-box {flex: 1.2; background: #000; border-radius: 0.0000vw; line-height: 0;} .all-laser-lasek .video-box video {width: 100%; } .all-laser-lasek .info-box {flex: 1; } .all-laser-lasek .item { padding-top: 0.6410vw; margin-bottom: 4.4872vw;} .all-laser-lasek .item:last-child {margin-bottom: 0;} .all-laser-lasek .num {font-size: 5.3846vw; opacity: 0.1; font-family: "EB Garamond", serif; left: -1.9231vw; top: -2.8846vw; } .all-laser-lasek .item-tit {font-size: 2.1154vw; margin-bottom: 1.2821vw; letter-spacing: -0.0321vw;} .all-laser-lasek .item-desc {font-size:1.4744vw; line-height: 1.6; } /* 비쥬맥스 시스템 섹션 */ .visumax-system {padding: 7.6923vw 0; background: #fff;} .visumax-system .inner {max-width: 92.3077vw; margin: 0 auto;} .visumax-flex-wrap { align-items: center; justify- gap: 6.4103vw;} .visumax-system .txt-box {flex: 1;} .visumax-system .img-box {flex: 1.2; } .visumax-system .img-box img {width: 100%; } .visumax-system .zeiss-logo { top: 2.5641vw; right: 2.5641vw; width: 5.7692vw;} .visumax-system .title {font-size: 2.1154vw; line-height: 1.4; margin-bottom: 3.8462vw; letter-spacing: -0.0962vw;} .visumax-system .title .red {} .visumax-system .feature-list {list-style: none; padding: 0; margin: 0;} .visumax-system .feature-list li { padding-left: 1.6026vw; margin-bottom: 1.6026vw; font-size: 1.4744vw; letter-spacing: -0.0321vw;} .visumax-system .feature-list li::before { left: 0; top: 0.7692vw; width: 0.3846vw; height: 0.3846vw; background: #393939; border-radius: 50%;} } @media (max-width: 1024px) { /* ///////////////// 스마일라식 2-1 ////////////////// */ .smile_youtube_section { padding: 100px 0; } .youtube_flex { flex-direction: column; gap: 50px; } .youtube_right { text-align: center; } .youtube_right .tit { font-size: 2.2rem; } .youtube_right .desc { font-size: 1.1rem; } .zeiss_top_flex { flex-direction: column; text-align: center; gap: 40px; } .zeiss_txt_side { text-align: center; } .zeiss_grid_wrap { gap: 20px; } /* ///////////////// 스마일프로 2-2 ////////////////// */ .smile-pro-section {} .smile-pro-section .section-title {font-size: 36px; margin-bottom: 40px;} .smile-pro-flex {flex-direction: column; gap: 40px;} .smile-pro-flex .right-text {text-align: center; font-size: 17px;} .smile-pro-flex .right-text .desc-3 {font-size: 19px;} .smile-pro-intro-section {padding: 80px 20px;} .smile-pro-intro-section .intro-header h3 {font-size: 26px; margin-bottom: 40px;} .smile-pro-intro-section .intro-footer {font-size: 17px;} .smile-pro-intro-section .intro-footer .txt-3 {font-size: 19px;} .smile-pro-intro-section .intro-img-wrap .badge-img {width: 80px; top: 15px; right: 15px;} .smile-pro-features-section {padding: 80px 20px;} .smile-pro-features-section .header .desc {margin-bottom: 60px;} .hexagon-wrap {width: 100%; height: auto; flex-direction: column; gap: 40px;} .feature-item {width: 100%; text-align: center !important;} .feature-item .num {margin-bottom: 10px;} .smile-pro-process-section {padding: 80px 20px;} .smile-pro-process-section .process-flex {flex-direction: column; text-align: center; gap: 50px;} .smile-pro-process-section .right-steps {align-items: center;} .smile-pro-points-section {padding: 80px 20px;} .smile-pro-points-section h2.title {font-size: 32px; margin-bottom: 60px;} .point-item, .point-item:nth-child(even) {flex-direction: column; gap: 40px;} .point-item .text-area {text-align: center;} .point-item .point-tit {font-size: 28px; margin-bottom: 20px;} .point-item .point-desc {font-size: 17px;} .smile-pro-points-section .watermark-text {display: none;} .dynamic-flex {gap: 40px;} .box-header .tit-area h2 {font-size: 30px;} .list-area .swiper-slide {width: 260px;} .smile-pro-compare-section {padding: 80px 20px;} .smile-pro-youtube-section {padding: 80px 20px;} .youtube-flex {flex-direction: column; text-align: center; gap: 40px;} .youtube-flex .text-area .tit {font-size: 26px;} .youtube-flex .text-area .desc1, .youtube-flex .text-area .desc2 {font-size: 17px;} .smile-pro-recommend-section {padding: 80px 20px;} .smile-pro-recommend-section .header h2 {font-size: 30px;} .recommend-list .item {font-size: 17px; padding: 20px;} .smile-pro-dynamic-section {padding: 80px 20px;} .dynamic-flex {flex-direction: column; gap: 80px;} .box-header {margin-bottom: 30px;} .smile-pro-flex .right-text .desc-2{font-size: 1.8179vw;} .smile-pro-intro-section .intro-footer .txt-2{font-size: 1.8179vw;} .smile-pro-features-section .header .desc{font-size: 1.8179vw;} .item-1 {top: -1.1719vw; left: -22.0352vw; } .item-2 {top: -1.1719vw; right: -21.6719vw; } .item-3 {top: 50%; right: -28.7813vw; transform: translateY(-50%); } .item-4 {bottom: 0; right: -18.6719vw; } .item-5 {bottom: 0; left: -18.6719vw;} .item-6 {top: 50%; left: -28.4141vw; transform: translateY(-50%);} .smile-pro-process-section {padding: 11.7188vw 0; } /* ///////////////// 스마일프로 2-2 ////////////////// */ .smile-pro-section {padding: 19.5313vw 0 11.7188vw; background: #fff;} .smile-pro-section .inner {max-width: 140.6250vw; margin: 0 auto;} .smile-pro-section .section-title { font-size: 4.8828vw; margin-bottom: 9.7656vw; letter-spacing: -0.1465vw;} .smile-pro-flex { align-items: center; gap: 7.3242vw;} .smile-pro-flex .left-img {flex: 1.4;} .smile-pro-flex .left-img img {width: 100%; } .smile-pro-flex .right-text {flex: 1; font-size: 1.8555vw; line-height: 1.8; word-break: keep-all;} .smile-pro-flex .right-text .desc-1 {margin-bottom: 2.9297vw;} .smile-pro-flex .right-text .desc-3 { font-size: 2.2461vw; line-height: 1.6; letter-spacing: -0.0488vw;} .smile-pro-intro-section { padding: 11.7188vw 0; } .smile-pro-intro-section .inner {max-width: 117.1875vw; margin: 0 auto;} .smile-pro-intro-section .intro-header h3 {font-size: 3.2227vw; line-height: 1.4; margin-bottom: 3.9063vw; letter-spacing: -0.1465vw;} .smile-pro-intro-section .intro-img-wrap { margin-bottom: 2.4414vw; border-radius: 0.0000vw; box-shadow: 0 1.9531vw 4.8828vw rgba(0,0,0,0.3);} .smile-pro-intro-section .intro-img-wrap .main-img {width: 100%; } .smile-pro-intro-section .intro-img-wrap .badge-img { top: 2.9297vw; right: 2.9297vw; width: 13.6719vw;} .smile-pro-intro-section .intro-img-wrap .badge-img img {width: 100%;} .smile-pro-intro-section .intro-footer {font-size: 2.2461vw; line-height: 1.7; word-break: keep-all; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-1 {margin-bottom: 3.9063vw; } .smile-pro-intro-section .intro-footer .txt-2 {margin-bottom: 3.9063vw; font-size: 1.8555vw; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-3 {font-size: 1.8555vw; } .smile-pro-features-section {padding: 11.7188vw 0; } .smile-pro-features-section .inner {max-width: 140.6250vw; margin: 0 auto;} .smile-pro-features-section .header .t1 {font-size: 4.2969vw; margin-bottom: 1.9531vw; letter-spacing: -0.0977vw;} .smile-pro-features-section .header .t2 {font-size: 4.2969vw; margin-bottom: 2.9297vw; letter-spacing: -0.1465vw;} .smile-pro-features-section .header .desc {font-size: 1.8555vw; line-height: 1.6; margin-bottom: 9.7656vw;} .feature-item { transition: 0.3s;} .smile-pro-process-section {padding: 11.7188vw 0; } .smile-pro-process-section .inner {max-width: 140.6250vw; margin: 0 auto;} .smile-pro-process-section h2.title {font-size: 4.2969vw; margin-bottom: 7.8125vw; letter-spacing: -0.1465vw;} .smile-pro-process-section h2.title .txt-red {} .smile-pro-process-section .process-flex { align-items: center; gap: 7.8125vw; } .smile-pro-process-section .left-video { width:78.8086vw;height:46.6797vw;} .smile-pro-process-section .left-video video {width: 100%; height: 100%;object-fit: cover;} .smile-pro-process-section .right-steps {flex: 1; flex-direction: column; gap: 5.6641vw;} .smile-pro-process-section .step-item { } .smile-pro-process-section .badge { padding:1.3672vw 2.3438vw; border-radius: 2.9297vw; font-size: 1.6602vw; margin-bottom: 1.5625vw;} .smile-pro-process-section .badge.gray {background: #999;} .smile-pro-process-section .badge.red {background: #862D27;} .smile-pro-process-section .badge.black {background: #333;} .smile-pro-process-section .step-tit {font-size: 2.2461vw; margin-bottom: 1.1719vw; letter-spacing: -0.0488vw;} .smile-pro-process-section .step-desc {font-size: 1.8555vw; } .smile-pro-points-section { padding: 11.7188vw 0; } .smile-pro-points-section .inner {max-width: 137.6953vw; margin: 0 auto; } .smile-pro-points-section h2.title { font-size: 4.2969vw; margin-bottom: 9.7656vw; letter-spacing: -0.1465vw;} .points-list { flex-direction: column; gap: 9.7656vw;} .point-item { align-items: center;} .point-item .img-area {} .point-item .img-area img {width: 100%; } .point-item .text-area {flex: 1;padding-top: 0.9766vw;} .point-item .point-badge { background: #fff; padding: 1.3672vw 2.1484vw; border-radius: 2.9297vw; font-size: 1.6602vw; margin-bottom: 5.8594vw;} .point-item .point-tit {font-size: 3.2227vw; margin-bottom: 1.9531vw; letter-spacing: -0.0977vw;} .point-item .point-desc {font-size: 1.8555vw; line-height: 1.7; word-break: keep-all;} .point-item .point-desc strong { margin-right: 0.4883vw;} .smile-pro-points-section .watermark-text { top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); font-size: 17.5781vw; color: rgba(255,255,255,0.03); white-space: nowrap; pointer-events: none; letter-spacing: 0.4883vw; } .smile-pro-compare-section {padding: 11.7188vw 0; background: #fff; } .smile-pro-compare-section .inner {max-width: 101.5625vw; margin: 0 auto;} .smile-pro-compare-section .header h2 {font-size: 4.2969vw; margin-bottom: 1.9531vw; letter-spacing: -0.1465vw;} .smile-pro-compare-section .header h2 .vs { margin: 0 0.0977vw;} .smile-pro-compare-section .header h2 strong{color:#862D27} .smile-pro-compare-section .header p {font-size: 1.7578vw; margin-bottom: 6.8359vw;} .compare-table-wrap {width: 100%; overflow-x: auto;} .compare-table {width: 100%; border-spacing: 0; } .compare-table th, .compare-table td {background: #F6F6F6;padding: 2.7344vw 1.4648vw; border: 0.0977vw solid #CFCFCF; font-size: 2.2461vw; } .compare-table thead th {background: #F6F6F6; font-size: 2.2461vw; border-bottom: 0.1953vw solid #ddd;} .compare-table thead th.col-vs {background: #fff; width: 28%; font-size: 2.2461vw; } .compare-table tbody th {background: #fff; width: 25%; font-size: 2.2461vw;} .compare-table .highlight { border-left: 0.5859vw solid #862D27; border-right: 0.5859vw solid #862D27; background: #FFF7F6; } .compare-table thead th.highlight {border-top: 0.5859vw solid #862D27;/* border-bottom: 0.5859vw solid #862D27; */} .compare-table tbody tr:last-child td.highlight {border-bottom: 0.5859vw solid #862D27;} /* YouTube Section */ .smile-pro-youtube-section {padding: 11.7188vw 0; background: #fcfcfc; } .smile-pro-youtube-section .inner {max-width: 140.6250vw; margin: 0 auto;} .smile-pro-youtube-section h2.title {font-size: 4.2969vw; margin-bottom: 6.3477vw; align-items: center; justify- gap: 1.6602vw;} .smile-pro-youtube-section h2.title .yt-icon {padding-top: 0.4883vw; } .youtube-flex { align-items: center; gap: 7.8125vw; } .thumbnail-area {width: 78.8086vw;height: 44.1406vw; border: 0.7813vw solid #ff0000; } .thumbnail-area iframe{width:100%;height:100%;} .thumbnail-area img {width: 100%; } .thumbnail-area .play-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7.8125vw; height: 7.8125vw; background: rgba(255,255,255,0.9) url('/img/play_icon.png') no-repeat center/2.9297vw; border-radius: 50%;} .youtube-flex .text-area {flex: 1;} .youtube-flex .text-area .tit {font-size: 3.2227vw; line-height: 1.4; margin-bottom: 3.4180vw;} .youtube-flex .text-area .tit .hl {} .youtube-flex .text-area .desc1 {font-size: 1.8555vw; margin-bottom: 2.4414vw; line-height: 1.7; word-break: keep-all;} .youtube-flex .text-area .desc2 {font-size: 1.8555vw; margin-bottom: 4.8828vw; line-height: 1.7; word-break: keep-all;} a.yt-link-btn { align-items: center; gap: 0.9766vw; background: #862D27; padding: 1.0742vw 3.0273vw; border-radius: 3.9063vw; font-size: 1.8555vw; transition: 0.3s;} a.yt-link-btn .btn-play-icon{padding-top:0.1953vw;} .yt-link-btn:hover {background: #000;} /* Recommend Section */ .smile-pro-recommend-section {padding: 11.7188vw 0; background: #fff; } .smile-pro-recommend-section .header h3 {font-size: 4.1992vw; margin-bottom: 1.9531vw; letter-spacing: -0.0977vw;} .smile-pro-recommend-section .header h2 {font-size: 4.1992vw; margin-bottom: 3.9063vw; letter-spacing: -0.1465vw;} .recommend-list {max-width: 84.9609vw; margin: 0 auto; flex-direction: column; gap: 1.9531vw;} .recommend-list .item {padding: 2.4414vw; border: 0.0977vw solid #eeeeee; border-radius: 4.8828vw; font-size: 2.2461vw; transition: 0.3s; box-shadow: 0 0.4883vw 1.4648vw rgba(0,0,0,0.02);} .recommend-list .item:hover {border- background: #fffafa;} /* Dynamic Section (Review & Event) */ .smile-pro-dynamic-section {padding: 11.7188vw 0; background:#FBFBFB;} .smile-pro-dynamic-section .inner {max-width: 175.7813vw; margin: 0 auto; width: 95%;} .dynamic-flex { gap: 5.8594vw;} .dynamic-box {flex: 1; min-width: 0;} .box-header { justify- align-items: flex-end; margin-bottom: 3.9063vw;} .box-header .tit-area h2 {font-size: 3.7109vw; margin-bottom: 2.6367vw; letter-spacing: -0.0977vw;} .box-header .tit-area h2 .hl {} .box-header .tit-area p {font-size: 1.8555vw; } .box-header .more-btn { padding: 1.1719vw 2.7344vw; background: #333; border-radius: 2.9297vw; font-size: 1.4648vw; transition: 0.3s;} .box-header .more-btn:hover {background: #000;} .list-area { padding-bottom: 3.9063vw;} .list-area .swiper-slide {width: 31.2500vw;} .list-area .img-wrap {width: 100%; aspect-ratio: 1/1; border-radius: 1.1719vw; margin-bottom: 2.1484vw; background: #f9f9f9; box-shadow: 0 0.4883vw 1.4648vw rgba(0,0,0,0.05);} .list-area .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-out;} .list-area .swiper-slide:hover img {transform: scale(1.08);} .list-area .txt-wrap .cat { font-size: 1.4648vw; margin-bottom: 0.7813vw;} .list-area .txt-wrap .subject {font-size: 1.9531vw; text- white-space: nowrap; transition: 0.3s;} .list-area .swiper-slide:hover .subject {} .swiper-scrollbar {height: 0.3906vw !important; background: #f0f0f0 !important; bottom: 0 !important; border-radius: 0.1953vw !important;} .swiper-scrollbar-drag {background: #ccc !important; border-radius: 0.1953vw !important;} /* ///////////////// icl pro 센터 3-2 ////////////////// */ .sub3-2_w .smile-pro-flex .right-text .desc-2{font-size: 2.2949vw;} .sub3-2_w .smile-pro-youtube-section h2.title{line-height: 5.1667vw;} .sub3-2_w .youtube-flex .text-area .tit{font-size: 3.2227vw;} /* ///////////////// 재교정 3-3 ////////////////// */ /* 재교정 ICL 기준 섹션 */ .recali-importance {padding: 9.7656vw 0; background: url(../sub/img/recali-importance_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; } .recali-importance .main-title {font-size: 4.1992vw; margin-bottom: 3.1250vw; letter-spacing: -0.0977vw;} .recali-importance .main-title .highlight {} .recali-importance .sub-desc {font-size: 1.8555vw; line-height: 1.8; margin-bottom: 1.2695vw; } .recali-box {max-width: 92.7734vw; margin: 9.7656vw auto 4.8828vw; background: #fff; border-radius: 1.9531vw; border: 0.0977vw solid #f0f0f0;} .recali-box .box-header {letter-spacing: -0.0488vw;height: 5.8594vw;justify-align-items: center;background: #393939;font-size: 2.7344vw; line-height: 148%;left: 50%;transform: translate(-50%, 0);top: -2.6367vw;width: 63.7695vw;} .reason-list {padding: 5.8594vw 8.3984vw; margin: 0;} .reason-list li { align-items: flex-start; padding: 2.4414vw ; font-size: 2.2461vw; border-bottom: 0.0977vw solid #C9C9C9; list-style: none;margin-bottom: 1.7578vw;} .reason-list li:last-child {margin-bottom: 0;} .reason-list li::before { width: 0.9766vw; height: 0.9766vw; background: #862D27; margin-top: 0.7813vw; margin-right: 1.9531vw; flex-shrink: 0;} .bottom-txt {font-size: 2.2461vw; margin-bottom: 2.4414vw;} a.btn-kakao { align-items: center; justify- background: #862D27; padding: 1.5625vw 4.3945vw; border-radius: 4.8828vw; font-size: 1.7578vw; text-decoration: none; transition: all 0.3s;} a.btn-kakao:hover {background: #6d241f; transform: translateY(-0.1953vw); text-decoration: none;} .btn-kakao i {margin-left: 0.9766vw; border: solid #fff; border-width: 0 0.1953vw 0.1953vw 0; padding: 0.2930vw; transform: rotate(-45deg);} .re_bar{width: 92.5781vw;height: 0.0977vw;background: #D4D4D4;margin: 0 auto 5.8594vw;} /* 퇴행 후 ICL 재교정 이유 섹션 */ .recali-why {padding: 11.7188vw 0; background: url(../sub/img/recali-why_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; } .recali-why .top-tit {font-size: 1.8555vw; opacity: 0.9; margin-bottom: 3.9063vw; letter-spacing: -0.0488vw;} .recali-why .main-tit {font-size: 4.1992vw; margin-bottom: 7.8125vw; letter-spacing: -0.1465vw;} .why-grid { flex-wrap: wrap; justify- gap: 7.8125vw; max-width: 107.4219vw; margin: 0 auto;} .why-item {background: #fff; width: 28.2227vw; height: 28.2227vw; border-radius: 50%; flex-direction: column; align-items: center; justify- padding: 1.9531vw; box-shadow: 0 0.9766vw 2.9297vw rgba(0,0,0,0.15); transition: transform 0.3s;} .why-item:hover {transform: translateY(-0.9766vw);} .why-item .icon {width: 1.9531vw; height: 1.9531vw; background: #862D27; border-radius: 50%; align-items: center; justify- margin-bottom: 1.4648vw; } .why-item .icon::after { width: 1.1719vw; height: 0.5859vw; border-left: 0.1953vw solid #fff; border-bottom: 0.1953vw solid #fff; transform: rotate(-45deg); margin-top: -0.1953vw;} .why-item .item-tit {font-size: 2.2461vw; margin-bottom: 1.3672vw; letter-spacing: -0.0488vw;} .why-item .item-desc {font-size: 1.8555vw; line-height: 1.5; word-break: keep-all;} /* 데이터 증명 섹션 */ .recali-data {padding: 15.1367vw 0; background: #FBFBFB; } .data-flex-wrap { align-items: center; margin: 0 auto; gap: 7.8125vw; flex-direction: column;} .data-txt-box {flex: 1;} .data-txt-box .title {font-size: 3.2227vw; line-height: 1.5; margin-bottom: 3.4180vw; letter-spacing: -0.1465vw; } .data-txt-box .title .red {} .data-txt-box .desc1 {font-size: 1.8555vw; margin-bottom: 3.4180vw;} .data-txt-box .desc2 {font-size: 1.8555vw; line-height: 1.7; } .data-txt-box .base-date { font-size: 1.6602vw; margin-top: 9.7656vw; } .data-graph-box { align-items: flex-end; justify- gap: 14.6484vw;} .graph-item { } .graph-item .graph-tit {font-size: 2.0508vw; margin-top: 3.4180vw;} /* Bar Graph */ .bar-graph .chart-container { align-items: flex-end; gap: 4.3945vw; height: 29.2969vw; padding-bottom: 0.9766vw;} .bar-item {width: 6.8359vw; } .bar-item .bar-value {font-size: 1.9531vw; margin-bottom: 1.4648vw; opacity: 0; transform: translateY(0.9766vw); transition: all 0.5s 0.8s;} .bar-item.post .bar-value {} .recali-data.active .bar-item .bar-value {opacity: 1; transform: translateY(0);} .bar-item .bar-inner {width: 100%; height: 29.1016vw; background: transparent; } .bar-item .bar-fill {width: 100%; height: 0; bottom: 0; left: 0; border-radius: 1.1719vw 1.1719vw 0 0; transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);border-radius: 1.9531vw 1.9531vw 0 0;} .bar-item.pre .bar-fill {border-radius: 1.9531vw 1.9531vw 0 0;background: linear-gradient(180deg, #9A9A9A 0%, #E2E2E2 100%);} .bar-item.post .bar-fill {background: linear-gradient(180deg, #862D27 0%, #D0938F 136.91%);} .bar-item.pre .bar-value{bottom: 18.5547vw;left: 1.8555vw;} .recali-data.active .bar-item.pre .bar-fill {height: 15.3320vw;} .recali-data.active .bar-item.post .bar-fill {height: 29.1016vw;} .bar-item .bar-label {font-size: 1.8555vw; margin-top: 1.7578vw; white-space: nowrap;} .bar-item.pre .bar-label{font-weight:500} /* Circle Graph */ .circle-graph .chart-container { width: 29.2969vw; height: 29.2969vw;} .circle-graph svg {width: 100%; height: 100%; transform: rotate(-90deg);} .circle-graph circle {fill: none; stroke-width: 16; } .circle-graph circle.bg {stroke: #f3f3f3;} .circle-graph circle.active {stroke: #862D27; stroke-dasharray: 237.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s ease-in-out;} .recali-data.active .circle-graph circle.active {stroke-dashoffset: 5.03;} .circle-graph .percent-txt { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 3.4180vw; letter-spacing: -0.1953vw;} .circle-graph .note { top: -0.9766vw; right: 0; font-size: 1.4648vw; } /* 재교정 센터 인트로 */ .recali-center-intro {padding: 17.5781vw 0; background:url('../sub/img/recali_center_bg.jpg') no-repeat center / cover; background-attachment: fixed; } .recali-center-intro .inner {max-width: 139.1602vw; margin: 0 auto; padding: 0 1.9531vw;} .recali-center-intro .title {font-size: 3.2227vw; line-height: 1.6; margin-bottom: 3.1250vw; letter-spacing: -0.1465vw;} .recali-center-intro .desc {font-size: 1.8555vw; line-height: 1.7; opacity: 0.9; } /* ///////////////// 라식 라섹 4-1 ////////////////// */ .visumax-system {padding: 80px 0;} .visumax-flex-wrap {flex-direction: column; text-align: center; gap: 50px;} .visumax-system .txt-box {order: 2;} .visumax-system .img-box {order: 1; width: 100%;} .visumax-system .title {font-size: 28px; margin-bottom: 30px;} .visumax-system .feature-list {display: inline-block; text-align: left;} .visumax-system .feature-list li {font-size: 18px; margin-bottom: 15px;} .visumax-system .zeiss-logo {width: 60px; top: 20px; right: 20px;} .all-laser-lasek {padding: 80px 0;} .lasek-content-wrap {flex-direction: column; text-align: center; gap: 50px;} .all-laser-lasek .info-box {text-align: center; width: 100%;} .all-laser-lasek .num {left: 50%; transform: translateX(-50%);} .all-laser-lasek .title {font-size: 3.6205vw;} .all-laser-lasek .item-tit {font-size: 3.1154vw;} .all-laser-system {padding: 80px 0; margin-top: 80px;} .laser-flex-wrap {flex-direction: column; text-align: center; gap: 40px;} .all-laser-system .txt-box {text-align: center;} .all-laser-system .title {font-size: 34px; margin-bottom: 25px;} .all-laser-system .subtitle {font-size: 20px; margin-bottom: 20px;} .all-laser-system .desc {font-size: 17px;} .lasik-vs-lasek .tag-row{font-size: 1.8179vw;} .lasik-vs-lasek .name{font-size: 2.6154vw;} .all-laser-lasek .desc{font-size: 1.8179vw;} .all-laser-lasek .item-desc{font-size: 2.1744vw;} .lasik-vs-lasek .comp-item{max-width: 73.5128vw;} .lasik-vs-lasek .img-box{} } @media (max-width: 1000px) { .transport-guide-section {padding: 80px 20px;} .transport-guide-section .transport-flex {flex-direction: column;} .transport-guide-section .info-box {padding: 30px; flex-direction: column; border-radius: 20px;} .transport-guide-section .box-tit {width: 100%; margin-bottom: 20px;} .transport-guide-section .scroll-area {max-height: 350px;} .transport-guide-section .transport-right .map-guide-img {border-radius: 20px;} .loc-wrap{flex-wrap: wrap;} .loc-left{width:100%} .loc-right{width:100%} } @media (max-width: 768px) { /* 오시는길 */ .loc-premium-section {padding: 60px 20px; margin-top: 60px;} .loc-premium-section .map-img-box {border-radius: 20px; margin-bottom: 40px;} .loc-premium-section .info-addr {font-size: 28px; margin-bottom: 15px;} .loc-premium-section .info-floor {font-size: 16px; margin-bottom: 35px;} .loc-premium-section .info-btns {flex-direction: column; gap: 12px; margin-bottom: 50px;} .loc-premium-section .info-btn {width: 100%; height: 55px; padding: 0 20px;} .loc-premium-section .info-parking {font-size: 15px;} /* ///////////////// 스마일라식 2-1 ////////////////// */ .smile_feature_inner { flex-direction: column; gap: 60px; } .smile_side { text-align: center !important; gap: 60px; } .feature_box .en { font-size: 12vw; } .feature_box .ko { font-size: 1.5rem; } .smile_center { flex: 0 0 300px; width: 300px; height: 300px; order: -1; } .dia_line { height: 50px; } .video_overlay { padding: 20px; } .video_tit { font-size: 1.5rem; } .play_btn svg { width: 60px; height: 60px; } .video_text_area .desc_txt { font-size: 1.1rem; margin-bottom: 40px; } .highlight_box { font-size: 1.15rem; padding: 30px 20px; width: 100%; box-sizing: border-box; } .smile_youtube_section { padding: 60px 0; } .youtube_right .tit { font-size: 1.8rem; } .video_caption { font-size: 14px; } .zeiss_partner_section { padding: 80px 0; } .zeiss_txt_side .tit { font-size: 1.8rem; } .zeiss_grid_wrap { grid-template-columns: 1fr 1fr; gap: 50px; } .zeiss_grid_wrap .caption { font-size: 1.1rem; } .zeiss_logo { width: 60px; top: 15px; right: 15px; } .smile_feature_wrap{ padding: 18.6154vw 0;} .smile_feature_wrap .section_title{font-size:5.4688vw;} .feature_box .desc{ font-size: 2.3438vw;} .feature_box .desc span{font-size: 1.9615vw;} .youtube_left{width: 88.9359vw;} .zeiss_txt_side .desc{font-size:2.2179vw} .main-sc-center .item-desc b{font-size: 2.4744vw;} .dream-adv .adv-item{max-width: calc(50% - 1rem);} .dream-adv .adv-grid{gap: 6.9rem 1.25rem;} /* ///////////////// 스마일프로 2-2 ////////////////// */ .feature-item .num { height: 3.9063vw;padding: 0 1.4648vw; line-height: 3.9063vw; background: #570C07; border-radius:2.9297vw; margin-bottom: 1.7578vw; font-size: 2.2461vw;} .feature-item p {font-size: 2.2461vw; line-height: 1.8; word-break: keep-all; letter-spacing: -0.0488vw;} /* ///////////////// 스마일센터 2-3 ////////////////// */ .main-sc-zeiss {padding: 60px 0;} .main-sc-zeiss .zeiss-card-area {gap: 15px;} .main-sc-zeiss .card-item {width: 100%; max-width: 180px;} .main-sc-zeiss .s-main-ttl {font-size: 32px;} .main-sc-zeiss .s-main-desc {margin-top: 25px; font-size: 16px;} .main-sc-zeiss .zeiss-bg-text {font-size: 80px; bottom: -10px;} .main-sc-research {padding: 60px 0;} .main-sc-research .s-main-ttl {font-size: 30px;} .main-sc-research .s-main-desc {margin-top: 20px; font-size: 15px;} .main-sc-research .research-swiper-container {margin-top: 40px;} .main-sc-research .research-pagination .swiper-pagination-bullet {width: 40px;} .main-sc-center {padding: 60px 0;} .main-sc-center .s-main-ttl {font-size: 36px;} .main-sc-center .center-list-wrap {margin-top: 40px; gap: 40px; flex-wrap: wrap;} .main-sc-center .center-item {width: 100%; max-width: 400px;flex: unset;} .main-sc-center .point-badge {margin-top: 20px;} .main-sc-center .item-ttl {font-size: 20px;} .main-sc-zeiss .zeiss-flex-wrap{flex-wrap: wrap;} /* ///////////////// icl pro 센터 3-2 ////////////////// */ .smile-pro-flex .right-text .desc-2{font-size:2.6458vw;} .sub3-2_w .smile-pro-youtube-section{background:#fff} .sub3-2_w .smile-pro-youtube-section h2.title{line-height: 8.4635vw;} .sub3-2_w .youtube-flex .text-area .tit{font-size:2.9948vw;} .main-sc-criteria {padding: 15.6250vw 0; background: #FBFBFB;} .main-sc-criteria .em {display: block;} .main-sc-criteria .s-main-ttl {font-size: 5.7292vw; line-height: 6.7292vw; letter-spacing: -0.02em;} .main-sc-criteria .s-main-desc {margin-top: 4.1667vw; font-size: 2.4740vw; line-height: 1.6; } .main-sc-criteria .criteria-swiper-wrap {margin-top: 7.8125vw; width:92.2917vw;margin:0 auto;line-height: 6.7292vw; } .main-sc-criteria .swiper-nav-area { top: -13vw; left: 0%; align-items: center; gap: 5.2083vw; width: 100%;max-width:88.5417vw;justify-} .main-sc-criteria .swiper-fraction {font-size: 4.1667vw; font-family: 'Times New Roman', serif; } .main-sc-criteria .swiper-fraction .current { } .main-sc-criteria .swiper-buttons { gap: 1.3021vw;} .main-sc-criteria .swiper-buttons button {width: 12.5000vw; height: 7.8125vw; border-radius: 0.6510vw; background: #f8f8f8 no-repeat center; border: none; cursor: pointer; transition: background 0.3s;} .main-sc-criteria .swiper-buttons .btn-prev {background-image: url('../img/focus_left.png');} .main-sc-criteria .swiper-buttons .btn-next {background-image: url('../img/focus_right.png');} .main-sc-criteria .swiper-buttons button:hover {} .main-sc-criteria .criteria-container {margin-top: 20.2083vw;} .main-sc-criteria .slide-flex { align-items: flex-end; gap: 11.7188vw;height:auto;flex-wrap: wrap;justify-content:center} .main-sc-criteria .img-box {} .main-sc-criteria .img-box img {width: 100%; } .main-sc-criteria .info-box {flex: 1;padding-bottom: 6.2500vw;} .main-sc-criteria .info-ttl {font-size: 4.2969vw; } .main-sc-criteria .info-sub {margin-top: 3.2552vw; font-size: 2.9948vw; } .main-sc-criteria .info-desc {margin-top: 3.9063vw; font-size: 2.4740vw; line-height: 1.7; word-break: keep-all;} .main-sc-doctor { padding: 28.2552vw 0; background: url('../sub/img/s32doctor_bg.jpg') no-repeat center; } .main-sc-doctor .inner { } .main-sc-doctor .s-main-ttl {font-size: 5.5990vw; line-height: 1.3; letter-spacing: -0.03em; word-break: keep-all;} .main-sc-doctor .s-main-desc {margin-top: 4.1667vw; font-size: 2.9948vw; opacity: 0.9;} .main-sc-doctor .doctor-tags {margin-top: 13.0208vw; justify- align-items: center; gap: 2.6042vw; flex-wrap: wrap;} .main-sc-doctor .tag {font-size: 2.9948vw; } .main-sc-doctor .tag:not(:last-child)::after {content: '·'; margin-left: 2.6042vw; } .sub3-2_w .main-sc-research{ background: url(../sub/img/s32main-sc-research_bg.jpg) no-repeat center;padding:12.8906vw 0} .main-sc-research .s-main-ttl {font-size: 5.7292vw; line-height: 1.3; letter-spacing: -0.03em;} .main-sc-research .s-main-desc {margin-top: 4.1667vw; font-size: 2.4740vw; line-height: 1.6; } .sub3-2_w .smile-pro-flex .right-text .desc-2{font-size: 3.2949vw;} } @media (max-width: 480px) { .sub_bg_wrap{width:100%;margin:0 auto;height:107.8571vw;overflow:hidden} .sub_top_text{margin:0 auto;left: 50%;top: 56%;transform: translate(-50%, -50%);z-index:1} .sub_top_text div{} .sub_top_text h2{padding-top: 2vw;font-size:3.2143vw;padding-bottom:4.4643vw;} .sub_top_text h2.ivy{font-size:5.0000vw;padding-bottom:8.2143vw} .sub_top_text h3{font-size:5.8929vw;padding-bottom:9.8214vw;} .sub_top_text h4{font-size:3.2143vw;padding-bottom:6.7857vw;} .sub_top_text p{font-size:3.5714vw;line-height:5.7143vw;} /* 오시는길 */ .location-section{padding: 22.9286vw 0;} .loc_txx p{line-height: 5.2143vw;font-size: 3.2143vw;} .loc_txx{ border-bottom: 0.3571vw solid #dfdddd;padding: 4.9286vw 5.3571vw 6.2500vw;} .loc-premium-section .info-addr{font-size: 5.3571vw;} .transport-guide-section .info-box {border: 0.1786vw solid #f2f2f2; border-radius: 5.3571vw; padding: 5.0000vw 8.9286vw; margin-bottom: 3.5714vw;} .transport-guide-section .info-box:last-child {margin-bottom: 0;padding: 6.2500vw 8.9286vw;} .transport-guide-section .box-tit {flex-shrink: 0; width: 32.1429vw; font-size: 3.7500vw; align-items: flex-start; gap: 2.1429vw; padding-top: 0.8929vw;} .transport-guide-section .box-tit img {width: 3.5714vw;} .transport-guide-section .bus-box .box-tit{padding-top: 0.0000vw;} .transport-guide-section .box-content {flex-grow: 1; font-size: 3.0357vw; line-height: 1.8; } .transport-guide-section .box-content strong { } .transport-guide-section .box-content p {margin-bottom: 0.8929vw;} .transport-guide-section .bus-box .scroll-area {flex-grow: 1; max-height: 85.7143vw; overflow-y: auto; padding-right: 3.5714vw;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar {width: 0.7143vw;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar-track {background: transparent;} .transport-guide-section .bus-box .scroll-area::-webkit-scrollbar-thumb {background: #ccc; border-radius: 1.7857vw;} .transport-guide-section .bus-item {margin-bottom: 7.1429vw;} .transport-guide-section .bus-item:last-child {margin-bottom: 0;} .transport-guide-section .stop-name { font-size: 3.0357vw; margin-bottom: 3.5714vw;} .transport-guide-section .bus-info-line {margin-bottom: 1.7857vw; font-size: 3.0357vw;} .transport-guide-section .bus-info-line strong { width: 8.0357vw; flex-shrink: 0;} .transport-guide-section .bus-info-line strong em{padding-left:0.5357vw} .transport-guide-section .bus-item01 .bus-info-line strong em{padding-left:0.1786vw} .transport-guide-section .bus-info-line.bus-info-line2 span{line-height:3.9286vw;} /* ///////////////// 스마일라식 2-1 ////////////////// */ .feature_box .desc{font-size: 3.3438vw;} .feature_box .en{font-size:8vw} .feature_box .desc span{font-size: 2.9615vw;} .smile_feature_wrap{padding: 22.6154vw 0;} .smile_feature_wrap .section_title{font-size:2rem} .smile_video_section{padding: 20.6923vw 0} .video_wrap{max-width: 91.4487vw;} .video_caption{margin-top: 2.9615vw;} .zeiss_txt_side .desc{font-size:1.1rem} .zeiss_top_flex{max-width:95vw} .zeiss_grid_wrap{gap:5vw 2vw} .zeiss_grid_wrap .thumb{margin-bottom: 2.2821vw;} .smile_youtube_section{padding:20vw 0} .main-sc-center .item-desc b{font-size: 4.4744vw;} .s-main-ttl{font-size: 5.8929vw;} .dream-adv .adv-item{max-width:100%;} /* ///////////////// 스마일프로 2-2 ////////////////// */ .smile-pro-section {padding: 35.7143vw 0 21.4286vw; background: #fff;} .smile-pro-section .inner {max-width: 257.1429vw; margin: 0 auto;} .smile-pro-section .section-title { font-size: 7.9286vw; margin-bottom: 5.8571vw; letter-spacing: -0.2679vw;} .smile-pro-flex { align-items: center; gap: 8.3929vw;} .smile-pro-flex .left-img {flex: 1.4;} .smile-pro-flex .left-img img {width: 100%; } .smile-pro-flex .right-text {flex: 1; font-size: 3.3929vw; line-height: 1.8; word-break: keep-all; width: 100%;} .smile-pro-flex .right-text .desc-1 {margin-bottom: 5.3571vw;} .smile-pro-flex .right-text .desc-1 strong { } .smile-pro-flex .right-text .desc-2 {margin-bottom: 5.3571vw; font-size: 3.3929vw; } .smile-pro-flex .right-text .desc-3 { font-size: 4.1071vw; line-height: 1.6; letter-spacing: -0.0893vw;} .smile-pro-intro-section { padding: 21.4286vw 0; } .smile-pro-intro-section .inner {max-width: 214.2857vw; margin: 0 auto;} .smile-pro-intro-section .intro-header h3 {font-size: 5.8929vw; line-height: 1.4; margin-bottom: 7.1429vw; letter-spacing: -0.2679vw;} .smile-pro-intro-section .intro-img-wrap { margin-bottom: 4.4643vw; border-radius: 0.0000vw; box-shadow: 0 3.5714vw 8.9286vw rgba(0,0,0,0.3);} .smile-pro-intro-section .intro-img-wrap .main-img {width: 100%; } .smile-pro-intro-section .intro-img-wrap .badge-img { top: 5.3571vw; right: 5.3571vw; width: 25.0000vw;} .smile-pro-intro-section .intro-img-wrap .badge-img img {width: 100%;} .smile-pro-intro-section .intro-footer {font-size: 4.1071vw; line-height: 1.7; word-break: keep-all; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-1 {margin-bottom: 3.1429vw;font-size: 3.7929vw; } .smile-pro-intro-section .intro-footer .txt-2 {margin-bottom: 3.1429vw; font-size: 3.3929vw; color: rgba(255,255,255,1);} .smile-pro-intro-section .intro-footer .txt-3 {font-size: 3.3929vw; } .smile-pro-features-section {padding: 21.4286vw 0; } .smile-pro-features-section .inner {max-width: 257.1429vw; margin: 0 auto;} .smile-pro-features-section .header .t1 {font-size: 5.8929vw; margin-bottom: 2.5714vw; letter-spacing: -0.1786vw;} .smile-pro-features-section .header .t2 {font-size: 5.8929vw; margin-bottom: 5.3571vw; letter-spacing: -0.2679vw;} .smile-pro-features-section .header .desc {font-size: 3.3929vw; line-height: 1.6; margin-bottom: 7.8571vw;} .hexagon-outer{width: 84.8718vw; height: 92.8718vw;} .hexagon-inner{width:100%;height:100%;} .feature-item {position: unset;transform:none} .feature-item .num { height: 7.1429vw;padding: 0 2.6786vw; line-height: 7.1429vw; background: #570C07; border-radius:5.3571vw; margin-bottom: 3.2143vw; font-size: 4.1071vw;} .feature-item p {font-size: 3.5071vw; line-height: 1.5; word-break: keep-all; letter-spacing: -0.0893vw;} .feature-item_w{display: grid; grid-template-columns: 1fr 1fr;gap: 8vw 0;} .smile-pro-process-section {padding: 21.4286vw 0; } .smile-pro-process-section .inner {max-width: 257.1429vw; margin: 0 auto;} .smile-pro-process-section h2.title {font-size: 5.8929vw; margin-bottom: 5.2857vw; letter-spacing: -0.2679vw;} .smile-pro-process-section h2.title .txt-red {} .smile-pro-process-section .process-flex { align-items: center; gap: 9.2857vw; } .smile-pro-process-section .left-video { width:144.1071vw;height:85.3571vw;} .smile-pro-process-section .left-video video {width: 100%; height: 100%;object-fit: cover;} .smile-pro-process-section .right-steps {flex: 1; flex-direction: column; gap: 10.3571vw;} .smile-pro-process-section .step-item { } .smile-pro-process-section .badge { padding:2.5000vw 4.2857vw; border-radius: 5.3571vw; font-size: 3.0357vw; margin-bottom: 2.8571vw;} .smile-pro-process-section .badge.gray {background: #999;} .smile-pro-process-section .badge.red {background: #862D27;} .smile-pro-process-section .badge.black {background: #333;} .smile-pro-process-section .step-tit {font-size: 4.1071vw; margin-bottom: 2.1429vw; letter-spacing: -0.0893vw;} .smile-pro-process-section .step-desc {font-size: 3.3929vw; } .smile-pro-points-section { padding: 21.4286vw 0; } .smile-pro-points-section .inner {max-width: 251.7857vw; margin: 0 auto; } .smile-pro-points-section h2.title { font-size: 5.8929vw; margin-bottom: 6.8571vw; letter-spacing: -0.2679vw;} .points-list { flex-direction: column; gap: 17.8571vw;} .point-item .img-area {} .point-item .img-area img {width: 100%; } .point-item .text-area {flex: 1;padding-top: 1.7857vw;} .point-item .point-badge { background: #fff; padding: 2.5000vw 3.9286vw; border-radius: 5.3571vw; font-size: 3.0357vw; margin-bottom: 5.7143vw;} .point-item .point-tit {font-size: 4.8929vw; margin-bottom: 3.5714vw; letter-spacing: -0.1786vw;} .point-item .point-desc {font-size: 3.3929vw; line-height: 1.7; word-break: keep-all;} .point-item .point-desc strong { margin-right: 0.8929vw;} .smile-pro-points-section .watermark-text { top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); font-size: 32.1429vw; color: rgba(255,255,255,0.03); white-space: nowrap; pointer-events: none; letter-spacing: 0.8929vw; } .smile-pro-compare-section {padding: 21.4286vw 0; background: #fff; } .smile-pro-compare-section .inner {max-width: 185.7143vw; margin: 0 auto;} .smile-pro-compare-section .header h2 {font-size: 5.8929vw; margin-bottom: 3.5714vw; letter-spacing: -0.2679vw;} .smile-pro-compare-section .header h2 .vs { margin: 0 0.1786vw;} .smile-pro-compare-section .header h2 strong{color:#862D27} .smile-pro-compare-section .header p {font-size: 3.3929vw; margin-bottom: 12.5000vw;} .compare-table-wrap {width: 100%; overflow-x: auto;} .compare-table {width: 100%; border-spacing: 0; } .compare-table th, .compare-table td {background: #F6F6F6;padding: 5.0000vw 2.6786vw; border: 0.1786vw solid #CFCFCF; font-size: 4.1071vw; } .compare-table thead th {background: #F6F6F6; font-size: 4.1071vw; border-bottom: 0.3571vw solid #ddd;} .compare-table thead th.col-vs {background: #fff; width: 28%; font-size: 4.1071vw; } .compare-table tbody th {background: #fff; width: 25%; font-size: 4.1071vw;} .compare-table .highlight { border-left: 1.0714vw solid #862D27; border-right: 1.0714vw solid #862D27; background: #FFF7F6; } .compare-table thead th.highlight {border-top: 1.0714vw solid #862D27;/* border-bottom: 1.0714vw solid #862D27; */} .compare-table tbody tr:last-child td.highlight {border-bottom: 1.0714vw solid #862D27;} /* YouTube Section */ .smile-pro-youtube-section {padding: 14.4286vw 0; background: #fcfcfc; } .smile-pro-youtube-section .inner {max-width: 257.1429vw; margin: 0 auto;} .smile-pro-youtube-section h2.title {font-size: 5.8929vw; margin-bottom: 3.6071vw; align-items: center; justify- gap: 3.0357vw;} .smile-pro-youtube-section h2.title .yt-icon {padding-top: 0.8929vw; } .smile-pro-youtube-section h2.title .yt-icon svg{width:10vw} .youtube-flex { align-items: center; gap: 14.2857vw; } .thumbnail-area {width: 94.1071vw;height: 55.7143vw; border: 1.4286vw solid #ff0000; } .thumbnail-area iframe{width:100%;height:100%;} .thumbnail-area img {width: 100%; } .thumbnail-area .play-btn { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 14.2857vw; height: 14.2857vw; background: rgba(255,255,255,0.9) url('/img/play_icon.png') no-repeat center/5.3571vw; border-radius: 50%;} .youtube-flex .text-area {flex: 1;} .youtube-flex .text-area .tit {font-size: 5.8929vw; line-height: 1.4; margin-bottom: 6.2500vw;} .youtube-flex .text-area .tit .hl {} .youtube-flex .text-area .desc1 {font-size: 3.3929vw; margin-bottom: 4.4643vw; line-height: 1.5; word-break: keep-all;} .youtube-flex .text-area .desc2 {font-size: 3.3929vw; margin-bottom: 8.9286vw; line-height: 1.5; word-break: keep-all;} a.yt-link-btn { align-items: center; gap: 1.7857vw; background: #862D27; padding: 1.9643vw 5.5357vw; border-radius: 7.1429vw; font-size: 3.3929vw; transition: 0.3s;} a.yt-link-btn .btn-play-icon{padding-top:0.3571vw;} .yt-link-btn:hover {background: #000;} /* Recommend Section */ .smile-pro-recommend-section {padding: 21.4286vw 0; background: #fff; } .smile-pro-recommend-section .header h3 {font-size: 5.8929vw; margin-bottom: 2.5714vw; letter-spacing: -0.1786vw;} .smile-pro-recommend-section .header h2 {font-size: 5.8929vw; margin-bottom: 7.1429vw; letter-spacing: -0.2679vw;} .recommend-list {max-width: 92.3571vw; margin: 0 auto; flex-direction: column; gap: 3.5714vw;} .recommend-list .item {padding: 4.4643vw; border: 0.1786vw solid #eeeeee; border-radius: 8.9286vw; font-size: 3.6071vw; transition: 0.3s; box-shadow: 0 0.8929vw 2.6786vw rgba(0,0,0,0.02);} .recommend-list .item:hover {border- background: #fffafa;} /* Dynamic Section (Review & Event) */ .smile-pro-dynamic-section {padding: 21.4286vw 0; background:#FBFBFB;} .smile-pro-dynamic-section .inner {max-width: 321.4286vw; margin: 0 auto; width: 95%;} .dynamic-flex { gap: 10.7143vw;} .dynamic-box {flex: 1; min-width: 0;} .box-header { justify- align-items: flex-end; margin-bottom: 7.1429vw;} .box-header .tit-area h2 {font-size: 6.7857vw; margin-bottom: 4.8214vw; letter-spacing: -0.1786vw;} .box-header .tit-area h2 .hl {} .box-header .tit-area p {font-size: 3.3929vw; } .box-header .more-btn { padding: 2.1429vw 5.0000vw; background: #333; border-radius: 5.3571vw; font-size: 2.6786vw; transition: 0.3s;} .box-header .more-btn:hover {background: #000;} .list-area { padding-bottom: 7.1429vw;} .list-area .swiper-slide {width: 57.1429vw;} .list-area .img-wrap {width: 100%; aspect-ratio: 1/1; border-radius: 2.1429vw; margin-bottom: 3.9286vw; background: #f9f9f9; box-shadow: 0 0.8929vw 2.6786vw rgba(0,0,0,0.05);} .list-area .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: 0.6s ease-out;} .list-area .swiper-slide:hover img {transform: scale(1.08);} .list-area .txt-wrap .cat { font-size: 2.6786vw; margin-bottom: 1.4286vw;} .list-area .txt-wrap .subject {font-size: 3.5714vw; text- white-space: nowrap; transition: 0.3s;} .list-area .swiper-slide:hover .subject {} .swiper-scrollbar {height: 0.7143vw !important; background: #f0f0f0 !important; bottom: 0 !important; border-radius: 0.3571vw !important;} .swiper-scrollbar-drag {background: #ccc !important; border-radius: 0.3571vw !important;} /* ///////////////// 스마일센터 2-3 ////////////////// */ .smile-pro-flex .right-text .title01{font-size: 5.8929vw;line-height: 1.3;} .main-sc-zeiss .s-main-ttl{font-size: 5.8929vw;line-height: 1.3;} .main-sc-zeiss .zeiss-flex-wrap{gap:8vw} .main-sc-zeiss .zeiss-txt-area{padding:0 8vw} .sub2-3_w .smile-pro-intro-section .intro-header h3{font-size: 5.8929vw;line-height: 1.3;margin-bottom:3.8929vw} .sub2-3_w .smile-pro-intro-section .intro-header p{font-size: 3.3929vw;} .sub2-3_w .smile-pro-intro-section .intro-footer{line-height: 7.1071vw;} .main-sc-research .s-main-ttl{font-size: 5.8929vw;} .main-sc-research .s-main-desc{font-size: 3.3929vw;} .main-sc-research .research-progress-bar{max-width:80%} .main-sc-center .s-main-ttl{font-size: 5.8929vw;} .main-sc-center .s-main-desc{font-size: 3.3929vw;;margin-top:4.3929vw} /* ///////////////// icl pro 센터 3-2 ////////////////// */ .sub3-2_w .smile-pro-section.cl .section-title{ font-size: 7.9286vw;} .sub3-2_w .smile-pro-flex .right-text .desc-2,.smile-pro-flex .right-text .desc-1{font-size: 4.2949vw;} .sub3-2_w .youtube-flex .text-area .tit{font-size: 5.8929vw;} .main-sc-criteria .s-main-ttl{font-size:5.8929vw; line-height: 7.4635vw;} .main-sc-criteria .s-main-desc{ font-size: 3.3929vw;} /* ///////////////// 재교정 3-3 ////////////////// */ /* 재교정 ICL 기준 섹션 */ .recali-importance {padding: 17.8571vw 0; background: url(../sub/img/recali-importance_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; } .recali-importance .main-title {font-size: 6.6786vw; margin-bottom: 5.7143vw; letter-spacing: -0.1786vw;} .recali-importance .main-title .highlight {} .recali-importance .sub-desc {font-size: 3.3929vw; line-height: 1.8; margin-bottom: 2.3214vw; } .recali-box {margin: 17.8571vw auto 8.9286vw; background: #fff; border-radius: 3.5714vw; border: 0.1786vw solid #f0f0f0;} .recali-box .box-header {letter-spacing: -0.0893vw;height: 10.7143vw;align-items: center;background: #393939;font-size: 4.0000vw; line-height: 148%;left: 50%;transform: translate(-50%, 0);top: -4.8214vw;width: 86.6071vw;} .reason-list {padding: 10.7143vw 2.3571vw; margin: 0;} .reason-list li { align-items: flex-start; padding: 4.4643vw ; font-size: 4.1071vw; border-bottom: 0.1786vw solid #C9C9C9; list-style: none;margin-bottom: 3.2143vw;display: block;line-height: 5.2143vw;text-align: center;} .reason-list li:last-child {margin-bottom: 0;} .reason-list li::before { display:block; width: 1.7857vw; height: 1.7857vw; background: #862D27; margin-top: 1.4286vw; margin-right: 3.5714vw; flex-shrink: 0;margin: 0 auto 2vw; text-align:center;} .bottom-txt {font-size: 4.1071vw; margin-bottom: 4.4643vw;} a.btn-kakao { align-items: center; justify- background: #862D27; padding: 2.8571vw 8.0357vw; border-radius: 8.9286vw; font-size: 3.2143vw; text-decoration: none; transition: all 0.3s;} a.btn-kakao:hover {background: #6d241f; transform: translateY(-0.3571vw); text-decoration: none;} .btn-kakao i {margin-left: 1.7857vw; border: solid #fff; border-width: 0 0.3571vw 0.3571vw 0; padding: 0.5357vw; transform: rotate(-45deg);} .re_bar{width: 169.2857vw;height: 0.1786vw;background: #D4D4D4;margin: 0 auto 10.7143vw;} /* 퇴행 후 ICL 재교정 이유 섹션 */ .recali-why {padding: 21.4286vw 0; background: url(../sub/img/recali-why_bg.jpg) 50% 50% / cover no-repeat;width:100%;height:100%; } .recali-why .top-tit {font-size: 3.3929vw; opacity: 0.9; margin-bottom: 7.1429vw; letter-spacing: -0.0893vw;} .recali-why .main-tit {font-size: 6.6786vw; margin-bottom: 14.2857vw; letter-spacing: -0.2679vw;} .why-grid { flex-wrap: wrap; justify- gap: 14.2857vw; max-width: 196.4286vw; margin: 0 auto;gap:8vw} .why-item {background: #fff; width: 51.6071vw; height: 51.6071vw; border-radius: 50%; flex-direction: column; align-items: center; justify- padding: 3.5714vw; box-shadow: 0 1.7857vw 5.3571vw rgba(0,0,0,0.15); transition: transform 0.3s;} .why-item:hover {transform: translateY(-1.7857vw);} .why-item .icon {width: 3.5714vw; height: 3.5714vw; background: #862D27; border-radius: 50%; align-items: center; justify- margin-bottom: 2.6786vw; } .why-item .icon::after { width: 2.1429vw; height: 1.0714vw; border-left: 0.3571vw solid #fff; border-bottom: 0.3571vw solid #fff; transform: rotate(-45deg); margin-top: -0.3571vw;} .why-item .item-tit {font-size: 4.1071vw; margin-bottom: 2.5000vw; letter-spacing: -0.0893vw;} .why-item .item-desc {font-size: 3.3929vw; line-height: 1.5; word-break: keep-all;} /* 데이터 증명 섹션 */ .recali-data {padding: 18.6786vw 0; background: #FBFBFB; } .data-flex-wrap { align-items: center; justify- max-width: 254.4643vw; margin: 0 auto; gap: 24.2857vw;} .data-txt-box {flex: 1;} .data-txt-box .title {font-size: 5.8929vw; line-height: 1.5; margin-bottom: 6.2500vw; letter-spacing: -0.2679vw; } .data-txt-box .title .red {} .data-txt-box .desc1 {font-size: 3.3929vw; margin-bottom: 6.2500vw;} .data-txt-box .desc2 {font-size: 3.3929vw; line-height: 1.7; } .data-txt-box .base-date { font-size: 3.0357vw; margin-top: 3.8571vw; } .data-graph-box { align-items: flex-end; gap: 6.7857vw;} .graph-item { } .graph-item .graph-tit {font-size: 3.7500vw; margin-top: 6.2500vw;} /* Bar Graph */ .bar-graph .chart-container { align-items: flex-end; gap: 8.0357vw; height: 53.5714vw; padding-bottom: 1.7857vw;} .bar-item {width: 12.5000vw; } .bar-item .bar-value {font-size: 3.5714vw; margin-bottom: 2.6786vw; opacity: 0; transform: translateY(1.7857vw); transition: all 0.5s 0.8s;} .bar-item.post .bar-value {} .recali-data.active .bar-item .bar-value {opacity: 1; transform: translateY(0);} .bar-item .bar-inner {width: 100%; height: 53.2143vw; background: transparent; } .bar-item .bar-fill {width: 100%; height: 0; bottom: 0; left: 0; border-radius: 2.1429vw 2.1429vw 0 0; transition: height 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);border-radius: 3.5714vw 3.5714vw 0 0;} .bar-item.pre .bar-fill {border-radius: 3.5714vw 3.5714vw 0 0;background: linear-gradient(180deg, #9A9A9A 0%, #E2E2E2 100%);} .bar-item.post .bar-fill {background: linear-gradient(180deg, #862D27 0%, #D0938F 136.91%);} .bar-item.pre .bar-value{bottom: 33.9286vw;left: 3.3929vw;} .recali-data.active .bar-item.pre .bar-fill {height: 28.0357vw;} .recali-data.active .bar-item.post .bar-fill {height: 53.2143vw;} .bar-item .bar-label {font-size: 3.3929vw; margin-top: 3.2143vw; white-space: nowrap;} .bar-item.pre .bar-label{font-weight:500} /* Circle Graph */ .circle-graph .chart-container { width: 53.5714vw; height: 53.5714vw;} .circle-graph svg {width: 100%; height: 100%; transform: rotate(-90deg);} .circle-graph circle {fill: none; stroke-width: 16; } .circle-graph circle.bg {stroke: #f3f3f3;} .circle-graph circle.active {stroke: #862D27; stroke-dasharray: 237.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.8s ease-in-out;} .recali-data.active .circle-graph circle.active {stroke-dashoffset: 5.03;} .circle-graph .percent-txt { top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 6.2500vw; letter-spacing: -0.3571vw;} .circle-graph .note { top: -1.7857vw; right: 0; font-size: 2.6786vw; } /* 재교정 센터 인트로 */ .recali-center-intro {padding: 32.1429vw 0; background:url('../sub/img/recali_center_bg.jpg') no-repeat center / cover; background-attachment: fixed; } .recali-center-intro .inner {max-width: 254.4643vw; margin: 0 auto; padding: 0 3.5714vw;} .recali-center-intro .title {font-size: 5.8929vw; line-height: 1.6; margin-bottom: 5.7143vw; letter-spacing: -0.2679vw;} .recali-center-intro .desc {font-size: 3.3929vw; line-height: 1.7; opacity: 0.9; } .sub3-3_w .smile-pro-flex .right-text .desc-3{font-size: 3.9286vw;line-height: 164%;} /* ///////////////// 라식 라섹 4-1 ////////////////// */ .sub4-1_w .smile-pro-section.cl .section-title { font-size: 7.9286vw; margin-bottom: 5.8571vw; letter-spacing: -0.2679vw;} .sub4-1_w .cl .smile-pro-flex.cl .right-text .desc-4 { font-size: 1.1rem; } .sub4-1_w .smile-pro-flex .highlight { font-size: 1.2rem; line-height: 1.4; font-weight: 500; max-width: 90%; padding: 1rem 1rem; margin: 1.5rem auto 0; text-align: center;} .lasik-vs-lasek .comp-item{max-width: 89.5128vw;} .lasik-vs-lasek .img-box{margin-bottom: 3.9231vw;} .lasik-vs-lasek .name{margin-bottom: 3.6026vw;} .all-laser-system{margin-top:0} .all-laser-lasek .title{font-size: 6.6205vw;margin-bottom: 3.0513vw;} .all-laser-lasek .desc,.all-laser-lasek .item-desc{font-size:3.6026vw;} .all-laser-lasek .item-tit{font-size: 5.1154vw;} .all-laser-lasek .num{top: -5.8846vw;} .all-laser-lasek .item{margin-bottom: 7.4872vw;} .visumax-system .feature-list li::before{top:1.7692vw} /* ///////////////// 4-2 ////////////////// */ .sub4-2_w .smile-pro-section.cl .section-title { font-size: 7.9286vw; margin-bottom: 5.8571vw; letter-spacing: -0.2679vw;} .sub4-2_w .cl .smile-pro-flex.cl .right-text .desc-4{font-size: 1.1rem;} .sub4-2_w .smile-pro-flex .highlight{font-size: 1.2rem;line-height: 1.4;font-weight: 500;max-width: 90%;padding: 1rem 1rem;margin: 1.5rem auto 0;text-align: center;} .main-sc-extra .s-main-desc{line-height: 1.4;} }