@charset "utf-8";

#visual-section{width:100%; max-height:938px; aspect-ratio:16 / 9; overflow:hidden; position:relative;}
#visual-section .video-box{width:100vw; height:calc(100vw * 9 / 16); top:50%; left:50%; transform:translate(-50%, -50%); position:absolute;}
#visual-section .video-box iframe{width:100%; height:100%; border:0; pointer-events:none;}

@keyframes up{
	0%{transform:translateY(100px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}

.main-visual-dot{position:absolute;left:0;bottom:30px;width:100%;text-align: center;z-index:999;}
.main-visual-dot > .area {width:250px; display:inline-block;}
.visual-dot-list{display:inline-block;vertical-align:top;}
.visual-dot-list li{position: relative; float:left; margin-right:20px; -webkit-transition: all 0.3s; transition: all 0.3s;}
.visual-dot-list li a{cursor:pointer;margin:0px;padding:0px;background:none;vertical-align:top;font-size:18px;color: rgba(255,255,255,1);font-weight: 900;font-family:'Noto Sans KR';}
.visual-dot-list li.slick-current{margin-right: 115px;}
.visual-dot-list li.slick-current:before{position:absolute; left: 30px; top: 50%; margin-top: -1px; content:""; width:90px; height:1px; background-color:rgba(255,255,255,0.3);}
.visual-dot-list li.slick-current:after{position:absolute; left: 30px; top: 50%; margin-top: -1px; content:""; width:0; height:1px; background-color:#fff; animation:dotLoading 4s both;}

@-webkit-keyframes dotLoading{
	from{width:0px;}
	to{width:90px;}
}

@keyframes dotLoading{
	from{width:0px;}
	to{width:90px;}
}

@keyframes up{
	0%{transform:translateY(-30px); opacity: 0;}
	100%{transform:translateY(0); opacity: 1;}
}

#mprd-section{width:100%; max-width:1350px; margin:0 auto; padding:120px 15px;}
#mprd-section:after{clear:both; content:""; display:block;}
#mprd-section .prd-info{position:relative;}
#mprd-section .prd-info:after{clear:both; content:""; display:block;}
#mprd-section .prd-slider{width:50%; overflow:hidden; float:right;}
#mprd-section .prd-slider .swiper-slide{background-color:#e9e9e9;}
#mprd-section .prd-slider .swiper-slide img{max-width:100%;}
#mprd-section .product-sinfo{width:50%; height:590px; padding-top:270px; overflow:hidden; float:left;}
#mprd-section .product-sinfo .swiper-slide{background-color:#fff;}

#mprd-section .top-ptxt{width:50%; top:50px; left:0; position:absolute;}
#mprd-section .top-ptxt h2{margin-bottom:40px; font-family:"Exo"; font-weight:900; font-size:60px; color:#000;}
#mprd-section .top-ptxt h3{margin-bottom:60px; font-size:20px; line-height:140%; color:#000;}
#mprd-section .prd-subj{margin-bottom:10px; font-family:"Exo"; font-weight:700; font-size:48px;}
#mprd-section .prd-cont{height:110px; font-size:18px; line-height:140%; color:#666;}
#mprd-section .prd-more{margin-top:20px;}
#mprd-section .prd-more a{padding:5px; font-family:"Exo"; font-weight:900; font-size:16px; color:#000; border-bottom:2px solid #000; display:inline-block; transition:all 0.2s ease-in-out;}
#mprd-section .prd-more a:hover{color:#112e8d; border-color:#112e8d;}
#mprd-section .slider-btn{bottom:0; left:0; z-index:999; position:absolute;}
#mprd-section .slider-btn:before{clear:both; content:""; display:block;}
#mprd-section .slider-btn .arrow-btn{width:60px; height:60px; margin-right:20px; font-size:20px; border:1px solid #ddd; border-radius:50%; float:left; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease-in-out;}
#mprd-section .slider-btn .arrow-btn:hover{color:#112e8d; border-color:#112e8d;}
#mprd-section .swiper-pagination{width:50%; top:auto; left:auto; bottom:0; left:0; padding-right:50px; font-weight:900; font-size:24px; color:#ddd; text-align:right; position:absolute;}
#mprd-section .swiper-pagination .swiper-pagination-current{font-size:84px;}

@media screen and (max-width:1080px){
	#mprd-section .top-ptxt h2{margin-bottom:30px; font-size:55px;}
	#mprd-section .top-ptxt h3{margin-bottom:50px; font-size:18px;}
	#mprd-section h3 br{display:none;}

	#mprd-section .prd-subj{font-size:40px;}
	#mprd-section .prd-cont{height:80px; font-size:16px;}
}

@media screen and (max-width:980px){
	#mprd-section{padding:100px 15px;}
	#mprd-section .top-ptxt h2{margin-bottom:20px; font-size:50px;}
	#mprd-section .top-ptxt h3{margin-bottom:40px; font-size:16px;}

	#mprd-section .prd-subj{font-size:35px;}
	#mprd-section .prd-cont{font-size:15px;}

	#mprd-section .top-ptxt{top:10px;}
	#mprd-section .product-sinfo{height:450px; padding-top:180px; overflow:hidden; float:left;}

	#mprd-section .swiper-pagination{font-size:22px;}
	#mprd-section .swiper-pagination .swiper-pagination-current{font-size:70px;}
}

@media screen and (max-width:880px){
	#mprd-section{padding:80px 15px;}
	#mprd-section .top-ptxt h2{font-size:45px;}
	#mprd-section .top-ptxt h3{margin-bottom:30px;}

	#mprd-section .prd-subj{font-size:30px;}
	#mprd-section .prd-cont{font-size:14px;}

	#mprd-section .swiper-pagination{font-size:20px;}
	#mprd-section .swiper-pagination .swiper-pagination-current{font-size:60px;}
}

@media screen and (max-width:780px){
	#mprd-section{padding:60px 15px;}
	#mprd-section .top-ptxt h2{font-size:40px;}
	#mprd-section .top-ptxt h3{margin-bottom:30px;}

	#mprd-section .prd-subj{font-size:30px;}
	#mprd-section .prd-cont{font-size:14px;}

	#mprd-section .swiper-pagination{font-size:20px;}
	#mprd-section .swiper-pagination .swiper-pagination-current{font-size:60px;}
}

@media screen and (max-width:680px){
	#mprd-section .prd-slider{width:100%; float:none;}
	#mprd-section .product-sinfo{width:100%; height:auto; margin-top:20px; padding-top:0; padding-bottom:80px; float:none;}
	#mprd-section .top-ptxt h2{font-size:35px;}
	#mprd-section .top-ptxt{width:100%; top:auto; left:auto; position:relative;}
	#mprd-section .slider-btn .arrow-btn{width:50px; height:50px; font-size:18px;}
	#mprd-section .swiper-pagination{width:auto; left:auto; right:0; padding-right:0; font-size:20px;}
	#mprd-section .swiper-pagination .swiper-pagination-current{font-size:40px;}
}

.slide-in-up {
  -webkit-transform: translateY(50px);
  transform: translateY(50px);
  opacity: 0;
  -webkit-transition: opacity ease 1s, -webkit-transform ease 1s;
  transition: opacity ease 1s, -webkit-transform ease 1s;
  transition: opacity ease 1s, transform ease 1s;
  transition: opacity ease 1s, transform ease 1s, -webkit-transform ease 1s;

}
.slide-in-up.on {

  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
  transition-delay: .1s;
}

#mcom-section{padding:120px 15px 150px; text-align:center; background:url("../img/mcom_bg.jpg") no-repeat center center; background-size:cover; overflow:hidden;}
#mcom-section h4{margin-bottom:45px; font-family:"Exo"; font-weight:900; font-size:24px; color:#fff;}
#mcom-section h3{margin-bottom:75px; font-size:45px; line-height:160%; color:#fff;}
#mcom-section .com-menu-box{width:100%; max-width:1350px; margin:0 auto; padding:0 15px;}
#mcom-section .com-menu-box ul{}
#mcom-section .com-menu-box ul:after{clear:both; content:""; display:block;}
#mcom-section .com-menu-box ul li{width:20%; float:left;}
#mcom-section .com-menu-box ul li a{display:block;}
#mcom-section .com-menu-box .off{opacity:1;}
#mcom-section .com-menu-box .on{opacity:0;}
#mcom-section .com-menu-box .icon{width:160px; height:160px; margin:0 auto; border-radius:50%; background-color:rgba(255,255,255,.8); position:relative; display:flex; align-items:center; justify-content:center; transition:all 0.2s ease-in-out;}
#mcom-section .com-menu-box .icon img{top:50%; left:50%; transform:translate(-50%,-50%); position:absolute; transition: opacity 0.3s ease;}
#mcom-section .com-menu-box .txt{margin-top:35px; font-weight:600; font-size:20px; color:#fff;}
#mcom-section .com-menu-box a:hover .icon{background-color:rgba(255,255,255,1) !important;}
#mcom-section .com-menu-box a:hover .off{opacity:0;}
#mcom-section .com-menu-box a:hover .on{opacity:1;}

@media screen and (max-width:980px){
	#mcom-section{padding:100px 15px;}
	#mcom-section h4{margin-bottom:30px; font-size:22px;}
	#mcom-section h3{margin-bottom:50px; font-size:40px;}
}

@media screen and (max-width:880px){
	#mcom-section{padding:80px 15px;}
	#mcom-section h4{margin-bottom:20px; font-size:20px;}
	#mcom-section h3{margin-bottom:40px; font-size:35px;}
	#mcom-section .com-menu-box .icon{width:130px; height:130px;}
	#mcom-section .com-menu-box .icon img{width:80px; height:auto;}
}

@media screen and (max-width:780px){
	#mcom-section{padding:60px 15px;}
	#mcom-section h4{font-size:18px;}
	#mcom-section h3{margin-bottom:30px; font-size:30px;}
	#mcom-section .com-menu-box ul li{width:33.333%; float:left;}
	#mcom-section .com-menu-box ul li:nth-child(4){margin-top:20px; margin-left:16.6666%;}
	#mcom-section .com-menu-box ul li:nth-child(5){margin-top:20px;}
	#mcom-section .com-menu-box .txt{margin-top:20px; font-size:18px;}
}

@media screen and (max-width:680px){
	#mcom-section h3{font-size:25px; letter-spacing:-0.5px;}
	#mcom-section .com-menu-box ul li{width:33.333%; float:left;}
	#mcom-section .com-menu-box ul li:nth-child(4){margin-top:20px; margin-left:16.6666%;}
	#mcom-section .com-menu-box ul li:nth-child(5){margin-top:20px;}
	#mcom-section .com-menu-box .txt{margin-top:20px; font-size:18px;}
}

@media screen and (max-width:480px){
	#mcom-section h3{font-size:25px; letter-spacing:-0.5px;}
	#mcom-section .com-menu-box ul li{width:50%; float:left;}
	#mcom-section .com-menu-box ul li:nth-child(3){margin-top:20px;}
	#mcom-section .com-menu-box ul li:nth-child(4){margin-left:0;}
	#mcom-section .com-menu-box ul li:nth-child(5){margin-left:25%;}
	#mcom-section .com-menu-box .txt{margin-top:20px; font-size:18px;}
	#mcom-section .com-menu-box .icon{width:110px; height:110px;}
	#mcom-section .com-menu-box .icon img{width:60px;}
}


#mnews-section{width:100%; max-width:1350px; margin:0 auto; padding:140px 15px 120px;}
#mnews-section .ntitle-box{text-align:center;}
#mnews-section .ntitle-box h2{margin-bottom:45px; font-family:"Exo"; font-weight:900; font-size:62px;}
#mnews-section .news-list{}
#mnews-section .news-list ul{margin:0 -15px;}
#mnews-section .news-list ul:after{clear:both; content:""; display:block;}
#mnews-section .news-list ul li{width:33.333%; padding:0 15px; float:left;}
#mnews-section .news-list .box{padding-top:30px; border-top:3px solid #ddd; position:relative;}
#mnews-section .news-list .box:after{width:0; height:3px; top:-3px; left:0; background-color:#112e8d; content:""; display:block; position:absolute; transition:all 0.2s ease-in-out;}
#mnews-section .news-list .box .tt-box{margin-bottom:25px; font-weight:600; font-size:18px; color:#112e8d;}
#mnews-section .news-list .box .subj-box{height:75px; margin-bottom:25px; font-weight:600; font-size:24px; line-height:150%; color:#000; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis;}
#mnews-section .news-list .box .date-box{font-size:16px; color:#666;}
#mnews-section .news-list .box .arrow-box{right:0; bottom:-7px; opacity:0; font-size:30px; color:#112e8d; position:absolute; transition:all 0.2s ease-in-out;}

#mnews-section .news-list a:hover .box:after{width:100%;}
#mnews-section .news-list a:hover .box .arrow-box{opacity:1;}

#mnews-section .news-more{margin-top:60px; text-align:center;}
#mnews-section .news-more a{padding:5px; font-family:"Exo"; font-weight:900; font-size:16px; color:#000; border-bottom:2px solid #000; display:inline-block; transition:all 0.2s ease-in-out;}
#mnews-section .news-more a:hover{color:#112e8d; border-color:#112e8d;}

@media screen and (max-width:980px){
	#mnews-section{padding:120px 15px;}
	#mnews-section .ntitle-box h2{margin-bottom:30px; font-size:50px;}
	#mnews-section .news-list .box .tt-box{margin-bottom:20px; font-size:16px;}
	#mnews-section .news-list .box .subj-box{height:70px; margin-bottom:20px; font-size:22px;}
}

@media screen and (max-width:880px){
	#mnews-section{padding:100px 15px;}
	#mnews-section .ntitle-box h2{font-size:45px;}
	#mnews-section .news-list .box .tt-box{margin-bottom:15px; font-size:14px;}
	#mnews-section .news-list .box .subj-box{height:65px; margin-bottom:15px; font-size:20px;}
}

@media screen and (max-width:780px){
	#mnews-section{padding:80px 15px;}
	#mnews-section .ntitle-box h2{font-size:40px;}
	#mnews-section .news-list .box .subj-box{height:auto; font-size:18px;}
	#mnews-section .news-list ul{margin:0;}
	#mnews-section .news-list ul li{width:100%; padding:10px 0; float:none;}
}

@media screen and (max-width:680px){
	#mnews-section{padding:60px 15px;}
	#mnews-section .ntitle-box h2{margin-bottom:10px; font-size:35px;}
	#mnews-section .news-list .box .subj-box{font-size:16px;}
}


#mbtm-section{display:flex;}
#mbtm-section:after{clear:both; content:""; display:block;}
#mbtm-section a{width:100%; padding:100px 0 130px; display:block;}
#mbtm-section .box{width:50%; text-align:center; display:flex; align-items:center; position:relative; overflow:hidden;}
#mbtm-section .box .bg{width:100%; height:100%; top:0; left:0; z-index:1; background-repeat:no-repeat; background-position:center center; background-size:cover; transition: transform 0.8s ease; position:absolute;}
#mbtm-section .box h3{margin-bottom:25px; z-index:10; font-family:"Exo"; font-weight:900; font-size:40px; line-height:100%; color:#fff; position:relative;}
#mbtm-section .box h4{z-index:20; font-size:18px; line-height:100%; color:#fff; position:relative;}
#mbtm-section .sb1 .bg{background-image:url("../img/mbtm_bg1.jpg");}
#mbtm-section .sb2 .bg{background-image:url("../img/mbtm_bg2.jpg");}
#mbtm-section .box:hover .bg{transform: scale(1.1);}

@media screen and (max-width:980px){
	#mbtm-section a{padding:80px 0 100px;}
}

@media screen and (max-width:880px){
	#mbtm-section a{padding:60px 0;}
	#mbtm-section .box h3{margin-bottom:20px; font-size:35px;}
	#mbtm-section .box h4{font-size:16px;}
}

@media screen and (max-width:780px){
	#mbtm-section a{padding:40px 0;}
	#mbtm-section .box h3{margin-bottom:15px; font-size:30px;}
}

@media screen and (max-width:680px){
	#mbtm-section{display:block;}
	#mbtm-section .box{width:100%; display:block;}
}