@charset "utf-8"; /* 메인페이지 공통 */ #main .main-section {margin-top: var(--margin-space);z-index: 10;} #main .main-section .circle-button {border: 1px solid;color: var(--main);border-radius: 50px;width: 45px;display: block;height: 45px;text-align: center;line-height: 44px;} #main .main-section .circle-button i.bi {transition: all 0.5s;} #main .main-section .circle-button.swiper-button-prev:hover i.bi {padding-right:10px;transition: all 0.3s;} #main .main-section .circle-button.swiper-button-next:hover i.bi {padding-left:10px;transition: all 0.3s;} #main .main-section .swiper-button-next::after, #main .main-section .swiper-button-prev::after {display: none;} #main .main-section .swiper-button-next, #main .main-section .swiper-button-prev {top:auto;bottom: 0;} #main .main-section .swiper-button-prev {left:10px;} #main .main-section .swiper-button-next {left:65px;} #main .swiper-slide {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;} #main .more {display: block;} #main .more i {padding-left: 10px;} /* 메인 슬라이드 */ #main {margin-top: 90px;} #main .main-slide {height: 660px;background-color: var(--white-200);} #main .main-slide .row {height: 100%;} #main .main-slide .main-text {position: relative;} #main .main-slide .main-text .text-box {opacity:0;visibility: hidden;position: absolute; right:0; top: 105px;width: 100%;max-width: 480px; padding-left:0} #main .main-slide .main-text .text-box .btn-line {opacity: 0;} #main .main-slide .main-text .text-box .hidden-box {transition: all 0.8s;} #main .main-slide .main-text .text-box .hidden-box.box01 div, #main .main-slide .main-text .text-box .hidden-box.box02 div {transform: translateY(118%);opacity: 0;} #main .main-slide .main-text .text-box .hidden-box.box03 div {transform: translateX(3%);opacity: 0;} #main .main-slide .main-text .text-box.on {opacity: 1;visibility: visible;} #main .main-slide .main-text .text-box.on .btn-line {opacity: 1;display:block;z-index: 1;transition: opacity 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.5s;} #main .main-slide .main-text .text-box.on .hidden-box.box01 div {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.2s;opacity: 1;} #main .main-slide .main-text .text-box.on .hidden-box.box02 div {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.4s;opacity: 1;} #main .main-slide .main-text .text-box.on .hidden-box.box03 div {transform: translateX(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.2s;opacity: 1;} #main .main-slide .main-text .text-box .hidden-box {overflow: hidden;} #main .main-slide .main-text .text-box .btn-line {text-align:left;width:var(--margin-space);border: 1px solid var(--main);border-radius: 30px;padding: 8px 0 8px 20px;margin-top: var(--margin-top-50);} #main .main-slide .main-text .text-box .btn-line i.bi {padding: 0 0 3px 13px;line-height: 0;transition: all 0.3s;} #main .main-slide .main-text .text-box .btn-line:hover i.bi {transition: all 0.3s;padding-left:20px} #main .main-slide .main-text .font-main-slide {color: var(--gray-300);text-align: right;padding: 0 80px 50px 0;line-height: 0;z-index: 0;} #main .main-slide .main-text .font-main-slide span {padding:0 8px;} #main .main-slide .main-text .swiper-button-prev {z-index: 1;left:auto;right: 186px;bottom: 44px;top: auto;color:var(--gray-300)} #main .main-slide .main-text .swiper-button-next {z-index: 1;left:auto;right: 44px;bottom: 44px;top: auto;color:var(--gray-300)} #main .main-slide .main-text .swiper-button-prev::after, #main .main-slide .main-text .swiper-button-next::after {font-size: 14px;} #main .main-slide .main-swiper {height: 100%;} #main .main-slide .main-swiper .main-slide-img {height: 100%;object-fit: cover;width: 100%;} /* section - business */ #main .main-section.business {position: relative;} #main .main-section.business .business-cover {border-radius: var(--radius-8);overflow: hidden;} #main .main-section.business .business-cover img {width:100%} #main .main-section.business .bg-gray {width: 1280px;height: 440px;background: var(--white-200);position: absolute;top: 28px;left: 0;z-index: -1;} /* section - design */ #main .main-section.design {position: relative;} #main .main-section.design .bg-gray {width: 70%;max-width:1280px;height:440px;position: absolute;top: 28px;left: 0; background:#f5f3f9; z-index: -1;} #main .main-section.design .container-xl {position: relative;} #main .main-section.design .design-box.box1 {max-width: 685px;width: 53.5%;position:absolute;right: 0;top: 120px;} #main .main-section.design .design-box.box2 {margin-top: 115px;width:34.5%;max-width: 442px;} #main .main-section.design .design-box .design-img {border-radius: var(--radius-8);overflow: hidden;margin-bottom:40px;} #main .main-section.design .design-box .design-img img {width:100%} #main .main-section.design .design-box .font-gray14 {margin-top: var(--margin-top-30)} /* section - news */ #main .main-section.news {position:relative;} #main .main-section.news .news-text {position: relative;width:320px;height:510px;} #main .main-section.news .news-slide {overflow: hidden;position: absolute;top:0;right: 0;max-width: 1550px;} #main .main-section.news .news-slide .news-swiper {height: 550px;} #main .main-section.news .news-slide .news-swiper .swiper-slide {width: 270px;} #main .main-section.news .news-slide .news-swiper .swiper-slide a {height: 100%;display: block;} #main .main-section.news .news-slide .news-swiper .swiper-slide a:hover {text-decoration: none;} #main .main-section.news .news-slide .news-swiper .swiper-slide .news-slide-img {width:100%;border-radius: var(--radius-8);height: 340px;object-fit: cover;} #main .main-section.news .news-slide .swiper-scrollbar {height: 3px;left:0;width:99%;bottom:0;} #main .main-section.news .news-slide .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--gray-400);} #main .main-section.news .font-product-m-1-SB{ word-break: break-all; -webkit-line-clamp: 2;} /* section - event */ #main .main-section.event {position: relative;} #main .main-section.event .row > div {min-height: 420px;} #main .main-section.event .event-left {position: relative;} #main .main-section.event .preview-box {border-radius: 8px;overflow: hidden;} #main .main-section.event .event-slide-thumb {position: absolute;bottom: 90px;width: calc(100% - 30px);} #main .main-section.event .event-slide-thumb .swiper-slide {height:78px;overflow: hidden;border-radius: 8px;opacity: 0.6;cursor: pointer;width:31%;} #main .main-section.event .event-slide-thumb .swiper-slide.swiper-slide-thumb-active {opacity: 1;} #main .main-section.event .event-slide-thumb .swiper-slide .thumb-img {width: 100%;height:100%} #main .main-section.event .event-swiper {height: 100%;} #main .main-section.event .event-swiper .swiper-slide {background: #fff; position: relative} #main .main-section.event .event-swiper .swiper-slide a {display:block;width: 100%; height:100%;position: relative;overflow: hidden;border-radius: 8px; background:#e0dee8} #main .main-section.event .event-swiper .swiper-slide a.dr_bg02{background:#efede8} #main .main-section.event .event-swiper .swiper-slide a.dr_bg03{background:#e8eaef} #main .main-section.event .event-swiper .swiper-slide a:hover {text-decoration: none;} #main .main-section.event .event-swiper .swiper-slide a .slide-img{width: 100%;height: 100%; object-fit:cover; transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01); position: relative; transform: translateX(80%);} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .slide-img{ transform: translateX(22%); transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01) 0.4s} #main .main-section.event .event-swiper .swiper-slide a:hover .slide-img { } #main .main-section.event .event-swiper .swiper-slide a .history{opacity:1; transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide a:hover .history{opacity:1; transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide a .hover-bg {width:100%;height:100%; opacity: 0; transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01);transform: translateY(-100%);} #main .main-section.event .event-swiper .swiper-slide a:hover .hover-bg {opacity:0.5;transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide a .hover-text {transform: translateY(50%); position:absolute; left:-500px; bottom:50%; transition: all 0.2s cubic-bezier(0.42,0,0.14,0.01);opacity: 1;} #main .main-section.event .event-swiper .swiper-slide a .hover-bg i.bi {opacity:0;position: absolute;top:40px;right:60px;color:var(--white-100);font-size:22px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide a:hover .hover-bg i.bi {right:40px;opacity: 1;transition: all 0.3s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text { min-width:320px; transition: all 0.2s cubic-bezier(0.42,0,0.14,1.01) 0.2s; opacity: 1; padding: 30px 25px; background:rgb(255,255,255,0.5); left:30px} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a:hover .hover-text{ transition: all 0.2s cubic-bezier(0.42,0,0.14,1.01) 0.2s; background: rgb(255,255,255,0.5);} #main .main-section.event .history li:before{ display: inline-block; width: 2px; height: 2px; margin-right: 6px; vertical-align: middle; background:var(--gray-500); content: '';} /* section - contact */ #main .main-section.contact {background: url('../images/main/section-contact.jpg')no-repeat center;background-size : cover;background-attachment : fixed;height: 325px;} #main .main-section.contact .container-xl {padding-top:70px;padding-bottom:70px;height:100%;position: relative;} #main .main-section.contact .contact-txt {float: left;width: 400px;} #main .main-section.contact .contact-sns {position: absolute;top: 82px;right: 0;z-index: 10;} #main .main-section.contact .contact-sns .sns-icon {padding: 10px;font-size: 28px;color: var(--white-100);float: left;line-height: 0;} #main .main-section.contact .contact-sns .sns-icon img {width: 29px;} #main .contact a:hover.font-contact-m-1{color:var(--white-100)} #main .main-section .font-gray-s-2{word-break: keep-all;color: var(--gray-400); } .event-left .font-black-s-2{font-size: var(--font-size-s-4);} @media (max-width: 1330px) { #main .main-slide .main-text .text-box {padding-left:0px;} #main .main-slide {height: 600px;} #main .main-slide .main-text .text-box {top:170px;} #main .main-section.design .design-box.box1, #main .main-section.contact .contact-sns {right:1.5rem;} #main .main-slide .main-text .text-box{top:80px; } #main .main-section.contact .contact-txt{width:330px;} } @media (max-width: 1200px) { #main .main-section.news .news-text, #main .main-section.news .news-slide .news-swiper {height:530px;} #main .main-section.news .news-slide .news-swiper .swiper-slide {width: 250px;} #main .main-slide .main-text .swiper-button-prev {right: 175px;} #main .main-section.news .news-slide .news-swiper .swiper-slide .news-slide-img {height: 310px;} #header .gnb-logo{height:20px; padding:0} #main .main-slide .main-text .text-box{top:80px;} #main .main-slide .main-text .text-box.on .hidden-box.box03 div{padding-right:30px;} } @media (max-width: 1198px) { #main .main-slide .main-text .text-box{} #header .gnb-logo{height:30px;} #main .main-section.contact .contact-txt{width:310px;} #main .main-slide .main-text .text-box.on .hidden-box.box03 div{padding-right:20px;} } @media (max-width: 991px) { /* br-mb-none 클래스는 태블릿 이하 해상도에서 줄바꿈을 띄어쓰기로 변환합니다. */ .br-mb-none br {display: inline-block;content: " ";padding: 0 2px;} #main {margin-top: 60px;width:100%;overflow: hidden;max-width: 100vw;} #main .main-slide .main-text .text-box .btn-line {width: 150px;} #main .main-section.business .row {margin-top:40px !important} #main .main-section.news .news-text {width:220px;height: 400px;} #main .main-section.news .news-slide {width: calc(100% - 280px) !important} #main .main-section.news .news-slide .news-swiper {height: 400px;} #main .main-section.news .news-slide .news-swiper .swiper-slide {width: 200px;} #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 0px);display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp:12;-webkit-box-orient: vertical;} #main .main-section.contact {height: 310px;} #main .main-section.contact .contact-sns {top:66px;} #main .main-section.news .news-slide .news-swiper .swiper-slide .news-slide-img {height: 240px;} #header .gnb-logo{height:30px} #main .main-slide .main-text .text-box{right:10px} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text{bottom:50%;} #main .main-section.contact .contact-txt{width:270px;} #main .main-slide .main-text .text-box.on .hidden-box.box03 div{padding-right:10px;} } @media screen and (max-width: 768px) { #main .main-slide {height: 500px;position: relative;} #main .main-slide .main-text {z-index: 2;height: 100%;position: absolute;top:0;left:0;} #main .main-slide .main-text .text-box {top:100px;max-width: 640px;} .font-slide-title, .font-slide-titleB, .font-slide-subtxt, #main .main-slide .main-text .text-box .btn-line, .font-main-slide .swiper-pagination-current {color: var(--white-100);} #main .main-slide .main-text .swiper-button-prev, .font-main-slide .swiper-pagination-total, #main .main-slide .main-text .swiper-button-next, #main .main-slide .main-text .font-main-slide {color: #eee;} #main .main-slide .main-text .text-box.on .btn-line {border-color: #e2e2e2;} #main .main-slide .main-swiper {background: #000;} #main .main-slide .main-swiper .swiper-wrapper {opacity: 1;} #main .main-section.news .news-text {width:100%;height: unset;} #main .main-section.news .news-slide {position: static;width: 100% !important;} #main .main-section.news .news-slide .swiper-scrollbar {position: static; width:70%; margin:10px auto 0} #main .main-section.news .news-text {margin-bottom:40px;} #main .main-section .swiper-button-prev {left:auto;right:65px;top:20px;} #main .main-section .swiper-button-next {left:auto;right:10px;top:20px;} #main .main-section.news .news-slide .news-swiper .swiper-slide {width: 160px;} #main .main-section.event .event-left {width:100%;} #main .main-section.event .row > div {min-height: unset;} #main .main-section.event .event-slide-thumb {position: static;margin-top: 20px;width:100%;} #main .main-section.event .preview-box {width:100%;margin-top: 20px;} #main .main-section.event .event-slide-thumb .swiper-slide {width:23.7%;} #main .main-section.contact .contact-txt {width:unset;margin-right: 20px;} #main .main-section.news .news-slide .news-swiper {height:550px;} #main .main-section.news .news-slide .news-swiper .swiper-slide .news-slide-img {height: auto;} #main .main-slide .main-text .text-box{right:60px} #main .main-slide .main-text .text-box .btn-line a{color:#fff;} #main .main-slide .main-text .text-box.on .hidden-box.box03 div{padding-right:0px;} #main .main-section.design .design-box .design-img{margin-bottom:50px;} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a:hover .hover-text{background:linear-gradient(90deg, rgba(255, 255, 255, 0.8) 15%, transparent 70%)!important} #footer .link-group{display: inline-flex; flex-direction: row; align-items: center; align-content: center; flex-wrap: wrap; width: 100%; justify-content: center; text-align: left;} #footer .link-group a{width: calc(50% - 0px);} #footer .link-group a:before{background-color: var(--stroke); content: ''; display: inline-block; width: 1px; height: 8px; margin: 0 15px;} } @media (max-width: 576px) { .font-slide-subtxt, .font-black-s-2, .font-gray-s-2, .font-contact-m-1, .font-footer-s-1, .font-event-s {font-weight: var(--font-weight-300); line-height:1.34; margin-bottom:5px} .font-slide-subtxt, .font-contact-m-1 {font-size: var(--font-size-s-2);} .font-slide-s-2, .font-product-s-2 {font-size: 14px; margin-top: 10px;} .font-product-m-1-SB {margin-top: 10px; letter-spacing: -0.2px; line-height: var(--line-height-1-4)!important;} #main .main-slide {height: 460px;} #main .main-slide .main-text .font-main-slide {padding: 0 46px 30px 0;} #main .main-slide .main-text .font-main-slide span {padding: 0 6px;} #main .main-slide .main-text .text-box {top:70px; left:0; padding-right:20px; padding-left:20px;} #main .main-slide .main-text .text-box .btn-line {margin-top:30px;width:155px;padding: 6px 0 6px 18px;} #main .main-slide .main-text .swiper-button-prev {bottom: 20px;right: 133px;} #main .main-slide .main-text .swiper-button-next {bottom: 20px;right: 20px;} #main .main-slide .main-swiper .mobile_dim{position:absolute; background:#000; filter:alpha(opacity=60); opacity: 0.45; -moz-opacity:0.6; width:100%; height:100%; z-index:9} #main .main-section.contact {height: 455px;} #main .main-section.business .row {margin-top:30px !important;} #main .main-section.business .row .col {margin-top: 20px;} #main .main-section.design .bg-gray {width:80%; height: 340px;} #main .main-section.design .design-box.box1 {position: static;width:100%; margin-top:30px;} #main .main-section.design .design-box.box2 {margin-top:80px;width:100%;max-width: unset;} #main .main-section.event .event-slide-thumb {margin-top: 50px;} #main .main-section.event .event-slide-thumb .swiper-slide {width:31%} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:0px;left:0px;} #main .main-section.event .event-swiper .swiper-slide .font-event-title{font-size:15px;} #main .main-section.event .event-swiper .swiper-slide .font-event-l{font-size:26px; margin-bottom:0} #main .main-section.event .event-swiper .swiper-slide .font-event-s{font-size:13px; line-height: 1.4 } #main .main-section.event .event-slide-thumb .swiper-slide .thumb-img{object-fit: cover;} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text{bottom:0px;} #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {padding-top:10px;/*max-width: calc(100% - 20px); -webkit-line-clamp:4;*/ } #main .main-section.contact .contact-txt {width: 100%;} #main .main-slide .main-text .text-box .hidden-box.box03 div{word-break: break-all; text-align: justify} #header .gnb-logo{height:27px} #main .main-section.event .event-swiper .swiper-slide a .history{} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text{min-width:100%; display:flex; align-items: center; justify-content: left; padding:40px 10px; padding-left:20px; height: 100%; bottom:50%; text-align: left; background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 15%, transparent 70%)} #main .main-section.event .event-swiper .swiper-slide a .slide-img {height:270px; } #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .slide-img{transform:translateX(22%);} #main .main-section.event .event-swiper .swiper-slide a .hover-text{bottom:0; left:-400px;} #main .main-section.event .event-swiper .swiper-slide a{padding:0px 0 0} .font-contact-m-1{margin-bottom:8px;} #main .main-section.contact .container-xl{padding-top:40px;} #main .main-slide .main-text .text-box .btn-line a{color:#fff;} #main .main-section .font-gray-s-2{font-size:18px; line-height: var(--line-height-1-56); padding:0 10px 0 0;word-break: break-all; } #main .main-section.business .business-cover{ width:85%; margin:0 auto} #main .main-section.news .news-slide .news-swiper {height:640px;} #main .main-section.design .design-box .font-title-l-2{font-size: var(--font-size-xl-2)!important;} html[lang="ko"] #main .main-section .font-gray-s-2{word-break: keep-all;} } @media (max-width:480px) { #main .main-section.news .news-slide .news-swiper {height:550px;} #main .main-section.design .bg-gray{top:-30px; height: 390px;} #main .main-slide .main-text .text-box .font-slide-subtxt {letter-spacing: -0.4px; font-size: var(--font-size-m-2); word-break: keep-all!important; text-align: left!important; line-height: 1.56} }