<template>
    <div class="mat-main">
        <section class="main-sec sec1">
            <!-- <div class="main-content"> -->
            <div class="flex">
                <!-- 매칭비주얼 -->
                <div class="matching-box-wrap">
                    <div class="w1400">
                        <div class="matching-wrap">
                            <div class="matching-img">
                                <img src="../../../../resources/jpg/mat-img.png" alt="">
                            </div>
                            <!-- 매칭 텍스트 -->
                            <div class="matching-text">
                                <i class="fa-regular fa-handshake fa-lg" style="color: #ffffff;"></i>
                                <p>기업 홍보관</p>
                            </div>
                            <div class="matching-img">
                                <img src="../../../../resources/jpg/mat-img1.png" alt="">
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </section>

        <!-- best기업 -->
        <section class="matching-box-main">
            <div class="matching-box-wrap-one">
                <div class="w1400">
                    <div class="matching-box-grid">
                        <!-- best 기업 -->
                        <h3>BEST 기업</h3>
                        <div class="matching-box-bos">


                            <div class="matching-box  matchingbox" @click="goToPage1">
                                <div>

                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>

                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                            <div class="matching-box  matchingbox">
                                <div>
                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>
                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                            <div class="matching-box  matchingbox">
                                <div>
                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>
                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                            <div class="matching-box  matchingbox">
                                <div>
                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>
                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                            <div class="matching-box  matchingbox">
                                <div>
                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>
                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                            <div class="matching-box matchingbox">
                                <div>
                                    <h3>(주)지학사</h3>
                                    <img src="../../../../resources/jpg/zigaksa.jpg" width="20px" alt="">
                                    <p>기업은 고객,고객은 기업이라는 마인드로 항상 고객의 만족을 최우선의 가치로 실천한다.</p>
                                    <div class="matchingbox-1">
                                        <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                        <p class="matchingbox-text">조회수 <span>120</span></p>

                                    </div>
                                    <div class="matching-span">

                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                        <span>#혁신기업</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
        <!-- 일반기업 -->
        <section class="matching-box-main">
            <div class="matching-box-main-two">
                <div class="w1400">
                    <div class="matching-box-grid-two">
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>

                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>
                        <div class="matching-box-2">
                            <div>
                                <h5>(주)금성출판사</h5>
                                <div class="matching-span">

                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                    <span>#혁신기업</span>
                                </div>
                                <div class="matchingbox-2">
                                    <p><i class="fa-regular fa-heart fa-lg" style="color: #3f87f7;"></i> 3045</p>
                                    <p>조회수 <span>110</span> </p>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

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

    },
    computed: {

    },
    mounted() {
        console.log('Matching mounted');
    }
}
</script>

<style scoped>
.matching-box-wrap {
    width: 100%;
    background: linear-gradient(#5dadf6, #2e87da, #5dadf6);
}

.matching-wrap {
    padding: 30px 30px;
    display: grid;
    width: 100%;
    /* border: 1px solid red; */
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
}

.matching-wrap div {
    /* width: 40%; */
    width: 100%;
    /* border: 1px solid red; */
}

.matching-wrap img {
    width: 100%;
    margin: 0 auto;
    /* text-align: center; */
    justify-content: center;
}

.matching-text {
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
    /* padding-bottom: 50px; */
    font-family: SBaggroM;
    color: white;
}

.matching-box-wrap-one {
    width: 100%;
    height: 100%;
    padding: 3rem;
    margin: 0 auto;
    text-align: center;
    color: #3f87f7;
    background-color: #e2e2e2;
}

.matching-box-grid>h3 {
    font-size: 2.6rem;
    padding: 3rem;
    font-family: SBaggroM;
}

.matching-box-bos {
    width: 100%;
    place-items: center;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.matchingbox {
    width: 90%;
    padding: 2rem;
}

.matchingbox h3 {
    padding: 1rem;
    font-size: 2rem;
    color: #3f87f7;
    font-family: "Pretendard-Regular";
}

.matchingbox img {
    /* padding: 2rem; */
    height: 119px;
    width: 80%;
    margin: 0 auto;
    object-fit: contain;
}

.matchingbox p:nth-child(3) {
    text-align: left;
    color: #333;
    font-size: 1.5rem;
    padding: 1rem;
}

.matchingbox p:nth-child(4) {
    text-align: right;
    font-size: 1.5rem;
    color: #333;

    padding: 1rem;
}

.matchingbox div {
    padding: 1rem;
    background-color: #ffffff;
    box-shadow: 2px 2px 2px #33333332;
    position: relative;
}

.matchingbox div:nth-child(1):before {
    position: absolute;
    content: "AA등급";
    line-height: 40px;
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    width: 90px;
    height: 40px;
    top: -25px;
    right: -5%;
    background-color: #3f87f7;
    border-radius: 45px;
    transform: translateX(-50%);
}

.matchingbox-1 {
    display: flex;
    box-shadow: 0px 0px 0px white !important;
    flex-direction: row;
    justify-content: flex-end;
}

.matchingbox-1 p {
    text-align: right;
    font-size: 1.5rem;
    padding: 1rem;
    color: rgb(6, 6, 6);
}

.matchingbox-text {
    text-align: right;
    font-size: 1.3rem;
    padding: 1rem;
    font-weight: 700;
    color: rgb(6, 6, 6);
}

.matchingbox-text span {
    font-weight: 400;
}

.matching-box-main-two {
    width: 100%;
    margin: 0 auto;
}

.matching-box-grid-two {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 0 auto;
    place-items: center;

    padding: 3rem;
}

.matching-box-2 {
    padding: 2rem;
    margin: 1rem;
    background-color: #f9f9f9;
    box-shadow: 2px 2px 5px #33333332;
}

.matching-box-2 div {
    display: flex;
    flex-wrap: wrap;
}

.matching-box-2 h5 {
    width: 100%;
    font-size: 1.5rem;
    font-family: "Pretendard-Regular";
}

.matching-box-2 p {
    width: 100%;
    font-size: 1.5rem;
    text-align: right;
    justify-content: right;
    font-family: "Pretendard-Regular";
}

.matchingbox-2 {
    width: 100%;

    display: flex;
    padding: 1.5rem 0px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    flex-direction: row !important;
}

.matchingbox-2 p {
    width: 25%;
}

@media all and (max-width:479px) {
    .matching-box img {
        width: 100%;
    }

    .matching-span span {
        padding: 1rem 1.5rem 1rem 1.5rem;
    }

    .matching-box-bos {
        grid-template-columns: 1fr;
    }

    .matching-box-grid-two {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .matching-text {
        /* display: none; */
        padding-top: 3rem;
        font-size: 2rem;
    }
}

@media all and (min-width: 480px) and (max-width: 767px) {
    .matching-box img {
        width: 100%;
    }

    .matching-box-bos {
        grid-template-columns: 1fr;
    }

    .matching-box-grid-two {
        grid-template-columns: 1fr;
    }

    .mat-sec-b {
        width: 90%;
    }

    .matching-text {
        font-size: 3rem;
    }
}

@media all and (min-width: 767px) and (max-width: 1023px) {
    .matching-box img {
        width: 100%;
    }

    .matching-box-bos {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }

    .matching-box-grid-two {
        grid-template-columns: 1fr 1fr;
    }

    .mat-sec-b {
        width: 90%;
    }
}

@media all and (min-width: 1023px) and (max-width: 1268px) {}
</style>