/* common */
#customNav{position: fixed;top: 20%;left: 0;transform:translateY(-50%);z-index: 1;display: none;transition:all .3s;}
#customNav li{position: relative;padding: 10px 0;box-sizing:border-box;}
#customNav li span{position: relative;top: -3px;display: inline-block;width: 60px;height: 1px;margin-right: 20px;}
#customNav li span em{display: inline-block;width: 0;height: 100%;background: #0099d3;transition:all .5s;}
#customNav li a{font-size: 13px;font-weight: 400;color: #000;}
#customNav li.active a{font-weight: 700;color: #0099d3;}
#customNav li.active span{width: 60px;}
#customNav li.active span em{width: 60px;transition:all .5s;}

#fullpage{position: relative;width: 100%;overflow: hidden;/* background: url("../../img/main/mconLogoBg.png") no-repeat right 50px top 58%; */}

#customNav.mcon04Top{top: 66%;transition:all .3s;}
#customNav.mcon04Top li a{color: #fff;}
#customNav.mcon04Top li.active a{font-weight: 700;color: #0099d3;}








/* mcon01 */
.mcon01{position: relative;width: 100%;height: 100vh;}


/* desktop */
.mcon01 .pcWrap{position: relative;z-index: 1;}
.mcon01 .pcWrap .bg{position: relative;width: 100%;height: 100vh;background: url("../../img/main/mcon01Bg.jpg") no-repeat center /cover;}
.mcon01 .pcWrap .mcon01Wrap{position: absolute;top: 0;left: 50%;transform:translateX(-50%);width: 100%;max-width:1720px;height: 100%;}

