body {
    /*background-color: #07913B;*/
    background-image: url('/2025/img/frame/bg.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.row > * {
    padding-right: 0;
    padding-left: 0;
}

.langbar {
    position: absolute;
    background-image: url('/2023/img/black.png');
    color: white;
    font-size: 20px;
    /*font-weight:bolder;*/
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 5vw;
    z-index: 999999;
}


    .langbar a {
        color: white;
        text-decoration: none;
    }

        .langbar a:hover {
            color: white;
            text-decoration: none;
        }

.splitPoint {
    font-size: 30px;
    margin-left: 15px;
    margin-right: 15px;
}

#bannerContainer {
    margin-top: 140px;
    background-image: url('/2025/img/banner/bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1920 / 1116;
}

#bannerCanvas {
    width: 100%;
    height: 53vw;
    position: relative;
    overflow: hidden;
}

#bannerItem1 {
    width: 35vw;
    height: 10vw;
}

#bannerItem2 {
    width: 32vw;
    height: 10vw;
}

#bannerItem3 {
    width: 30vw;
    height: 17vw;
}

#bannerItem4 {
    width: 11vw;
    height: 8.5vw;
}

#bannerItem5 {
    width: 12vw;
    height: 8.5vw;
}

#moblieImg {
    display: none;
}


#mainContentContainer {
    /*background-image: url('/2023/img/frame/decoele2.png');
    background-position: bottom right;
    background-repeat: no-repeat;
    padding-top: 90px;
    padding-bottom: 90px;*/
}

    #mainContentContainer #maincontainerInner {
        /*padding-left: 18.64vw;
        padding-right: 18.64vw;
        padding-top: 100px;
        padding-bottom: 100px;*/
        padding: 100px 13.32vw;
        background-color: white;
        color: black;
        /*text-align: center;*/
    }

    #mainContentContainer h2 {
        font-size: 2.5rem;
        font-weight: bolder;
        text-align: center;
        margin-bottom: 2rem;
    }

    #mainContentContainer p {
        margin-bottom: 2rem;
        font-size: clamp(16px, 1vw, 24px);
    }

#news {
    /*padding-top: 38vw;*/
    /*background-position: 87vw center;*/
    padding-bottom: 8vw;
    /*background-image: url('/2023/img/frame/decotype1.png');
    background-repeat: no-repeat;*/
    position: relative;
}

#newsDeco1 {
    position: absolute;
    width: 85vw;
    height: 38vw;
    left: 50vw;
    top: 10vw;
    transform: translateX(-50%);
    background-image: url('/2025/img/frame/diabig.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

    #news h2 {
        font-size: 3rem;
        font-weight: bolder;
        text-align: center;
        /*margin-bottom: 2rem;*/
        color: #000000;
        letter-spacing: 4px;
    }

.newsImg {
    padding-left: 10%;
    padding-top: 5%;
    padding-bottom: 5%;
}


.item {
    background-color: white;
}

    .item .row {
        margin: 0;
    }

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
}

.owl-prev {
    display: none;
}

.owl-next {
    display: none;
}

.preNews
{
    cursor: pointer;
}

.nextNews
{
    cursor: pointer;
}

.newsBody {
    text-align: left;
    padding: 5%;
}

.newstitle {
    font-size: 1.6rem;
}

.newsContent{
    margin-top:10px;
}

.newsDate
{
    margin-top: 10px;
}

.newstitle a {
    color: black !important;
    text-decoration: none;
}

        .newstitle a:hover {
            color: black !important;
            text-decoration: none;
        }

#eventSection {
    padding-top: 8vw;
    padding-bottom: 8vw;
    background-image: url('/2023/img/bg_prg_long.jpg');
    background-size: cover;
}


    #eventSection h2 {
        font-size: 3rem;
        font-weight: bolder;
        text-align: center;
        margin-bottom: 2rem;
        color: white;
    }

.eventDecoRow {
    margin-bottom: 75px;
}

.eventContentContainer a {
    color: white;
    text-decoration: none;
}

.eventContentOutsider {
    background-image: url('/2023/img/prg_txtbox.png');
    background-size: cover;
}

.eventContentContainer {
    padding: 5%;
    color: white;
}

