@charset "utf-8";

#mvWrap { overflow:hidden; position:relative;}

#mVisual {position:relative; width:100%;  height:550px; margin-top: 100px;}
.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; }

#mVisual .mv_slider.mv1 {background:url('/images/main/mv1.jpg') no-repeat center center}
#mVisual .mtxt{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: center; height: 100%; color: #222;}
#mVisual .mtxt h4{font-family: 'ONE-Mobile-Title'; font-size: 1.8rem; color: #b7d432; font-weight: normal; position: relative; display: inline-block; width: fit-content;}
#mVisual .mtxt h4:after{position: absolute; width: 18rem; background: #b7d432; height: 1px; content: ''; top: 50%; transform: translatey(-50%); left:31rem;}
#mVisual .mtxt h3{font-size: 5rem; margin: 4rem 0;}
#mVisual .mtxt p{font-size: 2rem; line-height: 3rem;}
#mVisual .slick-dots{width:100%; max-width:1400px;	position:relative;	margin-left:auto;	margin-right:auto; left: 0; text-align: left; bottom: 8%;}
#mVisual .slick-dots li{width: 8px; height: 8px; background: rgba(0,0,0,0.1);}
#mVisual .slick-dots li.slick-active{background: #b7d432;}


@media all and (max-width:1420px){
    #mVisual .slick-dots{width: 95%;}
}
@media all and (max-width:1280px){
    #mVisual {margin-top: 80px;}
    #mVisual .mtxt h4{font-size: 1.6rem;}
    #mVisual .mtxt h4:after{left:28rem; width: 16rem;}
    #mVisual .mtxt h3{font-size: 4.5rem;}
    #mVisual .mtxt p{font-size: 1.8rem; line-height: 2.8rem;}
}
@media all and (max-width:976px){ 
    #mVisual {margin-top: 70px;}
}
@media all and (max-width:768px){ 
    #mVisual {margin-top: 60px; height: 80vh;}
    #mVisual .mv_slider.mv1 {background:url('/images/main/mv1_mo.jpg') 75% center / cover no-repeat;}
    #mVisual .mtxt{justify-content: end; padding-bottom: 6rem;}
    #mVisual .mtxt h4:after{width: 11rem;}
    #mVisual .mtxt h3{font-size: 4rem; margin: 3rem 0;}
    #mVisual .slick-dots{bottom: 4%;}
}
@media all and (max-width:480px){
    #mVisual .mtxt{padding-bottom: 5rem;}
    #mVisual .mtxt h4{font-size: 1.3rem;}
    #mVisual .mtxt h4:after{left: 23rem;}
    #mVisual .mtxt h3{font-size: 3.5rem; margin: 2rem 0;}
    #mVisual .mtxt p{font-size: 1.6rem; line-height: 2.6rem;}
}


#m_quick{margin: 5rem 0;}
#m_quick .s-inner{display: flex; align-items: center;}
#m_quick .tit{width: 30rem;}
#m_quick .tit h3{color: #25467b; font-size: 3.5rem;}
#m_quick .tit p{font-size: 2rem; margin-top: 2rem;color: #222;}
#m_quick ul{display: flex; width: calc(100% - 30rem);gap: 3rem;}
#m_quick ul li{width: calc(100%/4 - 9rem/4); text-align: center; }
#m_quick ul li a{color: #222; padding: 4rem 0; display: inline-block; width: 100%; height: 100%; background: #fff;border-radius: 1rem;box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.1);}
#m_quick ul li:hover a{color: #fff; background: #b7d432; }
#m_quick ul li:hover a img{filter: brightness(10);}
#m_quick ul li p{font-size: 2.3rem; font-weight: bold; margin-top: 2rem;}

@media all and (max-width:1280px){
    #m_quick{margin: 4rem 0;}
    #m_quick .tit{width: 23rem;}
    #m_quick .tit h3{font-size: 3rem;}
    #m_quick .tit p{font-size: 1.8rem; margin-top: 1.5rem;}
    #m_quick ul{display: flex; width: calc(100% - 23rem);}
    #m_quick ul li a {padding: 3rem 0;}
    #m_quick ul li a img{height: 6rem;}
    #m_quick ul li p{font-size: 2rem;}
}
@media all and (max-width:980px){
    #m_quick .tit{width: 20rem;}
    #m_quick .tit h3{font-size: 2.5rem;}
    #m_quick .tit p{font-size: 1.6rem;}
    #m_quick ul{display: flex; width: calc(100% - 20rem);}
    #m_quick ul li a img{height: 5rem;}
    #m_quick ul li p{font-size: 1.8rem;}
}
@media all and (max-width:768px){
    #m_quick .s-inner{flex-wrap: wrap; gap: 3rem;}
    #m_quick .tit{width: 100%;}
    #m_quick .tit p{margin-top: 1rem;}
    #m_quick .tit p br{display: none;}
    #m_quick ul{width: 100%;gap: 2rem;}
    #m_quick ul li{width: calc(100%/4 - 6rem/4);}
    #m_quick ul li a img{height: 4rem;}
}
@media all and (max-width:480px){
    #m_quick{margin: 3rem 0;}
    #m_quick .s-inner{gap: 2rem;}
    #m_quick ul{flex-wrap: wrap; gap: 1rem;}
    #m_quick ul li{width: calc(100%/2 - 1rem/2);}
    #m_quick ul li a{display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 0;}
    #m_quick ul li a .img{width: 5rem; text-align: center;}
    #m_quick ul li a p{margin-top: 0; font-size: 1.6rem; width: calc(100% - 11rem);}
}


