@charset "utf-8";

/*메인비주얼*/
.mVisible{position:relative; width:100%; height:60rem;}
.mVisible .text{position:absolute; left:50%; top:5rem; transform:translateX(-50%); z-index:10;}
.mVisible .text h2{font-size:6rem; margin-bottom:0; word-break:keepa-all;}
.mVisible .text p{font-size:2rem; color:#555;}

.mVisible .item{position:absolute;}

.mVisible .left{top:0; left:0; z-index:0;}
.mVisible .middle{bottom:0; left:40%; transform:translateX(-40%); }
.mVisible .right{top:5rem; right:10rem; }

.invisible {
  opacity: 0;
}

.fade-in {
  opacity: 1;
  transition: all 1s ease;
}

@media(max-width:1400px){
.mVisible .text{top:3rem; left:40%; transform:translateX(-40%);}

.mVisible .left{top:10rem; left:-9rem; z-index:0;}
.mVisible .middle{bottom:0; left:40%; transform:translateX(-40%);}
.mVisible .right{top:15rem; right:-9rem;}
}

@media(max-width:1024px){
.mVisible{height:70rem;}
.mVisible .text{left:0; top:0; transform:translateX(0);}

.mVisible .left{top:15rem; left:-30rem; z-index:0;}
.mVisible .middle{bottom:0; left:10%; transform:translateX(-20%);}
.mVisible .right{top:20rem; right:-15rem;}
}

@media(max-width:768px){
.mVisible{height:45rem;}
.mVisible .text h2{font-size:3.2rem; margin-bottom:1.6rem;}
.mVisible .text p{font-size:1.6rem;}

.mVisible .left{width:250px; height:auto; left:-8rem; top:auto; bottom:10rem;}
.mVisible .middle{width:400px; height:auto; left:40%; transform:translateX(-40%);}
.mVisible .right{width:260px; height:auto; top:auto; bottom:0rem; right:-10rem;}
}

@media(max-width:400px){
.mVisible .left{left:-14rem; bottom:10rem;}
.mVisible .middle{left:-5rem; transform:translateX(0);}
.mVisible .right{bottom:5rem; right:-13rem;}
}



/*바로가기 메뉴*/
.mMenu{position:relative; width:100%; height:40rem; }
.mMenu ul{position:absolute; top:-10rem; display:flex; justify-content:space-between; align-items:center;}
.mMenu ul li{display:flex;  flex-direction:column; align-items:center; justify-content:space-between; width:calc(100% / 5); height:37rem; padding:4rem 2rem; background:#fff; border-radius:2.4rem; border:1px solid #dddddd; margin-right:2.4rem; transition:.3s;}
.mMenu ul li:hover, .mMenu ul li:focus, .mMenu ul li:active{background:#12ac20;}
.mMenu ul li .txt{text-align:center; word-break:keep-all;}
.mMenu ul li .txt span{display:block;}
.mMenu ul li:hover .txt span.name, .mMenu ul li:focus .txt span.name, .mMenu ul li:active .txt span.name, .mMenu ul li:hover .txt span.detail, .mMenu ul li:focus .txt span.detail, .mMenu ul li:active .txt span.detail{color:#fff;}
.mMenu ul li .txt span.name{font-size:2.4rem; font-weight:700; color:#222; transition:.3s;}
.mMenu ul li .txt span.detail{font-size:1.6rem; color:#555; transition:.3s; } 
.mMenu ul li .more{display:inline-block; padding:1rem 3.6rem; background:#12ac20; border-radius:3rem; color:#fff; font-size:1.6rem; font-weight:700; white-space:nowrap; transition:.3s;}
.mMenu ul li:hover .more, .mMenu ul li:focus .more, .mMenu ul li:active .more{background:#fff; color:#12ac20; }


@media(max-width:1400px){
.mMenu ul li{height:45rem;}
}

@media(max-width:1024px){
.mMenu{height:auto;}
.mMenu ul{position:relative; top:0; flex-wrap:wrap;}
.mMenu ul li{width:calc((100% / 2) - 2rem); margin-right:2rem; margin-bottom:2rem;}
.mMenu ul li .more{white-space:wrap;}
}

@media(max-width:768px){
.mMenu ul li{height:30rem; padding:2.4rem 1.6rem;}
.mMenu ul li .pic{width:auto; height:7rem;}
.mMenu ul li .pic img{ width:100%; height:100%; object-fit:contain;}
.mMenu ul li .txt span.name{font-size:2rem;}
.mMenu ul li .more{padding:1rem 2rem;}
}