/*banner*/
 .banner {
     background-image: url(../image/artistbanner.jpg);
 }

 /*font-color*/
 .white {
     color: var(--light);
 }

 .red-word {
     color: var(--primary-red);
 }



 /*no margin*/
 .no-margin {
     margin: 0px;

 }

 /*content*/
 .image-border {
     border-radius: 20px;
 }

 /*section1*/
 .mobile-image {
     display: none;
     justify-content: center;
 }

 .mobile-image img {
     width: 70%;
 }

 .section1 {
     margin: 0px;
     margin-top: 40px;
     display: flex;
     justify-content: space-between;
     align-items: center
 }

 .content-left {
     width: 90%;
 }

 .content-left img {
     width: 100%;
 }

 .content-right {
     padding-left: 120px;
 }

 /*section1 message*/
 .right-middle {
     margin-top: 50px;
 }

 .message {
     display: flex;

 }

 .bold {
     font-weight: 700;
 }

 .message p {
     margin: 0px;
     padding: 5px 0px;
 }

 /*section2*/
 .albumcontainer {
     display: flex;
     width: 100%;
     justify-content: space-between;
     gap: 5%;
 }

 .sec2margin {
     margin-bottom: 5%;
 }

 .circle img {
     width: 100%;
 }

 .album-title {
     display: none;
 }

 .circle {
     position: relative;
     overflow: hidden;
     cursor: pointer;
 }

 .circle .album-info {
     position: absolute;
     inset: 0;
     display: none;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color: var(--light);
     text-align: center;
     padding: 0 10px;
 }

 .circle:hover .album-info {
     display: flex;
 }

 .circle:hover img {
     filter: brightness(40%);
 }


 /*section3*/
 .hitsong-container {
     display: flex;
     justify-content: space-between;
     gap: 30px;
 }

 .box {
     background-color: var(--primary-red);
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     width: calc(100% / 3);
 }

 .btn {
     display: flex;
     justify-content: flex-end;
 }


 .hitsong img {
     width: 100%;
     aspect-ratio: 1/1;
     overflow: hidden;
     object-fit: cover;
 }

 .margin-bottom {
     margin-bottom: 0px;
 }

 /*section4*/
 .award-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .button2 .btn-light:hover {
     background: var(--dark);
     color: var(--light);
 }

 .award-container p {
     margin: 0px;
 }

 /*section5*/
 .news-container {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .fullwidth-box .left img {
     width: 100%;

 }

 .fullwidth-box {
     display: flex;
     width: 100%;
     box-sizing: border-box;
 }

 .fullwidth-box .left {
     width: 40%;

 }

 .fullwidth-box .right {
     width: 60%;
 }


 .button1,
 .button2 {
     display: flex;
     justify-content: flex-end;
 }


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

     /*section1*/
     .content-right {
         padding-left: 0px;
         margin: 5%;
     }

 }

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

     /*section2*/
     .hitsong-container {
         display: flex;
         gap: 30px;
         flex-wrap: wrap;
         justify-content: center;
     }
 }

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


     /*btn*/
     .button1,
     .button2 {
         justify-content: center;
     }

     /*section1*/
     .section1 {
         display: flex;
         flex-direction: column;
         padding: 40px 60px;
     }

     .content-right {
         padding-left: 0px;
         margin: 0%;
     }

     .right-first,
     .section2-header,
     .center,
     .hitsong,
     .fullwidth-box {
         text-align: center;
     }

     .content-left {
         display: none;
     }

     .mobile-image {
         display: flex;
     }

     .right-middle {
         display: flex;
         margin-top: 30px;
         flex-wrap: wrap;
         justify-content: center;
     }

     /*section3*/
     .box {
         width: 35.4%;
     }

     /*section5*/
     .fullwidth-box {
         display: flex;
         width: 100%;
         flex-direction: column;
         gap: 0px;
     }

     .fullwidth-box .left,
     .fullwidth-box .right {
         width: 100%;
     }

 }

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

     /*btn*/
     .button1,
     .button2 {
         justify-content: center;
     }

     /*section2*/
     .albumcontainer {
         display: flex;
         flex-direction: column;
         gap: 30px;
     }

     /*section3*/
     .hitsong-container {
         display: flex;
         gap: 30px;
         flex-wrap: wrap;
         justify-content: center;
     }

     .box {
         width: 100%;
     }
 }

 @media (max-width: 438px) {
     .section1 {
         padding: 30px 30px;
     }
 }