.m_txt{text-align: center;}
.m_txt h4{font-weight: normal; color: #b7d432; font-family: 'ONE-Mobile-Title'; font-size: 1.8rem;}
.m_txt h3{color: #25467b; font-size: 5rem; margin-top: 3rem;}

@media all and (max-width:1280px){
    .m_txt h4{font-size: 1.6rem;}
    .m_txt h3{font-size: 4rem; margin-top: 2.5rem;}
}
@media all and (max-width:768px){
    .m_txt h4{font-size: 1.6rem;}
    .m_txt h3{font-size: 3.5rem;}
}
@media all and (max-width:480px){
    .m_txt h4{font-size: 1.4rem;}
    .m_txt h3{font-size: 3rem;}
}



#m_service{background: #fcfdf6 url('/images/main/m_service_bg.png') 95% 7% / 50rem no-repeat;}
#m_service .cont{position:relative; margin-top: 10rem;}

#m_service .cont .line{position:absolute;left:50%;top:0;transform: translateX(-50%);width:3px;height:100%;z-index:0;}
#m_service .cont .line .track{position:absolute;left:0; top:0;width:100%;height:100%;background: rgba(0,0,0,0.1);border-radius: 999px;}
#m_service .cont .line .fill{position:absolute;left:0; top:0;width:100%;height:0;background:#b7d432;border-radius: 999px;overflow: visible;}
#m_service .cont .line .fill .dot{position:absolute;left:50%;bottom:-1.1em;transform: translateX(-50%);width:2.5rem;opacity: 1;}
#m_service .cont .line .fill .dot svg{display:block;width:100%;}

#m_service .cont .list{ display:flex; justify-content:space-between; flex-wrap:wrap; position:relative; z-index:1; padding-bottom: 6rem;}
#m_service .cont .list .item{ position:relative; width: calc(50% - 11rem); border-radius: 1rem; overflow:hidden; margin-top: 11rem;}
#m_service .cont .list .item:nth-child(1),
#m_service .cont .list .item:nth-child(2){margin-top:0;}
#m_service .cont .list .item:nth-child(even){top: 6rem;}
#m_service .cont .list .item .bg{position:relative;padding-top: 48rem;}
#m_service .cont .list .item .bg:after{ content:''; position:absolute; left:0; bottom:0; width:100%; height:55%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%); }
#m_service .cont .list .item .bg .img{ position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; }
#m_service .cont .list .item .txt{position:absolute;left:0; bottom:0;padding: 3.6rem;z-index:2;color:#fff;}
#m_service .cont .list .item .txt h4{font-family: 'ONE-Mobile-Title'; color: #b7d432; font-weight: normal; font-size: 1.8rem; position: relative; padding-left: 2.5rem;}
#m_service .cont .list .item .txt h4::before{position: absolute; content: ''; width: 1rem; height: 1rem; background: #b7d432; left: 0; top: 0.4rem; border-radius: 100px;}
#m_service .cont .list .item .txt h3{font-size: 3.5rem; color: #fff; margin: 2rem 0 1.5rem;}
#m_service .cont .list .item .txt p{font-size: 2rem; color: #fff;}


@media all and (max-width:1280px){
    #m_service{background-size: 30%;}
    #m_service .cont{margin-top: 8rem;}
    #m_service .cont .list .item{width: calc(50% - 9rem);}
    #m_service .cont .list .item .txt h4{font-size: 1.5rem; padding-left: 1.5rem;}
    #m_service .cont .list .item .txt h4::before{width: 0.8rem; height: 0.8rem;}
    #m_service .cont .list .item .txt h3{font-size: 3rem;}
    #m_service .cont .list .item .txt p{font-size: 1.8rem;}
}
@media all and (max-width:980px){
    #m_service .cont .list .item{width: calc(50% - 5rem);}
    #m_service .cont .list .item .bg{padding-top: 38rem;}
    #m_service .cont .list .item .txt{padding: 4rem 3rem;}
}
@media all and (max-width:880px){
    #m_service{background-position: 95% 2%;background-size: 40%;}
    #m_service .cont .line{left: 1.2rem; transform:none;}
    #m_service .cont .list{padding: 3rem 2rem 3rem 5rem;}
    #m_service .cont .list .item{width: 100%;top: 0 !important;}
    #m_service .cont .list .item + .item{margin-top: 3rem;}
}
@media all and (max-width:680px){
    #m_service .cont{margin-top: 6rem;}
    #m_service .cont .list{padding: 2rem 1rem 2rem 5rem;}
}
@media all and (max-width:480px){
    #m_service .cont .line{left: 0.5rem;}
    #m_service .cont .line .fill .dot{width:2rem;}
    #m_service .cont .list{padding: 0 0rem 0 3rem;}
    #m_service .cont .list .item .bg{padding-top: 30rem;}
    #m_service .cont .list .item .txt{padding: 3rem 2rem;}
    #m_service .cont .list .item .txt h4{font-size: 1.3rem;}
    #m_service .cont .list .item .txt h4::before{width: 0.6rem; height: 0.6rem;}
    #m_service .cont .list .item .txt h3{font-size: 2.5rem;margin: 1.5rem 0 1rem;}
    #m_service .cont .list .item .txt p{font-size: 1.6rem;}
}


#m_comm .comm_box{display: flex; gap: 4rem; margin-top: 10rem;}
#m_comm .comm_box > div{width: calc(100%/2 - 2rem);  display: flex;flex-direction: column;}
#m_comm .comm_box .top{ border-bottom: 5px solid #25467b; padding-bottom: 2rem; color: #25467b; display: flex; align-items: center; justify-content: space-between;}
#m_comm .comm_box .top h3{font-size: 3rem;}
#m_comm .comm_box .top a{font-size: 3.5rem;  font-family: 'ONE-Mobile-Title';color: #25467b; transition: 0.3s;}
#m_comm .comm_box .top a:hover{transform: rotate(90deg);}
#m_comm .comm_box .cn_list{flex: 1;}
#m_comm .comm_box .cn_list li{padding: 2.5rem; border-bottom: 1px solid #ddd;}
#m_comm .comm_box .cn_list li a{color: #222; display: flex;gap: 1rem; align-items: center;}
#m_comm .comm_box .cn_list li a p{font-size: 2rem; font-weight: 500; position: relative; padding-left: 3rem; width: calc(100% - 10rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#m_comm .comm_box .cn_list li a p::before{position: absolute; content: ''; width: 0.7rem; height: 0.7rem; border-radius: 100px; background: #b7d432; left: 0; top: 0.9rem;}
#m_comm .comm_box .cn_list li a span{font-size: 1.6rem; opacity: 0.7; font-family: 'suite';width: 9rem; text-align: right;}

#m_comm .comm_box .cp_list {display: flex; padding: 2.5rem; gap: 3rem;flex: 1; align-items: center;}
#m_comm .comm_box .cp_list li{width: calc(100%/2 - 1.5rem);}
#m_comm .comm_box .cp_list li a{color: #222;}
#m_comm .comm_box .cp_list li .img{width: 100%;}
#m_comm .comm_box .cp_list li .img img{width: 100%;}
#m_comm .comm_box .cp_list li .txt{margin-top: 2rem; display: flex; align-items: center; justify-content: space-between;}
#m_comm .comm_box .cp_list li .txt p{font-size: 2rem; font-weight: bold; width: calc(100% - 10rem);white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
#m_comm .comm_box .cp_list li .txt span{width: 9rem; opacity: 0.7; font-family: 'suite'; font-size: 1.6rem; text-align: right;}

#m_comm .info{margin-top: 8rem; display: flex; gap: 4rem;}
#m_comm .info li{width: calc(100% - 2rem); border-radius: 1rem; padding: 5rem; color: #fff;}
#m_comm .info li:nth-child(1){background: #73b269 url('/images/main/m_info_bg1.png') 90% 100% / auto no-repeat;}
#m_comm .info li:nth-child(1) a{color: #73b269;}
#m_comm .info li:nth-child(2){background: #78b9ff url('/images/main/m_info_bg2.png') 90% 50% / auto no-repeat;}
#m_comm .info li:nth-child(2) a{color: #78b9ff;}
#m_comm .info li h3{font-size: 3rem;}
#m_comm .info li p{font-size: 2rem;margin: 1.5rem 0 4rem;}
#m_comm .info li a{font-size: 1.8rem; background: #fff; padding: 1rem 3rem; display: inline-block; border-radius: 100px; border: 1px solid #fff;}
#m_comm .info li a:hover{background: transparent; color: #fff !important;}



@media all and (max-width:1280px){
    #m_comm .comm_box{display: flex; gap: 4rem; margin-top: 8rem;}
    #m_comm .comm_box .top{ border-bottom: 3px solid #25467b; padding-bottom: 1rem;}
    #m_comm .comm_box .top h3{font-size: 2.5rem;}
    #m_comm .comm_box .top a{font-size: 3rem;}
    #m_comm .comm_box .cn_list li{padding: 2rem;}
    #m_comm .comm_box .cn_list li a p{padding-left: 2rem; font-size: 1.8rem; width: calc(100% - 9rem);}
    #m_comm .comm_box .cn_list li a span{font-size: 1.4rem; width: 8rem;}
    #m_comm .comm_box .cp_list {padding: 1rem;gap: 2rem;}
    #m_comm .comm_box .cp_list li{width: calc(100%/2 - 1rem);}
    #m_comm .comm_box .cp_list li .txt p{font-size: 1.8rem; width: calc(100% - 9rem);}
    #m_comm .comm_box .cp_list li .txt span{font-size: 1.4rem; width: 8rem;}
    #m_comm .info{margin-top: 6rem;}
    #m_comm .info li{background-size: 30% !important;padding: 3rem 4rem 7rem;}
    #m_comm .info li:nth-child(2){ background-position: 95% 90%;}
}
@media all and (max-width:980px){
    #m_comm .info li h3{font-size: 2.5rem;}
    #m_comm .info li p{font-size: 1.8rem;}
    #m_comm .info li a{font-size: 1.6rem; padding: 0.7rem 2rem;}
}
@media all and (max-width:768px){
    #m_comm .comm_box{flex-wrap: wrap; margin-top: 6rem;}
    #m_comm .comm_box > div{width: 100%;}
    #m_comm .comm_box .cp_list {padding: 2rem;}
    #m_comm .info{flex-wrap: wrap;gap: 2rem; margin-top: 4rem;}
    #m_comm .info li{width: 100%; padding: 3rem; background-size: 15rem !important;}
    #m_comm .info li:nth-child(2){ background-position: 90% 50%;}
}
@media all and (max-width:480px){
    #m_comm .comm_box{margin-top: 4rem;}
    #m_comm .comm_box .cn_list li a p{font-size: 1.6rem; width: calc(100% - 8rem);}
    #m_comm .comm_box .cn_list li a p::before{top: 0.6rem;}
    #m_comm .comm_box .cn_list li a span{font-size: 1.3rem; width: 7rem;}
    #m_comm .comm_box .cp_list {padding: 2rem 0;}
    #m_comm .comm_box .cp_list li .txt span{font-size: 1.3rem;}
    #m_comm .info li{background-size: 12rem !important;}
    #m_comm .info li p{font-size: 1.6rem; margin: 1rem 0 3rem;}
    #m_comm .info li a{font-size: 1.5rem;}
}


#m_contact{background: url('/images/main/m_contact_bg.jpg') 60% 50% / cover no-repeat; color: #fff;}
#m_contact .top{display: flex; justify-content: space-between; padding-bottom: 7rem; border-bottom: 1px solid rgba(255,255,255,0.5); margin-bottom: 7rem;}
#m_contact .top .lt h3{font-size: 5rem;}
#m_contact .top .lt p{font-size: 2rem; margin-top: 2rem; line-height: 3rem;}
#m_contact .top .rt h3{opacity: 0.2; color: #b7d432; font-family: 'ONE-Mobile-Title'; font-size: 5rem; font-style: italic; font-weight: normal; text-align: right;}
#m_contact .link{text-align: center;}
#m_contact .link a{color: #222; background: #fff; font-size: 2rem; padding: 2rem 7rem; border-radius: 1rem; font-weight: bold; display: inline-block;}
#m_contact .link a:hover{background: #b7d432; color: #fff;}


@media all and (max-width:1280px){
    #m_contact .top .lt h3{font-size: 4rem;}
    #m_contact .top .lt p{font-size: 1.8rem;}
    #m_contact .top .rt h3{font-size: 4rem;}
    #m_contact .link a{font-size: 1.8rem;}
}
@media all and (max-width:880px){
    #m_contact .top{flex-wrap: wrap;gap: 3rem; padding-bottom: 5rem; margin-bottom: 5rem;}
    #m_contact .top .lt{width: 100%;}
    #m_contact .top .rt{width: 100%;}
    #m_contact .top .rt h3{font-size: 3rem;}
}
@media all and (max-width:480px){
    #m_contact .top .lt h3{font-size: 3.5rem;}
    #m_contact .top .lt p{font-size: 1.6rem; line-height: 2.6rem;}
    #m_contact .top .rt h3{font-size: 2.5rem;}
    #m_contact .link a{font-size: 1.6rem; padding: 1.5rem 5rem; border-radius: 0.5rem;}
}