@charset "utf-8";

.main .main-visual{position: relative; height: 100vh; width: 100%;}
.main .main-visual video{position: absolute; width: 100%; height: 100%; object-fit:cover;; left: 0; top: 0;}
.main .main-visual .tbx{position: relative; display: flex; align-items:center; justify-content: center; flex-direction: column; z-index: 10; width: 100%; height: 100%; text-align: center;}  	  
.main .main-visual .tbx h3{font-family: 'GMarketSans'; font-size: 72px; line-height: 90px; letter-spacing: -0.04em; color: #fff; font-weight: 700; position: relative; translate:0 100px; opacity: 0; filter:blur(5px); transition:.8s;}
.main .main-visual .tbx p{font-size: 32px; line-height: 1.5; letter-spacing: -0.03em; color: #fff; font-weight: 500; margin-top: 10px; position: relative; translate:0 100px; opacity: 0; filter:blur(5px); transition:.8s .4s;}
.main .main-visual .scroll{position: absolute; left: 50%; bottom: 65px; display: flex; align-items:center; justify-content: center; margin-left: -51px; cursor: pointer; z-index: 1005;}
.main .main-visual .scroll span{position: relative; transition:.3s;}
.main .main-visual .scroll:hover span{translate:0 5px}
.main .main-visual .scroll:before{position: absolute; content: ''; width: 100%; height: 100%; background: url(../img/main/scroll-bt-bg.png) center no-repeat; left: 0; top: 0; animation: rolling 8s linear  infinite;} 
@keyframes rolling {
    0% {rotate:0deg; }
    100% { rotate:-360deg;}
}

.main .main-visual.on .tbx h3,
.main .main-visual.on .tbx p{ translate:0 0px; opacity: 1; filter:blur(0px);  }
.main-tit h4{position: relative; display: inline-block; font-family: 'GMarketSans'; font-size: 62px; line-height: 1; letter-spacing: -0.04em; color: #111; font-weight: 700; padding-right:33px; margin-bottom: 28px;}
.main-tit h4:after{position: absolute; content: ''; width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 4px solid #114e4e; right: 0; top: 0;}
.main-tit p{font-size: 22px; line-height: 1; letter-spacing: -0.03em; color: #666; }
.mcnt1{padding-top: 160px;}
.mcnt1 .flex{display: flex; background: #f8f8f8; margin-top: 75px;}
.mcnt1 .flex > *{width: 50%; box-sizing: border-box; height: 636px;}
.mcnt1 .flex > *:first-child{border-right: 1px solid #eaeaea;}
.mcnt1 .flex > * > a{position: relative; padding: 100px 20px; display: block; text-align: center; width: 100%; height: 100%;}
.mcnt1 .flex > * > a .tbx {margin-top: 50px;}
.mcnt1 .flex > * > a .tbx p{ font-family: 'GMarketSans'; font-size: 36px; line-height: 1.5; letter-spacing: -0.03em; color: #333; font-weight: 700; transition:.3s;}
.mcnt1 .flex > * > a .over{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(17,78,78,0.9); display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 80px; opacity: 0; transition:.4s;}
.mcnt1 .flex > * > a .over p{font-size: 36px; line-height: 1.5; letter-spacing: -0.03em; font-weight: 600; color: #fff; margin-bottom: 37px;}
.mcnt1 .flex > * > a .over span{display: flex; gap:29px; align-items:center; justify-content: center;	width: 210px; height: 76px; border: 1px solid #fff; border-radius: 50px; box-sizing: border-box;	font-size: 20px; line-height: 1; letter-spacing: -0.03em; color: #fff; font-weight: 600; margin: 0 auto; transition:.3s;}
.mcnt1 .flex > * > a .over span i{width: 6px; height: 6px; background: #fff; border-radius: 50%; }
.mcnt1 .flex > * > a:hover{
	.tbx p{opacity: 0;}
	.over{opacity: 1;}
	.over span:hover{letter-spacing: 0.05em;}
}

.mcnt2{padding-top: 180px; display: flex; flex-wrap:wrap; align-items:center;}
.mcnt2 .lbx{width: 52.77%;}
.mcnt2 .lbx .btn-box{display: flex; gap:8px;  margin-top: 65px;}
.mcnt2 .lbx .btn-box > *{display: flex; align-items:center; justify-content: center; width: 60px; height: 60px; border: 1px solid #ddd; border-radius: 50%; cursor: pointer; transition:.3s;}
.mcnt2 .lbx .btn-box > *:hover {opacity: 0.8;}

.mcnt2 .lbx .btn-box > a{border: none; background: #114e4e;}
.mcnt2 .rbx{width: 47.23%; position: relative; border-radius: 25px; overflow: hidden;}
.mcnt2 .rbx .bar{position: absolute; left: 0; bottom: 0; width: 100%; height: 6px; background: #eaeaea; z-index: 10; }
.mcnt2 .rbx .bar span{position: absolute; width: 0%; height: 100%; background: #006932; left: 0; bottom: 0;}
.mcnt2 .owl-nav,
.mcnt2 .owl-dots{display: none;}
.mcnt3{display: flex; flex-wrap:wrap; align-items:center; flex-direction: row-reverse; justify-content: space-between; padding-top: 180px;}
.mcnt3 .lbx{width: 52.77%; box-sizing: border-box; padding-left: 140px;;}
.mcnt3 .lbx .link-box {margin-top: 60px;}
.mcnt3 .lbx .link-box > a{display: flex; justify-content: center; align-items:center; gap:28px; width: 210px; height: 76px; border-radius: 50px; border: 1px solid #114e4e; font-size: 20px; line-height: 34px; letter-spacing: -0.03em; color: #114e4e; font-weight: 600; transition:.3s;}
.mcnt3 .lbx .link-box > a i{width: 6px; height: 6px; background: #114e4e; border-radius: 50%; transition:.3s;}
.mcnt3 .lbx .link-box > a:hover{background: #114e4e; color: #fff;
	i{background: #fff;}
}
.mcnt3 .rbx{width: 47.23%;}

.mcnt4{padding-top: 160px;;}	
.mcnt4 ul {display: flex; gap:40px;}
.mcnt4 ul > li {flex:1;height: 320px;perspective: 1000px; }
.mcnt4 ul > li:nth-child(1) .front{background: url(../img/main/mcnt4-f1.jpg) center/cover no-repeat;}
.mcnt4 ul > li:nth-child(2) .front{background: url(../img/main/mcnt4-f2.jpg) center/cover no-repeat;}
.mcnt4 ul > li:nth-child(3) .front{background: url(../img/main/mcnt4-f3.jpg) center/cover no-repeat;}
.mcnt4 ul > li:nth-child(4) .front{background: url(../img/main/mcnt4-f4.jpg) center/cover no-repeat;}
.mcnt4 ul > li > a {position: relative;width: 100%; height: 100%;display: block;border-radius: 20px;transform-style: preserve-3d;transition: transform .6s; cursor: default; pointer-events: none;}
.mcnt4 .front,
.mcnt4 .back {position: absolute;width: 100%; height: 100%;top: 0; left: 0;display: flex;align-items: center;justify-content: center;flex-direction: column;backface-visibility: hidden;  /* 뒤집힌 면 안 보이게 */border-radius: 20px; text-align: center;}
.mcnt4 .front {padding-top: 30px;}
.mcnt4 .front i {height: 60px; display: flex;justify-content: center; align-items: center;}
.mcnt4 .front p {font-size: 26px; line-height: 34px;letter-spacing: -0.03em; color: #fff;font-weight: 600; margin-top: 22px;}
.mcnt4 .back {background: url(../img/main/mcnt4-bg2.jpg) center/cover no-repeat;transform: rotateX(180deg);  gap:17px; }
.mcnt4 .back p {font-size: 26px; line-height: 34px;color: #fff; font-weight: 600;}
.mcnt4 .back span {font-size: 18px; line-height: 28px;color: #fff;}
.mcnt4 ul > li:hover > a {transform: rotateX(180deg);}

.mcnt5{margin-top: 180px; background: url(../img/main/mcnt5-bg.jpg) center / cover no-repeat; height: 570px; }
.mcnt5 .wrap2{display: flex; justify-content: space-between; align-items:center; height: 100%;}
.mcnt5 .wrap2 .lbx .main-tit > *{color: #fff;}
.mcnt5 .wrap2 .lbx .main-tit > h4:after{border: 3px solid #fff;}
.mcnt5 .wrap2 .lbx .main-tit > p{color: rgba(255,255,255,0.7);}
.mcnt5 .wrap2 .rbx .link-box > a{display: flex; align-items:center; justify-content: center; gap:56px; width: 210px; height: 76px; border: 1px solid #fff; border-radius: 50px; font-size: 20px; line-height: 1; letter-spacing: -0.03em; color: #fff; font-weight: 600; transition:.3s;}
.mcnt5 .wrap2 .rbx .link-box > a i{width: 6px; height: 6px; border-radius: 50%; background: #fff;  transition:.3s;}
.mcnt5 .wrap2 .rbx .link-box > a:hover{background: #114e4e; border: 1px solid #114e4e; }