@charset "utf-8";

.mainBanner{position:relative;}
.mainBanner .mainBannerCont .slick-list img{width:100%;}
.mainBanner .mainBannerCont .slick-slide div{vertical-align:top;}
.mainBanner .slick-arrow{width:30px;height:57px;margin-top:-29px;background:none;position:absolute;top:50%;border:0;z-index:1;display:none;}
.mainBanner .slick-arrow:before,
.mainBanner .slick-arrow:after{width:40px;height:2px;background:#fff;position:absolute;left:-5px;content:"";}
.mainBanner .slick-arrow:before{top:14px;}
.mainBanner .slick-arrow:after{bottom:14px;}
.mainBanner .slick-arrow.slick-prev{left:16%;}
.mainBanner .slick-arrow.slick-prev:before{transform:rotate(-45deg);}
.mainBanner .slick-arrow.slick-prev:after{transform:rotate(45deg);}
.mainBanner .slick-arrow.slick-next{right:16%;}
.mainBanner .slick-arrow.slick-next:before{transform:rotate(45deg);}
.mainBanner .slick-arrow.slick-next:after{transform:rotate(-45deg);}
.mainBanner .slick-controls{width:100%;position:absolute;left:0;bottom:100px;line-height:0;display:flex;justify-content:center;}
.mainBanner .slick-controls .slick-dots{margin:0 10px;}
.mainBanner .slick-controls .slick-dots li{display:inline-block;margin:0 7px;}
.mainBanner .slick-controls .slick-dots li button{width:10px;height:10px;background:rgba(255,255,255, .5);border-radius:50%;font-size:0;letter-spacing:-1000em;text-indent:-1000em;border:0;}
.mainBanner .slick-controls .slick-dots li.slick-active button{width:40px;background:#fff;border:0;border-radius:30px;}
.mainBanner .slick-controls > button{position:relative;border:0;background:none;}
.mainBanner .slick-controls .slide-pause{width:10px;height:15px;}
.mainBanner .slick-controls .slide-pause:before,
.mainBanner .slick-controls .slide-pause:after{width:3px;height:15px;background:#fff;position:absolute;top:0;content:"";}
.mainBanner .slick-controls .slide-pause:before{left:0;}
.mainBanner .slick-controls .slide-pause:after{right:0;}
.mainBanner .slick-controls .slide-play{border-top:7.5px solid transparent;border-right:0 solid transparent;border-bottom:7.5px solid transparent;border-left:10px solid #fff;}
.mainBanner .slick-controls .pagingInfo{color:#fff;margin-left:10px;line-height:15px;}

.mainBanner .slideText{width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);}
.mainBanner .slideText dl{max-width:1400px;margin:0 auto;letter-spacing:-0.05em;color:#fff;}
.mainBanner .slideText dl dt{font-size:6.4rem;font-weight:700;margin-bottom:35px;}
.mainBanner .slideText dl dd{font-size:2.4rem;line-height:1.5835;}



.inner{max-width:1400px;margin:0 auto;}

.blueText{font-size:2.4rem;letter-spacing:-0.05em;font-weight:700;color:#0081cc;}
.contTitle{font-size:4rem;letter-spacing:-0.05em;font-weight:700;color:#121212;line-height:40px;word-break:keep-all;}

.genocellList{padding:112px 0 180px;background:url(/img/main/genocel_list_bg.png)no-repeat left top / 45% auto;}
.genocellList .blueText{margin-bottom:16px;}
.genocellList ul{display:flex;justify-content:space-between;margin-top:61px;}
.genocellList ul li{width:320px;margin-right:20px;position:relative;} 
.genocellList ul li:last-child{margin-right:0;}
.genocellList ul li .imgBox span{color:#fff;font-size:2.6rem;font-weight:700;letter-spacing:-0.04em;position:absolute;left:9.375%;bottom:9.375%;}
.genocellList ul li .hoverCont{width:100%;height:100%;background:rgba(0,129,204,.8);display:flex;align-items:center;justify-content:center;flex-direction:column;font-weight:700;position:absolute;left:0;top:0;display:none;box-shadow: 15px 26px 50px 0px rgba(2, 58, 90, 0.3);}
.genocellList ul li:hover .hoverCont{display:flex;}
.genocellList ul li:hover .imgBox span{display:none;}
.genocellList ul li .hoverCont p{font-size:2.8rem;letter-spacing:-0.04em;color:#fff;margin-bottom:25px;}
.genocellList ul li .hoverCont span{padding:9px 43px 10px;font-size:1.8rem;letter-spacing:-0.03em;background:#fff;border-radius:20px;color:#0081cc;}






@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:1440px){
.inner{padding:0 20px;}
.mainBanner .slideText{width:920px;left:19%;}
.mainBanner .slideText dl dt{font-size:6rem;}
.mainBanner .slideText dl dd{font-size:2rem;}

.genocellList ul li{width:23.5%;margin-right:2%;}
}


@media all and (max-width:1279px){
.mainBanner .mainBannerCont{width:100%;overflow:hidden;}
.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 .slideText{left:20.3%;}


}

@media all and (max-width:979px){
.mainBanner .mainBannerCont .slick-list{margin:0;}
.mainBanner .slideText{width:96%;left:2.3%;}


}

@media all and (max-width:767px){
.contTitle{font-size:3.2rem;}

.mainBanner .slick-controls .slick-dots li.slick-active button{width:25px;}
.mainBanner .slick-arrow{height:40px;margin-top:-20px;}
.mainBanner .slick-arrow:before,
.mainBanner .slick-arrow:after{width:24px;left:0;}
.mainBanner .slick-arrow:before{top:11px;}
.mainBanner .slick-arrow:after{bottom:11px;}
.mainBanner .slick-controls{bottom:25px;}
.mainBanner .slideText{width:100%;left:0;padding:0 20px;}
.mainBanner .slideText dl dt{margin-bottom:17px;font-size:3.4rem;}
.mainBanner .slideText dl dd{font-size:1.8rem;}


.genocellList{padding:56px 0 90px;background-size:75% auto}
.genocellList .blueText{margin-bottom:8px;}
.genocellList ul{flex-wrap:wrap;margin-top:30px;}
.genocellList ul li{width:49%;} 
.genocellList ul li .imgBox span{left:15px;bottom:15px;font-size:2.2rem;}
.genocellList ul li .imgBox img{width:100%;}
.genocellList ul li:nth-child(2n){margin-right:0;} 
.genocellList ul li:nth-child(n+3){margin-top:2%;}
.genocellList ul li .hoverCont p{font-size:2.2rem;margin-bottom:12.5px;}
.genocellList ul li .hoverCont span{padding:5px 25px 6px;font-size:1.4rem;}

}

@media all and (max-width:501px){

}