마우스오버 코딩

<style>

        body {

            color: #252525;

            letter-spacing: -0.025em;

            min-width: 320px;

        }

        body,

        html,

        p,

        div,

        ul,

        li,

        h1,

        h2,

        h3,

        h4,

        h5,

        h6,

        span,

        br,

        dl,

        dt,

        dd {

            padding: 0;

            margin: 0;

        }

        h1,

        h2,

        h3,

        h4,

        h5 {

            font-weight: 400;

        }

        a {

            text-decoration: none;

            color: #252525

        }

        a,

        img {

            border: none;

            vertical-align: middle;

        }

        ul,

        li {

            list-style: none;

        }

        img {

            max-width: 100%;

        }

        .m-box-05 {

            width: 100%; 

        }

        .m-box-05>ul {

            display: flex;

            justify-content: space-between;

            flex-wrap: wrap;

            width: 100%; 

        }

        .m-box-05>ul>li {

            cursor: pointer;

            display: block;

            width: 48%;

            height: 395px;

            margin-bottom: 4.5%;

            vertical-align: top;

            position: relative;

        }

        .m-box-05>ul>li:nth-child(2n) {

            margin-right: 0;

        }

        .m-box-05>ul>li.type01 {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/b650f57c391a3.jpg) no-repeat;

            background-size: cover;

        }

        .m-box-05>ul>li.type02 {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/614d40803ea99.jpg) no-repeat;

            background-size: cover;

        }

        .m-box-05>ul>li.type03 {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/486f2bf91203d.jpg) no-repeat;

            background-size: cover;

        }

        .m-box-05>ul>li.type04 {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/5f2344d4bfa8b.jpg) no-repeat;

            background-size: cover;

        }

        .m-box-05>ul>li .tit {

            text-align: center;

            color: #fff;

            font-size: 28px;

            padding: 50px 0 30px;

        }

        .m-box-05>ul>li li {

            color: #ccc;

            font-size: 16px;

            line-height: 35px;

            background: url(../img/sub/jum.png) no-repeat 0 15px;

            padding-left: 10px;

            margin-left: 63px;

        }

        .m-box-05 ul li p {

            width: 80%;

            display: block;

            margin: 0 auto;

            border: 1px solid #fff;

            padding: 25px 0;

            font-size: 24px;

            text-align: center;

            color: #fff;

            top: 38%;

            position: absolute;

            left: 50%;

            transform: translateX(-50%)

        }

        .m-box-05>ul>li.type01 .blue-box {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/a0c2579fa8229.jpg) no-repeat;

            background-size: cover;

            position: absolute;

            width: 100%;

            height: 100%;

            z-index: 2

        }

        .m-box-05>ul>li.type01 .blue-box {

            display: none;

        }

        .m-box-05>ul>li.type02 .blue-box {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/655efc5af72e8.jpg) no-repeat;

            background-size: cover;

            position: absolute;

            width: 100%;

            height: 100%;

            z-index: 2

        }

        .m-box-05>ul>li.type02 .blue-box {

            display: none;

        }

        .m-box-05>ul>li.type03 .blue-box {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/c152a0f981d14.jpg) no-repeat;

            background-size: cover;

            position: absolute;

            width: 100%;

            height: 100%;

            z-index: 2

        }

        .m-box-05>ul>li.type03 .blue-box {

            display: none;

        }

        .m-box-05>ul>li.type04 .blue-box {

            background: url(https://cdn.imweb.me/upload/S20220118fea431e1325ab/43752a4e65a0c.jpg) no-repeat;

            background-size: cover;

            position: absolute;

            width: 100%;

            height: 100%;

            z-index: 2

        }

        .m-box-05>ul>li.type04 .blue-box {

            display: none;

        }

        @media screen and (max-width:1280px) {

            .m-box-05 {

                margin: 30px auto

            }

            .m-box-05>ul>li {

                width: 46%;

                margin-right: 2%;

                height: 400px

            }

            .m-box-05>ul>li:nth-child(2) {

                margin-right: 0;

            }

            .m-box-05>ul>li .tit {

                font-size: 20px;

                padding: 10% 10% 20px;

                line-height: 25px;

                word-break: keep-all

            }

            .m-box-05>ul>li li {

                font-size: 13px;

                line-height: 18px;

                background: url(../img/sub/jum.png) no-repeat 0 10px;

                padding-left: 10px;

                margin: 0 10% 5px

            }

            .m-box-05 ul li p {

                width: 90%;

                height: auto;

                display: block;

                font-size: 14px;

                text-align: center;

                color: #fff;

                top: 35%;

                ;

                position: absolute;

                left: 50%;

                transform: translateX(-50%)

            }

            .m-box-05 ul li p img {

                display: block;

                margin: 0 auto 20px;

            }

        }

    </style>

    <script>

        $(document).ready(function () {

            $(".type01").mouseenter(function () {

                $(".type01 .blue-box").fadeIn("1500");

            });

            $(".type01 .blue-box").mouseleave(function () {

                $(".type01 .blue-box").fadeOut("1500");

            });

            $(".type01 .blue-box").click(function () {

                $(".type01 .blue-box").fadeOut("1500");

            });

            $(".type02").mouseenter(function () {

                $(".type02 .blue-box").fadeIn("1500");

            });

            $(".type02 .blue-box").mouseleave(function () {

                $(".type02 .blue-box").fadeOut("1500");

            });

            $(".type02 .blue-box").click(function () {

                $(".type02 .blue-box").fadeOut("1500");

            });

            $(".type03").mouseenter(function () {

                $(".type03 .blue-box").fadeIn("1500");

            });

            $(".type03 .blue-box").mouseleave(function () {

                $(".type03 .blue-box").fadeOut("1500");

            });

            $(".type03 .blue-box").click(function () {

                $(".type03 .blue-box").fadeOut("1500");

            });

            $(".type04").mouseenter(function () {

                $(".type04 .blue-box").fadeIn("1500");

            });

            $(".type04 .blue-box").mouseleave(function () {

                $(".type04 .blue-box").fadeOut("1500");

            });

            $(".type04 .blue-box").click(function () {

                $(".type04 .blue-box").fadeOut("1500");

            });

        });

    </script>

<div class="m-box-05">

        <ul>

            <li class="type01">

                <div class="blue-box">

                    <div class="tit">조달청 나라장터 종합쇼핑몰</div>

                    <ul>

                        <li>· 등록 상품에 대한 지속적인 관리와 업데이트</li>

                        <li>· 품질 좋은 다양한 물품을 편리하고 쉽게 구매가능</li>

                        <li>· 수요고객이 직접 자유롭게 물품을 선택하여 사용</li>

                        <li>· 다양한 기능의 영상감시장치 등록</li>

                    </ul>

                </div>

                <p>조달청 나라장터 종합쇼핑몰</p>

            </li>

            <li class="type02">

                <div class="blue-box">

                    <div class="tit">SI 사업 및 보안 시스템</div>

                    <ul>

                        <li>· 통합관제센터 CCTV 시스템 구축</li>

                        <li>· 통합 CCTV 유지보수 사업 / 통신공사 시공</li>

                        <li>· 통합 영상관제 시스템</li>

                        <li>· 재난 감시 시스템 및 시설물 관리 시스템</li>

                    </ul>

                </div>

                <p>SI 사업 및 보안 시스템</p>

            </li>

            <li class="type03">

                <div class="blue-box">

                    <div class="tit">유지보수 사업</div>

                    <ul>

                        <li>· 정보통신 및 방송설비 유지보수</li>

                        <li>· 시스템 S/W 유지보수</li>

                        <li>· CCTV 통합관제센터 및 재난 시스템 유지보수</li>

                        <li>· 불법 주정차 단속시스템 유지보수</li>

                    </ul>

                </div>

                <p>유지보수 사업</p>

            </li>

            <li class="type04">

                <div class="blue-box">

                    <div class="tit">방범용 전광판</div>

                    <ul>

                        <li>· 비상방송시스템과 연계하여 실시간 이미지 및 문구 표출</li>

                        <li>· 전광판이 설치되는 위치의 기상정보, 대기질정보, 재난안내 등을 표출</li>

                        <li>· 온라인으로 공공데이터 포털 또는 주변 측정소에서 데이터를 받아<br/>&nbsp;&nbsp;&nbsp;전광판에 표출</li>

                        <li>· 주변 환경에 변화에 따른 최적의 화질 구현</li>

                          <li>· 시인성이 좋도록 다양한 형태의 이모티콘으로 표출</li>

                    </ul>

                </div>

                <p>방범용 전광판</p>

            </li>

        </ul>

    </div>