/* CSS Document */


/*sec-01*/
.exhibit-sec-01{background-color: var(--color-05); /*margin-top: 2rem;*/}
.exhibit-sec-01 .exhibit-sec-01-inner{ padding-block:7%;}
.exhibit-sec-01-inner .main-row{justify-content: space-between; width:100%; padding-inline: 12px; gap: 4rem;}
.exhibit-sec-01-inner .main-row .columns h2{/*color: var(--color-01);*/ margin-bottom: 2.5rem;}
.exhibit-sec-01-inner .main-row .columns p {/*color: var(--color-01);*/}

.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul{display: flex; gap:2rem;} 
.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li{background-color: var(--color-01);} 
.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li {background-color: var(--color-01);     width: 400px; padding: 2rem;} 
.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li h4{color: var(--color-02); margin-bottom: 1.5rem;} 
.exhibit-sec-01-inner .main-row .columns:nth-child(2)  ul li p{color: #878787;} 


/*ec-02*/
.exhibit-sec-02{overflow: hidden;}
.exhibit-sec-02 h2{text-align: center;color:#fff;margin-top: 5rem; }
.exhibit-sec-02 .main-row{}
.exhibit-sec-02 .main-row .columns:nth-child(1) h2{color:var(--color-02);}
.exhibit-sec-02 .main-row .columns:nth-child(2) h2{color:var(--color-02);}


.exhibit-sec-02 .main-row .columns:nth-child(1) .speed-test-item{background-color: var(--color-04)}
.exhibit-sec-02 .main-row .columns:nth-child(2) .speed-test-item{background-color: var(--color-03)}
 .speed-test {
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      width: 100%;
    margin-block: 2.5rem;
    }

    .speed-test-track {
      display: inline-flex;
      align-items: center;
      gap: 2.5rem;
      animation: scroll 40s linear infinite;
    }

    .speed-test-track.stt1 {animation: scroll1 40s linear infinite;}
    .speed-test-track.stt2 {animation: scroll2 40s linear infinite;}

    .speed-test-item {
      flex: 0 0 250px;
font-size: var(--rfs-21);
		color: #fff;
      padding-inline: 1rem;
      padding-block: 0.5rem;
      text-align: center;
    }

    .speed-test-item img {
      max-height: 90px;
      width: auto;
      height: auto;
      display: block;
    }

    /* Animation */
    @keyframes scroll1 {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-50%);
      }
    }    
    
   @keyframes scroll2 {
      from {
        transform: translateX(-50%);
      }

      to {
        transform: translateX(0%);
      }
    }


    @media (min-width: 768px) {
      .speed-test:hover .speed-test-track {
        animation-play-state: paused;
      }
    }

    @media (max-width: 576px) {
      /*
  .speed-test-item img {
    max-height: 50px;
  }
*/

      .speed-test-item {
        flex: 0 0 150px;
      }

      .speed-test-track {
        gap: 1.5rem;
      }
    }


/*sec-02*/
.exhibit-sec-03{background-color: var(--color-03); }
.exhibit-sec-03-inner{min-height: 100vh;align-content: center;position: relative;z-index: 2;overflow-y: visible;overflow-x: clip;}
.exhibit-sec-03 .exhibit-sec-03-inner::after {    content: "";
    width: 500px;
    height: 500px;
    aspect-ratio: 1;
    position: absolute;
    background-color: var(--color-05);
    z-index: -1;
    top: 8%;
    right: 0%;}
.exhibit-sec-03-inner .main-row{justify-content: space-between;     height: 100%;    align-items: center; width:100%;  padding-inline: 12px;}
.exhibit-sec-03-inner .main-row .columns:nth-child(2){align-content: center;}
.exhibit-sec-03-inner .main-row .columns h2{color: var(--color-01); margin-bottom: 2.5rem;}
.exhibit-sec-03-inner .main-row .columns p {color: var(--color-01); margin-bottom: 4rem;     max-width: 69%;}
/*
.exhibit-sec-03-inner .main-row .columns a {background-color:var(--color-04);  color: var(--color-01); text-decoration: none; display: inline-block;
    width: 250px;
    text-align: center;
    padding: 0.8rem 2rem;}
*/

@media(max-width:1440px){
	
	.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul{flex-wrap: wrap;}
	.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li{width:48%;}
	
	.exhibit-sec-03-inner .main-row .columns p {max-width:100%;}
	.exhibit-sec-03 .exhibit-sec-03-inner::after { width: 400px; height: 400px; top:17%;}
}

@media (max-width: 1366px) {
	.exhibit-sec-03 .exhibit-sec-03-inner::after {top:10%; }
}

@media (max-width: 1280px) {
    .exhibit-sec-03 .exhibit-sec-03-inner::after {
        top: 15%;
    }
}

@media(max-width:991px){
	.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li { width: 100%; }
	.exhibit-sec-01-inner .main-row {gap:2rem; margin-inline: 0px; padding-inline: 0px;}
	.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li h4 br{display: none;}
	
	.speed-test-item {font-size: 20px;}
	.exhibit-sec-02 h2 {margin-top: 3rem;}
	
	.exhibit-sec-03-inner .main-row .columns p {margin-bottom: 3rem;}
	.exhibit-sec-03-inner {padding-block: 6%; min-height: auto;     align-content: flex-start;}
	.exhibit-sec-03-inner .main-row .columns:nth-child(2) {margin-top: 5rem;}
	.exhibit-sec-03 .exhibit-sec-03-inner::after { top: 35%; right: unset; left: 0%; width: 67%;  height: 53%; }
}

@media(max-width:800px){
	    .exhibit-sec-03 .exhibit-sec-03-inner::after { top: 35%;  width: 70%; height: 55%; }
}

@media(max-width:480px){
	.exhibit-sec-01 {margin-top: 0px;}
	.exhibit-sec-01-inner .main-row .columns p br{display: none;}
	.exhibit-sec-01 .exhibit-sec-01-inner { padding-block: 10%;}
	.exhibit-sec-01-inner .main-row .columns:nth-child(2) ul li{padding:1.5rem;}
	.exhibit-sec-01-inner .main-row .columns h2 {margin-bottom: 1.5rem;}
	.exhibit-sec-01-inner .main-row {gap: 1rem;}
	
	.speed-test-item {font-size: 1rem;}
	.speed-test {margin-block: 1.5rem;}
	 .exhibit-sec-02 h2 {  margin-top: 2rem; }
	

	.exhibit-sec-03-inner {padding-block: 10%;}
	.exhibit-sec-03-inner .main-row {
		gap: 2rem;}
	.exhibit-sec-03-inner .main-row .columns h2 {margin-bottom: 1.5rem;}
	.exhibit-sec-03-inner .main-row .columns p {margin-bottom: 2rem; }
    
	.exhibit-sec-03-inner .main-row .columns:nth-child(2) { margin-top: 3rem; }
	.exhibit-sec-03 .exhibit-sec-03-inner::after { top: 43%; width: 82%; height: 48%; }
}

@media (max-width: 390px) {
	.exhibit-sec-03-inner {  padding-block: 12%; }
    .exhibit-sec-03 .exhibit-sec-03-inner::after { top: 45%; height: 45%;}
}
@media (max-width: 360px) {

    .exhibit-sec-03 .exhibit-sec-03-inner::after { top: 49%;  height: 40%; }
}
@media (max-width: 320px) {
    .exhibit-sec-03 .exhibit-sec-03-inner::after { top: 51%; height: 38%; width: 76%; }
}