@media only screen and (max-width: 1366px) {

}

.home .sec01 .flex-wrap{
    flex-wrap: nowrap;
}

.home .sec01 .right-box{
    width: calc(100% - 530px);
    height: 663px;
    margin-right: -20px;
}

.home .sec01 .right-box .imagepc{
    width: 100%;
    height: 663px;
    text-align: right;
}

.home .sec01 .right-box .imagepc img{
    /* width: 100%; */
    height: 100%;
    object-fit: cover;
}

@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 1024px) {
    .home .sec01 {
        height: 530px;
    }
    .home .sec01 .left-box {
        height: 530px;
        width: 480px;
        padding: 151px 9px 51px 46px;
    }
    .home .sec01 .right-box {
        height: 530px;
        padding-top: 27px;
        width: 482px;
    }
    .title-h1 {
        font-size: 32px;
    }
    .home .sec01 .desc p {
        font-size: 13px;
    }
    .home .sec01 .btn {
        width: 240px;
        height: 50px;
    }
    .sec02 .left-box {
        width: 440px;
    }
    .sec02 .flex-2 {
        padding: 70px 50px;
    }
    .sec02 .right-box {
        width: 425px;
    }
    .title-h2 {
        font-size: 26px;
    }
    .home .sec02 .desc p {
        font-size: 12px;
    }
    .sec02 .title-h2 {
        margin-bottom: 16px;
    }
    .sec03 .flex-2 {
        padding: 88px 32px 88px 59px;
        gap: 40px;
    }
    .sec03 .btn {
        padding: 8px 12px;
        margin-right: 8px;
    }
    .sec03 .left-box {
        width: 432px;
    }
    .sec03 .right-box {
        width: 445px;
    }
    .sec03 .info {
        padding: 37px 0px 16px 47px;
    }
    .sec03 .user-comment p {
        font-size: 14px;
    }
    .home .sec01::after {
        width: 53.2%;
    }
    .home .sec04 .service {
        width: 272px;
    }
    .sec04 .flex-3 {
        padding-bottom: 60px;
    }
    .sec05 .bot-05 .list-bot05 {
        grid-column-gap: 24px ;
    }
    /* .sec05 .botright-05 img {
        width: calc(459px*0.8) ;
        height: calc(290px*0.8) ;
    } */
}
@media only screen and (max-width:768px) {
    
    .home .sec01 {
        height: 465px;
    }
    .home .sec01 .left-box {
        height: 465px;
        width: 362px;
        padding: 131px 9px 51px 28px;
    }
    .home .sec01 .right-box {
        height: 465px;
        padding-top: 90px;
        width: 359px;
    }
    .title-h1 {
        font-size: 28px;
    }
    .home .sec01 .desc p {
        font-size: 12px;
    }
    .home .sec01 .desc {
        padding-bottom: 18px;
    }
    .home .sec01 .btn {
        width: 240px;
        height: 50px;
    }
    .home .sec01 h1 {
        padding-bottom: 0px;
    }
    .sec02 .flex-2 {
        padding: 70px 29px 70px 23px;
    }
    .sec02 .left-box {
        width: 356px;
        padding-top: 56px;
    }
    .sec02 .right-box {
        width: 320px;
        padding-top: 12px;
    }
    .title-h2 {
        font-size: 20px;
        line-height: 30px;
    }
    .home .sec02 .desc p {
        font-size: 12px;
    }
    .sec02 .title-h2 {
        margin-bottom: 8px;
    }
    .sec03 .flex-2 {
        padding: 88px 8px 88px 46px;
        gap: 12px;
    }
    .sec03 .left-box {
        width: 344px;
    }
    .sec03 .right-box {
        width: 344px;
    }
    /* .sec03 .btn {
        padding: 6px 8px;
        font-size: 14px;
    } */
    .sec03 .info p {
        font-size: 12px;
    }
    .sec03 .info {
        padding: 18px 0px 16px 28px;
    }
    .sec03 .user-comment {
        padding: 14px 0px 14px 24px;
    }
    .home .sec03 .name {
        padding: 0px 50px 0px 12px;
    }
    .sec03 .user-comment  p {
        font-size: 12px;
    }
    .flatform {
        font-size: 19px;
    }
    .home .sec04 .service {
        width: 206px;
    }
    .sec04 .flex-3 {
        padding-bottom: 90px;
    }
    .sec05 .botleft-05 {
        max-width: 320px;
    }
    .sec05 .box {
        padding: 0px 24px;
    }
    .slick-next i {
        width: 36px;
        height: 36px;
    }
    /* .sec05 .botright-05 img {
        width: calc(459px*0.7);
        height: calc(290px*0.7);
    } */
    .sec05 .bot-05 .list-bot05 {
        grid-column-gap: 15px;
    }
    .sec05 .topleft-05 h2 {
        font-size: 32px;
    }
    .sec05 .botleft-05 h4 {
        font-size: 20px;
    }
    .sec06 .flex-02 {
        padding: 0px 34px 56px 34px;
    }
    .sec05 .list-bottom {
        margin-bottom: -70px;
    }
    .sec06 h2 {
        padding-top: 40px;
    }
}
@media only screen and (max-width:736px) {
    .home .sec01 .right-box{
        width: 100%;
        height: auto;
    }
    
    .home .sec01 .right-box .imagepc{
        height: auto;
    }
}
@media only screen and (max-width:684px) {
   
}
@media only screen and (max-width: 668px) {
  
}
@media only screen and (max-width: 601px) {
    .banner-desktop{
        display: none;
    }
    .banner-375 {
        display: block;
    }
    .platform-item img {
        height: 38px;
    }
    .popup .flex-2 {
        /* padding-left: 0px; */
        flex-wrap: wrap;
    }
    .home .sec01::after {
        content: unset;
    }
    .sec01 > .container > .flex-2 {
        flex-direction: column-reverse;
    }
    .header_top_icon {
        display: block !important;
    }
    header .menu ul {
        display: none;
    }
    header .logo {
        padding-left: 10px;
    }
    .home .sec01 {
        height: 100%;
    }
    .home .sec01 .left-box {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 80px 28px 51px 28px;
    }
    .sec01 .title-h1 {
        text-align: center;
    }
    .home .sec01 .right-box {
        width: 100%;
        padding-top: 0px;
    }
    .sec01 .logo {
        display: none;
    }
    .home .sec01 .right-box {
        background: var(--yellow);
        height: 100%;
    }
    .sec01 .logo-white {
        position: absolute;
        top: 24px;
        left: 24px;
        display: block;
    }
    .title-h1 {
        font-size: 34px;
    }
    .home .sec01 .desc {
        display: none;
    }
    .home .sec01 .desc-2 {
        display: block;
    }
    .home .sec01 .desc-2 p {
        font-size: 22px;
        text-align: left;
        padding: 24px 0px;
    }
    .sec02 .left-box { 
        width: 100%;
        text-align: center;
    }
    .sec02 .right-box {
        width: 100%;
    }
    .title-h2 {
        font-size: 35px;
    }
    .sec02 .point {
        font-size: 32px;
        padding-bottom: 12px;
        padding-top: 28px;
    }
    .home .sec02 .desc p {
        font-size: 14px;
        line-height: 28px;
        font-weight: 500;
    }
    .sec02 .title-h2 {
        margin-bottom: 28px;
        line-height: 60px;
    }
    .sec03 h3 {
        padding-top: 28px;
    }
    .sec03 .title-h2 {
        margin-top: 0 !important;
    }
    .sec03 .flex-2 {
        flex-direction: column-reverse;
    }
    .sec03 .left-box {
        width: 100%;
    }
    .sec03 .right-box {
        width: 100%;
        /* padding-right: 30px; */
    }
    /* .sec03 .btn {
        padding: 6px 20px;
    } */
    .sec03 .desc p {
        font-size: 14px;
        line-height: 28px;
    }
    .sec04 .flex-3 {
        flex-direction: column;
        padding-bottom: 40px;
        gap: 0px;
    }
    .home .sec04 .service {
        width: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin-bottom: 48px;
    }
    .home .sec04 .service:last-child{
        margin-bottom: 0;
    }
    .sec04 .service img {
        width: calc(226.48px*1.2);
        height: calc(236px*1.2);
        margin-bottom: 24px;
    }
    .sec04 {
        padding: 0px 24px;
    }
    .sec04 .service .desc p {
        height: auto;
        font-size: 14px;
        line-height: 28px;
        /* height: 180px; */
    }
    .sec03 {
        height: 100%;
    }
    .sec04 .title-h4 {
        font-size: 30px;    
        margin-bottom: 16px;
        padding-bottom: 0;
        /* padding-bottom: 36px; */
    }
    .sec04-title {
        align-items: flex-start;
        display: block;
    }
    .home .sec04 .btn {
        width: 400px;
        font-size: 16px;
    }
    .sec03 .flex-2 {
        padding: 88px 24px 88px 24px;
    }
    .sec03 .tabs {
        justify-content: flex-start;
    }
    .sec06 .flex-02 {
        padding: 15px 34px 56px 34px;
    }
    .sec06-iteminfo p {
        font-size: 22px;
        padding-bottom: 16px;
    }
    .sec05 .botleft-05 p {
        font-size: 18px;
    }
    .sec06-iteminfo p {
        padding-top: 20px;
        font-size: 32px;
        padding-bottom: 16px;
    }
}
@media only screen and (max-width: 568px) {
    .sec06-iteminfo .btn-info a {
        padding: 12px 0px;
        font-size: 15px;
        max-width: 272px;
        width: 100%;
        display: block;
        height: 50px;
    }
}
@media only screen and (max-width: 480px) {
    .sec03 .desc p {
        font-size: 14px;
    }
    .platform-item img {
        height: 36px;
    }
    .popup-title {
        font-size: 22px;
    }
    .platform-item p {
        font-size: 14px;
        padding: 0px 10px 0px 9px;
    }
    /* .home .sec02 .desc p {
        line-height: 44px;
    } */
    .sec03 .title-h2 {
        font-size: 29px;
    }
    .sec04 .title-h2 {
        line-height: 54px;
    }
    .sec03 .user-comment p {
        font-size: 14px;
    }
    .home .sec03 .name {
        padding: 0px 34px 0px 9px;
    }
    .sec03 .tab-scroll {
        overflow: scroll;
        
    }
    .sec03 .tabs {
        /* width: 138%; */
    }
    .title-h1 {
        font-size: 32px;
    }
    .home .sec01 .desc-2 p {
        font-size: 20px;
    }
    .sec02 .title-h2 {
        font-size: 30px;
    }
    .home .sec02 .desc-2 p {
        font-size: 20px;
    }
    .sec04 .title-h2 {
        font-size: 32px;
    }
    .sec04 .title-h4 {
        font-size: 29px;
    }
    .sec04 .service .desc p {
        /* font-size: 19px; */
    }
}
@media only screen and (max-width: 414px) {
    /* .sec03 .desc p {
        font-size: 13px;
    } */
    .platform-item p {
        font-size: 14px;
    }
    .platform-item img {
        height: 36px;
    }
    .popup-title {
        font-size: 21px;
    }
    /* .sec04 .service-last {
        margin-top: -50px;
    } */
    
    .home .sec04 .btn {
        width: 272px;
        font-size: 14px;
    }
    .sec03 .tabs {
        /* width: 145%; */
    }
    .title-h1 {
        font-size: 30px;
    }
    .home .sec01 .desc-2 p {
        font-size: 21px;
    }
    .home .sec01 .left-box {
        padding: 56px 28px 32px 28px;
    }
    .home .sec01 .btn {
        width: 294px;
        height: 54px;
        font-size: 20px;
    }
    .sec02 .title-h2 {
        line-height: 54px;
        font-size: 26px;
    }
    /* .sec02 .point { 
        font-size: 28px;
    } */
    .point { 
        font-size: 28px;
    }
    .home .sec02 .desc p {
        /* font-size: 19px; */
        /* line-height: 40px; */
    }
    .sec03 .flex-2 {
        padding: 88px 24px 88px 28px;
    }
    .sec03 .right-box {
        padding-right: 0px;
    }
    .sec04-title {
        padding-top: 60px;
    }
    .banner-desktop {
        display: none;
    }
    /* .sec01 .logo-white {
        display: none;
    } */
    .title-h1 {
        font-size: 24px;
        line-height: 40px;
    }
    .home .sec01 .desc-2 p {
        font-size: 14px;
        line-height: 28px;
    }
    .home .sec01 .btn {
        width: 272px;
        height: 50px;   
        font-size: 14px;
    }
    .home .sec01 .desc-2 p {
        padding: 16px 0px 24px 0px;
    }
    .home .sec01 .left-box {
        height: 388px;
    }
    .sec02 .left-box {
        padding-top: 72px;
    }
    .sec02 .flex-2 {
        padding: 0px 24px 92px 24px;
    }
    .sec02 .point {
        font-size: 16px;
        padding-bottom: 12px;
    }
    .sec02 .title-h2 {
        font-size: 24px;
        line-height: 44px;
        padding-bottom: 0px;
    } 
    .home .sec02 .desc p {
        font-size: 14px;
        line-height: 28px;
        font-weight: 500;
    }
    .sec03 .user-comment p {
        font-size: 12px;
    }
    .point {
        font-size: 24px;
    }
    .sec03 .title-h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec04 .title-h2 {
        line-height: 48px;
        font-size: 30px;
    }
    .sec04 .title-h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec04 .title-h4 {
        font-size: 20px;
        line-height: 24px;
        /* padding-bottom: 24px; */
    }
    .sec04 .service .desc p {
        font-size: 14px;
        /* line-height: 36px; */
    }
    .sec04 .flex-3 {
        gap: 0px;
        /* padding-bottom: 24px; */
    }
    .sec05 .flex-02 .topleft-05 h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec05 .point {
        font-size: 16px;
        padding-bottom: 12px;
    }
    .sec05 .topright-05 ul li {
        padding: 6px 42px;
    }
    .slick-next i {
        width: 42px;
        height: 42px;
    }
    .slick-next {
        top: 50%;
        margin-top: -60px;
        right: 10px;
    }
    .sec05 .botleft-05 h4 {
        font-size: 20px;
    }
    .sec05 .botleft-05 p {
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
    }
    .sec06 h2 {
        font-size: 28px;
    }
    .sec06-iteminfo h3 {
        font-size: 15px;
    }
    /* .sec06-iteminfo .btn-info {
        padding: 0px 26px;
    } */
}
@media only screen and (max-width: 384px) {
    
}
@media only screen and (max-width:375px) {
    /* .sec03 .desc p {
        font-style: 13px;
    } */
    .platform-item img {
        height: 32px;
    }
    .platform-item p {
        padding: 0px 8px 0px 6px;
        font-size: 13px;
    }
    .popup-title {
        font-size: 18px;
    }
    .sec03 .tabs {
        /* width: 163%; */
    }
    .banner-desktop {
        display: none;
    }
    .banner-375 {
        display: block;
    }
    /* .sec01 .logo-white {
        display: none;
    } */
    .title-h1 {
        font-size: 24px;
        line-height: 40px;
    }
    .home .sec01 .desc-2 p {
        font-size: 14px;
        line-height: 28px;
    }
    .home .sec01 .btn {
        width: 272px;
        height: 50px;   
        font-size: 14px;
    }
    .home .sec01 .desc-2 p {
        padding: 16px 0px 24px 0px;
    }
    .home .sec01 .left-box {
        height: 388px;
    }
    .sec02 .left-box {
        padding-top: 72px;
    }
    .sec02 .flex-2 {
        padding: 0px 29px 92px 23px;
    }
    .sec02 .point {
        font-size: 16px;
        /* padding-bottom: 8px; */
    }
    .sec02 .title-h2 {
        font-size: 24px;
        line-height: 44px;
        padding-bottom: 0px;
    } 
    .home .sec02 .desc p {
        font-size: 14px;
        font-weight: 500;
    }
    .sec03 .user-comment p {
        font-size: 12px;
    }
    .point {
        font-size: 24px;
    }
    .sec03 .title-h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec04 .title-h2 {
        line-height: 48px;
        font-size: 30px;
    }
    .sec04 .title-h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec04 .title-h4 {
        font-size: 20px;
        line-height: 24px;
    }
    .sec04 .service .desc p {
        font-size: 14px;
        /* line-height: 36px; */
    }
    .sec04 .flex-3 {
        gap: 0px;
        /* padding-bottom: 24px; */
    }
    .sec05 .flex-02 .topleft-05 h2 {
        font-size: 24px;
        line-height: 44px;
    }
    .sec05 .point {
        font-size: 16px;
    }
    .sec05 .topright-05 ul li {
        padding: 6px 42px;
    }
    .slick-next i {
        width: 42px;
        height: 42px;
    }
    .slick-next {
        /* top: 172px; */
        right: 10px;
    }
    .sec05 .botleft-05 h4 {
        font-size: 20px;
    }
    .sec05 .botleft-05 p {
        font-weight: 400;
        font-size: 14px;
        line-height: 28px;
    }
    .sec06 h2 {
        font-size: 28px;
    }
    .sec06-iteminfo h3 {
        font-size: 15px;
    }
    /* .sec06-iteminfo .btn-info {
        padding: 0px 26px;
    } */
}
@media only screen and (max-width: 320px) {
    footer ul a {
        font-size: 10px;
    }
    .platform-item img {
        height: 24px;
    }
    .platform-item p {
        padding: 0px 7px 0px 7px;
        font-size: 11px;
    }
    .popup-title {
        font-size: 16px;
    }
    .flatform {
        font-size: 18px;
    }
    /* .sec03 .tabs { */
        /* width: 247%; */
    /* } */
    /* .sec03 .btn {
        padding: 6px 38px;
    } */
    .sec03 .username {
        padding-right: 55px;
    }
    .home .sec03 .name {
        padding: 0px 15px 0px 8px;
    }
    .sec03 .user-comment {
        padding: 14px 0px 14px 15px;
    }
    .sec03 .user-comment p {
        font-size: 10px;
    }
    .sec03 .flex-2 {
        padding: 88px 24px 88px 22px;
    }
    .slick-next {
        right: 8px;
        /* top: 144px; */
    }
    /* .sec05 .botright-05 img {
        height: calc(290px*0.6) !important;
    } */
}