@font-face {
    font-family: "Rubik-Medium";
    src: url("../fonts/rubik/rubik-medium-webfont.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik-Regular";
    src: url("../fonts/rubik/rubik-regular-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik-Light";
    src: url("../fonts/rubik/rubik-light-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik-Bold";
    src: url("../fonts/rubik/rubik-bold-webfont.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Rubik-Black";
    src: url("../fonts/rubik/rubik-black-webfont.woff") format("woff");
    font-style: normal;
}

@font-face {
    font-family: "Northwell";
    src: url("../fonts/Northwell.ttf") format("woff");
    font-style: normal;
}

@font-face {
    font-family: "August_script";
    src: url("../fonts/August_Script_Bold_Free.ttf") format("woff");
    font-style: normal;
}


.Rubik-Bold {
    font-family: "Rubik-Bold";
}

.Rubik-Regular {
    font-family: "Rubik-Regular";
}

.Rubik-Light {
    font-family: "Rubik-Light";
}

@-webkit-keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fade_top {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px);
        -ms-transform: translateY(100px);
        transform: translateY(100px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

.fade_top {
    -webkit-animation-name: fade_top;
    animation-name: fade_top;
}

@-webkit-keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

@keyframes slide_left {
    0% {
        left: 0%;
    }

    100% {
        left: -30%;
    }
}

.slide_left {
    -webkit-animation-name: slide_left;
    animation-name: slide_left;
}

@-webkit-keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

@keyframes slide_right {
    0% {
        right: 0%;
    }

    100% {
        right: -30%;
    }
}

.slide_right {
    -webkit-animation-name: slide_right;
    animation-name: slide_right;
}

@keyframes grow {
    0% {
        transform: scale(1, 1);
        opacity: 1;
    }

    100% {
        transform: scale(1.8, 1.8);
        opacity: 0;
    }
}


/* story style */

.rolling110_wrapper img {
    width: 100%;
    max-width: 100%;
}



.rolling110_wrapper h1,
.rolling110_wrapper h2,
.rolling110_wrapper h3,
.rolling110_wrapper h4,
.rolling110_wrapper h5,
.rolling110_wrapper h6,
.rolling110_wrapper p {
    margin: 0;
    padding: 0;

    ;
}

.rolling110_wrapper .banner_section {
    overflow: hidden;
}

.rolling110_wrapper .relative {
    position: relative;
}

.rolling110_wrapper {
    color: white;
    font-family: "Rubik-Regular";
    overflow: hidden;

}

.rolling110_wrapper .section-padding {
    padding: 110px 0;
}

.rolling110_wrapper .rolling110_container {
    width: 75%;
    margin: 0 auto;
}

.rolling110_wrapper .font-75 {
    font-size: 75px;
}

.rolling110_wrapper .font-65 {
    font-size: 65px;
}

.rolling110_wrapper .font-48 {
    font-size: 48px;
}

.rolling110_wrapper .font-30 {
    font-size: 30px;
}
.rolling110_wrapper .font-22{
    font-size: 22px;
}
.rolling110_wrapper .font-20 {
    font-size: 20px;
}

.rolling110_wrapper .font-18 {
    font-size: 18px;
}

.rolling110_wrapper .font-16 {
    font-size: 16px;
}
.rolling110_wrapper .font-14 {
    font-size: 14px;
}
.rolling110_wrapper .fontbold {
    font-weight: bold;
}

/* .trindygrip_wrapper .vcenter {
    display: inline-block;
    float: none;
    vertical-align: middle;
    margin: 0 -1px;
}

.trindygrip_wrapper .vtop {
    display: inline-block;
    float: none;
    vertical-align: top;
    margin: 0 -1px;
} */

.rolling110_wrapper .speaker_main {
    position: absolute;
    right: 20%;
    bottom: 0;
    width: 20%;
}

.rolling110_wrapper .mic_img {
    position: absolute;
    right: -7%;
    width: 30%;
    bottom: 5%;
    z-index: 1;
}

.rolling110_wrapper .rock_text {
    position: absolute;
    top: 40%;
    left: 20%;

}
.rolling110_wrapper a:hover {
    text-decoration: none;
    color: inherit;
}
.rolling110_wrapper a:focus {
    color: inherit;
    text-decoration: none;
}
.rolling110_wrapper a {
    color: white;
    text-decoration: none;
}
.rolling110_wrapper .rock_text h1 {
    font-size: 48px;
}

.rolling110_wrapper .rock_text :nth-child(1) {
    font-family: "August_script";
    font-size: 65px;
    padding-bottom: 1rem;
}

.rolling110_wrapper .multimedia {
    display: flex;
    flex-direction: column;
    align-items: end;
    position: absolute;
    left: 20%;
    bottom: 10%;
}

.rolling110_wrapper .sec2_flex {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 29%;
    position: absolute;
    top: 60%;
    left: 7%;
    flex-wrap: wrap;
    gap: 1.5rem;
    transform: translateY(-50%);
}

.rolling110_wrapper .sec2_flexright {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19%;
    position: absolute;
    top: 60%;
    right: 13%;
    flex-wrap: wrap;
    gap: 1.5rem;
    transform: translateY(-50%);
}

.rolling110_wrapper .sec2_mainpara {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 1.5rem;
}

.rolling110_wrapper .boxsvg1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    flex-basis: 100%;
    height: 15rem;
}

.rolling110_wrapper .box1_bgcolor {
    background-color: #B1D8EB;
}

.rolling110_wrapper .box2_bgcolor {
    background-color: #ECDAEB;
}

.rolling110_wrapper .box3_bgcolor {
    background-color: #DBE9B8;
}

.rolling110_wrapper .box4_bgcolor {
    background-color: #CFE9CB;
}

.rolling110_wrapper .box5_bgcolor {
    background-color: #BDBFB7;
}

.rolling110_wrapper .box6_bgcolor {
    background-color: #D4D2EA;
}

.rolling110_wrapper .box7_bgcolor {
    background-color: #FFE5C9;
}

.rolling110_wrapper .box8_bgcolor {
    background-color: #CEC7BB;
}

.rolling110_wrapper .box9_bgcolor {
    background-color: #FFF6B5;
}

.rolling110_wrapper .box10_bgcolor {
    background-color: #BDBFB7;
}

.rolling110_wrapper .box11_bgcolor {
    background-color: #FFD6BD;
}

.rolling110_wrapper .box12_bgcolor {
    background-color: #ECDAEB;
}

.rolling110_wrapper .box13_bgcolor {
    background-color: #CFE9CB;
}

.rolling110_wrapper .section2 p {
    color: black;
}

.rolling110_wrapper .sec2_micimg {
    position: absolute;
    bottom: 2%;
    left: 61%;
    transform: translateX(-50%);
    width: 155px;
}
.rolling110_wrapper .dance_boys {
    position: absolute;
    bottom: -7%;
    left: 47%;
    transform: translateX(-50%);
    width: 43%;
}

.rolling110_wrapper .boxsvg2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1rem;
    flex-basis: 100%;

}

.rolling110_wrapper .sec3_flex {
    display: flex;

    justify-content: space-between;

}

.rolling110_wrapper .sec3_flex h2, .rolling110_wrapper .sec3_flex p {
    color: black;
}

.sec3_flexmain {
    position: absolute;
    width: 75%;
    left: 50%;
    top: 7%;
    transform: translateX(-50%);
}

.rolling110_wrapper .sec3_main {
    display: flex;
    flex-direction: column;
    flex-basis: 31%;
    gap: 1rem;
}

.rolling110_wrapper .sec3_main2 {
    display: flex;
    flex-direction: column;
    flex-basis: 26%;
    gap: 1rem;
}

.rolling110_wrapper .sec3_speaker {
    position: absolute;
    bottom: 2%;
    left: 5%;
    width: 21%;
}

.rolling110_wrapper .sec3_speakerimg {
    width: 100%;

}

.rolling110_wrapper .unique_color {
    position: absolute;
    width: fit-content;
    padding-top: 3rem;
}

.rolling110_wrapper .unique_color h2 {
    color: #B21E8D;
}

.rolling110_wrapper .sec3_micimg {
    position: absolute;
    width: 28rem;
    bottom: 2%;
    right: 10%;
}

.remote_text {
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}

.rolling110_wrapper .sec4_speaker {
    position: absolute;
    width: 30%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.speak_arrow {
    position: absolute;
    top: -6%;
    right: 15%;
    width: 12%;
}

.rolling110_wrapper .dancing_img {
    position: absolute;
    bottom: 0;
    left: 12%;
    width: 30%;
}

.rolling110_wrapper .sec4_flex {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

.rolling110_wrapper .sec4_content {
    position: absolute;
    top: 35%;
    left: 13%;
    width: 25%;
    transform: translateY(-50%);
}

.rolling110_wrapper .sec4_pureaudio {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rolling110_wrapper .sec4_text {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.rolling110_wrapper .sec4_contentright {
    position: absolute;
    top: 40%;
    right: 8%;
    width: 25%;
    transform: translateY(-50%);
}

.rolling110_wrapper .sec4_flexright {
    display: flex;
    flex-direction: column;
    gap: 18rem;
}

.rolling110_wrapper .iconimg {
    padding-top: 1rem;
    width: 19%;
}

.rolling110_wrapper .sec4textcolor1 {
    color: #FFEB61;
}

.rolling110_wrapper .sec4textcolor2 {
    color: #FF5400;
}

.rolling110_wrapper .sec4textcolor3 {

    color: #00BDF5;
}

.rolling110_wrapper .sec4textcolor4 {
    color: #FF008A;
}

.rolling110_wrapper .sec4textcolor5 {
    color: #FF7C55;
}

.rolling110_wrapper .sec5_speaker {
    position: absolute;
    width: 20%;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.rolling110_wrapper .techLoaded{
    position: absolute;
    top: 10%;
    left: 18%;
    transform: translate(-50%, -50%);
    color: white;

}
.rolling110_wrapper .sec5_dancing_img {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
}

.rolling110_wrapper .sec5_flex {
    display: flex;
    flex-direction: column;
    width: 75%;
    gap: 8rem;
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
}

.rolling110_wrapper .flex_main {
    display: flex;
    gap: 10rem;
}

.rolling110_wrapper .rgblight_img {
    position: absolute;
    right: 1rem;
    top: 1rem;
    width: 1.5rem;
}

.rolling110_wrapper .recordplay {
    width: 3rem;
}

.rolling110_wrapper .sec5_box {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    padding: 1rem;
    gap: 1rem;
}

.rolling110_wrapper .section5 p, .rolling110_wrapper .section5 h2 {
    color: black;

}

.rolling110_wrapper .boxcolor1 {
    background-color: #F7BA00;
    padding: 1rem 2.5rem 1rem 1rem;
}

.rolling110_wrapper .boxcolor2 {
    background-color: #A6CF00;
    padding: 1rem 2.5rem 1rem 1rem;

}

.rolling110_wrapper .boxcolor3 {
    background-color: #B7C0C6;
}

.rolling110_wrapper .boxcolor4, .rolling110_wrapper .boxcolor4 p, .rolling110_wrapper .boxcolor4 h2 {
    background-color: #008EB5;
    color: white;
    text-align: center;
}

.rolling110_wrapper .boxcolor5, .rolling110_wrapper .boxcolor5 p, .rolling110_wrapper .boxcolor5 h2 {
    background-color: #FF5B00;
    color: white;
}

.rolling110_wrapper .box3flex {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center
}

.rolling110_wrapper .appimg {
    width: 35%;
}

.rolling110_wrapper .twsimg {
    width: 95%;
}

.rolling110_wrapper .box4_flex {
    display: flex;
    /* align-items: center; */
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rolling110_wrapper .box_content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.rolling110_wrapper .box4_flexpara {
    display: flex;
    flex-direction: column;
    width: fit-content;
    align-items: center;
    gap: 3px;
}

.rolling110_wrapper .box4_flexpara span {
    font-size: 8px;
    width: max-content;
}

.rolling110_wrapper .boximg {
    width: 3rem;
}

.rolling110_wrapper .box_text {
    display: flex;
    flex-direction: column;
}

.rolling110_wrapper .section6 {
    background-image: url('../images/sec4_bgimg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

.rolling110_wrapper .titletext {
    padding: 11rem 0;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

.rolling110_wrapper .titlecolor {
    color: #FFEB61;
}

.rolling110_wrapper .sec6_speaker {
    width: 55%;
    margin: 0 auto;
}

.rolling110_wrapper .sec6_speaker div {
    position: absolute;
    font-size: 14px;
}




.rolling110_wrapper .guitar {
    top: -2%;
    left: 45%;
    transform: translateX(-50%);
}

.rolling110_wrapper .mic {
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
}

.rolling110_wrapper .mic2 {
    top: -2%;
    left: 56%;
    transform: translateX(-50%);
}

.rolling110_wrapper .txtright {
    text-align: right;

}

.rolling110_wrapper .txtleft {
    text-align: left;

}

.rolling110_wrapper .txtcenter {
    text-align: center;

}

.rolling110_wrapper .aux {
    top: 13%;
    left: -3%;
    transform: translateY(-50%);
}

.rolling110_wrapper .usb {
    top: 16%;
    left: -3%;
    transform: translateY(-50%);
}

.rolling110_wrapper .microsd {
    top: 21%;
    left: -9%;
    transform: translateY(-50%);
}

.rolling110_wrapper .micDealy {
    top: 27%;
    left: -10%;
    transform: translateY(-50%);
}

.rolling110_wrapper .micecho {
    top: 32%;
    left: -9%;
    transform: translateY(-50%);
}

.rolling110_wrapper .volume {
    top: 39%;
    left: -9%;
    transform: translateY(-50%);
}

.rolling110_wrapper .micvolune {
    top: 46%;
    left: -9%;
    transform: translateY(-50%);
}

.rolling110_wrapper .mode {
    top: 58.5%;
    left: -4%;
    transform: translateY(-50%);
}

.rolling110_wrapper .ledmode {
    top: 15%;
    right: -7.5%;
    transform: translateY(-50%);
}

.rolling110_wrapper .switch {
    top: 28%;
    right: -10.7%;
    transform: translateY(-50%);
}

.rolling110_wrapper .guitarvolume {
    top: 33%;
    right: -10%;
    transform: translateY(-50%);
}

.rolling110_wrapper .bass {
    top: 45%;
    right: -9%;
    transform: translateY(-50%);
}

.rolling110_wrapper .rec {
    bottom: 22%;
    left: 32%;
    transform: translateX(-50%);
}

.rolling110_wrapper .previous {
    bottom: 20%;
    left: 41%;
    transform: translateX(-50%);
}

.rolling110_wrapper .play_pause {
    bottom: 23%;
    left: 50%;
    transform: translateX(-50%);
}

.rolling110_wrapper .next {
    bottom: 22%;
    left: 58.5%;
    transform: translateX(-50%);
}

.rolling110_wrapper .repeat {
    bottom: 28%;
    left: 67%;
    transform: translateX(-50%);
}

.rolling110_wrapper .ledMode {
    bottom: 22%;
    left: 77%;
    transform: translateX(-50%);
}

.rolling110_wrapper .sec4_main {
    margin-bottom: -2px;
}

.rolling110_wrapper .sec7_main_content {
    display: grid;
    grid-template-areas: 'one two three four''five six six sevan''eight nine ten eleven';
    width: 70%;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    background-color: #121315;
}

.rolling110_wrapper .section7 {
    background-image: url(../images/sec4_bgimg.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 120px;
}

.rolling110_wrapper .sec7_text {
    text-align: center;
    padding: 24px 0;
    line-height: 1.1;
    margin: auto;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(1) {
    grid-area: one;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(2) {
    grid-area: two;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(3) {
    grid-area: three;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(4) {
    grid-area: four;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(5) {
    grid-area: five;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(6) {
    grid-area: six;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(7) {
    grid-area: sevan;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(8) {
    grid-area: eight;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(9) {
    grid-area: nine;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(10) {
    grid-area: ten;
}

.rolling110_wrapper .sec7_main_content>div:nth-child(11) {
    grid-area: eleven;
}

.rolling110_wrapper .img_text {
    position: absolute;
    text-align: center;
    bottom: 15%;
    padding: 5px;
    width: 65%;
    left: 50%;
    transform: translateX(-50%);
}

.rolling110_wrapper .img_textcolor1 {
    background-color: #FF5930;
}

.rolling110_wrapper .img_textcolor2 {
    background-color: #FB0080;
}

.rolling110_wrapper .img_textcolor3 {
    background-color: #184084;
}

.rolling110_wrapper .img_textcolor4 {
    background-color: #980818;
}

.rolling110_wrapper .img_textcolor5 {
    background-color: #804C9D;
}

.rolling110_wrapper .img_textcolor6 {
    background-color: #00AF3B;
}

.rolling110_wrapper .img_textcolor7 {
    background-color: #5383AC;
}

.rolling110_wrapper .img_textcolor8 {
    background-color: #6DC03A;
}

.rolling110_wrapper .img_textcolor9 {
    background-color: #EF7F65;
}

.rolling110_wrapper .img_textcolor10 {
    background-color: #F9B913;
}

.rolling110_wrapper .section8_flex {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: absolute;
    top: 50%;
    left: 13%;
    transform: translateY(-50%)
}

.rolling110_wrapper .section8_text {
    width: 23%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rolling110_wrapper .text_control {
    display: flex;
    gap: 12px;

}

.rolling110_wrapper .padding_top {
    padding-top: 25px;
}

.rolling110_wrapper .headingcolor {
    color: #FF5400;
}

.rolling110_wrapper .section8_micimg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22%;
    transform: translate(-50%, -50%);
    z-index: 3;
}

.rolling110_wrapper .sec8_girlsimg {
    position: absolute;
    width: 15%;
    top: 35%;
    right: 15%;
    transform: translate(-50%, -50%);
}
.rolling110_wrapper .shadowimg1{
    box-shadow: 7px 7px 0 #00AF3B;

}
.rolling110_wrapper .shadowimg2{
    box-shadow: 7px 7px 0 #F9B913;

}
.rolling110_wrapper .shadowimg3{
    box-shadow: 7px 7px 0 #EF7F65;
    
}
.rolling110_wrapper .sec8_boysimg {
    position: absolute;
    top: 50%;
    width: 15%;
    right: 12%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.rolling110_wrapper .section8_boximg {
    position: absolute;
    width: 15%;
    top: 65%;
    right: 23%;
    transform: translate(-50%, -50%);
    z-index: 2;

}

.rolling110_wrapper .section8_righttext {
    position: absolute;
    width: 16%;
    top: 70%;
    right: 5%;
    transform: translate(-50%, -50%);
}   

.rolling110_wrapper .section9{
    background-image: url(../images/last-section.png);
    background-size: cover;
    background-position: bottom;
    padding: 12% 0 8% 0;
   

}
.rolling110_wrapper .sec9_main{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
}
.rolling110_wrapper .sec9_speaker {
    flex-basis: 35%;
}
.rolling110_wrapper  .winwith{
    flex-basis: 40%;
    display: flex;
    flex-direction: column;
  
}
.rolling110_wrapper .sec9_micimg {
    width: 22%;
    position: absolute;
    bottom: 0;
    right: -23%;
    z-index: 1;
}

.rolling110_wrapper .circle {
    position: absolute;
    top: 6%;
    left: 15.5%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
   background-color: #b7afaf;;
    color: #fff;
    border-radius: 50%;
    opacity: .5;
    z-index: -1;
}

.rolling110_wrapper .circle::after,.rolling110_wrapper .circle2::after {
    background: rgba(200, 199, 204, .4);
    /* background-color: #524761; */

}

.rolling110_wrapper .circle::before,.rolling110_wrapper .circle2::before {
    background: rgba(200, 199, 204, .6);
    /* background-color: #524761; */

    /* -webkit-animation-delay: -.5s; */
    animation-delay: -.5s;
}

.rolling110_wrapper .circle::after, .rolling110_wrapper .circle::before ,.rolling110_wrapper .circle2::after, .rolling110_wrapper .circle2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    z-index: -1;
    animation: 1s ease-in-out infinite grow;
}
.rolling110_wrapper .circle2 {
    position: absolute;
    top: 20%;
    left: 83%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #7e7e7e;
    color: #fff;
    border-radius: 50%;
    opacity: .5;
    z-index: -1;
}
.rolling110_wrapper .sec8_circle2 {
    position: absolute;
    top: 22%;
    left: 85%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: #7e7e7e;
    color: #fff;
    border-radius: 50%;
    opacity: .5;
    z-index: -1;
}
.rolling110_wrapper .sec8_circle {
    position: absolute;
    top: 8%;
    left: 14%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 150px;
    height: 150px;
    background-color: #7e7e7e;
    color: #fff;
    border-radius: 50%;
    opacity: .5;
    z-index: -1;
}
.rolling110_wrapper .sec8_circle::after,.rolling110_wrapper .sec8_circle2::after {
    background: rgba(200, 199, 204, .4);
    /* background-color: #524761; */

}

.rolling110_wrapper .sec8_circle::before,.rolling110_wrapper .sec8_circle2::before {
    background: rgba(200, 199, 204, .6);
    /* background-color: #524761; */

    /* -webkit-animation-delay: -.5s; */
    animation-delay: -.5s;
}

.rolling110_wrapper .sec8_circle::after, .rolling110_wrapper .sec8_circle::before ,.rolling110_wrapper .sec8_circle2::after, .rolling110_wrapper .sec8_circle2::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    z-index: -1;
    /* -webkit-animation: 1s ease-in-out infinite grow; */
    animation: 1s ease-in-out infinite grow;
}
/* Respomsive */

@media only screen and (max-width:1680px) {
    .rolling110_wrapper .multimedia, .rolling110_wrapper .rock_text {
        left: 15%;
    }

    .rolling110_wrapper .speaker_main {
        right: 18%;
    }

    .rolling110_wrapper .sec3_speaker {

        left: 3%;
        width: 19%;
    }

    .rolling110_wrapper .sec3_micimg {

        right: 7%;
    }

    .rolling110_wrapper .sec3_main {

        flex-basis: 35%;
    }

    .rolling110_wrapper .sec3_main2 {
        display: flex;
        flex-direction: column;
        flex-basis: 30%;
        gap: 1rem;
    }

    .sec3_flexmain {
        position: absolute;
        width: 85%;
        left: 50%;
        top: 7%;
        transform: translateX(-50%);
    }

    .rolling110_wrapper .sec5_flex {

        width: 83%;
        gap: 7rem;

    }

    .rolling110_wrapper .sec6_speaker {
        width: 60%;
    }

    .rolling110_wrapper .font-48 {
        font-size: 40px;
    }
    .rolling110_wrapper .section8_text {
        width: 27%;
    }
    .rolling110_wrapper .section8_righttext {
        width: 18%;
        right: 2%;
    }
}

@media only screen and (max-width:1440px) {
    .rolling110_wrapper .sec2_flex {
        width: 32%;
        left: 7%;

    }

    .rolling110_wrapper .font-18 {
        font-size: 16px;
    }

    .rolling110_wrapper .sec2_flexright {
        width: 24%;
        right: 8%;

    }

    .rolling110_wrapper .font-30 {
        font-size: 28px;
    }

    .rolling110_wrapper .sec3_speaker {
        width: 17%;
    }

    .rolling110_wrapper .boxsvg1 {

        height: unset;
    }

    .rolling110_wrapper .sec4_content {
        top: 40%;
        left: 8%;
        width: 31%;
    }

    .rolling110_wrapper .sec4_contentright {
        top: 48%;
        right: 5%;
        width: 30%;
    }

    .rolling110_wrapper .sec5_flex {
        gap: 6rem;
    }

    .rolling110_wrapper .flex_main {
        gap: 4rem;
    }

    .rolling110_wrapper .sec6_speaker p {
        font-size: 12px;
    }

    .rolling110_wrapper .guitar {
        left: 44%;
    }

    .rolling110_wrapper .sec3_micimg {
        width: 24rem;
    }

    .speak_arrow {
        top: -10%;
        right: 4%;
        width: 17%;
    }

    .rolling110_wrapper .sec2_micimg {

        width: 110px;
    }
    .rolling110_wrapper .section8_flex {
        left: 8%;
    }
    .rolling110_wrapper .section8_text {
        width: 30%;
    }
    .rolling110_wrapper .rolling110_container {
        width: 85%;
        margin: 0 auto;
    }
    .rolling110_wrapper .sec8_circle,    .rolling110_wrapper .sec8_circle2 ,  .rolling110_wrapper .sec8_circle::after, .rolling110_wrapper .sec8_circle::before ,.rolling110_wrapper .sec8_circle2::after, .rolling110_wrapper .sec8_circle2::before  {
      
    
       
      
        width: 90px;
        height: 90px;
       
    }
  
}

@media only screen and (max-width:1366px) {
    .rolling110_wrapper .sec4_content {
        top: 42%;

    }

    .rolling110_wrapper .sec7_main_content {

        width: 90%;

    }
    .rolling110_wrapper .section8_righttext {
        width: 20%;
        right: -1%;
    }
    .rolling110_wrapper .rolling110_container {
        width: 90%;
        margin: 0 auto;
    }
    .rolling110_wrapper .sec2_flex p,    .rolling110_wrapper .sec2_flexright p{
        font-size: 14px;
    }
    .rolling110_wrapper .sec2_flexright span{
        font-size: 12px;
    }
    .rolling110_wrapper .w110 span{
        font-size: 20px;
    }
    .rolling110_wrapper .dance_boys {
      
        width: 45%;
    }
}

@media only screen and (max-width:1280px) {
    .rolling110_wrapper .multimedia, .rolling110_wrapper .rock_text {
        left: 8%;
    }

    .rolling110_wrapper .speaker_main {
        right: 12%;
    }

    .rolling110_wrapper .rock_text :nth-child(1) {

        font-size: 50px;

    }

    .rolling110_wrapper .rock_text h1 {
        font-size: 38px;
    }

    .rolling110_wrapper .multimedia h1 {
        font-size: 32px;
    }

    .rolling110_wrapper .sec2_flex {
        width: 32%;
        left: 2%;
    }

    .rolling110_wrapper .sec2_flexright {
        width: 28%;
        right: 2%;
    }

    .rolling110_wrapper .sec2_bgimg img {
        height: 80vh;
        object-fit: cover;
    }



    .rolling110_wrapper .sec2_mainpara, .rolling110_wrapper .sec2_flexright, .rolling110_wrapper .sec2_flex {

        gap: 1rem;
    }


    .rolling110_wrapper .unique_color {

        padding-top: 1.5rem;
    }

    .rolling110_wrapper .sec3_main {
        flex-basis: 42%;
    }

    .rolling110_wrapper .sec3_flexmain {
        width: 90%;
    }

    .rolling110_wrapper .sec3_bgimg img {
        height: 80vh;
        object-fit: cover;
    }

    .rolling110_wrapper .sec3_flexmain {
        width: 95%;
    }

    .rolling110_wrapper .sec4_text {
        gap: 2rem;
    }

    .rolling110_wrapper .sec4_flex {

        gap: 5rem;
    }

    .rolling110_wrapper .sec4_flexright {

        gap: 10rem;
    }

    .rolling110_wrapper .flex_main {
        gap: 2rem;
    }

    .rolling110_wrapper .sec5_bgimg img {
        height: 80vh;
        object-fit: cover;
    }

    .rolling110_wrapper .sec5_flex {
        width: 95%;
        gap: 3rem;
    }

    .speak_arrow {
        top: -13%;
        right: 7%;
        width: 18%;
    }

    .rolling110_wrapper .sec2_micimg {
        position: absolute;
        left: 60%;
    }
    .rolling110_wrapper .section8_flex {
        gap: 40px;
    }
    .rolling110_wrapper .sec6_speaker {
        width: 70%;
    }
}
@media only screen and (max-width:1152px) {
    .rolling110_wrapper .section8_righttext {
        top: 75%;
    }
    .rolling110_wrapper .dance_boys {
        width: 56%;
        left: 48%;
    }
}
@media only screen and (max-width:1024px) {
    .rolling110_wrapper .rock_text :nth-child(1) {
        font-size: 42px;
    }

    .rolling110_wrapper .rock_text h1 {
        font-size: 32px;
    }

    .rolling110_wrapper .multimedia h1 {
        font-size: 28px;
    }

    .rolling110_wrapper .sec2_flex {
        width: 35%;
        left: 2%;
    }

    .rolling110_wrapper .sec2_flexright {
        width: 29%;
        right: 2%;

    }

    .rolling110_wrapper .sec2_bgimg img {
        height: 75vh;
        object-fit: cover;
        object-position: 41%;
    }

    .rolling110_wrapper .font-30 {
        font-size: 24px;
    }

    .rolling110_wrapper .sec3_speaker {
        left: -3%;
        width: 19%;
    }

    .rolling110_wrapper .sec3_micimg {
        width: 22rem;
    }

    .rolling110_wrapper .sec3_micimg p,
    .rolling110_wrapper .section4 p {
        font-size: 14px;
    }

    .rolling110_wrapper .sec5_speaker {
        width: 24%;
    }



    .rolling110_wrapper .sec6_speaker {
        width: 78%;
    }

    .rolling110_wrapper .font-18 {
        font-size: 14px;
    }

    .rolling110_wrapper .font-48 {
        font-size: 38px;
    }
    .rolling110_wrapper .box4_flex {
     
        gap: 0.5rem;
    }

}

@media only screen and (max-width:992px) {
    .rolling110_wrapper .multimedia h1 {
        font-size: 24px;
    }

    .rolling110_wrapper .rock_text h1 {
        font-size: 28px;
    }

    .rolling110_wrapper .rock_text :nth-child(1) {
        font-size: 38px;
    }

    .rolling110_wrapper .font-18 {
        font-size: 16px
    }

    .rolling110_wrapper .spanfont span {
        font-size: 14px;
    }

    .rolling110_wrapper .speaker_main {

        width: 25%;
    }

    .rolling110_wrapper .sec2_flex {

        width: 100%;
        position: relative;
        top: unset;
        left: unset;
        flex-wrap: wrap;

        transform: unset;
    }

    .rolling110_wrapper .sec2_flexright {
        width: 100%;
        position: relative;
        top: unset;
        left: unset;
        flex-wrap: wrap;
        right: unset;
        transform: unset;
        align-items: unset;

    }

    .sec2_main {
        display: flex;
        gap: 1rem;
        padding: 2rem;
    }

    .rolling110_wrapper .sec3_flexmain {
        width: 95%;
        margin: 0 auto;
        position: relative;
        top: unset;
        left: unset;
        transform: unset;
        padding: 3rem 0;

    }

    .rolling110_wrapper .sec3_flex {
        flex-direction: column;
        gap: 1.5rem;
    }
    .rolling110_wrapper .sec6_flex {
       
        padding: 2rem;
    }
    .rolling110_wrapper .sec3_flexmain br,    .rolling110_wrapper  .text_control br {
        display: none;
    }

    .rolling110_wrapper .sec3_bgimg img {
        height: 60vh;
        object-fit: cover;
    }

    .rolling110_wrapper .sec3_speaker {

        width: 25%;
    }

    .rolling110_wrapper .sec3_micimg {
        width: 18rem;
        right: 2%;
    }

    .rolling110_wrapper .unique_color {
        top: 20%;
        left: 3%;
        padding-top: 0;
    }

    .rolling110_wrapper .sec4_content{
        position: unset;
        padding: 3rem 2rem 1rem 2rem;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: unset;
    }
    .rolling110_wrapper .sec4_contentright{
        padding: 1rem 2rem 3rem 2rem;
        position: unset;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        transform: unset;
    }


    .rolling110_wrapper .sec4textcolor1 {
        color: #d5ba00;
    }

    .rolling110_wrapper .sec4_flex, .rolling110_wrapper .sec4_flexright, .rolling110_wrapper .sec5_flex {
        gap: 2rem;
    }

    .rolling110_wrapper .sec4_text {
        gap: 2rem;
    }

    .rolling110_wrapper .iconimg {
        width: 15%;
    }

    .rolling110_wrapper .sec4_speaker {
        width: 31%;
    }

    .rolling110_wrapper .dancing_img {

        left: 5%;
        width: 40%;
    }

    .rolling110_wrapper .sec5_flex {
        width: 100%;
        gap: 2rem;
        padding: 2rem;
        transform: unset;
        background: black;
        position: unset;
        margin-top: -10px;
    }

    .rolling110_wrapper .sec5_bgimg img {
        height: 45vh;
        object-fit: cover;
        object-position: top;
    }

    .rolling110_wrapper .sec5_dancing_img {
        position: absolute;
        top: 45%;
        left: 48%;
        transform: translate(-50%, -50%);
        width: 93%;
    }

    .rolling110_wrapper .flex_main {

        flex-wrap: wrap;
    }

    .rolling110_wrapper .sec5_box {
        flex-basis: 100%;

    }

    .rolling110_wrapper .boxcolor1 {
        padding: 1rem 5.5rem 1rem 1rem;
    }

    .rolling110_wrapper .rgblight_img {

        width: 3rem;
    }

    .rolling110_wrapper .twsimg {
        width: 19rem;
    }

    .rolling110_wrapper .box3flex {

        justify-content: space-between;
    }

    .rolling110_wrapper .appimg {
        width: 7rem;
    }

    .rolling110_wrapper .box4_flex {
        align-items: unset;
        justify-content: unset;

        gap: 1rem;
    }

    .rolling110_wrapper .boxcolor4, .rolling110_wrapper .boxcolor4 p, .rolling110_wrapper .boxcolor4 h2 {

        text-align: left;
    }

    .rolling110_wrapper .box4_flexpara span {
        font-size: 10px;
    }

    .rolling110_wrapper .box_text {
        flex-direction: row;
        gap: 2px;
    }

    .rolling110_wrapper .sec5_speaker {

        top: 15%;

    }

    /* .rolling110_wrapper .sec6_flex p::before {
        position: absolute;
        top: 12px;
        left: -6px;
        transform: translateY(-50%);
        width: 3px;
        background-color: #ffffff;
        content: "";
        height: 3px;
        border-radius: 100%
    } */

    .rolling110_wrapper .sec6_flex p {
        font-size: 16px;
        text-align: left;
        position: relative;
        transform: unset;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
    }

    .rolling110_wrapper .sec6_flex {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 3rem;
    }
    
    .rolling110_wrapper .sec6_flex>li {
        flex-basis: calc(100%/3);

    }

    .rolling110_wrapper .titletext {
        padding: 3rem 0;
        gap: 1rem;
        width: 95%;
        margin: 0 auto;
    }

    .rolling110_wrapper .sec2_bgimg img {

        object-position: 50%;
    }

    .rolling110_wrapper .mic_img {
        right: -20%;
        width: 40%;
    }

    .rolling110_wrapper .sec7_main_content {
        grid-template-areas: 'one two three four five''six six six six six''seven eight nine ten eleven';
        grid-template-columns: repeat(5, 1fr);
        overflow: scroll;
        width: 95%;
    }

    .rolling110_wrapper .sec8_main {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #121315;

    }

    .rolling110_wrapper .sec8_mainimgs {
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: relative;

    }

    .rolling110_wrapper .sec8_mainimgs1 {
        display: flex;
        flex-direction: row;
        gap: 10px;
        position: relative;
    }

    .rolling110_wrapper .sec8_Memorable {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .rolling110_wrapper .sec8_imgtext {
        text-align: center;
        bottom: 10%;
        display: flex;
        align-items: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        width: 75%;
        justify-content: center;
    }

    .rolling110_wrapper .sec8_imgtext p {
        padding: 10px;

    }

    .rolling110_wrapper .sec8_mainimgs {
        gap: 0;
    }

    .rolling110_wrapper .sec8_main {
        overflow-x: hidden;
        position: relative;
        padding:24px;
    }




    .rolling110_wrapper .swiper {
        width: 100%;
        height: 100%;
    }

    .rolling110_wrapper .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 1;
        display: flex;
        transition-property: transform;
        box-sizing: content-box;
        padding: 0 0 2rem 0;
    }


    .rolling110_wrapper .swiper-slide {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .rolling110_wrapper .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .rolling110_wrapper .swiper-scrollbar-drag {
        height: 100%;
        width: 100%;
        position: relative;
        background: white;
        border-radius: 10px;
        left: 0;
        top: 0;
    }


    .rolling110_wrapper .swiper-container-horizontal>.rolling110_wrapper .swiper-scrollbar {
        position: absolute;
        left: 1%;
        bottom: 5px !important;
        z-index: 50;
        height: 5px;
        width: 98%;
    }

    .rolling110_wrapper .font-48 {
        font-size: 34px;
    }

    .rolling110_wrapper .section8_bgimg{
        position: relative;
    }
    .rolling110_wrapper .section8_flex {
        gap: 36px;
        position: relative;
        left: unset;
        padding: 24px;
        transform: unset;
    }
    .rolling110_wrapper .section8_text {
        width: 100%;
    }
    .rolling110_wrapper .sec8_girlsimg, .rolling110_wrapper .sec8_boysimg, .rolling110_wrapper .section8_boximg {
        position: relative;
        width: 300px;
        top: unset;
        right: unset;
        transform: unset;
    }
    .rolling110_wrapper .sec8_boysimg {
        margin: -3% auto;
    }
    .rolling110_wrapper .section8 , .rolling110_wrapper .section2,.rolling110_wrapper  .section4 {
        background-image: url('../images/sec4_bgimg.png');
        background-size: cover;
    }
    .rolling110_wrapper .dance_boys {
        position: relative;
        top: 0;
        left: 0;
        padding-top: 2rem;
        padding-right: 14%;
        transform: unset;
        margin: -2% auto;
        width: 80%;
    }
    .rolling110_wrapper .sec2_micimg {
        position: absolute;
        
        width: 100px;
        left: 68%;
    }
    .rolling110_wrapper .section8_micimg {
        position: relative;
        top: 0;
        left: 0;
        width: 190px;
        margin: 3% auto;
        transform: unset;
        z-index: 3;
    }
    .rolling110_wrapper .section8_imgs{
        width: 80%;
        margin: 0 auto;
        position: relative;
        padding: 36px 0;
    }
    .rolling110_wrapper .section8_righttext {
        width: 42%;
        right: unset;
        top: unset;
        bottom: 4%;
        left: 75%;
        transform: translateX(-50%);
    }
    .rolling110_wrapper .techLoaded span{
        font-size: 18px;
    }
    .rolling110_wrapper .sec9_main {
       
        flex-direction: column-reverse;
    }
    .rolling110_wrapper .sec9_speaker {
        width: 50%;
    }
    .rolling110_wrapper .sec9_main {
        align-items: flex-start;
    }
    .rolling110_wrapper .sec4_speaker {
        position: relative;
        width: 45%;
        padding-top: 36px;
    }
    .rolling110_wrapper .box4_flex {
     
        gap: 1rem;
    }
    .rolling110_wrapper .sec8_circle,    .rolling110_wrapper .sec8_circle2 ,  .rolling110_wrapper .sec8_circle::after, .rolling110_wrapper .sec8_circle::before ,.rolling110_wrapper .sec8_circle2::after, .rolling110_wrapper .sec8_circle2::before  {

        width: 60px;
        height: 60px;
       
    }
    .rolling110_wrapper .sec6_speaker {
        width: 95%;
        position: relative;
    }

    .rolling110_wrapper .hover-content {
        opacity: 0;
        position: absolute;
        left: 50%;
        bottom: 9px;
        width: 100%;
        text-align: center;
        transform: translateX(-50%);
    }
    .rolling110_wrapper .dot_div p{
        font-size: 18px;
    }
    .rolling110_wrapper .dot_div:hover{
       color: #000000;
       background-color:#ffffff;        
    }
    .rolling110_wrapper .dot_div:hover~.hover-content{
        opacity: 1;     
    }





  

    
    
    


    .rolling110_wrapper .dot_div:hover{
        color: #000000;
        background-color:#ffffff;        
     }

     

     


    .rolling110_wrapper .points{
        min-height: 50px;
    }

    .rolling110_wrapper .sec6_flex{
        position: relative;
    }
    /* .rolling110_wrapper .dot1:hover ~ .sec6_flex li:nth-child(1){
        opacity: 1;
    } */

    /* .sec6_flex li:nth-child(1){
        opacity: 1;
    } */

    .rolling110_wrapper .dot_div{
        width: 30px;
        height: 30px;
        background-color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        position: absolute !important;
        z-index: 1;
    }

 
    .rolling110_wrapper .dot4{
        top: 12%;
        left: 45%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot5{
        top: 12%;
        left: 51%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot6{
        top: 12%;
        left: 56%;
        transform: translateX(-50%);
    }
    

    
    .rolling110_wrapper .dot3{
        top: 15%;
        left: 37%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot2{
        top: 15%;
        left: 32%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot1{
        top: 15%;
        left: 26%;
        transform: translateY(-50%);
        
    }
    
    .rolling110_wrapper .dot21{
        top: 30%;
        left: 34%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot20{
        top: 27%;
        left: 24%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot19{
        top: 33%;
        left: 43%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot18{
        top: 39.5%;
        left: 24%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot17 {
        top: 54.5%;
        left: 22%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot7 {
        top: 15%;
        right: 37%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot8 {
        top: 30%;
        right: 33.5%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot9 {
        top: 27%;
        right: 24%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot10 {
        top: 40%;
        right: 23%;
        transform: translateY(-50%);
    }
    
    .rolling110_wrapper .dot16 {
        bottom: 38%;
        left: 32%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot15 {
        bottom: 37%;
        left: 41%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot14 {
        bottom: 37%;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot13 {
        bottom: 37%;
        left: 58.5%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot12 {
        bottom: 37%;
        left: 68%;
        transform: translateX(-50%);
    }
    
    .rolling110_wrapper .dot11 {
        bottom: 37%;
        left: 77%;
        transform: translateX(-50%);
    }

    .rolling110_wrapper .mobile_hover .hover-content {
        display: none;
    }

    .rolling110_wrapper .mobile_hover .dot_div:hover ~ .hover-content {
        display: block;
    }
    .rolling110_wrapper .mobile_hover.default_hover .hover-content {
        display: block;
        opacity: 1;
    }
    .rolling110_wrapper .mobile_hover:hover ~ .default_hover .hover-content {
        opacity: 0;
    }
    .rolling110_wrapper .mobile_hover.default_hover .dot_div {
        background-color: #FFF;
    }
    .rolling110_wrapper .mobile_hover.default_hover .dot_div  p{
        color: #000;
    }
    .rolling110_wrapper .mobile_hover:hover ~ .default_hover .dot_div {
        background-color: #000;
    }
    .rolling110_wrapper .mobile_hover:hover ~ .default_hover .dot_div  p{
        color: #FFF;
    }
    
    .rolling110_wrapper .sec6_speaker-1{
        width: 95%;
        margin: 0 auto;
    }
    .rolling110_wrapper .sec5_function{
        padding-bottom: 6px;
    }

}

@media only screen and (max-width:767px) {
    .rolling110_wrapper .main_bgimg img {
        height: 60vh;
        object-fit: cover;
        object-position: 54%;
    }

    .rolling110_wrapper .rock_text {
        left: unset;
        right: 2%;
        top: 3%;
    }

    .rolling110_wrapper .multimedia {
        left: 2%;
        bottom: 3%;
    }

    .rolling110_wrapper .speaker_main {
        width: 35%;
        right: 5%;
    }

    .rolling110_wrapper .mic_img {
        right: -8%;

    }

    .sec2_main {
        flex-direction: column;
        padding: 1rem;
    }

    .rolling110_wrapper .sec2_bgimg img {
        height: 38vh;
        object-position: center;
    }

    .rolling110_wrapper .boxsvg2 {
        align-items: unset;
    }

    .rolling110_wrapper .sec3_speaker {
        width: 18rem;
        left: -3rem;
    }
    .rolling110_wrapper .titletext {
        text-align: left;
    }
    .rolling110_wrapper .sec3_bgimg img {
        height: 50vh;
        object-fit: cover;
    }

    .rolling110_wrapper .unique_color {
        top: 12%;

    }

    .rolling110_wrapper .font-18 {
        font-size: 14px;
    }

    .rolling110_wrapper .sec4_speaker {
        width: 27rem;
        padding-top: 24px;
    }

    .rolling110_wrapper .sec4_bgimg img {
        height: 35vh;
        object-fit: cover;
    }

    .rolling110_wrapper .dancing_img {

        width: 20rem;
    }

    .rolling110_wrapper .iconimg {
        width: 7rem;
    }
    .rolling110_wrapper .sec4_content{
        padding: 2rem 1rem 1rem 1rem;

    }
    .rolling110_wrapper .sec4_contentright {
        padding: 1rem 1rem 2rem 1rem;
    }
    .rolling110_wrapper .sec3_flexmain {
     
        padding: 2rem 0;
    }
    .rolling110_wrapper .sec3_micimg p {
        font-size: 12px;
    }

    .rolling110_wrapper .section4 p {
        font-size: 16px;
    }

    .rolling110_wrapper .sec5_dancing_img {
        top: 50%;
    }

    .rolling110_wrapper .sec5_speaker {
        top: unset;
        bottom: 0;
        width: 18rem;
        z-index: 2;
    }

    .rolling110_wrapper .boxcolor1 {
        padding: 1rem 4.5rem 1rem 1rem;
    }

    .rolling110_wrapper .rgblight_img {
        width: 3rem;
    }

    .rolling110_wrapper .recordplay {
        width: 3rem;
    }

    .rolling110_wrapper .box4_flexpara span {
        font-size: 9px;
    }



    .rolling110_wrapper .box4_flexpara {

        gap: 5px;
    }

    .rolling110_wrapper .sec6_flex>li {
        flex-basis: calc(100%/2);

    }

    .rolling110_wrapper .titletext {
        padding: 2rem 1rem;
        gap: 1rem;
        width: 100%;
    }

    .rolling110_wrapper .sec6_flex {

        padding-left: 2rem;
    }

    .rolling110_wrapper .font-48 {
        font-size: 28px;
    }
    .rolling110_wrapper .dance_boys {
      
        width: 95%;
    }
    .rolling110_wrapper .sec2_micimg {

        left: 75%;
        width: 70px;
    }

    .rolling110_wrapper .img_text {
        bottom: 0;
        width: 100%;
        position: relative;
        min-height: 65px;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0%;
        transform: unset;
    }
    .rolling110_wrapper .sec8_main {
        overflow-x: hidden;
        position: relative;
        margin: -2px 0;
        padding: 24px 12px;
    }
    .rolling110_wrapper .section8_imgs {
        width: 95%;
        padding: 24px 2% 24px 0px;
    }
    .rolling110_wrapper .sec8_boysimg {
        margin: 0 0 0 auto;
    }
    .rolling110_wrapper .section8_righttext {
        width: 95%;
        padding: 0 0 2rem 0;
        margin: 0 auto;
        right: unset;
        top: unset;
        bottom: 0;
        left: 0;
        transform: unset;
        position: relative;
    }
    .rolling110_wrapper .font-18 {
        font-size: 16px;
    }
    .rolling110_wrapper .rolling110_container {
        width: 95%;
        margin: 0 auto;
    }
    .rolling110_wrapper .sec9_main span{
        font-size: 30px;
    }
    .rolling110_wrapper .sec9_main br {
        display: none;
    }
    .rolling110_wrapper .section8_flex,    .rolling110_wrapper .sec5_flex {
       
        padding: 24px 12px;
    }
    .rolling110_wrapper .section9 {
        padding: 24px 0;
    }
    .rolling110_wrapper .sec9_micimg {
        width: 35%;
        right: -30%;
    }
    .rolling110_wrapper .sec9_speaker {
        width: 70%;
    }
    .rolling110_wrapper .sec9_main{
        gap: 36px;
    }
    .rolling110_wrapper .circle, .rolling110_wrapper .circle2 , .rolling110_wrapper .circle::before ,.rolling110_wrapper .circle::after , .rolling110_wrapper .circle2::before ,.rolling110_wrapper .circle2::after {
      
        width: 20px;
        height: 20px;
     
    }
    .rolling110_wrapper .box_text {
        flex-direction: column;
        gap: 0;
    }
    .rolling110_wrapper .dot_div p{
        font-size: 10px;
    }
    .rolling110_wrapper .dot_div {
        width: 15px;
        height: 15px;
    }
    .rolling110_wrapper .dot16,    .rolling110_wrapper .dot15,    .rolling110_wrapper .dot14,    .rolling110_wrapper .dot13,    .rolling110_wrapper .dot12,    .rolling110_wrapper .dot11 {
        bottom: 42%;
      
    }
    .rolling110_wrapper .dot10 {
        top: 37%;
     
    }
    .rolling110_wrapper .dot9 {
        top: 26%;
    }
    .rolling110_wrapper .dot8 {
        top: 29%;
      
    }
    .rolling110_wrapper .dot7 {
        top: 13%;
        right: 37%;
        transform: translateY(-50%);
    }
    .rolling110_wrapper .dot6,    .rolling110_wrapper .dot5,    .rolling110_wrapper .dot4    {
        top: 11%;
      
    }
    .rolling110_wrapper .dot3, .rolling110_wrapper .dot2 {
        top: 13%;
      
    }
    .rolling110_wrapper .dot1 {
        top: 13.5%;
       
    }
    .rolling110_wrapper .dot20 {
        top: 25%;
       
    }
    .rolling110_wrapper .dot21 {
        top: 29%;
       
    }
    .rolling110_wrapper .dot18 {
        top: 36.5%;
        
    }
    .rolling110_wrapper .dot17 {
        top: 55.5%;
      
    }


        /**/

        

    
        /**/

}