@charset "UTF-8"; /*---------------------------------------------------------------------- # 메인 CSS ----------------------------------------------------------------------*/ /*---------------------------------------------------------------------- @ MAIN COMMON ----------------------------------------------------------------------*/ #main > section {padding-top:6.25rem;padding-bottom:6.25rem; overflow-x:clip; } .main_title_wrap { position:relative; } .main_title {position:relative; display:flex; align-items:center; font-size:2.5rem; color:#000; font-weight:600; padding:0rem;line-height:1; } @media screen and (max-width: 1024px){ .main_title { font-size:1.875rem; } } @media screen and (max-width: 1024px){ #main > section {padding-top:5rem;padding-bottom:5rem;} } @media screen and (max-width: 768px){ .main_title { font-size:1.563rem; } } /*---------------------------------------------------------------------- 메인 슬라이드 ----------------------------------------------------------------------*/ #main__slider {position:relative;padding:0 !important;} #main__slider .slider__infos {overflow:hidden;height:calc(var(--vh, 1vh) * 100) ;} /*배경*/ #main__slider .slider__thumb {position:relative;width:100%;height:100%; } #main__slider .slider__thumb .slider__thumb_bg {position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover; transition: all 5s cubic-bezier(.06,.61,0,.99); } #main__slider .slider__thumb .slider__thumb_mo {display:none; transition: all 5s cubic-bezier(.06,.61,0,.99); } #main__slider .slider__thumb video {position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);background-size:cover;z-index:-1;} #main__slider .slider__thumb iframe {position:absolute;top:0;left:0;width:100%;height:100%;} #main__slider .slider__mxw {position:absolute;top:0;left:0;right:0;max-width:1400px;width:100%;height:100%;z-index:9;margin:0 auto;} /*슬로건*/ #main__slider .slider__slogun {display:flex;width:fit-content; height:100%;justify-content:center;align-items:flex-start;flex-direction:column;text-align:left;font-size:4rem;line-height:1;color:#fff;} #main__slider .slider__slogun b.title { display:none; position:relative;display:block; font-size:1.563rem;line-height:1;color:#fff; font-weight:600; letter-spacing:0; overflow:;} #main__slider .slider__slogun div.line { display:flex; width:0; height:0.313rem; background:#fff; transform-origin: 0%; margin-top:1.875rem; margin-bottom:1.875rem; } #main__slider .slider__slogun div.subtitle { font-size:3.75rem; color:#fff; font-weight:800;line-height:1.1;text-transform:uppercase; word-break:keep-all; } #main__slider .slider__slogun a { cursor:none; transition:all 0.4s; } #main__slider .slider__slogun a:hover { opacity:0.7; } /* #main__slider .slider__slogun > b.subtitle { font-family:'aw-conqueror-inline'; font-size:100px; } #main__slider .slider__slogun > b.subtitle span { font-family:'aw-conqueror-inline'; font-size:100px; } */ #main__slider .slider__slogun p { margin-top:1.563rem; } #main__slider .slider__slogun b > span, #main__slider .slider__slogun div > span, #main__slider .slider__slogun p > span { display:block; position:relative; opacity:0; } #main__slider .slider__slogun p > span a { position:relative; font-size:1.563rem; color:rgba(255,255,255,0.8); font-weight:600; letter-spacing:0; } #main__slider .slider__slogun p > span a::before { content:''; position:absolute; top:-5px; left:0px; width:100%; height:2px; background:rgba(255,255,255,0.8); ; } /* #main__slider .slider__slogun > p {position:relative;margin-top:20px;font-weight:400;font-size:1.500rem;line-height:1.47;color:#fbe3dd;overflow:;} */ /* #main__slider .slider__slogun > b {display:block;font-weight:900;font-size:4rem;line-height:1;color:#fff;} #main__slider .slider__slogun > strong {display:block;margin-top:2.2rem;font-weight:400;font-size:3rem;color:#fff;} #main__slider .slider__slogun > p {margin-top:2.2rem;font-weight:300;font-size:1.8rem;line-height:1.4;color:#fff;} #main__slider .slider__slogun > p strong {font-weight:500;} */ #main__slider .slider__slogun_btn {position:relative;display:block;padding:1rem 2rem; margin-top:2rem;border:1px solid #fff;font-size:1rem;color:#fff;text-align:center;box-sizing:border-box;-webkit-transition-duration:.3s;-m-transition-duration: .3s;-o-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;transition: all .3s ease-out;} #main__slider .slider__slogun_btn:before {content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;opacity:0.8;z-index:-1;-webkit-transition-duration:.3s;-m-transition-duration: .3s;-o-transition-duration:.3s;-ms-transition-duration:.3s;transition-duration:.3s;transition: all .3s ease-out;} #main__slider .slider__slogun_btn > span {display:flex;align-items:center;justify-content:center;} /*#main__slider .slider__slogun_btn > span:before {content:'';display:inline-block;width:20px;height:20px;margin-right:8px;background-image:url(images/main/slogun_icon.svg);background-repeat:no-repeat;background-position:center;}*/ #main__slider .slider__slogun_btn > span:after {content:'More View';} /*스크롤*/ #main__slider .slider-scroll a {display:block;position:absolute;left:0;right:0;width:9.2rem;height:4.3rem;margin:0 auto;font-weight:500;font-size:0.875rem;color:#fff;animation:scrollImage 2s linear infinite;cursor:pointer;text-align:center;letter-spacing:0;z-index:9;} #main__slider .slider-scroll a:before {content:'';display:block;width:1.5rem;height:1.5rem;margin:0 auto;margin-bottom:.4rem;background-image:url(images/main/visual_scroll.png);background-repeat:no-repeat;background-position:center;background-size:cover;} @keyframes scrollImage {0%{bottom:50px;}50%{bottom:70px;}100%{bottom:50px;}} /*좌우 부가 설정*/ #main__slider .swiper-button-prev:after, #main__slider .swiper-button-next:after {font-size:3rem;color:#fff;} #main__slider .swiper-pagination-bullet {background-color:#fff;} /*액션*/ /* #main__slider .slider__thumb .slider__thumb_bg { transform-style: preserve-3d; -webkit-transition-duration:15s;-m-transition-duration: 15s;-o-transition-duration:15s;-ms-transition-duration:15s;transition-duration:15s;transition: all 1s ease-out;-webkit-transform: scale(1,1);-ms-transform: scale(1,1);-moz-transform: scale(1,1);-o-transform: scale(1,1); transform:scale3d(3, 3, 1)} */ /* #main__slider .slider__thumb .slider__thumb_bg { -webkit-transform:translate3d(0PX, 0PX, 0) scale3d(3, 3, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-moz-transform:translate3d(0PX, 0PX, 0) scale3d(3, 3, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);-ms-transform:translate3d(0PX, 0PX, 0) scale3d(3, 3, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0);transform:translate3d(0PX, 0PX, 0) scale3d(3, 3, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transition: all 2.3s cubic-bezier(.06,.61,0,.99); transform-style: preserve-3d; will-change: transform; } #main__slider .slider__slogun {position:relative;top:0rem;-webkit-transition-duration:.8s;-m-transition-duration: .8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;transition: all .8s ease-out;} #main__slider .swiper-slide-active .slider__slogun {top:0;} #main__slider .swiper-slide-active .slider__thumb .slider__thumb_bg {-webkit-transform: scale(1);-ms-transform: scale(1);-moz-transform: scale(1);-o-transform: scale(1);transform: scale3d(1,1,1); will-change:transform; }
*/ #main__slider .slider__thumb .slider__thumb_bg { transform:translate3d(0PX, 0PX, 0) scale3d(3, 3, 1) rotateX(0) rotateY(0) rotateZ(0) skew(0, 0); transition: all 5s cubic-bezier(.4,.01,.97,.52); transform-style: preserve-3d; will-change: transform; } #main__slider .slider__slogun {position:relative;top:0rem;-webkit-transition-duration:.8s;-m-transition-duration: .8s;-o-transition-duration:.8s;-ms-transition-duration:.8s;transition-duration:.8s;transition: all .8s ease-out;} #main__slider .swiper-slide-active .slider__slogun {top:0;} #main__slider .swiper-slide-duplicate-active .slider__thumb .slider__thumb_bg , #main__slider .swiper-slide-active .slider__thumb .slider__thumb_bg {transition:all 5s cubic-bezier(.06,.61,0,.99); transform: scale3d(1,1,1); will-change:transform; } /* SWIPER PAGINATION */ #main__slider .swiper-button-prev:after, #main__slider .swiper-button-next:after { display:none; font-size:2rem;color:#fff;} #main__slider .swiper-button-prev, #main__slider .swiper-button-next { width:66px; height:66px; transition:all 0.4s; } #main__slider .swiper-button-next:before, #main__slider .swiper-button-prev:before { content:''; position:absolute; left:-12px; top:-12px; width:calc(100% + 24px); height:calc(100% + 24px); background:url('/images/main/slider_circle.png') no-repeat center center; animation:spin 5s infinite linear; z-index:-1; } #main__slider .swiper-button-prev span, #main__slider .swiper-button-next span { display:flex; width:100%; height:100%; opacity:0.3; transition:all 0.4s; z-index:1; } #main__slider .swiper-button-prev span { background:url('/images/main/slider_prev.png') no-repeat center center; } #main__slider .swiper-button-next span { background:url('/images/main/slider_next.png') no-repeat center center; } #main__slider .swiper-button-prev { left:20px; } #main__slider .swiper-button-next { right:20px; } #main__slider .swiper-button-prev:hover span, #main__slider .swiper-button-next:hover span { opacity:1; } #main__slider .material-symbols-outlined { font-size:80px;} #main__slider .swiper-pagination{ display:none; } /*반응형*/ @media screen and (max-width: 1470px){ #main__slider .swiper-button-prev, #main__slider .swiper-button-next { display:none; } #main__slider .slider__mxw { margin:0 15px; } } @media screen and (min-width: 1025px){ #main__slider .slider__slogun_btn:hover {border-color:#0d1231;} #main__slider .slider__slogun_btn:hover:before {background-color:#0d1231;opacity:1;} } @media screen and (max-width: 1024px){ #main__slider .slider__slogun {padding:0 15px;} #main__slider .slider__mxw { margin:0 0px; } #main__slider .swiper-button-prev, #main__slider .swiper-button-next { display:none; } #main__slider .slider__slogun div.subtitle { font-size:3rem; } } @media screen and (max-width: 640px){ /* #main__slider .slider__infos {height:640px;} */ #main__slider .slider__thumb .slider__thumb_bg {display:none;} #main__slider .slider__thumb .slider__thumb_bg.slider__thumb_mo {display:block;} @keyframes scrollImage {0%{bottom:30px;}50%{bottom:50px;}100%{bottom:30px;}} #main__slider .slider__slogun > b.title { font-size:3rem } #main__slider .slider__slogun > div.line { height:0.313rem; margin-top:13px; margin-bottom:15px; } #main__slider .slider__slogun div.subtitle { font-size:2.5rem; } #main__slider .slider__slogun > p { margin-top:1.875rem; } #main__slider .slider__slogun > p > span a { font-size:1.25rem; } } @media screen and (max-width: 480px){ /* #main__slider .slider__infos {height:480px;} */ } /*-------------------------------------------------------------------------------- @ MAIN CURSOR --------------------------------------------------------------------------------*/ #cursor { position: fixed; z-index: 1000; left: 0; top: 0; pointer-events: none; will-change: transform; } #cursor .cur_cir { width: 32px; height: 32px; margin-top: -50%; margin-left: -50%; border-radius: 50%; transition: opacity 0.3s cubic-bezier(0.25, 1, 0.5, 1), background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), width 0.3s cubic-bezier(0.25, 1, 0.5, 1), height 0.3s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0; } #cursor.overlay { mix-blend-mode: normal; } #cursor.overlay .cur_cir { width: 4.438rem; height: 4.438rem; transform: rotate(0) scale(1) translate(0, 0) !important; position: relative; opacity: 1; background-color: rgba(2,45,137, 0.8); border:1px solid #fff; z-index:999 } #cursor.overlay .cur_cir:after { content:''; position:absolute; left:-8px; top:-8px; width:calc(100% + 16px); height:calc(100% + 16px); background:rgba(2,45,137, 0.4); z-index:3; border-radius:50%; } /*-------------------------------------------------------------------------------- @ MAIN 하단버튼 --------------------------------------------------------------------------------*/ :root { --ft-height:4.688rem; } .main_footer .dim { display:none; position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:20; background:rgba(0,0,0,0.7); opacity:0; } .main_footer { position:fixed; bottom:0px; right:0px; display:flex; align-items:center; justify-content:flex-end; width:100%; height:var(--ft-height); z-index:21; } .main_footer_business { position:relative; display:flex; align-items:center; z-index:20; } .main_footer_business > a { position:relative; display:flex; align-items:center; justify-content:center; gap:0.313rem; min-width:9.063rem; height:var(--ft-height); color:#fff; background-image: -webkit-linear-gradient( -45deg, rgb(0,171,173) 0%, rgb(44,80,166) 100%); } .main_footer_business > a .material-symbols-outlined { } .main_footer_business > a .text { font-size:1.073rem; font-weight:700; } .main_footer_business > a { position:relative; display:flex; align-items:center; justify-content:center; gap:0.313rem; min-width:9.063rem; height:var(--ft-height); color:#fff; background:linear-gradient(-45deg,#ee7752,#e73c7e,#23a6d5,#23d5ab); background-size:1000% auto; animation:loginbox 5s ease infinite; transition:background 0.4s ease-out;transform-style:preserve-3d; } .main_footer_business_area { display:none; position:absolute; bottom:100%; left:0px; width:100%; } .main_footer_business_area ul { width:100%; } .main_footer_business_area ul li { } .main_footer_business_area ul li a { position:relative; display:flex; align-items:center; min-height:7.813rem; font-size:1.25rem; color:#fff; font-weight:800; letter-spacing:0; background:url('/images/main/business_img1.png') no-repeat; background-size:cover; padding:0.625rem 1.563rem; overflow:hidden; z-index:1; opacity:0; } .main_footer_business_area ul li a:after { content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(0,0,0,0.3); transition:all 0.4s ease; } .main_footer_business_area ul li:nth-of-type(2) a { background:url('/images/main/business_img2.png') no-repeat; } .main_footer_business_area ul li:nth-of-type(3) a { background:url('/images/main/business_img3.png') no-repeat; } .main_footer_business_area ul li:nth-of-type(4) a { background:url('/images/main/business_img4.png') no-repeat; } .main_footer_business_area ul li a span { position:relative; padding-left:1.25rem; z-index:2; } .main_footer_business_area ul li a span:before { content:''; position:absolute; top:0.485rem; left:0px; display:inline-flex; width:11px; height:11px; background:url('/images/common/gl_icon_plus.png') no-repeat; transition:all 0.4s; } .main_footer_business.active > a { font-size:1.25rem; } .main_footer_business_area ul li a:hover:after { left:0px; } .main_footer_business_area ul li a:hover span:before { transform:rotate(180deg); } .main_footer_business .main_footer_close { display:flex; align-items:center; justify-content:center; min-width:var(--ft-height); height:var(--ft-height); color:#fff; background:#000; cursor:pointer; opacity:0; z-index:-1; } .main_footer_business .main_footer_close span { transition:all 0.5s; } .main_footer_business .main_footer_close:hover span { transform:rotate(180deg); } /* .main_footer_business.active { } .main_footer_business.active a { min-width:15.938rem; } .main_footer_business.active .main_footer_close { display:flex; } */ .main_footer_cont { position:fixed; bottom:0px; right:0px; z-index:23; } .main_footer_cont > a { display:flex; align-items:center; justify-content:center; gap:0.313rem; min-width:var(--ft-height); height:var(--ft-height); color:#fff; background:#000; } .main_footer_cont .close { display:none; } .main_footer_address { position:fixed; bottom:0px; right:-100%; display:flex; align-items:center; width:calc(100%); height:var(--ft-height); background:#fff; z-index:22; transition:all 0.5s; } .main_footer_address.active { right:0px; } /* 하단 주소 */ .main_footer_address .gl_info { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:1440px; font-size:0.938rem; color:#666; font-weight:400; margin:0 auto; } .main_footer_address .gl_info_com { color:#000; padding-bottom:0px;} .main_footer_address .gl_info_tel .gl_info_row:after { background:#666; } .main_footer_address .gl_info_tel .gl_info_row a { color:#666; } .main_footer_address .gl_copy { font-size:0.813rem; color:#000; font-weight:300; opacity:0.3; margin-top:0rem; letter-spacing:0; } .main_footer_address .gl_info_family > a { color:#000; } .main_footer_address .gl_info_family > a:before { bottom:0; background:#000; } .main_footer_address .gl_info_family > a:after { background:#d0d0d0; } @media screen and (max-width:1620px){ .main_footer_address .gl_info { padding-right: 5.313rem; } } @media screen and (max-width:1470px){ .main_footer_address .gl_info { margin:0 15px; } .main_footer_address .gl_info_tel { padding-bottom:0px; } } @media screen and (max-width:768px){ .main_footer_address { height:revert; padding:1.25rem 0; } .main_footer_address .gl_info { flex-direction:column; align-items:revert; padding-right:3.75rem; padding-bottom:0;} .main_footer_address .gl_info_family { width:calc(100% - 1.875rem); margin-top:0.938rem; } .main_footer_address .gl_copy { margin-top:0.313rem; } }