@media (max-width: 1910px) {
  .container {
    padding: 115px 160px 0;
  }

  .main-aside .minutes-shortcut-btn:first-child {
    margin-bottom: 0;
  }

  .main-hero-wrap {
    align-items: center;
  }

  .main-hero-wrap,
  .main-hero-inner {
    flex-direction: column;
  }

  .main-hero {
    padding: var(--spacing-2xl);
    max-width: unset;
  }

  .slogan-section {
    position: relative;
    padding: var(--spacing-lm) 0;
    overflow: hidden;
    z-index: 1;
  }

  .slogan-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    background: url('/site/basic/img/main/img-slogan-bg.png') no-repeat;
    background-size: 100% 100%;
    background-position: center;
    border-radius: var(--radius-l);
    z-index: -1;
  }

  .slogan-section .slogan {
    font-size: var(--H2);
    text-align: center;
  }

  .slogan-section .welcome-msg {
    display: none;
  }

  .slogan-section .sub-title {
    font-size: var(--H6);
    text-align: center;
  }

  .main-hero-content {
    display: flex;
    gap: var(--spacing-3xl);
    margin-top: var(--spacing-2xl);
    max-width: unset;
  }

  .main-hero-content .info-cards {
    flex: 1;
  }

  .search-section,
  .search-section .search-box-wrap {
    max-width: unset;
    flex: 1;
  }

  .search-section .search-tags {
    margin-left: 0;
    margin-right: 0;
  }

  .chairman-section {
    margin-top: var(--spacing-5xl);
  }

  .chairman-section .chairman-emblem {
    bottom: 300px;
  }

  .schedule-section .schedule-right {
    max-width: 656px;
  }

  .schedule-section .schedule-divider {
    margin: 0 var(--spacing-3xl);
  }

  .main-aside {
    display: block;
  }

  .login-cards {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    top: 155px;
    right: var(--spacing-xs);
    width: 80px;
    height: 100%;
    z-index: 80;
  }

  .login-card {
    height: 160px;
  }

  .login-card.councilor .login-gradient-layer.layer1 {
    background-image: linear-gradient(180deg, rgba(32, 208, 147, 0) 85%, #20d093 100%);
  }

  .login-card.citizen .login-gradient-layer.layer1 {
    background-image: linear-gradient(180deg, rgba(32, 208, 147, 0) 85%, #fb8d3e 100%);
  }

  .login-card img {
    width: 100%;
  }

  .login-card.citizen img {
    width: 90%;
    margin-bottom: 35px;
  }

  .login-card-text {
    transform: none;
    transition: none;
  }

  .login-card-text .main-text {
    font-size: var(--body-1);
    word-break: keep-all;
  }

  .login-card-text .sub-text {
    display: none;
  }

  .main-aside {
    max-width: unset;
    margin-top: 0;
  }

  .main-aside .minutes-shortcut-btn {
    
  }

  .main-speech {
    padding: var(--spacing-2xl);
    padding-right: 0;
  }

  .scroll-gradient {
    display: none;
  }

  .speech-controls {
    padding-right: var(--spacing-2xl);
  }

  .speech-list {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    overflow-x: scroll;
    overflow-y: auto;
  }

  .speech-item {
    flex: 0 0 374px;
    max-width: 374px;
    border-right: 1px solid var(--earth-100);
    border-bottom: none;
    padding: var(--spacing-m) var(--spacing-m);
  }

  .speech-item:last-child {
    border-right: none;
  }

  .views {
    margin-left: 0;
    justify-content: flex-start;
  }

  .main-aside .minutes-shortcut {
    display: flex;
    margin-top: var(--spacing-xs);
  }

  .main-middle-wrap {
    margin-top: var(--spacing-2xl);
    padding-bottom: 0;
  }

  .main-middle-inner {
    flex-direction: column;
    padding: 14vh var(--spacing-m) 10vh;
  }

  .rep-intro-wrap {
    /* padding-top: var(--spacing-6xl);
    padding-left: 0;
    padding-bottom: 280px;
    z-index: 0; */
  }

  .rep-intro {
    margin: 0 auto;
  }

  .stats-wrap {
    max-width: unset;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    /* margin-top: var(--spacing-6xl); */
    margin-top: 40vh;
    margin-bottom: var(--spacing-2xl);
    padding: var(--spacing-ml) 0;    
    width: 1472px;
    height: 562px;
    background: var(--stat-content-bg);
    z-index: 1;
    opacity: 1;
    overflow: hidden;
  }

  .stats-title {
    font-size: 24px;
  }

  .stats-section-wrap {
    flex-direction: row;
    margin: 0 auto;
    align-items: flex-start;
    max-width: 1364px;
  }

  .stats-header {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 293px;
  }

  .main-bottom-wrap {
    margin-top: 0;
  }

  .main-bottom-wrap .notice-section {
    padding-right: 0;
  }

  .content-layout .content-right {
    max-width: 1098px;
    border-radius: var(--radius-l);
  }

  .press-article-content-wrapper {
    max-width: unset;
  }

  .press-article .press-article-link {
    flex-direction: column;
    align-items: flex-start;
  }

  .press-article-image {
    max-width: unset;
    max-height: unset;
    aspect-ratio: 509 / 267;
  }

  .press-grid {
    flex-direction: column;
  }

  .press-item-content {
    width: 100%;
    max-width: unset;
  }

  .news-section {
    position: sticky;
    top: 100px;
    justify-content: flex-start;
    padding-top: var(--spacing-2xl);
    align-self: flex-start;
  }
}

@media (max-width: 1648px) {
  .container {
    padding: 115px 76px 0;
  }

  .slogan-section .slogan {
    font-size: var(--H2);
  }

  .slogan-section .sub-title {
    font-size: var(--H6);
    text-align: center;
  }

  .schedule-section .schedule-right {
    max-width: 604px;
  }

  .stats-wrap { 
    width:100%;   
  }
  .stats-section-wrap {

  }

  .content-layout .content-right {
    max-width: 994px;
  }
}

@media (max-width: 1496px) {
  .container {
    padding: 115px var(--spacing-m) 0;
  }

  .main-hero {
    padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-2xl);
  }

  .main-hero-content {
    margin-top: var(--spacing-xl);
  }

  .slogan-section {
    padding: var(--spacing-m) 0;
  }

  .slogan-section::after {
    border-radius: var(--radius-l);
  }

  .schedule-section {
    padding: var(--spacing-xl) 0 var(--spacing-4xl);
  }

  .schedule-section .schedule-right {
    max-width: 588px;
  }

  .main-speech {
    padding: var(--spacing-xl);
    padding-right: 0;
  }

  .speech-controls {
    padding-right: var(--spacing-xl);
  }

  .stats-wrap {
    padding: var(--spacing-ml) 0;
    max-width: 1448px;
    width: auto;
  }

  .stats-section-wrap {
    overflow-x: scroll;
    padding-left: var(--spacing-s);
    padding-right: var(--spacing-s);
    margin: 0;        
    max-width: 100%;
  }

  .main-bottom-wrap .notice-section {
    padding-left: 0;
  }

  .video-section {
    background-position: center, -205px center, center;
  }
}

