@charset "utf-8";

.section { position: relative; overflow: hidden; background-position: center; background-size: cover; background-repeat: no-repeat; }
.section > div { padding-top: 5%; }
#homepageBottom.section > div { padding-top: 0 }

@media all and (max-width:767px) {
	#homepageBottom {display:none}
}

@media all and (max-width:1280px) {
    .section > div { padding: 5% 0; }
}

@media all and (max-width:1080px) {
    .section { min-height: 100vh; }
    .section > div { padding: 80px 0; }
  /* .fp-tableCell > div { max-height: 70vh; overflow-y: auto; } */
}
@media all and (max-width:767px) {
    .section { min-height: auto; }
    .section > div { padding: 50px 0; }
}





#mVisual {width:100%; height:100vh; overflow:hidden;}
#mVisual > div { padding-top: 0; }
#mVisual .mvWrap{position: relative; height: 100%;}

.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100vh; outline:none; }

#mVisual .mv_slider { background-repeat: no-repeat; background-size: cover; }

.mv_slider.mv1 { background-image:url('/images/main/mv1.png'); background-position: center center;}

#mVisual .mv_slider .mv-txt {display:flex; align-items: center; justify-content:center; width:100%; max-width:1600px; margin:0 auto; height:100%;  }
#mVisual .mv_slider .mv-txt div { color:#fff; text-align:Center}
#mVisual .mv_slider .mv-txt div p{font-weight: 500; font-size: 2.4rem; margin-bottom: 20px;}
#mVisual .mv_slider .mv-txt div h3{font-weight: 800; font-size: 6.4rem;}

#pager{position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 1600px; display: flex; justify-content: space-between; opacity: 0.5;}
#pager .prev{ width: 48px; border: 0;  border-radius: 0; height: 30px; left: 0; cursor: pointer;}
#pager .prev::after{position: absolute; width: 48px; height: 1px; background: #eee; right: 0; top: 0; content: '';}
#pager .prev p,
#pager .next p{font-family: 'Pretendard'; font-size: 16px; font-weight: 500; letter-spacing: -1px; margin-top: 5px; padding: 0 5px; text-align: left; color: #fff;}
#pager .next p{text-align: right;}
#pager .next{width: 48px; border: 0; border-radius: 0; height: 30px; right: 0;cursor: pointer;}
#pager .next::after{position: absolute; width: 48px; height: 1px; background: #eee; left: 0; top: 0; content: ''; }

#mVisual .mv_slider.mv2 .mv-txt  { height:100%; justify-content:start; }
#mVisual .mv_slider.mv2 .mv-txt div {width:600px;}
#mVisual .inner{position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);}
#mVisual .gage{height: 2px; width: 100%; position: relative; background: rgba(255,255,255,0.2);}
#mVisual .gage .bar{background-color: #bfd97c; position: absolute; left: 0; top: 0; height: 2px;}

@media all and (max-width:1599px) {
    #mVisual .mv_slider .mv-txt {  width:90%; }
    #pager{width: 95%;}
}
@media all and (max-width:1280px) {
	#mVisual .mv_slider .mv-txt div p{font-size: 2rem;}
    #mVisual .mv_slider .mv-txt div h3{font-size: 5rem;}
    #pager .prev p,
    #pager .next p{font-size: 14px;}
    #pager .prev,
    #pager .next{width: 40px;}
    #pager .prev::after,
    #pager .next::after{width: 40px;}
}
@media all and (max-width:976px) {
	.mv_slider.mv2 { background-position: 80% center; }
}
@media all and (max-width:580px) {
	#mVisual .mv_slider .mv-txt div p{font-size: 1.6rem;margin-bottom: 10px;}
    #mVisual .mv_slider .mv-txt div h3{font-size: 4rem;}
    #pager{display: none;}
}



