html{scroll-behavior: smooth;}
.bntop, .bnmtop, .bntl, .bnmtl{display: none;}

.header-container{box-shadow: 0px 5px 5px -5px #333;}
.subhead-container{display: none;}

.creative{display: flex; flex-direction: column; align-items: center; width: 100%;}

.creative h3{font-size: 40px; margin: 50px 0 100px; color: #c6603a; font-weight: normal; text-align: center;}
.creative .black{color: #333;}

.creative .h{display: flex; align-items: center; width: calc(100% - 100px); color: #c6603a; padding: 20px 0; margin: 0 0 100px;border-bottom: 1px solid #c6603a;}

.creative .h a{color: inherit; text-decoration: none;}
.creative .h .logo{font-size: 35px; white-space: nowrap;}
.creative .h .menu{display: flex; align-items: center; justify-content: right; font-family: 'PT Sans Narrow', sans-serif; font-size: 40px; font-weight: bold; width: 100%;}
.creative .h .menu .item{margin: 0 0 0 40px;}

.creative .posts{display: flex; flex-direction: column; width: 1200px; margin: 0 0 100px;}
.creative .posts a{color: inherit; text-decoration: none;}
.creative .posts .list{display: flex; margin: 0 0 50px;}
.creative .posts .list .item{width: calc(100% / 3); margin: 0 0 0 20px;}
.creative .posts .list .item .image{width: 100%; overflow: hidden; aspect-ratio: 1/1; border-radius: 3px;}
.creative .posts .list .item .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.creative .posts .list .first{margin: 0;}
.creative .posts .data .title{font-size: 20px; font-weight: bold; margin: 30px 0 10px;}
.creative .posts .data .subtitle{font-size: 14px; line-height: 22px;}
.creative .posts .btn{margin: 30px 0 0; color: #fff; background: #c6603a; width: fit-content; border-radius: 6px;}
.creative .posts .btn a{display: block; padding: 10px 15px;}

.creative .posts .tags{display: flex; justify-content: left;}
.creative .posts .tags a{display: block; color: #c6603a; padding: 15px 20px;}
.creative .posts .tags a:hover{color: #fff;}
.creative .posts .tags .item{background: #e6e6e6; margin: 0 10px 0 0; border-radius: 25px;}
.creative .posts .tags .item:hover{background: #c6603a;}

.creative .events{display: flex; align-items: center; flex-direction: column; background: #1a1a2f; width: 100%; color: #fff; overflow: hidden; position: relative;  margin: 0 0 100px;}
.creative .events .marquee{width:calc(100% - 60px); display: flex; font-size: 20px; padding: 30px; overflow: hidden;}
.creative .events .marquee .item{white-space: nowrap; margin: 0 20px 0 0;}

.creative .events .slider{display: flex; width: 1200px; margin: 100px 0; position: relative; left: 0;}
.creative .events .slider .item{min-width: 300px; background: #222; margin: 0 40px 0 0;}
.creative .events .slider .item a{display: flex; flex-direction: column; color: #fff; text-decoration: none;}
.creative .events .slider .item .image{width: calc(100% - 40px); aspect-ration: 4/3; margin: 20px;}
.creative .events .slider .item .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.creative .events .slider .data{margin: 20px;}
.creative .events .slider .data .title{font-size: 28px; margin: 20px 0;}
.creative .events .slider .data .subtitle{margin: 20px 0; line-height: 28px;}

.creative .events .slider .normal-reverse a{flex-direction: column-reverse;}
.creative .events .slider .normal-reverse .image{margin-top: 0;}

.creative .events .slider .cover-reverse{position: relative;}
.creative .events .slider .cover-reverse .image{width: 100%; margin: 0; height: 100%; position: absolute;}
.creative .events .slider .cover-reverse .image img{filter: brightness(60%);}
.creative .events .slider .cover-reverse .data{position: absolute; bottom: 0; margin-bottom: 10px;}

.creative .events .slider .cover{position: relative;}
.creative .events .slider .cover .image{width: 100%; margin: 0; height: 100%; position: absolute;}
.creative .events .slider .cover .image img{filter: brightness(60%);}
.creative .events .slider .cover .data{position: absolute; top: 0; margin-top: 10px;}

.creative .events .switch{display: flex; width: 100%; top: calc(50% - 16px); position: absolute;}
.creative .events .switch div{display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #333333bd; border-radius: 50%; cursor: pointer;
    transition: background-color 0.3s; z-index: 100;
}
.creative .events .switch div:hover{background: #333;}
.creative .events .switch div:active{background: #666666db;}
.creative .events .switch .left{left: 20px; position: relative;}
.creative .events .switch .left img{display: block; margin: 0 3px 0 0;}
.creative .events .switch .right{right: 20px; position: absolute;}
.creative .events .switch .right img{display: block; margin: 0 0 0 3px;}

.creative .support{width: 1200px; display: flex; align-items: center; justify-content: center; margin: 0 0 100px;}
.creative .support .list{width: 25%;}
.creative .support .list a{display: flex; margin: 20px 0; color: inherit; text-decoration: none;}
.creative .support .list .reverse a{flex-direction: row-reverse;}
.creative .support .list .item .data{}
.creative .support .list .item .image{margin: 0 20px 0 0;}
.creative .support .list .item .image img{width: 55px;}
.creative .support .list .item .data .title{font-size: 28px; font-weight: bold; margin: 0 0 20px 0;}
.creative .support .list .item .data .subtitle{line-height: 28px;}
.creative .support .list .reverse .image{margin: 0 0 0 20px;}
.creative .support .list .reverse .data .title{text-align: right;}
.creative .support .list .reverse .data .subtitle{text-align: right;}
.creative .support .front{width: 50%;}
.creative .support .front img{width: 100%;}

.creative .about{display: flex; justify-content: center; width: 100%; margin: 0 0 100px; padding: 100px 0; background: #1a1a2f; color: #fff;}
.creative .inner{display: flex; width: 1200px;}
.creative .about .insta{width: 50%; display: flex; flex-wrap: wrap; margin-bottom: -20px;}
.creative .about .insta .image{width: calc(50% - 20px); aspect-ratio: 1/1; overflow: hidden; margin: 0 20px 20px 0;}
.creative .about .insta .image img{display: block; width: 100%; height: 100%; object-fit: cover;}
.creative .about .data{width: 50%;}
.creative .about .data .title{font-size: 40px; font-weight: bold; margin: 0 0 30px 40px;}
.creative .about .data .subtitle{margin: 0 0 0 40px; font-size: 20px; line-height: 35px;}

.creative .gallery{width: 800px; position: relative; margin: 0 0 100px;}
.creative .gallery .switch{display: flex; width: 100%; top: calc(50% - 32px); position: absolute;}
.creative .gallery .switch div{display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: #c6603abd; border-radius: 50%; cursor: pointer;
    transition: background-color 0.3s; z-index: 100;
}
.creative .gallery .switch div:hover{background: #c6603a;}
.creative .gallery .switch div:active{background: #e4c8bddb;}
.creative .gallery .switch .left{left: -45px; position: relative;}
.creative .gallery .switch .left img{display: block; margin: 0 3px 0 0;}
.creative .gallery .switch .right{right: -45px; position: absolute;}
.creative .gallery .switch .right img{display: block; margin: 0 0 0 3px;}

.creative .gallery .slider{width: 100%; overflow: hidden; position: relative; aspect-ratio: 16/9;}
.creative .gallery .slider .image{width: 100%; height: 100%; position: absolute; transition: visibility 0.3s; opacity: 0; cursor: zoom-in;}
.creative .gallery .slider .image img{display: block; width: 100%; height: 100%; object-fit: cover;}

@media screen and (max-width: 1280px)
{
    .creative .h{justify-content: center; flex-direction: column;}
    .creative .h .logo{margin: 0 0 100px;}
    .creative .h .menu{justify-content: center; flex-direction: column; margin: 0 0 100px;}
    .creative .h .menu .item{text-align: center; margin: 0;}

    .creative .posts{width: calc(100% - 40px);}

    .creative .support{width: calc(100% - 40px);}
    .creative .support .front{width: 40%;}
    .creative .support .list{width: 30%;}

    .creative .inner{width: calc(100% - 40px);}

    .creative .events .slider{width: calc(100% - 40px);}
}

@media screen and (max-width: 940px)
{
    .creative .support{flex-direction: column;}
    .creative .support .list{width: 300px; }
    .creative .support .list .reverse a{flex-direction: unset;}
    .creative .support .list .reverse .data .title{text-align: unset;}
    .creative .support .list .reverse .data .subtitle{text-align: unset;}
    .creative .support .list .reverse .image{margin: 0 20px 0 0;}
    .creative .support .front{width: 300px;}
    .creative .gallery{width: calc(100% - 120px);}
}

@media screen and (max-width: 640px)
{
    .creative .h .logo{white-space: unset; text-align: center;}
    .creative .posts .list{flex-direction: column; margin: 0 0 10px;}
    .creative .posts .list .item{width: 100%; margin: 0 0 40px;}
    .creative .posts .tags{margin: 0 -20px 0; padding: 0 20px; overflow: scroll;}
    .creative .posts .tags::-webkit-scrollbar{width: 0; height: 0}
    .creative .inner{width: calc(100% - 40px); flex-direction: column;}
    .creative .about .insta{width: calc(100% + 20px); margin: 0 0 20px;}
    .creative .about .data{width: 100%;}
    .creative .about .data .title{margin-left: 0;}
    .creative .about .data .subtitle{margin-left: 0;}
    .creative .gallery .slider{aspect-ratio: 9/16;}
}