.eventTitleCol {
    display: flex;
    justify-content: center;
    align-items: center;
}

a.eventTitleBtn {
    /*position: relative;
    text-decoration: none;
    width: 100%;
    text-align: center;
    margin: 4px;
    margin-top:8px;
    margin-bottom:8px;
    border: 1px solid white;
    border-radius: 10px;*/
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.eventTitle {
    color: #000000;
    font-size: clamp(24px, 2.5vw, 72px);
    margin-bottom: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.eventListRow {
    padding-bottom: 70px;
}

.eventName {
    font-size: 25px;
    font-weight: bolder;
    border-bottom: 1px solid;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.btn-group > .btn.active, .btn-group > .btn:hover {
    background-color: black;
    color: white;
}

.eventTitleRow {
    padding-bottom: 120px;
}

.exhibitionTitleRow {
    padding-top: 70px;
    padding-bottom: 50px;
}


.exhibitionTitle {
    font-size: 36pt;
    color: #000000;
    font-weight: bolder;
    text-align: start;
}

.requestContainer a {
    color: white;
    text-decoration: none;
}

.requestContainer {
    background-image: url('/2023/img/prg_txtbox2.png');
    background-size: cover;
    padding: 5%;
    color: white;
}


.requestBlock {
    margin-top: 50px;
}

.eventTxt {
    line-height: 1.5rem;
    margin-bottom: 100px;
    overflow-wrap: normal;
    font-size: 20px;
    letter-spacing: 10px;
}

.eventLinkTxt {
    font-weight: bolder;
    font-size: 1.3rem;
    margin-right: 3vw;
}

#eventContentContainer .row {
    margin-left: 0;
    margin-right: 0;
}

.borderLeft {
    border-top: 1px solid #ffffff;
    margin-top: 8px;
    padding-top: 4px;
}

.underline {
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}

.marginTop50 {
    margin-top: 50px;
}

.lookForwardTxt {
    font-size: 32px;
    font-weight: bolder;
    color: #f7f2a1;
    margin-top: 100px;
    margin-bottom: 150px;
}

.preart {
    cursor: pointer;
}

.nextart {
    cursor: pointer;
}

.moreBtnCol {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
}

    .moreBtnCol .decoLine {
        /*width: 10px;
        border-top: 5px solid #d40019;*/
    }

.moreArtBtn {
    text-align: center;
    border-radius: 80px;
    height: 50px;
    width: 150px;
    /*border: 5px solid #d40019;*/
    background-color: #000000;
}

a .moreArtBtn {
    text-decoration: none;
}

a:hover .moreArtBtn {
    text-decoration: none;
}

a .moreArtTxtStyle {
    text-decoration: none;
    color: white;
    font-weight: bolder;
}

a:hover .moreArtTxtStyle {
    text-decoration: none;
    color: white;
    font-weight: bolder;
}

.decoLine {
    /*width: 100%;*/
    border-top: 2px solid #000000;
    /* margin-top: 1.3vw; */
}

.passBtn {
    text-align: center;
    background-color: #f7f2a1;
    margin-left: 20px;
    margin-right: 20px;
    border-radius: 80px;
    height: 150px;
    width: 150px;
}

.passTxtStyle {
    font-size: 25px;
    font-weight: bolder;
    color: #8e3db1;
    text-decoration: underline;
}

.requestTxt {
    font-size: 1.3rem;
    font-weight: bolder;
    letter-spacing: 0px;
}

.lookForwardTxt {
    font-size: 1.3rem;
}

#partners {
    /*background-color: #154E21;*/
    /*background-color: #F5EB10;*/
    background-color: #FFF100;
    padding-top: 5vw;
    padding-bottom: 3vw;
}

.partnerTitle {
    color: #000000;
}

#footer {
    /*background-color: #154E21;*/
    /*background-color: #F5EB10;*/
    background-color: #FFF100;
    padding-top: 5vw;
    padding-bottom: 5vw;
    color: #000000;
}

.h2, h2 {
    font-size: 3rem;
}

.height20vh {
    height: 20vh;
    align-items: center;
    justify-content: center;
}

#bannerSection {
    margin-top: 135px;
}

