<template>
    <div class="content2">
        <div class="flex-column justify-center align-center" style="width: 1400px; margin: 0 auto; height:100%">
            <div>
                <div class="mb30"><img src="../../../../resources/img/system.png" alt="시스템 점검 이미지" class="system-img ma" />
            </div>
            <div>
                <div class="system-title mb30 text-ct">시스템 <strong class="system-message">점검 중</strong>입니다.</div>
                <div class="mb15 text-ct">
                    <strong>안녕하세요, AI 디지털교과서 통합지원센터 입니다.</strong><br />
                    빠르고 안정적인 서비스를 제공하기 위해
                    시스템 점검 작업을 진행 중입니다.<br />
                    이에 서비스가 다음과 같이 중지될 예정이오니 서비스 이용에 참고하시기 바랍니다.<br />
                </div>
                <div class="shadow-box text-lf pd30 mb15 radius">
                    <div class="flex align-center mb5"><img src="../../../../resources/img/check_bullet.png" alt="bullet" class="mr10"/> <strong class="system-text1 block system-message ">작업시간 : 2024. 7. 19.(금), 18:30 ~ 7. 20.(토), 15:00</strong></div>
                    <div class="flex align-center mb5"><img src="../../../../resources/img/check_bullet.png" alt="bullet" class="mr10"/> <strong class="system-text2 block ">작업내용 : 시스템 정기 점검</strong></div>
                    <div class="flex align-center "><img src="../../../../resources/img/check_bullet.png" alt="bullet" class="mr10"/> <strong class="system-text3 block ">중지대상 : AI 디지털교과서 통합지원센터 홈페이지</strong></div>
                </div>
                <div class="text-ct">
                    서비스 이용에 불편을 드리는 점 양해부탁드립니다.<br />
                    보다 나은 서비스를 제공하기 위해 노력하겠습니다.<br />
                    감사합니다.<br />
                </div>
            </div>
            </div>
        </div>
    </div>
</template>



<script>

export default {
    data() {
        return {

        }
    },
    methods: {


    },
    watch: {

    },
    computed: {

    },
    components: {

    },
    mounted() {
    },

}
</script>

<style>
.content2 {
    width: 100%;
    height: 100vh;
    background-color: #f8f8f8;
}

.mb30 {
    margin-bottom: 3rem;
}

.text-ct {
    text-align: center;
}

.system-message {
    color: var(--red);
}

.shadow-box {
    background-color: var(--white);
    box-shadow: 0 0 .5rem #ddd;
}

.shadow-box p,
.system-text2,
.system-text3 {
    color: var(--gray-dark)
}

.system-text1,
.system-text2,
.system-text3 {
    font-size: 2rem;
}

.system-title {
    font-size: 4rem;
}
</style>
