.site-paragraph {
    padding-bottom: 0;
}

.site-item {
    padding-bottom: 0;
}

.history {
    padding: var(--sectionper) calc(var(--sectionper) * 1.5);
}

.section-history-0 {
    background: linear-gradient(to right, #214592 70%, #0a152c 100%);
}

@media screen and (min-width: 768px) {
    .section-history-0 {
        padding-left: 3%;

    }
}

.section-history-title {
    padding: calc(var(--sectionper) * 6) var(--sectionper);

}

@media screen and (min-width: 768px) {
    .section-history-title {
        padding: calc(var(--sectionper) * 4) calc(var(--sectionper) * 1.5);
        padding-bottom: 0;
    }
}

@media screen and (min-width: 1024px) {
    .section-history-title {
        padding: calc(var(--sectionper) * 2) var(--sectionper);
    }
}

.site-title--event {
    margin-bottom: -5%;
    position: relative;
    z-index: 1;
}

.history-bg-title {
    position: absolute;
    top: 15%;
    right: 0%;
    z-index: 0;

}

@media screen and (min-width: 1024px) {
    .history-bg-title {
        top: 0%;
    }
}

.site-title-vertical {
    position: relative;
    z-index: 2;
}

.section-history-content {
    margin-top: -10%;
    margin-left: -3%;
}

/* 輪播 */
.carousel {
    width: 100%;
    overflow: hidden;
    padding-bottom: 2%;
}
.carousel ul {
    overflow: visible;
    position: relative;
}
.carousel li {
    margin: 0 10px;
    overflow: hidden;
}

.carousel-item-img {
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.carousel-item-img:hover .img-mask{opacity: 1;}

.carousel-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.carousel-link:hover {
    cursor: pointer;
}

/*-------------標題----------------*/
.history-content {
    margin-left: 0%;
    margin-right: 0%;
}

.history-title-up {
    background-color: #d6d6d6;
    color: var(--sub-color) !important;
    border: 1px solid #fff;
    transform: skew(-15deg);
    padding: 0.5rem 2rem;
}

/*--------------內容---------------*/

.history-text-title {
    background-color: #C9CACA;
    color: var(--sub-color);
    padding: 0.1rem;
}

/*---------圖------*/

/*history-1*/
.section-history-1 {
    background-image: url(../img/all/footer_Maskgroup.svg);
    background-size: 30%;
    background-repeat: no-repeat;
    background-position: top 50px right;

}

@media screen and (min-width: 1024px) {
    .history-pic1 {
        clip-path: polygon(-50px 0, 100% 175px, calc(100% - -50px) 100%, 0 100%);
    }

    .history-title1 {
        position: relative;
        left: -65%;
        top: -5%;
    }
}

/*history-2*/

@media screen and (min-width: 1440px) {
    .history-content-2 {
        margin-left: -10%;
        margin-right: 10%;
    }

}

/*history-3*/
.section-history-3 {
    background-image: url(../img/history/bg-lattice.svg);
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: center right;
}

@media screen and (min-width: 768px) {
    .section-history-3 {
        background-image: url(../img/history/bg-lattice.svg);
        background-size: 60%;
        background-position: top 40% right;
    }
}

@media screen and (min-width: 1024px) {

    .history-pic3 {
        margin-left: -12.5%;
        margin-right: 12.5%;
    }
}

.history-content-pic3 {
    display: none;
}

@media screen and (min-width: 1024px) {
    .history-content-pic3 {
        display: block;
        position: absolute;
        width: 17.5%;
        right: 0%;
        bottom: 0%;
    }
}

@media screen and (min-width: 1600px) {
    .history-title3 {
        position: relative;
        left: -50%;
        top: 70%;
    }
}

/*history-4*/

@media screen and (min-width: 1024px) {
    .section-history-4 {
        padding-right: 0;
    }

    .history-content-4 {
        margin-left: -5%;
        margin-right: 5%;
    }
}

/*history-5*/
@media screen and (min-width: 1024px) {
    .history-content-5 {
        margin-left: 5%;
    }
}

/*history-6*/
.history-content-pic6 {
    position: absolute;
    width: 40%;
    top: -27.5%;
    z-index: 1;
    left: -10%;
}

@media screen and (min-width: 768px) {
    .history-content-pic6 {
        top: -35%;
    }
}

@media screen and (min-width: 1024px) {
    .section-history-6 {
        padding-left: 0;
    }

    .history-content-6 {
        margin-left: -7.5%;
    }

    .history-content-pic6 {
        width: 30%;
        top: -20%;
        left: 0;
        z-index: 1;
    }
}

/*history-7*/
.history-content-pic-l {
    display: none;
}

.history-content-pic-r {
    display: none;
}

@media screen and (min-width: 1440px) {
    .history-content-pic-l {
        position: absolute;
        left: 0%;
        z-index: -1;
        display: block;
    }

    .history-content-pic-r {
        position: absolute;
        right: 0%;
        z-index: -1;
        display: block;
    }

    .history-content-7 {
        position: absolute;
        z-index: 3;
        left: 25%;
        top: 85%;
    }
}

/*history-8*/
.history-img8 {
    display: none;
}

.history-content-pic8 {
    display: none;
}

@media screen and (min-width: 1440px) {
    .history-mobile {
        display: none;
    }

    .history-img8 {
        display: block;
    }

    .section-history-8 {
        padding-right: 0;
    }

    .history-content-pic8 {
        display: block;
        position: absolute;
        left: 0;
        top: 17.5%;
    }
}

/*history-9*/

@media screen and (min-width: 1024px) {
    .history-content-9 {
        margin-left: 5%;
    }
}

/*history-10*/
.history-content-10 {
    display: flex;
    flex-direction: column;
}

.history-text10 {
    display: flex;
    flex-direction: column;
}

@media screen and (min-width: 1024px) {
    .section-history-10 {
        position: relative;
        background-image: url(../img/history/s10.jpg);
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
    }

    .section-history-10::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1;
    }

    .section-history-10>* {
        position: relative;
        z-index: 2;
    }

    .history-pic10 {
        display: none;
    }

    .history-content-10 {
        padding: calc(var(--sectionper) *4);
        display: flex;
        flex-direction: row;
        position: relative;
        top: 45%;
    }

    .history-text10 {
        position: relative;
        display: flex;
        flex-direction: row;
        min-width: 500px;
        margin-left: 20%;
        margin-right: -10%;
        top: 60%;
    }
}

@media screen and (min-width: 1280px) {
    .history-content-10 {
        padding: calc(var(--sectionper) *6);
    }
}

@media screen and (min-width: 1600px) {
    .history-content-10 {
        padding: calc(var(--sectionper) *8);
    }
}

/*history-11*/



@media screen and (min-width: 1024px) {
    .section-history-11 {
        padding-top: 0;
        padding-left: 0;
        width: 100%;
    }

    .history-content-11 {
        margin-left: -5%;
    }

    .history-content-pic11 {
        width: 30%;
        top: -20%;
        left: 0;
        z-index: 1;
    }
}

/*history-12*/
.history-content-pic12 {
    position: absolute;
    width: 30%;
    z-index: -1;
    left: -10%;
    top: 75%;

}

@media screen and (min-width: 1024px) {

    .history-content-pic12 {
        width: 30%;
        top: 50%;
        left: 0;
    }

    .history-content-12 {
        margin-left: -5%;
        margin-right: 5%;
        max-width: 400px;
    }
}

@media screen and (min-width: 1600px) {
    .history-content-12 {
        margin-left: -10%;
        margin-right: 10%;
    }
}

/*history-13*/
@media screen and (min-width: 1024px) {
    .section-history-13 {
        padding-top: 0;
        padding-left: 0;
        margin-top: -10%;
    }
}

/*history-14*/
.history-content-pic14 {
    position: absolute;
    top: -70%;
    right: 0;
    width: 25%;
}

@media screen and (min-width: 1024) {
    .history-content-pic14 {
        width: 30%;
        top: -37%;
    }
}

@media screen and (min-width: 1024px) {
    .section-history-14 {
        padding-left: 1%;
    }

    .history-pic14 {
        margin-right: -15%;
    }

    .history-content-14 {
        max-width: 500px;
        margin-left: 10%;
        margin-bottom: 5%;
    }

    .history-content-pic14 {
        width: 40%;
        top: -35%;
    }
}