body{
    overflow-y: scroll;
}


/***************************************************
SOLUTION NETWORK ANIMATION
***************************************************/

/************** indicators *****************/
.action-indicator{
    position: absolute;
    z-index: 900;
    /*width: 35px; height: 55px;*/
    width: 27px;
    height: 40px;
    background: rgba(255, 255, 255, .7);
    border:3px solid #FF524D;
    border-radius: 60px;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
}
.action-indicator-scroll{
    position: absolute; z-index: 1;
    top:4px;
    /*width: 8px; height: 20px;*/
    width: 5px;
    height: 12px;
    border-radius: 60px;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    background-color: #FF524D;
    -webkit-animation: scroll-move 700ms ease-in-out infinite;
            animation: scroll-move 700ms ease-in-out infinite;
}


@-webkit-keyframes scroll-move {
    0%   {
        top: 5px;
    }
    50%   {
        top: 40%;
    }
    100%   {
        top: 5px;
    }
}

@keyframes scroll-move {
    0%   {
        top: 5px;
    }
    50%   {
        top: 40%;
    }
   100%   {
        top: 5px;
    }
}

.replay-button{
    position: absolute;
    z-index: 900;
    bottom: 30px;
    left: 47.5vw;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
    pointer-events: none;
    opacity: 0;
}

.action-indicator.visible,
.replay-button.visible {
    opacity: 1;
    pointer-events: auto;
}





/************** generals *****************/
.main-network-scene{
    position: relative;
}
.main-solution-network-scene-wrapper{
    position: relative;
    width: 100%;
    /*height: 100vh;*/
    overflow: hidden;
    height: calc(var(--vh, 1vh) * 100);
}
.section-network{
    position: absolute;
    top:0; left: 0;
    width: 100%;
    /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
}
.section-network-content-wrapper{
    position: absolute;
    z-index: 0;
    top:0; left: 0;
    width: 100%; /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
}
.solution-network-intro{
    position: fixed;
    z-index: 2;
}
.solution-network-02{
    z-index: 3;
}
.solution-network-03{
    z-index: 4;
}
.solution-network-04{
    z-index: 5;
}
.solution-network-05{
    z-index: 6;
}
.solution-network-06{
    z-index: 7;
}
.solution-network-07{
    z-index: 8;
}