.section-events .row {
    margin-left: 0px;
    margin-right: 0px;
}

#eventInfo {
    /*background-position: 84vw, 90vw 15%, 95%;*/
    padding-top: 2vw;
    padding-bottom: 4vw;
    /*background-color: #0D9B43;
    background-image: url('/2023/img/frame/decotype2.png'),url('/2023/img/frame/decotype3.png');
    background-repeat: no-repeat;*/
}

/*.slideRight {
            position: absolute;
            top: 56%;
            left: 8.3vw;
        }

        .slideLeft {
            position: absolute;
            top: 56%;
            right: 8.3vw;
        }*/

.section-events {
    /*padding-top: 90px;*/
    padding-bottom: 4vw;
    position: relative;
}

.contentSection {
    padding-top: 4vw;
    padding-bottom: 4vw;
    position: relative;
}

#exhibition .item {
    background-color: transparent;
    color: white;
}

    #exhibition .item a {
        text-decoration: none;
        color: white;
    }

        #exhibition .item a:hover {
            text-decoration: none;
            color: white;
        }

/*.section-calendar .container {
            padding-left: 7vw;
            padding-right: 7vw;
        }*/

.mapContainer .row {
    margin-left: 0px;
    margin-right: 0px;
}

#otherInfo {
    /*background-position: left, -5vw 20%, 85%;
    background-color: #009646;*/
    padding-top: 50px;
    padding-bottom: 4vw;
    /*background-image: url('/2023/img/frame/prgele3.png'),url('/2023/img/frame/decotype4.png');
    background-repeat: no-repeat;*/
}

/*#eventGridModeBtn {
    background: white;
    color: #717171;
}

#eventListModeBtn {
    background: white;
    color: #717171;
}*/

.event .item {
    background-color: transparent;
    color: white;
}

    .event .item a {
        text-decoration: none;
        color: white;
    }

        .event .item a:hover {
            text-decoration: none;
            color: white;
        }

.highLine {
    padding-left: 0px;
    border-bottom: 0px solid #b09d60;
    margin-top: -1px;
    margin-left: 10px !important;
    margin-right: 10px !important;
    padding-bottom: 2em;
    margin-bottom: 10px;
}

.dayDetail h3 {
    font-size: 1rem;
    margin-top: 0px;
}

a.eventInList {
    color: #000000;
    text-decoration: none;
}

/*.section-moreInfo .container {
            padding-left: 7vw;
            padding-right: 7vw;
        }*/

.section-moreInfo .row {
    margin-left: 0px;
    margin-right: 0px;
}

.section-moreInfo a {
    color: #000000;
    text-decoration: none;
}

    .section-moreInfo a:hover {
        color: #000000;
        text-decoration: none;
    }

#eventInfo .item {
    background-color: transparent;
    color: white;
}

.contentLink {
    /*color: white;*/
    color: #000000;
    text-decoration: none;
}

    .contentLink:hover {
        /*color: white;*/
        color: #000000;
        text-decoration: underline;
    }

.title {
    color: #000000;
    font-weight: bolder;
}

.contentBxHeader {
    color: #000000;
    font-weight: bolder;
}

.mapContainer {
    padding-bottom: 7vw;
    padding-bottom: 7vw;
}

#calendar {
    min-height: 800px;
}


#map {
    height: 50vh;
}

.googleText {
    font-weight: bold;
    margin: 10px;
}

#outreach .height20vh{
    height:auto;
    margin-bottom:2vw;
}

.outReachBtn {
    margin-bottom: 3vw;
    color: white;
    font-weight:bolder;
    font-size:2rem;
    cursor:pointer;
}

.outreachTxt {
    padding-top: 20px;
    /* font-weight: bolder; */
    color: white;
    font-size: 26px;
    text-align: center;
}

.outReachHidden{
    display:none!important;
}

.outReachShow{
    display:flex!important;
}

.artName {
    padding-top: 20px;
}

.outreachEventName {
    padding-top: 20px;
}

#outreach .item {
    background-color: transparent;
}

