@charset "utf-8";

#mVisual {position:relative; width:100%; height:100vh; min-height:70rem; overflow:hidden; padding-top: 5rem;}
#mVisual .mv_wrap {width:100%; height:100%;}
#mVisual .slick-list {height:100%;}
#mVisual .slick-track {height:100%;}
#mVisual .mv {height:100vh; min-height:70rem; position:relative; background-position:center; background-repeat:no-repeat; background-size:cover;}
#mVisual .mv:before {content:""; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.48);}
#mVisual .mv1 {background-image:url('/images/main/mv1.png');}
#mVisual .mv2 {background-image:url('/images/main/mv2.jpg');}
#mVisual .mv3 {background-image:url('/images/main/mv3.png');}
#mVisual .inner {width:100%; height:100%; position:relative; z-index:2; display:flex; align-items:center; justify-content:center;}
#mVisual .txt {width:100%; color:#fff; text-align:center; box-sizing:border-box;}
#mVisual .txt h3 {font-size:6rem; line-height:1.2; letter-spacing:-0.05em;}
#mVisual .txt h4 {margin:4rem 0; font-family:'Montserrat', sans-serif; font-size:1.4rem; letter-spacing:0.12em; opacity: 0.5;}
#mVisual .txt p {font-size:2rem; line-height:1.5; letter-spacing:-0.04em;}
#mVisual .txt p b {font-weight:700;}
#mVisual .link {margin-top:4.5rem; display:flex; justify-content:center; gap:2rem;}
#mVisual .link li {width:20rem; height:6rem;}
#mVisual .link li a {width:100%; height:100%; padding:0 2.5rem; display:flex; align-items:center; border-radius:3rem; background:rgba(255,255,255,0.2); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); color:#fff; font-size:2rem; font-weight:600; box-sizing:border-box; transition:all 0.35s ease; gap: 2.5rem; justify-content: center;}
#mVisual .link li a span {display:block; transition:transform 0.4s ease;}
#mVisual .link li a:hover {background:rgba(255,255,255,0.35);}
#mVisual .link li a:hover span {transform:rotate(180deg);}
#mVisual .mv_control {position:absolute; right:6rem; bottom:5rem; z-index:20; display:flex; align-items:center; gap:1.2rem;}
#mVisual .mv_control .slick-dots {width:auto; margin:0; padding:0; position:static; display:flex !important; align-items:center; gap:0.7rem;}
#mVisual .mv_control .slick-dots li {width:6px; height:6px; margin:0; padding:0;}
#mVisual .mv_control .slick-dots li button {width:6px; height:6px; margin:0; padding:0; display:block; border:0; border-radius:50%; background:rgba(255,255,255,0.5); font-size:0; line-height:0;}
#mVisual .mv_control .slick-dots li button:before {display:none;}
#mVisual .mv_control .slick-dots li.slick-active button {background:#fff;}
#mVisual .mv_control .mv_prev, #mVisual .mv_control .mv_next {width:2rem; height:2rem; padding:0; position:relative; left:auto; right:auto; top:auto; bottom:auto; transform:none; border:0; background:none; font-size:0; cursor:pointer;}
#mVisual .mv_control .mv_prev:before, #mVisual .mv_control .mv_next:before {content:""; width:0.7rem; height:0.7rem; position:absolute; left:50%; top:50%; border-top:1px solid rgba(255,255,255,0.8); border-right:1px solid rgba(255,255,255,0.8);}
#mVisual .mv_control .mv_prev:before {transform:translate(-30%,-50%) rotate(-135deg);}
#mVisual .mv_control .mv_next:before {transform:translate(-70%,-50%) rotate(45deg);}

