@charset "utf-8";
*{
    margin: 0 ;
    padding: 0;
}
ol, ul, li{
    list-style: none;
}
.mo{
    display: none;
}
@media (max-width:768px) {
    .pc{display: none;} 
    .mo{display: block;}  
}
/* ===============================================  DeeKay  ===================================*/
#deekay .sub_banner{
    width: 100%;
    height: 581px;
    background: url(../../assets/images/special/deekay/dk_banner.png) no-repeat center center/cover;
}
@media (max-width:768px) {
    #deekay{
        padding-top:  50px;
    }
    #deekay .sub_banner{
        height: 480px;
        background: url(../../assets/images/special/deekay/mo_dk_banner.png) no-repeat center center/cover;
    }
}
@media (max-width:600px) {
    #deekay .sub_banner{
        height: 400px;
    }
}
@media (max-width:527px) {
    #deekay .sub_banner{
        height: 340px;
    }
}
/* ===============================================  banner  ===================================*/
#dk-banner{
    padding: 170px 0 130px;
    background: linear-gradient(rgba(189, 160, 226, 1),rgba(249, 173, 78, 1));
}
#dk-banner .head{width: 859px; margin: 0 auto 76px;}
#dk-banner .head.date{width:466px; margin: 0 auto 76px;}
#dk-banner .center_img{
    width: 1418px;
    display: flex;
    margin: 0 auto;
}
#dk-banner .txt_area{
    width: 522px;
    margin: 130px auto  0;
}
.vid_banner{
    height: 295px;
    overflow: hidden;

}
 .vid_banner video{
    width: 100%;
}
.vid_banner .second{
    display: none;
}
@media (max-width:1440px) {
    #dk-banner .center_img{
        width: 90%;
    }
	#dk-banner .head.date{width:320px; margin: 0 auto 76px;}
}
@media (max-width:990px) {
    #dk-banner .head{
        width: 80%;
    }
}
@media (max-width:768px) {
    #dk-banner{
        padding: 130px 0;
    }
    #dk-banner .center_img{
        flex-wrap: wrap;
        gap: 25px;
    }
    #dk-banner .head{
        width: 228px;
    }
    #dk-banner .txt_area{
        width: 76%;
        margin: 80px auto 0;
    }
	#dk-banner .head.date{
		width:90%;
		margin: 0 auto 86px;
	}    

    .vid_banner{
        overflow: hidden;
        height: 212px;
        /* margin-top: -1px; */
        position: relative;
        background-color: rgba(249, 173, 78, 1);
    }
    .image-container{
        /* display: flex; */
        height: 100%;
    }
    .vid_banner video{
        /* width: auto;
        height: 100%; */
        width: 1453px;
        height: 212px;
        object-fit: cover;
        /* animation: rollingleft1 39s linear infinite;     */
        overflow: visible;
    }
    .vid_banner video.second{
        display: block;
        /* animation: rollingleft2 39s linear infinite;     */
    }

    /* @keyframes rollingleft1 {
        0% {
          transform: translateX(0);
        }
        50% {
          transform: translateX(-100%);
        }
        50.01% {
          transform: translateX(100%);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes rollingleft2 {
        0% { transition: translateX(0); }
        100% { transform: translateX(-200%); }
    } */
}

/* ===============================================  introduce  ===================================*/
#introduce{
    padding: 144px 0 120px;
}
#introduce .container{}
#introduce .head{width: 545px; margin: 0 auto 100px;}
#introduce .sub_head{width: 545px; margin: 0 auto 62px;}
#introduce .lets{
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
}
#introduce .lets .ex{
    width: 523px;
}
#introduce .lets .pi{
    width: 521px;
}
@media (max-width:1024px) {
    #introduce .head,
    #introduce .sub_head{
        width: 60%;
    }
    #introduce .lets .ex,
    #introduce .lets .pi {
        width: 70%;
    }
}
@media (max-width:768px) {
    #introduce{
        padding: 95px 0;
    }
}
/* ===============================================  artist  ===================================*/
#artist .container{
    width: 776px;
    margin: 0 auto;
    padding: 120px 0;
}
@media (max-width:768px) {
    #artist .container{
        width: 70%;
    }
    #artist .container{
        padding: 0 0 155px;
    }
}
/* ===============================================  characters  ===================================*/
#char{
    background: #e0d3f4;
}
#char .container{
    width: 1290px;
    margin: 0 auto;
    padding: 100px 0;
}
#char .head{
    width: 262px;
    margin: 0 auto 90px;
}
#char .info_grid .grid_item{
    display: grid;
    grid-template-columns: 450px 1fr;
    align-items: center;
    column-gap: 65px;
}
#char .info_grid .grid_item.hikey{
    margin-bottom: 70px;
}
#char .info_grid .grid_item.hikey .txt{
    width: 779px;
}
#char .info_grid .grid_item.deekey {
    margin-bottom: 80px;
}
#char .info_grid .grid_item.deekey .txt{
    width: 768px;
}
#char .more_char{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}
@media (max-width:1300px) {
    #char .container{
        width: 90%;
    }
    #char .info_grid .grid_item.hikey .txt,
    #char .info_grid .grid_item.deekey .txt{
        width: auto;
    }
    #char .info_grid .grid_item{
        column-gap: 35px;
    }
}
@media (max-width:1180px) {
    #char .info_grid .grid_item{
        display: block;
    }
    #char .info_grid .grid_item.hikey .txt,
    #char .info_grid .grid_item.deekey .txt{
        width: auto;
        margin-top: 20px;
    }
    #char .more_char{
        gap: 20px;
    }
}
@media (max-width:987px) {
    #char .more_char{
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width:768px) {
    #char .container{
        width: 70%;
    }
    #char .more_char{
        display: block;
    }
    #char .more_char li{
        display: none;
    }
    #char .info_grid .grid_item.hikey .txt, #char .info_grid .grid_item.deekey .txt{
        margin-top: 30px;
    }
}
/* ===============================================  exhibit  ===================================*/
#exhibit{}
#exhibit .container{
    padding: 100px 0;
}
#exhibit .head{
    width: 888px;
    margin: 0 auto 120px;
}
#exhibit .ex_slidewrap{
    position: relative;
}
#exhibit .exhi_slider{}

