.con1 {
    background: url(../img/about/con1_img.png) no-repeat top center;
    background-size: cover;
    height: 44.1667rem
}

    .con1 .bgBox {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.5);
        text-align: center;
        padding-top: 14.75rem
    }

        .con1 .bgBox h3 {
            color: #fff;
            font-size: 4rem;
            margin-bottom: 1.6667rem;
            font-weight: 400
        }

        .con1 .bgBox p {
            color: #fff;
            font-size: 1.6667rem
        }

.title {
    font-size: 2.8333rem;
    color: #333;
    margin-bottom: 5.5rem;
    text-align: center
}

    .title p {
        display: inline;
        padding-bottom: 1rem;
        border-bottom: .3333rem solid #28bca0
    }

.con2 {
    padding-top: 7.5rem
}

    .con2 .flexBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }

        .con2 .flexBox img {
            width: 41.6667rem;
            height: 27.5rem;
            margin-right: 4.3333rem
        }

        .con2 .flexBox .txtBox {
            font-size: 1.25rem;
            color: #333;
            line-height: 1.8
        }

            .con2 .flexBox .txtBox p {
                text-indent: 2.7rem
            }

.con3 {
    padding-top: 10rem
}

    .con3 .flexBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .con3 .flexBox .item {
            width: 24.0833rem;
            height: 20.4167rem;
            position: relative
        }

            .con3 .flexBox .item img {
                width: 100%;
                height: 100%
            }

            .con3 .flexBox .item .txtBox {
                position: absolute;
                height: 5.0833rem;
                width: 100%;
                bottom: 0;
                left: 0;
                background: rgba(255,255,255,.6);
                -webkit-backdrop-filter: blur(0.65rem);
                backdrop-filter: blur(0.65rem);
                border-radius: 0px 0px 1rem 1rem;
                padding-left: 1.6667rem;
                padding-top: .5833rem;
                color: #333
            }

                .con3 .flexBox .item .txtBox p {
                    font-size: 1.6667rem
                }

                .con3 .flexBox .item .txtBox span {
                    font-size: 1.1667rem;
                    display: block
                }

.con4 {
    padding-top: 10rem;
    padding-bottom: 6.6667rem
}

    .con4 .list {
        position: relative;
        height: 62rem;
        width: 100rem
    }

        .con4 .list .line {
            width: 1px;
            height: 62rem;
            position: relative;
            left: 50%;
            top: 0;
            z-index: 1;
            background-color: #28bca0
        }

        .con4 .list .item {
            color: #333;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            font-size: 1.1667rem;
            line-height: 1.2;
            position: absolute;
            z-index: 2
        }

            .con4 .list .item .year {
                font-weight: bold;
                font-size: 1.6667rem;
                margin-right: 1rem;
                display: inline-block
            }

            .con4 .list .item .txt {
                margin-top: .3rem
            }

            .con4 .list .item:nth-child(odd) {
                left: calc(50% + 2.05rem)
            }

                .con4 .list .item:nth-child(odd)::before {
                    display: block;
                    content: "";
                    width: 1.0833rem;
                    height: 1.0833rem;
                    background: url(../img/about/con4_icon.jpg) no-repeat;
                    background-size: contain;
                    position: absolute;
                    top: .5rem;
                    left: -2.52rem;
                    z-index: 2
                }

            .con4 .list .item:nth-child(even) {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: reverse;
                -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
                right: calc(50% + 2.05rem)
            }

                .con4 .list .item:nth-child(even) .year {
                    margin-left: .6667rem
                }

                .con4 .list .item:nth-child(even)::before {
                    display: block;
                    content: "";
                    width: 1.0833rem;
                    height: 1.0833rem;
                    background: url(../img/about/con4_icon.jpg) no-repeat;
                    background-size: contain;
                    position: absolute;
                    top: .5rem;
                    right: -2.7rem;
                    z-index: 2
                }

            .con4 .list .item:nth-child(1) {
                top: 0
            }

            .con4 .list .item:nth-child(2) {
                top: 5.8333rem
            }

            .con4 .list .item:nth-child(3) {
                top: 11.6667rem
            }

            .con4 .list .item:nth-child(4) {
                top: 17.5rem
            }

            .con4 .list .item:nth-child(5) {
                top: 23.3333rem
            }

            .con4 .list .item:nth-child(6) {
                top: 29.1667rem
            }

            .con4 .list .item:nth-child(7) {
                top: 35rem
            }

            .con4 .list .item:nth-child(8) {
                top: 40.8333rem
            }

            .con4 .list .item:nth-child(9) {
                top: 46.6667rem
            }

            .con4 .list .item:nth-child(10) {
                top: 52.5rem
            }

            .con4 .list .item:nth-child(11) {
                top: 58.3333rem
            }

.con5 {
    padding-bottom: 5rem
}

    .con5 .flexBox {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between
    }

        .con5 .flexBox img {
            width: 32.5rem;
            height: 23.0833rem
        }

@media(max-width: 1280px) {
    .con3 .flexBox .item {
        width: 26.0833rem;
        height: 21.4167rem
    }
}

@media(max-width: 1024px) {
    .container {
        max-width: 130rem
    }

    .con3 .flexBox .item {
        width: 32.0833rem;
        height: 22.4167rem
    }

        .con3 .flexBox .item .txtBox {
            height: 6rem
        }

    .con4 .list {
        width: 130rem
    }
}

@media(max-width: 850px) {
    .con1 {
        height: 21.8666rem
    }

        .con1 .bgBox h3 {
            font-size: 2.1667rem
        }

        .con1 .bgBox {
            padding-top: 6.75rem;
            font-size: 1.3333rem
        }

    .container {
        padding-top: 3rem !important
    }

    .title {
        margin-bottom: 2.5833rem;
        font-size: 2rem
    }

    .con2 .flexBox {
        display: block
    }

        .con2 .flexBox img {
            width: 100%;
            height: 19.25rem;
            margin-right: 0
        }

    .con3 .flexBox {
        display: block
    }

        .con3 .flexBox .item {
            width: 100%;
            margin-bottom: 1.5rem
        }

            .con3 .flexBox .item:last-child {
                margin-bottom: 0
            }

    .con4 {
        padding-bottom: 0
    }

        .con4 .list {
            width: 100%;
            height: auto;
            padding-left: 2rem
        }

            .con4 .list .line {
                display: block;
                position: absolute;
                left: 1rem;
                height: 58.3333rem
            }

            .con4 .list .item:nth-child(even)::before {
                display: block;
                left: -1.5rem;
                z-index: 2
            }

            .con4 .list .item:nth-child(odd)::before {
                display: block;
                left: -1.5rem;
                z-index: 2
            }

            .con4 .list .item {
                position: relative;
                left: 0 !important;
                right: 0 !important;
                top: 0 !important;
                -webkit-box-orient: horizontal !important;
                -webkit-box-direction: normal !important;
                -ms-flex-direction: row !important;
                flex-direction: row !important;
                width: 100%;
                margin-bottom: 1.5rem;
                z-index: 2
            }

                .con4 .list .item .year {
                    margin-left: 0 !important
                }

                .con4 .list .item .txt {
                    margin-top: .4rem
                }

    .con5 {
        padding-bottom: 3rem
    }

        .con5 .flexBox {
            display: block
        }

            .con5 .flexBox img {
                width: 100%
            }
}