@charset "utf-8";

#mVisual{width: 100%;height: 950px; position: relative; /*padding-top: 100px;*/}
#mVisual .mvWrap {position:relative; width:100%; height:100%; overflow:hidden;}
.mv_slider.slick-slide,
.mvWrap .slick-track,
.mvWrap .slick-list{ position:relative; height:100%; outline:none; }

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

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

#mVisual .mv_slider .mv-txt { display:flex; align-items:center; width:100%; height:100%;  }
#mVisual .mv_slider .mv-txt div { color:#fff; }
#mVisual .mv_slider .mv-txt div h3 {  font-size: 6.0rem; transform: rotate(-0.03deg);  line-height:1.25em; margin-bottom: 50px;padding-bottom: 50px; border-bottom: 1px solid #ffffff50;}
#mVisual .mv_slider .mv-txt div p{position: relative; font-size: 2.0rem; line-height: 1.6;}

.mvWrap {opacity: 0; visibility: hidden;  transition: opacity 1s ease;  -webkit-transition: opacity 1s ease;}
.mvWrap.slick-initialized {  visibility: visible; opacity: 1;    }

#mVisual .arrow{display: flex; font-family: 'suit'; width: 110px; position: absolute;  color: #fff; right: 0; font-size: 4rem; font-weight: 100; opacity: 0.5; cursor: pointer; bottom: 380px;}
#mVisual .arrow div{width: 50%; text-align: center;}

#mVisual .scroll{position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); color: #fff; text-align: center; z-index: 3;}
#mVisual .scroll p{font-size: 1.4rem; font-weight: 500; margin-top: 25px;}
#mVisual .scroll .arr{font-size: 2rem; position: relative; animation: scrollmove infinite 1s;}

@keyframes scrollmove{
    0%{top: 0;}
	50%{top: 20px;}
	100%{top: 0;}
}

br.mo{display: none;}

@media all and (max-width:1280px) { 
    #mVisual {height:800px; padding-top: 80px;}
	#mVisual .mv_slider .mv-txt div h3 {  font-size: 5rem; margin-bottom: 40px; padding-bottom: 40px;}
	#mVisual .mv_slider .mv-txt div p {font-size: 1.8rem;}
    #mVisual .arrow{font-size: 3rem;}
    #mVisual .scroll p{font-size: 1.2rem;}
    #mVisual .scroll .arr{font-size: 1.8rem;}
}
@media all and (max-width:976px) {
    #mVisual {padding-top: 60px;}
    #mVisual .mv_slider .mv-txt div h3 {  font-size: 4rem; margin-bottom: 30px; padding-bottom: 30px;}
    #mVisual .mv_slider .mv-txt div p {font-size: 1.6rem;}
    #mVisual .arrow{width: 80px;}
}
@media all and (max-width:640px) {
    #mVisual .arrow{display: none;}
    #mVisual .mv_slider .mv-txt {text-align: center;}
    #mVisual .scroll .arr{font-size: 1.6rem;}
}
@media all and (max-width:580px) {
    #mVisual .mv_slider .mv-txt div h3 {  font-size:7vw }
	#mVisual .mv_slider .mv-txt div p{font-size: 1.5rem;}
    br.mo{display: block;}
}

.p-part{padding: 120px 0;}

@media all and (max-width:1280px){
    .p-part{padding: 100px 0;}
}
@media all and (max-width:980px){
    .p-part{padding: 80px 0;}
}
@media all and (max-width:640px){
    .p-part{padding: 60px 0;}
}

