#divBannerPop{
    width: 100vw;
    height: 100vh;
    padding-top: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    z-index: 9999;
}
/*
@media (min-width: 0px) {
  #divBannerPop {
    padding-top: 70px;
  }
}
@media (min-width: 992px) {
  #divBannerPop {
    padding-top: 86px;
  }
}
*/

/* inactive row style */
tr.inactive td:not(.active-cell){
    opacity: 0.3;
}
tr.inactive a {
    pointer-events: none;
}
tr.inactive a.active-link {
    pointer-events: auto;
    opacity: 1;
}

/* add style for upload music */
.preview-title {
    display: flex;
    justify-content: space-between;
}
.preview-title h4 {
    margin-top: 10px;
}
.preview-title .cover-title{
    margin-top: 0px;
}
.preview-title .right-aligned {
    margin-bottom: 10px;
    align-self: flex-end; /* 오른쪽 정렬 */
}
.preview-title .right-aligned .checkbox-inline {
    margin-left: 40px;
}

/* add style for preview button */
.player .buttons .get-file.preview {
    background-color: #ED1C24;
}
.preview-layer {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 95px;
    background-color: rgba(0, 0, 0, 0.7);
}
@media (max-width: 992px) {
    .preview-layer .preview-button {
        display: flex;
        position: absolute;
        top: 20px;
        right: 150px;
        padding: 0 25px;
        justify-content: center;
        align-items: center;
        width: 113px;
        height: 35px;
        background-color: #ED1C24;
        box-shadow: 0px 0px 0px rgba(1, 0, 0, 0.7);
        border-radius: 30px;
        color: #fff;
        font-size: 14px;
    }
}
@media (max-width: 767px) {
    .preview-layer .preview-button {
        display: flex;
        position: absolute;
        top: 52px;
        right: 60px;
        padding: 0 25px;
        justify-content: center;
        align-items: center;
        width: 97px;
        height: 31px;
        background-color: #ED1C24;
        box-shadow: 0px 0px 0px rgba(1, 0, 0, 0.7);
        border-radius: 30px;
        color: #fff;
        font-size: 11px;
    }
}

/*  */

.header-wrapper,
.sub-page .header-wrapper{
    margin: 0;
    /* width: 100%; */
    font-family: "Source Sans 3", sans-serif;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid #f2f2f2;
    color: #000;
    padding: 0 5vw;
}
.search-tags-container .header-wrapper {
    background-color: transparent;
    border-bottom-color: transparent;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
}

.header .nav-bar select{
    color: #000;
    text-align: center !important;
}

.header .header-first {
    display: flex;
    align-items: stretch;
    /* flex: 0 0 auto; */
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.header .nav-bar {
    display: flex;
    flex-direction: row;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.search-area,
.sub-page .search-area{
    display: flex;
    justify-content: space-between;
    padding: 20px 5vw;
    height: 80px;
    color: #000;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
}
.search .search-form {
    border-bottom-color: #000;
}
.search .input-search {
    color: #000;
}
.search .btn-search,
.sub-page .search .btn-search{
    padding:2px;
    background-size: 24px 24px;
    background-position: center;
}
.search .btn-filter,
.sub-page .search .btn-filter{
    background-size: 26px 26px;
    background-position: center;
}
.nav-bar .gnb.ic-search {
    background-image: url(../images/search_dark.png);
}
.nav-bar .gnb.ic-menu {
    background-image: url(../images/menu_dark.png);
}
#gnb-search:checked ~ .header .nav-bar .ic-search {
    background-image: url(../images/close_dark.png);
}
.search .btn-filter {
    background-image: url(../images/ic_filter_b.png);
}
.search .btn-search {
    background-image: url(../images/ic_search_b.png);
}
.main-container {
    padding: 0 5vw;
}

.row {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)* -1);
    margin-right: calc(var(--bs-gutter-x) / -2);
    margin-left: calc(var(--bs-gutter-x) / -2);
}
.row > * {
    flex-shrink: 0;
    max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) / 2);
    padding-left: calc(var(--bs-gutter-x) / 2);
    margin-top: var(--bs-gutter-y);
}

/*  */

body{
    width:100vw;
    height:100vh;
    margin:0 auto;
    font-family: "Montserrat", sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
    background-color:#fff;
    color:#000;
}
::-webkit-scrollbar {
    display: none;
    width: 0px;
}
.main-page-wrap *{
    padding:0;
    margin:0;
    text-decoration: none;
    box-sizing: border-box;
    line-height: normal;
}
.main-page-wrap img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.slider:before,
.slider:after {
    content: "";
    display: table;
}
.slider:after {
    clear: both;
}

#content{
    max-width:100%;
}
.slider {
    zoom: 1;
}
.slider .front{
    cursor: pointer;
}
#featured_img  img,
#thumb_img .front img {
    width: 100%;
    height:100%;
    object-fit: cover;
}
#featured_img{
    position:absolute;
    top:0;
    z-index: -1;
    background-color:#dcdcdc;
}
#featured_img div{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background-color:rgba(255, 255, 255, 0.7);
    /* backdrop-filter: blur(2px); */
    z-index: 1;
}
#featured_img img{
    display: block;
    filter: grayscale(1);
}
#thumb_img .front img.active{
    box-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);
}

.main-block{
    width:90vw;
    margin:0 5vw;
    border-radius:0.7vw;
    position:relative;
    width:90vw;
    height:29.6vw;
    /* padding:0 2.6vw; */
    margin-top:5.4vw;
}

.main-block .block-btn{
    transition:0.8s;
    cursor: pointer;
}
.main-block .block-btn:hover{
    box-shadow:0px 3px 40px rgba(0, 0, 0, 0.4);
}

.intro-title{
    font-size:2vw;
    margin-bottom:1.56vw;
    font-weight: 700;
}
.main-block h1{
    font-size:3.5vw;
    font-weight:700;
}
.main-block h2{
    font-size:2.1vw;
    font-weight: 600;
}
.main-block h4,
.main-block p{
    font-size:1.56vw;
    margin-bottom:0;
}
.main-block h4{
    font-weight:500;
}
.main-block .block-btn{
    font-family: "Montserrat", sans-serif;
    font-size:1vw;
    font-weight: 500;
    letter-spacing: 1px;
    color:#fff;
    padding: 0.9vw 2.1vw;
    background-color:#000;
    border:2px solid #000;
    margin-top:1.56vw;
    box-sizing:border-box;
}

