/* common.css */ :root { --primary : #463429; --ff-parlare : "parlare"; --ff-aboreto : "Aboreto", system-ui; --ff-goodpro : "ff-good-web-pro"; --headerH: 90px; } #wrap {padding-top: var(--headerH); background: #EDEBEB;} @media screen and (max-width:1024px){ :root { --headerH: 60px; } } @media screen and (max-width:768px){ :root { --headerH: 48px; } } /* swiper */ #wrap .swiper-wrapper {height: auto;} /* util */ .br-mo {display: none;} .br-pc {display: block;} img {max-width: 100%;} input[type="checkbox"] {appearance: none; border: none; width: 24px; height: 24px; display: inline-block; vertical-align: middle; background-image: url(/img/com/input_checkbox.png); background-position: left center; background-size: auto 100%; background-repeat: no-repeat;} input[type="checkbox"]:checked {background-position: right center;} .pagination {display: flex; justify-content: center; align-items: center; gap: 5px;} .pagination a {display: block; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 1px; color: rgba(0,0,0,0);} .pagination ul {display: flex; gap: 5px;} .pagination ul a {font-size: 15px; opacity: 0.6; color: var(--primary); } .pagination ul a.this {opacity: 1;} .pagination > a {background-position: center; background-repeat: no-repeat; background-size: 12px; background-image: url(/img/com/arrow_pagination.png);} .pagination > a.next {transform: scaleX(-1);} #cursor {position: fixed; z-index: 90; transform: translate(-50%,-50%); width:45px; height: 45px; background-image: url(/img/main/icon_cursor_2.svg); background-position: center; background-size: cover; background-repeat: no-repeat; left: 0; top: 0; pointer-events: none;} .swiper-pagination {display: flex; gap: 10px; align-items: center; justify-content: center; position: static;} .swiper-pagination .swiper-pagination-bullet {margin: 0 !important; opacity: 1; height: 7px; width: 55px; box-sizing: border-box; border-radius: 4px; background: #D2CECC; } .swiper-pagination .swiper-pagination-bullet-active {background: var(--primary); } @media screen and (max-width:1024px){ #cursor {width: 70px; height: 45px;} } @media screen and (max-width:768px){ .br-mo {display: block;} .br-pc {display: none;} input[type="checkbox"] {width: 20px; height: 20px;} #cursor {display: none;} .swiper-pagination {gap: 8px; } .swiper-pagination .swiper-pagination-bullet {width: 34px; height: 5px;} } /* button */ .btn-hover {position: relative; overflow: hidden;} .btn-hover::before {content:""; position: absolute; width: 100%; height: 200%; left: 0; top: 0; transform: translateY(0%); transition: transform 0.3s;} .btn-hover span {position: relative; z-index: 1; transition: color 0.3s;} /* 갈색바탕 -> 흰바탕 */ .btn-ty1::before { background: linear-gradient(to bottom, var(--primary) 50%, #fff 50%); } .btn-ty1 span {color: #FCFCFC; } /* 흰선 -> 흰바탕 */ .btn-ty2::before {background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, #fff 50%); } .btn-ty2::after {content:""; position: absolute; width: 100%; height: 100%; border: 1px solid #fff; left: 0; top: 0; box-sizing: border-box; border-radius: inherit;} .btn-ty2 span {color: #fff; } /* 갈색선 -> 갈색바탕 */ .btn-ty3::before {background: linear-gradient(to bottom, rgba(0,0,0,0) 50%, var(--primary) 50%); } .btn-ty3::after {content:""; position: absolute; width: 100%; height: 100%; border: 1px solid var(--primary); left: 0; top: 0; box-sizing: border-box; border-radius: inherit;} .btn-ty3 span {color: var(--primary); } /* 흰바탕 -> 갈색바탕 */ .btn-ty4::before { background: linear-gradient(to bottom, #fff 50%, var(--primary) 50%); } .btn-ty4 span {color: var(--primary); } @media (hover: hover){ .btn-hover:hover::before {transform: translateY(-50%); } .btn-ty1:hover span {color: var(--primary);} .btn-ty2:hover span {color: var(--primary);} .btn-ty3:hover span {color: #fff; } .btn-ty4:hover span {color: #fff; } } /* ani */ .parallax-item .parallax-cont {display: block;} .parallax-item .parallax-cont img {display: block; width: 100%; height: 100%; object-fit: cover;} .fade-zoom-in {transform: scale(1.1); opacity: 0; transition-property: transform, opacity; transition-duration: 1.6s, 1s; display: block;} .ani-started .fade-zoom-in {opacity: 1; transform: scale(1);} .fade-up {transform: translateY(50px); opacity: 0; transition-property: transform, opacity; transition-duration: 0.8s, 0.8s;} .ani-started .fade-up {opacity: 1; transform: translateY(0);} .fade-in {opacity: 0; transition-property: opacity; transition-duration: 0.8s;} .ani-started .fade-in {opacity: 1;} .ani-started [data-delay="0.2"] {transition-delay: 0.2s;} .ani-started [data-delay="0.4"] {transition-delay: 0.4s;} .ani-started [data-delay="0.6"] {transition-delay: 0.6s;} .ani-started [data-delay="0.8"] {transition-delay: 0.8s;} /* header */ header {width: 100%; height: var(--headerH); position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden; background: #EDEBEB;} header > .inner {padding: 0 60px; margin: auto; display: flex; justify-content: space-between; align-items: center; height: 100%; width: 100%;} header .logo a {display: block; line-height: 1; font-size: 0; width: 169px; aspect-ratio: 1/0.23; background-color: #ccc; background: url(/img/com/logo.svg) center no-repeat; background-size: cover; } header .right {display: flex; align-items: center; gap: 30px; } header .right .contact {} header .right .contact a {display: flex; width: 140px; height: 48px; align-items: center; justify-content: center; border-radius: 24px; font-size: 20px; } header .right .menu {position: relative; z-index: 1001;} header .right .menu a {width: 56px; height: 56px; display: flex; justify-content: center; align-items: end; flex-direction: column; gap: 8px; padding: 0 10px;} header .right .menu a span {width: 100%; height: 2px; background: var(--primary); position: relative;} header .menu a::before {content:""; position: absolute; right: 10px; top: 17px; width: 25px; height: 2px; background: var(--primary); transition: width 0.2s, opacity 0s 0.6s;} header .menu a:hover::before {width: 36px;} header.open .menu a::before {opacity: 0; width: 36px; transition: opacity 0s 0s;} @media screen and (max-width:1024px){ header > .inner {padding: 0 5%;} header .logo a {width: 132px;} header .right {gap: 24px; } header .right .contact a {height: 40px; width: 120px; font-size: 18px;} } @media screen and (max-width:768px){ header .logo {position: relative; z-index: 1001;} header .logo a {width: 106px;} header .right {gap: 18px;} header .right .contact {} header .right .contact a {width: 105px; height: 34px; font-size: 16px;} header .right .menu a {width: 36px; height: 36px; gap: 5px; padding: 0 6px; } header .menu a::before {right: 6px; top: 10px; width: 16px;} header .menu a:hover::before {width: 24px;} } @media screen and (max-width:480px){ header .right {gap: 10px; } header .right .contact a {width: 85px; height: 34px; font-size: 15px;} } /* aside */ aside {position: fixed; width: 100%; height: 100%; z-index: 1000; left: 0; top: 0; pointer-events: none; overflow: hidden; overscroll-behavior: contain;} aside .backdrop {background: #000; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s;} aside .side-menu {position: absolute; right: 0; top: 0; max-width: 1300px; width: 100%; height: 100%; background: #fcfcfc; padding: 60px 60px 60px 200px; transition: opacity 0.8s, transform 0.8s; opacity: 0;} aside .side-menu .inner {height: 100%; } aside .side-menu .gnb {display: flex; flex-direction: column; justify-content: center; position: relative; gap: 80px; height: 100%; color: var(--primary); width: 100%;} aside .side-menu .gnb li {width: fit-content; } aside .side-menu .gnb .dep1 {max-width: 270px; position: relative; z-index: 1;} aside .side-menu .gnb .dep1 a {display: block; position: relative; font-size: 40px; line-height: 1; font-family: var(--ff-aboreto);} aside .side-menu .gnb .dep1 a span {transition: opacity 0.3s;} aside .side-menu .gnb .dep1 a span:last-child {font-family: var(--ff-parlare); position: absolute; left: 0; top: 50%; transform: translate(0,-50%); opacity: 0; text-transform: lowercase; } aside .side-menu .gnb .dep2-menu {width: 100%; height: 100%; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-family: var(--ff-aboreto); font-size: var(--font-20); line-height: 1; padding-left: 420px; pointer-events: none; color: #473429;} aside .side-menu .gnb .dep2-menu ul {display: flex; flex-direction: column; gap: 58px; justify-content: center; height: 100%;} aside .side-menu .gnb .img-box {overflow: hidden; position: absolute; right: 0; bottom: 0; width: 256px; aspect-ratio: 1/1.02; opacity: 0; transition: opacity 0.7s; pointer-events: none;} aside .side-menu .gnb .img-box img {width: 100%; height: 100%; object-fit: cover;} aside .side-menu .gnb .img-box.active {opacity: 1;} aside .side-menu .mo-contact {position: absolute; width: 100%; left: 0%; bottom: 60px; display: flex; z-index: 5; padding-left: 200px;} aside .side-menu .mo-contact > a {width: 140px; height: 48px; display: none; align-items: center; justify-content: center; border-radius: 24px; font-size: 20px; } aside .side-menu .mo-contact .sns-box {display: flex; align-items: center; gap: 10px;} aside .side-menu .mo-contact .sns-box a {width: 28px; height: 28px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 0; font-size: 0; border-radius: 0; background-color: rgba(0,0,0,0);} aside .side-menu .mo-contact .sns-box a.app { background-image: url(/img/com/icon_app.svg);} aside .side-menu .mo-contact .sns-box a.mail {background-image: url(/img/com/icon_mail.svg);} header.open aside {pointer-events: auto; } header.open aside .backdrop {opacity: 0.3;} header.open aside .side-menu {opacity: 1; transform: translate(0,0);} @media (hover: hover) and (min-width:769px){ aside .side-menu .gnb li:hover .dep1 span:first-child {opacity: 0;} aside .side-menu .gnb li:hover .dep1 span:last-child {opacity: 1;} aside .side-menu .gnb li:hover .dep2-menu { pointer-events: auto;} aside .side-menu .gnb li:hover .dep2-menu li {opacity: 1; transform: translateY(0);} aside .side-menu .gnb li:hover .dep2-menu:has(li:hover) li:not(:hover) a {color: #90847E;} aside .side-menu .gnb .dep2-menu ul li {opacity: 0; transform: translateY(50%); transition-duration: 0.6s;} aside .side-menu .gnb .dep2-menu ul li a {transition: color 0.3s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(1) {transition-delay: 0.1s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(2) {transition-delay: 0.15s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(3) {transition-delay: 0.2s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(4) {transition-delay: 0.25s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(5) {transition-delay: 0.3s;} aside .side-menu .gnb .dep2-menu ul li:nth-child(6) {transition-delay: 0.35s;} } @media screen and (max-width:1200px) { aside .side-menu {padding-left: 120px;} aside .side-menu .gnb {gap: 60px;} aside .side-menu .gnb .img-box {width: 220px;} aside .side-menu .mo-contact {padding-left: 120px;} } @media screen and (max-width:1024px){ aside .side-menu .gnb {gap: 48px;} aside .side-menu .gnb .dep1 a { font-size: 28px;} aside .side-menu .gnb .dep2-menu {padding-left: 300px;} aside .side-menu .gnb .dep2-menu ul {gap: 38px; } aside .side-menu .gnb .img-box {width: 200px;} } @media screen and (min-width:769px){ aside .side-menu {transform: translate(60%,0);} } @media screen and (max-width:768px){ aside .side-menu {transform: translate(0,-40%); padding: calc(var(--headerH) + 20px) 5% 180px; max-height: min(760px, 100vh); } aside .side-menu .inner {max-height: calc(100svh - var(--headerH) - 220px); overflow-y: auto;} aside .side-menu .inner::-webkit-scrollbar {width: 4px;} aside .side-menu .inner::-webkit-scrollbar-track {width: 4px;} aside .side-menu .inner::-webkit-scrollbar-thumb {width: 4px; background: #EAE8E7;} aside .side-menu .gnb {gap: 0; justify-content: start; height: auto; max-height: 100%; overflow-y: auto;} aside .side-menu .gnb li {width: 100%;} aside .side-menu .gnb .dep1 {width: 100%; max-width: 100%; text-align: center;} aside .side-menu .gnb .dep1 a {font-size: 24px; padding: 30px; } aside .side-menu .gnb .dep1 a span:last-child {width: 100%;} aside .side-menu .gnb .img-box {display: none;} aside .side-menu .gnb .dep2-menu {padding: 0; position: static; transform: none; opacity: 1; pointer-events: auto; display: none; background: #F8F8F8; text-align: center;} aside .side-menu .gnb .dep2-menu ul {padding: 30px 10px; gap: 20px; } aside .side-menu .gnb li.dep-open .dep1 {background: #F8F8F8; } aside .side-menu .gnb li.dep-open .dep1 span:first-child {opacity: 0;} aside .side-menu .gnb li.dep-open .dep1 span:last-child {opacity: 1;} aside .side-menu .mo-contact { gap: 10px; align-items: center; justify-content: end; flex-direction: column-reverse; padding-left: 0;} aside .side-menu .mo-contact > a {display: flex;} } @media screen and (max-width:480px){ aside .side-menu {padding: calc(var(--headerH) + 20px) 5% 140px; height: auto;} aside .side-menu .inner {max-height: calc(100svh - var(--headerH) - 120px);} aside .side-menu .mo-contact {bottom: 32px;} } /* 하단 inquiry banner */ /* inquiry */ .inquiry-banner {width: 100%; overflow: hidden; } .inquiry-banner .inner {width: 100% !important; position: relative;} .inquiry-banner .back-img { width: 100%; aspect-ratio: 1/0.5; overflow: hidden; font-size: 0; position: relative;} .inquiry-banner .back-img::before {content:""; width: calc(100% - 80px); height: calc(100% - 80px); position: absolute; border: 1px solid #fff; opacity: 0.3; left: 0; top: 0; transform: translate(40px, 40px); z-index: 1;} .inquiry-banner .back-img .mo-img {display: none;} .inquiry-banner .sect-head {color: #fff; line-height: 1.5;} .inquiry-banner .sect-head h2 {font-family: var(--ff-aboreto); font-size: calc(var(--font-24)*2); text-transform: uppercase; color: inherit; transition: transform 0.8s 0.2s, opacity 0.8s 0.2s; opacity: 0; transform: translateY(1em); line-height: 1.3;} .inquiry-banner .sect-head p {font-size: var(--font-20); margin-top: 1.5em; transition: transform 0.8s 0.6s, opacity 0.8s 0.6s; opacity: 0; transform: translateY(1em);} .inquiry-banner .sect-head .p-italic {font-family: var(--ff-parlare); font-size: var(--font-18); display: block; margin-bottom: 10px; transition: transform 0.8s, opacity 0.8s; opacity: 0; transform: translateY(1em);} .inquiry-banner .sect-cont { position: absolute; left: 0; top: 50%; width: 100%; transform: translateY(-50%); text-align: center; color: #fff; z-index: 1; padding: 0 5%;} .inquiry-banner .sect-cont .button {margin-top: var(--gap-120); transition-delay: 1s;} .inquiry-banner .sect-cont .button a {display: flex; align-items: center; justify-content: center; font-size: var(--font-20); width: fit-content; height: 62px; padding: 0 40px; border-radius: 32px; margin: 0 auto;} .inquiry-banner .parallax-item .parallax-cont {aspect-ratio: 1/0.52;} .inquiry-banner .sect-head.ani-started .p-italic, .inquiry-banner .sect-head.ani-started h2, .inquiry-banner .sect-head.ani-started p {opacity: 1; transform: translateY(0);} @media screen and (max-width:1024px) { .inquiry-banner .back-img {aspect-ratio: 1/0.7;} .inquiry-banner .parallax-item .parallax-cont {aspect-ratio: 1/0.75;} } @media screen and (max-width:768px){ .inquiry-banner .back-img {aspect-ratio: 1/2;} .inquiry-banner .back-img::before {width: calc(100% - 40px); height: calc(100% - 40px); transform: translate(20px, 20px);} .inquiry-banner .back-img:has(.mo-img) img {display: none;} .inquiry-banner .back-img:has(.mo-img) img.mo-img {display: block;} .inquiry-banner .sect-head h2 {font-size: 30px;} .inquiry-banner .sect-head p {font-size: 18px; margin-top: 20px;} .inquiry-banner .parallax-item .parallax-cont {aspect-ratio: 1/2.2;} .inquiry-banner .sect-cont .button a {height: 50px; padding: 0 30px; } } @media screen and (max-width:480px){ .inquiry-banner .sect-head h2 {font-size: 24px; line-height: 1.5;} .inquiry-banner .sect-head .p-italic {font-size: 15px;} } /* float btn */ .float-btn {position: fixed; width: 100%; height: 0px; left: 0; bottom: 0; z-index: 900; } .float-btn a {display: block; width: 80px; height: 80px; background: #F9E8DB url(/img/com/icon_whatsapp2.svg) center no-repeat; background-size: 80%; font-size: 1px; color: rgba(0,0,0,0); position: absolute; right: 3%; bottom: 0; transform: translateY(-40px); border-radius: 50%; box-shadow: 3px 3px 8px rgba(0,0,0,0.2);} @media screen and (max-width:1024px){ .float-btn a {width: 60px; height: 60px;} } /* footer */ footer { color: var(--primary); padding-top: 60px; overflow: hidden;} footer .inner {width: 100%; margin: auto; padding: 0 60px;} footer .f-top {display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid rgba(71,52,41,0.5); } footer .f-top .fnb ul {display: flex; gap: 70px; align-items: center; font-size: 20px; font-weight: 450;} footer .f-top .right .sns {display: flex; gap: 15px; align-items: center;} footer .f-top .right .sns a {display: block; width: 24px; aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-size: cover;} footer .f-top .right .sns a.insta {background-image: url(/img/com/icon_insta2.svg);} footer .f-top .right .sns a.youtube {background-image: url(/img/com/icon_youtube2.svg);} footer .f-top .right .sns a.tiktok {background-image: url(/img/com/icon_tiktok2.svg);} footer .f-top .right .sns a.email {background-image: url(/img/com/icon_email2.svg);} footer .f-top .right .sns a.whatsapp {background-image: url(/img/com/icon_whatsapp2.svg);} footer .f-mid {} footer .f-mid .top {display: flex; justify-content: space-between; align-items: center; font-size: 15px; color: rgba(71,52,41,0.5);} footer .f-mid .top .terms {display: flex; gap: 12px; line-height: 1.3;} footer .f-mid .top .terms a {text-decoration: underline; display: block; white-space: nowrap; } footer .f-mid .top .copyright { font-size: 15px; width: 100%; text-align: right;} footer .f-mid .f-info {font-size: 20px; ; margin-top: 214px;} footer .f-btm {margin-top: 75px; font-size: 0; } footer .f-btm {display: flex; align-items: end; gap: 1.6vw; } footer .f-btm .img-box {font-size: 0;} footer .f-btm .img-box:nth-child(1) {transition-delay: 0.6s;} footer .f-btm .img-box:nth-child(2) {transition-delay: 0.7s;} footer .f-btm .img-box:nth-child(3) {transition-delay: 0.8s;} footer .f-btm .img-box:nth-child(4) {transition-delay: 0.9s;} footer .f-btm .img-box:nth-child(5) {transition-delay: 1s;} footer .f-btm .img-box:nth-child(6) {transition-delay: 1.1s;} footer .f-btm .img-box:nth-child(7) {transition-delay: 1.2s;} footer .f-btm .img-box:nth-child(8) {transition-delay: 1.3s;} footer .f-btm .img-box:nth-child(9) {transition-delay: 1.4s;} /* footer .f-btm img {width: 100%;} */ @media screen and (max-width:1024px) { footer .inner {padding: 0 5%;} footer .f-top .fnb ul {gap: 42px; font-size: 18px;} } @media screen and (max-width:768px){ footer {padding-top: 40px;} footer .f-top {flex-direction: column; border: none;} footer .f-top .fnb {width: 100%; padding-bottom: 20px; border-bottom: 1px solid rgba(71,52,41,0.5); display: block;} footer .f-top .fnb ul {justify-content: space-between; gap: 32px; } footer .f-top .right {padding-top: 40px;} footer .f-mid .top {flex-direction: column; gap: 20px;} footer .f-mid .top .copyright {text-align: center;} footer .f-mid .f-info {margin-top: 100px; text-align: center; font-size: 16px;} footer .f-btm {margin-top: 60px;} } @media screen and (max-width:480px){ footer .f-top .fnb ul {font-size: 15px;} } /* layer modal */ .layer-back {position: fixed; z-index: 10000; width: 100%; height: 100%; left: 0; top: 0; background: #000; opacity: 0.3;} .layer-modal {position: fixed; z-index: 10001; width: 100%; height: 100%; left: 0; top: 0; opacity: 0; pointer-events: none; transition: opacity 0.5s, transform 0.5s; overflow: hidden; overscroll-behavior: contain; transform: translateY(10%);} .layer-modal.active {opacity: 1; transform: translateY(0%); pointer-events: auto;} .layer-modal .modal-wrap {width: 100%; height: calc(100% - 130px); max-height: 840px; display: flex; align-items: end; position: absolute; left: 0; bottom: 0;} .layer-modal .close-btn {width: 80px; height: 80px; position: absolute; left: 50%; top: 0px; transform: translate(-50%, -100%); font-size: 1px; color: rgba(0,0,0,0);} .layer-modal .close-btn::before, .layer-modal .close-btn::after {content:""; width: 2px; height: 52%; background: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(45deg);} .layer-modal .close-btn::after {transform: translate(-50%,-50%) rotate(-45deg);} .layer-modal .modal-cont {width: 100%; height: 100%; background: #F8F8F8; } /* ty2 중앙 정렬 모달 */ .layer-modal.ty2 {transform: translateY(0%);} .layer-modal.ty2 .modal-wrap {width: 90%; max-width: 960px; left: 50%; top: 50%; bottom: unset; transform: translate(-50%,-50%); background: #F8F8F8; height: 700px; max-height: 80vh; } .layer-modal.ty2 .close-btn {width: 56px; height: 56px; left: unset; right: 0; transform: translate(-24px, 24px); } .layer-modal.ty2 .close-btn::before, .layer-modal.ty2 .close-btn::after {background: var(--primary); } /* ty2 mini 중앙 정렬 작은 사이즈 모달 */ .layer-modal.ty2.mini .modal-wrap {max-width: 500px; height: auto;} .layer-modal.ty2.mini .close-btn {width: 32px; height: 32px;} .layer-modal.ty2.mini .close-btn::before, .layer-modal.ty2.mini .close-btn::after {width: 1px;} /* ty3 중앙 정렬 + title 모달 */ .layer-modal.ty3 {transform: translateY(0%);} .layer-modal.ty3 .modal-wrap {width: 90%; max-width: 700px; left: 50%; top: 50%; bottom: unset; transform: translate(-50%,-50%); background: #F8F8F8; height: unset; max-height: unset; } .layer-modal.ty3 .modal-cont {background: #EDEBEB; padding: 12px; padding-bottom: 40px;} .layer-modal.ty3 .modal-head {display: flex; justify-content: space-between; align-items: center; padding: 12px; gap: 12px; } .layer-modal.ty3 .modal-head .tit {font-size: 30px; font-family: var(--ff-aboreto); } .layer-modal.ty3 .close-btn {width: 56px; height: 56px; left: unset; right: unset; transform: translate(0,0); position: relative;} .layer-modal.ty3 .close-btn::before, .layer-modal.ty3 .close-btn::after {background: var(--primary); } .layer-modal.ty3 .scroll-box {max-height: min(70vh, 500px); overflow-y: auto; padding: 0 12px; } .layer-modal.ty3 .scroll-box::-webkit-scrollbar {width: 6px;} .layer-modal.ty3 .scroll-box::-webkit-scrollbar-thumb {width: 6px; border-radius: 3px; background: #ccc; } .layer-modal.ty3 .text-item {margin-bottom: 20px; font-size: 14px;} .layer-modal.ty3 .text-item p {margin-bottom: 0.5em;} .layer-modal.ty3 .text-item:last-child {margin-bottom: 0;} .layer-modal.ty3 .text-item .sub-tit {font-size: 15px; line-height: 1.5; margin-bottom: 10px; font-weight: 700;} .layer-modal.ty3 .text-item ol {counter-reset:list-number; margin-bottom: 0.5em;} .layer-modal.ty3 .text-item ol li {counter-increment:number; padding-left: 1em; position: relative;} .layer-modal.ty3 .text-item ol li::before {content:counter(number)'.'; position: absolute; left: 0; top: 0;} .layer-modal.ty3 .text-item .table-box {text-align: left; margin-bottom: 0.5em; overflow-x: auto;} .layer-modal.ty3 .text-item .table-box table {min-width: 500px;} .layer-modal.ty3 .text-item .table-box table {border: 1px solid rgba(71, 52, 41, 0.5); font-size: 14px;} .layer-modal.ty3 .text-item .table-box th {text-align: left; padding: 5px 10px; border: 1px solid rgba(71, 52, 41, 0.5);} .layer-modal.ty3 .text-item .table-box th span {font-weight: 400;} .layer-modal.ty3 .text-item .table-box td {padding: 5px 10px; border: 1px solid rgba(71, 52, 41, 0.5);} @media screen and (max-width:1024px) { .layer-modal .close-btn {width: 50px; height: 50px; } .layer-modal .modal-wrap {height: calc(100% - 80px); } .layer-modal.ty2 .modal-wrap {padding: 0;} .layer-modal.ty2 .close-btn {width: 34px; height: 34px;} } @media screen and (max-width:768px){ .layer-modal.ty2 .close-btn {transform: translate(-5px, 24px);} .layer-modal.ty2.mini .close-btn {transform: translate(-12px, 12px);} .layer-modal.ty3 .modal-cont {padding: 6px; padding-bottom: 20px;} .layer-modal.ty3 .modal-head {padding: 8px;} .layer-modal.ty3 .modal-head .tit {font-size: 24px;} .layer-modal.ty3 .close-btn {width: 40px; height: 40px;} .layer-modal.ty3 .scroll-box {padding: 0 8px; } .layer-modal.ty3 .scroll-box::-webkit-scrollbar {width: 4px;} .layer-modal.ty3 .scroll-box::-webkit-scrollbar-thumb {width: 4px; } } /* inquiryForm */ .inquiryForm {height: 100%; width: 100%;} .inquiryForm form {height: 100%; width: 100%;} .inquiryForm .step-layout { height: 100%; width: 100%;} .inquiryForm .step-layout .step-com {max-width: 700px; width: 35%; background: #EDEBEB; padding: 60px; position: relative; height: 100%;} .inquiryForm .step-layout .step-com .index-menu {display: flex; flex-direction: column; height: 100%; justify-content: space-between;} .inquiryForm .step-layout .step-com .top {} .inquiryForm .step-layout .step-com .top .state {font-size: var(--font-20); margin-bottom: 1em; position: relative;} .inquiryForm .step-layout .step-com .top .state span {display: inline-block; position: relative; padding: 0 18px;} .inquiryForm .step-layout .step-com .top .state span::before, .inquiryForm .step-layout .step-com .top .state span::after {content:""; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; border: 1px solid var(--primary); position: absolute; top: 50%; transform: translateY(-50%); } .inquiryForm .step-layout .step-com .top .state span::before {left: 0;} .inquiryForm .step-layout .step-com .top .state span::after {right: 0;} .inquiryForm .step-layout .step-com .top .tit {font-family: var(--ff-aboreto); font-size: 30px; line-height: 1.5; text-transform: uppercase; } .inquiryForm .step-layout .step-com .top p {font-size: var(--font-18); margin-top: 10px;} .inquiryForm .step-layout .step-com .indi {margin-top: 80px; display: flex; gap: 10px;} .inquiryForm .step-layout .step-com .indi .dot {width: 8px; height: 8px; box-sizing: border-box; border: 1px solid var(--primary); border-radius: 50%;} .inquiryForm .step-layout .step-com .indi .dot.active {background: var(--primary); } .inquiryForm .step-layout .step-com .btm {position: relative;} .inquiryForm .step-layout .step-com .util {display: flex; justify-content: space-between; align-items: center; position: relative;} .inquiryForm .step-layout .step-com .util a {font-size: 15px; text-transform: uppercase; display: inline-flex; color: #fff; background: var(--primary); height: 42px; padding: 0 20px; border-radius: 21px; align-items: center; justify-content: center; text-align: center; width: 110px;} .inquiryForm .step-layout .step-com .btm .sns-box {display: flex; position: absolute; right: 0; top: 50%; transform: translate(-120px,-50%); gap: 10px;} .inquiryForm .step-layout .step-com .btm .sns-box a {width: 32px; height: 32px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 0; font-size: 0; border-radius: 0; background-color: rgba(0,0,0,0);} .inquiryForm .step-layout .step-com .btm .sns-box a.app { background-image: url(/img/com/icon_app.svg);} .inquiryForm .step-layout .step-com .btm .sns-box a.mail {background-image: url(/img/com/icon_mail.svg);} .inquiryForm .step-layout .step-com .util a.hide {opacity: 0; pointer-events: none;} .inquiryForm .step-layout .step-com .util a.disabled { opacity: 0.5;} .inquiryForm .step-layout .step-box {height: 100%; display: none; width: 100%;} .inquiryForm .step-layout .step-box .inwrap {display: flex; height: 100%; width: 100%;} .inquiryForm .step-layout .step-box .step-cont {width: 65%; height: 100%; flex: 1 1 0; padding: 60px 90px; overflow-y: auto;} .inquiryForm .step-layout .step-box .step-cont::-webkit-scrollbar {width: 6px;} .inquiryForm .step-layout .step-box .step-cont::-webkit-scrollbar-thumb {width: 6px; border-radius: 3px; background: #ccc;} .inquiryForm .step-layout .step-box .grid-box {display: grid;} .inquiryForm .step-layout .step-box .grid-box.grid2 {gap: 40px; grid-template-columns: repeat(2, 1fr);} .inquiryForm .step-layout .step-box .grid-box.grid3 {gap: 30px; grid-template-columns: repeat(3, 1fr);} .inquiryForm .step-layout .step-box .grid-box.grid4 {gap: 20px; grid-template-columns: repeat(4, 1fr);} .inquiryForm .step-layout .step-box .item-box + .item-box {margin-top: 30px;} .inquiryForm .step-layout .step-box .item-box .tit {font-size: var(--font-18); margin-bottom: 20px; padding-left: 18px; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .inquiryForm .step-layout .step-box .item-box .tit::before {content:""; width: 8px; height: 8px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--primary); position: absolute; left: 0; top: 0.8em; transform: translateY(-50%); } .inquiryForm .step-layout .step-box .item-box .tit span {opacity: 0.6; font-size: 15px;} .inquiryForm .step-layout .step-box .item-box .tit.req em::after {content:" *"; color: #FF8800; } .inquiryForm .step-layout .step-box .item-box .required .tit em::after {content:" *"; color: #FF8800; } .inquiryForm .step-layout .step-box .item-box .required .sub-tit em::after {content:" *"; color: #FF8800; } .inquiryForm .step-layout .step-box .item-box .tit.no-dot {margin-bottom: 10px; padding: 0;} .inquiryForm .step-layout .step-box .item-box .tit.no-dot::before {display: none;} .inquiryForm .step-layout .step-box .item-box .error {margin-top: 5px; display: none; font-size: 15px; color: #C61717; } .inquiryForm .step-layout .step-box .item-box .btm {position: relative;} .inquiryForm .step-layout .step-box .item-box .util {display: flex; justify-content: space-between; align-items: center; position: relative;} .inquiryForm .step-layout .step-box .item-box .util a {font-size: 15px; text-transform: uppercase; display: inline-flex; color: #fff; background: var(--primary); height: 42px; padding: 0 20px; border-radius: 21px; align-items: center; justify-content: center; text-align: center; width: 110px;} .inquiryForm .step-layout .step-box .item-box .btm .sns-box {display: flex; position: absolute; right: 0; top: 50%; transform: translate(-120px,-50%); gap: 10px;} .inquiryForm .step-layout .step-box .item-box .btm .sns-box a {width: 32px; height: 32px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 0; font-size: 0; border-radius: 0; background-color: rgba(0,0,0,0);} .inquiryForm .step-layout .step-box .item-box .btm .sns-box a.app { background-image: url(/img/com/icon_app.svg);} .inquiryForm .step-layout .step-box .item-box .btm .sns-box a.mail {background-image: url(/img/com/icon_mail.svg);} .inquiryForm .step-layout .step-box .item-box .util a.hide {opacity: 0; pointer-events: none;} .inquiryForm .step-layout .step-box .item-box .util a.disabled { opacity: 0.5;} .inquiryForm .step-layout .step-box .details {background: rgba(71, 52, 41, 0.03); padding: 20px; padding-bottom: 30px; font-size: var(--font-18);} .inquiryForm .step-layout .step-box .details ul li {} .inquiryForm .step-layout .step-box .details ul li + li {margin-top: 10px;} .inquiryForm .step-layout .step-box .details .total {font-size: var(--font-24); padding-top: var(--font-20); margin-top: var(--font-20); border-top: 1px solid rgba(71, 52, 41, 0.2);} .inquiryForm .step-layout .step-box .form-box {} .inquiryForm .step-layout .step-box .form-box + .form-box {margin-top: 20px;} .inquiryForm .step-layout .step-box .grid-box .form-box + .form-box {margin-top: 0;} .inquiryForm .step-layout .step-box .form-box .sub-tit {font-size: var(--font-16); margin-bottom: 10px;} .inquiryForm .step-layout .step-box .form-box .sub-tit span {display: block; font-size: 0.9em;} .inquiryForm .step-layout .step-box .form-box .input-box {} .inquiryForm .step-layout .step-box .form-box .input-box input {appearance: none; border: none; width: 100%; height: 60px; background: #fff; font-size: var(--font-18); padding: 0 20px; position: relative;} .inquiryForm .step-layout .step-box .form-box .input-box input.disabled {opacity: 0.5; pointer-events: none;} .inquiryForm .step-layout .step-box .form-box .input-box input[type="date"]::-webkit-calendar-picker-indicator {opacity: 0; position: absolute; width: 100%; height: 100%; left: 0; top: 0;} .inquiryForm .step-layout .step-box .form-box label.label-box {position: relative; display: flex; align-items: center; justify-content: center; min-height: 49px; padding: 5px 10px; border-radius: 25px; background: #fff; color: var(--primary); color: var(--font-18); cursor: pointer; text-align: center; box-sizing: border-box; line-height: 1.4;} .inquiryForm .step-layout .step-box .form-box label.label-box:has(:checked) {background: var(--primary); color: #fff; } .inquiryForm .step-layout .step-box .form-box label.label-box input {position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;} .inquiryForm .step-layout .step-box .form-box textarea {appearance: none; width: 100%; height: 240px; overflow-y: auto; background: #fcfcfc; padding: 16px; font-size: var(--font-18); border: none; resize: none;} .inquiryForm .step-layout .step-box .form-box.unverified .error {display: block;} .inquiryForm .step-layout .step-box .form-box.unverified .input-box input {outline: 1px solid #C61717;} .inquiryForm .step-layout .step-box .form-box .agree {display: flex; align-items: center; gap: 8px; line-height: 1.4; } .inquiryForm .step-layout .step-box .form-box .agree input {flex-shrink: 0;} .inquiryForm .step-layout .step-box .noti {margin-top: 40px; background: rgba(71, 52, 41, 0.03); padding: 20px 16px 30px; font-size: var(--font-18); } .inquiryForm .step-layout .step-box .step-complete {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 5% 50px;} .inquiryForm .step-layout .step-box .step-complete .img-box {font-size: 0; margin: auto; width: 60px; margin-bottom: 30px;} .inquiryForm .step-layout .step-box .step-complete .img-box img {width: 100%;} .inquiryForm .step-layout .step-box .step-complete .tit {font-family: var(--ff-aboreto); font-size: 36px; text-transform: uppercase; } .inquiryForm .step-layout .step-box .step-complete p {margin-top: 30px;} @media screen and (max-width:1260px) { .inquiryForm .step-layout .step-com {padding: 60px 32px;} .inquiryForm .step-layout .step-com .btm .sns-box {right: 50%; transform: translate(50%, -50%); gap: 8px;} .inquiryForm .step-layout .step-com .btm .sns-box a {width: 24px; height: 24px;} .inquiryForm .step-layout .step-box .step-cont {padding: 60px 40px; } .inquiryForm .step-layout .step-box .grid-box.grid2 {gap: 24px; } .inquiryForm .step-layout .step-box .grid-box.grid3 {gap: 16px;} .inquiryForm .step-layout .step-box .grid-box.grid4 {gap: 16px; } .inquiryForm .step-layout .step-box .form-box label.label-box {font-size: 16px;} .inquiryForm .step-layout .step-box .form-box .input-box input {font-size: 16px;} .inquiryForm .step-layout .step-box .item-box .btm .sns-box {right: 50%; transform: translate(50%, -50%); gap: 8px;} .inquiryForm .step-layout .step-box .item-box .btm .sns-box a {width: 24px; height: 24px;} } @media screen and (max-width:1024px) { .inquiryForm .step-layout .step-box .inwrap {flex-direction: column;} .inquiryForm .step-layout .step-com .util a {height: 38px;} .inquiryForm .step-layout .step-com {width: 100%; max-width: 100%; padding: 40px; height: auto; flex-shrink: 0;} .inquiryForm .step-layout .step-com .index-menu {height: auto; gap: 40px;} .inquiryForm .step-layout .step-com .top .state {font-size: 14px;} .inquiryForm .step-layout .step-com .top .state span {padding: 0 12px; } .inquiryForm .step-layout .step-com .top .state span::before, .inquiryForm .step-layout .step-com .top .state span::after {width: 6px; height: 6px;} .inquiryForm .step-layout .step-com .top .tit {font-size: 24px;} .inquiryForm .step-layout .step-com .top p {font-size: 16px;} .inquiryForm .step-layout .step-com .indi {margin-top: 32px;} .inquiryForm .step-layout .step-box .step-cont {width: 100%; padding: 40px; } .inquiryForm .step-layout .step-box .form-box textarea {height: 200px; font-size: 16px;} } @media screen and (max-width:768px) { .inquiryForm .step-layout .step-com {padding: 26px;} .inquiryForm .step-layout .step-com .top .tit {font-size: 20px;} .inquiryForm .step-layout .step-com .index-menu {gap: 10px;} .inquiryForm .step-layout .step-com .util a {font-size: 14px; padding: 0 14px; width: 100px;} .inquiryForm .step-layout .step-com .indi {/*position: absolute; left: 0; bottom: 26px;*/ justify-content: center; padding-bottom: 6px; gap: 6px; pointer-events: none; width: 100%;} .inquiryForm .step-layout .step-box .step-cont {padding: 26px; padding-bottom: 40px;} .inquiryForm .step-layout .step-box .grid-box.grid2 {grid-template-columns: repeat(1, 1fr); } .inquiryForm .step-layout .step-box .grid-box.grid3 {grid-template-columns: repeat(2, 1fr);} .inquiryForm .step-layout .step-box .grid-box.grid4 {grid-template-columns: repeat(2, 1fr);} .inquiryForm .step-layout .step-box .form-box label.label-box {min-height: 42px; } .inquiryForm .step-layout .step-box .form-box .input-box input {height: 48px;} .inquiryForm .step-layout .step-box .item-box .tit {flex-wrap: wrap; } .inquiryForm .step-layout .step-box .item-box .tit span {width: 100%; text-align: right; font-size: 13px;} .inquiryForm .step-layout .step-box .item-box .error {font-size: 14px;} .inquiryForm .step-layout .step-box .item-box .util a {font-size: 14px; padding: 0 14px; width: 100px;} .inquiryForm .step-layout .step-box .step-complete .tit {font-size: 26px;} } @media screen and (max-width:480px){ .inquiryForm .step-layout .step-com .top .tit {font-size: 18px;} .inquiryForm .step-layout .step-box .item-box .tit {font-size: 15px;} .inquiryForm .step-layout .step-box .form-box label.label-box {font-size: 14px;} .inquiryForm .step-layout .step-box .form-box .input-box input {font-size: 15px;} .inquiryForm .step-layout .step-box .form-box textarea {padding: 12px; font-size: 14px; height: 180px;} .inquiryForm .step-layout .step-box .details {padding: 16px 20px;} .inquiryForm .step-layout .step-box .details ul li + li {margin-top: 5px;} .inquiryForm .step-layout .step-box .step-complete .img-box {width: 40px; margin-bottom: 16px;} .inquiryForm .step-layout .step-box .step-complete .tit {font-size: 24px;} .inquiryForm .step-layout .step-box .noti {font-size: 14px;} } /* 공통 section */ section {width: 100%; box-sizing: border-box; color: var(--primary); overflow: hidden;} section img {max-width: 100%;} section .sect-head {color: var(--primary); line-height: 1.5;} section .sect-head .p-italic {font-family: var(--ff-parlare); font-size: var(--font-18); display: block; margin-bottom: 10px; } section .sect-head h2, section .sect-head h3 {font-family: var(--ff-aboreto); font-size: calc(var(--font-20)*2); text-transform: uppercase; color: inherit; } section .sect-head p {font-size: var(--font-20); margin-top: 1.5em; } section .sect-head.size-l {} section .sect-head.size-l h2, section .sect-head.size-l h3 {font-size: calc(var(--font-24)*2); line-height: 1.3;} /* ani */ section .sect-head[data-ani="true"] .p-italic {transition: transform 0.8s, opacity 0.8s; opacity: 0; transform: translateY(1em);} section .sect-head[data-ani="true"] h2, section .sect-head[data-ani="true"] h3 {transition: transform 0.8s 0.2s, opacity 0.8s 0.2s; opacity: 0; transform: translateY(1em);} section .sect-head[data-ani="true"] p {transition: transform 0.8s 0.6s, opacity 0.8s 0.6s; opacity: 0; transform: translateY(1em);} section .sect-head.ani-started .p-italic, section .sect-head.ani-started h2, section .sect-head.ani-started h3, section .sect-head.ani-started p {opacity: 1; transform: translateY(0);} @media screen and (max-width:768px){ section .sect-head h2, section .sect-head.size-l h2, section .sect-head h3, section .sect-head.size-l h3 {font-size: 30px;} section .sect-head p {font-size: 18px; margin-top: 20px;} #cursor {display: none;} } @media screen and (max-width:480px){ section .sect-head h2, section .sect-head.size-l h2, section .sect-head h3, section .sect-head.size-l h3 {font-size: 24px; line-height: 1.5;} section .sect-head .p-italic {font-size: 15px;} section .sect-head p {font-size: 16px;} }