@charset "utf-8";

h4{text-align: center; font-size: 40px; font-weight: 600; padding: 40px 0; }

.mainVisu{width: 100%; height: 955px; background: url(/resources/homepage/images/main/mainVisu.jpg) no-repeat; background-size: cover; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.mainVisu h4{color: #fff;}
.mainVisu .searchForm{position: relative; margin: 30px 0;}
.mainVisu .searchForm input[type="text"]{width: 100%; height: 50px;padding-left: 20px;padding-right: 60px;font-size: 15px;} 
.mainVisu .searchForm input[type="text"]:focus{outline: none;}
.mainVisu .searchForm input[type="button"]{width: 50px; height: 50px; background:url(/resources/homepage/images/main/search.png)#002956 no-repeat center; border: none; position: absolute; right: 0; top: 0;}
.mainVisu .quickBox li{float: left; width: 25%; text-align: center;}
.mainVisu .quickBox li img{transition: all .3s;}
.mainVisu .quickBox li:hover img{transform: translateY(-10px);}
.mainVisu .quickBox p{font-size: 18px; font-weight: 600; color: #fff; line-height: 1.5;}

.eduBox{padding: 185px 0;}
.eduBox h4{margin-bottom: 40px;}
.eduBox li{float: left; width: 33.33%; text-align: center; padding: 30px 0;}
.eduBox li span{display: block; margin: 20px 0; color: #002956; font-size: 25px; font-weight: 600;}
.eduBox li p{display: block;  color: #002956; font-size: 40px; font-weight: 600;}

.popBox{background: #002956; padding: 190px 0;}
.popBox h4{color: #fff; margin-bottom: 40px;}
.popBox .popCon{position: relative;}
.popBox .popControl a{position: absolute; top: 40%; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.popBox .popControl .pop_navi_prev{left: -120px;}
.popBox .popControl .pop_navi_next{right: -120px;}
.popBox .popList li{display: flex; justify-content: center;  background-color: #fff;}
.popBox .popList li .img{width: 60%; height: 404px;}
.popBox .popList li .img img{width: 100%; height: 100%; object-fit: cover;}
.popBox .popList li .box{background: #fff; width: 40%; padding:40px 60px 100px 60px; position: relative;}
.popBox .popList li .txt span{color: #004EA2; font-size: 20px; font-weight: 500; display: block; margin-bottom: 10px;}
.popBox .popList li .txt p{font-size: 30px; font-weight: 600; color: #414141; line-height: 1.5; word-break: keep-all;}
.popBox .popList li .desc{position: absolute; width: 100%; bottom: 20px; left: 0;}
.popBox .popList li .more{width: 100px; display: block; font-size: 15px; background: #004EA2; color: #fff; text-align: center; height: 40px; line-height: 40px; margin-left: auto; margin-right: 20px;}
.popBox .popList li .popNavi{position: absolute; left: 50%; transform: translateX(-50%);}

@media all and (max-width:1400px){
    .popBox .popControl a{top: 0; background: rgba(0,0,0,.2); height: 100%; z-index: 2; width: 50px;}
    .popBox .popControl .pop_navi_prev{left: 0;}
    .popBox .popControl .pop_navi_next{right: 0;}
    .popBox .popList li .more{margin-right: 60px;}
}
@media all and (max-width:1200px){
    .mainVisu{height: 600px;}

    .eduBox{padding: 80px 0;}
    .eduBox li img{max-height: 120px;}

    .popBox{padding: 80px 0;}
    .popBox .popList li .img{width: 50%; height: 350px;}
    .popBox .popList li .box{width: 50%; padding: 40px 60px 100px 20px;}
}

@media all and (max-width:767px){
    h4{font-size: 32px;}
    .mainVisu .quickBox li img{max-height: 100px;}

    .eduBox{padding: 50px 0;}
    .eduBox h4{margin-bottom: 0;}
    .eduBox li span{font-size: 18px; margin: 10px 0;}
    .eduBox li p{font-size: 24px;}
    .eduBox li img{max-height: 80px;}

    .popBox{padding: 50px 0;}
    .popBox h4{margin-bottom: 0;}
    .popBox .popList li .txt span{font-size: 16px;}
    .popBox .popList li .txt p{font-size: 22px;}
    .popBox .popList li{display: block;}
    .popBox .popList li .img , .popBox .popList li .box{width: 100%;}
    .popBox .popControl{display: flex; margin-bottom: 10px; justify-content: right;}
    .popBox .popControl a{position: unset; width: 50px; height: 50px;}
    .popBox .popControl .pop_navi_prev{margin-right: 10px;}
    .popBox .popControl a img{width: 5px;} 
    .popBox .popList li .box{padding: 24px;}
    .popBox .popList li .desc{position: unset; margin-top: 50px;}
    .popBox .popList li .more{margin-right: 0;}
}
@media all and (max-width:500px){
    .mainVisu{height: auto; padding: 50px 0;}
    .mainVisu .quickBox li{width: 50%;}

    .eduBox li{float: none; width: 100%;}

    
}