/* composer */
.main-composer{
    height:41.66vw;
    border-radius: 0px;
    padding:0;
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
.main-area{
    margin-top:50px;
}
.main-composer .items {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 41.66vw;
    overflow: hidden;
    position:absolute;
}
.composer-intro{
    width:auto;
    height:auto;
    display:inline-block;
    position:absolute;
    text-align: center;
    text-shadow: 1px 4px 20px rgba(255, 255, 255, 0.75);
    z-index:5;
}

.composer-intro p:first-child{
    ont-size: 1.4vw;
    font-weight: 600;
    display: inline-block;
    padding: 0.8vw 3.12vw;
    border: 2px solid #000;
    border-radius: 3.12vw;
}
.composer-intro .composer-service{
    font-size:1.3vw;
    font-weight: 600;
}
.composer-intro h1{
    font-size:3.9vw;
    margin-top:2vw;
    margin-bottom:0.5vw;
    font-weight: 700;
}

.composer-connect{
    display:inline-block;
    font-size:2.34vw;
    font-weight:700;
    text-decoration: underline;
    margin-top:0.5vw;
}
.composer-list{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    align-items: flex-start;
    position:relative;
}
.composer{
    background-color:#f2f2f2;
    border-radius:4px;
    transition: 0.5s ease-in-out;
    cursor:pointer;
    opacity:0.75;
}
.composer .list-detail{
    backdrop-filter: blur(17px);
}
.composer:hover{
    transform-origin:center left;
    transform: scale(1.1);
    z-index: 10;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
    opacity:1;
}
.composer7:hover,
.composer2:hover{
    transform-origin:center center;
}
.composer3:hover,
.composer5:hover,
.composer8:hover{
    transform-origin:center right;
}
.composer1{
    width:26.04vw;
    height:14.06vw;
}
.composer2{
    width:15.62vw;
    height:15.62vw;
    position:absolute;
    right:22.91vw;
    top:0;
}
.composer3{
    width:15.62vw;
    height:20.83vw;
    position:absolute;
    right:0;
    background-color:#999;
}
.composer4{
    width:20.83vw;
    height:13.02vw;
    position:absolute;
    left:0;
    top:40%;
    margin-top:-2.5vw;
}
.composer5{
    width:14.06vw;
    height:14.06vw;
    position:absolute;
    right:7.2vw;
    top:40%;
    background-color:#555;
    margin-top:-3vw;
    z-index:2;
    box-shadow: -10px -10px 40px 0px rgba(0,0,0,0.15);
}
.composer6{
    width:10.41vw;
    height:10.41vw;
    margin-top:7.8vw;
    box-shadow: 10px -10px 40px 0px rgba(0,0,0,0.15);
}
.composer7{
    width:17.7vw;
    height:17.7vw;
    position:absolute;
    left:15.18vw;
    bottom:1.5vw;
    background-color: #dcdcdc;
    box-shadow: 1px -1px 20px 0px rgba(0,0,0,0.15);
    z-index:4;
}
.composer8{
    width:29.16vw;
    height:16.66vw;
}
.list-detail{
    width:100%;
    position:absolute;
    bottom:-4vw;
    display:none;
}
.main-composer .composer-push{
    font-size:1.3vw;
    font-weight:700;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.main-composer .composer-hit{
    font-size:1.1vw;
    font-weight:500;
    padding-top:8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.composer:hover .list-detail{
    display:block;
}

.block-artist{
    width:90vw;
    height:28.62vw;
    margin: 4.16vw 5vw 5.4vw 5vw;
    padding:0;
    overflow:hidden;
}
.block-artist h3{
    margin-bottom:2.06vw;
}

.artist-connect{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.name-list{
    width:40.1vw;
    border-top:solid 0.5px #000;
    margin-right:1.56vw;
}

.composer-name{
    height:4.06vw;
    border-bottom:solid 0.5px #000;
    display:flex;
    justify-content:space-between;
    align-items: center;
    text-decoration: none;
    color:#000;
}
.composer-name div,
.composer-page div{
    line-height: 4.06vw;
    height:4.06vw;
}
.composer-name .name-expend{
    display:inline-block;
}
.composer-name div:first-child{
    margin-right:10px;
}
.name-box{
    width:70%;
    height:4.06vw;
    font-size:1.56vw;
    font-weight:700;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
}
.name-list .arrow{
    width:2.6vw;
    height:2.6vw;
    vertical-align:middle;
}
.name-list img{
    display:block;
    margin:0 auto;
}

.composer-page{
    width:40.1vw;
    display:flex;
    justify-content: flex-start;
    align-items: center;
    cursor:pointer;
}
.move-btn{
    width:fit-content;
    margin-right:20px;
    white-space:nowrap;
}
.composer-name:hover .name-box,
.composer-name:hover .arrow,
.composer-page:hover{
    transform:translateX(22px) translateX(0);
    transition:transform .5s cubic-bezier(0.7, 0, 0.2, 1);
    z-index:11;
}
.name-gallery{
    width:64.05vw;
    position:relative;
    right:0vw;
    display:block;
}
.name-gallery .list-detail{
    position:relative;
    bottom:0;
    display:block;
    height:20.31vw;
    margin-right:1.56vw;
    background-color:#dcdcdc;

}
.name-gallery .list-detail h3{
    width:100%;
    display:block;
    position:absolute;
    bottom:0;
    padding:0 1.5vw;
    font-size:1.1vw;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    color:#fff;
    z-index:12;
}
.name-gallery .list-detail::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    mix-blend-mode:multiply;
}


/*  */

.main-visual{
    height:30vw;
    background-color:#f2f2f2;
    margin-top: 50px;
}
.slideshow{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    padding:0;
    border-radius: 0.7vw;
    background-color:rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    z-index:2;
}
.slide-background{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    padding:0;
    mix-blend-mode: luminosity;
    overflow:hidden;
    border-radius: 0.7vw;
    padding:0;
}

.main-title{
    padding-left:2.6vw;
    width:60%;
    position:absolute;
    top:50%;
    transform: translate(0, -50%);
    z-index:3;
}
.cover-blur{
    display:flex;
    flex-direction: column;
    z-index:5;
    position:absolute;
    right:-4.1vw;
    top:-3vw;
}
.cover-grid{
    display:flex;
    flex-direction: row;
}
.cover-grid span{
    width:10.4vw;
    height:10.4vw;
}

.front{
    transition:0.8s;
}
.front:hover{
    box-shadow:0px 20px 40px rgba(0, 0, 0, 0.4);
}
.cover-grid span.cover-s{
    width:6.25vw;
    height:6.25vw;
    margin-top:4.15vw;
}
.banner-top{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding:0;
    height:26vw;
    overflow: hidden;
}
.banner-top .block-btn{
    border-color: #fff;
}
.banner-cover{
    width:26vw;
    height:26vw;
    border-radius:0.7vw;
    background-color:#999;
    background-image:url(../images/main/vin.png);
    background-size: cover ;
    background-position:center;
}
.banner-info{
    width:63vw;
    height:26vw;
    display:flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align:center;
    padding:0 6.5vw;
    border-radius:0.7vw;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.9);
}
.banner-info h2{
    padding:0.5vw 0;
}
.infinite-slide{
    width:100vw;
    height:34.44vw;
    padding:0;
    margin-left:0 !important;
    margin-top:10.4vw;
    overflow-y:visible !important;
}
.infinite-slide .intro-title{
    position:absolute;
    top:-4vw;
    padding-left:5vw;
    z-index: 12;
}
.info-glass{
    width:40vw;
    position:absolute;
    top:35%;
    z-index: 11;
    padding-left:7.6vw;
}
.info-glass p{
    font-weight: 600;
    color:#fff;
    margin-bottom:1.56vw;
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.25);
}
.tag-area a{
    display: inline-block;
    font-size:1.04vw;
    font-weight: 500;
    padding: 0.52vw 1.25vw;
    background-color:rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(17px);
    border-radius: 0.313vw;
    border:1px solid #fff;
    margin-right:0.79vw;
    margin-bottom:0.79vw;
    white-space: pre-wrap;
    color:#000;
    transition:0.8s;
    box-sizing:border-box;
}
.tag-area a:hover{
    background-color:#fff;
    font-weight: 500;
}
.glass{
    position:absolute;
    top:0;
    z-index:10;

}
.glass span{
    display:block;
    float:left;
    width:1.042vw;
    height: 34.44vw;
    background: linear-gradient(90deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(15px);
}
.cover-scroll{
    width:100%;
    height:100%;
    position:relative;
    padding:0;
    margin-left:0;
    overflow-y: hidden;
    overflow-x:scroll;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
}
.slide-cover{
    /* width:200vw; */
    height:34.44vw;
    display:flex;
    flex-direction: row;
    white-space:nowrap;
    position:absolute;
    top:0;
    z-index:-2;
}

.slide-cover .item{
    width:16.7vw;
    height:16.7vw;
    background-color:rgba(0, 0, 0, 0.2);
    margin-right:1.04vw;
    border-radius: 0.7vw;
    overflow: hidden;
    z-index:-3;
}

.item{
    scroll-snap-align: start;
    scroll-margin-inline-start: 20px;
    mix-blend-mode: darken;
}
.item img{
    mix-blend-mode:multiply;
}
.item3,
.item6{
    margin-bottom:1.04vw;
}
.slide-cover .item1,
.slide-cover .item5{
    height:27.08vw;
}
.slide-cover .item2{
    height:33.333vw;
}
.slide-cover .item:after{
    content: "";
    display: block;
    height:100%;
    background:rgba(0, 0, 0, 0.7);
    border-radius: 0.7vw;
}
.secound-banner{
    height:26.04vw;
    display:flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    align-items: center;
    background-color:#f2f2f2;
    overflow: hidden;
}
.banner-info-2{
    width:67%;
    padding-left:2.6vw;
}
.secound-banner h3{
    font-weight:400;
    margin-bottom:1.2vw;
}
.banner-cover-2{
    width:33%;
    height:100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}
.mobile-row{
    position:relative;
    top:0;
}
.mobile{
    width:12.8vw;
    margin-bottom:1.77vw;
}

.mobile{
    position:absolute;
}
.mobile1{
    top:35%;
}
.mobile2{
    top:-80%;
    transform: rotate(180deg);
}
.mobile3{
    top:-50%;
    right:3%;
    transform: rotate(180deg);
}
.mobile4{
    top:65%;
    right:3%;
}

.track-list{
    height:38.8vw;
    padding:0;
    margin-top:6.25vw;
}
.infinite-text .inner {
    padding-block: 1.4vw;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.cover-scroll .inner{
    padding-block: 0vw;
    gap:0rem;
}
.infinite-text{
    width:90vw;
    margin:0 auto;
    font-size:1.04vw;
    font-weight:500;
    color:#fff;
    white-space: nowrap;
    background-color:#000;
    padding: 0 5vw;
    text-transform: uppercase;
    -webkit-mask: linear-gradient(
            90deg,
            transparent,
            white 20%,
            white 80%,
            transparent);
    mask: linear-gradient(90deg, transparent, white 5%, white 95%, transparent);
    overflow: hidden;
}
.cover-scroll{
    width:100vw;
    mask:none;
}
.infinite-text[data-animated="true"] .inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.infinite-text[data-direction="right"] {
    --_animation-direction: reverse;
}

.infinite-text[data-direction="left"] {
    --_animation-direction: forwards;
}

.infinite-text[data-speed="fast"] {
    --_animation-duration: 20s;
}

.infinite-text[data-speed="slow"] {
    --_animation-duration: 50s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 0.5rem));
    }
}