@media (max-width: 1280px) {
  .main-hero-wrap {
    overflow-x: hidden;
  }
  .main-hero {
    padding: var(--spacing-ml);
  }

  .main-hero-content {
    margin-top: var(--spacing-lm);
    gap: var(--spacing-2xl);
  }

  .slogan-section .slogan {
    font-size: var(--H3);
  }

  .schedule-section {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
  }

  .schedule-section .schedule-right {
    max-width: 420px;
    flex-direction: column;
  }

  .schedule-section .schedule-divider {
    margin: 0 var(--spacing-l);
  }

  .schedule-section .schedule-day-title {
    margin-bottom: var(--spacing-m);
  }

  .schedule-section .schedule-list {
    width: 100%;
  }

  .banner-zone {
    max-width:480px
  }

  .login-cards {
    display: none;
  }

  .main-speech {
    padding: var(--spacing-lm) var(--spacing-ml);
    padding-right: 0;
  }

  .speech-controls {
    padding-right: var(--spacing-ml);
  }

  .main-aside .minutes-shortcut-btn {
    height: 108px;
    border-radius: var(--radius-l);
  }

  .rep-intro-profile-bg {
    max-width: 300px;
    max-height: 442px;
    position: relative;
  }
  .rep-intro-profile-bg:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    backdrop-filter: blur(20px);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
    mask-image: linear-gradient(to top, rgb(0, 0, 0) 30%, transparent 100%);
  } 

  .rep-intro-profile-info {
    margin-left: calc(-1 * var(--spacing-4xl));
  }

  .rep-intro-profile-motto {
    font-size: var(--body-1);
  }

  .profile-info-bottom {
    align-items: flex-end;
  }

  .rep-intro-wrap {
    /* padding-bottom: 200px; */
  }

  .rep-intro {
    max-width: 100%;
  }
  .rep-intro-inner {
    justify-content: center;
    gap: var(--spacing-lm);
  }
  .rep-intro-utile {
    width:auto;
  }

  .rep-intro-carousel {
    max-width: 464px;
    padding: var(--spacing-s) var(--spacing-2xl);
  }

  .rep-intro-representative-item {
    width: 64px !important;
    height: 64px;
  }

  .rep-intro-committee-section {
    display: flex;
    justify-content: center;
    padding: var(--spacing-s) var(--spacing-ms);
    gap: var(--spacing-m);
    max-width: 834px;
  }

  .rep-intro-committee {
    width: auto;
    justify-content: center;
  }

  .committee-name {
    margin-right: 0;
  }
  .committee-members-wrap,
  .committee-member-count {
    display: none;
  }

  .rep-intro-header {
    margin-top: 7.5px;
  }

  .stats-wrap {
    position: relative;
    border-radius: var(--radius-l);
    max-width: unset;
    height: 515px;
    /* margin-right: var(--spacing-m);
    margin-left: var(--spacing-m); */
    padding: var(--spacing-m) 0 var(--spacing-ml);
    transform: translateX(-50%);
  }

  .stats-header {
    max-width: 230px;
  }

  .stats-unit {
    font-size: var(--body-2);
    right: -30px;
  }

  .stats-number {
    font-size: var(--H2);
  }

  .stats-section-wrap {
    overflow-x: scroll;
    padding-left: var(--spacing-s);
  }

  .main-bottom-wrap .notice-title {
    font-size: var(--Subtitle-2);
  }

  .content-layout .content-right {
    padding: var(--spacing-ml);
    max-width: 730px;
  }

  .press-article .press-article-link {
    gap: var(--spacing-m);
  }

  .video-section {
    background-position: center, -185px center, center;
  }

  .video-list {
    margin-top: 174px;
  }

  .video-sub-title {
    font-size: var(--H6);
  }

  .video-title {
    font-size: var(--H4);
  }
}

