<template>
    <div class="w1400">
        <section class="tech-logo">
            <img src="../../../../resources/jpg/tech-logo.png" alt="">

            <h1>기술문서</h1>
        </section>

        <div class="tech-sec">
            <section class="tech-sec1">
                <h2>2022년 온라인 콘텐츠 활용 교과서 선도학교 교원 역량 효과성 분석</h2>
                <div>
                    <input type="file" id="dtaildown" style="display: none;">
                    <label for="dtaildown">기술문서 다운로드</label>
                    <i class="fa-solid fa-download" style="color: #ffffff;"></i>
                </div>
            </section>

            <!-- /상세내용 -->
            <section class="tech-sec2">
                <section>

                    <div>
                        <img src="../../../../resources/jpg/tech-img.png" alt="">
                    </div>
                    <div>
                        <p><span>연구책임자</span> 정종원</p>
                        <p><span>연구진</span> 안성훈, 최준석, 이정태, 나화정, 민예슬</p>
                        <p><span>담당부서</span> 디지털교과서부</p>
                    </div>
                </section>
                <div class="tech-sec2-end">

                    <p><span>조회수</span>45454</p>

                </div>
            </section>

            <section class="tech-sec2-bt">
                <button @click="goToPage4">목록</button>
            </section>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        goToPage4() {
            this.$router.push('/Technology.page')
        }
    },
    watch: {

    },
    computed: {

    },
    mounted() {
        console.log('Technology mounted');
    }
}
</script>
<style scoped>
.tech-logo {
    padding: 6rem 2rem 2rem 2rem;
    width: 85%;
}

.tech-logo h1 {
    font-size: 4rem;
    font-family: SBaggroM;
    font-weight: 500;
    color: #0e0077;
    /* position: relative; */

}

.tech-logo img {
    width: 10rem;
}

.tech-sec {
    width: 100%;
    padding: 2rem;
}

.tech-sec1 {
    display: grid;
    grid-template-columns: 85% 15%;
    padding: 2rem 3rem 1rem 3rem;
    background-color: #f4f4f4;
    border-top: 1px solid rgb(199, 199, 199);
}

.tech-sec1 h2 {
    font-size: 2rem;
    color: #3f87f7;
}


.tech-sec1 div {
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 3rem;
    /* text-align: right; */
    text-align: center;
    background-color: #3f87f7;

}

.tech-sec1 div label {
    color: white;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.tech-sec1 div i {
    font-size: 1.5rem;
}

.tech-sec2 {

    border-top: 1px solid rgb(199, 199, 199);
    border-bottom: 1px solid rgb(199, 199, 199);
}

.tech-sec2 section {
    display: grid;
    grid-template-columns: 50% 1fr;
}

.tech-sec2 section div:nth-child(1) {
    /* background-color: gainsboro; */
    padding: 6rem;
    /* border: 1px solid red; */

    /* justify-content: space-between; */
    text-align: right;
}

.tech-sec2 section div:nth-child(2) {
    /* border: 1px solid red; */
    padding: 6rem;
    display: grid;
    grid-template-columns: 1fr;
}

.tech-sec2 section div:nth-child(2) p {
    border-top: 1px solid gainsboro;
    padding: 4rem;
}

.tech-sec2 section div:nth-child(2) span {
    color: #3f87f7;
    font-size: 2rem;
    font-weight: 700;
}

.tech-sec2 section img {
    padding: 5rem;
    margin: 0 auto;
    box-shadow: 1px 1px 5px 5px #b2b2b236;
    background-color: rgb(190, 190, 190);
    /* border: 1px solid red; */
    width: 50%;
}

.tech-sec2 div {
    padding: 2rem 0;
}



.tech-sec2 p {
    font-size: 1.7rem;

}

.tech-sec2-end p {
    text-align: right;
    font-size: 1.5rem;
}

.tech-sec2-end p span {
    color: #3f87f7;
    margin-right: 1rem;
}

.tech-sec2-end p:nth-child(2) {
    text-align: right;
}


.tech-sec2-bt {
    text-align: right;
    width: 100%;
    padding: 2rem 0 6rem 0;
}

.tech-sec2-bt button {
    width: 15%;
    padding: 1rem;
    background-color: #3f87f7;
    color: white;
    border-radius: 0.5rem;
    font-family: "Pretendard-Regular";

}

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

    .tech-logo,
    .tech-logo img {
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
    }

    .tech-sec1 {
        grid-template-columns: 1fr;
    }

    .tech-sec2 section {

        grid-template-columns: 1fr;
    }

    .tech-sec2 section img {
        padding: 0rem;
    }

    .tech-sec2 section div:nth-child(1) {
        padding: 5rem 2rem;
    }
}

@media all and (min-width: 480px) and (max-width: 767px) {

    .tech-logo,
    .tech-logo img {
        /* width: 100%; */
        margin: 0 auto;
        text-align: center;
    }

    .tech-sec1 {
        grid-template-columns: 1fr;
    }

    .tech-sec2 section {

        grid-template-columns: 1fr;
    }

    .tech-sec2 section img {
        padding: 0rem;
    }

    .tech-sec2 section div:nth-child(1) {
        padding: 5rem 2rem;
    }
}

@media all and (min-width: 767px) and (max-width: 1023px) {
    .tech-sec1 {
        grid-template-columns: 75% 25%;
    }
}

@media all and (min-width: 1023px) and (max-width: 1268px) {
    .tech-sec1 {
        grid-template-columns: 80% 20%;
    }
}
</style>
