@media screen and (min-width: 0) and (max-width: 1024px)
{


  .g5b{ 
      --g5b-font-size-small: 3.166667vw; 
      --g5b-font-size-medium: 5.333333333333333vw; 
      --g5b-font-size-largest: 7.466666666666667vw; 
  }
  .shcl > span { 
      font-size:var(--g5b-font-size-small); 
  } 
  .section h3.title{
    font-size:var(--g5b-font-size-largest);
  }

  .section h4.title{
    font-size: var(--g5b-font-size-medium); 
  }
  a.more{
    font-size: var(--g5b-font-size-small); 
  }

  .section .ribbon-1{
    top: 0%;
    left: 11%;
    width: 14vw;
  }
  .section .ribbon-1 svg{ 
    width: 97%;
    transform: translate(0%, -14%) rotate(0deg);
    overflow: hidden;
  }
  .section .ribbon-2{
    top: 3%;
    left: 0;
    width: 12vw;
    right: auto;
  }
  .section .ribbon-2 svg{ 
    width: 161%;
    transform: translate(-30%, 39%) rotate(-25deg); 
  }
  .section .ribbon-3{
    top: 1%;
    width: 11.5vw;
    left: auto;
    right: 0;
  }
  .section .ribbon-3 svg{
    width: 176%;
  }
  .section .ribbon-4{
    right: 0%;
    top: 34%;
    width: 11vw;
  }
  .section .ribbon-4 svg{ 

  }
  .section .ribbon-5{
    top: 65%;
    left: 0%;
    width: 9vw;
  }
  .section .ribbon-5 svg{ 
    width: 171%;
    transform: translate(-48%, -21%) rotate(45deg);
  }
  .section .ribbon-6{
    top: auto;
    width: 10.6vw;
    bottom: 0%;
    right: 0%;
  }
  .section .ribbon-6 svg{ 
    width: 140%;
  }
  .section .ribbon-7{
    right: 0%;
    bottom: auto;
    width: 4.6vw;
    top: 0%;
  }
  .section .ribbon-7 svg{ 
    width: 216%;
    transform: translate(18%, -36%) rotate(19deg);
  }
  .section .ribbon-8{
    right: 3.6%;
    top: 8.3%;
    width: 13vw;
  }
  .section .ribbon-8 svg{ 

  }
  .section .ribbon-9{
    top: 0%;
    width: 8.8vw;
  }
  .section .ribbon-9 svg{ 
    width: 216%;
    transform: translate(-53%, -1%) rotate(13deg);
  }
  .section .ribbon-10{
    right: 3%;
    top: 84%;
    width: 7.6vw;
  }
  .section .ribbon-10 svg{ 
    width: 93%;
    transform: translate(-2%, -8%) rotate(13deg);
  }
  .section .ribbon-11{
    left: 4%;
    width: 12.6vw;
    top: 6%;
  }
  .section .ribbon-11 svg{ 

  }
  .section .ribbon-12{
    left: auto;
    top: auto;
    width: 7.5vw;
    right: 3%;
    bottom: 0%;
  }
  .section .ribbon-12 svg{ 
    width: 121%;
    transform: translate(-2%, 20%) rotate(0deg);
  }
  .section .ribbon-13{
    right: 0;
    top: 83%;
    width: 8.2vw;
  }
  .section .ribbon-13 svg{ 
    width: 145%;
  }



  .popup-container.section-5-tech-popup .popup {
      width: 90vw;
  }








  .g5b .kv{
    background:none;
    padding:0;
  } 
  .g5b .kv .kv-img {
      width: 100vw; 
      border-radius: 0; 
  }

  .g5b .section-2 { 
    background-image: none;background-color: #f9f1e6;padding-bottom: 0;padding-top: 4.533333333333333vw;            z-index: 11;
  }
  .g5b .section-2 .img-text{
    margin-right: 3.733333333333333vw;margin-left: 3.733333333333333vw;margin-top: 0vw;
  }
  .g5b .section-2 .img-text .section-2-1-img{
    border-radius: 5vw;
  }
  .g5b .section-2 .text {
    font-size: var(--g5b-font-size-small); 
    top: 63%;
    left: 26%;
    line-height: 1.3;
  }
  .g5b .section-2 a.more{
    left: 40%;
    top: 90%;
  }
  .g5b .section-2 .img-text .person { 
      width: 25%;
      bottom: 8%;
      right: 1%;
  }
 
  .g5b .section-3 { 
    background-image: none;background-color: #f9f1e6;padding-bottom: 0;padding-top: 4.533333333333333vw;

  }
  .g5b .section-3 .column{flex-direction: column;margin: 0 6.666666666666667vw;}
  .g5b .section-3 .column.three-column .item{
    width: 100%;
  }
  .g5b .section-3 .column.three-column .item .text{
    font-size: var(--g5b-font-size-small);             height: auto;            margin: 4.041667vw 12.041667vw 4.041667vw 12.041667vw;
  }
  .g5b .section-3 .column.three-column .item .img {
    border-radius: 6vw; 
  }
  .g5b .section-3 .column.three-column .item .more {    padding: 1.2vw;    border-radius: 9vw;}
  .g5b .section-3 .column.three-column .item .more .arrow { 
      width: 11%;
  }

  .g5b .section-4{
    background-image: none;background-color: #f9f1e6;
  }
  .g5b .section-4 .two{
    flex-direction: column-reverse;margin: 0 6.666666666666667vw;            margin-top: 5vw;

  }
  .g5b .section-4 .two .left,
  .g5b .section-4 .two .right{
    width: 100%;
  }
  .g5b .section-4 .two .more{
        width: 33vw;    border-radius: 5vw;top: 64%;left: 7%;
  }
  .g5b .section-4 .two .more .arrow { 
    width: 3.6vw;
  }

  .g5b .section-5 { 
      background-image: url(/global_common/common/images/g5b/section_5_bg_sp.jpg);
      background-color: #fcea89;    padding-top: 10vw;
  } 
  .g5b .section-5 h4.title {
    margin-top: 2vw;
  }
  .g5b .section-5 .use.pc .swiper{
        padding-bottom: 8vw;            margin-top: 6vw;
  }
  .g5b .section-5 .use.pc .swiper-slide{
    text-align: center;
  }
  .g5b .section-5 .use.pc .swiper-slide > .img{
    margin-bottom: 2vw;            height: 46vw;
            display: inline-block;
  }
  .g5b .section-5 .use.pc .tech-link{
    margin: .5vw 0;
    display: inline-block;
  }
  .g5b .section-5 .use .person {
    position: absolute;
    left: -33%;
    top: -13%;
    width: 22vw;
  }

  .g5b .section-6 { 
    background-image: url(/global_common/common/images/g5b/section_6_bg_sp.jpg); background-position: top;
  }
  .g5b .section-6 > .img {
      margin: 0 15.33333333333333vw;            margin-top: 3vw;
  }
  .g5b .section-6 .swiper { 
      margin-top: 6vw; 
  }
  .g5b .section-6 .swiper-slide {width: 78%}
  .g5b .section-6 .swiper-slide .text { 
      font-size: var(--g5b-font-size-small);     left: 10%;top: 33%;
    width: 81%;
  }
  .g5b .section-6 .swiper-slide .img {
      width: 100%;
  }
  .g5b .section-6 .navigation {  
      margin-top: 3vw;
      margin-left: 12vw; 
      margin-bottom: 1vw;
  }
  .g5b .section-6 .navigation .button-prev, .g5b .section-6 .navigation .button-next { 
      width: 8.5vw; 
  }
  .g5b .section-6 .navigation .slider-arrow {
      width: 8.5vw; 
  }
  .g5b .section-6 .navigation .button-prev:hover .slider-arrow {
      transform: translate3d(0%, 0, 0);
  }
  .g5b .section-6 .navigation .button-next:hover .slider-arrow {
      transform: translate3d(0%, 0, 0);
  }

  .g5b .section-7 {
      background-color: #fcea89;
      background-image: none; 
      padding-top: 6vw;
  }
  .g5b .section-7 .swiper { 
      --swiper-pagination-bullet-width: 3vw;
      --swiper-pagination-bullet-height: 3vw;
      padding-bottom: 6vw;margin: 0 6.666666666666667vw;
  }
  .g5b .section-7 .swiper .swiper-slide .img {
      border-radius: 4.6vw; 
  }
  .g5b .section-7 .swiper .swiper-slide .text {
    font-size: var(--g5b-font-size-small);

            margin: 3vw 7vw;            line-height: 1.4;
  }

  .g5b .section-8{
    background-color: #f9f1e6;    overflow: hidden; 
    background-image: url(/global_common/common/images/g5b/section_8_bg_sp.jpg);
    padding-bottom: 2.8vw;
    padding-top: 5vw;
  }
  .g5b .section-8 > .img {
      margin: 0 6.666666666666667vw;
      margin-top: 2vw;
      position: relative;
  }
  .g5b .section-8 > .img .more {
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
  } 
  .g5b .section-8 .text {
      font-size: var(--g5b-font-size-small);             margin-top: 8vw;
            text-align: left;
            margin-left: 6.666666666666667vw;
            margin-bottom: 8vw;
  } 
  .g5b .section-8 > .img .person {
      position: absolute;
      right: 8%;
      top: 104%;
      width: 22.2vw;
  }

  .g5b .section-9 .text-1 { 
      font-size: var(--g5b-font-size-small);
      top:35%; 
      font-weight: 100; 
      letter-spacing: 0.14em;            font-weight: normal;
  }
  .g5b .section-9 .text-2 { 
      font-size: var(--g5b-font-size-small);     top: 44%;            font-weight: bold;
  }
  .g5b .section-9 .product-img-1 {
      top: 47%;
      left: 5%;
      width: 29%;
  }
  .g5b .section-9 .product-img-2 {
      top: 65%;
      right: 9%;
      width: 39%;
  }
  .g5b .section-9 .text-g5b {
      color: #ababab;
      font-size: 269%;
      top: 29%;
      left: 4%;
      font-weight: 100;
  }

  .g5b .section-10 {
      background-image: none;
      background-color: #f9f1e6; 
      padding-bottom: 2.8vw;
      padding-top: 1vw;
  }
  .g5b .section-10 .banners {
      margin: 0 6.666666666666667vw 0 29.86666666666667vw; 
      margin-top: 9vw; padding-bottom: 8vw;
  }
  .g5b .section-10 .banners .swiper {
        border-radius: 4vw;
    border: 4px #83c967 solid;
    overflow: hidden;
  }
  .g5b .section-10 .banners .person { 
      left: -40%;
      top: 0%;
      width: 23.2vw;
  }
  .g5b .section-10 .social-medias .social-media { 
      width: 16.8125vw; 
      height: 16.8125vw;
  }
  .g5b .section-10 .more-links { 
      font-size:  var(--g5b-font-size-small);
      margin-top: 1vw;
  }
  .g5b .section-10 > .img {
      margin: 0 6.666666666666667vw;
      margin-top: 4vw; 
  }



  .popup-container .popup {
      border-radius: 1vw;
      background-color: #fff;
      box-shadow: 0px 0px 8px 0px #00000042;
      width: 86vw;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      padding: 3vw 4vw 6vw 4vw;
      z-index: 999;
  }
  .popup-container .popup .content{
    height: auto;
  }
  .popup-container .popup .content .title{
    font-size: 5vw;
  }
  .popup-container .popup .content .text-container {
      width: 100%;
      margin-top: 2vw;
    font-size:80%
  }
  .popup-container .popup .content .swiper-scrollbar {
      position: relative;
      margin-top: 3vw;
      width: 100%;
      left: 0;
      height: 3.8vw;
      background: #5b6f91;
  }
  .popup-container .popup .content .swiper-scrollbar-drag {
      border: 2px #5b6f91 solid; 
  }
  .popup-container .popup .close {
      width: 12%;
      padding-bottom: 12%;   
      top: -13vw;
      left: 90%;
  }

  .popup-container .popup .content .swiper .swiper-slide > .img{
    height: auto;overflow-y: inherit;
  }
 
  .popup-container.section-5-tech-popup .popup .content {
     height: auto;
  }
  .popup-container.section-5-tech-popup .popup .content .play{
    top: 36%;    width: 12vw;
    height: 12vw;
  }






}