/* 모든 스타일은 css 충돌방지를 위해 .demo4_content1을 기준으로 작성 하시면 됩니다. 예) .demo4_content1 .box {} */
@import url('https://fonts.googleapis.com/css?family=Montserrat|Oxygen');
.demo4_content1{width:100%;height:400px;background:#fff;}
.demo4_content1 .content1_tit span{padding-left:10px;color:#1f60a9;font-family: 'Montserrat', sans-serif;
font-family: 'Oxygen', sans-serif !important;display:block;}
.demo4_content1 .content1_tit p{
    color: #494949;
    text-align: center;
    font-size: 38px;
    line-height: 44px;
    font-family: 'Montserrat', sans-serif;
    font-family: 'Oxygen', sans-serif !important;
    text-transform: uppercase;
    padding:50px 0 20px 0;}
.demo4_content1 .content1_box ul{overflow:hidden;}
.demo4_content1 .content1_box ul li{width:220px;height:250px;float:left;margin:10px;position:relative;}
.demo4_content1 .content1_box ul li a{display:block;width:100%;height:100%;}
.demo4_content1 .content1_box ul .box_img1{background:url(../cnu_content1/images/cnu_img1.png)center 30% no-repeat}
.demo4_content1 .content1_box ul .box_img2{background:url(../cnu_content1/images/cnu_img2.png)center 30% no-repeat}
.demo4_content1 .content1_box ul .box_img3{background:url(../cnu_content1/images/cnu_img3.png)center 30% no-repeat}
.demo4_content1 .content1_box ul .box_img4{background:url(../cnu_content1/images/cnu_img4.png)center 30% no-repeat}
.demo4_content1 .content1_box ul .box_img5{background:url(../cnu_content1/images/cnu_img5.png)center 30% no-repeat}
.demo4_content1 .content1_box ul .box_img1:hover{background:url(../cnu_content1/images/cnu_on_img1.png)center 30% no-repeat #bed9ff;transition:all 0.5s;color:#fff;}
.demo4_content1 .content1_box ul .box_img2:hover{background:url(../cnu_content1/images/cnu_on_img2.png)center 30% no-repeat #bed9ff;transition:all 0.5s;}
.demo4_content1 .content1_box ul .box_img3:hover{background:url(../cnu_content1/images/cnu_on_img3.png)center 30% no-repeat #bed9ff;transition:all 0.5s;}
.demo4_content1 .content1_box ul .box_img4:hover{background:url(../cnu_content1/images/cnu_on_img4.png)center 30% no-repeat #bed9ff;transition:all 0.5s;}
.demo4_content1 .content1_box ul .box_img5:hover{background:url(../cnu_content1/images/cnu_on_img5.png)center 30% no-repeat #bed9ff;transition:all 0.5s;}
.demo4_content1 .content1_box ul li:hover span{background:#fff}
.demo4_content1 .content1_box ul li:hover h2{color:#fff}
.demo4_content1 .content1_box ul li:hover h4{color:#fff}
.demo4_content1 .content1_box ul li span{
width: 25px;
    height: 3px;
    background: #bed9ff;
    display: block;
    position: absolute;
    top: 58%;
    left: 50%;
  transform: translate(-50%,-50%);}
.demo4_content4 .content1_box ul li span{width: 65px;
    height: 2px;
    background: #e2e1e1;
    display: block;
    position: absolute;
    transform: (-50%,-50%);
    top: 52%;
    transform: translate(-50%,-50%);
  left: 50%;}

.demo4_content1 .content1_box ul li h2{font-weight:bold;color:#52637f;position:absolute;top: 67%;
    transform: translate(-50%,-50%);
  left: 50%;font-size:15px;}
.demo4_content1 .content1_box ul li h4{font-weight: normal;
    color: #333;
    position: absolute;
    top: 74%;
    transform: translate(-50%,-50%);
    left: 50%;
    text-align: center;
    font-size: 15px;}

@media screen and ( max-width:1300px)
{
  .demo4_content1{padding:20px 0;}
    .demo4_content1 .content1_tit p{padding:15px 0;}
  .demo4_content1 .content1_box ul li{width:31.3%;margin:1%;}
  .demo4_content1{height:auto;}

}
@media screen and ( max-width:1024px)
{
  .container{width:90% !important;}
  .demo4_content1 .content1_box ul li{width:48%;margin:1%;}

}