/************** section intro *****************/
.solution-network-intro{
    
}
.solution-network-intro-content{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
}
.solution-network-intro-title{    
    font-size: 10vw;
    text-align: center;
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
    -webkit-animation: intro-header 700ms ease-in-out forwards;
            animation: intro-header 700ms ease-in-out forwards;
}
@-webkit-keyframes intro-header {
    0%   {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    100%   {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}
@keyframes intro-header {
    0%   {
        -webkit-transform: scale(.7);
                transform: scale(.7);
        opacity: 0;
    }
    100%   {
        -webkit-transform: scale(1);
                transform: scale(1);
        opacity: 1;
    }
}

















/************** section 02 *****************/
.solution-network-02{
    opacity: 0;
}
.solution-network-02-content{
    background-color: #f7f7f7;
}
.solution-network-02-anim-01{
    position: absolute;
    top:50%; left: 0;
    width: 85%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.solution-network-02-anim-01-pic-bg{
    width: 35%;
    top:-20%; left: -20px;
}
.solution-network-02-anim-01-pic-bg img{
    display: block;
    width: 100%;
}
.solution-network-02-anim-01-pic-person-01{
    position: absolute;
    z-index: 1;
    width:3%;
    top:22%; left:23%;
}
.solution-network-02-anim-01-pic-person-02{
    position: absolute;
    z-index: 1;
    width:3%;
    top:62%; left:33%;
}
.solution-network-02-anim-01-pic-person-03{
    position: absolute;
    z-index: 1;
    width:3.6%;
    top:31%; left:15%;
}
.solution-network-02-anim-01-pic-person-04{
    position: absolute;
    z-index: 1;
    width:3%;
    top:50%; left:2%;
}
.solution-network-02-anim-01-pic-person-05{
    position: absolute;
    z-index: 1;
    width:9.5%;
    top:58%; left:12%;
}
.solution-network-02-anim-01-pic-person-01 img,
.solution-network-02-anim-01-pic-person-02 img,
.solution-network-02-anim-01-pic-person-03 img,
.solution-network-02-anim-01-pic-person-04 img,
.solution-network-02-anim-01-pic-person-05 img{
    display: block;
    width: 100%;
}

.solution-network-02-anim-02{
    position: absolute;
    top:50%; right: 0;
    width: 85%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.solution-network-02-anim-02-pic-bg{
    width: 100%;
    text-align: right;
    top:-20%; right: -20px;
}
.solution-network-02-anim-02-pic-bg img{
    width: 43%;
}
.solution-network-02-anim-02-pic-device-01{
    position: absolute;
    z-index: 1;
    width:10%;
    top:81%; right:25%;
}
.solution-network-02-anim-02-pic-device-02{
    position: absolute;
    z-index: 1;
    width:7%;
    top:70%; right:8%;
}
.solution-network-02-anim-02-pic-device-03{
    position: absolute;
    z-index: 1;
    width:10%;
    top:38%; right:20%;
}
.solution-network-02-anim-02-pic-device-01 img,
.solution-network-02-anim-02-pic-device-02 img,
.solution-network-02-anim-02-pic-device-03 img{
    display: block;
    width: 100%;
}
.solution-network-02-title{
    position: absolute;
    z-index: 3;
    width: 100%;
    top:42%;
}
.solution-network-02-title h2{
    /*font-size: 40px;*/
    font-size: 2.2vw;
    font-weight: 500;
    text-align: center;
    line-height: 3vw;
}
.solution-network-02-title h2 .emphasis{
    font-size: 2.7vw;
    font-weight: bold;
}




















/************** section 03 *****************/
.solution-network-03{
    opacity: 0;
}
.solution-network-03-content.mobile{
    display: none;
}
.solution-network-03-title{
    position: absolute;
    z-index: 1;
    top:15%;
    width: 100%;
}
.solution-network-03-title h3{
    font-size: 1.5vw;
}
.solution-network-03-content-container{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap:50px;
    /*padding-top:6%;*/
    position: absolute;
    top:50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
}
.solution-network-03-content-01{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap:20px;
    padding-top:30px;
    width: 45%;
}

.solution-network-03-slide-btn-wrapper-outer{
    /*padding-bottom: 20px;*/
    padding-bottom: 2%;
}
.solution-network-03-slide-btn-wrapper{
    position: relative;
    width: 60%;
}
.solution-network-03-slide-btn-rail{
    position: relative;
    z-index: 2;
    width: 100%;
    border:2px solid #FF524D;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}
.solution-network-03-slide-btn-rail::before {
    content: "";
    display: block;
    padding-bottom: 19.5%; /* Adjust this value to change the aspect ratio (e.g., 50% for 1:2, 100% for 1:1, etc.) */
  }
.solution-network-03-slide-btn-rail-active{
    position: absolute;
    z-index: 2;
    left:0; bottom:-10px; top:-10px;
    width: 1px;
    background-color: #FF524D;
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
    opacity:1;
}
.solution-network-03-slide-btn-knob{
    position: absolute;
    z-index: 3;
    top:0; left: -.8%;
    width: 18%;
}
.solution-network-03-slide-btn-knob img{
    display: block;
    width: 100%;
}
.solution-network-03-slide-btn-text-init{
    position: absolute;
    left:25%; top:12%;
    width: 70%;
    font-weight: 600;
    color: #FF524D;
    /*font-size: 23px;*/
    font-size: 1.3vw;
}
.solution-network-03-slide-btn-text-active{
    position: absolute;
    z-index: 5;
    left:10%; top:12%;
    width: 70%;
    font-weight: 600;
    color: #fff;
    /*font-size: 23px;*/
    font-size: 1.3vw;
    opacity: 0;
}
.solution-network-03-content-01-title-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap:15px;
    padding-left: 10px;
}
.solution-network-03-content-01-title{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap:20px;
}
.solution-network-03-content-01-title .text-init{
    position: relative;
    font-weight: 700;
    color: #4D4D4D;
    opacity: 0;
    /*font-size: 24px;*/
    font-size: 1.35vw;
}
.solution-network-03-content-01-title .text-result-01,
.solution-network-03-content-01-title .text-result-02,
.solution-network-03-content-01-title .text-result-03{
    position: relative;
    top:-5px;
    /*font-size: 30px;*/
    font-size: 1.5vw;
    opacity: 0;
    
}
.text-init-strikeout-01,
.text-init-strikeout-02,
.text-init-strikeout-03{
    position: absolute; z-index: 1;
    display: block;
    top:45%;
    left:-10px;
    height: 3px;
    background-color: #202020;
}

.solution-network-03-content-02{
    width: 30%;
    margin: 0;
}


.solution-network-03-devices-title-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap:40px;
    padding:20px 0; padding-bottom: 10px;
}
.solution-network-03-devices-title-content{
    position: relative;
}
.solution-network-03-devices-title-content h3{
    font-size: 1.6vw;
}
.solution-network-03-title-check{
    position: absolute;
    right:-60%; top:0;
}
.solution-network-03-title-check i{
    /*font-size: 48px;*/
    font-size: 2.5vw;
}

.solution-network-03-devices-wrapper{
    width: 100%;
}
.solution-network-03-devices-image-wrapper{
    position: relative;
}
.solution-network-03-btn-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top:15px;
}

.solution-network-03-building-wrapper{
    position: relative;
}
.solution-network-03-building-devices-wrapper{
    position: absolute;
    z-index: 4;
    top:0; left: 0;
    width: 100%;
}
.solution-network-03-building-lines-wrapper{
    position: absolute;
    z-index: 2;
    top:0; left: 0;
    width: 100%; height: 100%;
}
.solution-network-03-building-devices-active-wrapper{
    position: absolute;
    z-index: 5;
    top:0; left: 0;
    width: 100%; height: 100%;
}
.solution-network-03-building-line{
    position: absolute;
}
.solution-network-03-building-line-01 {
    width: 12%;
    left: 59%;
    top: 44%;
}
.solution-network-03-building-line-02 {
    width: 25%;
    left: 59%;
    top: 37.5%;
}
.solution-network-03-building-line-03 {
    width: 33%;
    left: 59%;
    top: 37.5%;
}
.solution-network-03-building-line-04 {
    width: 57%;
    left: 13%;
    top: 40.5%;
}
.solution-network-03-building-line-01.active,
.solution-network-03-building-line-02.active,
.solution-network-03-building-line-03.active,
.solution-network-03-building-line-04.active{
    z-index: 3;
    opacity: 0;
}
.solution-network-03-building-devices-active-item{
    position: absolute;
    z-index: 5;
    /*font-size: 35px;*/
    font-size: 2.5vw;
    opacity: 0;
}
.solution-network-03-building-devices-active-item::after{
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    /*top:2px; left: 2px;*/
    top:0; left: 0; right:0; bottom: 0;
    /*width: 32px; height: 32px;*/
    border-radius: 50%;
    background: #fff;
}
.solution-network-03-building-devices-active-item i{
    /*position: absolute;*/
    position: relative;
    z-index: 2;
    display: block;
}
.solution-network-03-building-devices-active-item.active-01{
    top:36%;
    left: 70%;
}
.solution-network-03-building-devices-active-item.active-02{
    top:53%;
    left: 60%;
}
.solution-network-03-building-devices-active-item.active-03{
    top:31%;
    left: 81%;
}
.solution-network-03-building-devices-active-item.active-04{
    top:46%;
    left: 70%;
}
.solution-network-03-building-devices-active-item.active-05{
    top:42%;
    left: 78%;
}
.solution-network-03-building-devices-active-item.active-06{
    top:39%;
    left: 85%;
}
.solution-network-03-building-devices-active-item.active-07{
    top:60%;
    left: 69%;
}
.solution-network-03-building-devices-active-item.active-08{
    top:56%;
    left:92%;
}
.solution-network-03-building-devices-active-item.active-09{
    top:53%;
    left:48%;
}
.solution-network-03-building-devices-active-item.active-10{
    top:56%;
    left:31%;
}
.solution-network-03-building-devices-active-item.active-11{
    top:56%;
    left: 14%;
}
.solution-network-03-building-devices-active-item.active-12{
    top:74%;
    left:14%;
}
.solution-network-03-building-devices-active-item.active-13{
    top:77%;
    left: 31%;
}
.solution-network-03-building-wrapper img,
.solution-network-03-building-devices-wrapper img,
.solution-network-03-building-line img{
    display: block;
    width: 100%;
}
.solution-network-03-explore-wrapper{
    position: absolute;
    width: 100%;
    text-align: center;
    margin-top:3%;
    padding-bottom: 2%;
    bottom:2%;
}
.solution-network-03-explore-wrapper h5{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    font-size: 1.2vw;
    font-weight: 600;
}
@-webkit-keyframes explore-arrow {
    0%   {bottom:0;}
    50%  {bottom:-5%;}
}
@keyframes explore-arrow {
    0%   {bottom:0;}
    50%  {bottom:-5%;}
}
.solution-network-03-explore-wrapper .explore-arrow-wrapper{
    position: absolute;
    width: 100%;
    bottom:0;
    -webkit-transition: all 300ms;
    -o-transition: all 300ms;
    transition: all 300ms;
    -webkit-animation: explore-arrow 1s ease-out infinite;
            animation: explore-arrow 1s ease-out infinite;
}
.solution-network-03-explore-wrapper i{
    font-size: 1.5vw;
    
}











/************** section 04 *****************/
.solution-network-04{
    opacity: 0;
    background-color: #dce5f5;
}

/*
.solution-network-04-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: calc(var(--vh, 1vh) * 100);
}
    */

.solution-network-04-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    /*height: 100vh;*/
    height: calc(var(--vh, 1vh) * 100);
    gap:8%;
}


.solution-network-04-chart{
    width: 56%;
}
.solution-network-04-chart-inner{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
.solution-network-04-chart-icons-top{
    position: relative;
    z-index: 5;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    gap:14.5%;
    margin-bottom: -2%;
    left: -1.5%;
}
.solution-network-04-chart-icon-01{
    position: relative; z-index: 3;
    width: 10%;
}
.solution-network-04-chart-icon-02{
    position: relative; z-index: 3;
    width: 10%;
}
.solution-network-04-chart-icon-03{
    position: relative; z-index: 3;
    width: 10%;
    left: 0.9%;
}
.solution-network-04-chart-line{
    position: relative; z-index: 4;
    width: 50.5%;
    
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0); /* hide bottom to top */
  -webkit-transition: none;
  -o-transition: none;
  transition: none;
}
.solution-network-04-chart-icon-device{
    position: relative; z-index: 3;
    width: 25%;
    border-radius: 50%;
}
.solution-network-04-chart-icon-device-bg{
    position: absolute; z-index: 0;
    width: 36%;
    border-radius: 50%;
    bottom: -9%;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
}
.solution-network-04-chart-icon-01 img,
.solution-network-04-chart-icon-02 img,
.solution-network-04-chart-icon-03 img,
.solution-network-04-chart-line img,
.solution-network-04-chart-icon-device img,
.solution-network-04-chart-icon-device-bg img{
    display: block;
    width: 100%;
}

.solution-network-04-title{
    position: relative;
    left:10%;
}
.solution-network-04-title h2{
    font-size: 2.2vw;
    font-weight: 500;
    line-height: 3vw;
}
.solution-network-04-title h2 .emphasis{
    font-size: 2.2vw;
    font-weight: bold;
}










/************** section 05 *****************/
.solution-network-05{
    /*opacity: 0;*/
    background-color: #fff;
}

.solution-network-05-title{
    position: absolute;
    z-index: 11;
    width: 31%;
    top: 35%;
    left: 58%;
    opacity: 0;
}
.solution-network-05-title.mobile{
    display: none;
}
.solution-network-05-title3{
    position: absolute;
    z-index: 11;
    width: 31%;
    top: 37%;
    left: 58%;
    opacity: 0;
}
.solution-network-05-title h2,
.solution-network-05-title2 h2,
.solution-network-05-title3 h2,
.solution-network-05-title4 h2,
.solution-network-05-title5 h2,
.solution-network-05-title6 h2,
.solution-network-05-title7 h2,
.solution-network-05-title8 h2{
    font-size: 1.9vw;
    font-weight: 500;
    line-height: 2.5vw;
}
.solution-network-05-title h2 .emphasis,
.solution-network-05-title2 h2 .emphasis,
.solution-network-05-title3 h2 .emphasis,
.solution-network-05-title4 h2 .emphasis,
.solution-network-05-title5 h2 .emphasis,
.solution-network-05-title6 h2 .emphasis,
.solution-network-05-title7 h2 .emphasis,
.solution-network-05-title8 h2 .emphasis{
    font-size: 2.2vw;
    font-weight: bold;
}
.solution-network-05-title2{
    position: absolute;
    z-index: 11;
    width: 31%;
    top: 30%;
    left: 58%;
}
.solution-network-05-title2 .segment{
    opacity: 0;
}
.solution-network-05-title2 p{
    font-size: 1.2vw;
    line-height: 2vw;
    color: #808080;
}
.solution-network-05-title4{
    position: absolute;
    z-index: 11;
    width: 31%;
    top:26%; left:58%;
    opacity: 0;
}
.solution-network-05-title5{
    position: absolute;
    z-index: 11;
    width: 31%;
    top: 25%;
    left: 60%;
}
.solution-network-05-title5 .segment{
    opacity: 0;
}
.solution-network-05-title5 p{
    font-size: 1.2vw;
    line-height: 2vw;
    color: #808080;
}
.solution-network-05-title6{
    position: absolute;
    z-index: 11;
    width: 31%;
    top: 65%;
    left: 60%;
    opacity: 0;
}
.solution-network-05-title7{
    position: absolute;
    z-index: 11;
    width: 31%;
    top:57%; left:60%;
    opacity: 0;
}
.solution-network-05-title7 .btn-action-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 1%;
    margin-top:2%;
}
.solution-network-05-title7 .btn-action-wrapper .btn-action{
    width: 11%;
}
.solution-network-05-title7 .btn-action-wrapper .btn-action img{
    display: block;
    width: 100%;
}