@media (max-width:1280px) {
    #mVisual .txt h3 {font-size:5rem;}
    #mVisual .txt p {font-size:1.8rem;}
    #mVisual .link li a {font-size: 1.8rem;}
}
@media (max-width:768px) {
    #mVisual {height:100svh; min-height:60rem;}
    #mVisual .mv {height:100svh; min-height:60rem;}
    #mVisual .mv_control {right:2rem; bottom:2.5rem;}
    #mVisual .mv_control .slick-dots li {width:0.6rem; height:0.6rem;}
#mVisual .mv_control .slick-dots li button {width: 0.6rem; height: 0.6rem;}
}
@media (max-width:480px) {
    #mVisual .txt h3 {font-size:4rem;}
    #mVisual .txt h4 {font-size: 1.2rem;}
    #mVisual .txt p {font-size:1.6rem;}
    #mVisual .link li {width:17rem; height:5rem;}
    #mVisual .link li a {font-size: 1.6rem; gap: 1.5rem;}
}


:root{
    --color1:#007440;
    --color2:#d3a243;
}


.m_txt {display:flex; align-items:flex-end; justify-content:space-between; margin-bottom: 6rem;}
.m_txt h4 {margin-bottom:2.5rem; color:var(--color2); font-family:'Montserrat', sans-serif; font-size:1.6rem; letter-spacing:0.12em;}
.m_txt h3 {font-size:5rem; line-height:1.25; letter-spacing:-0.05em;}
.m_txt h3 span {color:var(--color1);}
.m_txt p{font-size: 2rem; margin-top: 4rem; line-height: 1.6;}
.m_txt > a {margin-bottom:0.5rem; display:flex; align-items:center; gap:0.8rem; color:#222; font-size:2rem; font-weight:600;}
.m_txt > a span {color:var(--color1); font-size:2rem; transition:transform 0.3s ease;}
.m_txt > a:hover span {transform:translate(0.3rem,-0.3rem);}

.p-Part{padding: 14rem 0;}

@media (max-width:1280px) {
    .m_txt{margin-bottom: 5rem;}
    .m_txt h3 {font-size:4rem;}
    .m_txt p{font-size: 1.8rem; margin-top: 3rem;}
    .m_txt > a {font-size:1.8rem;}
    .p-Part{padding: 12rem 0;}
}
@media (max-width:976px) {
    .p-Part{padding: 10rem 0;}
}

@media (max-width:768px) {
    .p-Part{padding: 8rem 0;}
    .m_txt {display:block;}
    .m_txt h4 {margin-bottom:2rem; font-size:1.3rem;}
    .m_txt h3 {font-size:3.5rem;}
    .m_txt p{font-size: 1.6rem;}
    .m_txt > a {margin-top:2rem; margin-bottom:0; font-size:1.6rem;}
}
@media (max-width:480px) {
    .m_txt{margin-bottom: 4rem;}
    .p-Part{padding: 6rem 0;}
    .m_txt h4 {font-size:1.2rem;}
    .m_txt h3 {font-size:3.2rem;}
}



#m_sec1 .pro_list {display:grid; grid-template-columns:repeat(3,1fr); gap:5rem;}
#m_sec1 .pro_list li {height:40rem; border-radius:2rem; overflow:hidden;}
#m_sec1 .pro_list li > a {width:100%; height:100%; display:block; position:relative; overflow:hidden; color:#fff;}
#m_sec1 .pro_list .img {width:100%; height:100%; position:absolute; left:0; top:0;}
#m_sec1 .pro_list .img:after {content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.3); transition:background 0.5s ease;}
#m_sec1 .pro_list .img img {width:100%; height:100%; object-fit:cover; transition: 0.5s;}
#m_sec1 .pro_list .txt {width:100%; height:100%; padding:4rem; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box;}
#m_sec1 .pro_list .top {display:flex; align-items:center; justify-content:flex-end;}
#m_sec1 .pro_list .top p {font-family:'Montserrat', sans-serif; font-size:1.8rem; font-weight:700;}
#m_sec1 .pro_list .top span {position:absolute; right:3rem; top:3rem; font-size:3rem; line-height:1; opacity:0; transform:translate(-1rem,1rem); transition:opacity 0.4s ease, transform 0.4s ease;font-size: 4rem; font-weight: bold;}
#m_sec1 .pro_list .top p + span {margin-left:1rem;}
#m_sec1 .pro_list .txt h3 {font-size:4rem; line-height:1.3; letter-spacing:-0.05em;}
#m_sec1 .pro_list li:hover .img:after {background:linear-gradient(to top,rgba(0,116,64,0.95) 0%,rgba(0,116,64,0.65) 20%,rgba(0,0,0,0.5) 60%,rgba(0,0,0,0.5) 100%);}
#m_sec1 .pro_list li:hover .img img {transform:scale(1.05);}
#m_sec1 .pro_list li:hover .top p {opacity:0;}
#m_sec1 .pro_list li:hover .top span {opacity:1; transform:translate(0,0);}

@media (max-width:1280px) {
    #m_sec1 .pro_list { gap:2rem;}
    #m_sec1 .pro_list li {height:27rem;}
    #m_sec1 .pro_list .txt {padding:2.5rem;}
    #m_sec1 .pro_list .txt h3 {font-size:3rem;}
    #m_sec1 .pro_list .top p {font-size:1.6rem;}
    #m_sec1 .pro_list .top span {right:2.5rem; top:2.5rem;}
}

@media (max-width:976px) {
    #m_sec1 .pro_list { grid-template-columns:1fr; gap:2rem;}
    #m_sec1 .pro_list li {height:28rem;}
    #m_sec1 .pro_list .txt {padding:2.5rem;}
}
@media (max-width:480px) {
    #m_sec1 .pro_list li {height:20rem; border-radius: 1rem;}
    #m_sec1 .pro_list .top p {font-size:1.4rem;}
    #m_sec1 .pro_list .txt h3 {font-size:2.5rem;}
}


#m_sec2{background: url('/images/main/m_sec2_bg.jpg') center center / cover no-repeat; color: #fff; text-align: center;}
#m_sec2 .m_txt{flex-direction: column; justify-content: center; align-items: center; margin-bottom: 0;}
#m_sec2 .m_txt a{border: 1px solid #fff; color: #fff; width: 20rem; height: 6rem; justify-content: center; border-radius: 100px; margin-top: 5rem;}
#m_sec2 .m_txt a span{color: #fff;}
#m_sec2 .m_txt a:hover{background: #fff; color: var(--color1);}
#m_sec2 .m_txt a:hover span{color: var(--color1);}

@media (max-width:768px) {
    #m_sec2 .m_txt a{margin: 4rem auto 0; width: 17rem; height: 5rem;}
}



#m_sec3 .gall_slider {margin:0 -1.2rem;}
#m_sec3 .gall_slider .slick-list {overflow:hidden;}
#m_sec3 .gall_item {padding:0 1.2rem; box-sizing:border-box;}
#m_sec3 .gall_item a {display:block; color:#222;}
#m_sec3 .gall_item .img {width:100%; height:30rem; overflow:hidden; border-radius: 2rem; background:#eee;}
#m_sec3 .gall_item .img img {width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease;}
#m_sec3 .gall_item .txt {padding-top:1.5rem;}
#m_sec3 .gall_item .txt h3 {min-height:5.2rem; font-size:2.3rem; line-height:1.35; letter-spacing:-0.05em; display:-webkit-box; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
#m_sec3 .gall_item .txt p {margin-top:2rem; color:#aaa; font-size:1.6rem;}
#m_sec3 .gall_item a:hover .img img {transform:scale(1.06);}
#m_sec3 .gall_item a:hover .txt h3 {color:var(--color1);}
#m_sec3 .gall_bottom {margin-top:5rem; display:flex; align-items:center; gap:3rem;}
#m_sec3 .gall_progress {height:2px; position:relative; flex:1; overflow:hidden; background:#ddd;}
#m_sec3 .gall_progress span {width:0; height:100%; position:absolute; left:0; top:0; background:var(--color1); transition:width 0.4s ease;}
#m_sec3 .gall_control {display:flex; align-items:center; gap:1rem;}
#m_sec3 .gall_control button {width:5rem; height:5rem; padding:0; position:relative; border:1px solid var(--color1); border-radius:50%; background:#fff; cursor:pointer; transition:background 0.3s ease;}
#m_sec3 .gall_control button:before {content:""; width:1rem; height:1rem; position:absolute; left:50%; top:50%; border-top:2px solid var(--color1); border-right:2px solid var(--color1); transition:border-color 0.3s ease;}
#m_sec3 .gall_control .gall_prev:before {transform:translate(-35%,-50%) rotate(-135deg);}
#m_sec3 .gall_control .gall_next:before {transform:translate(-65%,-50%) rotate(45deg);}
#m_sec3 .gall_control button:hover {background:var(--color1);}
#m_sec3 .gall_control button:hover:before {border-color:#fff;}

@media (max-width:1280px) {
    #m_sec3 .gall_item .txt h3 {font-size: 2rem;}
}

@media (max-width:768px) {
    #m_sec3 .gall_slider {margin:0 -0.8rem;}
    #m_sec3 .gall_item {padding:0 0.8rem;}
    #m_sec3 .gall_item .img {border-radius: 1rem;}
    #m_sec3 .gall_item .txt h3 {min-height:4.8rem; font-size:1.8rem;}
    #m_sec3 .gall_item .txt p {margin-top:1.5rem;}
    #m_sec3 .gall_bottom {margin-top:3.5rem; gap:2rem;}
    #m_sec3 .gall_control button {width:3.6rem; height:3.6rem;}
}

@media (max-width:480px) {
    #m_sec3 .gall_bottom {margin-top:2rem;}
}


#m_sec4 {padding:12rem 0;}
#m_sec4 .contact_banner {width:100%; height:50rem; position:relative; overflow:hidden; border-radius:2rem; border-bottom-right-radius:0;}
#m_sec4 .contact_banner .bg {width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:url('/images/main/m_sec4_bg.webp') no-repeat center; background-size:cover;}
#m_sec4 .contact_banner .bg:after {content:""; width:100%; height:100%; position:absolute; left:0; top:0; background:rgba(0,0,0,0.25);}
#m_sec4 .contact_area {height:100%; padding:8rem 7rem 10rem; position:relative; z-index:2; display:flex; flex-direction:column; justify-content:space-between; box-sizing:border-box;}
#m_sec4 .contact_area .m_txt {display:block;}
#m_sec4 .contact_area .m_txt h4 {color:var(--color2);}
#m_sec4 .contact_area .m_txt h3 {color:#fff;}
#m_sec4 .tel {display:flex; align-items:center; gap:2.5rem;}
#m_sec4 .tel img {width:5rem; height:5rem; object-fit:contain;}
#m_sec4 .tel a {color:#fff; font-family:'Montserrat', sans-serif; font-size:6rem; font-weight:700; line-height:1;}

#m_sec4 .sns_wrap {position:absolute; right:-1.5rem; bottom:-1.5rem; z-index:5; display:flex;}
#m_sec4 .sns_wrap:before {content:""; width:4.6rem; height:5rem; position:absolute; left:0; bottom:1.5rem; background:url('/images/main/contact_radius.png') no-repeat center; background-size:cover; transform:translateX(-100%);}
#m_sec4 .sns_wrap:after {content:""; width:4.6rem; height:5rem; position:absolute; right:1.5rem; top:0; background:url('/images/main/contact_radius.png') no-repeat center; background-size:cover; transform:translateY(-100%);}
#m_sec4 .sns_btn {width:27rem; height:9rem; position:relative; display:flex; align-items:center; justify-content:center; gap:2rem; border:1.5rem solid #fff; border-radius:4.5rem; box-sizing:border-box; font-size:2rem; font-weight:600; color:#fff;backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);}
#m_sec4 .sns_btn:before {content:""; width:calc(100% + 3rem); height:calc(100% + 3rem); position:absolute; left:-1.5rem; top:-1.5rem; border:1.5rem solid #fff; box-sizing:border-box;}
#m_sec4 .sns_btn:not(:last-child) {margin-right:-1rem;}
#m_sec4 .sns_btn:first-child:before {border-radius:4.5rem 0 0 0;}
#m_sec4 .sns_btn .icon {position:relative; z-index:2; display:flex; align-items:center; justify-content:center;}
#m_sec4 .sns_btn .icon img {max-width:2.5rem; max-height:2.5rem;}
#m_sec4 .sns_btn > span:last-child {position:relative; z-index:2; transition:transform 0.3s ease;}
#m_sec4 .sns_btn:hover > span:last-child {transform:translate(0.3rem,-0.3rem);}
#m_sec4 .sns_btn.instagram {color:#fff; background:#074b61;}
#m_sec4 .sns_btn.blog {color:#fff; background:var(--color1);}
#m_sec4 .sns_btn.kakao {color:#fff; background:#333;}

@media (max-width:1280px) {
    #m_sec4 .contact_area {padding:7rem 6rem 10rem;}
    #m_sec4 .tel a {font-size:5rem;}
    #m_sec4 .sns_btn {width:23rem; padding:0 3.5rem;}
}

@media (max-width:1024px) {
    #m_sec4 {padding:9rem 0;}
    #m_sec4 .contact_banner {height:auto; overflow:visible; border-radius:2rem;}
    #m_sec4 .contact_banner .bg {height:42rem; top:0; left:0; transform:none; border-radius:2rem; overflow:hidden;}
    #m_sec4 .contact_banner .bg:after {border-radius:2rem;}
    #m_sec4 .contact_area {height:42rem; padding:6rem 5rem; justify-content:space-between;}
    #m_sec4 .tel {gap:2rem;}
    #m_sec4 .tel img {width:4rem; height:4rem;}
    #m_sec4 .tel a {font-size:4.5rem;}
    #m_sec4 .sns_wrap {width:100%; margin-top:2rem; position:relative; right:auto; bottom:auto; display:flex; gap:1rem;}
    #m_sec4 .sns_wrap:before, #m_sec4 .sns_wrap:after {display:none;}
    #m_sec4 .sns_btn {width:auto; height:7rem; padding:0 2.5rem; flex:1; border:0; border-radius:1.5rem; gap:1.5rem; font-size:1.7rem;}
    #m_sec4 .sns_btn:before {display:none;}
    #m_sec4 .sns_btn:not(:last-child) {margin-right:0;}
    #m_sec4 .sns_btn .icon img {max-width:2.3rem; max-height:2.3rem;}
}

@media (max-width:768px) {
    #m_sec4 {padding:7rem 0;}
    #m_sec4 .contact_banner .bg {height:38rem;}
    #m_sec4 .contact_area {height:38rem; padding:5rem 3rem;}
    #m_sec4 .tel {gap:1.5rem;}
    #m_sec4 .tel img {width:3.5rem; height:3.5rem;}
    #m_sec4 .tel a {font-size:4rem;}
    #m_sec4 .sns_wrap {margin-top:1.5rem; gap:0.8rem;}
    #m_sec4 .sns_btn {height:6rem; padding:0 1.5rem; border-radius:1.2rem; gap:1rem;}
    #m_sec4 .sns_btn .icon img {max-width:2rem; max-height:2rem;}
}

@media (max-width:480px) {
    #m_sec4 .contact_banner .bg {height:34rem;}
    #m_sec4 .contact_area {height:34rem; padding:4rem 2.5rem;}
    #m_sec4 .tel a {font-size:3.4rem;}
    #m_sec4 .sns_wrap {flex-direction:column;}
    #m_sec4 .sns_btn {width:100%; flex:none; height:5.8rem; padding:0 2.5rem; justify-content:flex-start; font-size:1.6rem;}
    #m_sec4 .sns_btn > span:last-child {margin-left:auto;}
}