#mAbout .fp-tableCell{display: flex;align-items: center; justify-content: space-between;letter-spacing: -1px; background: url('/images/main/mAbout_bgimg.png') no-repeat 43% 130%;}
#mAbout .l_box{width: 780px; padding-left: 160px;}
#mAbout .l_box ul{margin-top: 40px; display: flex; gap: 10px; flex-wrap: wrap;}
#mAbout .l_box ul li{background: #eee; border-radius: 100px;}
#mAbout .l_box ul li a{font-size: 1.6rem; color: #000; font-weight: 700; display: inline-block;padding: 15px 30px; }
#mAbout .r_box{width: calc(100% - 900px);}
#mAbout .r_box ul{width: 100%;}
#mAbout .r_box ul li{margin-right:50px;}
#mAbout .r_box ul a {display:block; width:100%; height:100%; position: relative;}
#mAbout .r_box ul a .img {width:100%;  background-position:center center; overflow:hidden; background-repeat:no-repeat; }
#mAbout .r_box ul a .img img { width:100%; max-width: 800px; transition:all 0.3s; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s; }
#mAbout .r_box ul a:hover .img img  {  transform: scale(1.1) rotate(0.02deg); -ms-transform: scale(1.1) rotate(0.02deg); -o-transform: scale(1.1) rotate(0.02deg);  -moz-transform: scale(1.1) rotate(0.02deg);  -webkit-transform: scale(1.1) rotate(0.02deg); }	
#mAbout .r_box ul li .txt{position: absolute; width: 100%; height: 100%; z-index: 9; top: 0; left: 0; padding: 60px; display: flex;flex-wrap: wrap; align-content: space-between; color: #fff;}
#mAbout .r_box ul li .txt h3{width: 100%; font-size: 6.4rem;}
#mAbout .r_box ul li .txt h3 span{font-weight: normal;}
#mAbout .r_box ul li .txt p{font-weight: 500; line-height: 3.2rem; font-size: 1.8rem;}