.solution-network-05-title8{
    position: absolute;
    z-index: 11;
    width: 31%;
    top:63%; left:60%;
}
.solution-network-05-title8 .segment-01,
.solution-network-05-title8 .segment-02{
    opacity: 0;
}



.solution-network-05-pic-wrapper-outer{
    position: relative;
    width: 100%;
    top:-39%;
    left: 17%;
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: scale(1.55);
        -ms-transform: scale(1.55);
            transform: scale(1.55);
}



.solution-network-05-chart-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
}
.solution-network-05-chart-outer{
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 3%;
}



.solution-network-05-chart-top{
    position: relative;
    width: 100%;
    padding:2% 5% 2% 2%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap:5%;
    
}
.solution-network-05-chart-top-bg{
    position: absolute;
    z-index: 0;
    top:0; left: 0;
    width: 100%; height: 100%;
    background: #F3F8FF;
    border-radius: 50rem;
    opacity: 0;
}
.solution-network-05-chart-top-item{
    position: relative;
    z-index: 1;
    width: 10%;
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
}
.solution-network-05-chart-top-item-user{
    width: 6.5%;
    margin-left: auto;
}
.solution-network-05-chart-top-item img{
    display: block;
    width: 100%;
}

.solution-network-05-chart{
    position: relative;
    z-index: 2;
    border-radius: 10%;
    overflow: hidden;
}
.solution-network-05-chart-title{
    width: 100%;
    font-size: 1.5vw;
    padding-top:2%;
    padding-bottom: 3%;
    margin: 0;
    opacity: 0;
}
.solution-network-05-chart-inner{
    position: relative;
}
/*
.solution-network-05-chart-inner2{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
*/
.solution-network-05-chart-building{
    opacity: 0;
}
.solution-network-05-chart-building img{
    display: block;
    width: 100%;
}
.solution-network-05-chart-devices{
    position: absolute;
    z-index: 3;
    top:0; left: 0;
    width: 100%; height: 100%;
}