.music-achive{
    position:relative;
    width:100%;
    height:auto;
    margin-top: 1.56vw;
    margin-bottom: 3.125vw;
}
.music-achive1 {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-between;
    align-items: center;
    row-gap: 1.04vw;
}
.music-achive2 {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: wrap;
    align-content: flex-end;
    justify-content: space-between;
    align-items: center;
    row-gap: 1.04vw;
    position:absolute;
    top:0;
    right:0;
}

.achive-button{
    display:inline-block;
    position:absolute;
    left:50%;
    transform:translate(-50%, 0);
    border: 2px solid #000;
    margin-top:0;
}
.achive-track{
    width:44.5vw;
    height:5.2vw;
    border-radius: 0.417vw;
    background-color:#fff;
    box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.15);
    position:relative;
    transition:0.8s;
}
.achive-track:hover{
    box-shadow: 20px 40px 70px rgba(0, 0, 0, 0.15);
}
.achive-track > figure{
    width:3.125vw;
    height:3.125vw;
    background-color:#dcdcdc;
    position:absolute;
    left:1.563vw;
    top:50%;
    transform:translate(0, -50%);
}
.achive-track .btn-set button{
    width: 1.56vw;
    height: 1.56vw;
    background:#fff;
    position:absolute;
    top:50%;
    transform:translate(0, -50%);
    right: 0;
    margin-top:0;
}
/*  */
.achive-track .cover-title{
    position:absolute;
    left:5.5vw;
    top:50%;
    transform:translate(0, -50%);
    line-height: normal !important;
    width:65%;
}
.song a{
    font-size:0.99vw;
    font-style: normal;
    font-weight: 700;
    color:#000;
    margin-bottom: 0.3vw;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.singer{
    font-size:0.83vw;
    font-weight: 500;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;

}
.btn-set {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    right: 1.56vw;
    top: 50%;
    transform: translate(0, -50%);
}
.btn-set i,
.btn-set div{
    width:1.56vw;
    height:1.56vw;
}
.btn-set i{
    margin-right: 2.5vw;
}

/*  */
.service-info{
    padding:0;
}

.service-wrap{
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.service-wrap h5{
    font-size:1.56vw;
    margin-bottom:0.8vw;
    font-weight:600;
}
.service-wrap p{
    display:inline-block;
}
.service-wrap div{
    height:11.67vw;
    padding:2.6vw;
    background-color:#f2f2f2;
    border-radius: 0.417vw;
}
.service-1{
    width:56.47vw;
    margin-bottom:1.56vw;
}
.service-2{
    margin-bottom:1.56vw;
    transition:0.8s;
}
.service-3,
.service-4{
    transition:0.8s;
}
.service-2:hover,
.service-3:hover,
.service-4:hover{
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    background-color:#fff;
}
.service-2,
.service-5{
    width:31.77vw;
}
.service-3{
    width:29.68vw;
}
.service-4{
    width:25vw;
}
.page {
    padding-bottom: 50px;
}
@media(width <= 1440px){
    .composer-name{
        font-size:12px;
    }
}
@media(width <= 1024px){
    .composer-name {
        font-size: 10px;
    }
    .logo{
        padding:0.4vw;
    }
    .main-block{
        width:89.58vw;
        margin:0 5.21vw;
        border-radius:0.65vw;
        margin-top:7.813vw;
    }
    .main-visual{
        height:45.57vw;
        margin-top:50px;
    }
    .cover-blur{
        top: 50%;
        transform: translate(0, -50%);
    }
    .slide-cover .item{
        border-radius:1.065vw;
    }
    .infinite-slide{
        width:100vw;
    }

}
@media(width <= 860px){
    .composer-name div:first-child {
        display:none;
    }
}

@media(width <= 768px){
    .header-wrapper {
        padding-left: 5vw;
        padding-right: 5vw;
    }
    .page {
        padding-bottom: 20px;
    }

    /* composer */
    .main-composer,
    .main-composer .items{
        height:55.59vw;
    }
    .list-detail {
        bottom: -4.3vw;
    }
    .main-composer .composer-push {
        font-size: 1.56vw;
    }
    .main-composer .composer-hit {
        font-size: 1.3vw;
        padding-top:2px;
    }
    .composer1{
        width:36.45vw;
        height:20.83vw;
    }
    .composer2{
        width:16.92vw;
        height:16.92vw;
        right:22.91vw;
    }
    .composer3{
        width:19.53vw;
        height:27.34vw;
    }
    .composer4{
        width:27.74vw;
        height:15.62vw;
        top:40%;
        margin-top:-3.5vw;
    }
    .composer5{
        width:15.62vw;
        height:15.62vw;
        right:7.2vw;
        top:40%;
        margin-top:-3.5vw;
        z-index:2;
    }
    .composer6{
        width:14.32vw;
        height:14.32vw;
        margin-top:7.8vw;
    }
    .composer7{
        width:19.53vw;
        height:19.53vw;
        left:17.18vw;
    }
    .composer8{
        width:39.06vw;
        height:22.13vw;
    }
    .composer-intro{
        width:60%;
    }
    .composer-intro p:first-child{
        font-size:2.08vw;
        padding: 1.2vw 4.2vw;
        border-radius: 4.2vw;
    }
    .composer-intro .composer-service{
        font-size:1.69vw;
    }
    .composer-intro h1{
        font-size:5.2vw;
        margin-bottom:1.04vw;
    }

    .composer-connect{
        font-size:3.5vw;
    }
    .block-artist{
        height:46.875vw;
    }
    .name-list{
        width:46.87vw;
    }

    .name-list .arrow {
        width: 4.5vw;
        height:4.5vw;
    }

    .composer-name{
        height:6.51vw;
    }
    .composer-name div,
    .composer-page div{
        line-height: 6.51vw;
        height: 6.51vw;
    }
    .composer-name div:first-child{
        margin-right:4px;
    }
    .name-box {
        height: 6.51vw;
        font-size: 2.08vw;
    }
    .name-gallery {
        width: 102.85vw;
    }
    .name-gallery .list-detail {
        height: 32.55vw;
        margin-right: 2.6vw;
    }
    .name-gallery .list-detail h3{
        font-size:12px;
    }
    /*  */

    .intro-title{
        font-size:3vw;
    }

    .main-title h1 {
        font-size: 3.9vw;
        margin-bottom: 0;
    }

    .main-block p{
        font-size:1.7vw;
    }
    .main-block .block-btn{
        font-size:13px;
        padding:1.7vw 3.9vw;
    }
    .main-title {
        top:15.625vw;
    }

    .infinite-slide .intro-title {
        top:-5vw;
    }
    .cover-grid span {
        width: 13.02vw;
        height: 13.02vw;
    }
    .cover-grid span.cover-s{
        width:7.813vw;
        height:7.813vw;
        margin-top:5.207vw;
    }
    .cover-blur{
        top:54%;
        right:-20px;
    }
    .banner-top,
    .secound-banner{
        height:34.85vw;
    }
    .banner-cover{
        width:24.74vw;
        height:34.85vw;
    }
    .banner-info{
        width:63.54vw;
        height:34.85vw;
        padding:0 6vw;
    }
    .banner-info h4{
        font-size:1.95vw;

    }
    .banner-info h2 {
        font-size: 2.86vw;
        margin-top: 1.3vw;
        margin-bottom: 0;
    }
    .infinite-slide{
        height:58.59vw;
    }
    .slide-cover{
        width:300vw;
        height:58.59vw;
    }
    .slide-cover div{
        border-radius:1.3vw;
    }
    .slide-cover .item{
        width:28.38vw;
        height:28.38vw;
        margin-right:1.953vw;
    }

    .cover-set .item3,
    .cover-set .item6{
        margin-bottom:1.953vw;
    }
    .slide-cover .item1,
    .slide-cover .item5{
        height:46.09vw;
    }
    .slide-cover .item2{
        height:56.77vw;
    }
    .glass{
        width:91.791vw;
        right:35.35vw;
    }
    .glass span{
        width:1.953vw;
        height: 58.59vw;
    }
    .info-glass{
        width:54.16vw;
    }
    .info-glass p{
        font-size:2.08vw;
    }
    .tag-area a {
        font-size: 1.69vw;
        padding: 1.04vw 2.08vw;
        margin-right: 1.82vw;
        margin-bottom: 1.82vw;
    }
    .secound-banner{
        width:100vw;
        margin-left:0;
        border-radius:0;
    }
    .banner-info-2 {
        padding-left: 5.2vw;
    }
    .banner-cover-2{
        width:44%;
    }
    .mobile {
        width: 16.66vw;
        margin-bottom: 2.3vw;
    }
    .mobile3,
    .mobile4{
        right:5%;
    }
    .track-list{
        height:72vw;
    }
    .infinite-text {
        font-size:2.5vw;
        padding:0 5.2vw;
    }
    .inner{
        padding-block:1.56vw;
    }
    .music-achive .disappear{
        display:none;
        visibility:none;
    }
    .music-achive{
        margin-top: 2.8vw;
        margin-bottom: 4.95vw;
        row-gap: 2.6vw;
    }
    .achive-track {
        width: 89.58vw;
        height: 10vw;
        border-radius:0.65vw;
    }
    .achive-track > figure {
        width:6.25vw;
        height: 6.25vw;
        left:2.6vw;
    }
    .achive-track .cover-title{
        left:10.93vw;
        width:60%;
    }
    .song a {
        font-size: 2.4vw;
    }
    .singer {
        font-size: 2vw;
    }
    .btn-set i, .btn-set div {
        width: 3.125vw;
        height: 3.125vw;
    }
    .btn-set i {
        margin-right: 5vw;
    }
    .achive-button{
        padding: 1.8vw 4.4vw;
        margin:0;
    }
    .service-info{
        height:45.57vw;
    }
    .service-wrap h5{
        font-size: 2.08vw;
        margin-bottom:0.4vw;
    }
    .service-wrap div{
        height:16.92vw;
        padding:3.9vw;
    }
    .service-1 {
        width: 48.17vw;
    }
    .service-2 {
        width: 39.06vw;
    }
    .service-3 {
        width: 31.25vw;
    }
    .service-4 {
        width: 23.43vw;
    }
    .service-5 {
        width: 30.2vw;
    }
    .service-1,
    .service-2 {
        margin-bottom:2.34vw;
    }
}
@media (width <= 575px){
    .header-wrapper {
        padding-left: 5vw;
        padding-right: 5vw;
        height: 70px;
    }
    .main-block p {
        font-size: 2vw;
    }
}
@media(width <= 430px){
    /* composer */
    .main-composer,
    .main-composer .items{
        height:113.05vw;
    }
    .list-detail {
        bottom: -7vw;
    }
    .main-composer .composer-push {
        font-size: 11px;
    }
    .main-composer .composer-hit {
        font-size: 9.5px;
    }
    .composer1{
        width:53.48vw;
        height:30.23vw;
    }
    .composer2{
        width:22.22vw;
        height:22.22vw;
        right:0vw;
    }
    .composer3{
        width:27.9vw;
        height:39.53vw;
        top:30vw;
    }
    .composer4{
        width:37.2vw;
        height:23.25vw;
        top:-17vw;
        margin-top:-3.5vw;
    }
    .composer5{
        width:20.83vw;
        height:20.83vw;
        right:7vw;
        top:19.5vw;
        margin-top:-3.5vw;
        z-index:2;
    }
    .composer6{
        width:19.44vw;
        height:19.44vw;
        margin-top: -17vw;
    }
    .composer7{
        width:29vw;
        height:29vw;
        left: 5vw;
        bottom: 3vw;
    }
    .composer8{
        width:50vw;
        height:27.77vw;
    }
    .composer-intro{
        width:85%;
    }
    .composer-intro p:first-child{
        font-size:12px;
        padding: 2.4vw 7.5vw;
        border-radius: 7.5vw;
    }
    .composer-intro .composer-service{
        font-size:3.33vw;
    }
    .composer-intro h1{
        font-size:7.5vw;
        margin-bottom:1.04vw;
        font-weight:800;
    }

    .composer-connect{
        font-size:5.55vw;
    }
    .block-artist{
        height:122.33vw;
    }
    .artist-connect {
        display: flex;
        flex-direction: column-reverse;
    }
    .name-list{
        width:100%;
        margin-top:-20px;
    }
    .name-list .arrow {
        width: 25px;
        height:25px;
    }
    .composer-name{
        height:10vw;
        font-size:9px;
    }
    .composer-name div,
    .composer-page div{
        line-height: 10vw;
        height: 10vw;
    }
    .name-box {
        height: 10vw;
        font-size: 12px;
    }
    .name-gallery {
        width: 155.55vw;
    }
    .name-gallery .list-detail {
        height: 50vw;
        margin-right: 2.77vw;
    }
    .name-gallery .list-detail h3{
        font-size:11px;
    }

    /*  */
    .main-block{
        border-radius: 4px;
        margin-top:40px;
    }
    .main-area{
        margin-top:20px;
    }
    .main-block p {
        font-size: 14px;
    }
    .main-block .block-btn {
        font-size: 12px;
        padding: 12px 24px;
        margin-top:10px;
    }
    .main-visual {
        height: 138.88vw;
    }
    .slideshow,
    .slide-background{
        border-radius: 4px;
    }
    .main-title {
        padding:0 2.77vw;
        width: 100%;
        top:160px;
        left:0;
    }
    .intro-title {
        font-size: 16px;
    }
    .block-artist h3,
    .track-list h3{
        padding-left:0.5vw;
    }
    .main-title h1 {
        font-size: 24px;
    }
    .cover-grid span {
        width: 22.22vw;
        height: 22.22vw;
    }
    .cover-grid span.cover-s {
        width: 14.44vw;
        height: 14.44vw;
        margin-top:7.78vw;
    }
    .cover-blur {
        top: 70%;
        right: -5px;
    }
    .infinite-slide .intro-title {
        top: -28px;
        padding-left: 5.5vw;
    }
    .infinite-slide{
        width:100%;
        height: 69.44vw;
        margin-top:50px;
        margin-right:0 !important;
    }
    .slide-cover {
        width: 350vw;
        height: 69.44vw;
    }
    .slide-cover .item {
        width: 33.33vw;
        height: 33.33vw;
        margin-right: 2.77vw;
        border-radius: 4.5px;
    }

    .slide-cover .item1,
    .slide-cover .item5 {
        height: 66.66vw;
    }
    .slide-cover .item3,
    .slide-cover .item6 {
        margin-bottom:2.778vw;
    }
    .slide-cover .item2 {
        height: 54.16vw;
    }
    .glass,
    .glass span{
        height: 69.44vw;
    }
    .glass{
        width:130.56vw;
        right:30vw;
    }
    .glass span{
        width:2.778vw;
    }
    .info-glass{
        width: 65%;
        padding-left:5.55vw;
        top: 50%;
        transform:translate(0, -50%);
    }
    .info-glass p {
        font-size: 14px;
    }
    .banner-top{
        height:50vw;
        border-radius: 4px;
    }
    .banner-cover{
        height:50vw;
        width:27.77vw;
    }
    .banner-info{
        height:50vw;
        width:60vw;
        padding:0 5vw;
    }

    .banner-info p{
        font-size:12px;
    }
    .banner-info span{
        display:none;
    }
    .banner-info h4{
        font-size:12px;
    }
    .banner-info h2{
        font-size:16px;
    }

    .tag-area a{
        font-size:12px;
        padding:8px 14px;
        margin-right: 2.7vw;
        margin-bottom: 2.7vw;
        border-radius:4px;
    }
    .secound-banner{
        height:50vw;
        margin-right:0;
    }
    .banner-info-2{
        width:80%;
    }
    .mobile2,
    .mobile3,
    .mobile4{
        display:none;
    }
    .banner-cover-2{
        width:18%;
        margin-right: 5.2vw;
    }
    .banner-info-2 p{
        font-size:13px;
    }
    .mobile1 {
        top: 50%;
        transform:translate(0, -50%);
    }
    .infinite-text {
        font-size: 13px;
        padding: 0 12vw;
    }
    .track-list{
        height:105vw;
    }
    .music-achive {
        margin-top: 20px;
        margin-bottom: 30px;
        row-gap: 10px;
    }
    .achive-track {
        height: 14vw;
        border-radius: 0.65vw;
    }
    .achive-track >figure {
        width: 8.33vw;
        height: 8.33vw;
        left: 2.77vw;
    }
    .achive-track .cover-title {
        left: 13.88vw;
    }
    .song a {
        font-size: 12px;
    }
    .btn-set{
        right:2.77vw;
    }
    .btn-set i, .btn-set div {
        width: 20px;
        height: 20px;
    }
    .btn-set i:first-child{
        display:none;
    }
    .btn-set i {
        margin-right: 20px;
    }
    .singer {
        font-size: 9px;
    }
    .achive-button {
        padding: 12px 28px;
    }
    .service-info {
        height: auto;
        margin-bottom:20px;
    }
    .service-wrap div {
        height: 32.22vw;
        padding: 4vw 3.4vw;
        border-radius: 4px;
    }
    .service-wrap h5,
    .service-wrap p{
        font-size:13px;
    }
    .service-1{
        width:45vw;
    }
    .service-2{
        width:41vw;
    }
    .service-3{
        width:30vw;
    }
    .service-4{
        width:23vw;
    }
    .service-5{
        width:30vw;
    }
    .service-wrap div.service-3,
    .service-wrap div.service-4,
    .service-wrap div.service-5{
        height:37vw
    }
}
@media (width <= 400px){
    .service-wrap div.service-3,
    .service-wrap div.service-4,
    .service-wrap div.service-5{
        height:44vw
    }
}

@media (width <= 360px){
    .intro-title h3{
        margin-bottom:10px;
    }
    .main-block .block-btn {
        padding: 10px 22px;
    }
    .banner-top{
        height:55vw
    }
    .glass {
        right: 28vw;
    }
    .tag-area a {
        font-size: 10px;
        padding: 6px 10px;
        margin-right: 5px;
        margin-bottom: 10px;
    }
    .service-wrap div {
        height: 38vw;
    }
    .service-wrap div.service-3,
    .service-wrap div.service-4,
    .service-wrap div.service-5{
        height:45vw
    }
    .service-wrap h5,
    .service-wrap p,
    .info-glass p {
        font-size:12px;
    }
    .page {
        padding-bottom: 20px;
    }
}

@media (width <= 320px){
    /* composer */
    .composer-intro p:first-child {
        font-size: 11px;
    }
    .track-list{
        height:112vw;
    }
    .banner-top{
        height:59vw;
        border-radius: 4px;
    }
    .banner-cover{
        height:59vw;
        width:27.77vw;
    }
    .banner-info{
        height:59vw;
        width:60vw;
        padding:0 5vw;
    }
    .banner-info-2 {
        width: 75%;
    }
    .secound-banner {
        height: 59vw;
    }
    .service-wrap div{
        height:42vw;
    }
    .service-wrap div.service-3,
    .service-wrap div.service-4,
    .service-wrap div.service-5{
        height:54vw;
    }
}
@media (width <= 280px){
    .info-glass p,
    .banner-info-2 p {
        font-size: 12px;
    }
    .banner-info-2 {
        width: 75%;
    }
    .banner-info p{
        display:none;
    }
    .banner-info,
    .secound-banner {
        height: 70vw;
    }
    .service-info{
        height:auto;
    }
    .service-wrap div {
        height: 57vw;
    }
    .service-wrap div.service-3,
    .service-wrap div.service-4,
    .service-wrap div.service-5{
        height:60vw;
    }
    .page {
        padding-bottom: 5px;
    }
}
/* artist-view-wrap */
.artist-view-wrap *{
    border:none;
    margin:0;
    padding:0;
    line-height:normal;
}
.artist-view-title{
    font-size:2.34vw;
    font-weight:700;
    margin:3.75vw 5vw;
}
.artist-view-all{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:0.96vw;
    margin:0 5vw;
    padding-top:60px;
}
.artist-view-list{
    width:10.41vw;
    height:10.41vw;
    position:relative;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    border-radius: 4px;
    margin-bottom:0.72vw;
    color:#fff;
    overflow:hidden;
}
.artist-view-list::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0) 100%);
    mix-blend-mode: multiply;
}
.view-composer{
    display:flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.artist-view-inside figure{
    width: 1.7vw;
    height:1.7vw;
    border-radius:50%;
    background-color:rgba(255, 255, 255, 0.9);
    margin-right:0.41vw;
}
.view-composer-image{
    width:100%;
    height:100%;
    border-radius:50%;
}
.view-composer-name{
    display:block;
    width:77%;
    line-height:1.7vw;
    font-size: 0.72vw;
    font-weight: 700;
    color:#fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.artist-view-inside{
    padding:0 0.72vw 0.72vw;
    transform:translateY(2.02vw);
    transition:0.4s;
}
.signature{
    display:inline-block;
    font-size:10px;
}

.artist-view-inside .signature{
    display:inline-block !important;
    padding:0.15vw 0.72vw;
    border-radius:0.88vw;
    border:1px solid #fff;
    margin-top:0.4vw;
    margin-bottom:0.2vw;
}
.artist-view-inside .sub-title{
    font-size:12px;
    font-weight:500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub-display{
    transform:translateY(7vw);
    transition:0.4s;
}
.artist-view-list:hover{
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    transform: scale(1.05);
    transition: 0.4s ease-in-out;
    z-index:20;
}
.artist-view-list:hover .artist-view-inside,
.artist-view-list:hover .sub-display{
    transform:translateY(0);
}
@media(width <= 1440px){
    .artist-view-inside{
        padding:0 0.55vw 0.55vw;
        transform:translateY(2.3vw);
    }
    .artist-view-inside figure{
        width: 1.75vw;
        height:1.75vw;
        margin-right:0.5vw;
    }
    .view-composer-name{
        line-height:1.75vw;
        font-size: 0.8vw;
    }
}
@media(width <= 1280px){
    .artist-view-list{
        width: 21.48vw;
        height: 21.48vw;
    }
    .artist-view-all{
        gap:1.36vw;
    }
    .artist-view-inside{
        padding:0 1.36vw 1.36vw;
        transform:translateY(4.29vw);
    }
    .artist-view-inside figure{
        width: 2.93vw;
        height:2.93vw;
        margin-right:8px;
    }
    .view-composer-name{
        line-height:2.93vw;
        font-size: 13px;
    }
    .artist-view-inside .signature{
        margin-top:1vw;
        margin-bottom:0.5vw;
    }

}
@media(width <= 768px){
    .artist-view-title{
        font-size:3vw;
    }
    .artist-view-list{
        width: 28.96vw;
        height: 28.96vw;
    }
    .artist-view-all{
        gap:1.56vw;
        padding-top:40px;
    }
    .artist-view-inside .signature{
        margin-top:1.8vw;
        margin-bottom:0.9vw;
    }
}
@media(width <= 590px){
    .artist-view-title{
        font-size:16px;
    }
    .artist-view-list{
        width: 43.5vw;
        height: 43.5vw;
    }
    .artist-view-all{
        gap:3vw;
    }
    .artist-view-inside{
        padding:0 10px 10px;
        transform:translateY(42px);
    }
    .artist-view-inside figure{
        width: 24px;
        height:24px;
    }
    .view-composer-name{
        line-height:24px;
    }
    .artist-view-inside .signature{
        padding: 0.5vw 2.2vw;
        border-radius: 2.2vw;
        margin-top:8px;
        margin-bottom:4px;
    }
}

/* request-demo */
.page-application{
    margin-top:0px;
    margin-bottom:0px;
}
.commission >*{
    padding:0;
    margin:0;
    line-height:normal;
}
.commission{
    width:100vw;
    padding:0 5vw;
    display:flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    margin-top:50px;
    margin-bottom:50px;
}
.commission section h1{
    font-size:2.2vw;
    font-weight:700;
    text-align: center;
}
.commission section:first-child{
    width:40vw;
    height:940px;
    margin-right:3vw;
    background:rgba(0, 0, 0, 0.4);
    border-radius:4px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.commission section:last-child{
    width:43vw;
    display:flex;
    justify-content: center;
    align-items: center;
}

/* form */
.commission form div {
    text-align: left;
    margin-bottom:10px;
    font-size: 12px;
}

.commission input::placeholder {
    font-size:15px;
    color:#252e387a;
}

.commission form {
    position:relative;
    width:100%;
    height:100%;
    background:#fff;
}

.commission input {
    display:block;
    width:100%;
    padding:18px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border:1px solid #dcdcdc;
    margin-bottom: 15px;
    color: #444;
    font-weight:400;
    font-size:15px;
}

.commission input:focus {
    background:#fafafa;
}
.commission textarea{
    resize: none;
    height:120px;
    padding:18px;
    border:1px solid #dcdcdc;
}
.commission .form-action{
    width: 100%;
}
.commission .form-action div{
    flex-grow: 1;
}
.commission .form-action div:nth-child(1){
    margin-right:2%;
}
.commission .form-action .btn {
    display:inline-block;
    margin:0;
    width: 100%;
    margin-top: 20px;
    color: #000;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    outline:none;
    cursor: pointer;
    font-weight: 600 !important;
    padding:20px;
    border:none;
    border-radius:5px;
    background-color:#dcdcdc;
}

.commission .form-action .btn:hover {
    background-color:#000;
    color:#fff;
}
.commission #comments {
    display: block;
    width: 100%;
    height: 150px;
    padding: 14px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    color: #252e387a;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
}

/*  */
.commission .row-panel{
    width: 100%;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.commission .form-action .row-panel div{
    width:49%;
}
.commission .nf-error-message {
    text-align: left;
    margin-top: -15px;
    margin-bottom: 10px;
    font-size: 12px;
    color:red;
}
.commission .alert-danger{
    display:none !important;
}
.commission .alert-danger,
.commission .alert-success{
    display:block;
    font-size:13px;
    color:#fff;
    background-color:rgba(0, 0, 0, 0.7);
    border:none;
    border-radius:6px;
    padding:15px 4.5vw;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
}
.commission .alert-danger b,
.commission .alert-success b{
    display:none;
}
.commission .alert-danger a,
.commission .alert-success a{
    padding:5px;
    cursor: pointer;
}
.commission .same{
    width:auto;
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.commission .with{
    width:100%;
    height:200px;
    font-size:13px;
    overflow:hidden;
    padding: 18px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: white;
}
.commission .box-agree{
    width:100%;
    height:164px;
    overflow-y:scroll;
    /* margin:0 auto; */
}
.commission .copyright-label,
.commission .teams-label{
    font-size:19px;
    font-weight: 700;
}
.commission .teams-wrap .form-radio{
    margin-bottom:0;
}
.commission .copyright-wrap,
.commission .teams-wrap{
    display:flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    margin-top:2.08vw;
}
.commission .copyright-select,
.commission .use {
    display: flex;
    align-items: center;
    column-gap: 12px;
    row-gap: 20px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin:0;
}

.commission .form-radio {
    display: flex;
    align-items: center;
    column-gap: 12px;
    row-gap: 20px;
    flex-wrap: wrap;

}
.commission .form-radio input {
    width: 13px;
    height: 13px;
    float: left;
    accent-color: #fc8080;
    margin:0;
}
.commission .copyright-select .form-radio h3,
.commission .use .form-radio h3{
    color: #333;
    font-size: 13px;
    font-weight: 400;
    float:left;
    margin-top:5px;
    margin-bottom:0px;
    line-height:0;
}
.commission .use .form-radio .agree {
    margin-right:20px;
}
.commission .copyright-select{
    column-gap: 2%;
    justify-content: space-between;
    row-gap: 0px;
}
.commission .copyright-select div{
    row-gap: 0px;
    flex:1 1 30%;
    justify-content: space-between;
    padding:12px 18px;
    border:1px solid #dcdcdc;
    border-radius: 4px;
}
.commission .copyright-select input[type="radio"]:checked + div{
    border: 1px solid #fc8080;
    transition: all .2s;
}


/* select */
.commission select::-ms-expand {
    display: none;
}
.commission select {
    background: url(../images/drop-arrow.png) no-repeat 98% 50%;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
}
.commission .select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.commission .select-wrap .select-custom{
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 16px;
    text-align: left;
    color: #000;
    width: 100px;
    height: 57px;
    line-height:57px;
}
.commission .select-composer .select-custom{
    cursor: pointer;
    display: inline-block;
    position: relative;
    font-size: 15px;
    text-align: left;
    color:rgba(255, 255, 255, 0.7);
    width: 100%;
    height: 57px;
    line-height:57px;
}
.commission .select-composer .select-styled {
    cursor: pointer;
    display: flex;
    text-align: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    position: relative;
    font-size: 15px;
    text-align:left;
    color: #444;
    width: 100%;
    padding: 0px 18px;
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 10px 0px;
    border:none;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;

}
.commission .select-composer .select-styled{
    border-radius: 6px;
    background-color: #fff;
}

.commission .select-composer .select-styled:after {
    content: url(../images/drop-arrow.png);
    appearance:none;
    position: absolute;
    top: 0;
    right: 18px;
    z-index:1001;
    transition: all 0.2s ease-in;
}
.commission .select-composer .select-styled:hover {
    background-color: #fff;
}
.commission .select-composer .select-wrap .select-styled:hover {
    background-color: transparent;
}
.commission .select-composer .select-styled:active, .commission .select-styled.active{
    background-color: #fff;
    color:#000;
}
.commission .select-composer .select-wrap .select-styled:active, .commission .select-composer .select-wrap .select-styled.active{
    background-color: transparent;
}
.commission .select-composer .select-styled:active:after, .commission .select-composer .select-styled.active:after {
    transform:rotate(180deg);
}

.commission .select-composer .select-options {
    display: none;
    position: absolute;
    top:77px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000 !important;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color:#222;
    line-height: 57px;
    width: 100%;
    height: 374px;
    overflow-x: hidden;
    overflow-Y: scroll;
    list-style: none;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 10px 0px;
    border-radius: 6px;
}
.commission .select-composer .select-options::-webkit-scrollbar{
    width:10px;
}
.commission .select-composer .select-options::-webkit-scrollbar-thumb{
    width:10px;
    height:140px;
    border-radius: 10px;
    background-color:#dcdcdc;;
}
.commission .select-composer .select-options::-webkit-scrollbar-track{
    background-color:transparent;
    border-radius: 10px;
}
.commission .select-composer .select-options li {
    margin: 0;
    font-size:15px;
    text-indent: 15px;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 10px 0px;
}
.commission .select-composer .select-options li:hover, .commission .select-composer .select-options li.is-selected {
    background: #fafafa;
}
.commission .select-composer .select-options li[rel="hide"] {
    display: none;
}

@media(width <= 1440px){
    .commission .copyright-label,
    .commission .teams-label{
        font-size:17px;
    }
}
@media(width <= 1024px){
    .commission input{
        padding:16px;
    }
    .commission .form-action .btn {
        padding:0px;
    }
}
@media (width <= 850px){
    .commission{
        flex-direction: column;
        margin-top:30px;
        margin-bottom:0;
    }
    .commission section:first-child,
    .commission section:last-child{
        width:90vw;
    }
    .commission section:first-child{
        height:200px;
        margin-right:0;
        margin-bottom:30px;
    }
    .commission section:last-child{
        padding:0;
    }
    .commission form{
        padding-top:0;
    }
    .commission .use{
        width:100%;
    }
}
@media(width <= 768px){
    .commission .select-composer .select-wrap .select-custom,
    .commission .select-composer .select-custom {
        height: 50px;
        line-height: 50px;
        font-size: 13px;
    }
    .commission .select-composer .select-options li,
    .commission .select-composer .select-custom .select-styled{
        font-size: 13px;
    }
    .commission .select-composer .select-wrap .select-styled{
        bottom:20px;
    }
    .commission .select-composer .select-styled {
        padding: 0 12px;
    }
    .commission .select-composer .select-options {
        top:70px;
    }

    .commission .select-composer .select-styled {
        border-radius: 4px;
    }

    .commission section h1{
        font-size: 3.4vw;
    }

    .commission input::placeholder {
        font-size:13px;
        color:#252e387a;
    }
    .commission .copyright-select div,
    .commission input{
        font-size:13px;
        padding: 12px;
    }
    .commission #comments,
    .commission .form-control {
        font-size:13px;
    }
    .commission .copyright-label, .commission .teams-label {
        font-size: 15px;
    }
    .commission .teams-label {
        margin-bottom:10px;
    }
}
@media(width <= 540px){
    .commission .select {
        font-size: 12px;
    }
    .commission .commission h1{
        font-size: 5vw;
        line-height: 6.5vw;
    }

    .commission .contact {
        padding: 0 5vw;
    }
    .commission input::placeholder {
        font-size:12px;
        color:#252e387a;
    }
    .commission .copyright-select div,
    .commission input{
        font-size:12px !important;
    }
    .commission .copyright-select div{
        padding:10px 8px;
    }
    .commission .form-control {
        font-size:12px;
    }
    .commission .copyright-select .form-radio {
        column-gap: 4px;
    }
}
@media(width <= 430px){
    .commission section h1 {
        font-size: 19px;
    }

    .commission .select-composer .select-wrap .select-custom,
    .commission .select-composer .select-artist .select-custom {
        font-size: 12px;
    }
    .commission .select-composer .select-options li,
    .commission .select-composer .select-custom .select-styled{
        font-size: 12px;
    }
}