@media only screen and (max-width: 770px) {
    #bannerSection {
        margin-top: 40px;
    }

    body {
        overflow-x: hidden;
        background-image: url(/2025/img/frame/bg_mobile.png);
    }

    .moreArtBtn {
        height: 40px;
        width: 100px;
    }

    .height20vh {
        height: auto;
        padding-top: 8vw;
        padding-bottom: 4vw;
    }


    #mainContentContainer {
        /*background-image: url('/2023/img/frame/decoele1.png');*/
        background-repeat: no-repeat;
        /*background-position: bottom left;*/
        padding-bottom: 0;
    }

        #mainContentContainer #maincontainerInner {
            /*background-color: transparent;*/
            padding: 25px;
            color: #000000;
        }

        #mainContentContainer h2 {
            font-size: 2rem;
        }

    #mainContent h2 {
        font-size: 2rem;
    }

    .newsImg {
        padding: 0;
        padding-bottom: 5%;
    }

    .newstitle {
        font-size: 24px;
    }


    .newsContent {
        display: none;
    }

    #eventInfo {
        padding-top: 12vw;
    }

    .eventTitleRow {
        padding-bottom: 0;
    }

    .partner {
        margin-right: 0px;
    }

    .smallLogo {
        padding-right: 20px;
    }

    .star {
        display: none;
    }

    #news h2 {
        font-size: 2rem;
    }

    #eventSection h2 {
        font-size: 2rem;
    }

    #otherInfo {
        background-image: none;
        padding-top: 12vw;
    }

    .dayDetail {
        margin-top: 0 !important;
    }

    .langbar {
        padding-right: 5vw;
    }



    #partners {
        padding-left: 3vw;
        padding-right: 3vw;
    }

    .h2, h2 {
        font-size: 2rem;
    }

    .slideBtn {
        display: none !important;
    }

    .contentSection {
        padding: 0;
    }

    .moreBtnCol {
        margin-top: 0;
    }

    #news .owl-carousel .owl-item {
        padding-left: 5px;
        padding-right: 5px;
    }

    #calendar {
        height: auto !important;
        min-height: initial;
    }


    .container.containerBorder {
        padding-left: 5.78vw;
        padding-right: 5.78vw;
    }

    .section-events {
        /*padding-top: 0;
        padding-bottom: 0;*/
        padding-bottom: 8vw;
    }

    .decoLine {
        border-top: none;
    }

    #videoContainer {
        padding: 0;
    }

    .partnerTitle {
        line-height: 50px;
    }

    .section-moreInfo a p {
        margin-bottom: 30px;
        font-size: 22px;
    }

    #moreInfo {
        padding-bottom: 50px !important;
        padding-top: 50px;
    }

    .eventDecoRow {
        margin-bottom: 10px;
    }

    p.mobileEventTitle {
        border: 2px solid;
        border-radius: 10px;
        padding: 5px;
        text-align: center;
        font-size: 20px;
    }

    a.mobileEventTitleBtn {
        color: white;
        text-decoration: none;
    }

    a:hover.mobileEventTitleBtn {
        color: white;
        text-decoration: none;
    }

    #partners {
        padding-left: 0;
        padding-right: 0;
    }

    .contentBxImg {
        padding-bottom: 5vw;
    }

    .contentBox {
        font-size: 18px;
    }

    .date {
        height: auto !important;
    }

    .mapContainer {
        padding-bottom: 0;
    }

    .outReachBtn{
        font-size:1.5rem;
    }

    .outreachTxt {
        font-size: 20px;
    }
}