@media (max-width: 1024px) {
  .main-hero {
    padding: var(--spacing-ml) var(--spacing-ml);
  }

  .main-hero-content {
    display: block;
    margin: var(--spacing-lm) auto 0;
    max-width: 640px;
  }

  .chairman-section {
    margin-top: 140px;
    height: 360px;
  }

  .chairman-section::before {
/*     background: url('/site/basic/img/main/img-chairperson-bg-1024.png') no-repeat center / cover; */
  }

  .chairman-section .chairman-photo {
    width: 300px;
  }

  .chairman-section .chairman-emblem {
    left: auto;
    top: -50px;
    width: 204px;
    height: auto;
    right: 0;
    z-index: 1;
    animation: floatUpDown 2.5s ease-in-out infinite;
  }

  .chairman-section .chairman-info {
    height: 104px;
  }

  .chairman-section .chairman-greeting {
    margin-bottom: var(--spacing-ms);
  }

  .chairman-section .chairman-content {
    max-width: 594px;
  }

  .schedule-section {
    display: block;
  }

  .search-section .search-tags {
    margin-left: auto;
    margin-right: auto;
  }

  .schedule-section .calendar-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
  }

  .schedule-section .schedule-right {
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--spacing-m);
    max-width: unset;
  }

  .schedule-section .schedule-list {
    max-width: 444px;
    gap: var(--spacing-s);
  }

  .schedule-section .schedule-list:before {
    display: none;
  }

  .calendar-head {
    flex-direction: column;
    gap: var(--spacing-s);
  }

  .calendar-header .main-block-title {
    margin-top: 0;
  }  
  .banner-notice-section {
    flex-direction: column;
    gap: var(--spacing-2xl);
  }
  .banner-zone {
    max-width:100%;
  }
  .banner-notice-section .banner-box {
    margin-top: var(--spacing-s);
    max-width: unset;
  }

  .notice-zone .notice-controls {
    margin-bottom: var(--spacing-s);
  }

  .speech-controls {
    margin-bottom: var(--spacing-s);
  }

  .main-middle-inner {
    padding: 8vh var(--spacing-m) 4vh;
  }  
  .rep-intro-wrap {   
    position: static;    
  }

  .rep-intro-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-3xl);
  }  
  .rep-intro-utile {
    margin:0;
  }
  .rep-intro-header {
    margin-top: 0;
    margin-bottom: var(--spacing-m);
  }

  .rep-intro-tab {
    font-size: var(--body-1);
  }

  .rep-intro-alphabet-filter {
    margin-top: var(--spacing-s);
  }

  .rep-intro-carousel {
    margin-top: var(--spacing-lm);
  }

  .rep-intro-profile-bg {
    max-width: 280px;
    max-height: 334px;
    border-radius: 120px;
  }

  .rep-intro-assembly-logo {
    width: 80px;
    height: 80px;
  }

  .assembly-logo-inner {
    width: 60%;
  }

  .rep-intro-profile-info {
    margin-left: var(--spacing-m);
    text-align: left;
  }

  .rep-intro-profile-motto {
    text-align: inherit;
  }

  .rep-intro-profile-name {
    font-size: var(--H4);
    text-align: inherit;
    margin: var(--spacing-s) 0 var(--spacing-m);
  }

  .profile-info-bottom {
    align-items: flex-start;
  }
  .rep-intro-attendance-box {
    width: 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  .committee-icon {
    width:24px;
    height:24px;
  }
  .stats-wrap {
    margin-top: var(--spacing-4xl);
  }

  .main-bottom-wrap .notice-section-title-img {
    max-width: 220px;
  }

  .content-layout .content-right {
    max-width: 530px;
  }

  .press-article .press-article-link {
    margin-bottom: var(--spacing-2xl);
  }

  .video-section {
    padding: var(--spacing-l);
    background: radial-gradient(
        circle at right center,
        #000000 20%,
        rgba(69, 63, 39, 0.2) 87%,
        #000000 100%
      ),
      url('/site/basic/img/main/img-video-bg.png') -150px top / 130% no-repeat,
      linear-gradient(to right, #000000 0%, #453f27 71%, #000000 100%);
  }

  .video-list {
    display: none;
  }

  .video-header {
    flex-direction: row;
    width: 100%;
  }

  .video-header .more-btn.with-text {
    justify-content: flex-end;
  }
}

@media (max-width: 768px) {
  .main-block-title {
    font-size: var(--H5);
  }

  .container {
    padding: 92px var(--spacing-s) 0;
  }

  .main-hero {
    padding: var(--spacing-lm) var(--spacing-m);
  }

  .schedule-section .schedule-list {
    max-width: 340px;
  }
  .notice-tit-box {
    flex-wrap: wrap;
  }

  .main-speech {
    padding: var(--spacing-lm) var(--spacing-m);
    padding-right: 0;
  }

  .chairman-title {
    flex-shrink: 0;
    margin-right: var(--spacing-xs);
  }

  .chairman-buttons {
    max-width: 226px;
    width: 100%;
  }

  .chairman-btn {
    flex: 1;
    width: auto;
  }

  .calendar-footer {
    flex-wrap: wrap;
  }

  .speech-controls {
    padding-right: var(--spacing-m);
  }

  .speech-item {
    max-width: 310px;
  }

  .main-aside .minutes-shortcut-btn .title {
    font-size: var(--H6);
  }

  .rep-intro-wrap {
    /* padding-top: var(--spacing-m);
    padding-bottom: var(--spacing-m); */
  }
  .rep-intro-inner {
    gap: var(--spacing-xl);
  }
  .rep-intro-utile {
    width:100%;
  }

  .rep-intro-title {
    font-size: var(--H4);
  }

  .rep-intro-alphabet-filter {
    font-size: var(--body-1);
  }

  .rep-intro-carousel {
    max-width: 396px;
    margin-top: var(--spacing-m);
    width: 100%;
  }
  

  .attendance-value {
    /* font-size: var(--body-1); */
  }
  .rep-intro-profile {
    justify-content: center;
    gap: var(--spacing-ms);
  }
  .rep-intro-profile-bg {
    max-width:240px;
  }
  .rep-intro-profile-info {
    margin-left: 0;
  }
  .rep-intro-details-box {
    font-size: var(--body-2);
  }

  .rep-intro-committee {
    flex: 1 1 47%;
  }

  .rep-intro-committee-section {
    margin: var(--spacing-3xl) var(--spacing-s) 0;
  }

  .stats-wrap {
    /* margin: 0 var(--spacing-s) 85px; */
  }

  .main-bottom-wrap .notice-section {
    margin-bottom: var(--spacing-l);
  }

  .main-bottom-wrap .notice-card {
    padding: var(--spacing-s) var(--spacing-m);
  }

  .main-bottom-wrap .notice-tag {
    margin-bottom: var(--spacing-xs);
  }

  .main-bottom-wrap .notice-date {
    margin-top: var(--spacing-xs);
  }

  .main-bottom-wrap .notice-section-title-img {
    max-width: 180px;
  }

  .content-layout .content-right {
    max-width: 370px;
  }

  .press-section .content-section-header {
    margin-bottom: var(--spacing-s);
  }

  .press-article {
    display: none;
  }

  .press-grid {
    gap: var(--spacing-ml);
  }

  .press-item:first-child {
    display: block;
  }

  .press-item .press-item-link {
    flex-direction: column;
  }

  .press-item-image {
    max-width: unset;
    max-height: 181px;
  }

  .press-item-date {
    margin-top: var(--spacing-s);
  }

  .news-section {
    padding-top: var(--spacing-xl);
  }

  .news-content {
    max-width: 200px;
  }

  .video-section {
    padding: var(--spacing-l);
    background: radial-gradient(
        circle at top left,
        rgba(69, 63, 39, 0.4) 0%,
        rgba(69, 63, 39, 0.2) 25%,
        rgba(0, 0, 0, 0.7) 60%,
        #000000 80%,
        #000000 100%
      ),
      url('/site/basic/img/main/img-video-bg.png') -150px -15px / 175% no-repeat,
      linear-gradient(to right, #000000 0%, #453f27 71%, #000000 100%);
  }
}

@media (max-width: 440px) {
  .container {
    padding: 92px 0 0;
  }

  .main-hero {
    padding: var(--spacing-ml) var(--spacing-ms);
    border-radius: var(--radius-l);
  }

  .main-hero-content {
    margin-top: var(--spacing-m);
  }

  .slogan-section::after {
    border-radius: var(--radius-ms);
  }

  .slogan-section .slogan {
    font-size: var(--H4);
  }

  .slogan-section .sub-title {
    font-size: var(--body-2);
    line-height: var(--line-height-relaxed);
  }

  .info-cards .info-card:before,
  .info-cards .info-card:after {
    display: none;
  }

  .info-card:hover .info-card-header {
    padding: var(--spacing-ms) var(--spacing-m);
  }

  .info-card-header {
    padding: var(--spacing-ms) var(--spacing-m);
    font-size: var(--Subtitle-1);
  }

  .info-number {
    font-size: var(--H5);
  }

  .info-card-body {
    font-size: var(--body-2);
    height: 72px;
  }

  .chairman-section {
    margin-top: var(--spacing-4xl);
  }

  .chairman-section .chairman-photo img {
    max-width: 193px;
    margin-bottom: 112px;
  }

  .chairman-section .chairman-emblem {
    width: 104px;
    filter: drop-shadow(40px 40px 40px rgba(0, 0, 0, 0.6));
  }

  .chairman-section::before {
    background: url(/site/basic/img/main/img-chairperson-bg-390.png) no-repeat center / cover;
  }

  .chairman-section .chairman-greeting {
    font-size: var(--body-1);
    margin-right: var(--spacing-s);
    margin-left: auto;
    text-align: right;
    width: 157px;
    padding-left: 0;
  }

  .chairman-section .chairman-info {
    padding: var(--spacing-m);
    height: auto;
    flex-direction: column;
    gap: var(--spacing-s);
    border-left: 2px solid var(--peach);
    border-top: 2px solid var(--peach);
  }

  .chairman-position {
    margin-right: var(--spacing-xs);
    font-size: var(--body-1);
  }

  .chairman-name {
    font-size: var(--H5);
  }

  .chairman-buttons {
    width: 100%;
  }

  .chairman-btn {
    max-width: 149px;
    width: 100%;
  }

  .calendar {
    width: 270px;
  }

  .calendar-date {
    font-size: var(--H5);
  }

  .calendar-day {
    max-width: unset;
    gap: var(--spacing-2xs);
    padding: var(--spacing-xs) 5px;
  }

  .calendar-arrow:not(.icon-right) {
    left: calc((var(--spacing-xs) + var(--spacing-ml)) * -1);
  }

  .calendar-arrow.icon-right {
    right: calc((var(--spacing-xs) + var(--spacing-ml)) * -1);
  }

  .calendar-footer {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .schedule-section .schedule-right {
    flex-direction: column;
  }

  .schedule-section .schedule-day-title {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    width: 100%;
    margin-bottom: var(--spacing-s);
  }

  .schedule-section .schedule-list {
    gap: var(--spacing-xs);
    max-width: unset;
  }  
  .banner-notice-section .banner-pagination-btn {
    display: none;
  }

  .banner-notice-section .banner-pagination {
    padding: 0;
    gap: unset;
    width: 53px;
    height: 32px;
    font-size: var(--body-2);
    bottom: var(--spacing-xs);
    right: var(--spacing-xs);
  }

  .notice-item-link {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
    padding: var(--spacing-s);
  }
  .notice-tit-box {
    flex-direction: column;
  }

  .notice-label {
    font-size: var(--body-2);
  }

  .notice-title {
    margin-right: 0;
  }

  .notice-date {
    margin-left: 0;
    font-size: var(--Caption);
  }

  .main-speech {
    padding: var(--spacing-lm) var(--spacing-ms);
    padding-right: 0;
    border-radius: var(--radius-l);
  }

  .speech-controls {
    padding-right: var(--spacing-ms);
  }

  .speech-item {
    padding: var(--spacing-ms) var(--spacing-s);
  }

  .main-aside .minutes-shortcut {
    padding: 0 var(--spacing-xs);
  }

  .main-aside .minutes-shortcut-btn {
    padding-left: var(--spacing-ms);
    padding-right: 0;
    height: 80px;
    border-radius: var(--radius-ms);
  }

  .main-aside .minutes-shortcut-btn img {
    width: 53px;
    height: auto;
  }

  .main-aside .minutes-shortcut-btn .text {
    display: none;
  }

  .rep-intro-title {
    font-size: var(--H4);
  }

  .rep-intro-carousel {
    max-width: 280px;
    padding: var(--spacing-s) var(--spacing-2xl);
  }

  .rep-intro-representative-item {
    width: 48px !important;
    height: 48px;
    border-radius: var(--radius-s);
  }

  .rep-intro-arrow:not(.icon-right) {
    left: var(--spacing-s);
  }

  .rep-intro-arrow.icon-right {
    right: var(--spacing-s);
  }

  .rep-intro-profile {
    display: block;
  }

  .rep-intro-profile-bg {
    max-width: 264px;
    max-height: 324px;
  }

  .rep-intro-profile-info {
    position: relative;
    align-items: center;
    margin-left: 0;
    margin-top: -96px;
  }

  .rep-intro-profile-info,
  .attendance-value {
    text-align: center;
  }

  .rep-intro-profile-motto,
  .rep-intro-profile-name {
    color: var(--white);
  }
  .rep-intro-profile-motto {
    display:none;
  }

  .rep-intro-details-box {
    font-size: var(--body-3);
  }

  .profile-info-bottom {
    align-items: center;
  }

  .rep-intro-attendance-box {
    margin-bottom: var(--spacing-xs);
  }

  .rep-intro-committee-section {
    margin: var(--spacing-3xl) 0 0;
  }

  .rep-intro-committee {
    width: 125px;
    flex: 1 1 45%;
  }

  .committee-name {
    font-size: var(--body-2);
  }

  .stats-header {
    max-width: unset;
    margin: 0 var(--spacing-s) var(--spacing-m);
    padding: 0 var(--spacing-s);
  }

  .stats-wrap {
    /* margin: 0 var(--spacing-xs) 71px; */
    margin-top: var(--spacing-2xl);
  }

  .alphabet-filter {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-2xs);
  }

  .main-bottom-wrap .notice-section-title-img {
    max-width: 140px;
  }

  .main-bottom-wrap .notice-controls.banner-pagination {
    display: none;
  }

  .main-bottom-wrap .notice-controls {
    padding: 0 var(--spacing-xs);
  }

  .main-bottom-wrap .notice-cards {
    padding: 0 var(--spacing-xs);
    margin-bottom: var(--spacing-l);
  }

  .content-layout {
    flex-direction: column;
    align-items: center;
  }

  .news-section {
    margin: 0 auto;
    padding: var(--spacing-m) 0;
  }

  .content-layout {
    margin-bottom: var(--spacing-l);
  }

  .poster-year {
    font-size: var(--body-1);
  }

  .content-layout .content-right {
    max-width: unset;
    z-index: 1;
    padding: var(--spacing-ml) var(--spacing-ms);
  }

  .news-section .content-section-header {
    margin-bottom: var(--spacing-m);
  }

  .press-item-date {
    margin-top: var(--spacing-xs);
  }

  .video-section {
    margin: 0 var(--spacing-xs);
    padding: var(--spacing-l);
    background: linear-gradient(
        to right,
        rgba(165, 163, 154, 0.4) 0%,
        rgba(90, 88, 81, 0.2) 30%,
        rgba(31, 30, 27, 0.6) 70%,
        rgba(0, 0, 0, 1) 100%
      ),
      url('/site/basic/img/main/img-video-bg.png') -137px center / 320% auto no-repeat,
      linear-gradient(to right, #000000 0%, #453f27 71%, #000000 100%);
  }

  .video-header,
  .video-header-left {
    flex-direction: column;
    align-items: center;
  }

  .video-header .more-btn.with-text {
    justify-content: center;
  }

  .play-icon {
    width: 38px;
    margin: 0;
    margin-bottom: var(--spacing-m);
  }

  .video-title {
    margin: var(--spacing-m) 0 var(--spacing-s);
    font-size: var(--H5);
  }

  .video-sub-title {
    width: 100%;
  }
}

@media (max-width: 320px) {
  .main-hero {
    padding: var(--spacing-ml) var(--spacing-s);
  }

  .main-hero-content {
    margin-top: var(--spacing-m);
  }

  .slogan-section .slogan {
    font-size: var(--H5);
  }

  .slogan-section .sub-title {
    letter-spacing: var(--spacing-2xs);
  }

  .main-hero-content .info-cards {
    flex-direction: column;
  }

  .info-cards .info-card {
    border-radius: var(--radius-l);
  }

  .info-cards .info-card .info-card-body {
    border-radius: var(--radius-l);
  }

  .info-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .chairman-position {
    font-size: var(--body-2);
  }

  .chairman-name {
    font-size: var(--H6);
  }

  .chairman-btn {
    height: 56px;
  }

  .calendar {
    width: 208px;
  }

  .main-aside .minutes-shortcut-btn {
    position: relative;
    z-index: 0;
  }

  .main-aside .minutes-shortcut-btn img {
    position: absolute;
    right: -2px;
    width: 46px;
    height: 55px;
    z-index: -1;
  }

  .rep-intro-carousel {
    max-width: 279px;
  }

  .rep-intro-inner {
    gap: var(--spacing-2xl);
  }

  .rep-intro-committee {
    width: 85px;
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .committee-icon {
    margin-left: 9px;
  }

  .rep-intro-committee-section {
    padding: var(--spacing-s) 55px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-m);
  }

  .stats-bar-container {
    flex-wrap: wrap;
  }

  .stats-section {
    flex: 0 0 260px;
    padding: var(--spacing-ml) var(--spacing-ms);
  }

  .stats-bar-item.stats-bar-red {
    height: 17px;
    border-radius: 4.65px;
  }

  .content-layout .content-right {
    padding: var(--spacing-ml) var(--spacing-s);
  }

  .press-section .content-section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .press-item-title {
    -webkit-line-clamp: 1;
  }

  .press-item-date {
    margin-top: var(--spacing-xs);
  }

  .video-section {
    background: linear-gradient(
        to right,
        rgba(165, 163, 154, 0.4) 0%,
        rgba(90, 88, 81, 0.2) 30%,
        rgba(31, 30, 27, 0.6) 70%,
        rgba(0, 0, 0, 1) 100%
      ),
      url('/site/basic/img/main/img-video-bg.png') -150px center / 410% auto no-repeat,
      linear-gradient(to right, #000000 0%, #453f27 71%, #000000 100%);
  }
}



@media (max-height: 880px) {
  .rep-intro-wrap {
    position: unset;
  }

}