#exhibit .exhi_slider .mask{
    width: 915px;
    margin: 0 auto;
}
#exhibit .ex_slidewrap .arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 72.708%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#exhibit .ex_slidewrap .arrows > div{
    width: 28px;
    cursor: pointer;
}
#exhibit .ex_slidewrap .arrows .prev{}
#exhibit .ex_slidewrap .arrows .next{}
@media (max-width:1840px) {
    #exhibit .exhi_slider .mask{
        width: 775px;
    }
}
@media (max-width:1580px) {
    #exhibit .exhi_slider .mask{
        width: 685px ;
    }
}
@media (max-width:1490px) {
    #exhibit .exhi_slider .mask {
        width: 565px;
    }
}
@media (max-width:1390px) {
    #exhibit .exhi_slider .mask {
        width: 485px;
    }
}
@media (max-width:1300px) {
    #exhibit .head{
        width: 80%;
    }
}
@media (max-width:1100px) {
    #exhibit .exhi_slider .mask {
        width: 415px;
    }
}
@media (max-width:990px) {
    #exhibit .container{
        padding: 111px 0 0;
    }
    #exhibit .exhi_slider .mask {
        width: 100%;
    }
    #exhibit .ex_slidewrap .arrows{
        width: 90%;
    }
}
/* ===============================================  youtube  ===================================*/
#youtube{
    background:#e0d3f4 ;
    padding: 60px 0;
}
#youtube .you_slidewrap{
    position: relative;
    transform: scale(0.8);
    /* width: 89.843; */
}
#youtube .you_slider{}

#youtube .you_slider .mask{
    width: 492px;
    margin: 0 auto;
}
#youtube .you_slider .mask > iframe{
    height: 873px ;
}
#youtube .you_slider .mask > video{
    width: 100%;
}
#youtube .you_slidewrap .arrows {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 34.166%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#youtube .you_slidewrap .arrows > div{
    width: 28px;
    cursor: pointer;
}
@media (max-width: 1620px) {
    #youtube .you_slider .mask{
        width: 400px;
    }
    #youtube .you_slider .mask > iframe {
        height: 711px;
    }
}
@media (max-width: 1380px) {
    #youtube .you_slider .mask{
        width: 340px;
    }
    #youtube .you_slider .mask > iframe {
        height: 606px;
    }
    #youtube .you_slidewrap{
        transform: scale(0.9);
    }
}
@media (max-width: 1170px) {
    #youtube .you_slider .mask {
        width: 290px;
    }
    #youtube .you_slider .mask > iframe {
        height: 515px;
    }
}
@media (max-width: 981px) {
    #youtube .you_slidewrap .arrows{
        width: 80%;
    }
    #youtube .you_slidewrap{
        transform: scale(1);
    }
    #youtube{
        margin-top: -6px;
    }
}
@media (max-width: 768px) {
    #youtube .you_slidewrap .arrows {
        width: 95%;
    }
    #youtube .you_slider .mask {
        width: 353px;
    }
    #youtube .you_slider .mask > iframe {
        height: 625px;
    }
}
@media (max-width: 425px) {
    #youtube .you_slider .mask {
        width: 290px;
    }
    #youtube .you_slider .mask > iframe {
        height: 515px;
    }
}
@media (max-width: 365px) {
    #youtube .you_slider .mask {
        width: 220px;
    }
    #youtube .you_slider .mask > iframe {
        height: 389px;
    }
}
/* ===============================================  desc  ===================================*/
#desc{}
#desc .container{
    width: 1374px;
    margin: 0 auto;
    padding: 113px 0 100px;
    display: flex;
    justify-content: center;
    gap: 20px;
    align-items:center;
}
#desc .page{
    width: 676px;
}
@media (max-width: 1400px) {
    #desc .container{
        width: 95%;
    }
    #desc .page{
        width: auto;
    }
}
@media (max-width: 1024px) {
    #desc .container{
        width: 100%;
        display: block;
        padding: 0;
    }
}
/* ===============================================  LIST  ===================================*/