.sec {width:100%;} .sec .inner {width:1620px; margin:0 auto;} .main {width:100%; overflow-x:hidden;} .main .mainVisual {width:100%; position:relative; overflow:hidden; } .main .mainVisual::after {content:''; width:100%; height:100%; background-color:#ebe5d9; position:absolute; top:0; left:0; z-index:-2;} .main .mainVisual .bg {width:100%; position:absolute; top:0; left:0; z-index:-1; animation: scaleUp 8s forwards;} @keyframes scaleUp { 0% { transform: scale(1); } 100% { transform: scale(1.2); /* 원하는 크기로 설정 */ } } .main .mainVisual .visual {width:100%; height:100vh; position:relative;} .sc_down {position:absolute; left: 50%;transform: translateX(-50%); width:1px; height:100px; top:calc(100vh - 240px); z-index:9; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8)); z-index: 10; transition: 0.8s;} .sc_down:before{content: '';display: block;width:19px;height:19px;box-sizing: border-box; border:1px solid #fff; border-radius: 50%;left: 50%;transform: translateX(-50%);top: 0;animation: sc2 3s infinite linear;position: absolute} .sc_down:after { content: ''; display: block; position: fixed; left: 50%; transform: translateX(-50%); width: 130px; height: 1px; bottom: 00px; background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); z-index: 10; } .sc_down.on{opacity: 0} @keyframes sc2{ 0%{top: 0} 100%{top:90%} } .sc_down span{position: absolute; left:50%;transform: translateX(-50%);white-space: nowrap;bottom:10px; font-family: "Sorts Mill Goudy", serif; font-size: 18px; font-weight: 400; color: #fff;} .main .mainVisual .visual img {display:block; margin:0 auto;} .main .mainVisual .logoImg {padding:20vh 0 15vh 0; width:490px;} .main .mainVisual .infoBox {padding:280px 0 45px 0; } .main .mainVisual .infoBox .lfBox dl {padding-bottom:70px;} .main .mainVisual .infoBox .lfBox dt {font-family: "Sorts Mill Goudy", serif; font-size:60px; font-weight:400; color:#000; letter-spacing:-1px; margin-bottom:30px; line-height:1;} .main .mainVisual .infoBox .lfBox dd {font-size:18px; font-weight:300; color:#666666; line-height:1.4;} .main .mainVisual .infoBox .lfBox ul {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;} .main .mainVisual .infoBox .lfBox ul li {width:48%; position:relative; margin-bottom:20px;} .main .mainVisual .infoBox .lfBox ul li:hover a {border-bottom:1px solid #000; color:#000;} .main .mainVisual .infoBox .lfBox ul li:nth-child(2n) {margin-left:4%;} .main .mainVisual .infoBox .lfBox ul li a { display:block; font-size:24px; font-weight:300; color:#888888; padding-bottom:15px; border-bottom:1px solid #888888; box-sizing:border-box;} .main .mainVisual .infoBox .lfBox ul li span {width:17px; height:17px; position:absolute; top:4px; right:0;} .main .mainVisual .infoBox .lfBox ul li span::before {content:''; width:17px; height:0.5px; background-color:#888888; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} .main .mainVisual .infoBox .lfBox ul li span::after {content:''; width:0.5px; height:17px; background-color:#888888; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);} .main .mainVisual .infoBox .lfBox ul li:hover span::before, .main .mainVisual .infoBox .lfBox ul li:hover span::after {background-color:#000;} .main .mainVisual .infoBox .rtBox {width:840px;} .main .mainVisual .infoBox .rtBox ul {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between;} .main .mainVisual .infoBox .rtBox ul li {width:calc(50% - 20px); height:330px; margin-bottom:40px; position:relative; overflow:hidden; cursor:pointer;} .main .mainVisual .infoBox .rtBox ul li:last-child {margin-bottom:0;} .main .mainVisual .infoBox .rtBox ul li:nth-child(1) {margin-top:180px; margin-bottom:-180px;} .main .mainVisual .infoBox .rtBox ul li.blank {opacity:0;} .main .mainVisual .infoBox .rtBox ul li .icon {width:60px;} .main .mainVisual .infoBox .rtBox ul li .box { width:calc(100% - 40px); height:calc(100% - 80px); background-color:#fff; padding:40px 0 40px 40px; display: flex; flex-direction: column; justify-content: space-between; transition:1.6s; opacity:0;} .main .mainVisual .infoBox .rtBox ul li .box.active { opacity:1;} .main .mainVisual .infoBox .rtBox ul li .box.active dt, .main .mainVisual .infoBox .rtBox ul li .box.active dd {opacity:1;} .main .mainVisual .infoBox .rtBox ul li dl {position:relative; z-index:2; opacity:0;} .main .mainVisual .infoBox .rtBox ul li .box.active dl {opacity:1; transition-delay:0.1s; transition-duration:0.3s;} .main .mainVisual .infoBox .rtBox ul li dt {font-size:32px; font-weight:700; color:#34302c; padding-bottom:25px;} .main .mainVisual .infoBox .rtBox ul li dd {font-size:18px; font-weight:400; color:#888888; line-height:1.6; } .main .mainVisual .infoBox .rtBox ul li:hover dt, .main .mainVisual .infoBox .rtBox ul li:hover .box.active dt {color:#fff; opacity:1;} .main .mainVisual .infoBox .rtBox ul li:hover dd, .main .mainVisual .infoBox .rtBox ul li:hover .box.active dd {color:#fff; opacity:1; font-weight:300;} .main .mainVisual .infoBox .rtBox ul li::after {content: '';position: absolute;display: block;transition: all .5s ease-in-out; width: 105%;height: 105%; z-index: 0; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity:0;} .main .mainVisual .infoBox .rtBox ul li:nth-child(1)::after {background: url(../../_images/main/main_visual_hover01.png) no-repeat center / cover;} .main .mainVisual .infoBox .rtBox ul li:nth-child(2)::after {background: url(../../_images/main/main_visual_hover02.png) no-repeat center / cover;} .main .mainVisual .infoBox .rtBox ul li:nth-child(4)::after {background: url(../../_images/main/main_visual_hover03.png) no-repeat center / cover;} .main .mainVisual .infoBox .rtBox ul li:hover::after {opacity:1; width:100%; height:100%;} .main .mainVisual .infoBox .rtBox ul li:hover .icon {opacity:0; transition-duration:0s} .main .mainVisual .infoBox .rtBox ul li .box .icon {opacity:0; transition-duration:0.3s;} .main .mainVisual .infoBox .rtBox ul li .box.active .icon {opacity:1;} .main .bnLayout {padding:108px 0 110px 0; text-align:center; background: url(../../_images/main/main_bn_bg.png) no-repeat top / cover; background-attactment:fixed;} .main .bnLayout dt {font-size:36px; font-weight:700; color:#ffffff; line-height:1.3; padding-bottom:30px; text-shadow:1px 1px 27px rgba(0, 0, 0, 0.72);} .main .bnLayout dd {font-size:18px; font-weight:300; color:#ffffff; line-height:1.7; opacity:0.8; text-shadow:10px 6px 20px rgba(0, 0, 0, 0.8);} .main .bnLayout a {display:inline-block; margin:0 auto; padding:18px 35px; border-radius:30px; background-color:var(--color01); margin-top:40px;} .main .bnLayout a:hover {background-color:#000;} .main .bnLayout a span {display:inline-block; font-size:24px; font-weight:500; color:#fff; padding-right:30px;} .main .bnLayout a i {display:inline-block; font-size:22px; color:#fff; margin-top:1px;} .main .community {width:100%; background-color:#ebe5d9; padding:230px 0 160px 0;} .main .community .inner {width:1580px;} .main .community .tit {font-family: "Sorts Mill Goudy", serif; font-style: normal; font-size:60px; font-weight:400; color:#000; letter-spacing:-1px; position:relative; margin-bottom:-13px; line-height:1;} .main .community .linkMove { margin-bottom:25px;} .main .community .linkMove li {margin-left:20px;} .main .community .linkMove a {border:1px solid #34302c; box-sizing:border-box; display:inline-block; margin:0 auto; padding:10px 13px;} .main .community .linkMove a span {font-size:18px; font-weight:300; color:#34302c; padding-right:25px;} .main .community .linkMove a i {font-size:18px; color:#34302c;} .main .community .linkMove a:hover {background-color:var(--color01); border:1px solid var(--color01);} .main .community .linkMove a:hover span, .main .community .linkMove a:hover i {color:#fff;} .main .community .communitySlider {width:100%;} .main .community .communitySlider .swiper-slide { width:23%; height:400px; position:relative; overflow:hidden; } .main .community .communitySlider .swiper-slide {margin-right:2.666666666666667%;} .main .community .communitySlider .swiper-slide:nth-child(4) {margin-right:0;} .main .community .communitySlider a {width:100%; height:100%; position:relative; overflow:hidden; display:block; border:2px solid #ebe5d9; box-sizing:border-box; background-color:#fff;} .main .community .communitySlider .swiper-slide:hover a {border:2px solid var(--color01);} .main .community .communitySlider .swiper-slide .topTit {position:absolute; top:0; left:0; display:block; width:100px; height:40px; line-height:40px; background-color:#34302c; text-align:center; font-family: "Sorts Mill Goudy", serif; font-size:18px; font-weight: 400; font-style: normal; color:#fff;} .main .community .communitySlider .swiper-slide:hover .topTit {background-color:var(--color01);} .main .community .communitySlider dl {padding:80px 35px 60px 35px; width:calc(100% - 70px); height:calc(100% - 140px); display:flex; flex-direction:column; justify-content:space-between;} .main .community .communitySlider dt {font-size:24px; font-weight:700; color:#666666; line-height:1.3; width:100%; white-space:normal; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; word-break:normal;} .main .community .communitySlider .swiper-slide:hover dt {color:#000;} .main .community .communitySlider dd {font-size:16px; font-weight:400; color:#888888; line-height:1;} .main .community .hoverImg {position:absolute; bottom:0; left:0; width:100%; height:180px; overflow:hidden; display:none;} .main .community .communitySlider .swiper-slide:hover .hoverImg {display:block;} .main .community .hoverImg img {width:100%;} .main .community .btnBox {display:none;} @media screen and (max-width:1740px){ .main .mainVisual .logoImg {padding:9% 0 6% 0; width:480px;} } @media screen and (max-width:1680px){ .sec .inner, .main .community .inner {width:calc(100% - 80px); padding:0 40px;} .main .mainVisual .infoBox .lfBox dt {font-size:50px;} .main .mainVisual .infoBox .lfBox dd {font-size:17px;} .main .mainVisual .infoBox .lfBox ul li a {font-size:18px; padding-bottom:12px;} .main .mainVisual .infoBox .lfBox ul li span {width:14px; height:14px;} .main .mainVisual .infoBox {padding:250px 0 45px 0;} .main .mainVisual .infoBox .rtBox ul li dt {font-size:28px;} .main .mainVisual .infoBox .rtBox ul li dd {font-size:17px;} .main .mainVisual .infoBox .rtBox {width:780px;} .main .mainVisual .infoBox .rtBox ul li {height:300px;} .main .mainVisual .infoBox .rtBox ul li .box {padding:35px 0 35px 30px;} .main .mainVisual .infoBox .rtBox ul li .box.active {width:calc(100% - 30px):} .main .community .communitySlider .swiper-slide {width:23.5%; height:360px;} .main .community .communitySlider dt {font-size:21px;} .main .community .communitySlider dl {padding:70px 30px 50px 30px; width:calc(100% - 60px); height:calc(100% - 120px);} } @media screen and (max-width:1580px){ .main .mainVisual .logoImg {width:450px;} .main .mainVisual .infoBox .lfBox dt {font-size:40px;} .main .mainVisual .infoBox .lfBox dd {font-size:16px;} .main .mainVisual .infoBox .lfBox ul li a {font-size:16px; padding-bottom:10px;} .main .mainVisual .infoBox .lfBox ul li span {width:12px; height:12px;} .main .mainVisual .infoBox {padding:200px 0 45px 0;} .main .mainVisual .infoBox .rtBox ul li dt {font-size:20px; padding-bottom:10px;} .main .mainVisual .infoBox .rtBox ul li dd {font-size:16px;} .main .mainVisual .infoBox .rtBox {width:700px;} .main .mainVisual .infoBox .rtBox ul li {height:250px;} .main .mainVisual .infoBox .rtBox ul li .box {padding:30px 0 30px 20px;} .main .mainVisual .infoBox .rtBox ul li .box.active {width:calc(100% - 20px);} .main .mainVisual .infoBox .rtBox ul li .icon {width:45px;} .main .mainVisual .infoBox .rtBox ul li .box.active dt {transition-delay:1.6s; transition-duration:0.3s;} .main .mainVisual .infoBox .rtBox ul li .box.active dd {transition-delay:1.6s; transition-duration:0.3s;} .main .community {padding:180px 0 120px 0;} .main .community .tit {font-size:46px;} .main .community .hoverImg {height:150px;} } @media screen and (max-width:1380px){ .main .mainVisual .logoImg {padding:170px 0 100px 0; width:400px;} .main .mainVisual .infoBox .rtBox {width:630px;} .main .mainVisual .infoBox .rtBox ul li {width:calc(50% - 10px); margin-bottom:0;} .main .mainVisual .infoBox .rtBox ul li dd {font-size:15px;} .main .bnLayout dt {font-size:31px;} .main .bnLayout dd {font-size:17px; line-height: 1.5;} .main .bnLayout a span {font-size:21px;} .main .bnLayout a {padding:17px 32px;} } @media screen and (max-width:1280px){ .sec .inner, .main .community .inner {width:calc(100% - 40px); padding:0 20px;} .main .mainVisual .logoImg {padding:140px 0 80px 0;} .main .mainVisual .infoBox .rtBox {width:550px;} .main .mainVisual .infoBox .rtBox ul li .box.active {width:calc(100% - 40px); padding:30px 20px 30px 20px;} .sc_down {top:calc(100vh - 300px);} .main .mainVisual .infoBox .rtBox ul li dl {opacity:1;} } @media screen and (max-width:1200px){ .main .mainVisual .infoBox {width:calc(100% - 40px); margin:0 auto;} .main .mainVisual .infoBox {display:block; padding:80px 0 60px 0;} .main .mainVisual .infoBox .lfBox dl {text-align:center; padding-bottom:40px;} .main .mainVisual .infoBox .lfBox dl dt {line-height:1.2;} .main .mainVisual .infoBox .lfBox dl dt span {display:block;} .main .mainVisual .infoBox .rtBox {width:100%;} .main .mainVisual .infoBox .lfBox ul {display:none; } .main .mainVisual .infoBox .rtBox ul {} .main .mainVisual .infoBox .rtBox ul li.blank {display:none;} .main .mainVisual .infoBox .rtBox ul li .icon {width:60px; } .main .mainVisual .infoBox .rtBox ul li .box .icon {opacity:1;} .main .mainVisual .infoBox .rtBox ul li:nth-child(1) {margin-top:0; margin-bottom:0;} .main .mainVisual .infoBox .rtBox ul li {width:32%; overflow:hidden;} .main .mainVisual .infoBox .rtBox ul li .box {width:100%; height:calc(100% - 60px);} .main .bnLayout dt {font-size:31px;} .main .bnLayout dd {font-size:17px; line-height: 1.5;} .main .bnLayout a span {font-size:18px;} .main .bnLayout a i {font-size:19px; position:relative; top:1px;} .main .bnLayout a {padding:17px 32px;} .main .mainVisual .infoBox .rtBox ul li .box {opacity:1;} .main .community .hoverImg {height:130px;} .main .community .communitySlider .swiper-slide {height:330px;} .main .community .communitySlider .swiper-slide {margin-right:2%;} .main .community .communitySlider dl { padding:70px 25px 50px 25px; width: calc(100% - 50px); height: calc(100% - 100px);} .main .community .communitySlider dt {font-size:19px;} .main .community .communitySlider .swiper-slide .topTit {font-size:17px; width:90px; height:36px; line-height:36px;} } @media screen and (max-width:980px){ .main .mainVisual .visual {background:url(../../_images/main/main_visual.jpg) no-repeat top / cover; } .main .mainVisual .infoBox {padding:0 20px 80px 20px; margin-top:-150px; padding-top:50px; position:relative; z-index:1;} .main .mainVisual .infoBox .rtBox ul li .box {opacity:1; width:calc(100% - 40px); } .main .mainVisual .infoBox .rtBox ul li .box .icon, .main .mainVisual .infoBox .rtBox ul li dt, .main .mainVisual .infoBox .rtBox ul li dd {opacity:1;} .main .mainVisual .visual {height:980px; position:relative;} .sc_down {top:auto; bottom:35%;} .main .mainVisual .visual .logoImg {padding:25% 0 0 0; width:300px;} .main .mainVisual .bg {display:none;} .main .mainVisual .infoBox .rtBox ul {flex-direction:column;} .main .mainVisual .infoBox .rtBox ul li {height:auto;} .main .mainVisual .infoBox .rtBox ul li:nth-child(1), .main .mainVisual .infoBox .rtBox ul li {width:100%; overflow:hidden; margin-bottom:30px;} .main .mainVisual .infoBox .rtBox ul li:nth-child(1) {order:2;} .main .mainVisual .infoBox .rtBox ul li:nth-child(2) {order:1;} .main .mainVisual .infoBox .rtBox ul li:nth-child(3) {order:3;} .main .mainVisual .infoBox .rtBox ul li:nth-child(4) {order:3;} .main .mainVisual .infoBox .rtBox ul li .box {height:auto; padding:45px 20px; width:calc(100% - 40px);} .main .mainVisual .infoBox .rtBox ul li .icon {margin:0 auto 30px auto; display:block;} .main .mainVisual .infoBox .rtBox ul li::after {display:none;} .main .mainVisual .infoBox .rtBox ul li dt, .main .mainVisual .infoBox .rtBox ul li dd {text-align:center;} .main .mainVisual .infoBox .rtBox ul li dt {font-size:24px;} .main .mainVisual .infoBox .rtBox ul li dd {line-height:1.3;} .main .mainVisual .infoBox .rtBox ul li:hover dt, .main .mainVisual .infoBox .rtBox ul li:hover .box.active dt {color:#34302c;} .main .mainVisual .infoBox .rtBox ul li:hover dd, .main .mainVisual .infoBox .rtBox ul li:hover .box.active dd {color:#888888;} .main .bnLayout {padding:110px 20px; width:calc(100% - 40px);} .main .bnLayout dt {font-size:26px;} .main .bnLayout dd {font-size:16px; line-height: 1.5;} .main .community {padding:150px 0 110px 0;} .main .community .inner {width:calc(100% - 100px); padding:0 50px;} .main .community .tit {font-size:40px; padding-bottom:45px; text-align:center; margin-bottom:0;} .main .community .linkMove {margin-top:0; border:1px solid #34302c;} .main .community .linkMove li {margin-left:0; width:33.3333%;} .main .community .linkMove li a {width:100%; padding:10px 0; display:block;} .main .community .linkMove li:not(:last-child) {border-right:1px solid #34302c;} .main .community .linkMove a {border:none; width:100%; text-align:center;} .main .community .linkMove a:hover {border:none;} .main .community .linkMove a i {display:none;} .main .community .linkMove a span {padding-right:0;} .main .community .communitySlider {overflow:initial;} .main .community .communitySlider .swiper-slide {opacity:0;} .main .community .communitySlider .swiper-slide-active {opacity:1;} .main .community .communitySlider a, .main .community .communitySlider .swiper-slide:hover a {border:none;} .main .community .btnBox {display:block;} .main .communitySlider .swiper-pagination {position:relative; margin-top:55px;} .main .communitySlider .swiper-button-prev, .main .communitySlider .swiper-button-next {margin-top:-50px;} .main .communitySlider .swiper-button-prev {left:-35px;} .main .communitySlider .swiper-button-next {right:-35px;} .main .communitySlider .swiper-button-prev:after, .main .communitySlider .swiper-button-next:after {font-size:0;} .main .communitySlider .swiper-button-prev img, .main .communitySlider .swiper-button-next img {width:30px;} .main .community .tit {font-size:36px;} .main .community .communitySlider dt {font-size:19px;} .main .community .swiper-pagination-bullet {background:#888888; opacity:1;} .main .community .swiper-pagination-bullet-active {width:26px; background:#465000; border-radius:5px;} .main .community .communitySlider .swiper-slide {margin-right:0;} } @media screen and (max-width:720px){ .main .mainVisual .visual .logoImg {width:320px; padding:18vh 0 60px 0;} .main .mainVisual .infoBox .lfBox dd span {display:block;} .main .bnLayout {background:url(../../_images/main/main_bn_bg02.png) no-repeat top / cover;} .main .bnLayout {padding:150px 20px;} .main .bnLayout .none {display:none;} .main .bnLayout .br {display:block;} .main .bnLayout br {display:none;} .main .bnLayout a i {display:none;} .main .bnLayout a span {padding-right:0;} } @media screen and (max-width:580px){ .main .mainVisual .visual {height:700px; background:url(../../_images/main/main_visual_bg_mo.png) no-repeat bottom / cover;} .main .mainVisual .visual .logoImg {width:60%; padding:0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .main .bnLayout {padding:140px 20px;} .main .bnLayout dt {font-size:24px;} .main .mainVisual .infoBox .lfBox dt {font-size:36px;} .sc_down {top:auto; bottom:8%; height:80px;} .sc_down span {font-size:14px;} .sc_down:before {width:12px; height:12px;} .main .mainVisual .infoBox {margin-top:0;} } @media screen and (max-width:480px){ .main .mainVisual .visual {height:100vh; height: calc(var(--vh, 1vh) * 100);} .main .mainVisual .infoBox {margin-top:0;} .main .community .inner {width:calc(100% - 70px); padding:0 35px;} .main .communitySlider .swiper-button-prev img, .main .communitySlider .swiper-button-next img {width:22px;} .main .communitySlider .swiper-button-prev {left:-28px;} .main .communitySlider .swiper-button-next {right:-28px;} .main .community {padding:120px 0 110px 0;} .main .community .tit {font-size:32px; padding-bottom:40px;} .main .bnLayout dd {letter-spacing:-1px; } .main .mainVisual .infoBox .rtBox ul li .icon {margin:0 auto 20px auto;} .sc_down:before {width:12px; height:12px;} } @media screen and (max-width:340px){ .main .mainVisual .visual .logoImg {width:80%;} .main .mainVisual .infoBox .rtBox ul li dd {word-break: keep-all;} .main .mainVisual .infoBox .rtBox ul li dd br {display:none;} .main .mainVisual .infoBox .lfBox dt {margin-bottom:27px; font-size:34px;} .main .mainVisual .infoBox .lfBox dd {letter-spacing:-1px;} .main .mainVisual .infoBox .lfBox dd span {diplay:none;} .main .community .linkMove a span {font-size:16px;} .main .bnLayout {padding:120px 20px;} .main .bnLayout dt {font-size:22px;} .main .bnLayout dd {font-size:15px; letter-spacing:-1.2px;} } @media screen and (max-width:308px){ .main .mainVisual .infoBox .lfBox dd br {display:none;} .main .mainVisual .infoBox .lfBox dd span {display:none;} .main .bnLayout dt {font-size:22px;} .main .bnLayout dd {font-size:15px;} .main .bnLayout dd .br {display:none;} }