@charset "utf-8";

.mobileView{display:none;}

.mainBanner{position:relative;}
.mainBanner .mainBannerCont img{display:none;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}
.mainBanner .mainBannerCont .slick-slide div{vertical-align:top;}
.mainBanner .mainBannerCont .bannerFirst img{display:block;}
.mainBanner .mainBannerCont.slick-initialized .slick-list .bannerImg img{display:block;}
.mainBanner .textBox{max-width:1350px;width:100vw;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);font-weight:700;font-size:5.8rem;letter-spacing:-0.01em;line-height:1.3449;color:#fff;margin-top:-4px;}
.mainBanner .slick-controls{display:flex;flex-wrap:wrap;position:absolute;right:13.768%;bottom:57px;}
.mainBanner .slick-controls .slick-dots li{width:70px;display:inline-block;margin:3px 15px 3px 0;font-size:2rem;border-bottom:2px solid #fff;padding-bottom:5px;font-weight:700;cursor:pointer;color:#fff;opacity:0.3;}
.mainBanner .slick-controls .slick-dots li.slick-active{opacity:1;}
.mainBanner .slick-controls .slick-dots li.slick-active button{width:29px;background:#ddd;border:0;}
.mainBanner .slick-controls > button{position:relative;border:0;background:none;}

.inner{max-width:1650px;margin:0 auto;}

.contTitle{font-size:4.8rem;font-weight:700;letter-spacing:-0.02em;color:#111;line-height:1.375;word-break:keep-all;}
.mainTitle{margin-bottom:112px;text-align:center;}
.mainTitle span{font-size:2.4rem;font-weight:700;letter-spacing:0.5em;color:#1a16a2;margin-bottom:33px;display:block;}

.mainIntro{padding:144px 0 200px;}
.mainIntro ol{display:flex;justify-content:center;}
.mainIntro ol li{width:19.394%;min-height:440px;transition:.5s ease;background-repeat:no-repeat;background-position:center center;border-radius:10px;background-size:cover;}
.mainIntro ol li:hover{width:38.182%;transition:.5s ease;}
.mainIntro ol li:nth-child(1){background-image:url('/img/main/intro_img_01.png');}
.mainIntro ol li:nth-child(1):hover{background-image:url('/img/main/intro_img_01_on.png');}
.mainIntro ol li:nth-child(2){background-image:url('/img/main/intro_img_02.png');}
.mainIntro ol li:nth-child(2):hover{background-image:url('/img/main/intro_img_02_on.png');}
.mainIntro ol li:nth-child(3){background-image:url('/img/main/intro_img_03.png');}
.mainIntro ol li:nth-child(3):hover{background-image:url('/img/main/intro_img_03_on.png');}
.mainIntro ol li:nth-child(4){background-image:url('/img/main/intro_img_04.png');}
.mainIntro ol li:nth-child(4):hover{background-image:url('/img/main/intro_img_04_on.png');}
.mainIntro ol li:nth-child(n+2){margin-left:1.213%;}
.mainIntro ol li a{height:100%;display:block;color:#fff;padding:75px 5% 75px 15.625%;transition:.5s ease;}
.mainIntro ol li a > p{font-size:2.3rem;font-weight:700;letter-spacing:-0.02em;transition:.5s ease;}
.mainIntro ol li a > span{display:none;margin-top:40px;transition:.5s ease;}
.mainIntro ol li a dl dt{font-size:3.4rem;font-weight:700;letter-spacing:-0.02em;transition:.5s ease;}
.mainIntro ol li a dl dd{display:none;font-size:2.3rem;font-weight:500;margin-top:39px;line-height:1.3914;transition:.5s ease;}
.mainIntro ol li:hover a > span,
.mainIntro ol li:hover a dl dd{display:block;transition:.5s ease;}
.mainIntro ol li:hover a dl dt{font-size:4.6rem;transition:.5s ease;}
.mainIntro ol li:hover a > p{font-size:2.6rem;margin-bottom:20px;transition:.5s ease;}

.mainCompany{position:relative;height:920px;padding-top:183px;}
.mainCompany:before{width:100vw;height:100%;content:'';left:50%;transform:translateX(-50%);top:0;z-index:-1;position:absolute;background:url('/img/main/company_bg.jpg')no-repeat center center / cover;}
.mainCompany .mainTitle{margin-bottom:69px;}
.mainCompany .mainTitle span{color:#fff;}
.mainCompany .contTitle{color:#fff;}
.mainCompany ul{display:flex;justify-content:center;}
.mainCompany ul li{width:299px;text-align:center;}
.mainCompany ul li:nth-child(n+2){margin-left:8.485%;}
.mainCompany ul li a{width:100%;height:100%;display:block;background:rgba(255, 255, 255,.06);border-radius:100%;}
.mainCompany ul li a dl{width:100%;height:100%;border-radius:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.mainCompany ul li a dl dt{width:29.1%;}
.mainCompany ul li a dl dd{color:#fff;font-size:2rem;font-weight:700;margin-top:13.714%;} 



@media all and (max-width:1920px){
.mainBanner .mainBannerCont{width:1200px;margin:0 auto;}
.mainBanner .mainBannerCont .slick-list{margin:0 -351.5px;}
.mainBanner .mainBannerCont .slick-list img{width:auto;}
}

@media all and (max-width:1690px){
.inner{width:100%;padding:0 20px;}
.mainIntro ol li{width:22%;}
.mainIntro ol li:hover{width:30.3%;}
}

@media all and (max-width:1390px){
.mainBanner .mainBannerCont{width:100%;overflow:hidden;}
.mainBanner .textBox{max-width:100%;padding:0 27px;}
.mainBanner .mainBannerCont .slick-list{margin:0 -25%;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}
.mainBanner .slick-arrow.slick-prev{left:20px;}
.mainBanner .slick-arrow.slick-next{right:20px;}
.mainBanner .slick-controls{right:20px;}
}

@media all and (max-width:1279px){
.lapTopNone{display:none;}
.mainBanner .mainBannerCont{width:100%;overflow:hidden;}

.mainCompany ul li{width:26%;}

.mainIntro ol li{min-height:380px;}
.mainIntro ol li a{padding:50px 5% 50px 9.625%;}

}

@media all and (max-width:979px){
.mainCompany{height:auto;padding:120px 0;}
.mainIntro ol li{width:23%;min-height:340px;}
.mainIntro ol li a dl dt{font-size:3.2rem;}
.mainIntro ol li a dl dd{font-size:2rem;margin-top:20px;}
.mainIntro ol li a > span{margin-top:30px;}
.mainIntro ol li:hover{width:27.4%;}
.mainIntro ol li:hover a dl dt{font-size:3.7rem;}

}

@media all and (max-width:767px){
.mobileNone{display:none;}
.mobileView{display:block;}

.mainContents{overflow:hidden;}
.mainBanner .slick-controls{width:100%;justify-content:center;bottom:70px;right:0;}
.mainBanner .mainBannerCont .slick-list{margin:0;}

.mainBanner .textBox{text-align:center;font-size:4.8rem;padding:0 20px;}
.mainBanner .slick-controls .slick-dots li{width:45px;margin:3px 8px 3px 0;}
.mainBanner .slick-controls .slick-dots li:last-child{margin-right:0;}


.contTitle{font-size:3.5rem;}
.mainTitle{margin-bottom:55px;}
.mainTitle span{font-size:2rem;margin-bottom:15px;}

.mainCompany .mainTitle{margin-bottom:30px;}
.mainCompany:before{width:calc(100vw + 2px);left:calc(50% - 1x);}
.mainCompany ul li{width:32%;}
.mainCompany ul li:nth-child(n+2){margin-left:3%;}
.mainCompany ul li a dl dd{margin-top:20px;}

.mainIntro{padding:70px 0 100px;}
.mainIntro ol{flex-wrap:wrap;}
.mainIntro ol li{width:49%;min-height:280px;}
.mainIntro ol li:nth-child(2n){margin-left:2%;}
.mainIntro ol li:nth-child(3){margin-left:0;}
.mainIntro ol li:nth-child(n+3){margin-top:2%;}
.mainIntro ol li a{padding:40px 20px;}
.mainIntro ol li a > p{margin-bottom:10px !important;}
.mainIntro ol li a > span{width:51px;margin-top:20px;}
.mainIntro ol li:hover{width:49%}


}

@media all and (max-width:501px){
.mainBanner .textBox{text-align:center;font-size:4.2rem;}

.mainCompany{padding:80px 0;}
.mainCompany ul{display:block;}
.mainCompany ul li{width:55%;margin:0 auto;}
.mainCompany ul li:nth-child(n+2){margin:20px auto 0;}

.mainIntro ol li{min-height:250px;}
.mainIntro ol li a > p{font-size:2rem !important;}
.mainIntro ol li a dl dt{font-size:2.8rem !important;}
.mainIntro ol li a dl dd{font-size:1.8rem !important;margin-top:15px;}
.mainIntro ol li:hover a dl dt{font-size:3.2rem;}

}


@media all and (max-width:480px){
.mainIntro ol li:hover{width:49%;transition:none;}
.mainIntro ol li:nth-child(1):hover{background-image:url('/img/main/intro_img_01.png');}
.mainIntro ol li:nth-child(2):hover{background-image:url('/img/main/intro_img_02.png');}
.mainIntro ol li:nth-child(3):hover{background-image:url('/img/main/intro_img_03.png');}
.mainIntro ol li:nth-child(4):hover{background-image:url('/img/main/intro_img_04.png');}
.mainIntro ol li:hover a > span,
.mainIntro ol li:hover a dl dd{display:none;transition:none;}
.mainIntro ol li:hover a dl dt{transition:none;}
.mainIntro ol li:hover a > p{transition:none;}
}