.solution-network-05-chart .solution-network-05-chart-icon{
    position: absolute;
    z-index: 3;
    width: 12.5%;
}
.solution-network-05-chart .solution-network-05-chart-icon img{
    display: block;
    width: 100%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-01,
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-03-icon-01{
    bottom:37%; left:31%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-02,
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-03-icon-02{
    bottom:18%; left:21%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-03,
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-03-icon-03{
    bottom:29%; left:43%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-04,
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-03-icon-04{
    bottom:40%; left:64%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-04{
    opacity: 0;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-05,
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-03-icon-05{
    bottom:20%; left:57%;
}

.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-01{
    bottom:37%; left:31%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-02{
    bottom:18%; left:23%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-03{
    bottom:29%; left:43%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-04{
    bottom:40%; left:64%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-05{
    bottom:20%; left:57%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-06{
    bottom:27%; left:11%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-07{
    bottom:48%; left:50%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-08{
    bottom:10%; left:38%;
}
.solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-02-icon-09{
    bottom:31%; left:77%;
}

.solution-network-05-chart-devices-lines{
    position: absolute;
    z-index: 1;
    top:0; left: 0;
    width: 100%; height: 100%;
}
.solution-network-05-chart .solution-network-05-chart-line{
    position: absolute;
    width: 20%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-secondary-short{
    width: 15%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-flipped{
    -webkit-transform: scaleX(-1);
        -ms-transform: scaleX(-1);
            transform: scaleX(-1);
}
.solution-network-05-chart .solution-network-05-chart-line.line-secondary-01{
    bottom:24%;
    left:31%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-secondary-02{
    bottom:33%;
    left:36%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-secondary-03{
    bottom:25%;
    left:50%;
}

.solution-network-05-chart .solution-network-05-chart-line.line-active-01{
    width: 15%;
    bottom:35%;
    left:52%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-active-02{
    width: 15%;
    bottom:44%;
    left:68%;
}
.solution-network-05-chart .solution-network-05-chart-line.solution-network-05-chart-02.line-secondary-04{
    bottom:41%;
    left:37%;
}
.solution-network-05-chart .solution-network-05-chart-line.solution-network-05-chart-02.line-secondary-05{
    bottom:24%;
    left:14%;
}
.solution-network-05-chart .solution-network-05-chart-line.solution-network-05-chart-02.line-secondary-06{
    bottom:15%;
    left:29%;
}
.solution-network-05-chart .solution-network-05-chart-line.solution-network-05-chart-02.line-secondary-07{
    bottom:24%;
    left:64%;
}

.solution-network-05-chart .solution-network-05-chart-line.line-active-03{
    width: 18%;
    bottom:42%;
    left:80%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-active-04{
    width: 18%;
    bottom:42%;
    left:65%;
}
.solution-network-05-chart .solution-network-05-chart-line.line-active-05{
    width: 18%;
    bottom:34%;
    left:51%;
}


.solution-network-5-chart-line-svg .solution-network-5-chart-line-svg-g-line{
    fill: none;
    stroke: #C5DEF9;
    stroke-width: 11.03;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.solution-network-5-chart-line-svg .solution-network-5-chart-line-svg-g-line-active{
    fill: none;
    stroke: #F05451;
    stroke-width: 11.03;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.solution-network-5-chart-line-svg .solution-network-5-chart-line-svg-g-line-active-black{
    fill: none;
    stroke: #202020;
    stroke-width: 11.03;
}








.solution-network-05-chart-line .mask-wrapper {
  position: relative;
  width: 100%; height: 100%;
}
.solution-network-05-chart-line .line-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  -webkit-transform-origin: right;
      -ms-transform-origin: right;
          transform-origin: right;
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
  z-index: 2;
  pointer-events: none;
}
.solution-network-05-chart-line .line-mask {
  -webkit-transform-origin: left;
      -ms-transform-origin: left;
          transform-origin: left;
          
}

.solution-network-05-chart-01-line-primary-01 .line-mask,
.solution-network-05-chart-01-line-primary-02 .line-mask{
    opacity: 0;
}

.solution-network-05-chart-line img{
    display: block;
    width: 100%;
}

.solution-network-05-chart-bottom{
    padding: 0 5% 0 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap:10%;
}
.solution-network-05-chart-bottom-item{
    position: relative;
    width: 10%;
    padding-top: 8%;    
}
.solution-network-05-chart-bottom-icon-line{
    position: absolute;
    z-index: 0;
    left: 40%;
    bottom: 60%;
    width: 25%;
    opacity: 0;
}

.solution-network-05-chart-bottom-icon-line img{
    display: block;
    width: 100%;
}
.solution-network-05-chart-bottom-icon-img{
    position: relative;
    width: 100%;
    margin-top:35%;
    -webkit-transform: scale(0.4);
        -ms-transform: scale(0.4);
            transform: scale(0.4);
    opacity: 0;
}
.solution-network-05-chart-bottom-icon-img img{
    display: block;
    width: 100%;
}


.solution-network-05-chart-version-outer{
    position: absolute;
    z-index: 1;
    width: 43%;
    bottom:5%; right:-30%;
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    opacity: 0;
}
.solution-network-05-chart-version-line{
    position: absolute;
    z-index: 1;
    bottom:17%;
    width: 110%;
}

.solution-network-05-chart-version-line img{
    display: block;
    width: 100%;
}
.solution-network-05-chart-version-content{
    position: relative;
    z-index: 2;
    left:47%; margin-top:-64%;
    width: 150%;
}
.solution-network-05-chart-version-content img{
    display: block;
    width: 100%;
}

.solution-network-05-chart-02-outer{
    opacity: 0;
}
.solution-network-05-chart-03-outer{
    opacity: 0;
}

.solution-network-05-chart-dots{
    position: relative;
    width: 12%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin-left: -1.5%;
    margin-right: -1.5%;
    opacity: 0;
}
.solution-network-05-chart-dots img{
    display: block;
    width: 100%;
}


.solution-network-05-monitor-wrapper{
    position: relative;
    z-index: 5;
    opacity: 0;
}
.solution-network-05-monitor-pic{
    position: relative;
    z-index: 1;
    width: 45%;
    margin-left: auto; margin-right: auto;
}
.solution-network-05-monitor-pic img{
    display: block;
    width: 100%;
}

.solution-network-05-monitor-terminal{
    position: absolute;
    z-index: 14;
    top:29%; left: 44.5%;
    width: 10%;
    -webkit-transform: scale(0.3);
        -ms-transform: scale(0.3);
            transform: scale(0.3);
    opacity: 0;
}
.solution-network-05-monitor-terminal img{
    display: block;
    width: 100%;
}
.solution-network-05-monitor-overlay{
    position: absolute;
    z-index: 12;
    top:4.5%; left:32%;
    width: 36%; height: 88%;
    background-color: #fff;
    -webkit-transform: scale(0, 1);
        -ms-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: center;
        -ms-transform-origin: center;
            transform-origin: center;
    opacity: 0;
}

.solution-network-05-monitor-line{
    position: absolute;
    z-index: 2;
}
.solution-network-05-monitor-line-dot{
    position: absolute;
    z-index: 5;
    width: 5.25%;
    bottom: 0;
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    opacity: 0;
}
.solution-network-05-monitor-line-01{
    width: 0.8%;
    top:42%;
    left:49.5%;
}
.solution-network-05-monitor-line-01 .solution-network-05-monitor-line-dot{
    width: 251%;
    left: -75%;
}
.solution-network-05-monitor-line-02{
    width: 36.5%;
    top:36.5%;
    left: 3.5%;
}
.solution-network-05-monitor-line-02 .solution-network-05-monitor-line-dot{
    right: -1.5%;
}
.solution-network-05-monitor-line-03{
    width: 36.5%;
    top:36.5%;
    right: 3.5%;
}
.solution-network-05-monitor-line-03 .solution-network-05-monitor-line-dot{
    left: -1.5%;
}
.solution-network-05-monitor-line-03-active{
    z-index: 7;
    width: 36.5%;
    top:36.5%;
    right: 3.5%;
    opacity: 0;
}
.solution-network-05-monitor-line-03-active .solution-network-05-monitor-line-dot{
    width: 5.5%;
    left: -1.5%;
}
.solution-network-05-monitor-line-01 img,
.solution-network-05-monitor-line-02 img,
.solution-network-05-monitor-line-03 img,
.solution-network-05-monitor-line-03-active img,
.solution-network-05-monitor-line-dot img{
    display: block;
    width: 100%;
}


.solution-network-5-monitor-line-svg .solution-network-5-monitor-line-svg-g-line{
    fill: none;
    stroke: #F05451;
    stroke-width:25;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}
.solution-network-5-monitor-line-svg .solution-network-5-monitor-line-svg-g-line.solution-network-5-monitor-line-svg-g-line-04{
    stroke: #202020;
    stroke-width:30;
}







.solution-network-05-monitor-line-01 .line-mask{
    width: 120%;
    top:15%; left: -26%;
    -webkit-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
            transform: rotate(15deg);
}
.solution-network-05-monitor-line-02 .line-mask{
    -webkit-transform-origin: bottom;
        -ms-transform-origin: bottom;
            transform-origin: bottom;
}
.solution-network-05-monitor-line-03 .line-mask{
    width: 135%;
    height: 120%;
    top:-24%; left: -36%;
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: rotate(20deg);
        -ms-transform: rotate(20deg);
            transform: rotate(20deg);
}











/************** section 06 *****************/
.solution-network-06{
    opacity: 0;
    background-color: #dce5f5;
}
.solution-network-06-content{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}
.solution-network-06-title{
    position: relative;
    z-index: 1;
    /*top:15%;*/
    width: 100%;
    text-align: center;
    margin-bottom: 2%;
}
.solution-network-06-title h2{
    font-size: 1.9vw;
    font-weight: 500;
    line-height: 2.5vw;
}
.solution-network-06-title h2 .emphasis{
    font-size: 2.2vw;
    font-weight: bold;
}
.solution-network-06-title p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-size: 1.2vw;
    line-height: 2vw;
    overflow: hidden;
}
.solution-network-06-title .segment-01{
    opacity: 0;
}
.solution-network-06-title .segment-02{
    opacity: 0;
}
.solution-network-06-title .segment-03{
    opacity: 0
}

.solution-network-06-card-list-wrapper{
    position: relative;
    /*top:20%;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap:3%;
    
}
.solution-network-06-card-item-wrapper{
    position: relative;
    width: 20%;
    opacity: 0;
}
.solution-network-06-card-item-wrapper .card-item-pic img{
    display: block;
    width: 100%;
}
.solution-network-06-card-item-wrapper .card-item-rail{
    position: absolute;
    z-index: 2;
    left:9%; bottom:8.5%;
    width: 82%; height: 14%;
    border:2px solid #FF524D;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}
.solution-network-06-card-item-wrapper .card-item-rail-active{
    position: absolute;
    z-index: 2;
    left:0; bottom:0;
    width: 100%; height: 100%;
    background-color: #FF524D;
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
}
.solution-network-06-card-item-wrapper  .card-item-knob{
    position: absolute;
    z-index: 3;
    top:0; left: -.8%;
    width: 18%;
}
.solution-network-06-card-item-wrapper  .card-item-knob img{
    display: block;
    width: 100%;
}
.solution-network-06-card-item-wrapper  .card-item-text-init{
    position: absolute;
    left:25%; top:8%;
    width: 70%;
    font-size: .8vw;
    font-weight: 600;
    color: #FF524D;
}

.solution-network-06-card-item-wrapper  .card-item-text-active{
    position: absolute;
    z-index: 5;
    left:18%; top:28%;
    width: 70%;
    font-size: .8vw;
    font-weight: 600;
    color: #fff;
}











/************** section 07 *****************/
.solution-network-07{
    opacity: 0;
    background-color: #fff;
}
.solution-network-07-content{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%;
    gap:2%;
}
.solution-network-07-title{
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 80%;
    margin-left: auto; margin-right: auto;
    text-align: center;
    opacity: 0;
}
.solution-network-07-title h1{
    font-size: 3.2vw;
    font-weight: 500;
    line-height: 4.5vw;
    text-align: center;
}
.solution-network-07-title h1 .emphasis{
    font-size: 3.2vw;
    font-weight: bold;
}
.solution-network-07-content-btn-wrapper{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap:2%;
    opacity: 0;
}















@media (max-width: 1366px){
    /********** section 03 *********/   
    .solution-network-03-title{
        top:18%;
    }

    /********** section 05 *********/
    .solution-network-05-title2{
        top:35%;
    }
    .solution-network-05-title3{
        top:40%;
    }
    .solution-network-05-title4{
        top: 24%;
    }
    .solution-network-05-pic-wrapper-outer{
        top:-34%;
    }
    
    /************ indicator and button ***********/
    .action-indicator{
        width: 27px;
        height: 40px;
    }
    .action-indicator-scroll{
        width: 5px;
        height: 12px;
    }
    .replay-button{
        left: 47%;
    }

}


@media (max-width: 1280px){
    /********** section 03 *********/
    .solution-network-03-content-01,
    .solution-network-03-content-02{
        margin-top:2%;
    }

    /********** section 05 *********/
    .solution-network-05-pic-wrapper-outer{
        top:-30%;
    }
}


@media (max-width: 1024px){
    /********** section 05 *********/
    .solution-network-05-pic-wrapper-outer{
        top:-17%;
    }
}



@media (max-width: 640px){
    /********** section 03 *********/
    .solution-network-03-slide-btn-rail{
        border-radius: 6px;
    }

    /********** section 06 *********/
    .solution-network-06-card-item-wrapper .card-item-rail{
        border-radius: 6px;
    }

    .replay-button{
        left: 41%;
    }
}



@media (max-width: 1000px) and (orientation: portrait){
    /********** section 02 *********/
    .solution-network-02-title{
        top:16%;
        left: 18%;
    }
    .solution-network-02-title h2{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-02-title h2 .emphasis{
        font-size: 4.5vw;
    }
    .solution-network-02-anim-01{
        top:40%;
        width: 145%;
    }
    .solution-network-02-anim-02{
        top:70%;
        width: 148%;
    }

    /********** section 03 *********/    
    .solution-network-03-content-container{
        display: block;
        width: 100%;
        height: 100vh;
    }
    .solution-network-03-title{
        position: relative;
        top:9%;
    }
    .solution-network-03-title h3{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-03-content-01{
        position: absolute;
        top:27%;
        margin-top:0;
        width: 70%;
        gap:10px;
    }
    .solution-network-03-slide-btn-wrapper{
        width: 70%;
    }
    .solution-network-03-slide-btn-text-init,
    .solution-network-03-slide-btn-text-active{
        font-size: 2.4vw;
    }
    .solution-network-03-content-01-title .text-init{
        font-size: 2.5vw;
    }
    .solution-network-03-content-01-title .text-result-01, 
    .solution-network-03-content-01-title .text-result-02, 
    .solution-network-03-content-01-title .text-result-03{
        font-size: 2.9vw;
    }
    .solution-network-03-content-02{
        position: absolute;
        bottom:9%;
        right: 10%;
        margin-top:0;
        width: 57%;
    }
    .solution-network-03-devices-title-content{
        margin-left: 36%;
    }
    .solution-network-03-devices-title-content h3{
        font-size: 2.5vw;
    }
    .solution-network-03-title-check i{
        font-size: 4.5vw;
    }
    .solution-network-03-building-devices-active-item{
        font-size: 4.5vw;
    }

    /********** section 04 *********/
    .solution-network-04-content{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .solution-network-04-title{
        left: 0;
        text-align: center;
    }
    .solution-network-04-title h2,
    .solution-network-04-title h2 .emphasis{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-04-chart{
        width: 80%;
    }

    /********** section 05 *********/
    .section-network-content-wrapper{
        padding:5%;
    }
    .solution-network-05-title h2, 
    .solution-network-05-title2 h2, 
    .solution-network-05-title3 h2, 
    .solution-network-05-title4 h2, 
    .solution-network-05-title5 h2, 
    .solution-network-05-title6 h2, 
    .solution-network-05-title7 h2, 
    .solution-network-05-title8 h2,
    .solution-network-05-title h2 .emphasis, 
    .solution-network-05-title2 h2 .emphasis, 
    .solution-network-05-title3 h2 .emphasis, 
    .solution-network-05-title4 h2 .emphasis, 
    .solution-network-05-title5 h2 .emphasis, 
    .solution-network-05-title6 h2 .emphasis, 
    .solution-network-05-title7 h2 .emphasis, 
    .solution-network-05-title8 h2 .emphasis{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-05-title{
        /*position: relative;*/
        top:7%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
        display: none;
    }
    .solution-network-05-title.mobile{
        display: block;
    }
    .solution-network-05-title2{        
        top:7%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title2 p{
        font-size: 2.7vw;
        line-height: 4vw;
    }
    .solution-network-05-title3{
        top:9%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title3 h2{
        display: block;
        width: 70%;
        margin:0 auto;
    }
    .solution-network-05-title4{
        top:9%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title4 h2{
        display: block;
        width: 60%;
        margin:0 auto;
    }
    .solution-network-05-title5{        
        top:9%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title5 p{
        font-size: 2.7vw;
        line-height: 4vw;
    }
    .solution-network-05-title6{
        top:19%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title6 h2{
        display: block;
        width: 60%;
        margin:0 auto;
    }
    .solution-network-05-title7{        
        top:9%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title4 h2{
        display: block;
        width: 60%;
        margin:0 auto;
    }
    .solution-network-05-title8{        
        top:15%; left: 0;
        width: 100%;
        padding:5%;
        text-align: center;
    }
    .solution-network-05-title8 h2{
        display: block;
        width: 60%;
        margin:0 auto;
    }
    .solution-network-05-title7 .btn-action-wrapper{
        width: 90%;
    }
    .solution-network-05-pic-wrapper-outer{
        top:4%;
        left:15%;
        -webkit-transform: scale(2.5);
            -ms-transform: scale(2.5);
                transform: scale(2.5);
    }
   
    

    /********** section 06 *********/
    .solution-network-06-title h2{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-06-title h2 .emphasis{
        font-size: 4vw;
        line-height: 5vw;
    }
    .solution-network-06-title p{
        font-size: 2.7vw;
        line-height: 4vw;
    }
    .solution-network-06-card-item-wrapper{
        width: 45%;
    }
    .solution-network-06-card-item-wrapper.card-item-03{
        display: none;
    }
    .solution-network-06-card-item-wrapper .card-item-text-init,
    .solution-network-06-card-item-wrapper .card-item-text-active{
        font-size: 1.65vw;
    }

    /********** section 07 *********/
    .solution-network-07-title h1,
    .solution-network-07-title h1 .emphasis{
        font-size: 6vw;
        line-height: 7vw;
    }
    .solution-network-07-content-btn-wrapper{
        font-size: 3.2vw;
    }
    

    
    .replay-button{
        left: 45%;
    }


}


@media (max-width: 640px) and (orientation: portrait){
    .solution-network-05-chart .solution-network-05-chart-line.line-active-03{
        bottom: 41%;
    }
    .solution-network-05-chart .solution-network-05-chart-line.line-active-04{
        bottom: 41%;
    }
    .solution-network-05-chart .solution-network-05-chart-line.line-active-05{
        bottom: 33%;
    }
}


@media (max-width: 400px) and (orientation: portrait){
    /********** section 03 *********/
    .solution-network-03-content.desktop{
        display: none;
    }    
    .solution-network-03-title {
        top:10%;
    }
    .solution-network-03-content-01{
        top:22%; left: 47%;
        width: 78%;
        -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
                transform: translateX(-50%);
    }
    .solution-network-03-slide-btn-wrapper{
        width: 85%;
    }    
    .solution-network-03-slide-btn-text-init, .solution-network-03-slide-btn-text-active{
        font-size: 3vw;
    }
    .solution-network-03-content-01-title .text-init{
        font-size: 3.5vw;
    }
    .solution-network-03-content-01-title .text-result-01, .solution-network-03-content-01-title .text-result-02, .solution-network-03-content-01-title .text-result-03{
        font-size: 3.8vw;
    }
    .solution-network-03-content-01-title-wrapper{
        gap:6px;
    }
    .solution-network-03-content-02{
        bottom: 1.5%;
        right:26%;
        width: 64%;
    }
    .solution-network-03-devices-title-content h3{
        font-size: 3.5vw;
    }
    .solution-network-03-title-check i{
        font-size: 5.5vw;
    }
    .solution-network-03-building-devices-active-item{
        font-size: 5.5vw;
    }

    .solution-network-03-content.mobile{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
    .solution-network-03-content.mobile .solution-network-03-title{
        position: static;
        top:90px;
        left: 0;
    }
    .solution-network-03-content.mobile .solution-network-03-content-01{
        position: static;
        width: 90%;
        padding-top:20px;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    .solution-network-03-content.mobile .solution-network-03-content-02{
        position: static;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }



    /********** section 04 *********/
    .solution-network-04-chart {
        width: 120%;
    }

    /********** section 05 *********/
    .solution-network-05-title{
        top:12%;
    }
    .solution-network-05-title2{
        top:12%;
    }
    .solution-network-05-title2 p {
        font-size: 3vw;
        line-height: 5vw;
    }
    .solution-network-05-title3{
        top:15%;
    }
    .solution-network-05-title4 {
        top:18%;
    }
    .solution-network-05-title5{
        top:12%;
    }
    .solution-network-05-title5 p {
        font-size: 3vw;
        line-height: 5vw;
    }
    .solution-network-05-title6{
        top:25%;
    }
    .solution-network-05-title7{
        top:15%;
    }
    .solution-network-05-title7 h2{
        display: block;
        width: 70%;
        margin:0 auto;
    }
    .solution-network-05-title8{
        top:21%;
    }
    .solution-network-05-pic-wrapper-outer{
        top:14%;
    }
    .solution-network-05-chart-01 .solution-network-05-chart-devices,
    .solution-network-05-chart-01 .solution-network-05-chart-devices-lines{
        top:6%;
    }
    .solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-01{
        bottom: 44%;
        left: 33%;
    }
    .solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-02{
        bottom: 26%;
        left: 25%;
    }
    .solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-03{
        bottom: 36%;
        left: 45%;
    }
    .solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-04{
        bottom: 45%;
        left: 63%;
    }
    .solution-network-05-chart .solution-network-05-chart-icon.solution-network-05-chart-01-icon-05{
        bottom: 28%;
        left: 57%;
    }
    .solution-network-05-chart .solution-network-05-chart-line.line-active-03 {
        bottom: 36%;
    }
    .solution-network-05-chart .solution-network-05-chart-line.line-active-04 {
        bottom: 36%;
    }
    .solution-network-05-chart .solution-network-05-chart-line.line-active-05 {
        bottom: 29%;
    }

    /********** section 06 *********/
    .solution-network-06-title p{
        font-size: 3.2vw;
    }



    .action-indicator {
        width: 20px;
        height: 32px;
        bottom:15px;
        border-width: 2px;
    }
    .replay-button {
        left: 39%;
    }

}









@media (max-width: 360px) and (orientation: portrait){
    /********** section 03 *********/
    .solution-network-03-content-container{
        position: static;
        -webkit-transform: none;
            -ms-transform: none;
                transform: none;
    }
    .solution-network-03-content-01{
        top:20%;
        left: 50%;
        width: 90%;
    }
    .solution-network-03-slide-btn-wrapper{
        width: 70%;
    }    
    .solution-network-03-devices-title-wrapper{
        padding-bottom: 0;
    }
    .solution-network-03-content-02{
        bottom: 4%;
    }
}















@media (width: 430px) and (max-height: 932px) and (orientation: portrait){
    /********** section 03 *********/
    .solution-network-03-title {
        top:12%;
    }
    .solution-network-03-content-01{
        top:23%;
        width: 90%;
    }
    .solution-network-03-slide-btn-text-init, .solution-network-03-slide-btn-text-active{
        font-size: 3.2vw;
    }
    .solution-network-03-content-01-title .text-init {
        font-size: 3.5vw;
    }
    .solution-network-03-content-01-title .text-result-01, .solution-network-03-content-01-title .text-result-02, .solution-network-03-content-01-title .text-result-03 {
        font-size: 3.9vw;
    }
    .solution-network-03-content-02{
        right: 14%;
        width: 79%;
    }
    .solution-network-03-devices-title-content h3{
        font-size: 3.5vw;
    }
    .solution-network-03-title-check i{
        font-size: 7vw;
    }
    .solution-network-03-building-devices-active-item{
        font-size: 7.5vw;
    }

    /********** section 04 *********/
    .solution-network-04-chart{
        width: 135%;
    }

}










@media (width: 1366px) and (height: 1024px){
    .solution-network-05-pic-wrapper-outer{
        top:4%;
    }
}

@media (width: 1194px) and (max-height: 834px){
    .solution-network-05-pic-wrapper-outer{
        top:0%;
    }

}

@media (width: 1024px) and (max-height: 1366px) and (orientation: portrait){
    .solution-network-05-pic-wrapper-outer{
        top:16%;
    }
    .solution-network-05-title4 {
        top: 30%;
    }
    .solution-network-05-title6{
        top:49%;
    }
    .solution-network-05-title7{
        top:46%;
    }
    .solution-network-05-title8{
        top:47%;
    }
}