@charset "utf-8";

.main-visual{position: relative;   }
.main-visual .mv_owl { height: 100vh; }
.main-visual .mv_owl .item{width: 100%; height: 100vh; position: relative; overflow: hidden; }
.main-visual .mv_owl .item .mv_img{width: 100%; height: 100%;; overflow: hidden; position: relative;}
.main-visual .mv_owl .item .mv_img video{width: 100%; height: 100%; object-fit: cover;}
.main-visual .mv_owl .active .item .mv_img img{scale:1.02;}
.main-visual .mv_owl .m_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items:center;  box-sizing: border-box;  z-index: 15; text-align: left; }
.main-visual .mv_owl .m_txt .box{max-width:1316px; padding: 0 20px; width: 100%; box-sizing: border-box; margin: 0 auto; padding-bottom: 40px;}
.main-visual .mv_owl .m_txt h3{font-family: 'YeogiOttaeJalnanGothic'; color: #FFF;font-size: 54px;font-weight: 400;line-height: 75.7px;letter-spacing: -1.08px; margin-bottom: 23px; position: relative; translate:0 100px; filter:blur(5px); opacity: 0; transition:.6s .6s;}
.main-visual .mv_owl .m_txt .box  span{display: inline-flex;padding: 6px 28px;justify-content: center;align-items: center;gap: 10px; color: #FFF; font-size: 22px;font-weight: 600;line-height: normal;letter-spacing: -0.44px; background: #B24422; position: relative; translate:0 50px; filter:blur(5px); opacity: 0; transition:.6s .9s;}


.m-visual .visual {width: 100%; height: 100vh; position: relative; }
.m-visual .visual .swiper-wrapper {transition-timing-function: linear;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop {width: 100%; height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; transition: all 2s ease;}
.m-visual .visual .swiper-wrapper .swiper-slide .backdrop video{width: 100%; height: 100%; object-fit: cover;}
.m-visual .visual .swiper-wrapper .swiper-slide .wrap1 {width: 100%; height: 100%; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.m-visual .visual .swiper-wrapper .swiper-slide .wrap1 h3 {position: absolute; bottom:250px; right: 20px; font-size: 50px; line-height: 1.63; color: #fff; font-weight: 500; text-align: right;  width: 100%; opacity: 0; letter-spacing: -1px; text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.34); transition: all 1.2s ease .1s;}
.m-visual .visual .swiper-wrapper .swiper-slide .wrap1 h3 > strong {font-size: 700;}
.m-visual .visual .swiper-wrapper .swiper-slide-active .wrap1 h3 {bottom: 210px; opacity: 1;}


/* .main-visual .mv_owl .active {
	.m_txt h3,
	.m_txt .box  span{translate:0 0px; filter:blur(0px); opacity: 1;}
} */

.mcnt1{background: #f2f2f2 url(../img/main/mcnt1-bg.jpg) center top no-repeat;}
.mcnt1 .wrap1{display: flex; justify-content: space-between; gap:64px; padding-top: 115px;}
.mcnt1 .wrap1 .lbx {display: flex; flex-direction: column; gap:20px; padding-top: 26px;}
.mcnt1 .wrap1 .lbx small{color: #297BB7;font-size: 14px;font-weight: 700;line-height: 23.1px; /* 165% */letter-spacing: 4.9px;}
.mcnt1 .wrap1 .lbx h4{color: #FFF;font-size: 40px;font-weight: 600;line-height: 67.7px; /* 169.25% */letter-spacing: -0.8px;}
.mcnt1 .wrap1 .lbx p{color: #FFF;font-size: 18px;font-weight: 400;line-height: 28.5px; /* 158.333% */letter-spacing: -0.36px;}
.mcnt1 .wrap1 .rbx > ul{display: flex; gap:20px; max-width: 1260px; width: 100%;}
.mcnt1 .wrap1 .rbx > ul > li{flex:1; position: relative; }
.mcnt1 .wrap1 .rbx > ul > li:nth-child(odd){margin-top: 73px;}

.mcnt1 .wrap1 .rbx > ul > li a {display: block; box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.15);}
.mcnt1 .wrap1 .rbx > ul > li figure{overflow: hidden; }
.mcnt1 .wrap1 .rbx > ul > li figure img{transition:.8s;}
.mcnt1 .wrap1 .rbx > ul > li .tbx{display: flex; flex-direction: column; gap:13px; padding: 20px 24px 40px 30px; background-color: #fff;}
.mcnt1 .wrap1 .rbx > ul > li .tbx b{position: relative; color: #000;font-size: 20px;font-weight: 600;line-height: normal;letter-spacing: -0.4px; width: fit-content; padding-right: 30px;}
.mcnt1 .wrap1 .rbx > ul > li .tbx b::after {position: absolute; content:''; width: 16px; height: 2px; background-color: #e60012; top: 50%; right: 0; transform: translateY(-50%);}
.mcnt1 .wrap1 .rbx > ul > li .tbx p{color: rgba(102, 102, 102, 1);font-size: 16px;font-weight: 500;line-height: 28.1px; /* 175.625% */letter-spacing: -0.32px; word-break: break-all;}
.mcnt1 .wrap1 .rbx > ul > li:hover figure img{scale:1.04}

.mcnt2{background: #f2f2f2; display: flex; align-items: flex-start; justify-content: space-between; gap:23px; padding-top: 188px; padding-bottom: 210px;}
.mcnt2 big{margin-top: -188px;}
.mcnt2 .flex{width: 91.66%; display: flex; position: relative;}
.mcnt2 .flex > *{width: 50%;}
.mcnt2 .flex > .lbx{background: #fff; display: flex; align-items:center; justify-content: center;}
.mcnt2 .flex > .lbx .tbx{display: flex; flex-direction: column; gap:30px;}
.mcnt2 .flex > .lbx .tbx .logo {display: flex; align-items: center; font-size: 40px; color: #000; font-weight: 600; line-height: 1.69; letter-spacing: -.8px;}
.mcnt2 .flex > .lbx .tbx .logo > i {font-size: 30px; font-weight: 400; font-style: normal; line-height: 35.9px; display: block;}
.mcnt2 .flex > .lbx .tbx .logo > img {display: block; max-width: 100%; margin-bottom: 28px;}
.mcnt2 .flex > .lbx .tbx .p-box{display: flex; flex-direction: column; gap:36px;}
.mcnt2 .flex > .lbx .tbx .p-box p{color: #000;font-size: 20px;font-weight: 400;line-height: 35.9px; /* 179.5% */letter-spacing: -0.4px;}
.mcnt2 .flex > .rbx img{width: 100%; height: 100%; object-fit:cover;}

.mcnt2 .flex .more {position: absolute; bottom: -74.5px; left: 50%; transform: translateX(-50%); width: 149px; height: 149px;}
.mcnt2 .flex .more a {display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; position: relative;}
.mcnt2 .flex .more a::after {position: absolute; content:''; width: 100%; height: 100%; background: url(../img/main/ico_txt.png) 50% 50% no-repeat; background-size: auto; top: 0; left: 0; animation: rotate 10s linear infinite;}
.mcnt2 .flex .more a img { border-radius: 50%; overflow: hidden; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); transition: all .3s ease-out;}
.mcnt2 .flex .more a:hover img {transform: rotate(45deg);}

@keyframes rotate {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}