@charset "utf-8";

.mcnt1{overflow: hidden; position: relative;width: 100%; max-width:100%;  height: 960px !important; transition:.3s; z-index: 20;}
.mcnt1 .item{width: 100%; height: 960px; position: relative; overflow: hidden; }
.mcnt1 .item .mv_img{width: 100%; height: 100%;}
.mcnt1 .item .mv_img img{width: 100%; height: 100%; object-fit:cover; transition:2.2s;} 
.mcnt1 .active .mv_img img{transform:scale(1.05) rotate(.001deg); }
.mcnt1 .active .mv_img{transform:scale(1.05) rotate(.001deg); }
.mcnt1 .m_txt{position: absolute; left: 0; top: 0; width: 100%; height: 100%;  align-items:center; box-sizing: border-box;  }
.mcnt1 .m_txt .box {display: flex; align-items: flex-start; justify-content: center; width: 100%; height: 100%;  	flex-direction: column; text-align: left; padding-bottom: 6px;}
.mcnt1 .m_txt .box h3{position: relative; color: #FFF; font-size: 64px; font-weight: 700; line-height: 130%;  opacity: 0; filter:blur(10px); transition:.4s; top: 30px;   margin-bottom: 20px; margin-left: -3px;}
.mcnt1 .m_txt .box p{color: #FFF; font-size: 30px; font-weight: 600; line-height: 160%; position: relative; opacity: 0; filter:blur(10px); transition:.4s .4s; top: 30px;  margin-left: -3px;}
.mcnt1 .active .m_txt .box h3,
.mcnt1 .active .m_txt .box p{opacity: 1;  top: 0; filter:blur(0px); }
.mcnt1 .owl-dots{display: none;}
.mv-controll{position: absolute; left: 50%; margin-left: -796px;bottom: 290px; z-index: 100; display: flex; align-items: center; gap:16px; }
.mv-controll .mv-slider-bt{cursor: pointer;}
.mv-controll .dot{width: 219px; height: 2px; border-radius: 100px; overflow: hidden;}
.mv-controll .dot .line-bar{position: relative; width: 100%; height: 100%; background: rgba(255,255,255,0.3);}
.mv-controll .dot .line-bar i{position:absolute;left:0;top:0;width:0%;height:100%;background:#fff;border-radius:100px;}
.mv-controll .dot .line-bar i.active{animation: mvBar 8s linear forwards;}
.mv-controll .dot .line-bar i.stop{animation-play-state: paused;}
@keyframes mvBar{from { width:0%; }to{ width:100%; }}
.mv-controll .mv-btn-box{position: relative; top: 2px; display: flex; align-items: flex-start; gap:4px; } 
.mv-controll .mv-btn{position: relative; width: 24px; height: 24px; }
.mv-controll .mv-btn span{position: absolute; left: 0; top: 0; line-height: 0; cursor: pointer;  z-index: 10; opacity: 1; z-index: 0; line-height: 0;}
.mv-controll .mv-btn span img{line-height: 0;}
.mv-controll .mv-btn span:last-child{}
.mv-controll .mv-btn span.on{opacity: 0; z-index: -1;}
.mv-scroll{position: absolute; left: 50%; bottom: 0; text-align: center; z-index: 1000; display: flex; flex-direction: column; align-items:center; justify-content: center; translate: -50% 0; gap:5px; cursor: pointer;}
.mv-scroll p{color: #FFF; font-family: 'Montserrat'; font-size: 16px; font-weight: 600; line-height: 180%;  }
.mv-scroll:hover p{
	span{animation: mvScrollText .4s linear infinite forwards; position: relative; }
	span:nth-child(2n+2){animation: mvScrollText2 .4s linear infinite forwards;}
}
@keyframes mvScrollText{0% {top: 0px;}50%{top: 1px;} 100%{top: 0px;}}
@keyframes mvScrollText2{0% {top: 0px;}50%{top: -1px;} 100%{top: 0px;}}
.mv-scroll i{position: relative; width: 3px; height: 50px; background: rgba(85, 85, 85, 0.60); overflow: hidden; margin-left: -1px;}
.mv-scroll i:after{position: absolute; content: ''; width: 3px; height: 14px; background: #fff; left: 0; top: 0; animation: mvScroll 1s linear infinite forwards;}
@keyframes mvScroll{0% { top: 0; height: 14px; }70%{ top: 60%; height:30px; } 100%{top: 0; height:14px; }}

.main-tit{display: flex; flex-direction: column; align-items:center; justify-content: center; text-align: center; gap:20px; margin-bottom: 70px;}
.main-tit h3{color: #070707; font-size: 50px; font-weight: 700; line-height: 120%; }
.main-tit h3 span{position: relative; display: inline-block; padding-right: 27px;}
.main-tit h3 span:after{position: absolute; content: ''; width: 11px; height: 30px; background: url('/Deokseon/img/main/main-tit-git.png') center no-repeat; right: 0; top: 0;}
.main-tit p{color: #666; font-size: 22px; font-weight: 400; line-height: 160%; }

.mcnt2{position: relative; padding-top: 158px; padding-bottom: 200px; z-index: 1;}
.mcnt2:before{position: absolute; content: ''; width: 227px; height: 608px; background: url('/Deokseon/img/main/mcnt2-bg.png') center no-repeat; right: -30px; top: 140px;}

.mcnt2 ul{display: flex; justify-content: space-between; gap:70px;}
.mcnt2 ul > li{flex:1; overflow: hidden; transition:.3s;}
.mcnt2 ul > li > a{width: 100%; height: 476px; position: relative; box-sizing: border-box; }
.mcnt2 ul > li > a:after{position: absolute; content: ''; width: 48px; height: 48px; background: url('/Deokseon/img/main/mcnt2-more.png') center no-repeat; right: 30px; top: 30px; z-index: 3; opacity: 0; transition:.3s; translate:-20% 20%;}
.mcnt2 ul > li > a figure{width: 100%; height: 100%;}
.mcnt2 ul > li > a figure img{width: 100%; height: 100%; object-fit:cover;}
.mcnt2 ul > li > a .tbx{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1;  padding: 36px; padding-right: 20px; box-sizing: border-box; z-index: 10;}
.mcnt2 ul > li > a .tbx h4{color: #FFF;font-size: 50px;font-weight: 700;line-height: 120%; transition:.3s; margin-bottom: 0;}
.mcnt2 ul > li > a .tbx p{color: #FFF;font-size: 26px;font-weight: 600;line-height: 160%; transition:.3s; opacity: 0;}
.mcnt2 ul > li > a .tbx:before{position: absolute; content: ''; width: 100%; height: 100%;background:linear-gradient(180deg,rgba(0, 0, 0, 0.00) 34.45%,rgba(0, 0, 0, 0.50) 70.59%),linear-gradient(212deg,rgba(45, 145, 190, 0.00) 52.14%,rgba(45, 145, 190, 0.40) 79.38%);background-blend-mode: normal, multiply;left: 0; bottom: 0; z-index: -1; opacity: 0; translate:0 50%; transition:.6s;}
.mcnt2 ul > li:hover{border-radius: 30px;
	a:after{ opacity: 1; translate:0% 0%;}
	a .tbx:before{opacity: 1; translate:0 0; }
	a .tbx h4{font-size: 40px; line-height: 160%; margin-bottom: 11px;}
	.tbx p{opacity: 1; margin-bottom: 0 !important;}
}

.mcnt3-wrap{position: relative; background: #F5F7F8;	padding-top: 140px; padding-bottom: 200px; z-index: 1; overflow: hidden;}
.main-board{display: flex; flex-wrap:wrap; justify-content: space-between; gap:70px;}
.main-board > *{flex:1; box-sizing: border-box;}
.main-board > .lbx{background: #fff; display: flex; flex-direction: column; padding: 45px 40px 40px; max-width:760px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10);}
.main-board > .lbx .tit{display: flex; align-items:center; justify-content: space-between;	margin-bottom: 20px;}
.main-board > .lbx .tit h4{color:#25659E; font-size: 32px; font-weight: 700; }
.main-board > .lbx .tit .more a{display: flex; align-items:center; gap:8px; color: #666; font-size: 18px; font-weight: 400; line-height: 160%; }
.main-board > .lbx .tit .more svg{background: #CCC; border-radius: 50%;}
.main-board > .lbx ul{margin-left: 13px; display: flex; flex-direction: column; gap:10px; }
.main-board > .lbx ul > li > a{position: relative; display: flex; align-items:center; color: #222; font-size: 22px; font-weight: 400; line-height: 160%; transition:.3s; height: 50px; padding-left: 33px; transition:.3s; margin-left: -13px; } 
.main-board > .lbx ul > li > a:before{position: absolute; content: ''; width: 7px; height: 7px; background: #222; border-radius: 50%; left: 12px; top: 50%; margin-top: -3px;}
.main-board > .lbx ul > li > a p{flex:1; }
.main-board > .lbx ul > li > a span{color: #999; font-size: 16px; font-weight: 400; line-height: 160%; width: 98px; }
.main-board > .lbx ul > li:hover > a{background: #F5F7F8; color: #070707; font-weight: 600;}
.main-board > .rbx ul{display: flex; flex-wrap:wrap; gap:44px;}
.main-board > .rbx ul li{flex:1; }
.main-board > .rbx ul li > a{display: flex; flex-direction: column; gap:26px; }
.main-board > .rbx ul li > a figure{overflow: hidden;}
.main-board > .rbx ul li > a figure img{transition:.6s; }
.main-board > .rbx ul li > a .tbx{display: flex; flex-direction: column; gap:26px; }
.main-board > .rbx ul li > a .tbx > p{display: flex; align-items:center; color: #222; font-size: 24px; font-weight: 600; line-height: 140%; height: 68px;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.main-board > .rbx ul li > a .tbx > .info{display: flex; flex-wrap:wrap; justify-content: space-between; align-items:center; height: 57px; color: #666; font-size: 18px; font-weight: 400; line-height: 160%; border-top: 1px solid #ddd;}
.main-board > .rbx ul li > a .tbx > .info span{display: flex; align-items:center; gap:8px; }
.main-board > .rbx ul li > a .tbx > .info span svg{background: #CCC; border-radius: 50%;}
.main-board > .rbx ul li:hover > a figure img{scale:1.05; }

.mcnt3-wrap .o-box > *{position: absolute; z-index: -1;}
.mcnt3-wrap .o-box > * img{animation: infrollor 18s linear infinite forwards;}
.mcnt3-wrap .o-box > .roll{left: -75px; top: -230px; }
.mcnt3-wrap .o-box > .roll2{right: 27px; top: 157px;}

@keyframes infrollor {0% {rotate: 0;} 100%{rotate:360deg} }