*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
}
body{}
.header{
    background-color: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 0.25rem;
    left: 50%;
    position: fixed;
    transform: translateX(-50%);
    transition: all 0.3s cubic-bezier(0.26, 0.16, 0.1, 1) 0s;
    z-index: 997;
    width: 100%;
}
.headerMenu{
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding-left:  1.5rem;
}
.header_Web{
    display: none;
}
.header_list{
    align-items: center;
    display: flex;
    gap: 0.5rem;
}
.header_list .header_item a{
    font-family: HelveticaNeue;
    font-size: 1.25rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    color: #707070;
}
.hamburger{
    display: block;
    background-color: #ffffff;
    width: 60px;
    height: 60px;
    border: none;
    cursor: pointer;
}
.hamburger.activeBg {
    background-color: #707070; 
  }
.bar {
    display: block;
    width: 25px;
    height: 2px;
    margin: 8px auto;
    background-color: #707070;
  }
  .bar.active:nth-child(1) {
    transform: rotate(45deg) translate(8px, 6px);
    background-color: #fff;
    width: 35px;
    height: 2px;
}
.bar.active:nth-child(2) {
    opacity: 0;
}
.bar.active:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -6px);
    background-color: #fff;
    width: 35px;
    height: 2px;
  }
.phMenuAll{
    background-color: #fff;
    z-index: 999;
    max-height: 100vh;
    transition: all 0.3s ease; 
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.Menu{
    border: 25px solid #a5a5a5;
    max-height: 100vh;
    height: calc(100vh - 110px);
}
.phMenuAll img{
    width: 76%;
    position: absolute;
    bottom: 0%;
    left: 14%;
}
.phMenuAll .phMenu .header_item a{
    font-family: HelveticaNeue;
    font-size: 1.375rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: normal;
    text-align: left;
    color: #707070;
}
.phMenu{
   width: 70%;
   margin: 10% auto 0%;
   flex: 1;
  overflow-y: auto; 
}
.phMenuImageContainer {
    width: 100%;
  }
.MenuPHImg{
    background-image: url(/image/MenuPH.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: center bottom;
}
.phMenuImageContainer img {
    width: 100%;
    display: block;
  }
.header_item{
    padding: 10% 0 ;
    border-bottom: 1px solid #707070;
    border-left: none;
    border-right: none;
}
.header_item:nth-child(1){
    border-top: 1px solid #707070;
}
.mainContentAllPH{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-evenly;
    position: relative;
    overflow: hidden;
}
.PcCarouselChartTitle{
    margin-top: 17%;
    margin-bottom: -13%;
    position: relative;
    z-index: 20;
}
.PcCarouselChartTitleRow{
    display: none;
}
.mainTitle {
    font-family: NotoSansCJKTC-Bold;
    font-size: 4.375rem;
    font-weight: bold;
    letter-spacing: 1.75px;
    padding-left: 35px;
    color: #ce4141;
}
.mainTitle:nth-last-child(2){
    font-family: NotoSansCJKTC-Bold;
    font-size: 3.375rem;
    font-weight: bold;
    margin-top: -8px;
}
.PcCarouselChart{
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: auto;
    display: block;
}
.PcCarouselChartContainer.active{
    display: block;
    touch-action: pan-y;
}
.PcCarouselChartContainer{
    position: relative;
    display: none;
}
.carouselChart-mainTitle.active{
    display: block;
    padding-bottom: 8px;
}
.carouselChart-mainTitle{
    display: none;
}
.mainContentPH{
    display: none;
}
.mainContentTit{
    display: flex;
    align-items: baseline;
}
.mainContentPH.active{
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.mainAll .Web{
    display: none;
}
.mainAll .arrowSpace{
    display: flex;
    align-items: center; 
    height: 100vh;
    max-height: 43vh;
    position: relative;
}
.mainContentAllPH .left{
    display: block;
    left: 0%;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
.mainContentAllPH .right{
    display: block;
    right: -19%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(0deg);
}
.mainContentAllPH .arrow{
    content: '';
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 10;
}
.mainContentAllPH .arrow img{
    width: 50%;
}
.PcCarouselChartWeb{
    display: none;
}
.mainContentAll{
    padding-left: 8%;
    margin-bottom: 20px;
    position: relative;
    z-index: 20;
    max-height: 30vh;
    /* width: 93vw; */
}
.mainContentTitle p{
    font-family: NotoSansCJKTC-Medium;
    font-size: 2rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
}
.mainContent{
    display: flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 30px;
}
.content-icon{
    margin-right: 10px;
}
.mainContent p{
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.125rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 27px;
    letter-spacing: normal;
    text-align: left;
}
.mainAll .CarouselChart-spots{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #919191;
    cursor: pointer;
} 
.watchFunctionarrowSpace .CarouselChart-spotsDesk{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #919191;
} 
.watchFunctionarrowSpace .CarouselChart-spotsPH{
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background-color: #919191;
    cursor: pointer;
} 
.cover{
 /* position: fixed;
 top: 0; */
}
.spots{
    padding-right: 8%;
    margin-left: 8%;
}
.CarouselChart-spots{
    margin-top: 10px;
}
.CarouselChart-spotsDesk{
    margin-top: 10px;
}
.CarouselChart-spotsPH{
    margin-top: 10px;
}
.mainContentAllWeb{
   display: none;
}
.ContentAllIPad{
    display: none;
}
main{
    position: relative;
}
#mainLeftWed,#mainRightWed{
    display: block;
}
/* #content{
    margin-top: 200%;
} */
.download{
    padding: 10% 0;
    background-color: #ce4141;
    position: relative;
}
.successBg,
.successMain {
  display: none;
}
.downloadContentAll{
    width: 75%;
    margin: auto;
}
.downloadTitle{
    font-family: NotoSansCJKTC-Bold;
    font-size: 1.8125rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.73px;
    text-align: left;
    color: #fff;
    margin-bottom: 15px;
}
.downloadTitle:nth-child(1){
    margin-bottom: 6px;
}
.downloadTitle a{
   color: #41afff;
}
.email{
    background: #dedede;
    padding: 10% 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.input-container{
    display: flex;
    justify-content: center;
}
.google{
    height: 30px;
    font-weight: 800;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
}
input[type="email"] {
    line-height: 40px;
}
input{
    height: 55px;
    border-radius: 20px;
    border: none;
    outline: none;
    width: 225px;
    padding-left: 10px;
    font-size: 1.25rem;
}
.downloadButton{
    margin-left: 3%;
    line-height: 40px;
    width: 59px;
    height: 55px;
    border-radius: 20px;
    border: none;
    outline: none;
    background: #ce4141;
    color: white;
    cursor: pointer;
    font-size: 1.25rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
}
.placeholder::placeholder{
    color:rgb(170, 170, 170);
    font-family: NotoSansCJKTC-Regular;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.73px;
}
.downloadContent{
    color: white;
    font-family: NotoSansCJKTC-Regular;
    font-size: 0.875rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 22px;
    letter-spacing: normal;
}
.successBg{
   position: fixed;
   top: 0%;
   left: 0%;
   height: 100vh;
   width: 100%;
   background-color: #00000044;
   z-index: 998;
}
.successMain{
    background-color: #fff;
    width: 337px;
    height: 335px;
    border-radius: 49px;
    box-shadow: 10px 10px 20px 0 rgba(0, 0, 0, 0.16);
    position: fixed;
    top: 21%;
    left: 5%;
    z-index: 999;
}
.clickbutton{
    width: 52px;
    height: 52px;
    border: solid 1px #707070;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 6%;
    top: 6%;
}
.click:nth-child(1) {
    transform: rotate(45deg) translate(24px, 12px);
    background-color: #fff;
    height: 2px;
    width: 35px;
    background-color: #707070;
}
.click:nth-child(2) {
    transform: rotate(-45deg) translate(-10px, 22px);
    background-color: #fff;
    height: 2px;
    width: 35px;
    background-color: #707070;
}
.successContentMain{
    position: absolute;
    bottom: 15%;
    left: 0%;
    right: 0%;
}
.successContent{
    margin-bottom: 10%;
}
.successContent p{
    font-family: NotoSansCJKTC;
    font-size: 1.375rem;
    line-height: 1.64;
    font-weight: 600;
    text-align: center;
    color: #707070;
}
.successContent p:nth-child(1){
    margin-bottom: 2%;
}
.closebtn{
    cursor:pointer;
    width: 116px;
    height: 56px;
    margin: auto;
    border-radius: 21px;
    background-color: #ce4141;
    display: flex;
    justify-content: center;
    align-items: center;
}
.closebtn p{
    font-family: NotoSansCJKTC;
    font-size: 1.625rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.2;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
.ProductAdvantagesAll{
    background-color: #fff;
    text-align: center;
    padding: 20% 0;
    position: relative;
    overflow: hidden;
}
.MarqueeContainer {
    position: absolute;
    top: 3%;
    width: 600%;
    z-index: 0;
  }
  
.Marquee {
    width: 55%; 
    animation: marquee 25s linear infinite; 
}
  
.Marquee img {
    height: 100%;
}
  
@keyframes marquee {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
@keyframes marquee-reverse {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(100%);
    }
}

.AdvantagesSpaceTitle{
    margin-top: 13%;
    margin-bottom: 20px;
    position: relative;
    z-index: 1; 
}
.AdvantagesSpaceTitle h2{
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    margin-bottom: 3%;
}
.AdvantagesSpaceTitle p{
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.375rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 36px;
    letter-spacing: 1.1px;
    color: #707070;
}
.AdvantagesSpace{
    margin-bottom: 5%;
}
.AdvantagesSpace p{
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    padding-bottom: 1%;
    font-weight: normal;
    color: #707070;
}
.AdvantagesTitle{
    color: #ce4141;
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.875rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: 0.75px;
    padding-bottom: 3%;
}
.AdvantagesImg{
    margin-bottom: 6%;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
}
.Status1{
    display: none;
}
.Status2{
    display: none;
}
.ProductAdvantagesAllWeb{
    display: none;
}
.circle-icon{
    display: none;}
.UserManualDownload{
    background-color: #f7f7f7;
}
.UserManualDownloadAll{
    padding-top: 25%;
    width:75%;
    margin: auto;
}
.userManuaTitle p{
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.48;
    letter-spacing: 1px;
    color: #ce4141;
}
.userManuaContent{
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    padding-top: 10%;
    padding-bottom: 15%;
    line-height: 34px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: normal;
    color: #707070;
}
.userManuaPDF{
    background-color: #ce4141;
    width: 274px;
    height: 55px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.userManuaPDF a{
    font-family: NotoSansCJKTC-Regular;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center;
    font-size: 1.25rem;
    display: block;
    padding: 12px 0;
    color: #fff;
}
.userManualDownloadImg{
    position: relative;
}
.userManualDownloadImg img{
   width: 100%;
}
.DownloadImg{
    display: block;
}
.DownloadImgWeb{
    display: none;
}
.watchFunctionAll{
    background-color: #fff;
    padding: 15% 0 15% 0;
}
.functionTitle h2{
    color: #ce4141;
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20px;
}
.functionTitleMain{
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.375rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.64;
    letter-spacing: 1.1px;
    color: #707070;
}
.functionTitleContent{
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.375rem;
    font-weight: 500;
    line-height: 1.64;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 1.1px;
    text-align: center;
    margin-bottom: 20px;
}
.functionTitleContentDesktop{
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
}
.functionTitleMain{
    display: none;
}
.functionTitleDesk{
    display: none;
}
.watchFunctionarrowSpace{
    overflow: hidden;
}
.watchFunctionImgAll{
    max-height: 100vh;
    height: 42vh;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}
.watchFunctionImgAllDesktop{
    display: flex;
    justify-content: center;
    align-items: center;
}
.watchFunctionImg Img{
    min-width: 20%; 
    transition: transform 0.5s ease-in-out; 
    min-height: 32vh;
    border-radius: 40px;
}
.watchFunctionImgDesk Img{
    height:140px;
    border-radius: 25px;
    margin: auto;
}
.functionStatusPH1{
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
}
.hidden{
    display: none;
}
.watchFunctionImgMain{
    width: 100%;
    margin: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.watchFunctionImg{
    margin: 0 15px;
}
.Functionspots{
    display: flex;
    justify-content: center;
    width: 80%;
    margin: auto;
}
.Functionspots .CarouselChart-spots{
    margin: 2% 2% 0 2%;
    width: 0.8rem;
    height: 0.8rem;
}
.Functionspots .CarouselChart-spotsDesk{
    margin: 2% 2% 0 2%;
    width: 0.8rem;
    height: 0.8rem;
}
.Functionspots .CarouselChart-spotsPH{
    margin: 2% 2% 0 2%;
    width: 0.8rem;
    height: 0.8rem;
}
.Desktop{
    display: none;
}
.watchFunctionAll .watchFunctionarrowSpace{
    position: relative;
}
.watchFunctionAll .left{
    left:9%;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
.watchFunctionAll .right{
    right: -11%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(0deg);
}
#functionIpadLeft{
    display: none;
}
#functionIpadRight{
    display: none;
}
.watchFunctionAll .arrow img{
    width: 50%;
}
.watchFunctionAll .arrow{
    content: '';
    position: absolute;
    cursor: pointer;
    z-index: 10;
    display: block;
    top: 46%;
}
.watchFunctionarrowSpace .IPad{
    display: none;
}
.functionContent{
    width: 78%;
    margin: auto;
    margin-top: 8%;
}
.functionContentAll p{
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    color: #707070;
    text-align: justify;
}
.functionContentDesktop{
    width: 40%;
    margin: auto;
    margin-top: 5%;
}
.functionContentAll{
    display: none;
}
.functionContentAllDesk{
    display: none;
}
.active{
    display: block;
}
.hidden{
    display: none !important;
}
.table{
    display: none;
}
.SystemProcessMain{
    overflow: hidden;
    height: 1000px;
    /* max-height: 100vh; */
    background-image: url(../image/LoginProcess.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
}
.SystemProcess-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ce4141c7;
    pointer-events: none;
}
.SystemProcessMainContent{
    position: relative;
    width: 72%;
    margin: auto;
    z-index: 0;
}
.SystemProcessMainTitle{
    padding-top: 30%;
}
.SystemProcessMainTitle h2{
    color: white;
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 15%;
}
.SystemProcessTitle{
    display: flex;
    justify-content: space-around;
    color: white;
    margin-bottom: 15%;
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.5rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.42;
    letter-spacing: 0.6px;

}
.SystemProcessTitlePH{
    display: flex;
    justify-content: space-around;
    color: white;
    font-weight: 700;
    margin-bottom: 15%;
    display: none;
}
.SystemProcessSpotsAreaAll{
    position: relative;
}
.TriangleArea{
    display: none;
}
.TriangleArea.active{
    display: block;
}
.downloadTriangle{
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 37px solid white;
    position: absolute;
    top: -6%;
    left: 10.5%;
}
.log-inTriangle{
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 37px solid white;
    position: absolute;
    top: -6%;
    left: 43.5%;
}
.systemTriangle{
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 37px solid white;
    position: absolute;
    top: -6%;
    left: 77%;
}
.textColor{
    color: #ce4141;
}
.SystemProcessBorder{
    border: 1px solid white;
    width: 100%;
}
.SystemProcessSpotsArea{
    display: flex;
    justify-content: space-around;
    position: absolute;
    top: -15px;
    margin: auto;
    width: 100%;
}
.SystemProcessSpots{
    width: 30px ;
    height: 30px ;
    border-radius: 50%;
    background-color: #fff;
}
.SystemProcessSpots.active{
    background-color: #ffd046;
}
.ProcessContent{
    display: block;
    background-color: #fff;
    padding: 15% 10%;
    border-radius: 32px;
    margin: auto;
    height: 460px ;
    max-height: 100vh;
}
.SystemProcessContent.active{
    display: block;
}
.SystemProcessContent{
    display: none;
}
.SystemContent.Ipad{
    display: none;
}
.SystemContentPH{
    display: flex;
    align-items: baseline;
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    color: #707070;
}
.SystemContentPH p{
    margin-left: 4%;
}
.SystemContent .SystemContentTitleContent{
    font-size: 1.25rem;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    text-align: center;
    color: #707070;
}
.CPU{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.25rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
    text-align: center;
    color: #707070;
    font-family: NotoSansCJKTC-Bold;
}
.SystemContent p{
    text-align: justify;
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.7;
    letter-spacing: normal;
}
.SystemProcessMain .arrow img{
    width: 50%;
}
.SystemProcessMain .left{
    left:0%;
    -webkit-transform: translate(-50%, -50%) rotate(135deg);
    transform: translate(-50%, -50%) rotate(180deg);
}
.SystemProcessMain .right{
    right: -19%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
    transform: translate(-50%, -50%) rotate(0deg);
}
.SystemProcessMain .arrow{
    content: '';
    position: absolute;
    cursor: pointer;
    z-index: 10;
    top: 60%;
    display: block;
}
.partnerMain{
    background-color: white;
    padding: 15% 0 0 0;
}
.partnerTitle h2{
    color: #ce4141;
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 10%;
}
.partnerImg img {
    width: 130px;
    height: 130px;
}
.partnerImg{
    display: flex;
    justify-content: space-evenly;
}
.partnerMainDesk{
    display: none;
}
.partnerImgUnder img{
    width: 100%;
    display: block;
}
.partnerImgUnder{
    position: relative;
}
.questionMain{
    background-color: #f0efef;
    position: relative;
    padding: 15% 0;
}
/* .questionMarquee img:nth-child(2){
    display: none;
} */
.questionMarquee{
    width: 100%;
    position: absolute;
    top: 3%;
    overflow: hidden;
    z-index: 0;
}
.questionMarqueeImg{
    animation: questionMarquee 15s linear infinite; 
}
.questionMarquee img{
    height: auto;
    display: block;
}
@keyframes questionMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.questionMainContent{
    width: 90%;
    margin: auto;
    position: relative;
}
.questionMainTitle{
    position: relative;
    z-index: 1;
}
.questionMainTitle h2{
    color: #ce4141;
    font-family: NotoSansCJKTC-Bold;
    font-size: 2.5rem;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.48;
    letter-spacing: 1px;
    text-align: center;
    margin-bottom: 20%;
    margin-top: 15%;
}
.questionTitle{
    cursor:pointer;
    width: 50%;
    margin: 5% 0;
    display: flex;
    align-items: center;
}
.questionTitle h3{
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.375rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.64;
    letter-spacing: 0.55px;
    text-align: left;
    color: #707070;
    margin-right: 2%;
}
.questionTitle p{
    font-size: 1.875rem;
    transition: transform 0.3s;
    transform: rotate(270deg);
    color: #707070;
}
.questionListAll{
    overflow: hidden;
}
.QA1{
    height: 250px;
}
.QA3{
    height: 410px;
}
.questionList{
    cursor: pointer;
    background-color: white;
    border-radius: 20px;
    padding: 15px 17px ;
    margin-bottom: 5%;
    font-family: NotoSansCJKTC-Regular;
    font-size: 1.25rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: normal;
    color: #707070;
}
.question{
    display: flex;
    justify-content: space-between;
}
.questionListContent{
    width: 76%;
    text-align: justify;
}
.questionListIcon{
    width: 25px ;
    height: 25px ;
    background-color: #b5b5b5;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2px;
    margin-left: 2%;
}
.questionListBorder1{
    background-color: #fff;
    width: 12px ;
    height: 3px;
    position: absolute;
}
.questionListBorder2{
    background-color: #fff;
    width: 12px ;
    height: 3px;
    position: absolute;
    transform: rotate(90deg);
    transition: 0.5s;
}
.visibility{
    visibility:hidden;
}
.answer{
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
}
.answerAll{
    display: flex;
    flex-direction: column;
}
.questionListContentAll{
    display: flex;
    justify-content: space-between;
}
.Top{
    position: fixed;
    bottom: 20%; 
    right: 8%; 
    opacity: 0;
    visibility: hidden;
    transition: opacity 2s ease;
    cursor: pointer;
    z-index: 996;
}
.Top.show{
    opacity: 1;
    transition: opacity 2s ease;
    visibility: visible;
}
.Top img{
    border-radius: 50%;
    width: 40px ;
    height: 40px;
}
#product{
    display: none;
}
.product{
    background-color:#a5a5a5;
    padding: 7% 5%;
}
.productTitle{
    color: white;
    font-family: NotoSansCJKTC-Medium;
    font-size: 1.375rem;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.64;
    letter-spacing: 1.1px;
}
.productLink a span{
    color: white;
    margin-right: 5%;
    font-family: HelveticaNeue-Regular;
    font-size: 1.125rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2.78;
}
.product-1{
    background-color: #919191;
    padding: 7% 5%;
}
.footer{
    background-color: #707070;
    color: white;
    padding: 10% 5% 20% 5%; 
}
.company{
    font-family: HelveticaNeue-Regular;
    font-size: 1.125rem;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.72;
    letter-spacing: normal;
    text-align: left;
    color: #fff;
}
@media (min-width: 375px){
    .log-inTriangle{
        left: 44%;
    }
    .systemTriangle{
        left: 78%;
    }
}
@media (min-width: 390px){
    .phMenu{
        margin-top: 25%;
    }
    .Menu{
        border: 25px solid #a5a5a5;
        max-height: 100vh;
        height: calc(100vh - 109px);
    }
    .successMain{
        left: 7%;
    }
    .mainAll .arrowSpace .left{
        left: -1%;
    }
    .watchFunctionAll .left{
        left: 5%;
    }
    .watchFunctionAll .right{
        right: -14%;
    }
    .SystemProcessMainContent{
        width: 75%;
    }
    .downloadTriangle{
        left: 11%;
    }
    .log-inTriangle{
        left: 44.5%;
    }
    .systemTriangle{
        left: 77.5%;
    }
    .QA3{
        height: 400px;
    }
}
@media (min-width: 412px){
    .phMenu{
        margin-top: 20%;
    }
    .Menu{
        border: 25px solid #a5a5a5;
        max-height: 100vh;
        height: calc(100vh - 110px);
    }
    .successMain{
        left: 9%;
    }
    .watchFunctionAll .right{
        right: -13%;
    }
    .SystemProcessMain{
        height: 1030px;
    }
    .log-inTriangle{
        left: 44.5%;
    }
    .systemTriangle{
        left: 78%;
    }
    .SystemProcessMain .right{
        right: -18%;
    }
    .QA1{
        height: 240px;
    }
    .QA3{
        height: 400px;
    }
}
@media (min-width: 414px){
    .phMenu{
        margin-top: 26%;
    }
    .Menu{
        border: 25px solid #a5a5a5;
        max-height: 100vh;
        height: calc(100vh - 109px);
    }
    .mainAll .arrowSpace .left{
        left: -2%;
    }
    .log-inTriangle{
        left: 44.5%;
    }
    .systemTriangle{
        left: 78%;
    }
    .QA1{
        height: 240px;
    }
    .QA3{
        height: 400px;
    }
}
@media (min-width: 430px){
    .Menu{
        border: 25px solid #a5a5a5;
        max-height: 100vh;
        height: calc(100vh - 110px);
    }
    .mainContentAllPH .right{
        right: -17%;
    }
    .successMain{
        left: 11%;
    }
    .mainAll .arrowSpace .left{
        left: -1%;
    }
    .mainAll .arrowSpace .right{
        right: -18%;
    }
    .downloadTriangle{
        left: 11.5%;
    }
    .log-inTriangle{
        left: 44.6%;
    }
    .functionContent{
        width: 65%;
    }
    .SystemProcessMain .right{
        right: -17%;
    }
    .QA1{
        height: 210px;
    }
    .QA3{
        height: 340px;
    }
}
@media (min-width:475px) {
    .phMenu{
        margin-top: 11%;
    }
    .Menu{
        border: 25px solid #a5a5a5;
        max-height: 100vh;
        height: calc(100vh - 110px);
    }
    .successMain{
        left: 16%;
        top: 29%;
    }
    .mainTitle{
        font-size: 4.375rem;
    }
    .mainTitle:nth-last-child(1){
        font-size: 3.375rem;
    }
    .mainAll .arrowSpace{
        max-height: 52vh;
    }
    /* .mainAll .arrowSpace .right{
        right: -14%;
    }
    .mainAll .arrowSpace .left{
        left: 2%;
    } */
    .mainContentAllPH .right{
        right: -15%;
    }
    .downloadContentAll{
        width: 70%;
        margin: auto;
    }
    input{
        width: 235px;
    }
    .UserManualDownloadAll{
        width: 57%;
    }
    .downloadTriangle{
        top: -6%;
        left: 12%;
    }
    .log-inTriangle{
        top: -6%;
        left: 45.5%;
    }
    .systemTriangle{
        top: -6%;
        left: 78.5%;
    }
    .SystemProcessMain .arrow{
        top: 65%;
    }
    .SystemProcessMain .left{
        left: 1%;
    }
    .SystemProcessMain .right{
        right: -14%;
    }
    .watchFunctionImg{
        margin: 0 40px;
    }
    .watchFunctionAll .left{
        left: 3%;
    }
    .QA1{
        height: 190px;
    }
    .QA3{
        height: 350px;
    }
    .footer{
        padding-bottom: 10%;
    }
}
@media (min-width:540px){
    .header_item{
        padding: 5% 0;
    }
    .phMenuAll{
        display: none;
    }
    .successMain{
        left: 13%;
        top: 15%;
        width: 395px;
    }
    .PcCarouselChartContainer{
        z-index: -1;
    }
    .hamburger{
        display: none;
    }
    .header_Web{
        display: block;
    }
    .header_item{
        border-bottom: 0;
    }
    .header_item:nth-child(1){
        border-top:0;
    }
    .headerMenu{
        justify-content: space-evenly;
        padding-left: 0.875rem;
    }
    .header_list{
        gap: 1rem;
    }
    .mainTitle{
        display: none;
    }
    .PcCarouselChartTitleRow p{
        font-family: NotoSansCJKTC-Medium;
        font-size: 1.0625rem;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.73;
        letter-spacing: 1.1px;
        text-align: center;
        color: #707070;
        margin-top: 3%;
    }
    .PcCarouselChartTitleRowImg{
        width: 80%;
        margin: auto;
    }
    .TitleIPad p{
        font-family: NotoSansCJKTC;
        font-size: 1.375rem;
        font-weight: 500;
        letter-spacing: 1.3px;
        margin-left: 10px;
    }
    .ContentAllIPad{
        display: none;
        /* display: flex; */
        justify-content: center;
        position: relative;
        overflow: hidden;
        margin-bottom: 5%;
    }
    .ContentAllIPad .active{
        display: block;
    }
    .mainContentIPad{
        display: none;
    }
    .TitleIPad{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .mainContentIPadAllflex{
        display: flex;
    }
    .mainAll .ContentAllIPad .arrow{
        top: 30%;
    }
    #mainIPadRight img,#mainIPadLeft img{
        width: 50%;
    }
    #mainIPadLeft{
        transform: rotate(180deg);
        position: absolute;
        left: -5%;
    }
    #mainIPadRight{
        position: absolute;
        right: -5%;
    }
    .mainContentIPad p{
        font-family: NotoSansCJKTC;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: 1.3px;
        margin-left: 10px;
    }
    .mainContentAllPH{
        overflow: visible;
    }
    .TitleIPad.active{
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
        padding: 5px 15px;
        border-radius: 15px;
    }
    .AdvantagesSpaceTitle{
        margin-top: -10%;
        margin-bottom: 15%;   
    }
    .flex{
        display: flex;
        justify-content: space-around;
    }
    .PcCarouselChartTitleRow{
        display: block;
    }
    .PcCarouselChartTitle{
        display: flex;
        justify-content: center;
        margin-top: 20%;
    }
    .mainContentAllWeb{
        display: flex;
        /* display: none; */
        justify-content: center;
        position: relative;
        margin-bottom: 7%;
        overflow: hidden;
    }
    .ContentTitleWeb:nth-child(1){
        margin-right: 20px;
    }
    .ContentTitleWeb{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 185px;
    }
    .ContentTitleWeb p{
        /* color: #fff; */
        font-family: NotoSansCJKTC-Medium;
        font-size: 1.625rem;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1.3px;
    }
    .ContentTitleWeb span{
        margin: 0 20px 0 10px;
    }
    .ContentTitleWeb .active {
        color: white;
        background-color: black;
        border-radius: 14px;
    }
    .ContentTitleWeb .active p{
        display: block;
    }
    .ContentTitleWeb .TitleWeb{
        display: flex;
        align-items: center;
    }
    .ContentAllWeb{
        display: flex;
        justify-content: center;
    }
    .mainContentListWeb{
        display: flex;
    }
    .TitleWeb{
        height: 38px;
    }
    .TitleWeb p{
        /* display: none; */
    }
    .mainContentWeb{
        display: none;
        width: 62%;
     }
     .mainContentWeb.active{
        /* display: flex;
        flex-direction: column;
        justify-content: space-between; */
        display: block;
    }
    .mainContentWeb p{
        padding-right: 5px;
        font-size: 1.125rem;
        text-align: justify;
        font-family: NotoSansCJKTC-Regular;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: 0.9px;
    }
    .PcCarouselChartTitleWeb{
        display: none;
    }
    .ContentWeb{
        display: none;
    }
    #mainLeft,#mainRight{
        display: none;
    }
    #mainLeftWed,#mainRightWed{
        display: block;
    }
    #mainLeftWed img,#mainRightWed img{
        width: 50%;
    }
    #mainLeftWed img{
        transform: rotate(180deg);
    }
    #mainLeftWed{
        position: absolute;
        left: 0%;
        top: 37%;
    }
    #mainRightWed{
        position: absolute;
        right: -6%;
        top: 37%;
    }
    /* #content{
        margin-top:149% ;
    } */
    .downloadWed{
        display: none;
    }
    .hamburger{
        width: 70px;
        height: 70px;
    }
    .mainAll .arrowSpace .left{
        left: -1%;
    }
    .mainAll .arrowSpace .right{
        right: -15%;
    }
    .mainAll .arrowSpace{
        max-height: 400px;
        margin-bottom: 5%;
    }
    .mainAll .arrowSpace .arrow{
        top: 130%;
    }
    .mainContentAll{
        display: none;
    }
    .watchFunctionAll .left{
        left: 11%;
    }
    .watchFunctionAll .right{
        right: -3%;
    }
    .SystemProcessMain{
        height: 1100px;
    }
    .SystemProcessMainTitle{
        padding-top: 22%;
    }
    .downloadTriangle{
        left: 13%;
    }
    .log-inTriangle{
        left: 46%;
    }
    .systemTriangle{
        left: 79.5%;
    }
    .SystemProcessMain .arrow{
        top: 62%;
    }
    .SystemProcessMain .left{
        left: 3%;
    }
    .SystemProcessMain .right{
        right: -10%;
    }
    .QA3{
        height: 325px;
    }
}
@media (min-width:568px) {
    .header_item{
        padding: 5% 0;
    }
    .phMenuAll{
        display: none;
    }
    .PcCarouselChartContainer{
        z-index: -1;
    }
    .hamburger{
        display: none;
    }
    .header_Web{
        display: block;
        margin-left: 7%;
    }
    .header_item{
        border-bottom: 0;
    }
    .header_item:nth-child(1){
        border-top:0;
    }
    .headerMenu{
        justify-content: space-evenly;
        padding-left: 0.875rem;
    }
    .header_list{
        gap: 1rem;
    }
    .successMain{
        left: 13%;
        top: 23%;
        width: 425px;
    }
    .mainTitle{
        display: none;
    }
    .PcCarouselChartTitleRow p{
        font-family:  NotoSansCJKTC-Medium;
        font-size: 1.125rem;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.73;
        letter-spacing: 1.1px;
        text-align: center;
        color: #707070;
        margin-top: 3%;
    }
    .PcCarouselChartTitleRowImg{
        width: 80%;
        margin: auto;
    }
    .TitleIPad p{
        font-family: NotoSansCJKTC;
        font-size: 1.375rem;
        font-weight: 500;
        letter-spacing: 1.3px;
        margin-left: 10px;
    }
    .mainContentIPad{
        display: none;
    }
    #mainRightWed{
        right: -6%;
    }
    .ContentAllIPad .active{
        display: block;
    }
    .mainContentIPad p{
        font-family: NotoSansCJKTC;
        font-size: 1.125rem;
        font-weight: 600;
        letter-spacing: 1.3px;
        margin-left: 10px;
    }
    .TitleIPad.active{
        background-color: black;
        color: white;
        display: flex;
        align-items: center;
        padding: 5px 15px;
    }
    .AdvantagesSpaceTitle{
        margin-top: -10%;
        margin-bottom: 15%;   
    }
    .flex{
        display: flex;
        justify-content: space-around;
    }
    .PcCarouselChartTitleRow{
        display: block;
    }
    .PcCarouselChartTitle{
        display: flex;
        justify-content: center;
    }
    .ContentTitleWeb:nth-child(1){
        margin-right: 20px;
    }
    .ContentTitleWeb{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .ContentTitleWeb .TitleWeb{
        display: flex;
        align-items: center;
    }
    .ContentTitleWeb .TitleWeb span{
        margin: 0 20px 0 10px;
        visibility: hidden;
    }
    .ContentTitleWeb .TitleWeb p{
        visibility: hidden;
    }
    .ContentTitleWeb .active {
        color: white;
        background-color: black;
    }
    .ContentTitleWeb .active span{
        visibility: visible;
    }
    .ContentTitleWeb .active p{
        visibility: visible;
    }
    .mainContentListWeb{
        display: flex;
    }
    .TitleWeb p{
        /* display: none; */
    }
    .mainContentWeb{
        display: none;
        width: 62%;
     }
     /* .mainContentWeb.active{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    } */
    .PcCarouselChartTitleWeb{
        display: none;
    }
    .mainAll .arrowSpace .right{
        right: -13%;
    }
    .ContentWeb{
        display: none;
    }
    .downloadWed{
        display: none;
    }
    /* #content{
        margin-top: 142%;
    } */
    .hamburger{
        width: 70px;
        height: 70px;
    }
    .mainAll .arrowSpace .left{
        left: 0%;
    }
    .mainAll .arrowSpace{
        max-height:450px;
    }
    .mainAll .arrowSpace .arrow{
        top: 128%;
    }
    .mainContentAll{
        display: none;
    }
    .UserManualDownloadAll{
        width: 45%;
    }
    .watchFunctionAll{
        background-color: #f7f7f7;
    }
    .functionContent{
        width: 60%;
    }
    .download{
        padding: 6% 0;
        display: flex;
        justify-content: center;
    }
    .downloadContentAll{
        width: 50%;
        margin: 0;
    }
    .downloadTriangle{
        top: -6%;
        left: 13%;
    }
    .log-inTriangle{
        top: -6%;
        left: 46%;
    }
    .systemTriangle{
        top: -6%;
        left: 79.5%;
    }
    .SystemProcessTitle p{
        font-size: 1.25rem;
    }
    .partnerImg img{
        width: 180px;
        height: 180px;
    }
    .questionListContent{
        width: 85%;
    }
    .questionListIcon{
        margin-left: 0;
    }
    .QA3{
        height: 280px;
    }
}
@media (min-width: 668px){
    .mainAll .arrowSpace{
        max-height: 473px;
    }
    #mainRightWed{
        right: -5%;
    }
}
@media (min-width: 768px) {
    .header{
        background-color: rgb(255, 255, 255);
        box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 0.25rem;
        left: 50%;
        position: fixed;
        top: 1.25rem;
        transform: translateX(-50%);
        transition: all 0.3s cubic-bezier(0.26, 0.16, 0.1, 1) 0s;
        width: calc(100% - 3.75rem);
        z-index: 11;
        z-index: 996;
    }
    .mainAll .arrowSpace .arrow img{
        width: 70%;
    }
    .mainAll .arrowSpace .left{
        left: 10%;
        display: block;
    }
    .mainAll .arrowSpace .right{
        right: 3%;
        display: block;
    }
    .headerMenu{
        align-items: center;
        display: flex;
        justify-content: space-between;
        padding: 0.0625rem 1.875rem;
    }
    .header_list{
        align-items: center;
        display: flex;
        gap: 1.5rem;
    }
    .header_item{
        border: 0px;
    }
    .header_Ph{
        display: none;
    }
    .header_Web{
        display: block;
    }
    .successMain{
        left: 4%;
        top: 26%;
        width: 711px;
        height: 372px;
    }
    .PcCarouselChartTitle{
        margin-top: 11%;
    }
    #mainRightWed{
        right: 0%;
    }
    #mainLeftWed{
        left: 3%;
    }
    .mainContentAll{
        display: none;
    }
    .downloadAll{
        display: flex;
    }
    .download{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        align-items: center;
        padding: 0;
    }
    .downloadContentAll{
        width: 80%;
        margin: 0;
    }
    form{
        width: 100%;
    }
    .input-container{
        margin-bottom: 0;
        width: 100%;
    }
    .mainAll .ph{
        display: none;
    }
    .mainContentTitle{
        margin-bottom: 15px;
    }
    .mainTitleWeb{
        font-size: 3.125rem;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 2px;
        color: #ce4141;
    }
    .mainTitleWeb:nth-child(2){
        font-size: 2.5rem;
    }
    .mainAll .arrowSpace{
       max-height: 500px;
    }
    .PcCarouselChart{
        height: 666px;
    }
    .mainContentAll{
        bottom: 95px;
    }
    .PcCarouselChartWeb{
        min-width: 100vw;
        width: 100%;
    }
    .mb{
        margin-bottom: 20px;
    }
    .ContentWeb p{
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.9px;
        color:#707070;
    }
    .downloadWed{
        background-color: #ce4141;
        border-radius: 15px;
        height: 40px;
        width: 200px;
        /* display: flex; */
        justify-content: center;
        align-items: center;
        margin-bottom: 55px;
    }
    .downloadWed p{
        color: #fff !important;
    }
    .downloadWed .ml{
        margin-left: 5px;
    }
    /* #content{
        margin-top: 112%;
    } */
    .ProductAdvantagesAll{
        padding-top: 15%;
        padding-bottom: 6%;
    }
    .AdvantagesSpace{
        margin-bottom: 5%;
    }
    .AdvantagesSpaceTitle h2{
        font-size: 2.5rem;
        line-height: 100px;
        letter-spacing: 1px;
        text-align: center;
        margin-bottom: -30px;
    }
    .AdvantagesSpaceTitle p{
        font-size: 1.375rem;
        line-height: 40px;
        padding-bottom: 0%;
    }
    .AdvantagesSpaceTitle{
        margin-bottom: 16%;
    }
    .MarqueeContainer{
        top: 10%;
    }
    .AdvantagesSpaceTitle{
        margin-top: 6%;
    }
   
    .circle-icon i{
        font-size: 5.3125rem;
    }
    .circle-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 150px; 
        height: 150px; 
        border-radius: 50%;
        background-color: #cdcdcd;
        color: #fff; 
        text-align: center;
        line-height: 50px; 
        transition: all 0.5s ease; 
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); 
        margin: 10px;
        cursor: pointer;
    }
    .circle-icon.active {
        width: 160px; 
        height: 160px; 
        background-color:rgb(172, 47, 47);
        color: #fff; 
        box-shadow: 0 0 20px rgba(255, 255, 255, 0.8); 
    }
    .flex{
        justify-content: space-evenly;
    }
    .UserManualDownload{
        position: relative;
        overflow: hidden;
    }
    .userManuaTitle p{
        font-size: 2.5rem;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1px;
        text-align: left;
    }
    .userManuaContent{
        font-family: NotoSansCJKTC-Medium;
        font-size: 1.375rem;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.82;
        letter-spacing: 1.1px;
        text-align: left;
    }
    .UserManualDownloadAll{
        position: absolute;
        right: 4%;
        bottom: 20%;
        z-index: 1;
        width: 33%;
    }
    .userManuaPDF{
        width: 200px;
        height: 43px;
        padding: 5px 25px;
        border-radius: 20px;
    }
    .DownloadImg{
        display: none;
    }
    .DownloadImgWeb{
        display: block;
    }
    .functionTitle h2{
        margin-bottom: 0;
    }
    .watchFunctionImg Img{
        height: 249px;
        min-height: 0;
        border-radius: 35px;
    }
    .watchFunctionarrowSpace .MobileVersion{
        display: none;
    }
    .watchFunctionarrowSpace .IPad{
        display: block;
    }
    .functionTitleContent{
        margin-top: 3%;
        line-height: 1.82;
    }
    .watchFunctionImgAll{
       height: 33vh;
    }
    .watchFunctionAll{
        /* height: 725px; */
    }
    .functionContent{
        width: 65%;
    }
    .watchFunctionAll .arrow img{
        width: 70%;
    }
    .watchFunctionAll .left{
        left:5%;
    }
    .watchFunctionAll .right{
        right: -5%;
    }
    .watchFunctionAll .arrow{
        content: '';
        position: absolute;
        top:37%;
        cursor: pointer;
        z-index: 10;
        display: block;
    }
    #functionPHRight{
        display: none;
    }
    #functionPHLeft{
        display: none;
    }
    #functionIpadLeft{
        display: block;
        top: 60%;
    }
    #functionIpadRight{
        top: 60%;
        display: block;
    }
    .watchFunctionImg{
        margin: 0 10px;
    }
    .functionDeak1{
        box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.16);
    }
    .watchFunctionImgDesk{
        margin: 0 15px;
    }
    .functionTitleContentDesktop{
        margin-bottom: 37px;
    }
    .functionTitleDesk p{
        font-family: NotoSansCJKtc;
        font-size: 1.375rem;
        line-height: 1.82;
        letter-spacing: 1.1px;
        color: #707070;
    }
    .functionContentAllDesk p{
        font-family: NotoSansCJKtc;
        font-size: 1.375rem;
        font-weight: 600;
        line-height: 1.82;
        letter-spacing: 1.1px;
        text-align: justify;
        color: #707070;
    }
    .functionContentDesktop{
        display: flex;
        justify-content: center;
        text-align: center;
        width: 70%;
    }
    .SystemProcessMain .arrow img{
        width: 70%;
    }
    .SystemProcessMain .arrow{
        top: 65%;
    }
    .SystemProcessMain .left{
        left: 5%;
    }
    .SystemProcessMain .right{
        right: -5%;
    }
    .SystemProcessTitle{
        display: none;
    }
    .SystemProcessTitlePH{
        display: flex;
    }
    .SystemProcessTitlePH p {
        font-size: 1.375rem;
    }
    .ProcessContent{
        padding: 5% 10%;
    }
    .downloadTriangle{
        top: -7%;
        left: 14%;
    }
    .log-inTriangle{
        top: -7%;
        left: 47.3%;
    }
    .systemTriangle{
        top: -7%;
        left: 80.6%;
    }
    .partnerMain{
        padding: 0;
    }
    .partnerMainMobileVersion,.partnerMainTable {
        display: none;
    }
    .partnerMainDesk{
        display: block;
        position: relative;
    }
    .partnerMainDeskAll{
        position: absolute;
        top: 8%;
        right: 42%;
    }
    .partnerImgUnder img{
        max-height: 100vh;
        height: 500px;
    }
    .effect-fade01 {
        opacity: 0;
        transform: translate(0,100px);
        transition: 800ms all;
    }
    .effect-fade02 {
        opacity: 0;
        transform: translate(0,100px);
        transition: 1200ms all;
    }
    .effect-fade03 {
        opacity: 0;
        transform: translate(0,100px);
        transition: 1400ms all;
    }
    .effect-fade01.scrolled,
    .effect-fade02.scrolled,
    .effect-fade03.scrolled {
        opacity: 1;
        transform: translate(0,0);
    }
    .partnerImgDesk{
        display: flex;
        justify-content: center;
    }
    .partnerTitle h2{
        margin-bottom: 0;
    }
    .partnerImgDesk img {
        width:110px;
        height: 110px;
        margin: 10px;
    }
    .questionMainTitle h2{
        margin-top: 5%;
    }
    /* .questionMarquee img:nth-child(2){
        display: block;
    }
    .questionMarquee img:nth-child(1){
        display: none;
    } */
    /* .questionMarqueeImg{
        height: 245px;
    } */
    .questionMarquee img{
        width: 80%;
    }
    .answer{
        margin-top: 3%;
    }
    .QA3{
        height: 288px;
    }
    #productMain{
        display: none;
    }
    #product{
        display: block;
    }
    .footer{
        padding: 0;
    }
    .productLinkAll{
        background-color: #a5a5a5;
        height: 193px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .productLink:nth-child(1){
        margin: 0 0 0 7%;
    }
    .productLink:nth-child(2){
        margin: 7% 0 0 7%;
    }
    .productLink a {
        color: white;
        margin-right: 4%;
    }
    .productMain{
        font-family: HelveticaNeue-Regular;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
    }
    .companyAll{
        display: flex;
        flex-direction: column;
        height: 168px;
        justify-content: center;
    }
    .companyAll p{
        font-family: HelveticaNeue-Regular;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.72;
    }
    .company{
        display: flex;
    }
    .company p:nth-child(1){
        margin-right: 4%;
    }
    .company:nth-child(1){
        margin: 0 0 0 7%;
    }
    .company:nth-child(2){
        margin: 2% 0 0 7%;
    }
}
@media (min-width: 375px) and (max-width: 1279px) {
    .headerPH{
        top: 0 !important;
        width: 100.5vw;
    }
}
@media (min-width: 820px){
    .PcCarouselChartTitle{
        margin-top: 14% ;
        margin-bottom: -10%;
    }
    .mainAll .arrowSpace{
        max-height: 600px;
    }
    .PcCarouselChart{
        height: 760px;
    }
    #mainRightWed{
        right: 0%;
    }
    #mainLeftWed{
        left: 4%;
    }
    .successMain{
        left: 5.5%;
        top: 22%;
    }
    /* .questionMarqueeImg{
        height: 260px;
    } */
    .SystemProcessMain{
        height: 1250px;
    }
    .SystemProcessMain .arrow{
        top: 57%;
    }
}
@media (min-width:912px){
    .PcCarouselChartTitle{
        margin-top: 15%;
        margin-bottom: -6%;
    }
    .PcCarouselChart{
        height: 820px;
    }
    /* #content{
        margin-top: 119%;
    } */
    .successMain{
        left: 11.5%;
        top: 23%;
    }
    .mainAll .arrowSpace{
        max-height: 600px;
        margin-bottom: 6%;
    }
    #mainLeftWed{
        left: 3%;
    }
    .SystemProcessMainTitle{
        padding-top: 14%;
    }
    .SystemProcessMain .arrow{
        top: 56%;
    }
}
@media (min-width: 992px){
    .successBg{
        display: none;
    }
    .successMain{
        display: none;
    }
    .PcCarouselChartTitle{
        margin-top: 13%;
        margin-bottom: -23%;
    }
    /* .PcCarouselChartTitleRow{
        display: none;
    } */
    /* .PcCarouselChart{
        display: none;
    } */
    /* #mainRightWed,#mainLeftWed{
        display: none;
    } */
    /* #mainLeft, #mainRight{
        display: block;
    } */
    #mainLeftWed img,#mainRightWed img{
        width: 70%;
    }
    #mainRightWed{
        right: 1%;
    }
    .PcCarouselChartWeb{
        /* display: block; */
        height: auto;
        margin-top: 5%;
    }
    .mainAll .arrowSpace{
        height: auto;
        max-height: 100vh;
        margin-bottom: -7%;
    }
    .mainAll .arrowSpace .arrow{
        top: 50%;
    }
    .mainAll .arrowSpace .right{
        right: -3%;
    }
    .mainAll .arrowSpace .left{
        left: 4%;
    }
    /* .mainContentAllWeb{
        position: absolute;
        width: 47%;
        flex-direction: column;
        align-items: flex-start;
        top: 10%;
        right: -2%;
    } */
    /* .PcCarouselChartTitleWeb{
        display: block;
    } */
    /* .ContentWeb{
        display: block;
    } */
    /* .downloadWed{
        display: flex;
        margin-bottom: 40px;
    } */
    .ContentAllWeb{
        justify-content: flex-start;
    }
    .PcCarouselChart{
        height: 867px;
    }
    .mainTitleWeb{
        font-size: 3.75rem;
        line-height: 66px;
    }
    .mb{
        margin-bottom: 12px;
    }
    .mainTitleWeb:nth-child(2){
        font-size: 2.8125rem;
    }
    .Marquee{
        padding-left: 18%;
        width: 46%;
    }
    /* #content{
        margin-top: 108%;
    } */
    .ProductAdvantagesAll{
        padding: 13% 0;
    }
    .circle-icon{
        width: 165px; 
        height: 165px; 
    }
    .circle-icon.active{
        width: 185px; 
        height: 185px; 
        margin-right: 30px;
    }
    .AdvantagesImg{
        margin-bottom: 10%;
    }
    .AdvantagesTitle{
        margin-bottom: 5;
    }
    .UserManualDownloadAll{
        width: 30%;
    }
    .watchFunctionImgDesk{
        margin: 0 20px;
    }
    .watchFunctionImgAll{
        height: 40vh;
    }
    .watchFunctionImg{
        margin: 0 30px;
    }
    .watchFunctionAll .arrow{
        top: 40%;
    }
    .functionTitleContentDesktop{
        margin-bottom: 35px;
    }
    .watchFunctionImgDesk Img{
        height: 175px;
    }
    #functionIpadLeft{
        top: 70%;
    }
    #functionIpadRight{
        top: 70%;
    }
    .SystemProcessMainTitle h2{
        margin-bottom: 8%;
    }
    .downloadTriangle{
        top: -6%;
        left: 14.5%;
    }
    .log-inTriangle{
        top: -6%;
        left: 48%;
    }
    .systemTriangle{
        top: -6%;
        left: 81.5%;
    }
    .SystemProcessMain .arrow{
        top: 55%;
    }
    .SystemProcessMain .right{
        right: -2%;
    }
    /* .questionMarqueeImg{
        height: 320px;
    } */
    .questionMainContent{
        width: 70%;
    }
    .partnerTitle h2{
        margin-bottom: 5%;
    }
    .partnerMainDeskAll{
        right: 47%;
    }
    .partnerImgDesk img{
        width: 130px;
        height: 130px;
    }
    .productLink:nth-child(2){
        margin: 4% 0 0 7%;
    }
    
}
@media (min-width:1024px){
    /* .mainContentAllWeb{
        top: 12%;
        left: 56%;
    } */
    .ContentAllWeb{
        width: 50%;
        margin: auto;
    }
    .PcCarouselChartTitle{
        margin-bottom: -20%;
    }
    .mainAll .arrowSpace{
        max-height: 100vh;
        height: auto;
        margin-bottom: -6%;
    }
    .mainAll .arrowSpace .arrow{
        top: 50%;
    }
    .PcCarouselChartWeb{
        max-height: 100vh ;
        height: auto;
        margin-top: 5%;
    }
    #mainRightWed{
        right: 1%;
    }
    .cover{
        overflow: hidden;
    }
    .Marquee{
        width: 35%;
    }
    .AdvantagesSpaceTitle{
        margin-top: 1%;
    }
    .UserManualDownloadAll{
        width: 26%;
        right: 100px;
    }
    .MobileVersion{
        max-height: 100vh;
    }
    .watchFunctionAll .right{
        right: -3.5%;
    }
    .watchFunctionAll .left{
        left: 4%;
    }
    .watchFunctionImgAll{
       height: 295px;
    }
    .watchFunctionImgDesk Img{
        height: 192px;
    }
    .functionTitleContentDesktop{
        margin-bottom: 60px;
    }
    .watchFunctionImgMain{
        margin-bottom: 0;
    }
    .functionContent{
        margin-top: 5%;
    }
    .watchFunctionImg{
        margin: 0 26px;
    }
    .Functionspots{
        margin-top: 3%;
    }
    .SystemProcessMainTitle{
        padding-top: 15%;
    }
    .CPU{
        display: none;
    }
    .SystemContent.Ipad{
        display: block;
    }
    .SystemProcessTitlePH{
        margin-bottom: 6%;
    }
    .SystemContentIpadAll{
        display: flex;
        justify-content: center;
    }
    .SystemContentIpadContent p{
        font-family: NotoSansCJKTC-Regular;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.7;
        letter-spacing: normal;
        text-align: center;
        color: #707070;
    }
    .SystemContentIpadContent:nth-child(1){
        border-right: 1px solid #707070;
        padding-right: 5%;
    }
    .SystemContentIpadContent:nth-child(2){
        border-right: 1px solid #707070;
        padding: 0 5%;
    }
    .SystemContentIpadContent:nth-child(3){
        padding-left:5%;
    }
    .SystemProcessMain{
        height: 910px;
    }
    .ProcessContent{
        height: 220px;
        padding: 7% 10%;
    }
    .SystemProcessMain .arrow{
        top: 57%;
    }
    .downloadTriangle{
        top: -11%;
    }
    .log-inTriangle{
        top: -11%;
    }
    .systemTriangle{
        top: -11%;
        left: 81.2%;
    }
    .partnerImgUnder img{
        height: 725px;
    }
    .partnerMainDeskAll{
        top: 14%;

    }
    .questionMarquee{
        top: 6%;
    }
    .questionTitle{
        width: 24%;
    }
    .questionMarquee img{
        padding-left: 30%;
        width: 70%;
    }
    .answer{
        margin-top: 2%;
    }
}
@media (min-width:1280px){
    .headerMenu{
        padding: 0.0625rem 3.875rem;
    }
    .header_item{
        padding: 7% 0;
    }
    ._scrool{
        top: 0;
        width: 101vw;
    }
    .mainContentAllPH{
        width: 100%;
        height: 100vh;
        max-width: 100vw;
        max-height: 100vh;
    }
    .mainContentAllWeb {
        overflow: visible;
        display: flex;
        flex-direction: column;
        position: absolute;
        display: block;
        top: 17%;
        left: 62%;
        width: 100%;
        height: 100vh;
        max-width: 36vw;
        max-height: 64vh;
    }
    .ContentAllWeb{
        width: 100%;
        margin: auto;
    }
    .mainTitleWeb{
        font-family: NotoSansCJKTC-Bold;
        font-size: 5rem;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 2px;
    }
    .mainTitleWeb:nth-child(2){
        font-family: NotoSansCJKTC-Bold;
        font-size: 3.75rem;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: 1.5px;
    }
    .PcCarouselChartTitleWeb,.ContentWeb,.downloadWed{
        display: block;
    }
    .ContentAllWeb{
        width: 100%;
    }
    .mainAll .mainContentAllWeb .arrow{
        top: 50% !important;
    }
    #mainLeftWed{
        left: -167%;
    }
    #mainRightWed{
        right: 3%;
    }
    .mainAll .arrowSpace {
        margin-bottom: -7%;
    }
    .PcCarouselChart{
        display: none;
    }
    .PcCarouselChartWeb{
        display: block;
    }
    .PcCarouselChartTitleRow{
        display: none;
    }
    .mainContentAll{
        display: none;
    }
    .ContentAllIPad{
        display: none;
    }
    .PcCarouselChartWeb{
        object-fit: cover;
        margin-top: -7%;
        max-width: 100vw;
        max-height: 100vh;
        width: 100%;
        height: 100vh;
    }
    .PcCarouselChart{
        height: 100vh;
    }
    .ContentWeb p{
        font-family: NotoSansCJKTC-Bold;
        font-size: 1.375rem;
        line-height: 38px;
        letter-spacing: 1.1px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.73;
        letter-spacing: 1.1px;
    }
    /* #content{
        margin-top: 83%;
    } */
    .mb{
        margin-bottom: 20px;
    }
    .Marquee{
        width: 27%;
        padding-left: 20%;
    }
    .AdvantagesSpaceTitle{
        margin-top: -3%;
        margin-bottom: 10%;
    }
    .AdvantagesSpaceTitle h2{
        font-size: 3.125rem;
        line-height: 90px;
        margin-bottom: 1%;
    }
    .AdvantagesSpaceTitle p{
        font-size: 1.875rem;
    }
    .AdvantagesImg{
        display: none;
    }
    .AdvantagesSpaceAll{
        max-height: 100vh;
        height: 30vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction:row
    }
    .AdvantagesTitle{
        white-space: nowrap;
        padding-bottom: 0%;
        font-family: NotoSansCJKtc;
        font-size: 1.875rem;
        line-height: 45px;
        letter-spacing: 0.75px;
        font-stretch: normal;
        font-style: normal;
        text-align: left;
        margin-bottom: 3%;
    }
    .AdvantagesSpace{
        display: flex;
        align-items: center;
        margin-bottom: 0%;
    }
    .AdvantagesContent{
        text-align: justify;
    }
    .AdvantagesSpace p{
        font-family: NotoSansCJKtc;
        font-size: 1.375rem;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.62;
        letter-spacing: 1.1px;
        text-align: left;
    }
    .Status1{
        display: block;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        box-shadow: 5px 5px 20px 0 rgba(0, 0, 0, 0.16);
        margin:10px 15px;
    }
    .Status2 {
        display: block;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        margin:10px 25px;
    }
    .hidden{
        display: none;
    }
    .AdvantagesContentAll {
        display: none;
        flex-direction: column;
        align-items:flex-start;
        text-align: center;
    }
    .AdvantagesContentAll.active {
        display: flex;
    }
    .downloadWed{
        font-size: 1.25rem;
        font-family:NotoSansCJKtc;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.45;
        letter-spacing: normal;
        text-align: left;
        color: #fff;
        width: 250px ;
        height: 29px;
        padding: 13px 11px;
        margin-bottom: 20px;
        text-align: center;
    }
    .ContentTitleWeb{
        width: 180px ;
    }
    .ContentTitleWeb p{
        font-family: NotoSansCJKtc;
        font-size: 1.625rem;
        font-weight: 500;
        line-height: 1.46;
        letter-spacing: 1.3px;
        padding-right: 0;
        display: block;
        color: black;
    }
    .ContentTitleWeb .active p{
        color: white !important;
        background-color: black;
    }
    .TitleWeb{
        width: 179px;
        height: 42px;
    }
    .ContentTitleWeb span{
        font-size: 1.5625rem;
    }
    .ProductAdvantagesAll{
        padding: 10% 0;
    }
    .downloadAll{
        display: none;
    }
    .AdvantagesContentAll.active{
        margin-right: 60px;
    }
    .UserManualDownloadAll{
        width: 24%;
        bottom: 27%;
    }
    .userManuaTitle p{
        font-size: 3.125rem;
    }
    .userManuaContent p{
        font-size: 1.875rem;
    }
    .userManuaPDF{
        width: 215px;
        height: 55px;
    }
    .userManuaPDF a{
        font-size: 1.25rem;
    }
    .watchFunctionAll{
        padding: 10% 0 10% 0 ;
    }
    .functionTitle h2{
        font-family: NotoSansCJKtc;
        font-size: 3.125rem;
        font-weight: bold;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.48;
        letter-spacing: 1px;
    }
    .functionTitleDesk p{
        font-size: 1.875rem;
    }
    .functionContentAllDesk p{
        font-family: NotoSansCJKTC-Regular;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.82;
        letter-spacing: 1.1px;
        text-align: center;
    }
    .watchFunctionImgDesk Img{
        height: 250px;
        border-radius: 33px;
    }
    .functionTitleContentDesktop{
        margin-bottom: 0;
    }
    .watchFunctionImgAllDesktop{
        max-height: 100vh;
        height: 46vh;
    }
    .functionTitleDesk{
        margin-top: 2%;
    }
    .Functionspots{
        margin-top: -2%;
    } 
    .MobileVersion{
        display: none;
    }
    .Desktop{
        display: block;
        position: relative;
    }
    .functionDeak1{
        box-shadow: 0 0 15px 0 rgba(0,0,0,0.16);
    }
    .watchFunctionAll .arrow{
        bottom: 53.5%;
    }
    .watchFunctionAll .right{
        right: 1%;
    }
    .watchFunctionAll .left{
        left: 3%;
    }
    .Functionspots .CarouselChart-spotsDesk{
        margin: 2% 1% 0 2%;
    }
    .SystemContent.Ipad{
        display: none;
    }
    .SystemProcessTitlePH{
        margin-bottom: 3%;
    }
    .SystemProcessTitlePH p{
        font-family: NotoSansCJKtc;
        font-size: 1.875rem;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: 0.75px;
    }
    .SystemProcessSpots{
        cursor: pointer;
    }
    .SystemProcessMain .arrow{
        top: 66%;
    }
    .SystemProcessMain .left{
        left: 6%;
    }
    .SystemProcessMain .right{
        right: 0;
    }
    .partnerImgUnder img{
        height: 100vh;
    }
    .partnerMainTable{
        display: block;
    }
    .SystemProcessMainTitle h2{
        font-size: 3.125rem;
    }
    .SystemProcessMain{
        height: 930px;
    }
    .SystemProcessMainTitle{
        padding-top: 20%;
    }
    .downloadTriangle{
        top: -15%;
        left: 14.7%;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-bottom: 42px solid white;
    }
    .log-inTriangle{
        top: -15%;
        left: 48%;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-bottom: 42px solid white;
    }
    .systemTriangle{
        top: -15%;
        left: 81.5%;
        border-left: 18px solid transparent;
        border-right: 18px solid transparent;
        border-bottom: 42px solid white;
    }
    .SystemContent{
        color: #707070;
        margin-bottom: 1%;
    }
    .ProcessContent{
        height: 273px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border-radius: 62px;
    }
    .SystemContent p{
        font-family: NotoSansCJKtc;
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.45;
        letter-spacing: normal;
    }
    .SystemContentAll{
        width: 82%;
        margin: auto;
    }
    .SystemContent .Ipad{
        display: none;
    }
    .table{
        display: block;
    }
    .SystemContentAllPH{
        display: none;
    }
    .custom-table {
        font-size: 1.375rem;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.45;
        letter-spacing: normal;
        width: 90%;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }
    .custom-table td{
        padding: 7px;
    }
    .custom-table td, .custom-table th {
        border-left: 1px solid black; 
        border-right: 1px solid black;
        border-bottom: 1px solid black;
    }
      
    .custom-table tr:last-child td {
        border-top: none;    
        border-bottom: none;
    }
    .partnerMainDeskAll{
        top: 17%;
        right: 38%;
    }
    .partnerTitle h2{
        margin-bottom: 6%;
        font-size: 3.125rem;
    }
    .partnerImgDesk img{
        width: 161px;
        height: 161px;
    }
    .partnerMainIpad{
        display: none;
    }
    .questionMainTitle h2{
        margin-top: 0%;
        font-size: 3.125rem;
        margin-bottom: 8%;
    }
    .questionMarquee{
        top: 4%;
    }
    .questionMarquee img{
        padding-left: 50%;
        width: 50%;
    }
    .questionTitle{
        width: 25%;
    }
    .questionTitle h3{
        font-size: 1.875rem;
        font-weight: 500;
    }
    .questionListContent{
        width: 90%;
    }
    .questionTitle p{
        font-size: 1.875rem;
    }
    .questionList{
        font-size: 1.375rem; ;
    }
    .questionListIcon{
        width: 38px ;
        height: 38px;
    }
    .questionListBorder1{
        width: 22px;
    }
    .questionListBorder2{
        width: 22px;
    }
    .answer{
        margin-top: 1%;
    }
    .Top{
        bottom: 10%;
    }
    .footer{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        height: 268px;
        font-family: HelveticaNeue;
        font-size: 1.125rem;
        letter-spacing: 0.9px;
    }
    .productLinkAll{
        width: 65%;
        background-color: #707070;
    }
    .companyAll{
        width: 35%;
    }
    .company{
        display: block;
    }
    .company:nth-child(2){
        margin-top: 0;
    }
    .ContentTitleWeb .TitleWeb{
        display: flex;
        align-items: center;
    }
    .ContentTitleWeb .TitleWeb span{
        margin: 0 20px 0 10px;
        visibility: visible;
    }
    .ContentTitleWeb .TitleWeb p{
        visibility: hidden;
    }
    .ContentTitleWeb .active {
        color: white;
        background-color: black;
    }
    .ContentTitleWeb .active span{
        visibility: visible;
    }
    .ContentTitleWeb .active p{
        visibility: visible;
    }
}
@media (min-width:1580px){
    .mainContentAllPH{
       display: block;
       margin-top: 29%;
       height: 100vh;
    }
    .mainAll .arrowSpace{
        max-height: 50vh;
    }
    #mainRightWed{
        right: 8%;
    }
    #mainLeftWed{
        left: -182%;
    }
    .PcCarouselChartWeb{
        max-width: 100vw;
        max-height: 112vh;
        height: 112vh;
        margin-top: 12%;
        width: 100%;
    }
    .mainContentAllWeb{
        top: 22%;
        left: 66%;
        max-width: 34vw;
    }
    .mainAll .arrowSpace .right{
        right: 0%;
    }
    .UserManualDownloadAll{
        width: 27%;
        bottom: 30%;
    }
    .watchFunctionAll .arrow{
        top: 37%;
    }
    .mainAll .arrowSpace .arrow{
        top: 90%;
    }
    #content{
        margin-top: -19%;
    }
    .downloadWed{
        margin-bottom: 60px;
    }
    .Status2{
        margin: 10px 40px;
    }
    .watchFunctionAll .right{
        right: 7%;
    }
    .watchFunctionAll .left{
        left: 9%;
    }
    .watchFunctionImgAllDesktop{
        height: 45vh;
    }
    .functionTitleContentDesktop{
        margin-bottom: 15px;
    }
    .Functionspots{
        margin-top: 0%;
    }
    .SystemProcessMain .arrow{
        top: 67%;
    }
    .downloadTriangle{
        top: -15%;
        left: 15%;
    }
    .SystemProcessMain{
        height: 860px;
    }
    .SystemProcessMainTitle{
        padding-top: 12%;
    }
    .SystemProcessMain .right{
        right: 1%;
    }
    .log-inTriangle{
        top: -15%;
        left: 48.5%;
    }
    .systemTriangle{
        top: -15%;
        left: 81.8%;
    }
    .QA1{
        height: 200px;
    }
    .partnerTitle h2{
        margin-bottom: 2%;
    }
    .partnerMainDeskAll{
        right: 40%;
    }
    .partnerImgDesk img{
        width: 180px;
        height: 180px;
        margin: 20px;
    }
    .questionMain{
        padding-bottom: 10%;
    }
    .questionTitle{
        width: 20%;
    }
    .questionList{
        margin-bottom: 4%;
    }
    .QA3{
        height: 250px;
    }
    .productLinkAll{
        width: 52%;
    }
    .companyAll{
        width: 30%;
    }
}
@media (min-width:1780px) {
    .PcCarouselChartWeb{
        margin-top: 22%;
    }
    .mainContentAllPH{
        margin-top: 23%;
    }
    .mainContentAllWeb{
        left: 66%;
        top: 16%;
    }
    #mainLeftWed{
        left: -180%;
    }
    #mainRightWed{
        right: 10%;
    }
    .mainContentAllPH{
        max-height: 51vh;
    }
    .mainAll .arrowSpace .arrow{
        top: 110%;
    }
    .downloadWed{
        margin-bottom: 9%;
    }
    #content{
        margin-top: 7%;
    }
    .UserManualDownloadAll{
        width: 20%;
        right: 11%;
        bottom: 35%;
    }
    .SystemProcessMainTitle h2{
        margin-bottom: 5%;
    }
    .SystemProcessMain .arrow{
        top: 66%;
    }
    .downloadTriangle{
        top: -15%;
        left: 15.3%;
    }
    .log-inTriangle{
        top: -15%;
        left: 48.6%;
    }
    .systemTriangle{
        top: -14%;
        left: 82%;
    }
    .SystemProcessMain .right{
        right: 2%;
    }
    .partnerMainDeskAll{
        right: 44%;
    }
    .questionTitle{
        width: 18%;
    }
    .QA1{
        height: 205px;
    }
    .productLinkAll{
        width: 45%;
    }
    .companyAll{
        width: 25%;
    }
}
@media (min-width:1880px) {
    .mainContentAllWeb{
        left: 65%;
        top: 17%;
    }
    .mainAll .arrowSpace{
        max-height: 54vh;
    }
    #mainLeftWed{
        left: -180%;
    }
    .mainContentAllPH{
        margin-top: 21%;
        max-height: 57vh;
    }
    /* .PcCarouselChartWeb{
        max-height: 102vh;
    } */
    .PcCarouselChartWeb{
        margin-top: 20%;
    }
    .PcCarouselChartWeb{
        max-height: 103vh;
        height: 103vh;
    }
    .log-inTriangle{
        top: -14%;
        left: 48.7%;
    }
    .systemTriangle{
        top: -13%;
        left: 82%;
    }
    .SystemProcessMain .arrow{
        top: 68%;
    }
    .questionTitle{
        width: 17%;
    }
}

.ContentAllWeb {
    display: flex;
    align-items: start;
    min-width: 480px;
    min-height: 220px;
}

.mainContentPH {
    min-height: 170px;
    justify-content: center;
}

.spots {
    display: none;
}