.m-tit{color: #000;padding: 20px; position: relative; letter-spacing: -1px;}
.m-tit::after{position: absolute; left: 0;top: 0; width: 16px; height: 16px; background: #bfd97c; border-radius: 100px; content: '';}
.m-tit h3{font-size: 5.6rem;}
.m-tit p{margin-top: 50px; font-weight: 500; line-height: 3rem; font-size: 2rem;}

@media all and (max-width:1600px){
    #mAbout .l_box{width: 680px; padding-left: 100px;}
    #mAbout .r_box{width: calc(100% - 680px);}
    #mAbout .r_box ul li{width: 600px;}
    #mAbout .r_box ul li .txt h3{font-size: 5.4rem;}
    #mAbout .r_box ul li .txt p{line-height: 3rem; font-size: 1.6rem;}
    #mAbout .r_box ul li .txt p br{display: none;}
    
    .m-tit h3{font-size: 5rem;}
    .m-tit p{line-height: 2.8rem; font-size: 1.8rem;}
}

@media all and (max-width:1280px){
    #mAbout .l_box{width: 540px; padding-left: 60px;}
    #mAbout .l_box ul{margin-top: 20px;}
    #mAbout .l_box ul li a{font-size: 1.5rem; padding: 10px 25px; }
    #mAbout .r_box{width: calc(100% - 540px);}
    #mAbout .r_box ul li{width: 530px; margin-right: 30px;}
    #mAbout .r_box ul li .txt{padding: 40px;}
    #mAbout .r_box ul li .txt h3{font-size: 4rem;}
    #mAbout .r_box ul li .txt p{line-height: 2.5rem; font-size: 1.6rem;}
    #mAbout .r_box ul li .txt p br{display: none;}
    
    .m-tit h3{font-size: 4.5rem;}
}

@media all and (max-width:1024px){
    #mAbout .fp-tableCell{flex-wrap: wrap;}
    #mAbout .l_box{width: 100%;}
    #mAbout .l_box ul{margin-top: 10px;}
    #mAbout .r_box{width: 100%; padding-left: 60px; margin-top: 30px;}
    
    .m-tit h3{font-size: 4.5rem;}
    .m-tit p{margin-top: 40px;}
}
@media all and (max-width:767px){
    #mAbout .fp-tableCell{flex-wrap: wrap; align-content: normal; padding-top: 0;}
    #mAbout .l_box{padding-left: 40px;}
    #mAbout .l_box ul{margin-top: 10px;}
    #mAbout .r_box{width: 100%; padding-left: 40px; margin-top: 0px;}
    #mAbout .r_box ul li{width: 70vw; height: 500px;}
    #mAbout .r_box ul li .txt{padding: 30px;}
    #mAbout .r_box ul li a .img img{width: auto; height: 100%;}
    
    .m-tit h3{font-size: 4rem;}
    .m-tit p{margin-top: 30px;}
}
@media all and (max-width:568px){
    #mAbout .l_box{padding-left: 20px;}
    #mAbout .r_box{padding-left: 20px;}
    #mAbout .r_box ul li{width: 70vw; height: 500px;}
    #mAbout .r_box ul li a .img img{width: auto; height: 100%;}
    #mAbout .r_box ul li .txt h3{font-size: 3rem;}
    #mAbout .r_box ul li .txt p{line-height: 2.5rem; font-size: 1.5rem;}
    
    .m-tit h3{font-size: 4rem;}
}
@media all and (max-width:480px){
    .m-tit{padding: 10px;}
    .m-tit h3{font-size: 3.5rem;}
    #mAbout .r_box ul li{width: 80vw;}
    .m-tit p{margin-top: 20px;}
}


#mEmp{background: url('/images/main/mEmp_bg.jpg') no-repeat center center;}
#mEmp a{color: #fff;}
#mEmp .inner{display: flex; align-items: center;}
#mEmp .inner .l_box{width: 50%;}
#mEmp .inner .l_box .top h3{font-size: 2.6rem; margin-bottom: 20px; color: #fff;}
#mEmp .inner .l_box .top ul{border-top: 2px solid #fff; width: 100%;}
#mEmp .inner .l_box .top ul li{width: 100%; border-bottom: 1px solid rgb(255,255,255,0.5);}
#mEmp .inner .l_box .top ul li a{padding: 20px; width: 100%; display: inline-block; display: flex; justify-content: space-between; align-items: center;}
#mEmp .inner .l_box .top ul li p{font-weight: 600; font-size: 1.8rem;}
#mEmp .inner .l_box .top ul li span{font-weight: bold; font-size: 2.6rem; transition: 0.3s;}
#mEmp .inner .l_box .top ul li:hover span{transform: rotate(45deg); transition: 0.3s;}
#mEmp .inner .l_box .top ul li.end{opacity: 0.5;}
#mEmp .inner .l_box .bot{margin-top: 70px;}
#mEmp .inner .l_box .bot ul{display: flex;flex-wrap: wrap; gap: 60px;}
#mEmp .inner .l_box .bot ul li{width: calc(100%/2 - 30px); border-bottom: 1px solid #fff;}
#mEmp .inner .l_box .bot ul li a{width: 100%; display: inline-block; padding: 20px; font-weight: bold; display: flex; justify-content: space-between; font-size: 2.6rem;}
#mEmp .inner .l_box .bot ul li span{transition: 0.3s;}
#mEmp .inner .l_box .bot ul li:hover span{transform: rotate(45deg); transition: 0.3s;}
#mEmp .inner .r_box{width: 50%;}
#mEmp .inner .r_box .m-tit{color: #fff;text-align: right;}
#mEmp .inner .r_box .m-tit::after{left: auto;right: 0;}


@media all and (max-width:1280px){
    #mEmp .inner .l_box .top h3{font-size: 2.3rem;}
    #mEmp .inner .l_box .top ul li p{font-size: 1.6rem;}
    #mEmp .inner .l_box .top ul li span{font-size: 2.4rem;}
    #mEmp .inner .l_box .bot ul{gap: 40px;}
    #mEmp .inner .l_box .bot ul li{width: calc(100%/2 - 20px);}
    #mEmp .inner .l_box .bot ul li a{font-size: 2.3rem;}
}
@media all and (max-width:980px){
    #mEmp .inner{flex-wrap: wrap;}
    #mEmp .inner .l_box{width: 100%;order: 2; margin-top: 50px;}
    #mEmp .inner .r_box{width: 100%; order: 1;}
}

#mNotice .top{margin-bottom: 60px;}
#mNotice .m-tit{display: flex; justify-content: space-between; align-items: center;}
#mNotice .m-tit a{font-size: 1.8rem; color: #666; font-weight: 600; display: flex; align-items: center;}
#mNotice .m-tit a .img-wrap {position: relative; display: inline-block; width: 37px; height: 37px;  margin-left: 15px;}
#mNotice .m-tit a img {position: absolute;top: 0;left: 0;width: 100%;height: auto;transition: opacity 0.2s ease-in-out; }
#mNotice .m-tit a img.off {opacity: 0;}
#mNotice .m-tit a img.on {opacity: 1;}
#mNotice .m-tit a:hover img.off {opacity: 1;}
#mNotice .m-tit a:hover img.on {opacity: 0;}
#mNotice .bot ul{display: flex; width: 100%; gap: 25px; flex-wrap: wrap; letter-spacing: -1px;}
#mNotice .bot ul li{width: calc(100%/4 - 19px); border-top: 2px solid #000; padding-top: 30px;}
#mNotice .bot ul li p{color: #666; font-size: 1.8rem; font-weight: 500;}
#mNotice .bot ul li h3{color: #000; font-size: 2.4rem; font-weight: 700; margin: 10px 0 40px;}
#mNotice .bot ul li .img{width: 100%;}
#mNotice .bot ul li .img img{width: 100%;}


@media all and (max-width:1280px){
    #mNotice .bot ul li p{font-size: 1.6rem;}
    #mNotice .bot ul li h3{font-size: 2rem;}
    #mNotice .bot ul li h3 br{display: none;}
}

@media all and (max-width:1080px){
    #mNotice .top{margin-bottom: 0px;}
    #mNotice .bot ul li{width: calc(100%/3 - 19px);}
    #mNotice .bot ul li:last-child{display: none;}
    #mNotice .m-tit{flex-wrap: wrap; justify-content: end;}
    #mNotice .m-tit h3{width: 100%;}
    #mNotice .m-tit a{margin-top: 10px;}
    #mNotice .m-tit a .img-wrap {width: 30px; height: 30px;}
}
@media all and (max-width:980px){
    #mNotice .bot ul li{width: calc(100%/2 - 19px);}
    #mNotice .bot ul li:last-child{display: block;}
    #mNotice .bot ul li .img{display: none;}
}
@media all and (max-width:767px){
    #mNotice .top{margin-bottom: 30px;}
    #mNotice .bot ul li{width: calc(100%/2 - 19px);}
    #mNotice .bot ul li .img{display: block;}
    #mNotice .m-tit a{font-size: 1.4rem;}
    #mNotice .m-tit a .img-wrap {width: 25px; height: 25px;}
}
@media all and (max-width:480px){
    #mNotice .bot ul li{padding-top: 15px;}
    #mNotice .bot ul li p{font-size: 1.3rem;}
    #mNotice .bot ul li h3{font-size: 1.6rem; margin: 5px 0 20px;}
    #mNotice{height: auto !important;}
    #mNotice .fp-tableCell{height: auto !important;}
}


#mTech{background: url('/images/main/mTech_bg.jpg') no-repeat center center; background-size: cover;}
#mTech .box{text-align: right;}
#mTech .inner .box .m-tit{color: #fff;text-align: right;}
#mTech .inner .box .m-tit::after{left: auto;right: 0;}
#mTech .inner .box .m-tit h3{text-transform: uppercase;}
#mTech .inner .box .m-tit a{margin-top: 60px; display: inline-block; transition: 0.3s;}
#mTech .inner .box .m-tit a:hover{transform: rotate(45deg); transition: 0.3s;}

@media all and (max-width:1280px){
    #mTech .inner .box .m-tit a img{width: 60px;}
}
@media all and (max-width:480px){
    #mTech{height: auto !important;}
    #mTech .fp-tableCell{height: auto !important;}
    #mTech .inner .box .m-tit a{margin-top: 30px;}
    #mTech .inner .box .m-tit a img{width: 40px;}
}

#mPtn .top{margin-top: 50px;}
#mPtn .bot{padding: 80px 0 150px;}
#mPtn .bot .swiper {-webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%); mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);}
#mPtn .bot .swiper-wrapper{display: flex; align-items: center;}
#mPtn .bot .swiper-slide{width: auto !important; margin-right: 60px;}
#mPtn .bot .swiper-slide img{width: 100%;}

@media all and (max-width:1280px){
    #mPtn .bot{padding: 80px 0 100px;}
    #mPtn .bot .swiper-slide{width: 20% !important;}
}
@media all and (max-width:680px){
    #mPtn .top{margin-top: 0px;}
    #mPtn .bot{padding: 50px 0 20px;}
    #mPtn .bot .swiper-slide{margin-right: 0px; width: 25% !important; text-align: center;}
    #mPtn .bot .swiper-slide img{width: 70%;}
}
@media all and (max-width:480px){
    #mPtn .bot .swiper-slide{ width: 35% !important;}
    #mPtn .bot .swiper-slide img{width: 80%;}
}