/* 인트로 ============*/ #intro_wrap{ background: url(../images/intro/intro_bg.jpg);} #intro_wrap > .inner {width: 1300px;min-height: calc(100vh - 246px); padding: 130px 0; display: flex;align-items: center; justify-content: space-between;} #intro_wrap > .inner .text_area {text-align: center;height: 50%;display: flex;flex-wrap: wrap; justify-content: center; align-content: space-around; flex-direction: column;} #intro_wrap > .inner .text_area > i {display: block; margin: 45px auto; width: 1px; height: 82px; background: #fff; opacity: 0.5;} #intro_wrap > .inner > div {opacity: 0; transform:translateY(20%);} #intro_wrap .quick_area {display: none} @media (max-width: 1400px) { #intro_wrap > .inner {padding: 0 40px;} } @media (max-width: 1200px) { #intro_wrap {background-size: 40px;} #intro_wrap > .inner {padding: 300px 20px 90px;justify-content: center;} #intro_wrap > .inner .text_area {position: absolute;top: 0;left: 0;height: auto;width: 100%;padding: 4vw 0;} #intro_wrap > .inner .text_area > i {width:50px;height:1px;margin: 20px auto;} #intro_wrap > .inner > div {padding: 0 20px;} } @media (max-width: 1024px) { #intro_wrap {background-size: 40px;} #intro_wrap > .inner {padding: 300px 20px 90px;} #intro_wrap > .inner .text_area {position: absolute;top: 5vw;left: 0;height: auto;width: 100%; min-width: 410px;} #intro_wrap > .inner .text_area > span {width: 30%;} #intro_wrap > .inner .text_area > i {width:50px;height:1px;margin: 20px auto;} #intro_wrap > .inner > div {/* padding: 0 20px; */padding: 4vw 2vw;} } @media (max-width: 768px) { #intro_wrap > .inner {padding: 58vw 0 8vw;min-height: auto;} #intro_wrap > .inner > div {padding: 0 10px;} #intro_wrap > .inner .text_area {padding: 8vw 0;} } .modal_pop { position:fixed; left: 0; top:0; width: 100%; height: 100vh; background: rgba(0,0,0,.8)} .modal_pop .modal_con {display: flex; height: 100vh; align-items: center; justify-content: center} #wrap { } .main_visual { width: 100%; position: relative; overflow: hidden;} .visual_list { } .visual_list li.item {position: relative; background-repeat: no-repeat !important; background-size: cover !important;} .visual_list li.item .inner{position: absolute;left: 51%;transform: translateX(-50%);top: 0;height: 100%;display: flex;justify-content: space-between;padding-top: 9%;} .visual_list li.item .text1{ margin-bottom: 2rem;} .visual_list li.item .text_box {color: #fff; line-height: 1.1;} .visual_list li.item .text_box h1{font-size: 46px; margin-bottom: 1rem; letter-spacing:3px; } .visual_list li.item .text_box h1 > span{ font-weight: 600; display: block;} .visual_list li.item .text_box p { font-size: 16px; font-weight: 100; text-align:center; line-height: 1.4;} .visual_list li.item .logo_box img {width: auto;} .vs03 .text_area {display: flex;flex-direction: column;align-items: center;margin-top: 0;} .vs03 .inner {justify-content: flex-end !important;} .vs03 .text_box {display: flex;flex-direction: column;align-items: center;} .vs03 .text_box h1{font-size: 46px;margin-bottom: 1.5rem !important;font-weight: 600;} .vs03 .text_box h1 > span{font-weight: 100 !important;display: block;margin-bottom: 0.5rem;} .vs03 .text_box p { font-size: 16px; font-weight: 100; line-height: 1.4; margin-bottom: 3rem;} .vs03 .text_box .text3 .logo_box {text-align: center;} .visual_list img {width:100% } .visual_list img.mo {display: none} #contents .slick-dotted.slick-slider {margin-bottom: 0;} .visual_list .slick-dots {bottom: 40px;} .visual_list .slick-dots li.slick-active button:before {color: #fff} .visual_list .slick-dots li button{width: 30px; height: 30px; } .visual_list .slick-active .inner .text1 {opacity: 0; animation: fadeIn 2s 0.2s forwards } .visual_list .slick-active .inner .text2 {opacity: 0; animation: fadeInUp 1.3s .8s forwards } .visual_list .slick-active .inner .text3 {opacity: 0; animation: fadeInUp 1s 1.6s forwards} .visual_list .vs03.slick-active .logo_box {opacity: 0; animation: fadeInUp 1.3s 2.2s forwards } @media all and (min-width:1900px) and (max-width:2000px) { .visual_list img {width:auto } } /*edition 비주얼*/ #section03 { background: url(../images/main/section3_bg.jpg) no-repeat #f9f4f0 top center / cover; padding:125px 0; position: relative; } #section03 .inner {display: flex;justify-content: space-between;padding: 0 !important;align-items: center;} #section03 .inner > div {opacity: 0; transform:translateY(20%);} #section03 .inner .set_title {display: flex;flex-direction: column;align-items: center;flex: 0 0 auto;padding-right: 120px;} #section03 .inner .set_con {} #section03 .inner .set_con .swiper-area{width: 1250px;position: relative;} #section03 .inner .set_con .edition-container {padding-top: 70px;} .edition-container .swiper-slide {transition: transform 1s; transform: translate3d(0, 0, 0);} .edition-container .swiper-slide.swiper-slide-active .label {top: -55px !important; bottom: auto;} .edition-container .swiper-slide.swiper-slide-next {transform: translate3d(0, -70px, 0);} #section03 .swiper-slide {position: relative;padding-bottom: 10px;} #section03 .swiper-slide a { color: #000;} #section03 .swiper-slide .label {position: absolute;left: 0;top:auto; bottom: -55px;font-size: 38px;font-weight: 500;color: #bea28b;text-transform:uppercase;} #section03 .swiper-slide .img_area {border-radius: 300px 300px 0 0;height: 390px;overflow: hidden; position: relative;} #section03 .swiper-slide .img_area > img {width:auto;max-width:none;height:100%;position: absolute;left: 50%;transform: translateX(-50%);top:0} #section03 .swiper-slide .text_area {background: #fff;padding: 20px 45px 60px;box-shadow: 2px 5px 6px rgba(0,0,0,0.2);} #section03 .swiper-slide .text_area p {font-size: 20px;color: #414141;font-weight: 300;} #section03 .swiper-slide .text_area h1 {font-size: 36px;color: #2b2b2b;text-align: left;font-weight: 600;margin-bottom: 20px;} #section03 .swiper-slide .text_area h1>span{font-size: 16px;font-weight: 300; display: inline-block;} #section03 .swiper-slide .text_area span {font-size: 14px;font-weight: 300;display: flex;align-items: center;letter-spacing: 0;gap: 7px;} .edition_slide-controller {margin-top: 15vh;margin-bottom: 0;} .controller-button-area {display:flex; gap: 20px;} .controller-button-area button {font-size: 14px; opacity: 0.5;} .controller-button-area button:hover{opacity: 1;} .controller__button-prev {display: flex; justify-content: center; flex-direction:column; align-items:flex-end} .controller__button-next {display: flex; justify-content: center; flex-direction:column; align-items:flex-start} #section03.active .inner > div {animation: slide_Up 1.2s 0.2s ease both} #section02 { background: url(../images/main/section2_bg.jpg) no-repeat top center / cover; position: relative; } #section02 .text_box {padding:150px 0;margin: 0 auto;margin-right: 15%;float: right;color: #fff;} #section02 .text_box .text1{opacity: 0;text-transform: uppercase;font-size: 20px;font-weight: 600;margin-bottom: 42px;letter-spacing: -1px;color: #9aa7cb;} #section02 .text_box .text2{opacity: 0;font-size: 62px;font-weight: 300;letter-spacing: -7px;line-height: 1.1;margin-bottom: 37px;} #section02 .text_box .text2 > span {font-weight: 600;} #section02 .text_box .text3{opacity: 0;font-size: 18px;font-weight: 100;margin-bottom: 90px;} #section02 .text_box a{} #section02 .map_box { overflow: hidden; border-radius: 0 0 0 50px; margin-bottom: 100px;} /*애3*/ #section02.active .text_box .text1 {opacity: 0; animation: fadeInUp 0.8s forwards } #section02.active .text_box .text2 {opacity: 0; animation: fadeInUp 1.3s .8s forwards } #section02.active .text_box .text3 {opacity: 0; left: 50px; animation: fadeInUp 1.3s 1.5s forwards} /*돋보기효과*/ .magnify { width:1200px; height:826px; margin:30px auto;} .magnify, .magnify > .magnify-lens, .magnify-mobile, .lens-mobile { /* Reset */ min-width: 0; min-height: 0; animation: none; border: none; float: none; margin: 0; opacity: 1; outline: none; overflow: visible; padding: 0; text-indent: 0; transform: none; transition: none; } .magnify { position: relative; width: auto; height: auto; box-shadow: none; display: inline-block; z-index: inherit; } .magnify > .magnify-lens { /* Magnifying lens */ position: absolute; width: 350px; height: 350px; border-radius: 100%; /* Multiple box shadows to achieve the glass lens effect */ box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25); cursor: none; display: none; z-index: 99; } .magnify > .magnify-lens.loading { background: #333 !important; opacity: 0.8; } .magnify > .magnify-lens.loading:after { /* Loading text */ position: absolute; top: 50%; left: 0; width: 100%; color: #fff; content: 'Loading...'; font: italic normal 16px/1 Calibri, sans-serif; letter-spacing: 1px; margin-top: -8px; text-align: center; text-shadow: 0 0 2px rgba(51, 51, 51, 0.8); text-transform: none; } /*층별안내*/ #section05 { padding: 100px 0 120px; overflow: hidden; background: #f6f6f6 } #section05 .set_title {margin-bottom: 47px; } #section05 .set_title > h1 {font-size: 62px; font-weight: 700; letter-spacing: 1px} #section05 .set_title > h1 > span {color: #006a85;} #section05 .set_title > p {font-size: 16px;letter-spacing: 1px;position: relative;display: inline-block;padding-right: 15px;} #section05 .set_title > p::after {content: "";position: absolute;left: 100%;top:50%;transform: translateY(-50%);width: 80px;height: 1px;background: #000;} #section05 .set_con { position: relative; } #section05 .set_con:after { } #section05 .bg {background: url(../images/main/unit_bg.png)no-repeat center; position: absolute;left: 50%;top: calc(50% - 50px);width: 650px;height: 650px; transform: translate(-50%, -50%);} #section05 .set_con a { } #section05 .set_con .text_area > h1 {font-size: 42px; font-weight: 500; color: #a6a6a6;} #section05 .set_con .text_area > p {font-size: 16px} #section05 .set_con .text_area > p > span {font-size: 20px; font-weight: 600;} #section05 .set_con .img_area {} #section05 .set_con .img_area img {} #section05 .text{font-size: 14px;font-weight: 300;color: #a09f9f;margin: 50px auto 0;text-align: center;} #section05 .text > p { width: auto; display: inline-block; text-align: left;} #section05 .inner > div {opacity: 0; transform:translateY(20%);} #section05.active .inner > div {animation: slide_Up 1.2s 0.2s ease both} .unit-container {padding: 50px 0 100px !important;} .unit-container .swiper-slide:not(.swiper-slide-active) .img_area:before { position:absolute; top:50%; left:50%; width:400px; height:400px; border-radius: 100%; z-index:-1; background-color: #fff; content:''; transform: translate(-50%, -50%);} .unit-container .swiper-slide:not(.swiper-slide-active) .img_area > img {width: 50%;} .unit-container .swiper-wrapper {align-items: center;} .unit-container .swiper-slide {text-align: center;} .unit-container .swiper-slide .text_area > p {display: none;} .unit-container .swiper-slide.swiper-slide-active {padding: 70px 0 0; } .unit-container .swiper-slide.swiper-slide-active .img_area > img {margin: 0 auto} .unit-container .swiper-slide.swiper-slide-active .text_area {color: #fff;} .unit-container .swiper-slide.swiper-slide-active .text_area > h1 {font-size: 60px !important; color: #fff !important;} .unit-container .swiper-slide.swiper-slide-active .text_area > p {display: block;} .unit-container .swiper-slide.swiper-slide-active .text_area > p {display: block;} .swiper-slide.swiper-slide-active .swiper-slide-unit__link { display: block; } .swiper-slide.swiper-slide-active .swiper-slide-unit-text { opacity:1; transform: translate3d(0, 0, 0); } .swiper-slide .swiper-slide-unit__link { position: absolute; top:-40px; left:30px; display: none; } .unit-slide-controller { position:absolute; bottom:0; right:80px; box-sizing: border-box; width: 452px; height: 61px; margin-left: 45px; font-size: 0; opacity: 1; -webkit-transition: opacity .5s ease 2s; transition: opacity .5s ease 2s; display: flex; align-items: flex-end; justify-content: center; flex-direction: column; } .unit-slide-controller .swiper-pagination { position: relative; display: inline-block; } .unit-slide-controller .swiper-pagination-progressbar { width: 100%; background: #f0f0f0; height: 1px; margin-top: 22px; -webkit-transition: background .8s linear; transition: background .8s linear; } .unit-slide-controller .swiper-pagination-progressbar-fill { background: #CA705B; } .unit-slide-controller .pagination-wrap { position: absolute; right: 0; width: 100px; top: 10px; } .unit-slide-controller .swiper-button-next, .unit-slide-controller .swiper-button-prev { width: 40px; height: 40px; margin-top: -10px; } .unit-slide-controller .swiper-button-next { background: url("../images/main/btn_next_sm.png") 50% 50% no-repeat; background-size:12px 9px; } .unit-slide-controller .swiper-button-prev { background: url("../images/main/btn_prev_sm.png") 50% 50% no-repeat; background-size:12px 9px; } .swiper-label-area.swiper-label-number-area { position: absolute; display: flex; top: 11px; left: 0; font-size: 16px; color: #d0d0d0; } .swiper-label-area .swiper-label__number, .swiper-label-area .swiper-label__total { font-size: 16px; color: #d0d0d0; display: block; transition: all, linear 0.3s; } .swiper-label-area .swiper-label__number { color: #000000; margin-right: 5px; } .swiper-slide-button-area {position: absolute; top: 0; left: 100px; width: 40px; height: 40px;} .swiper-slide-button { width: 14px; height: 14px; background-repeat: no-repeat; background-position: 50% 50%; } .swiper-slide-button.is--hide { display: none; } .swiper-slide-button--stop { width:40px; height:40px; background-image: url("../images/main/icon-stop.png"); } .swiper-slide-button--play { width:40px; height:40px; background-image: url("../images/main/icon-play.png"); } .unit-pagination-wrap { display:flex; max-width: 1120px; } .unit__button { width: 142px; height: 61px; left: 0; border-radius: 30.5px; background-color: #eeeeee; box-sizing: border-box; font-weight: 300; font-stretch: normal; font-style: normal; line-height: 60px; letter-spacing: normal; text-align: center; color: #000; display: block; position: relative; z-index: 100; } .unit__button.is--active { background: #00567d; color: #ffffff; } .unit__button + .unit__button { margin-left: 10px; } #section04 { padding: 100px 0; overflow: hidden; background: #fff; } #section04 .set_title {margin-bottom: 47px;} #section04 .set_title > h1 {text-align:center;color:#515050;font-size: 48px;font-weight: 500;letter-spacing: -2px;margin-bottom: 0} #section04 .set_title > p {font-size: 17px;text-align:center;color:#515050;letter-spacing: 0.02rem;} #section04 .set_con {display: flex;flex-wrap: wrap;justify-content: space-around;position: relative;} #section04 .set_con > div {padding:25px;} #section04 .set_con > div:last-child {padding:0} .banner_area {text-align: center;} .banner_area > span { margin: 0 60px; display: inline-block;} .banner_area > span.map {opacity: 0; transform:translateX(-100px);} .banner_area > span.opne_ban {opacity: 0; transform:translateX(50px); } #section04 .inner > div {opacity: 0; transform:translateY(20%);} #section04.active .inner > div {animation: slide_Up 1.2s 0.2s ease both} @keyframes showTop{ 0%{transform:translateY(100%);} 100%{transform:translateY(0);} } @keyframes showDown{ 0%{transform:translateY(-100%);} 100%{transform:translateY(0);} } @keyframes showOpacity{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes slide_Up{ 0%{opacity: 0;} 100%{opacity: 1; transform:translateY(0);} } @keyframes showLeft{ 0%{ opacity: 0;} 100%{opacity: 1; transform:translateX(0);} } @keyframes showRight{ 0% {opacity: 0;} 100%{opacity: 1; transform:translateX(0);} } @keyframes scrollmove { 0% {top:0px;} 100% {top:15px;} } @keyframes proBar{ 0%{height:0;} 100%{height:100%;} /* animation: proBar 3s forwards; */ } @media (max-width: 2000px) { } @media (max-width: 1600px) { .visual_list li.item {position: relative;} .visual_list li.item .inner {padding: 7% 20px 0;} .visual_list li.item .inner > .text1 {position: relative;top:auto;left: auto;width: 37%;} .visual_list li.item .inner > .text1 img{width: 100%;} .visual_list li.item .inner > .text_box {position: relative;top:auto;left: auto;margin-right: 100px;} } @media (max-width: 1400px) { .visual_list li.item .inner > .text_box h1{font-size: 42px; } .visual_list li.item .inner > .text_box p { font-size: 14px;} } @media (max-width: 1200px) { .visual_list li.item .inner {padding: 9% 20px 0;} .visual_list li.item .inner > .text_box h1{font-size: 32px; } } @media (max-width: 1024px) { .visual_list li.item {position: relative;} .visual_list li.item .inner {width: 80%; left: 10%; text-align: center; display: flex; justify-content: center !important; transform: none;padding: 0; padding-top: 18vw;} .visual_list li.item .inner .text1{margin-bottom: 3vw;} .visual_list li.item .inner > .text1 img {width: auto; margin: 0 auto;} .visual_list li.item .inner > .text_box {position: relative; right: auto; top: auto; margin-right: 0;} .visual_list li.item .inner > .text_box h1{font-size: 5vw; } .visual_list li.item .inner > .text_box p {font-size: 2vw;} .visual_list li.item .inner > .logo_box {margin-top: 6vw; margin: 9vw auto 0;} .visual_list li.item .inner > .logo_box img {width: auto; margin: 0 auto;} .visual_list .slick-active .inner .logo_box {opacity: 0; left: 70px; width: 60%; animation: fadeInUp 1s 1.8s forwards} .vs03 .text_box .text3::after {height: 40px;bottom: -50px;} .vs02 .text_area {margin-top: -50vw} .visual_list li.item .text_box h1 { font-weight: 600; color: #353535;} .visual_list li.item .text_box h1 > span {font-weight: 100; } #section02 { } #section02 .text_box {float: none;padding: 100px 0;text-align: center;margin: 0;} #section02 .text_box .text1{ } #section02 .text_box .text2{ } #section02 .text_box .text2 > span { } #section02 .text_box .text3{margin-bottom: 0;} #section02 .text_box a{display: none;} #section02 .map_box {border-radius: 0;margin-bottom: 0; line-height: 0} #section02 .row > div[class ^="col"] {width: 100%;} #section03 .inner {flex-direction: column; align-items:normal} #section03 h1 {margin-bottom: 5vw} #section03 .inner .set_con {padding: 0 10vw;} #section03 .inner .set_title { padding: 0} #section03 .inner .set_con .swiper-area{width: unset; position: relative;} #section03 .inner .set_con .edition-container {padding-top: 5vw;} #section03 .swiper-slide .label {display: none} #section03 .swiper-slide .img_area {} #section03 .swiper-slide .img_area > img { } #section03 .swiper-slide .text_area { text-align: center;} #section03 .swiper-slide .text_area p { } #section03 .swiper-slide .text_area p >br {display: none} #section03 .swiper-slide .text_area h1 { text-align: center;} #section03 .swiper-slide .text_area h1>span { } #section03 .swiper-slide .text_area span {justify-content: center} #section03 .paging {padding: 10px 20px;width: 30%;min-width: 215px;} .edition-container .swiper-slide.swiper-slide-next {transform: translate3d(0, 0, 0);} .edition_slide-controller.mo {margin-top: 5vw;} .edition_slide-controller.mo .controller-button-area { justify-content: center} .ban_slider .slick-slide img {width: 100%;} .ban_slider .slick-dots {bottom: auto;top: -31px;left: 135px;} #section04 .banner_area > .opne_ban {display: none} #section05 .set_title {text-align: center; margin-bottom: 20px; } #section05 .set_title > h1 {line-height: 1; font-size: 50px; } #section05 .set_title > h1 > span { } #section05 .set_title > p { } #section05 .set_title > p::after { display: none} #section05 .set_con { } #section05 .set_con:after { } #section05 .bg { } #section05 .set_con a { } #section05 .set_con .text_area > h1 { } #section05 .set_con .text_area > p { } #section05 .set_con .text_area > p > span { } #section05 .bg {width: 100%; background-size: 95%;} .unit-container .swiper-slide.swiper-slide-active .img_area > img {width: 70%;} .unit-container .swiper-slide:not(.swiper-slide-active) .img_area:before {display: none} .unit-pagination-wrap {justify-content: center;} } @media (max-width: 768px) { } @media (max-width: 640px) { .visual_list li.item .inner {} .ban_slider .slick-dots { } .visual_list li.item .text_box h1 {font-size: 24px !important;line-height: 0.8;margin-bottom: 1.7rem !important;} .visual_list li.item .inner > .text_box p {font-size: 13px; font-weight: 100;} .vs03 .text_box .text3 {margin-bottom: 70px;} #section02 .text_box {padding: 8vw 0;} #section02 .text_box .text1{margin-bottom: 5vw;} #section02 .text_box .text2{font-size: 7vw;letter-spacing: -2px;margin-bottom: 4vw;} #section02 .text_box .text2 > span{ } #section02 .text_box .text3{font-size: 3.5vw;} #section03 {padding: 10vw 3vw;background-size: auto;} #section03 .inner > div { } #section03 .inner .set_con {padding:0 5vw} #section03 .inner .set_title {width:55%; margin:0 auto} #section03 .swiper-slide .text_area {padding: 8vw 5vw;} #section03 .swiper-slide .text_area p {font-size: 3.8vw; } #section03 .swiper-slide .text_area p >br {display: none} #section03 .swiper-slide .text_area h1 {font-size: 6.2vw; line-height: 1;} #section03 .swiper-slide .text_area h1>span {font-size: 3.8vw; } #section03 .paging {font-size: 16px;font-weight: 300;letter-spacing: 0;padding: 1.5vw;} #section03 .text_box {font-size: 4vw;} #section03 .text_box > span {font-size: 30px; font-weight:500 } .ban_slider {border-width:12px} #section04 {padding:10vw 0} #section04 .set_title {margin-bottom: 30px;} #section04 .set_title > h1 {font-size: 6vw;letter-spacing: 1px;margin-bottom: 4vw;} .banner_area > span {margin: 0;padding: 0 5vw;} #section04 .set_title > p {display:none} #section04.active .banner_area > .map {opacity: 0; animation: fadeInUp 1s forwards } #section05 {padding: 10vw 0;} #section05 .set_title > h1 {font-size: 8vw;} #section05 .set_title > p {font-size: 3vw;} #section05 .set_con .text_area > p {font-size: 14px;line-height: 1.4;font-weight: 300;} #section05 .set_con .text_area > p > span {font-size:16px;font-weight: 500;} #section05 .text{width: 90%; font-size: 2.5vw;} #section05 .text > p { } .swiper-slide .swiper-slide-unit__link {width: 85px; height: 85px; top:0; left: 5px;} .unit-container {padding-bottom: 80px !important} .unit__button {width: auto;min-width: 80px;height:auto;padding: 0.6rem 2rem;line-height: 1;} .unit-container .swiper-slide.swiper-slide-active {padding: 10px ;} .unit-container .swiper-slide.swiper-slide-active .text_area > h1{font-size: 40px !important; line-height: 1; margin-bottom: 1vw;} } @media (max-width: 480px) { header h1.logo {width: 100px;background-size: 70%; } }