.t-txt{position: relative; color: #222;margin-bottom: 50px;}
.t-txt h3{font-size: 5rem; position: relative; z-index: 1;}
.t-txt h3::before{content: ''; width: 30px; height: 30px; position: absolute; top: -3px;left: -12px; background: #b2c3e8; border-radius: 100px; z-index: -1;}
.t-txt > p{margin-top: 50px; font-weight: 500; font-size: 2rem;}
.t-txt a{position: absolute; display: flex; width: 200px; height: 60px; align-items: center; justify-content: center; background: #444; color: #fff; border-radius: 100px; gap: 20px; font-size: 2rem; right: 0; bottom: 0; border: 1px solid #444; font-weight: 500;}
.t-txt a:hover{ background: #fff; color: #444;}

@media all and (max-width:1280px){
    .t-txt{margin-bottom: 40px;}
    .t-txt h3{font-size: 4rem;}
    .t-txt > p{margin-top: 40px; font-size: 1.8rem;}
    .t-txt a{width: 180px; height: 50px;font-size: 1.8rem;}
}
@media all and (max-width:980px){
    .t-txt{margin-bottom: 30px;}
    .t-txt h3{font-size: 3.5rem;}
    .t-txt h3::before{width: 20px; height: 20px; top: 0px;left: -7px;}
    .t-txt > p{margin-top: 30px; font-size: 1.6rem;}
    .t-txt a{width: 140px; height: 40px;font-size: 1.6rem;}
}
@media all and (max-width:640px){
    .t-txt h3{font-size: 3rem;}
    .t-txt h3::before{width: 15px; height: 15px; left: -5px;}
    .t-txt > p{margin-top: 20px;}
    .t-txt a{position: relative; margin-top: 20px;}
}


.m_vs{width: 100%; display: flex;flex-wrap: wrap;}
.m_vs li{width: calc(100%/4); height: 445px; overflow: hidden; position: relative;}
.m_vs li .img{width: 100%;}
.m_vs li .img img{height: 100%; transition: 0.3s;}
.m_vs li:hover .img img{transform: scale(1.1); transition: 0.3s;}
.m_vs li .txt{position: absolute; top: 0; padding: 30px; color: #fff; width: 100%; display: flex; align-items: end; height: 100%;justify-content: space-between;}
.m_vs li .txt .eng{text-transform: uppercase; font-size: 1.6rem; font-family: 'GmarketSans'; position: absolute; transform: rotate(-90deg); left: -90px; width: 257px; text-align: right; top: 147px; opacity: 0.6;}
.m_vs li .txt h3{font-size: 4.5rem;}
.m_vs li .txt h4{font-size: 7rem; font-family: 'GmarketSans'; opacity: 0.5;line-height: 60px; -webkit-text-stroke: 1px #fff; color: transparent;}

@media all and (max-width:1600px){
    .m_vs li .txt h3{font-size: 3.5rem;}
    .m_vs li .txt h4{font-size: 6rem;line-height: 5rem;}
}
@media all and (max-width:1280px){
    .m_vs li .txt .eng{font-size: 1.4rem;}
    .m_vs li .txt h3{font-size: 3rem;}
    .m_vs li .txt h4{font-size: 5rem;line-height: 4rem;}
}
@media all and (max-width:1080px){
    .m_vs li{width: calc(100%/2); height:250px;}
    .m_vs li .img img{height: auto;width: 100%; transform: translatey(-40%);}
    .m_vs li:hover .img img{transform: scale(1.1) translatey(-40%);}
    .m_vs li .txt .eng{transform: rotate(0deg); left: auto; width: 100%; text-align: right; top: 20px; right: 20px;}
    .m_vs li .txt{padding: 20px;}
}
@media all and (max-width:800px){
    .m_vs li{height:100%;}
    .m_vs li .img img{transform: translatey(0%);}
    .m_vs li:hover .img img{transform: scale(1.1) translatey(0%);}
}
@media all and (max-width:640px){
    .m_vs li{width: 100%; height:200px;}
    .m_vs li .img img{transform: translatey(-40%);}
    .m_vs li:hover .img img{transform: scale(1.1) translatey(-40%);}
    .m_vs li .txt h3{font-size: 2.5rem;}
    .m_vs li .txt h4{font-size: 4rem;line-height: 3rem;}
}


#m_sec2{background: #f8f8f8;color: #222;}
#m_sec2 ul{display: flex;flex-wrap: wrap; margin-top: 80px; width: 100%;}
#m_sec2 ul li{width: calc(100%/5); text-align: center; position: relative;}
#m_sec2 ul li::after{content: ''; position: absolute; background: #565656; opacity: 0.5; width: 1px; height: 144px; right: 0; top: 50%; transform: translateY(-50%);}
#m_sec2 ul li:last-child:after{display: none;}
#m_sec2 ul li .img{margin-bottom: 30px; height: 100px; display: flex; align-items: center; justify-content: center;}
#m_sec2 ul li .img img{}
#m_sec2 ul li p{font-weight: bold; font-size: 2.5rem; margin-bottom: 20px;}
#m_sec2 ul li h3{font-size: 2.5rem;}
#m_sec2 ul li h3 span{font-size: 5rem; color: #0038b3; font-family: 'GmarketSans';}


@media all and (max-width:1280px){
    #m_sec2 ul li p{font-size: 2rem;}
    #m_sec2 ul li h3{font-size: 2rem;}
    #m_sec2 ul li h3 span{font-size: 4rem;}
}
@media all and (max-width:1080px){
    #m_sec2 ul{justify-content: center; gap: 50px 0;}
    #m_sec2 ul li{width: calc(100%/3);}
    #m_sec2 ul li:nth-child(3)::after{display: none;}
}
@media all and (max-width:680px){
    #m_sec2 ul{justify-content: center; gap: 50px 0;}
    #m_sec2 ul li{width: calc(100%/2);}
    #m_sec2 ul li:nth-child(3)::after{display: block;}
    #m_sec2 ul li:nth-child(even)::after{display: none;}
    #m_sec2 ul li h3{font-size: 1.8rem;}
    #m_sec2 ul li h3 span{font-size: 3.5rem;}
}

#m_sec3{width: 100%; text-align: center;}
#m_sec3 .t-txt h3{display: inline-block;}
#m_sec3 .arrow{width: 150px; display: flex;flex-wrap: wrap; justify-content: space-between; color: #888;font-size: 3rem; font-family: 'suit'; font-weight: 100; left: 50%; position: absolute; top: 0; transform: translateX(-50%);}
#m_sec3 .arrow div{width: 70px; height: 70px; border-radius: 100px; border: 1px solid #c8c8c8;display: flex;justify-content: center; align-items: center; cursor: pointer;}

.busi_wrap{width: 100%; position: relative;}
.busi_wrap li{width: 400px; padding-top: 130px;}
.busi_wrap li .img{width: 100%; position: relative;    box-shadow: 3px 3px 15px 10px #00000010;}
.busi_wrap li .img img{width: 100%;}
.busi_wrap ul .slick-slide {margin: 0 15px; box-sizing: border-box;}
.busi_wrap ul .slick-slide {transition: all 0.5s ease;}
.busi_wrap ul .slick-center {opacity: 1; margin-top: 0;}
.busi_wrap ul .is-left {margin-top: -50px;}
.busi_wrap ul .is-right {margin-top: -50px;}
.busi_wrap li .txt{width: 100%; position: absolute; padding: 40px; top: 0;left: 0; color: #fff; height: 100%; display: flex;flex-wrap: wrap; align-content: space-between;}
.busi_wrap li .txt p{text-align: left; font-size: 2.2rem; width: 100%;}
.busi_wrap li .txt h3{text-align: right; font-size: 4rem; width: 100%;}



@media all and (max-width:1800px){
    br.br1800{display: none;}
}

@media all and (max-width:1700px){
    .busi_wrap li .txt p{font-size: 2.5rem;}
    .busi_wrap li .txt h3{font-size: 3.5rem;}
}

@media all and (max-width:1280px){
    #m_sec3 .arrow{width: 130px; font-size: 2rem;}
    #m_sec3 .arrow div{width: 60px; height: 60px;}
    .busi_wrap li{padding-top: 120px;}
    .busi_wrap li .txt{padding: 30px;}
    .busi_wrap li .txt p{font-size: 1.8rem;}
    .busi_wrap li .txt h3{font-size: 3rem;}
    .busi_wrap ul .is-left {margin-top: -40px;}
    .busi_wrap ul .is-right {margin-top: -40px;}
}

@media all and (max-width:1080px){
    .busi_wrap li .txt{padding: 30px;}
    .busi_wrap li .txt p{font-size: 1.8rem;}
    .busi_wrap li .txt h3{font-size: 3rem;}
}
@media all and (max-width:780px){
    #m_sec3 .arrow{width: 110px; font-size: 2rem;}
    #m_sec3 .arrow div{width: 50px; height: 50px;}
    .busi_wrap li{padding-top: 80px;}
    .busi_wrap li .txt{padding: 30px;}
    .busi_wrap li .txt p{font-size: 1.6rem;}
    .busi_wrap li .txt h3{font-size: 2.5rem;}
    br.br1800{display: block;}
    .busi_wrap ul .is-left {margin-top: -30px;}
    .busi_wrap ul .is-right {margin-top: -30px;}
}
@media all and (max-width:580px){
    #m_sec3 .arrow{width: 85px; font-size: 2rem;}
    #m_sec3 .arrow div{width: 40px; height: 40px;}
}


#m_sec4{background: url('/images/main/m_sec4_bg.png') no-repeat center left; background-size: cover; color: #fff;}
#m_sec4 .t-txt{color: #fff; margin-bottom: 0;}
#m_sec4 .t-txt h3::before{background: #0038b3;}
#m_sec4 .t-txt a{position: relative; margin-top: 50px;}

@media all and (max-width:1280px){
    #m_sec4{background-position: 30% 100%;}
}
@media all and (max-width:640px){
    #m_sec4{background-position: 40% 100%;}
    #m_sec4 .t-txt a{margin-top: 20px;}
}

.not_wrap{width: 100%;}
.not_wrap ul{width: 100%;}
.not_wrap ul li {background: #f5f5f5; border: 1px solid #f5f5f5;}
.not_wrap ul li:hover {background: #fff; border: 1px solid #444;}
.not_wrap ul li a{width: 100%; height: 100%; display: inline-block; padding: 40px;}
.not_wrap ul li .not{font-size: 1.6rem; color: #fff; background: #444; display: inline-block; padding: 5px 15px; border-radius: 100px; font-weight: bold;}
.not_wrap ul li h3{margin: 20px 0 30px; font-size: 2rem; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.not_wrap ul li p{font-size: 1.6rem; color: #222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.not_wrap ul li .date{margin-top: 80px; text-align: right; width: 100%; display: inline-block; font-family: 'GmarketSans'; color: #555; font-size: 1.4rem;}
.not_wrap .slick-slide{margin: 0 15px;}
.not_wrap .slick-list {margin: 0 -15px;}


.not_wrap .scroll{height: 5px; width: 100%; background-color: #e1e1e1; margin-top: 35px; position: relative; border-radius: 100px;}
.not_wrap .scroll .bar{background-color: #444; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 5px; width:auto; cursor: pointer;border-radius: 100px;}
.not_wrap .scroll .bar:not(:active){ transition: .4s;}


@media all and (max-width:1280px){
    .not_wrap ul li a{padding: 30px;}
    .not_wrap ul li .not{font-size: 1.5rem;}
    .not_wrap ul li h3{margin: 20px 0;}
    .not_wrap ul li .date{margin-top: 70px;}
    .not_wrap .slick-slide{margin: 0 10px;}
    .not_wrap .slick-list {margin: 0 -10px;}
}
@media all and (max-width:680px){
    .not_wrap ul li a{padding: 30px 20px;}
    .not_wrap ul li .not{font-size: 1.4rem;}
    .not_wrap ul li .date{margin-top: 50px; font-size: 1.2rem;}
}