:root{--color-gray: #414141; --color-accent-brown: #6c6151;} #sub_about{display: flex; flex-direction: column; width: 100%; background: #ffffff;} #sub_about .sec-sub-visual{display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 826px; padding: var(--sub-sec-padding) 20px; box-sizing: border-box; background: #fffdf9 url(../img/sub11_visual_bg.webp) no-repeat center/cover; text-align: center;} #sub_about .sec-sub-visual .visual-header{display: flex; flex-direction: column; align-items: center;} #sub_about .sec-sub-visual .visual-header .visual-title{font-family: var(--ff-playfair); font-size: var(--fz-28); color: var(--color-text); font-weight: 400; letter-spacing: 1.12px;} #sub_about .sec-sub-visual .deco-img{margin-top: 30px;} #sub_about .sec-sub-visual .visual-article{display: flex; flex-direction: column; align-items: center; margin-top: 30px;} #sub_about .sec-sub-visual .visual-article .visual-subtitle{font-family: var(--ff-suit); font-size: var(--fz-20); color: var(--color-primary); font-weight: 600; line-height: 1.7;} #sub_about .sec-sub-visual .visual-article .visual-desc{margin-top: 20px; font-family: var(--ff-suit); font-size: var(--fz-18); color: var(--color-gray); font-weight: 400; line-height: 1.55;} #sub_about .sec-sub-visual .visual-article .visual-desc .highlight{font-weight: 600;} #sub_about .sec-sub-visual .deco-wrap{display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px;} #sub_about .sec-sub-visual .deco-wrap .deco-dot{width: 6px; height: 6px; background-color: var(--color-primary); border-radius: 50%;} #sub_about .sec-sub-why{display: flex; width: 100%; min-height: 1200px; background-color: #ffffff;} #sub_about .sec-sub-why .why-header{position: sticky; top: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; align-self: flex-start; width: 37%; height: calc(100vh - 100px); padding: 60px 40px; box-sizing: border-box; background: linear-gradient(180deg, rgba(64, 54, 39, 0) 0%, var(--color-primary) 100%), #727272 url(../img/sub11_why_bg.webp) no-repeat center/cover; text-align: center;} #sub_about .sec-sub-why .why-header .why-subtitle{font-family: var(--ff-cormorant); font-size: var(--fz-18); color: #ffffff; font-weight: 400; letter-spacing: 1px;} #sub_about .sec-sub-why .why-header .why-title{margin-top: 24px; font-family: var(--ff-nanummyeongjo); font-size: var(--fz-38); color: #ffffff; font-weight: 600; line-height: 1.3;} #sub_about .sec-sub-why .why-header .why-bg-text{position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0.06; font-family: var(--ff-cormorant); font-size: 11vw; color: #ffffff; font-weight: 400; line-height: 1;} #sub_about .sec-sub-why .why-article{display: flex; align-items: center; width: 63%; padding: 100px; box-sizing: border-box; background-color: #ffffff;} #sub_about .sec-sub-why .why-article .why-list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 80px 50px; width: 100%;} #sub_about .sec-sub-why .why-article .why-list .why-item{display: flex; flex-direction: column; gap: 22px; width: 100%;} #sub_about .sec-sub-why .why-article .why-list .why-item .img-wrap{position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden;} #sub_about .sec-sub-why .why-article .why-list .why-item .img-wrap img{width: 100%; height: 100%; object-fit: cover;} #sub_about .sec-sub-why .why-article .why-list .why-item .img-wrap .badge-icon{position: absolute; top: 20px; left: 20px; display: flex; flex-direction: column; justify-content: space-between; width: 65px; height: 65px; padding: 13px 6px; box-sizing: border-box; background: #cd302e; overflow: hidden;} #sub_about .sec-sub-why .why-article .why-list .why-item .img-wrap .badge-icon .badge-line{width: 100%; height: 18px; background: #ffffff;} #sub_about .sec-sub-why .why-article .why-list .why-item .text-wrap{display: flex; flex-direction: column; gap: 10px;} #sub_about .sec-sub-why .why-article .why-list .why-item .text-wrap .item-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-28); color: var(--color-accent-brown); font-weight: 600; line-height: 1.5;} #sub_about .sec-sub-why .why-article .why-list .why-item .text-wrap .item-desc{font-family: var(--ff-suit); font-size: var(--fz-18); color: var(--color-gray); font-weight: 400; line-height: 1.55;} #sub_about .sec-sub-space{display: flex; flex-direction: column; align-items: center; gap: 100px; width: 100%; max-width: 1774px; padding: var(--sub-sec-padding) 20px; margin: 0 auto; box-sizing: border-box; background-color: #ffffff;} #sub_about .sec-sub-space .space-header{display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center;} #sub_about .sec-sub-space .space-header .space-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: var(--color-text); font-weight: 700; line-height: 1.4;} #sub_about .sec-sub-space .space-header .space-subtitle{font-family: var(--ff-suit); font-size: var(--fz-20); color: var(--color-gray); font-weight: 400; line-height: 1.7;} #sub_about .sec-sub-space .space-article{width: 100%;} #sub_about .sec-sub-space .space-article .space-gallery{display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; width: 100%; max-width: 1170px; padding: 0; margin: 0 auto; list-style: none;} #sub_about .sec-sub-space .space-article .space-gallery .gallery-item{width: 100%; aspect-ratio: 1/1; overflow: hidden;} #sub_about .sec-sub-space .space-article .space-gallery .gallery-item img{width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;} #sub_about .sec-sub-space .space-article .space-gallery .gallery-item img:hover{transform: scale(1.05);} #sub_about .space-popup-dim{position: fixed; top: 0; left: 0; z-index: 10000; display: none; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.5);} #sub_about .space-popup-dim.active{display: flex;} #sub_about .space-popup-dim .popup-container{position: relative; display: flex; flex-direction: column; width: 100%; max-width: 992px; padding: 0 20px; box-sizing: border-box;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap{position: relative; width: 100%; overflow: visible;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .popup-slider-track{width: 100%; overflow: hidden; border: 6px solid #fff;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .popup-slider{display: flex; width: 100%; transition: transform 0.4s ease; cursor: grab;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .popup-slider:active{cursor: grabbing;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .popup-slider .slide-item{display: block; flex-shrink: 0; width: 100%; outline: none;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .popup-slider .slide-item img{display: block; width: 100%; height: auto; box-sizing: border-box; object-fit: contain; user-drag: none; -webkit-user-drag: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none;} #sub_about .space-popup-dim .popup-container .btn-popup-close{position: absolute; left: 50%; top: -60px; transform: translateX(-50%); z-index: 10001; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; padding: 0; border: none; background: transparent; cursor: pointer;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .btn-slider-prev{position: absolute; left: -60px; top: 50%; z-index: 10001; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; transform: translateY(-50%); cursor: pointer;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .btn-slider-next{position: absolute; right: -60px; top: 50%; z-index: 10001; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; padding: 0; border: none; background: transparent; transform: translateY(-50%); cursor: pointer;} #sub_doctor{display: flex; flex-direction: column; width: 100%; background: url(../img/sub12_full_bg.webp) center/cover no-repeat;} #sub_doctor .sec-sub-doctor{display: flex; flex-direction: column; align-items: center; width: 100%;} #sub_doctor .sec-sub-doctor .doctor-header{display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 34px; width: 100%; height: 538px; padding-bottom: 130px; box-sizing: border-box; background: url(../img/sub12_visual_bg.webp) no-repeat center/cover; text-align: center;} #sub_doctor .sec-sub-doctor .doctor-header .doctor-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-38); color: #141414; font-weight: 700; line-height: 1.3;} #sub_doctor .sec-sub-doctor .doctor-header .doctor-desc{font-family: var(--ff-suit); font-size: var(--fz-20); color: #414141; font-weight: 400; line-height: 1.7;} #sub_doctor .sec-sub-doctor .doctor-container{display: flex; justify-content: center; align-items: flex-start; width: 100%; border-top: 1px solid #D4C9BA; margin: 80px auto 0; text-align: left;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-visual{flex: 1; display: flex; justify-content: flex-end; align-items: flex-start; max-width: 640px; padding: 112px 80px 134px; box-sizing: border-box;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-visual .doctor-img-wrap{width: 370px; height: 480px; background-color: #D9D9D9;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-visual .doctor-img-wrap img{display: block; width: 100%; height: 100%; object-fit: cover;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history{position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 71px; width: 570px; min-height: 917px; padding: 112px 0 112px 60px; border-left: 1px solid; border-right: 1px solid; border-image: linear-gradient(to bottom, #C5C1BB, rgba(197, 193, 187, 0)) 1; box-sizing: border-box;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history:before{position: absolute; width: 88.2px; height: 56.8px; background: url(../img/deco_logo_beige.svg) center/cover no-repeat; top: -1px; left: 0; transform: translate(-50%, -50%); content: '';} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .doctor-meta{display: flex; align-items: flex-end; gap: 15px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .doctor-meta .doctor-name{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-30); color: #141414; font-weight: 600;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .doctor-meta .doctor-name img{margin-right: 15px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .doctor-meta .doctor-position{font-family: var(--ff-suit); font-size: var(--fz-22); color: #141414; font-weight: 400;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section{display: flex; flex-direction: column; gap: 20px; width: 100%;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-title{font-family: var(--ff-suit); font-size: var(--fz-26); color: #403627; font-weight: 600; line-height: 1.25; letter-spacing: 1.04px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-list{display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; list-style: none;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-list li{position: relative; padding-left: 10px; font-family: var(--ff-suit); font-size: var(--fz-18); color: #414141; font-weight: 400; line-height: 1.65;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-list li:before{position: absolute; top: 15px; left: 0; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #414141; content: '';} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers{flex: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 47px; padding: 220px 0 134px 60px; box-sizing: border-box;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-section{display: flex; flex-direction: column; gap: 20px; width: 100%;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-section .info-title{font-family: var(--ff-suit); font-size: var(--fz-26); color: #403627; font-weight: 600; line-height: 1.25; letter-spacing: 1.04px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-list{display: flex; flex-direction: column; gap: 20px; padding: 0; margin: 0; list-style: none;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-list li{position: relative; padding-left: 10px; font-family: var(--ff-suit); font-size: var(--fz-20); color: #414141; font-weight: 400; line-height: 1.6;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-list li:before{position: absolute; top: 15px; left: 0; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #414141; content: '';} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .btn-more-papers{display: inline-flex; justify-content: flex-start; align-items: center; gap: 10px; padding: 10px 22px; background-color: rgba(255, 255, 255, 0.2); border-radius: 99px; border: 1px solid #414141; text-decoration: none; transition: background-color 0.3s;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .btn-more-papers span{font-family: var(--ff-suit); font-size: var(--fz-17); color: #414141; font-weight: 400;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .btn-more-papers svg{display: block;} #sub_doctor .sec-sub-doctor .doctor-bg-text{display: block; width: 100%; margin-top: 20px; overflow: hidden; pointer-events: none; white-space: nowrap; font-family: var(--ff-cormorant); font-size: 8vw; opacity: 0.4; color: #F4EDE4; font-weight: 400; text-transform: uppercase; line-height: 1; text-align: center;} #sub_doctor .papers-popup-dim{position: fixed; top: 0; left: 0; z-index: 10000; display: none; justify-content: center; align-items: center; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.42);} #sub_doctor .papers-popup-dim.active{display: flex;} #sub_doctor .papers-popup-dim .popup-container{position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1130px; height: 725px; padding: 74px; box-sizing: border-box; background-color: #ffffff;} #sub_doctor .papers-popup-dim .popup-container .btn-popup-close{position: absolute; right: 0; top: -60px; z-index: 10001; display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; padding: 0; border: none; background: transparent; cursor: pointer;} #sub_doctor .papers-popup-dim .popup-container .btn-popup-close svg{display: block;} #sub_doctor .papers-popup-dim .popup-container .popup-content{display: flex; flex-direction: column; gap: 20px; width: 100%; height: 100%;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-title{font-family: var(--ff-suit); font-size: var(--fz-26); color: #403627; font-weight: 600; line-height: 1.25; letter-spacing: 1.04px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap{width: 100%; height: calc(100% - 50px); padding-right: 30px; overflow-y: auto; box-sizing: border-box;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap::-webkit-scrollbar{width: 4px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap::-webkit-scrollbar-track{background: #E2E4E2; border-radius: 99px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap::-webkit-scrollbar-thumb{background: #403627; border-radius: 99px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap .papers-list{display: flex; flex-direction: column; gap: 30px; padding: 0; margin: 0; list-style: none;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap .papers-list li{position: relative; padding-left: 10px; font-family: var(--ff-suit); font-size: var(--fz-20); color: #414141; font-weight: 400; line-height: 1.6;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap .papers-list li:before{position: absolute; top: 15px; left: 0; transform: translateY(-50%); width: 3px; height: 3px; border-radius: 50%; background-color: #414141; content: '';} #sub_eq{display: flex; flex-direction: column; width: 100%; background: #ffffff;} #sub_eq .eq-header{display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 538px; padding-bottom: 130px; box-sizing: border-box; background: url(../img/sub13_visual_bg.webp) no-repeat center/cover; text-align: center;} #sub_eq .eq-header .eq-visual-inner{display: flex; flex-direction: column; align-items: center; gap: 34px;} #sub_eq .eq-header .eq-visual-inner .eq-visual-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-38); color: #141414; font-weight: 700; line-height: 1.3;} #sub_eq .eq-header .eq-visual-inner .eq-visual-desc{font-family: var(--ff-suit); font-size: var(--fz-20); color: #414141; font-weight: 400; line-height: 1.7;} #sub_eq .eq-tabs{display: flex; justify-content: center; align-items: center; gap: 24px; padding: 100px 0; background-color: #ffffff; overflow: hidden;} #sub_eq .eq-tabs .tab-item{display: inline-flex; justify-content: center; align-items: center; min-width: 120px; padding: 8px 30px; border-radius: 99px; border: 1px solid #403627; background-color: #ffffff; cursor: pointer; transition: all 0.3s ease; text-decoration: none; font-family: var(--ff-suit); font-size: var(--fz-20); color: #141414; font-weight: 400; line-height: 1.7;} #sub_eq .eq-tabs .tab-item:hover{background-color: #f5f5f5;} #sub_eq .eq-tabs .tab-item.active{background-color: #403627; color: #ffffff;} #sub_eq .sec-sub-equip{padding-block: 100px;} #sub_eq .sec-sub-equip .wrap{width: 92%; max-width: 1440px; margin-inline: auto;} #sub_eq .sec-sub-equip .eq-list{display: grid; grid-template-columns: repeat(auto-fill, min(100%, 330px)); gap: 60px 40px; justify-content: center;} #sub_eq .sec-sub-equip .eq-card{width: 100%; cursor: default;} #sub_eq .sec-sub-equip .eq-card .eq-thumb{width: 100%; aspect-ratio: 1/1; margin-bottom: 30px; overflow: hidden; background-color: #f8f8f8;} #sub_eq .sec-sub-equip .eq-card .eq-thumb img{width: 100%; aspect-ratio: 1/1; object-fit: contain; transition: 0.5s;} #sub_eq .sec-sub-equip .eq-card:hover .eq-thumb img{transform: scale(1.05);} #sub_eq .sec-sub-equip .eq-card .eq-title{margin-bottom: 15px; font-family: var(--ff-suit); font-size: var(--fz-22); color: #141414; font-weight: 600; text-align: center; line-height: 1.36;} #sub_eq .sec-sub-equip .eq-card .eq-short{font-family: var(--ff-suit); font-size: var(--fz-16); color: #9F9F9F; font-weight: 400; text-align: center; line-height: 1.5;} #sub_eq .eq-pagination{margin-top: 40px; text-align: center;} #sub_eq .eq-pagination .pg_wrap{display: inline-flex; gap: 5px;} #sub_eq .eq-pagination .pg_page{padding: 5px 10px; border: 1px solid #dddddd; color: #333333; text-decoration: none;} #sub_eq .eq-pagination .pg_current{padding: 5px 10px; background-color: #333333; color: #ffffff; font-weight: bold;} #sub_eq .eq-modal{position: fixed; top: 0; left: 0; z-index: 9999; display: none; align-items: center; justify-content: center; width: 100%; height: 100%;} #sub_eq .eq-modal.active{display: flex;} #sub_eq .eq-modal .eq-modal-bg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);} #sub_eq .eq-modal .eq-modal-content{position: relative; z-index: 1; display: flex; width: 90%; max-width: 800px; background-color: #ffffff; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); overflow: hidden;} #sub_eq .eq-modal .eq-modal-left{display: flex; justify-content: center; align-items: center; width: 50%; padding: 20px; background-color: #f9f9f9;} #sub_eq .eq-modal .eq-modal-left img{width: 100%; height: auto; max-height: 400px; object-fit: contain;} #sub_eq .eq-modal .eq-modal-right{display: flex; flex-direction: column; justify-content: center; width: 50%; padding: 40px;} #sub_eq .eq-modal .eq-modal-right h3{margin-bottom: 10px; font-size: var(--fz-24); color: #222222;} #sub_eq .eq-modal .eq-modal-right p{margin-bottom: 20px; font-size: var(--fz-16); color: #666666;} #sub_eq .eq-modal .eq-modal-right div{max-height: 250px; overflow-y: auto; font-size: var(--fz-15); color: #444444; line-height: 1.6;} #sub_eq .eq-modal .eq-modal-close{position: absolute; top: 15px; right: 20px; z-index: 2; border: none; background: none; cursor: pointer; font-size: 30px; color: #333333;} #sub_inf{display: flex; flex-direction: column; width: 100%; background: #ffffff;} #sub_inf .sec-sub-info{} #sub_inf .sec-sub-info .info-header{display: flex; justify-content: center; align-items: flex-end; width: 100%; height: 538px; padding-bottom: 130px; box-sizing: border-box; background: url(../img/sub14_visual_bg.webp) no-repeat center/cover; text-align: center;} #sub_inf .sec-sub-info .info-header .info-visual-inner{display: flex; flex-direction: column; align-items: center; gap: 34px;} #sub_inf .sec-sub-info .info-header .info-visual-inner .info-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-38); color: #ffffff; font-weight: 700; line-height: 1.3;} #sub_inf .sec-sub-info .info-header .info-visual-inner .info-desc{font-family: var(--ff-suit); font-size: var(--fz-20); color: #ffffff; font-weight: 400; line-height: 1.7;} #sub_inf .sec-sub-info .info-container{display: flex; justify-content: center; align-items: stretch; width: 92%; max-width: 1440px; margin: 200px auto 50px; padding: 0 20px; box-sizing: border-box;} #sub_inf .sec-sub-info .info-container .info-reservation{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 32px; flex: 1; padding: 60px 0; box-sizing: border-box;} #sub_inf .sec-sub-info .info-container .info-hours{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 14px; flex: 1; padding: 60px 80px; border-left: 1px solid #C5C1BB; box-sizing: border-box;} #sub_inf .sec-sub-info .info-container .info-label-wrap{display: flex; align-items: center; gap: 8px;} #sub_inf .sec-sub-info .info-container .info-label-wrap .deco-icon{display: flex; align-items: center; gap: 3px;} #sub_inf .sec-sub-info .info-container .info-label-wrap .info-label-text{font-family: var(--ff-suit); font-size: var(--fz-32); color: #141414; font-weight: 700;} #sub_inf .sec-sub-info .info-container .info-reservation .info-tel{font-family: var(--ff-suit); font-size: var(--fz-40); color: #141414; font-weight: 700; letter-spacing: -1px;} #sub_inf .sec-sub-info .info-container .info-hours .hours-list{display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 18px 0 0; list-style: none;} #sub_inf .sec-sub-info .info-container .info-hours .hours-list .hours-row{display: flex; align-items: center; gap: 17px;} #sub_inf .sec-sub-info .info-container .info-hours .hours-list .hours-row .hours-day{font-family: var(--ff-suit); font-size: var(--fz-20); color: #141414; font-weight: 600; letter-spacing: 2.4px; white-space: nowrap; width: 80px; text-align: justify; text-align-last: justify;} #sub_inf .sec-sub-info .info-container .info-hours .hours-list .hours-row .hours-time{font-family: var(--ff-suit); font-size: var(--fz-20); color: #414141; font-weight: 400;} #sub_inf .sec-sub-info .info-container .info-hours .hours-notice{font-family: var(--ff-suit); font-size: var(--fz-16); color: #9F9F9F; font-weight: 400; line-height: 1.5;} #sub_inf .sec-sub-info .info-map-section{display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 1440px; padding: 100px 20px 160px; margin: 0 auto; border-top: 1px solid #C5C1BB; box-sizing: border-box;} #sub_inf .sec-sub-info .info-map-section .map-header{display: flex; justify-content: space-between; align-items: flex-end; width: 100%;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left{display: flex; flex-direction: column; align-items: flex-start; gap: 32px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .info-label-wrap{display: flex; align-items: center; gap: 8px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .info-label-wrap .deco-icon{display: flex; align-items: center; gap: 3px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .info-label-wrap .info-label-text{font-family: var(--ff-suit); font-size: var(--fz-32); color: #141414; font-weight: 700;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .map-address{font-family: var(--ff-suit); font-size: var(--fz-26); color: #414141; font-weight: 400; line-height: 1.55; font-style: normal;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap{display: flex; align-items: center; gap: 20px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap .btn-map-link{display: flex; align-items: center; gap: 14px; height: 60px; padding: 8px 25px; border: 1px solid #141414; box-sizing: border-box; text-decoration: none; transition: background-color 0.3s;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap .btn-map-link:hover{background-color: #f5f5f5;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap .btn-map-link span{font-family: var(--ff-suit); font-size: var(--fz-18); color: #141414; font-weight: 400;} #sub_inf .sec-sub-info .info-map-section .map-wrap{display: flex; align-items: center; justify-content: center; width: 100%; height: 762px; background-color: #D9D9D9; overflow: hidden;} #sub_inf .sec-sub-info .info-map-section .map-wrap .map-pc{display: block; width: 100%; height: 100%;} #sub_inf .sec-sub-info .info-map-section .map-wrap #daumRoughmapContainer1784177237094 .wrap_controllers, #sub_inf .sec-sub-info .info-map-section .map-wrap #daumRoughmapContainer1784177237094 .cont{display: none;} .sub2-common{display: flex; flex-direction: column; width: 100%; background: #ffffff;} .sub2-common .sec-sub-visual{position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 683px; padding: 0 20px; box-sizing: border-box; background: url(../img/sub21_visual_bg.webp) no-repeat center/cover; text-align: center; overflow: hidden; z-index: 1;} .sub2-common .sec-sub-visual .cinner{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px;} .sub2-common .sec-sub-visual .visual-header{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px;} .sub2-common .sec-sub-visual .visual-header .visual-sub{font-family: var(--ff-cormorant); font-size: var(--fz-18); color: #ffffff; font-weight: 600; line-height: 34px; letter-spacing: 1px;} .sub2-common .sec-sub-visual .visual-header .visual-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-38); color: #ffffff; font-weight: 700; line-height: 50px;} .sub2-common .sec-sub-visual .visual-article{display: flex; flex-direction: column; align-items: center;} .sub2-common .sec-sub-visual .visual-article .visual-desc{font-family: var(--ff-suit); font-size: var(--fz-20); color: #ffffff; font-weight: 400; line-height: 34px;} .sub2-common .sec-sub-intro{display: flex; justify-content: center; align-items: center; width: 100%; padding-block: 344px 170px; margin-top: -145px; box-sizing: border-box; background: url(../img/sub21_intro_bg.webp) center/cover no-repeat;} .sub2-common .sec-sub-intro .cinner{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; width: 100%; max-width: 1200px; margin: 0 auto; text-align: center;} .sub2-common .sec-sub-intro .cinner .intro-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #141414; font-weight: 700; line-height: 44px;} .sub2-common .sec-sub-intro .cinner .deco-wrap{display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto;} .sub2-common .sec-sub-intro .cinner .deco-wrap .deco-dot{width: 6px; height: 6px; background-color: var(--color-primary); border-radius: 50%;} .sub2-common .sec-sub-intro .cinner .deco-wrap .deco-line{width: 1px; height: 30px; background-color: var(--color-primary);} .sub2-common .sec-sub-intro .cinner .intro-desc{font-family: var(--ff-suit); font-size: var(--fz-18); color: #414141; font-weight: 400; line-height: 28px;} .sub2-common .sec-sub-method{display: flex; justify-content: center; width: 100%; padding: 120px 20px; background-color: #ffffff;} .sub2-common .sec-sub-method .cinner{display: flex; flex-direction: column; align-items: center; gap: 50px; width: 100%; max-width: 1200px; margin: 0 auto;} .sub2-common .sec-sub-method .cinner .method-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #141414; font-weight: 700; line-height: 44px; text-align: center;} .sub2-common .sec-sub-method .cinner .method-img-wrap{width: 100%; max-width: 1160px; height: 468px; overflow: hidden;} .sub2-common .sec-sub-method .cinner .method-img-wrap img{width: 100%; height: 100%; object-fit: cover;} .sub2-common .sec-sub-method .cinner .method-desc{font-family: var(--ff-suit); font-size: var(--fz-18); color: #373737; font-weight: 400; line-height: 28px; text-align: center;} .sub2-common .sec-sub-certifi{display: flex; justify-content: center; width: 100%; height: 680px; padding-block: 120px; box-sizing: border-box; background: url(../img/sub21_certifi_bg.webp) no-repeat center/cover;} .sub2-common .sec-sub-certifi .cinner{display: flex; justify-content: space-between; align-items: flex-end; width: 100%; max-width: 1596px; margin: 0 auto;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap{display: flex; justify-content: space-between; flex-direction: column; gap: 30px; height: 100%;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap .certifi-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #ffffff; font-weight: 700; line-height: 44px;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap .certifi-desc{font-family: var(--ff-suit); font-size: var(--fz-18); color: #ffffff; font-weight: 400; line-height: 28px;} .sub2-common .sec-sub-certifi .cinner .certifi-img-wrap{display: flex; justify-content: start; align-items: center; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame{position: relative; width: 50%; max-width: 195px; aspect-ratio: 195/149; margin: 24px 15px; background: radial-gradient(ellipse 93.84% 93.84% at 51.23% 100.00%, #9E834C 0%, #E2D5BB 100%); box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25); padding: 7px; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame .certifi-inner-frame{width: 100%; background: #94886F; outline: 1px rgba(0, 0, 0, 0.4) solid; outline-offset: -1px; padding: 3px; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame .certifi-inner-frame img{width: 100%; height: 100%; object-fit: cover; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25) inset;} .sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame3 {max-width: 150px;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list{display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; list-style: none;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list li{position: relative; padding-left: 10px; font-family: var(--ff-suit); font-size: var(--fz-16); color: #ffffff; font-weight: 400; line-height: 24px;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list li:before{position: absolute; top: 12px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #fff; transform: translateY(-50%); content: '';} .sub2-common .sec-sub-equip{display: flex; justify-content: center; width: 100%; padding: 120px 20px; background-color: #ffffff;} .sub2-common .sec-sub-equip .cinner{display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; max-width: 1326px; margin: 0 auto;} .sub2-common .sec-sub-equip .cinner .equip-header{display: flex; flex-direction: column; align-items: center; gap: 34px; text-align: center;} .sub2-common .sec-sub-equip .cinner .equip-header .equip-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #141414; font-weight: 700; line-height: 44px;} .sub2-common .sec-sub-equip .cinner .equip-header .equip-subtitle{font-family: var(--ff-suit); font-size: var(--fz-18); color: #373737; font-weight: 400; line-height: 28px;} .sub2-common .sec-sub-equip .cinner .equip-container{display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav{display: flex; justify-content: center; align-items: center; gap: 56px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav .btn-tab{min-height: 42.5px; border: none; background: none; font-family: var(--ff-suit); font-size: var(--fz-18); color: #141414; font-weight: 400; cursor: pointer; transition: all 0.3s;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav .btn-tab.active{background: #6C6151; color: #ffffff; border-radius: 99px; padding: 10px 20px; font-weight: 600;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap{width: 100%;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article{display: none; justify-content: flex-start; align-items: center; gap: 80px; width: 100%; padding: 80px; border-radius: 20px; outline: 1px #D4C9BA solid; outline-offset: -1px; box-sizing: border-box;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article.active{display: flex;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-img-wrap{width: 544px; height: 395px; overflow: hidden;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-img-wrap img{width: 100%; height: 100%; object-fit: cover;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap{flex-grow: 1; display: flex; flex-direction: column; gap: 24px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-item-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-26); color: #403627; font-weight: 600;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-item-desc{font-family: var(--ff-suit); font-size: var(--fz-18); color: #141414; font-weight: 400; line-height: 28px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-tags{display: flex; gap: 10px; padding: 0; margin: 0; list-style: none;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-tags li{background: #FAF6EF; color: #414141; font-size: var(--fz-18); font-family: var(--ff-suit); font-weight: 400; padding: 6px 10px;} .sub2-common .sec-sub-caution{display: flex; justify-content: center; width: 100%; padding: 154px 20px; background: url(../img/sub2_caution_bg.webp) center/cover no-repeat;} .sub2-common .sec-sub-caution .cinner{display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 60px; width: 100%; max-width: 1080px; margin: 0 auto;} .sub2-common .sec-sub-caution .cinner .caution-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #403627; font-weight: 700; line-height: 44px; text-align: center;} .sub2-common .sec-sub-caution .cinner .caution-list{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: 100%; padding: 0; margin: 0; list-style: none;} .sub2-common .sec-sub-caution .cinner .caution-list li{display: flex; justify-content: center; align-items: center; gap: 15px; width: 100%; min-height: 80px; padding: 20px 26px; border-bottom: 1px #D9D9D9 solid; box-sizing: border-box;} .sub2-common .sec-sub-caution .cinner .caution-list li span{color: #403627; font-size: var(--fz-18); font-family: var(--ff-suit); font-weight: 400; line-height: 28px;} .sub2-common .sec-sub-caution .cinner .caution-list li span strong{font-weight: 600;} .sub2-common .sec-sub-faq{display: flex; justify-content: center; width: 100%; padding: 120px 20px; background-color: #ffffff;} .sub2-common .sec-sub-faq .cinner{display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 60px; width: 100%; max-width: 1080px; margin: 0 auto;} .sub2-common .sec-sub-faq .cinner .faq-title{font-family: var(--ff-nanummyeongjo); font-size: var(--fz-32); color: #141414; font-weight: 700; line-height: 44px; text-align: center;} .sub2-common .sec-sub-faq .cinner .faq-list{display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 5px; width: 100%; padding: 0; margin: 0; list-style: none;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item{width: 100%;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-q{display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100px; padding: 10px 46px; background: #FAF7F2; border: none; font-family: var(--ff-suit); font-size: var(--fz-20); font-weight: 700; line-height: 32px; color: #141414; text-align: left; cursor: pointer; transition: all 0.3s; box-sizing: border-box;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item.active .faq-q{background: #6C6151; color: #ffffff;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-q::after{content: ''; display: block; width: 16px; height: 16px; background: url(../img/sub_faq_arrow.svg) no-repeat center/contain; transition: transform 0.3s;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item.active .faq-q::after{transform: rotate(180deg); filter: brightness(0) invert(1);} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-a{display: none; width: 100%; padding: 46px 46px 80px; background: #F8F8F8; box-sizing: border-box;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-a p{color: #414141; font-size: var(--fz-18); font-family: var(--ff-suit); font-weight: 400; line-height: 28px;} #sub_contour.sub2-common .sec-sub-visual{background-image: url(../img/sub21_visual_bg.webp);} #sub_contour.sub2-common .sec-sub-certifi{background-image: url(../img/sub21_certifi_bg.webp);} #sub_clarity.sub2-common .sec-sub-visual{background-image: url(../img/sub22_visual_bg.webp);} #sub_clarity.sub2-common .sec-sub-certifi{background-image: url(../img/sub22_certifi_bg.webp);} #sub_texture.sub2-common .sec-sub-visual{background-image: url(../img/sub23_visual_bg.webp);} #sub_texture.sub2-common .sec-sub-certifi{background-image: url(../img/sub23_certifi_bg.webp);} #sub_clarity.sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame{width: 50%; max-width: 149px; aspect-ratio: 149/195;} #sub_texture.sub2-common .sec-sub-certifi .cinner .certifi-img-wrap .certifi-frame{width: 33%; max-width: 149px; aspect-ratio: 149/195;} /* sub31 디자인 */ .sub31-common .sec-sub-visual {height: 683px; } #sub_31.sub31-common .sec-sub-visual { background-image: url(../img/sub31_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub31 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub31-common .sec-sub-visual .sub31 .sub31-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub31-common .sec-sub-visual .sub31 .sub31-header .sub31-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub31-common .sec-sub-visual .sub31 .sub31-header .sub31-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_31 .sub31-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_31 .sub31-img img { max-width: 1920px; } #sub_31.sub31-common .sub-intro-bottom {margin-top: 50px; width: 100%;} #sub_31.sub31-common .sub-intro-list {display: flex; gap: 32.67px; width: 100%;} #sub_31.sub31-common .sub-intro-list li {display: flex; flex: 1; flex-direction: column;} #sub_31.sub31-common .sub-intro-list .sub-intro-title {display: flex; padding: 10px; justify-content: center; align-items: center; align-self: stretch; color: #FFF; font-family: "Cormorant Garamond"; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px;} #sub_31.sub31-common .sub-intro-list .sub-intro-title .bar {color: #FFF; font-family: var(--ff-nanummyeongjo); font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;} #sub_31.sub31-common .sub-intro-list .sub-intro-title .right-text {color: #FFF; font-family: var(--ff-nanummyeongjo); font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px;} #sub_31.sub31-common .sub-intro-list li:nth-child(1) .sub-intro-title {background: #9E834C;} #sub_31.sub31-common .sub-intro-list li:nth-child(2) .sub-intro-title {background: #403627;} #sub_31.sub31-common .sub-intro-list li:nth-child(3) .sub-intro-title {background: #9E834C;} #sub_31.sub31-common .sub-intro-list li:nth-child(4) .sub-intro-title {background: #403627;} #sub_31.sub31-common .sub-intro-list .intro-list-desc {display: flex; height: 145px; padding: 10px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; color: #414141; text-align: center; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; background: #F9F9F9;} /* sub32 디자인 */ .sub32-common .sec-sub-visual { height: 683px; } #sub_32.sub32-common .sec-sub-visual { background-image: url(../img/sub32_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub32 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub32-common .sec-sub-visual .sub32 .sub32-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub32-common .sec-sub-visual .sub32 .sub32-header .sub32-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub32-common .sec-sub-visual .sub32 .sub32-header .sub32-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_32 .sub32-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_32 .sub32-img img { max-width: 1920px; } /* sub33 디자인 */ .sub33-common .sec-sub-visual { height: 683px; } #sub_33.sub33-common .sec-sub-visual { background-image: url(../img/sub33_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub33 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub33-common .sec-sub-visual .sub33 .sub33-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub33-common .sec-sub-visual .sub33 .sub33-header .sub33-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub33-common .sec-sub-visual .sub33 .sub33-header .sub33-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_33 .sub33-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_33 .sub33-img img { max-width: 1920px; } #sub_33.sub33-common .sub-page-intro .sub-intro{padding-top: 70px;} /* sub34 디자인 */ .sub34-common .sec-sub-visual { height: 683px; } #sub_34.sub34-common .sec-sub-visual { background-image: url(../img/sub34_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub34 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub34-common .sec-sub-visual .sub34 .sub34-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub34-common .sec-sub-visual .sub34 .sub34-header .sub34-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub34-common .sec-sub-visual .sub34 .sub34-header .sub34-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_34 .sub34-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_34 .sub34-img img { max-width: 1920px; } /* sub41 디자인 */ .sub41-common .sec-sub-visual { height: 683px; } #sub_41.sub41-common .sec-sub-visual { background-image: url(../img/sub41_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub41 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub41-common .sec-sub-visual .sub41 .sub41-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub41-common .sec-sub-visual .sub41 .sub41-header .sub41-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub41-common .sec-sub-visual .sub41 .sub41-header .sub41-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_41 .sub41-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_41 .sub41-img img { max-width: 1920px; } #sub_41.sub41-common .sec-points .point-list li { max-width: 328px; } /* sub42 디자인 */ .sub42-common .sec-sub-visual { height: 683px; } #sub_42.sub42-common .sec-sub-visual { background-image: url(../img/sub42_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub42 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub42-common .sec-sub-visual .sub42 .sub42-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub42-common .sec-sub-visual .sub42 .sub42-header .sub42-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub42-common .sec-sub-visual .sub42 .sub42-header .sub42-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_42 .sub42-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_42 .sub42-img img { max-width: 1920px; } #sub_42.sub42-common .sub-page-intro { display: flex; flex-direction: column; width: 100%; max-width: 1378px; gap: 50px; margin: 0 auto; padding-bottom: 170px; } #sub_42.sub42-common .sub-page-intro .sub-intro { display: flex; justify-content: center; align-items: center; width: 100%; } #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text { display: flex; flex-direction: column; align-items: center; gap: 50px; padding-top: 70px;} #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .intro-title { color: #141414; font-family: var(--ff-nanummyeongjo); font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; } #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .visual-desc { color: #414141; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; text-align: center;} #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .visual-desc strong { display: block; color: #403627; font-family: 'SUIT'; font-size: 20px; font-style: normal; font-weight: 600; line-height: 34px; padding-top: 24px; } /* sub51 디자인 */ .sub51-common .sec-sub-visual { height: 683px; } #sub_51.sub51-common .sec-sub-visual { background-image: url(../img/sub51_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub51 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub51-common .sec-sub-visual .sub51 .sub51-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub51-common .sec-sub-visual .sub51 .sub51-header .sub51-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub51-common .sec-sub-visual .sub51 .sub51-header .sub51-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_51 .sub51-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_51 .sub51-img img { max-width: 1920px; } /* sub52 디자인 */ .sub52-common .sec-sub-visual { height: 683px; } #sub_52.sub52-common .sec-sub-visual { background-image: url(../img/sub52_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub52 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub52-common .sec-sub-visual .sub52 .sub52-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub52-common .sec-sub-visual .sub52 .sub52-header .sub52-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub52-common .sec-sub-visual .sub52 .sub52-header .sub52-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_52 .sub52-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_52 .sub52-img img { max-width: 1920px; } /* sub53 디자인 */ .sub53-common .sec-sub-visual { height: 683px; } #sub_53.sub53-common .sec-sub-visual { background-image: url(../img/sub53_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub53 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub53-common .sec-sub-visual .sub53 .sub53-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub53-common .sec-sub-visual .sub53 .sub53-header .sub53-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub53-common .sec-sub-visual .sub53 .sub53-header .sub53-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_53 .sub53-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_53 .sub53-img img { max-width: 1920px; } /* sub54 디자인 */ .sub54-common .sec-sub-visual { height: 683px; } #sub_54.sub54-common .sec-sub-visual { background-image: url(../img/sub54_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub54 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub54-common .sec-sub-visual .sub54 .sub54-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub54-common .sec-sub-visual .sub54 .sub54-header .sub54-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub54-common .sec-sub-visual .sub54 .sub54-header .sub54-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_54 .sub54-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_54 .sub54-img img { max-width: 1920px; } /* sub61 디자인 */ .sub61-common .sec-sub-visual { height: 683px; } #sub_61.sub61-common .sec-sub-visual { background-image: url(../img/sub61_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub61 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub61-common .sec-sub-visual .sub61 .sub61-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub61-common .sec-sub-visual .sub61 .sub61-header .sub61-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub61-common .sec-sub-visual .sub61 .sub61-header .sub61-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_61 .sub61-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_61 .sub61-img img { max-width: 1920px; } #sub_61.sub61-common .sec-points .point-list li { max-width: 328px; } /* sub62 디자인 */ .sub62-common .sec-sub-visual { height: 683px; } #sub_62.sub62-common .sec-sub-visual { background-image: url(../img/sub62_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub62 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub62-common .sec-sub-visual .sub62 .sub62-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub62-common .sec-sub-visual .sub62 .sub62-header .sub62-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub62-common .sec-sub-visual .sub62 .sub62-header .sub62-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_62 .sub62-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_62 .sub62-img img { max-width: 1920px; } #sub_62.sub62-common .sec-points .point-list li { max-width: 328px; } /* sub71 디자인 */ .sub71-common .sec-sub-visual { height: 683px; } #sub_71.sub71-common .sec-sub-visual { background-image: url(../img/sub71_visual_bg.webp); background-size: cover; background-position: center bottom; background-repeat: no-repeat; } .sec-sub-visual .sub71 { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; } .sub71-common .sec-sub-visual .sub71 .sub71-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 34px; color: #fff; } .sub71-common .sec-sub-visual .sub71 .sub71-header .sub71-title { color: #FFF; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 38px; font-style: normal; font-weight: 700; line-height: 50px;} .sub71-common .sec-sub-visual .sub71 .sub71-header .sub71-desc { color: #FFF; text-align: center; font-family: SUIT; font-size: 20px; font-style: normal; font-weight: 400; line-height: 34px;} #sub_71 .sub71-img { display: flex; align-items: center; justify-content: center; padding-top: 170px; } #sub_71 .sub71-img img { max-width: 1920px; } /* 공통 슬라이드 스타일 */ .slider-sect { width: 100%; max-width: 1360px; margin:0 auto; box-sizing: border-box; padding: 200px 0;} .slider-container { display: flex; justify-content: space-between; align-items: stretch; gap: 50px; } .left-text-area { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: 20px; } .slider-sect-text h2 { color: #141414; font-family: var(--ff-nanummyeongjo); font-size: 32px; font-style: normal; font-weight: 700; line-height: 44px; } .text-box { background: #EBE6DD; padding: 36px 36px 56px 36px; box-sizing: border-box; } .text-box .step-num { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 24px; color: #403627; text-align: center; font-family: NanumMyeongjo; font-size: 26px; font-style: normal; font-weight: 600; line-height: normal; } .text-box .step-num .total {color: #9F9F9F; font-family: var(--ff-nanummyeongjo); font-size: 26px; font-style: normal; font-weight: 600; line-height: normal; } .text-box .step-title { color: #403627; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 26px; font-style: normal; font-weight: 600; line-height: normal; display: inline-block; border-bottom: 1px solid #403627; margin-bottom: 18px;} .text-box .step-desc { height: 56px; color: #141414; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; } .right-slider-area { flex: 1; max-width: 55%; overflow: hidden; position: relative; margin: 0; } .right-slider-area .swiper-slide img { width: 100%; height: auto; object-fit: cover; display: block; } .right-slider-area .swiper-button-next::after, .right-slider-area .swiper-button-prev::after { display: none; } .right-slider-area .swiper-button-prev, .right-slider-area .swiper-button-next { width: 50px; height: 50px; color: transparent; margin-top: -25px; } .right-slider-area .swiper-button-prev { left: 20px; } .right-slider-area .swiper-button-next { right: 20px; } .right-slider-area .swiper-button-prev::before, .right-slider-area .swiper-button-next::before { content: ''; display: block; width: 18px; height: 18px; border-top: 1.5px solid #222; border-right: 1.5px solid #222; position: absolute; top: 50%; left: 50%; } .right-slider-area .swiper-button-prev::before { transform: translate(-30%, -50%) rotate(-135deg); } .right-slider-area .swiper-button-next::before { transform: translate(-70%, -50%) rotate(45deg); } .right-slider-area .swiper-pagination { left: 50%; transform: translateX(-50%); width: auto; bottom: 20px; } .right-slider-area .swiper-pagination-bullet { width: 8px; height: 8px; background-color: rgba(255, 255, 255, 0.4); opacity: 1; margin: 0 4px !important; transition: all 0.3s ease; } .right-slider-area .swiper-pagination-bullet-active { background-color: #ffffff; } /* 공통 recommend 스타일 */ .sec-recommend{background-image: url(../img/sub31_bg_img02.webp); display: flex; flex-direction: column; align-items: center; align-self: stretch; padding: 154px 0;} .sec-recommend .inner .sec-recommend-title{color: #403627; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; margin-bottom: 60px;} .sec-recommend .inner .recommend-list{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; width: 100%; text-align: center;} .sec-recommend .inner .recommend-list li{display: flex; width: 100%; min-height: 147px; padding: 0 26px; flex-direction: column; justify-content: center; align-items: center; gap: 18px; background: #F4F1EC; } .sec-recommend .inner .recommend-list li img{width: 31.041px; height: 20px; flex-shrink: 0; aspect-ratio: 31.04/20.00;} .sec-recommend .inner .recommend-list li p{color: #414141; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;} /* 공통 points 스타일 */ .sec-points { display: flex; flex-direction: column; align-items: center; gap: 60px; width: 100%; padding-bottom: 100px; } .sec-points h2 { color: #141414; text-align: center; font-family: NanumMyeongjo; font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; } .sec-points .point-list { display: flex; width: 100%; justify-content: center; align-items: stretch; border-top: 1px solid #D4C9BA; border-bottom: 1px solid #D4C9BA; flex-wrap: wrap; } .sec-points .point-list li { display: flex; flex: 1; max-width: 410px; flex-direction: column; align-items: center; gap: 40px; border-right: 1px solid #D4C9BA; box-sizing: border-box; } .sec-points .point-list li:nth-child(1) { border-left: 1px solid #D4C9BA; } .sec-points .point-list li .img-box { width: 100%; text-align: center; } .sec-points .point-list li .img-box img { max-width: 100%; height: auto; padding-top: 80px; } .sec-points .point-list li .txt-box { padding-bottom: 80px; } .sec-points .point-list li .txt-box h3 { color: #403627; text-align: center; font-family: var(--ff-nanummyeongjo); font-size: 26px; font-style: normal; font-weight: 600; line-height: normal; padding-bottom: 18px; } .sec-points .point-list li .txt-box p { color: #414141; text-align: center; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; } .sec-points .point-list.list-31 li { display: flex; flex: 1; padding: 0 31px; max-width: 410px; flex-direction: column; align-items: center; gap: 40px; border-right: 1px solid #D4C9BA; box-sizing: border-box; } .sec-points .point-list.list-50 li { display: flex; flex: 1; padding: 0 50px; max-width: 410px; flex-direction: column; align-items: center; gap: 40px; border-right: 1px solid #D4C9BA; box-sizing: border-box; } .sec-points .point-list.list-72 li { display: flex; flex: 1; padding: 0 72px; max-width: 410px; flex-direction: column; align-items: center; gap: 40px; border-right: 1px solid #D4C9BA; box-sizing: border-box; } /* 공통 banner 스타일 */ .sec-banner{background-image: url(../img/sub31_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_32.sub32-common .sec-banner{background-image: url(../img/sub32_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_33.sub33-common .sec-banner{background-image: url(../img/sub33_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_34.sub34-common .sec-banner{background-image: url(../img/sub34_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_41.sub41-common .sec-banner{background-image: url(../img/sub41_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_42.sub42-common .sec-banner{background-image: url(../img/sub42_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_51.sub51-common .sec-banner{background-image: url(../img/sub51_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_52.sub52-common .sec-banner{background-image: url(../img/sub52_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_53.sub53-common .sec-banner{background-image: url(../img/sub53_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_61.sub61-common .sec-banner{background-image: url(../img/sub61_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} #sub_62.sub62-common .sec-banner{background-image: url(../img/sub62_bg_img01.webp); display: flex; height: 680px; padding: 120px 0 120px 164px; flex-direction: column; align-items: flex-start; gap: 34px; align-self: stretch;} .sec-banner .banner-bg{} .sec-banner .banner-bg h2{color: #FFF; font-family: NanumMyeongjo; font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; padding-bottom: 34px;} .sec-banner .banner-bg .banner-text{display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 20px;} .sec-banner .banner-bg .banner-text p{color: #FFF; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;} .sec-banner .banner-bg .banner-text .text-line{width: 1px; height: 48px; background: rgba(255, 255, 255, 0.50);} .sec-banner .banner-bg .banner-text .highlight-box{display: flex; padding: 21px 32px; justify-content: center; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.20);} /* 공통 different 스타일 */ .intro-different{display: flex; max-width: 1920px; flex-direction: column; align-items: center; margin: 0 auto; padding-bottom: 170px;} .intro-different .intro-different-text{display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 60px; max-width: 1260px;} .intro-different .intro-different-text .intro-different-list{display: flex; align-items: center; gap: 20px;} .intro-different .intro-different-text .intro-different-title{color: #141414; font-family: NanumMyeongjo; font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px;} .intro-different .intro-different-text .intro-different-list li{display: flex; width: 620px; height: 270px; flex-direction: column; justify-content: center; align-items: center; gap: 16px; background: #FAF6EF;} .intro-different .intro-different-text .intro-different-list li .box-title{color: #403627; font-family: SUIT; font-size: 26px; font-style: normal; font-weight: 600; line-height: 34px;} .intro-different .intro-different-text .intro-different-list li .box-desc{color: #414141; text-align: center; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;} .intro-different .intro-different-text .intro-different-list li .box-desc strong{color: #414141;font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 600; line-height: 28px;} /* 공통 pigment 스타일 */ .pigment{display: flex; flex-direction: column; align-items: center; gap: 80px; padding: 170px 0;} .pigment h2{color: #141414; text-align: center; font-family: NanumMyeongjo; font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px;} .pigment ul{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;} .pigment ul li{display: flex; max-width: 680px; align-items: center; gap: 40px; } .pigment ul li img{} .pigment ul li .pigment-text{display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; flex: 1 0 0;} .pigment ul li .pigment-text h4{color: #403627; text-align: center; font-family: NanumMyeongjo; font-size: 26px; font-style: normal; font-weight: 600; line-height: normal;} .pigment ul li .pigment-text p{color: #414141; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px;} /* 공통 page-intro */ .page-intro { display: flex; flex-direction: row-reverse; align-items: center; gap: 84px; margin: 0 auto; max-width: 1378px; padding: 170px 0; } .page-intro img { max-width: 100%; height: auto; display: block; } .page-intro .intro-text { display: flex; flex-direction: column; align-items: flex-start; width: 50%; gap: 34px; box-sizing: border-box; } .page-intro .intro-text .intro-title { color: #141414; font-family: var(--ff-nanummyeongjo); font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; } .page-intro .intro-text .visual-desc { color: #414141; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; } /* 공통 sub-page-intro */ .sub-page-intro { display: flex; flex-direction: column; width: 100%; max-width: 1378px; gap: 50px; margin: 0 auto; padding-bottom: 170px; } .sub-page-intro img { max-width: 100%; height: auto; display: block; } .sub-page-intro .sub-intro { display: flex; justify-content: space-between; align-items: center; width: 100%; } .sub-page-intro .sub-intro .intro-text { display: flex; flex-direction: column; align-items: flex-start; gap: 34px; } .sub-page-intro .sub-intro .intro-text .intro-title { color: #141414; font-family: var(--ff-nanummyeongjo); font-size: 32px; font-style: normal; font-weight: 600; line-height: 44px; } .sub-page-intro .sub-intro .intro-text .visual-desc { color: #414141; font-family: SUIT; font-size: 18px; font-style: normal; font-weight: 400; line-height: 28px; } .sub-page-intro .sub-intro .intro-text .visual-desc strong { display: block; color: #403627; font-family: 'SUIT'; font-size: 20px; font-style: normal; font-weight: 600; line-height: 34px; padding-top: 24px; } /* 공통 br */ br.pc {display: block;} br.mo {display: none;} @media(max-width: 1024px){ #sub_about .sec-sub-visual{min-height: auto; padding: 80px 20px;} #sub_about .sec-sub-visual .visual-article .visual-desc{font-size: var(--fz-16);} #sub_about .sec-sub-why{display: flex; flex-direction: column;} #sub_about .sec-sub-why .why-header{position: relative; top: 0; width: 100%; height: auto; min-height: 400px; padding: 80px 20px;} #sub_about .sec-sub-why .why-header .why-bg-text{display: none;} #sub_about .sec-sub-why .why-article{width: 100%; padding: 60px 20px;} #sub_about .sec-sub-why .why-article .why-list{gap: 40px 20px;} #sub_about .sec-sub-why .why-article .why-list .why-item{gap: 15px;} #sub_about .sec-sub-why .why-article .why-list .why-item .text-wrap .item-title{font-size: var(--fz-18); line-height: 1.3;} #sub_about .sec-sub-why .why-article .why-list .why-item .text-wrap .item-desc{font-size: var(--fz-14); line-height: 1.4;} #sub_about .sec-sub-space{gap: 60px; padding: 80px 20px;} #sub_about .sec-sub-space .space-header{gap: 20px;} #sub_about .sec-sub-space .space-header .space-title{font-size: var(--fz-24); line-height: 1.5;} #sub_about .sec-sub-space .space-header .space-subtitle{font-size: var(--fz-15); line-height: 1.5;} #sub_about .sec-sub-space .space-article .space-gallery{grid-template-columns: repeat(2, 1fr); gap: 20px;} #sub_about .space-popup-dim .popup-container{padding: 0 10px;} #sub_about .space-popup-dim .popup-container .btn-popup-close{position: absolute; right: 10px; top: -50px;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .btn-slider-prev{position: absolute; left: 10px;} #sub_about .space-popup-dim .popup-container .popup-slider-wrap .btn-slider-next{position: absolute; right: 10px;} #sub_doctor .sec-sub-doctor{width: 92%; margin-inline: auto;} #sub_doctor .sec-sub-doctor .doctor-header{height: auto; min-height: 400px; padding: 120px 20px 80px;} #sub_doctor .sec-sub-doctor .doctor-header .doctor-title{font-size: var(--fz-28);} #sub_doctor .sec-sub-doctor .doctor-header .doctor-desc{font-size: var(--fz-16);} #sub_doctor .sec-sub-doctor .doctor-container{flex-direction: column; align-items: center; gap: 50px; margin-top: 50px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-visual{width: 100%; justify-content: center; padding: 60px 20px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-visual .doctor-img-wrap{max-width: 370px; height: auto; aspect-ratio: 370/480;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history{width: 100%; min-height: auto; padding: 60px 20px; border-left: none; border-right: none; border-image: none; border-top: 1px solid #C5C1BB; border-bottom: 1px solid #C5C1BB;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history:after, #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history:before{display: none !important;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers{width: 100%; padding: 60px 20px;} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-title, #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-section .info-title{font-size: var(--fz-22);} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-history .info-section .info-list li, #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-list li{font-size: var(--fz-16);} #sub_doctor .sec-sub-doctor .doctor-container .doctor-info-papers .info-list li{font-size: var(--fz-17);} #sub_doctor .sec-sub-doctor .doctor-bg-text{font-size: 12vw; margin-top: 50px;} #sub_doctor .papers-popup-dim .popup-container{max-width: 90%; height: 80vh; padding: 40px 20px;} #sub_doctor .papers-popup-dim .popup-container .btn-popup-close{right: 10px; top: -50px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap{padding-right: 15px;} #sub_doctor .papers-popup-dim .popup-container .popup-content .popup-scroll-wrap .papers-list li{position: relative; padding-left: 10px; font-size: var(--fz-16);} #sub_eq .eq-header{height: auto; min-height: 50vh; padding: 60px 20px 50px; align-items: center;} #sub_eq .eq-header .eq-visual-inner{gap: 15px;} #sub_eq .eq-header .eq-visual-inner .eq-visual-title{font-size: var(--fz-28);} #sub_eq .eq-header .eq-visual-inner .eq-visual-desc{font-size: var(--fz-15); word-break: keep-all;} #sub_eq .eq-tabs{gap: 10px; padding: 40px 10px; flex-wrap: wrap;} #sub_eq .eq-tabs .tab-item{min-width: auto; padding: 6px 20px; font-size: var(--fz-15); white-space: nowrap;} #sub_eq .sec-sub-equip{padding-top: 50px;} #sub_eq .eq-modal .eq-modal-content{flex-direction: column; max-width: 400px;} #sub_eq .eq-modal .eq-modal-left{width: 100%; padding: 10px;} #sub_eq .eq-modal .eq-modal-right{width: 100%; padding: 20px;} #sub_inf .sec-sub-info .info-header{height: auto; min-height: 50vh; padding: 60px 20px 50px; align-items: center;} #sub_inf .sec-sub-info .info-header .info-visual-inner{gap: 15px;} #sub_inf .sec-sub-info .info-header .info-visual-inner .info-title{font-size: var(--fz-28);} #sub_inf .sec-sub-info .info-header .info-visual-inner .info-desc{font-size: var(--fz-16);} #sub_inf .sec-sub-info .info-container{flex-direction: column; padding: 0; margin-top: 80px; margin-bottom: 0;} #sub_inf .sec-sub-info .info-container .info-reservation{padding: 50px 10px 40px;} #sub_inf .sec-sub-info .info-container .info-hours{padding: 50px 10px 40px; border-left: none; border-top: 1px solid #C5C1BB;} #sub_inf .sec-sub-info .info-container .info-hours.active:after {display: none;} #sub_inf .sec-sub-info .info-container .info-label-wrap .info-label-text{font-size: var(--fz-24);} #sub_inf .sec-sub-info .info-container .info-reservation .info-tel{font-size: var(--fz-32);} #sub_inf .sec-sub-info .info-container .info-hours .hours-list .hours-row .hours-day{font-size: var(--fz-16); min-width: 65px;} #sub_inf .sec-sub-info .info-container .info-hours .hours-list .hours-row .hours-time{font-size: var(--fz-16);} #sub_inf .sec-sub-info .info-map-section{width: 92%; margin-inline: auto; padding: 60px 10px 80px; gap: 30px;} #sub_inf .sec-sub-info .info-map-section .map-header{flex-direction: column; align-items: flex-start; gap: 30px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .info-label-wrap .info-label-text{font-size: var(--fz-24);} #sub_inf .sec-sub-info .info-map-section .map-header .map-header-left .map-address{font-size: var(--fz-18);} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap{gap: 12px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap .btn-map-link{height: 50px; padding: 8px 18px; gap: 10px;} #sub_inf .sec-sub-info .info-map-section .map-header .map-btn-wrap .btn-map-link span{font-size: var(--fz-15);} #sub_inf .sec-sub-info .info-map-section .map-wrap{height: 400px;} #sub_inf .sec-sub-info .info-map-section .map-wrap .map-pc{display: none;} #sub_inf .sec-sub-info .info-map-section .map-wrap .map-mo{display: block; width: 100%; height: 100%;} .sub2-common .sec-sub-visual{height: 450px;} .sub2-common .sec-sub-visual .visual-header .visual-title{font-size: var(--fz-28); line-height: 1.3;} .sub2-common .sec-sub-visual .visual-article .visual-desc{font-size: var(--fz-16); line-height: 1.5;} .sub2-common .sec-sub-intro{height: auto; padding-block: 180px 80px; margin-top: -80px;} .sub2-common .sec-sub-intro .cinner .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-intro .cinner .intro-desc{font-size: var(--fz-15); line-height: 1.6;} .sub2-common .sec-sub-method{padding: 80px 20px;} .sub2-common .sec-sub-method .cinner{gap: 30px;} .sub2-common .sec-sub-method .cinner .method-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-method .cinner .method-img-wrap{height: auto; aspect-ratio: 1160/468;} .sub2-common .sec-sub-method .cinner .method-desc{font-size: var(--fz-15); line-height: 1.6;} .sub2-common .sec-sub-certifi{height: auto; padding: 80px 20px;} .sub2-common .sec-sub-certifi .cinner{flex-direction: column; align-items: center; gap: 40px;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap{height: auto; gap: 20px; text-align: center;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap .certifi-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-certifi .cinner .certifi-text-wrap .certifi-desc{font-size: var(--fz-15); line-height: 1.6;} .sub2-common .sec-sub-certifi .cinner .right{display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%;} .sub2-common .sec-sub-certifi .cinner .right .certifi-img-wrap{display: flex; justify-content: center; width: 100%; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .right .certifi-img-wrap .certifi-frame{position: relative; margin: 10px 8px; padding: 5px; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .right .certifi-img-wrap .certifi-frame .certifi-inner-frame{padding: 2px; box-sizing: border-box;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list{display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; margin: 0; list-style: none;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list li{position: relative; padding-left: 10px; font-family: var(--ff-suit); font-size: var(--fz-14); color: #ffffff; font-weight: 400; line-height: 22px; text-align: left; word-break: keep-all;} .sub2-common .sec-sub-certifi .cinner .right .certifi-list li:before{position: absolute; top: 11px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #ffffff; transform: translateY(-50%); content: '';} .sub2-common .sec-sub-equip{padding: 80px 20px;} .sub2-common .sec-sub-equip .cinner{gap: 40px;} .sub2-common .sec-sub-equip .cinner .equip-header .equip-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-equip .cinner .equip-header .equip-subtitle{font-size: var(--fz-15); line-height: 1.6;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav{flex-wrap: wrap; gap: 15px 20px;} #sub_contour.sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav{display: grid; grid-template-columns: 1fr 1fr; width: 80%; gap: 15px 20px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav .btn-tab{min-height: 33px; font-size: var(--fz-16);} #sub_texture.sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav .btn-tab{width: 29%;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-tab-nav .btn-tab.active{padding: 8px 5px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article{flex-direction: column; gap: 40px; padding: 40px 20px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-img-wrap{width: 100%; height: auto; aspect-ratio: 544/395;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap{width: 100%; gap: 15px;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-item-title{font-size: var(--fz-22);} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-item-desc{font-size: var(--fz-15); line-height: 1.6;} .sub2-common .sec-sub-equip .cinner .equip-container .equip-content-wrap .equip-article .equip-info-wrap .equip-tags li{font-size: var(--fz-14); padding: 4px 8px;} .sub2-common .sec-sub-caution{padding: 80px 20px;} .sub2-common .sec-sub-caution .cinner{gap: 40px;} .sub2-common .sec-sub-caution .cinner .caution-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-caution .cinner .caution-list li{min-height: auto; padding: 15px 10px; justify-content: flex-start; align-items: center; gap: 12px;} .sub2-common .sec-sub-caution .cinner .caution-list li img{width: 14px; height: auto; margin-top: 4px; flex-shrink: 0;} .sub2-common .sec-sub-caution .cinner .caution-list li span{font-size: var(--fz-15); line-height: 1.6; word-break: keep-all;} .sub2-common .sec-sub-faq{padding: 80px 20px;} .sub2-common .sec-sub-faq .cinner{gap: 40px;} .sub2-common .sec-sub-faq .cinner .faq-title{font-size: var(--fz-24); line-height: 1.4;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-q{height: auto; min-height: 80px; padding: 20px; font-size: var(--fz-16); line-height: 1.4;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-a{padding: 24px;} .sub2-common .sec-sub-faq .cinner .faq-list .faq-item .faq-a p{font-size: var(--fz-15); line-height: 1.6;} .sub31-common .sec-sub-visual{height: 450px; padding: 80px 20px; box-sizing: border-box;} .sub31-common .sec-sub-visual .sub31 .sub31-header .sub31-title{font-size: var(--fz-28); line-height: 1.3;} .sub31-common .sec-sub-visual .sub31 .sub31-header .sub31-desc{font-size: var(--fz-16); line-height: 1.5;} #sub_31 .sub31-img{padding-top: 50px; padding-inline: 20px;} .sub31-common .sec-sub-visual .sub31 .sub31-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } .sub-intro-bottom{margin-top: 30px;} .sub-intro-list{display: flex; flex-direction: column; gap: 20px;} .sub-intro-list .intro-list-desc{font-size: var(--fz-15); line-height: 1.6; height: auto; padding: 30px 20px; box-sizing: border-box;} #sub_31.sub31-common .sub-intro-list .intro-list-desc { font-size: var(--fz-15); line-height: 1.6; height: auto; padding: 30px 20px; box-sizing: border-box; } #sub_31 .sub31-img{padding-top: 50px; padding-inline: 20px;} .sub32-common .sec-sub-visual{height: 450px; padding: 80px 20px; box-sizing: border-box;} .sub32-common .sec-sub-visual .sub32 .sub32-header .sub32-title{font-size: var(--fz-28); line-height: 1.3;} .sub32-common .sec-sub-visual .sub32 .sub32-header .sub32-desc{font-size: var(--fz-16); line-height: 1.5;} .sub32-common .sec-sub-visual .sub32 .sub32-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_32 .sub32-img{padding-top: 50px; padding-inline: 20px;} #sub_32.sub32-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_32.sub32-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_32.sub32-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_32.sub32-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_32.sub32-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub33-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub33-common .sec-sub-visual .sub33 .sub33-header .sub33-title{font-size: var(--fz-28); line-height: 1.3;} .sub33-common .sec-sub-visual .sub33 .sub33-header .sub33-desc{font-size: var(--fz-16); line-height: 1.5;} .sub33-common .sec-sub-visual .sub33 .sub33-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_33 .sub33-img{padding-top: 50px; padding-inline: 20px;} #sub_33.sub33-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_33.sub33-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_33.sub33-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_33.sub33-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_33.sub33-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub34-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub34-common .sec-sub-visual .sub34 .sub34-header .sub34-title{font-size: var(--fz-28); line-height: 1.3;} .sub34-common .sec-sub-visual .sub34 .sub34-header .sub34-desc{font-size: var(--fz-16); line-height: 1.5;} .sub34-common .sec-sub-visual .sub34 .sub34-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_34 .sub34-img{padding-top: 50px; padding-inline: 20px;} #sub_34.sub34-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_34.sub34-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_34.sub34-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_34.sub34-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_34.sub34-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub41-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub41-common .sec-sub-visual .sub41 .sub41-header .sub41-title{font-size: var(--fz-28); line-height: 1.3;} .sub41-common .sec-sub-visual .sub41 .sub41-header .sub41-desc{font-size: var(--fz-16); line-height: 1.5;} .sub41-common .sec-sub-visual .sub41 .sub41-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_41 .sub41-img{padding-top: 50px; padding-inline: 20px;} #sub_41.sub41-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_41.sub41-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_41.sub41-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_41.sub41-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_41.sub41-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub42-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub42-common .sec-sub-visual .sub42 .sub42-header .sub42-title{font-size: var(--fz-28); line-height: 1.3;} .sub42-common .sec-sub-visual .sub42 .sub42-header .sub42-desc{font-size: var(--fz-16); line-height: 1.5;} .sub42-common .sec-sub-visual .sub42 .sub42-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_42 .sub42-img{padding-top: 50px; padding-inline: 20px;} #sub_42.sub42-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_42.sub42-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_42.sub42-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_42.sub42-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_42.sub42-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .intro-title { font-size: var(--fz-24); line-height: 1.4; } #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .visual-desc { font-size: var(--fz-15); line-height: 1.6; } #sub_42.sub42-common .sub-page-intro .sub-intro .intro-text .visual-desc strong { font-size: var(--fz-18); line-height: 1.5; } .sub51-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub51-common .sec-sub-visual .sub51 .sub51-header .sub51-title{font-size: var(--fz-28); line-height: 1.3;} .sub51-common .sec-sub-visual .sub51 .sub51-header .sub51-desc{font-size: var(--fz-16); line-height: 1.5;} .sub51-common .sec-sub-visual .sub51 .sub51-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_51 .sub51-img{padding-top: 50px; padding-inline: 20px;} .sub51-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub51-sub-intro img{width: 100%;} .sub51-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub51-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub51-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub51-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub51-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_51.sub51-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_51.sub51-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_51.sub51-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_51.sub51-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_51.sub51-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub52-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub52-common .sec-sub-visual .sub52 .sub52-header .sub52-title{font-size: var(--fz-28); line-height: 1.3;} .sub52-common .sec-sub-visual .sub52 .sub52-header .sub52-desc{font-size: var(--fz-16); line-height: 1.5;} .sub52-common .sec-sub-visual .sub52 .sub52-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_52 .sub52-img{padding-top: 50px; padding-inline: 20px;} .sub52-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub52-sub-intro img{width: 100%;} .sub52-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub52-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub52-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub52-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub52-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_52.sub52-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_52.sub52-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_52.sub52-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_52.sub52-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_52.sub52-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub53-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub53-common .sec-sub-visual .sub53 .sub53-header .sub53-title{font-size: var(--fz-28); line-height: 1.3;} .sub53-common .sec-sub-visual .sub53 .sub53-header .sub53-desc{font-size: var(--fz-16); line-height: 1.5;} .sub53-common .sec-sub-visual .sub53 .sub53-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_53 .sub53-img{padding-top: 50px; padding-inline: 20px;} .sub53-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub53-sub-intro img{width: 100%;} .sub53-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub53-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub53-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub53-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub53-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_53.sub53-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_53.sub53-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_53.sub53-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_53.sub53-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_53.sub53-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub54-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub54-common .sec-sub-visual .sub54 .sub54-header .sub54-title{font-size: var(--fz-28); line-height: 1.3;} .sub54-common .sec-sub-visual .sub54 .sub54-header .sub54-desc{font-size: var(--fz-16); line-height: 1.5;} .sub54-common .sec-sub-visual .sub54 .sub54-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_54 .sub54-img{padding-top: 50px; padding-inline: 20px;} .sub54-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub54-sub-intro img{width: 100%;} .sub54-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub54-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub54-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub54-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub54-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_54.sub54-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_54.sub54-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_54.sub54-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_54.sub54-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_54.sub54-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub61-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub61-common .sec-sub-visual .sub61 .sub61-header .sub61-title{font-size: var(--fz-28); line-height: 1.3;} .sub61-common .sec-sub-visual .sub61 .sub61-header .sub61-desc{font-size: var(--fz-16); line-height: 1.5;} .sub61-common .sec-sub-visual .sub61 .sub61-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_61 .sub61-img{padding-top: 50px; padding-inline: 20px;} .sub61-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub61-sub-intro img{width: 100%;} .sub61-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub61-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub61-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub61-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub61-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_61.sub61-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_61.sub61-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_61.sub61-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_61.sub61-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_61.sub61-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub62-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub62-common .sec-sub-visual .sub62 .sub62-header .sub62-title{font-size: var(--fz-28); line-height: 1.3;} .sub62-common .sec-sub-visual .sub62 .sub62-header .sub62-desc{font-size: var(--fz-16); line-height: 1.5;} .sub62-common .sec-sub-visual .sub62 .sub62-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_62 .sub62-img{padding-top: 50px; padding-inline: 20px;} .sub62-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub62-sub-intro img{width: 100%;} .sub62-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub62-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub62-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub62-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub62-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_62.sub62-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_62.sub62-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_62.sub62-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_62.sub62-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_62.sub62-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } .sub71-common .sec-sub-visual{height: auto; height: 450px; padding: 80px 20px;} .sub71-common .sec-sub-visual .sub71 .sub71-header .sub71-title{font-size: var(--fz-28); line-height: 1.3;} .sub71-common .sec-sub-visual .sub71 .sub71-header .sub71-desc{font-size: var(--fz-16); line-height: 1.5;} .sub71-common .sec-sub-visual .sub71 .sub71-header { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; color: #fff; } #sub_71 .sub71-img{padding-top: 50px; padding-inline: 20px;} .sub71-sub-intro{padding: 0 20px 80px; gap: 40px;} .sub71-sub-intro img{width: 100%;} .sub71-sub-intro .sub-intro{flex-direction: column; gap: 40px;} .sub71-sub-intro .sub-intro .intro-text{max-width: 100%; align-items: center; text-align: center;} .sub71-sub-intro .sub-intro .intro-text .intro-title{font-size: var(--fz-24); line-height: 1.4;} .sub71-sub-intro .sub-intro .intro-text .visual-desc{font-size: var(--fz-15); line-height: 1.6;} .sub71-sub-intro .sub-intro .intro-text .visual-desc strong{font-size: var(--fz-18); line-height: 1.5;} #sub_71.sub71-common .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } #sub_71.sub71-common .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } #sub_71.sub71-common .sec-banner .banner-bg .banner-text { align-items: center; } #sub_71.sub71-common .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } #sub_71.sub71-common .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } /* 모바일 공통 슬라이더 스타일 */ .slider-sect{padding: 80px 20px;} .slider-container{flex-direction: column; gap: 40px;} .left-text-area{width: 100%; padding-top: 0; gap: 30px;} .slider-sect-text h2{font-size: var(--fz-24); line-height: 1.4;} .text-box{padding: 30px 20px;} .text-box .step-num, .text-box .step-num .total, .text-box .step-title{font-size: var(--fz-20);} .text-box .step-title{margin-bottom: 12px;} .text-box .step-desc{height: auto; font-size: var(--fz-15); line-height: 1.6;} .right-slider-area{max-width: 100%; width: 100%;} .right-slider-area .swiper-button-prev, .right-slider-area .swiper-button-next{width: 40px; height: 40px;} .right-slider-area .swiper-button-prev{left: 10px;} .right-slider-area .swiper-button-next{right: 10px;} /* 모바일 공통 recommend 스타일 */ .sec-recommend{padding: 80px 20px;} .sec-recommend .inner { width: 100%; } .sec-recommend .inner .sec-recommend-title{font-size: var(--fz-24); line-height: 1.4; margin-bottom: 40px;} .sec-recommend .inner .recommend-list{display: grid; grid-template-columns: repeat(1, 1fr); padding: 0; gap: 15px;} .sec-recommend .inner .recommend-list li{width: 100%; height: auto; padding: 30px 20px; box-sizing: border-box;} .sec-recommend .inner .recommend-list li p{font-size: var(--fz-15); line-height: 1.6; text-align: center;} /* 모바일 공통 points 스타일 */ .sec-points { padding: 80px 20px; gap: 40px; } .sec-points h2 { font-size: var(--fz-24); line-height: 1.4; } .sec-points .point-list { align-items: stretch; flex-direction: column; border: none; gap: 20px; } .sec-points .point-list li, .sec-points .point-list.list-31 li, .sec-points .point-list.list-50 li, .sec-points .point-list.list-72 li { width: 100% !important; max-width: 100% !important; padding: 40px 30px !important; box-sizing: border-box; flex: none; border: 1px solid #D4C9BA; } .sec-points .point-list li:nth-child(1) { border-left: 1px solid #D4C9BA; } .sec-points .point-list li .img-box { padding: 0; } .sec-points .point-list li .img-box img { padding-top: 0; } .sec-points .point-list li .txt-box { padding-bottom: 0; } .sec-points .point-list li .txt-box h3 { font-size: var(--fz-20); padding-bottom: 12px; } .sec-points .point-list li .txt-box p { font-size: var(--fz-15); line-height: 1.6; } /* 모바일 공통 different 스타일 */ .intro-different{padding: 0 20px 80px;} .intro-different .intro-different-text{gap: 40px; width: 100%;} .intro-different .intro-different-text .intro-different-list{flex-direction: column; gap: 20px; width: 100%;} .intro-different .intro-different-text .intro-different-list li{width: 100%; height: auto; padding: 40px 20px; box-sizing: border-box;} .intro-different .intro-different-text .intro-different-title{font-size: var(--fz-24); line-height: 1.4; text-align: center;} .intro-different .intro-different-text .intro-different-list li .box-title{font-size: var(--fz-20);} .intro-different .intro-different-text .intro-different-list li .box-desc{font-size: var(--fz-15); line-height: 1.6;} .intro-different .intro-different-text .intro-different-list li .box-desc strong{font-size: var(--fz-15);} /* 모바일 공통 pigment 스타일 */ .pigment{padding: 80px 20px; gap: 40px; width: 100%; box-sizing: border-box;} .pigment h2{font-size: var(--fz-24); line-height: 1.4;} .pigment ul{grid-template-columns: repeat(1, 1fr); gap: 48px; width: 100%;} .pigment ul li{gap: 20px; max-width: 100%;} .pigment ul li img{width: 90px; height: 90px; flex-shrink: 0;} .pigment ul li .pigment-text{align-items: flex-start; text-align: left; gap: 10px;} .pigment ul li .pigment-text h4{font-size: var(--fz-18);} .pigment ul li .pigment-text p{font-size: var(--fz-15); line-height: 1.6;} /* 모바일 공통 page-intro */ .page-intro { flex-direction: column; gap: 40px; padding: 80px 20px; box-sizing: border-box; } .page-intro img { width: 100%; } .page-intro .intro-text { width: 100%; padding: 0; align-items: center; text-align: center; } .page-intro .intro-text .intro-title { font-size: var(--fz-24); line-height: 1.4; } .page-intro .intro-text .visual-desc { font-size: var(--fz-15); line-height: 1.6; } /* 공통 sub-page-intro */ .sub-page-intro { padding: 0 20px 80px; gap: 40px; } .sub-page-intro img { width: 100%; } .sub-page-intro .sub-intro { flex-direction: column; gap: 40px; } .sub-page-intro .sub-intro .intro-text { max-width: 100%; align-items: center; text-align: center; } .sub-page-intro .sub-intro .intro-text .intro-title { font-size: var(--fz-24); line-height: 1.4; } .sub-page-intro .sub-intro .intro-text .visual-desc { font-size: var(--fz-15); line-height: 1.6; } .sub-page-intro .sub-intro .intro-text .visual-desc strong { font-size: var(--fz-18); line-height: 1.5; } /* 모바일 공통 banner*/ .sec-banner { height: auto; padding: 80px 20px; align-items: center; text-align: center; background-position: center; box-sizing: border-box; } .sec-banner .banner-bg h2 { font-size: var(--fz-24); line-height: 1.4; padding-bottom: 24px; word-break: keep-all; } .sec-banner .banner-bg .banner-text { align-items: center; } .sec-banner .banner-bg .banner-text p { font-size: var(--fz-15); line-height: 1.6; word-break: keep-all; } .sec-banner .banner-bg .banner-text .highlight-box { padding: 20px; box-sizing: border-box; } /* 모바일 공통 br */ br.mo {display: block;} br.pc {display: none;} #sub_31 .sub31-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_31 .sub31-img img {width: 100%; height: auto; display: block;} #sub_32 .sub32-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_32 .sub32-img img {width: 100%; height: auto; display: block;} #sub_33 .sub33-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_33 .sub33-img img {width: 100%; height: auto; display: block;} #sub_34 .sub34-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_34 .sub34-img img {width: 100%; height: auto; display: block;} #sub_41 .sub41-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_41 .sub41-img img {width: 100%; height: auto; display: block;} #sub_42 .sub42-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_42 .sub42-img img {width: 100%; height: auto; display: block;} #sub_51 .sub51-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_51 .sub51-img img {width: 100%; height: auto; display: block;} #sub_52 .sub52-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_52 .sub52-img img {width: 100%; height: auto; display: block;} #sub_53 .sub53-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_53 .sub53-img img {width: 100%; height: auto; display: block;} #sub_54 .sub54-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_54 .sub54-img img {width: 100%; height: auto; display: block;} #sub_61 .sub61-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_61 .sub61-img img {width: 100%; height: auto; display: block;} #sub_62 .sub62-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_62 .sub62-img img {width: 100%; height: auto; display: block;} #sub_71 .sub71-img {padding-top: 50px; padding-inline: 20px; width: 100%; box-sizing: border-box;} #sub_71 .sub71img img {width: 100%; height: auto; display: block;} }