.mcon01 .pcWrap .mcon01Wrap .txt{position: relative;width: 100%;max-width:580px;height: 100%;z-index: 1;}
.mcon01 .pcWrap .mcon01Wrap .txt div{position: absolute;top: 50%;left: 33px;transform:translateY(-50%);}
.mcon01 .pcWrap .mcon01Wrap .txt p{font-size: 24px;font-weight: 700;color: #fff;padding-bottom: 25px;text-transform: uppercase;}
.mcon01 .pcWrap .mcon01Wrap .txt h2{font-size: 64px;font-weight: 300;color: #fff;line-height: 1.3;padding-bottom: 70px;white-space: nowrap;}
.mcon01 .pcWrap .mcon01Wrap .txt a{font-size: 13px;font-weight: 500;color: #fff;text-transform: uppercase;letter-spacing: 1px;}
.mcon01 .pcWrap .mcon01Wrap .txt a span{position: relative;top: -3px;display: inline-block;width: 50px;height: 2px;margin-left: 10px;}
.mcon01 .pcWrap .mcon01Wrap .txt a span em{display: block;width: 0;height: 100%;background: #fff;animation:stretch 1s alternate infinite both;}

.mcon01 .pcWrap .mcon01Wrap .info{position: absolute;top: 0;left: 0;width:100%;height: 100%;z-index: 1;}
.mcon01 .pcWrap .mcon01Wrap .info ul{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);width: 100px;height: 100px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li{position: absolute;}
.mcon01 .pcWrap .mcon01Wrap .info ul li a{font-size: 18px;font-weight: 400;color: #fff;white-space: nowrap;display: flex;align-items:center;}

.mcon01 .pcWrap .mcon01Wrap .info ul li .dot{position: relative;width: 40px;height: 40px;display: block;}
.mcon01 .pcWrap .mcon01Wrap .info ul li .dot .pulse1{position: absolute;top: -9px;left: -9px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li .dot .pulse1 img{-webkit-animation: ping1 2s ease-in-out infinite both;animation: ping1 2s ease-in-out infinite both;}
.mcon01 .pcWrap .mcon01Wrap .info ul li .dot .pulse2{position: absolute;top: -5px;left: -5px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li .dot .pulse2 img{-webkit-animation: ping1 2s ease-in-out infinite both;animation: ping1 2s ease-in-out infinite both;}

.mcon01 .pcWrap .mcon01Wrap .info ul li .line{position: relative;display: inline-block;width: 60px;height: 1px;background: rgba(255,255,255,.4);}
.mcon01 .pcWrap .mcon01Wrap .info ul li .infoTxt{position: relative;}

.mcon01 .pcWrap .mcon01Wrap .info ul li .focusBox{position: absolute;top: calc(50% - 190px);left: -420px;width: 380px;height: 380px;background: url("../../img/main/mcon01Focus01.png") no-repeat center;border-radius:100rem;overflow: hidden;cursor: pointer;transform:scale(0,0);transition:all .3s;}
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(2) .focusBox{ background: url("../../img/main/mcon01Focus02.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(3) .focusBox{ background: url("../../img/main/mcon01Focus03.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(4) .focusBox{ background: url("../../img/main/mcon01Focus06.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(5) .focusBox{ background: url("../../img/main/mcon01Focus07.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(6) .focusBox{ background: url("../../img/main/mcon01Focus08.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li:nth-child(7) .focusBox{ background: url("../../img/main/mcon01Focus05.png") no-repeat center; }
.mcon01 .pcWrap .mcon01Wrap .info ul li .focusBox.active{display: block;transform:scale(1,1);transition:all .3s;}
.mcon01 .pcWrap .mcon01Wrap .info ul li .focusBox p{position: absolute;bottom: 55px;left: 0;width: 100%;font-family: 'Noto Sans KR';font-size: 20px;font-weight: 500;color: #fff;text-align: center;}

.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap01{top: -204px;left: 185px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap02{top: -140px;left: 127px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap03{top: -74px;left: 80px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap04{top: 5px;left: 48px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap05{top: 90px;left: 28px;}
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap06{top: 175px;left: 15px;} 
.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap07{top: 262px;left: 2px;} 


.mcon01 .pcWrap .mcon01Wrap .info ul li.focusWrap01 .focusBox{top: calc(50% - 145px);left: -460px;}


/* mobile */
.mcon01 .mobWrap{position: relative;width: 100%;height: 600px;overflow: hidden;display: none;}
.mcon01 .mobWrap .bg{position: relative;width: 100%;height: 600px;}
.mcon01 .mobWrap .bg01{background: url("../../img/main/mcon01Bg.jpg") no-repeat center /cover;}
.mcon01 .mobWrap .bg02{background: url("../../img/main/mcon01Bg.jpg") no-repeat center /cover;}
.mcon01 .mobWrap .bg03{background: url("../../img/main/mcon01Bg.jpg") no-repeat center /cover;}
.mcon01 .mobWrap .txt{position: absolute;top: calc(50% + 40px);left: 50%;transform:translate(-50%,-50%);}
.mcon01 .mobWrap .txt .smallTxt{font-size: 24px;font-weight: 700;color: #fff;padding-bottom: 25px;text-transform: uppercase;overflow: hidden;}
.mcon01 .mobWrap .txt .smallTxt span{display:inline-block;transform:translate3d(0, 150%, 0);}
.mcon01 .mobWrap .txt .bigTxt{font-size: 45px;font-weight: 300;color: #fff;line-height: 1.3;white-space: nowrap;overflow: hidden;}
.mcon01 .mobWrap .txt .bigTxt span{display:inline-block;transform:translate3d(0, 150%, 0);}
.mcon01 .mobWrap .txt a{display: block;font-size: 13px;font-weight: 500;color: #fff;text-transform: uppercase;letter-spacing: 1px;margin-top: 50px;}
.mcon01 .mobWrap .txt a span{position: relative;top: -3px;display: inline-block;width: 50px;height: 2px;margin-left: 10px;}
.mcon01 .mobWrap .txt a span em{display: block;width: 0;height: 100%;background: #fff;animation:stretch 1s alternate infinite both;}
.mcon01 .swiper-button-next,
.mcon01 .swiper-button-prev{background-color: rgba(0, 0, 0, 0.3);border-radius:.25rem;padding: 10px;}


/* scroll down */
.mcon01 .scrollWrap{position: absolute;bottom: 45px;right: 45px;z-index: 1;}
.mcon01 .scrollWrap div{position: relative;}
.mcon01 .scrollWrap div p{font-size: 13px;font-weight: 400;color: #fff;transform-origin: center middle;transform:rotate(-90deg);}
.mcon01 .scrollWrap div ul{position: relative;margin-top: 40px;}
.mcon01 .scrollWrap div ul li{padding: 3px 0;margin: 0;opacity: .3;}
.mcon01 .scrollWrap div ul li img{display: block;margin: 0 auto;}
.mcon01 .scrollWrap div ul li:nth-child(3) img{position: relative;top: 5px;left: 1px;}



/* mcon01 animation */

.mcon01 .mobWrap .swiper-slide-active .txt .smallTxt span{animation:text-up 1s both;animation-delay:.2s;}
.mcon01 .mobWrap .swiper-slide-active .txt .bigTxt span{animation:text-up 2s both;}
.mcon01 .mobWrap .swiper-slide-active .txt .bigTxt:nth-child(2) span{animation-delay:.6s;}
.mcon01 .mobWrap .swiper-slide-active .txt .bigTxt:nth-child(3) span{animation-delay:1.6s;}






/* mcon02 */
#fullpage .titleWrap{position: relative;width: 95%;max-width:1440px;margin: 0 auto 70px;}
#fullpage .titleWrap h2{font-size: 80px;font-weight: 700;color: #111;padding-bottom: 40px;}
#fullpage .titleWrap > div{position: relative;display: flex;justify-content:space-between;}
#fullpage .titleWrap > div p{font-size: 20px;font-weight: 400;color: #333;line-height: 1.6;}
#fullpage .titleWrap .ctrlBox{position: relative;}
#fullpage .titleWrap .ctrlBox a{position: relative;display: inline-block;width: 60px;height: 60px;border: 1px solid #111;border-radius:100rem;box-sizing:border-box;transition:all .3s;}
#fullpage .titleWrap .ctrlBox a:first-child{margin-right: 10px;}
#fullpage .titleWrap .ctrlBox a:hover{background: #f1f1f1;transition:all .3s;}
#fullpage .titleWrap .ctrlBox a img{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}

.mcon02{position: relative;padding-top: 150px;box-sizing:border-box;}
.mcon02 .slideWrap{position: relative;width: 95%;max-width:1440px;margin: 0 auto;}
.mcon02 .slideWrap .swiper-container{overflow: hidden;}
.mcon02 .slideWrap .swiper-slide{position: relative;}
.mcon02 .slideWrap .swiper-slide a{position: relative;display: block;width: 100%;/* height: 600px; */padding-top: 166%;border-right: 1px solid rgba(245,245,245,.4);box-sizing:border-box;overflow: hidden;}
.mcon02 .slideWrap .swiper-slide a.bsBtn01{background: url("../../img/main/mcon02Img01.jpg") no-repeat center;background-size: 100%;}
.mcon02 .slideWrap .swiper-slide a.bsBtn02{background: url("../../img/main/mcon02Img02.jpg") no-repeat center;background-size: 100%;}
.mcon02 .slideWrap .swiper-slide a.bsBtn03{background: url("../../img/main/mcon02Img03.jpg") no-repeat center;background-size: 100%;}
.mcon02 .slideWrap .swiper-slide a.bsBtn04{background: url("../../img/main/mcon02Img04.jpg") no-repeat center;background-size: 100%;}
.mcon02 .slideWrap .swiper-slide a.bsBtn05{background: url("../../img/main/mcon02Img05.jpg") no-repeat center;background-size: 100%;}
.mcon02 .slideWrap .swiper-slide a.bsBtn06{background: url("../../img/main/mcon02Img06.jpg") no-repeat center;background-size: 100%;}

.mcon02 .slideWrap .swiper-slide .infoBox{position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 40px 40px;box-sizing:border-box;}
.mcon02 .slideWrap .swiper-slide .infoBox h3{font-size: 30px;font-weight: 700;color: #fff;}
.mcon02 .slideWrap .swiper-slide .infoBox > div{position: absolute;top: 37%;left: 60px;}
.mcon02 .slideWrap .swiper-slide .infoBox .iconBox{position: relative;height: 70px;opacity: 0;}
.mcon02 .slideWrap .swiper-slide .infoBox .iconBox img{display: block;}
.mcon02 .slideWrap .swiper-slide .infoBox div .title{font-size: 22px;font-weight: 700;color: #fff;padding-bottom: 8px;opacity: 0;}
.mcon02 .slideWrap .swiper-slide .infoBox div li{padding: 8px 0;box-sizing:border-box;font-size: 16px;font-weight: 400;color: #fff;opacity: 0;}
.mcon02 .slideWrap .swiper-slide .infoBox .moreviewBtn{position: absolute;bottom: 50px;left: 50%;transform:translateX(-50%);width: 140px;font-size: 13px;font-weight: 500;color: #fff;letter-spacing: 1px;opacity: 0;}
.mcon02 .slideWrap .swiper-slide .infoBox .moreviewBtn span{position: relative;top: -3px;display: inline-block;width: 50px;height: 2px;}
.mcon02 .slideWrap .swiper-slide .infoBox .moreviewBtn span em{display: inline-block;width: 0;height: 100%;background: #fff;margin: 0;}

.mcon02 .slideWrap .swiper-slide .hoverBg{position: absolute;top: 100%;left: 0;width: 100%;height: 100%;display: block;background: rgba(0,93,159,.8);transition:all .3s;}

.mcon02 .slideWrap .swiper-slide a:hover .hoverBg{top: 0;left: 0;transition:all .3s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox .iconBox{animation:up .5s both;animation-delay:.2s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox div .title{animation:up .5s both;animation-delay:.4s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox div li{animation:up .5s both;animation-delay:.6s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox div li:nth-child(2){animation-delay:.8s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox div li:nth-child(3){animation-delay:1s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox div li:nth-child(4){animation-delay:1.2s;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox .moreviewBtn{opacity: 1;}
.mcon02 .slideWrap .swiper-slide a:hover .infoBox .moreviewBtn span em{animation:stretch .5s linear both;}





/* mcon03 */
.mcon03{position: relative;padding: 270px 0 200px;box-sizing:border-box;background: url("../../img/main/mconLogoBg.png") no-repeat right 50px top;}
.mcon03 .prodWrap{position: relative;width: 95%;max-width:1440px;margin: 0 auto;}
.mcon03 .prodWrap ul{position: relative;display: flex; gap:30px; }
.mcon03 .prodWrap ul li{position: relative;width: calc((100% - 60px) / 3); height: 460px;}
/* .mcon03 .prodWrap ul li:nth-child(4n){margin-right: 0;} */
.mcon03 .prodWrap ul li a{position: relative;display: block; width: 100%; height: 100%; }
.mcon03 .prodWrap ul li a .imgBox{ position: relative;width: 100%; height: 100%; overflow: hidden;}
.mcon03 .prodWrap ul li a .imgBox img{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%); min-width:100%; min-height:100%; object-fit:cover;width: 100%;}
.mcon03 .prodWrap ul li a span{position: absolute;top: 0;left: 0;display: block;width: 100%;height: 100%;}
.mcon03 .prodWrap ul li a span img{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);}
.mcon03 .prodWrap ul li a p{position: absolute;bottom: 0;left: 0;width: 100%;background: rgba(0,93,159,.8);font-size: 20px;font-weight: 500;color: #fff;text-align: center;padding: 20px 0;box-sizing:border-box;}




/* mcon04 */
.mcon04{position: relative;background: url("../../img/main/mcon04Bg.jpg") no-repeat center /cover fixed;}
.mcon04 .mcon04Wrap{position: relative;height: 480px;}
.mcon04 .mcon04Wrap .txt{position: absolute;top: 50%;left: 0;width: 100%;transform:translateY(-50%);}
.mcon04 .mcon04Wrap .txt p{font-size: 36px;font-weight: 300;color: #fff;line-height: 1.4;text-align: center;}
.mcon04 .mcon04Wrap .txt a{display: block;font-size: 13px;font-weight: 500;color: #fff;text-align: center;margin: 70px auto 0;width: 200px;}
.mcon04 .mcon04Wrap .txt a span{position: relative;top: -2px;display: inline-block;width: 50px;height: 2px;margin-left: 10px;}
.mcon04 .mcon04Wrap .txt a span em{display: block;width: 0;height: 100%;background: #fff;animation:stretch 1s alternate infinite both;}


.mcon04 .topBtn{position: absolute;bottom: 70px;right: 40px;z-index: 1;}
.mcon04 .topBtn div{position: relative;}
.mcon04 .topBtn div p{font-size: 13px;font-weight: 400;color: #fff;transform-origin: center middle;transform:rotate(-90deg);}
.mcon04 .topBtn div ul{position: relative;margin-bottom: 20px;}
.mcon04 .topBtn div ul li{padding: 3px 0;margin: 0;opacity: .3;}
.mcon04 .topBtn div ul li img{display: block;margin: 0 auto;}
.mcon04 .topBtn div ul li:nth-child(1) img{position: relative;left: -1px;transform:rotate(-180deg);}




footer{position: relative;background: #fff;}
footer .footerWrap{position: relative;width: 95%;max-width:1720px;margin: 0 auto;padding: 50px 0 60px;box-sizing:border-box;}
footer .footerWrap > div:first-child{position: relative;display: flex;justify-content:start;flex-direction:row-reverse; float:left; }
footer .footerWrap > div:first-child img{display: block;margin:0 0 25px 0;}
footer .footerWrap > div:first-child > img{margin:0 20px 25px 0;}
footer .footerWrap ul{position: relative;display: flex;justify-content:flex-end;margin-top: 10px;}
footer .footerWrap ul li{margin-right: 10px;}
footer .footerWrap address{font-size: 15px;font-weight: 300;color: #666;}
footer .footerWrap > div:last-child{position: relative;display: flex;justify-content:space-between; clear:both;}
footer .footerWrap p{font-size: 15px;font-weight: 300;color: #666;margin-right: 10px;}
footer .footerWrap p span.med{font-weight: 500;}
footer .footerWrap p span.reg{font-weight: 400;}