@media only screen and (min-width: 768px) {
    #intro {
        position: relative;
        padding-top: 5vw;
        /*padding-bottom: 5vw;*/
        height: 42vw;
    }

    #introDeco {
        position: absolute;
        width: 85vw;
        height: 38vw;
        left: 50vw;
        top: 10vw;
        transform: translateX(-50%);
        background-image: url('/2025/img/frame/diabig.png');
        background-repeat: no-repeat;
        background-size: 100%;
        z-index: 1;
    }

    #introText {
        position: absolute;
        width: 90%;
        height: 29vw;
        padding: 0 14.1vw;
        left: 50vw;
        top: 10vw;
        transform: translateX(-50%);
        color: black;
        text-align: justify;
        align-content: center;
        z-index: 10;
        line-height: 1.7;
    }

        #introText h2 {
            font-size: 2.5rem;
            font-weight: bolder;
            text-align: center;
            margin-bottom: 2rem;
        }

        #introText p {
            margin-bottom: 2rem;
            font-size: clamp(16px, 1vw, 24px);
        }

    #eventOverviewContainer
    {
        position: relative;
        height: 80vw;
    }

    #exhibitionType1 {
        position: absolute;
        width: 49vw;
        height: 13.5vw;
        left: 50%;
        top: 1vw;
        transform: translateX(-50%);
    }

    #exhibitionType2 {
        position: absolute;
        width: 46.5vw;
        height: 12vw;
        left: 58%;
        top: 15.5vw;
        transform: translateX(-50%);
    }

    #exhibitionType3 {
        position: absolute;
        width: 40vw;
        height: 12vw;
        left: 43%;
        top: 28vw;
        transform: translateX(-50%);
    }

    #exhibitionType4 {
        position: absolute;
        width: 40vw;
        height: 11.5vw;
        left: 60%;
        top: 41vw;
        transform: translateX(-50%);
    }

    #exhibitionType5 {
        position: absolute;
        width: 48vw;
        height: 10vw;
        left: 48%;
        top: 53.5vw;
        transform: translateX(-50%);
    }

    #exhibitionType6 {
        position: absolute;
        width: 35vw;
        height: 8.5vw;
        left: 54%;
        top: 64.5vw;
        transform: translateX(-50%);
    }
}

@media only screen and (max-width: 767px) {
    #bannerContainer {
        margin-top: 40px;
        background-image: url('/2025/img/banner/vertbg.png');
        background-size: cover;
        background-repeat: no-repeat;
        aspect-ratio: 1920 / 2579;
    }

    #bannerCanvas
    {
        height: 125vw;
    }

    #bannerItem1 {
        width: 65vw;
        height: 18.5vw;
    }

    #bannerItem2 {
        width: 60vw;
        height: 18.5vw;
    }

    #bannerItem3 {
        width: 50vw;
        height: 28.5vw;
    }

    #bannerItem4 {
        width: 20vw;
        height: 15.5vw;
    }

    #bannerItem5 {
        width: 22vw;
        height: 16vw;
    }

    #intro {
        height: auto;
        padding-bottom: 12vw;
    }

    #introDeco {
        display: none;
    }

    #introText {
        position: relative;
        width: auto;
        height: auto;
        padding: 8vw 5.78vw;
        text-align: justify;
        align-content: center;
        z-index: 10;
    }

        #introText .row {
            padding: 25px;
            background-color: #ffffff;
        }

        #introText h2 {
            font-size: 2rem;
            font-weight: bolder;
            text-align: center;
            margin-bottom: 2rem;
        }

    .exhibitionTitle {
        font-size: 24pt;
        color: #000000;
        font-weight: bolder;
        text-align: center;
    }

    #exhibitionType1 {
        position: relative;
    }

    #exhibitionType2 {
        position: relative;
    }

    #exhibitionType3 {
        position: relative;
    }

    #exhibitionType4 {
        position: relative;
    }

    #exhibitionType5 {
        position: relative;
    }

    #exhibitionType6 {
        position: relative;
    }
}

@media only screen and (max-width: 500px) {

    #moblieImg {
        display: block;
    }

    #desktopImg {
        display: none;
    }
}

@media only screen and (max-width: 1440px) and (min-width: 1181px) {
    #intro {
        height: 53vw;
    }

    #introDeco {
        height: 49.5vw;
        background-image: url('/2025/img/frame/dia7.png');
    }

    #introText {
        height: 40.5vw;
    }
}

@media only screen and (max-width: 1180px) and (min-width: 881px) {
    #intro {
        height: 84vw;
    }

    #introDeco {
        height: 79.5vw;
        background-image: url('/2025/img/frame/dia8.png');
    }

    #introText {
        height: 72vw;
    }
}

@media only screen and (max-width: 880px) and (min-width: 768px) {
    #intro {
        height: 112vw;
    }

    #introDeco {
        height: 112vw;
        background-image: url('/2025/img/frame/dia9.png');
    }

    #introText {
        height: 98.5vw;
    }
}