@charset "utf-8"; /* * Name : main.css * Version : 1.10 * Author : onepixel studio --------------------------------------------------- */ /* 메인페이지 공통 */ #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: 30px;top: 205px;width: 100%;max-width: 480px;} #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:200px;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%;} /* 2024-06-05 .ecf-banner-area2 */ #main .ecf-banner-area2 {position: relative; width: 100%; height: 660px;} #main .ecf-banner-area2 .swiper-slide.white::after {content: ''; background:#fff; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-size: 1020px auto; background-image: url(../images/main/banner_new.png); -webkit-background-position: left 36vw; background-position: bottom left 36vw; background-repeat: no-repeat;} #main .ecf-banner-area2 .swiper-slide.dark::after {content: ''; background:#000; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-size: 1120px auto; background-image: url(../images/main/banner_black.png); -webkit-background-position: left 36vw; background-position: bottom left 36vw; background-repeat: no-repeat;} #main .ecf-banner-area2 .row.ecf-banner-container {display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1280px; width: 100%; height: 100%; margin: 0 auto; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box;} #main .ecf-banner-area2 .ecf-main-text {display: block; width: 500px; max-width: 100%; z-index: 1;} #main .ecf-banner-area2 .ecf-main-text .ecf-fade-box {font-family: var(--font-family-kor); font-style: var(--font-style-normal); font-weight: var(--font-weight-300); font-size: var(--font-size-xl-3); letter-spacing: var(--letter-spacing-1-8); color: var(--main); margin: 0;} #main .ecf-banner-area2 .dark .ecf-main-text .ecf-fade-box {color: #fff;} #main .ecf-banner-area2 .ecf-main-text .ecf-fade-box.box-1 { display: block; font-weight: var(--font-weight-300); font-size: var(--font-size-xl-3); } #main .ecf-banner-area2 .ecf-main-text .ecf-fade-box.box-2 {font-weight: var(--font-weight-700); font-size: var(--font-size-xl-3); } #main .ecf-banner-area2 .ecf-main-text .ecf-fade-box.box-3 {font-weight: var(--font-weight-400); font-size: var(--font-size-s-3); letter-spacing: var(--letter-spacing-0-6); margin-top: var(--margin-top-20); line-height: 22px; display: block; width: 540px; max-width: 100%;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container {min-width: 540px; margin: 0; padding: 40px 0 0; flex-wrap: wrap; display: flex; gap: 0.8rem 0.8rem;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap {display: inline-block; padding-left: 0; vertical-align: middle;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap:first-of-type {padding: 0;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn {background: none; border: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: none; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 16px; -webkit-transition: background .2s; transition: background .2s; width: 160px; height: 57px; line-height: 57px; border-radius: 8px; font-weight: var(--font-weight-600); font-size: var(--font-size-s-2); } #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-01{ background:#000; color: #fff; border: 1px solid #fff; transition: all 0.3s ease-in-out;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-01:hover {background-color: #4D4DFF; } #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-02 { color: #000; background: #fff; border: 1px solid #000; transition: all 0.3s ease-in-out;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-02:hover {background-color: #f5f5f5; } #main .ecf-banner-area2 .mySwiper .swiper-pagination-current, #main .ecf-banner-area2 .swiper-pagination-total {color:#fff} #main .ecf-banner-area2 .mySwiper .ecf-swiper-container { max-width: 1280px; height: auto; margin: 0 auto; position: relative; bottom: 100px; } #main .ecf-banner-area2 .mySwiper .font-main-slide {position: relative; left: 50px; bottom: -25px; color: #fff; /*padding: 0 80px 50px 0; */ line-height: 0; text-align: left;} #main .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-prev {z-index: 10; top: 30px; color:#fff} #main .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-next {z-index: 10; top: 30px; right: auto; width: 100%; max-width: 310px; color:#fff} #main .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-prev::after, #main .main-slide .swiper-button-next::after {font-size: 14px;} /* #main .main-slide.ecf-banner-area2 .ecf-banner-container {position: relative;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box {opacity:0;visibility: hidden;width: 100%;max-width: 520px;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .btn-line {opacity: 0;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box {transition: all 0.8s; overflow: hidden; } #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box.box-1 , #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box.box-2 {transform: translateY(118%);opacity: 0;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box.box-3 {transform: translateX(3%);opacity: 0;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on {opacity: 1;visibility: visible;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on .btn-line {opacity: 1; z-index: 1;transition: opacity 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.5s;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on .hidden-box.box-1 {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.2s;opacity: 1;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on .hidden-box.box-2 {transform: translateY(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.4s;opacity: 1;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on .hidden-box.box-3 {transform: translateX(0%);transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.2s;opacity: 1;} */ .ecf-banner-area2 .swiper-button-next, .ecf-banner-area2 .swiper-button-prev, .ecf-banner-area2 .mySwiper .font-main-slide, .ecf-banner-area2 .mySwiper .swiper-pagination-current, .ecf-banner-area2 .swiper-pagination-total { transition: all 0.8s ease-in-out; } .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-next.s-1, .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-prev.s-1, #main .ecf-banner-area2 .mySwiper .font-main-slide.s-1, #main .ecf-banner-area2 .mySwiper .swiper-pagination-current.s-1, #main .ecf-banner-area2 .swiper-pagination-total.s-1 {color: #fff !important; caret-color: transparent;} .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-next.s-2, .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-prev.s-2, #main .ecf-banner-area2 .mySwiper .font-main-slide.s-2, #main .ecf-banner-area2 .mySwiper .swiper-pagination-current.s-2, #main .ecf-banner-area2 .swiper-pagination-total.s-2 { color:#000 !important; caret-color: transparent;} /* 2024-02-28 메인 배너 */ #main .main-slide.slide-hide {display: none; visibility: hidden; opacity: 0;} #main .ecf-banner-area {display: none; visibility: hidden; opacity: 0;} #main .ecf-banner-area {position: relative; background: linear-gradient(180deg, rgba(249, 250, 254, 1) 9.97%, rgba(236, 240, 249, 1) 81.87%); width: 100%; height: 660px;} #main .ecf-banner-area .row.ecf-banner-container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 1280px; width: 100%; height: 100%; margin: 0 auto; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-sizing: border-box; /*background-image: url(../images/main/banner_img.svg); -webkit-background-position: bottom right -300px; background-position: bottom right -300px; -webkit-background-size: auto auto; background-size: auto auto; background-repeat: no-repeat; */ } #main .ecf-banner-area::after {content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-size: 1120px auto; background-image: url(../images/main/banner_img.png); -webkit-background-position: left 40vw; background-position: bottom left 40vw; background-repeat: no-repeat;} #main .ecf-banner-area .ecf-main-text {display: block; width: 500px; max-width: 100%; z-index: 1;} #main .ecf-banner-area .ecf-main-text .ecf-fade-box {font-family: var(--font-family-kor); font-style: var(--font-style-normal); font-weight: var(--font-weight-300); font-size: var(--font-size-xl-3); letter-spacing: var(--letter-spacing-1-8); color: var(--main); margin: 0;} #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-1 { display: block; font-weight: var(--font-weight-300); font-size: var(--font-size-xl-3); } #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-2 {font-weight: var(--font-weight-700); font-size: var(--font-size-xl-3); } #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-3 {font-weight: var(--font-weight-400); font-size: var(--font-size-s-3); letter-spacing: var(--letter-spacing-0-6); margin-top: var(--margin-top-20); line-height: 22px; display: block; width: 440px; max-width: 100%;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container {min-width: 520px; margin: 0; padding: 40px 0 0; flex-wrap: wrap; display: flex; gap: 0.8rem 0.8rem;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap {display: inline-block; padding-left: 0; vertical-align: middle;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap:first-of-type {padding: 0;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn {background: none; border: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; appearance: none; outline: none; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 16px; -webkit-transition: background .2s; transition: background .2s; width: 160px; height: 57px; line-height: 57px; border-radius: 500px; font-weight: var(--font-weight-600); font-size: var(--font-size-s-2); } #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-01{ background: rgba(34, 34, 34, 1); color: #fff; } #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-02 { color: rgba(34, 34, 34, 1); background: #fff; border: 1px solid #E9ECEF;} @media (hover: hover) and (pointer: fine) { #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-01:hover {background-color: rgba(34, 34, 34, 0.95); } #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-02:hover {background-color: rgba(255, 255, 255, 0.733); } } /* section - business */ #main .main-section.business {position: relative;} #main .gray-section {position: relative;} #main .gray-section .main-section.business.gray-container {margin-top:0; padding-top: var(--margin-space); padding-bottom: var(--margin-space);} #main .gray-section:after {display: block; content: ''; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; background: #fafafa; z-index: -1;} #main .main-section.business .business-cover {border-radius: var(--radius-8);overflow: hidden; background: #EAEEF6;} #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; display: none; visibility: hidden; opacity: 0;} #main .main-section.design .bg-gray {width: 70%;max-width:1280px;height:440px;position: absolute;top: 28px;left: 0;background: var(--white-200);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: 28.5%;max-width: 345px;} #main .main-section.design .design-box.box3 {margin:20px auto 0; width: 48.2%} #main .main-section.design .design-box .design-img {border-radius: var(--radius-8);overflow: hidden;margin-bottom: 30px;} #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: 510px;} #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);} /* 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;} #main .main-section.event .event-swiper .swiper-slide a {display:block;width: 100%;height:100%;position: relative;overflow: hidden;border-radius: 8px;} #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;} #main .main-section.event .event-swiper .swiper-slide a .hover-bg {width:100%;height:100%;opacity: 0.5;background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 80%));transition: all 0.5s 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:1;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide a .hover-text {position:absolute;bottom:-10%;left:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);opacity: 0;} #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.5s cubic-bezier(0.42,0,0.14,1.01);} #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01) 0.5s;opacity: 1;} /* section - contact */ #main .main-section.contact {background-color:#fff; height: 325px;} #main .main-section.contact .container-xl {padding-top:70px;padding-bottom:70px;height:100%;position: relative;} #main .main-section.contact .container-xl .contact-title {color:#212121} #main .main-section.contact .contact-txt {float: left;width: 300px; color:#212121} #main .main-section.contact .contact-txt p {color:#212121} #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:#212121; ;float: left;line-height: 0;} #main .main-section.contact .contact-sns .sns-icon img {width: 29px;} @media (min-width: 2100px) { /* 2024-02-28 */ #main .ecf-banner-area::after {background-position: bottom left 50vw;} #main .ecf-banner-area2 .swiper-slide.dark::after, #main .ecf-banner-area2 .swiper-slide.white::after {background-position: bottom left 45vw;} } @media (max-width: 1330px) { #main .main-slide .main-text .text-box {padding-left: 20px;} #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;} } @media (max-width: 1200px) { #main .main-section.news .news-text, #main .main-section.news .news-slide .news-swiper {height: 485px;} #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;} /* 2024-02-28 */ #main .ecf-banner-area::after {background-position: center left 420px;} #main .ecf-banner-area2 .swiper-slide.dark::after, #main .ecf-banner-area2 .swiper-slide.white::after {background-position: center left 420px;} } @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% - 50px);display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 2;-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;} /* 2024-02-28 */ #main .ecf-banner-area::after {background-position: center left 320px;} #main .ecf-banner-area2 .swiper-slide.dark::after, #main .ecf-banner-area2 .swiper-slide.white::after {background-position: center left 320px;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container {min-width: 480px;} } @media (max-width: 880px) { /* 2024-02-28 */ #main .ecf-banner-area {height: 550px;} #main .ecf-banner-area::after {background-image: none;} #main .ecf-banner-area2 .swiper-slide.dark::after, #main .ecf-banner-area2 .swiper-slide.white::after {background-image: none;} #main .ecf-banner-area .row.ecf-banner-container {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;} #main .ecf-banner-area .ecf-main-text .ecf-fade-box {text-align: center;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box {text-align: center; width: 100%; max-width: 100%;} #main .ecf-banner-area2 .ecf-main-text .ecf-fade-box.box-3 { font-size: 14px; max-width: 100%; margin: 5px auto 0; } #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-1 {font-size: var(--font-size-xl-2); line-height: 46px;} #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-2 {font-size: var(--font-size-xl-2); line-height: 46px;} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box.box-1, #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box .hidden-box.box-2 {font-size: var(--font-size-xl-2); line-height: 46px;} #main .ecf-banner-area .ecf-main-text .ecf-fade-box.box-3 {font-size: var(--font-size-s-1); line-height: 28px; width: 360px; margin: 0 auto; margin-top: var(--margin-top-20);} #main .main-slide.ecf-banner-area2 .ecf-banner-container .text-box.on .hidden-box.box-3 {font-size: var(--font-size-s-1); line-height: 28px; width: 80%; margin: 0 auto; margin-top: var(--margin-top-20);} #main .ecf-banner-area .ecf-main-text .ecf-btn-container {min-width: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap {padding: 12px 20px 0;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap:first-of-type {padding: 0 20px;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn {width: 300px; max-width: 100%;} #main .ecf-banner-area2 .mySwiper .ecf-swiper-container{ bottom: 70px; left: 50%; margin-left: -84px;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container {flex-direction: column; min-width: 100%;padding: 20px 0 0;} #main .main-slide.ecf-banner-area2 .main-swiper-btn.swiper-button-next { max-width: 290px;} #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-01, #main .ecf-banner-area2 .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn-02 {width: 200px; height: 52px; line-height: 52px;} } @media screen and (max-width: 767px) { #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:120px;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: 0.85;} #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;} #main .main-section.news .news-text {margin-bottom: 30px;} #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: 360px;} #main .main-section.news .news-slide .news-swiper .swiper-slide .news-slide-img {height: 205px;} } @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);} .font-slide-subtxt, .font-contact-m-1 {font-size: var(--font-size-s-2);} .font-slide-s-2, .font-product-s-2 {font-size: var(--font-size-s-1);margin-top: 10px;} .font-product-m-1-SB {margin-top: 10px;} /* #main .main-slide {height: 460px;} */ #main .main-slide .font-slide-subtxt {font-size:15px !important} #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:110px; right:0} #main .main-slide .main-text .text-box .btn-line {margin-top:30px;width:200px;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-section.contact {height: 455px;} #main .main-section.business .row {margin-top: 0px !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: 30px;width:100%;max-width: unset;} #main .main-section.design .design-box.box3 {margin-top: 30px;width:100%;max-width: unset;} #main .main-section.event .event-slide-thumb {margin-top: 25px;} #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:20px;left:20px;} #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 20px);} #main .main-section.contact .contact-txt {width: 100%;} /* 2024-02-28 */ #main .ecf-banner-area .ecf-main-text .ecf-btn-container {padding: 24px 0 0;} #main .ecf-banner-area .ecf-main-text .ecf-btn-container .ecf-btn-wrap .ecf-btn {width: 200px;} }