@media only screen and (min-width:1600px) {
    html{
        font-size: 13px;

    }
    .partnerList .partnerRow:nth-child(3n-2) {
        animation: infinity-loop 60s infinite linear 0s both; 
    }

    .partnerList .partnerRow:nth-child(3n-1) {
        animation: infinity-loop 50s infinite linear 0s both; 
    }
    .partnerList .partnerRow:nth-child(3n) {
        animation: infinity-loop 70s infinite linear 1s both; 
    }
}

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


    html {
        font-size: 12px;
    }
    
    
    .popupItem[data-popup="workDetail"] .popup-cont .infoBox{
        position: unset;
        width: 100%;
        height: unset;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .infoBox > .wrap{
        margin-top: unset;
        padding: 50px 20px;
        transform: unset;
        margin-left: 0;
        max-width: unset

    }
    .popupItem[data-popup="workDetail"] .popup-cont .infoBox .infoTable{
        margin-top: 40px;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .imgList{
        width: 100%;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .imgList .imgItem{
        min-height: fit-content !important;
        text-align: center;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .imgList .imgItem img,
    .popupItem[data-popup="workDetail"] .popup-cont .imgList .imgItem:first-child img{
        position: unset;
        height: auto;
        width: 100%;
        transform: unset;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .imgList .imgItem:first-child{
        background-color: #111;
    }

}



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


    html {
        font-size: 11px;
    }

}


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


    html {
        font-size: 10px;
    }
}





@media only screen and (max-width:800px)  and (min-width:1080px){
    /* body.fp-viewing- .fContent.cont_service .serviceList .serviceItem:nth-child(3),
    body.fp-viewing-service .fContent.cont_service .serviceList .serviceItem:nth-child(3),
    body.fp-viewing-servconfluenceice .fContent.cont_service .serviceList .serviceItem:nth-child(3){margin-top: 60px}
    body.fp-viewing- .fContent.cont_service .serviceList .serviceItem:nth-child(6),
    body.fp-viewing-service .fContent.cont_service .serviceList .serviceItem:nth-child(6),
    body.fp-viewing-confluence .fContent.cont_service .serviceList .serviceItem:nth-child(6){margin-top: -100px} */
}

@media only screen and (min-width:1080px) {
    
    body.fp-viewing-business header,
    body.fp-viewing-partners header,
    body.fp-viewing-service header {
        background-color: rgba(255,255,255,0.2);
    }
    body.fp-viewing-service header {
        background-color: rgba(255,255,255,0.2);
        color: #000;
    }
    body.fp-viewing-service header .btn.btn-line{border-color:#1c1c24;color: #1c1c24;}
    body.fp-viewing-service header .btn.btn-fill{background-color:#1c1c24 ;color: #fff;} 
    body.fp-viewing-service header .menu_wrap .menuBox .menuItem:after{background-color: #1c1c24;}


    header:hover {
        background-color: rgb(255, 255, 255,1) !important;
    }
    header:hover .menu_wrap .menuBox .menuItem:after {
        background-color: #fff !important;
    }
/* 
    body.fp-viewing- .fContent.cont_service .serviceList .serviceItem:nth-child(3),
    body.fp-viewing-service .fContent.cont_service .serviceList .serviceItem:nth-child(3),
    body.fp-viewing-confluence .fContent.cont_service .serviceList .serviceItem:nth-child(3){margin-top: 60px;}
    body.fp-viewing- .fContent.cont_service .serviceList .serviceItem:nth-child(5),
    body.fp-viewing-service .fContent.cont_service .serviceList .serviceItem:nth-child(5),
    body.fp-viewing-confluence .fContent.cont_service .serviceList .serviceItem:nth-child(5){margin-top: -100px;}
    body.fp-viewing- .fContent.cont_service .serviceList .serviceItem:nth-child(7),
    body.fp-viewing-service .fContent.cont_service .serviceList .serviceItem:nth-child(7),
    body.fp-viewing-confluence .fContent.cont_service .serviceList .serviceItem:nth-child(7){margin-top: 200px;} */
}






@media only screen and (min-width:1520px) {
    .fContent.cont_home .keyBox,
    .fContent.cont_home .slideBox .slideControl,
    .fContent.cont_business .cont-wrap,
    .fContent.cont_service .cont-wrap,
    footer > .wrap,
    .decoDiv > .wrap {
        max-width: 1440px;
    }
}

@media only screen and (min-width:1920px) {
    .fContent.cont_home .keyBox,
    .fContent.cont_home .slideBox .slideControl,
    .fContent.cont_business .cont-wrap,
    .fContent.cont_service .cont-wrap,
    footer > .wrap,
    .decoDiv > .wrap {
        max-width: 1600px;
    }
}











@media only screen and (max-width:1260px) {
    /* contents.css */
    
    .fContent.cont_home .keyBox,
    .fContent.cont_home .slideBox .slideControl,
    .fContent.cont_business .cont-wrap,
    .fContent.cont_service .cont-wrap,
    footer > .wrap {
        padding: 0 30px;
    }
    footer .logo{
        left: 30px;
    }
    .fContent.cont_home .keyBox h1,
    .fContent.cont_home .slideBox .slideControl .slideBtn {
        right: 30px
    }
}


@media only screen and (max-width:1080px) {
    header{height: 60px;}
    header .wrap{position: unset;}
    header .logo{left: 30px;height: 35px;}
    header .menu_wrap{
        z-index: 50;
        position: fixed;
        width: 100%;
        max-width:300px;
        height: calc((var(--vh, 1vh) * 100));
        right: -100%;
        top: 0;
        padding: 100px 30px 30px;

        background-color: #1c1c24;
        color: #fff;
        transition: 1s all;
        transform: unset;
        box-shadow: 0 0 20px rgb(28, 29, 36,.9);
    }
        body.headerON header .menu_wrap{
                right: 0;
        }
    header .menu_wrap .menuBox .menuItem{
        display: block;
        width: fit-content;
        font-size: 3rem;
        margin-bottom: 30px;

        margin-left: unset;
    }
    header .menu_wrap .menuBox .menuItem:after{
        height: 3px;
        background-color: #fff;
    }
    header .menu_wrap .btnBox {
        position: absolute;
        bottom: 30px;
        right: 0;
        padding: 0 30px;
        text-align: right;
        width: 100%;

        margin-left: unset;
    }
    header .menu_wrap .btnBox .btn{
        display: block;
        width: 100%;
        margin-left: auto !important;
        margin-right: 0 !important;
    }
    header .menu_wrap .btnBox .btn:last-child{
    }

    nav .btn.btnHeader{
        transform: translateX(0);
        opacity: 1;
    }
    nav .btn.btnTotop{
        width: 40px;
        height: 40px;
        right: 10px;
        bottom: 10px;
    }










    .fContent.cont_home .slideBox .slideControl .slideInfo{
        width: calc(100% - 160px);
    }
    .fContent.cont_home .slideBox .slideShow .homeSwiper .swiper-slide.swiper-slide-next,
    .fContent.cont_home .slideBox .slideShow .homeSwiper .swiper-slide.swiper-slide-next + .swiper-slide+ .swiper-slide,
    .fContent.cont_home .slideBox .slideShow .homeSwiper .swiper-slide.swiper-slide-next + .swiper-slide{
            width: 25vw !important;
    }



    .fContent.cont_service .serviceList {
        column-count: 3;
        column-count: 15px;
    }
    .fContent.cont_service .serviceList .serviceItem > .wrap{padding: 25px 20px 20px;}
    


    
    .popupItem[data-popup="partners"] .partnerList .partnerItem{
        width: calc((100%/3.1) - 10px);
    }
}



@media only screen and (max-width:800px) {
    header .logo{height: 35px;left: 20px;}


    .fContent.cont_home .keyBox,
    .fContent.cont_home .slideBox .slideControl,
    .fContent.cont_business .cont-wrap,
    .fContent.cont_service .cont-wrap,
    footer > .wrap {
        padding: 0 20px;
    }
    header .logo,
    footer .logo{
        left: 20px;
    }
    .fContent.cont_home .keyBox h1,
    .fContent.cont_home .slideBox .slideControl .slideBtn {
        right: 20px
    }



    .cont-title .titleSub{
        font-size: 1.6rem;
        margin-bottom: 15px;
    }
    .cont-title .titleMain{
        font-size: 2rem;
        line-height: 2.6rem;
    }



    .cont-title{padding: 0 15px 60px;}
    .fContent .fp-tableCell > .wrap{padding-top: 100px;}

    .tagList .tagItem{
        height: 25px;
        line-height: 24px;
        padding: 0 6px;
    }


    .partnerList .partnerRow {
        animation: infinity-loop 10s infinite linear 1s both; 
    }
    .partnerList .partnerRow:nth-child(2n-1) {
        animation: infinity-loop 9s infinite linear 0s both; 
    }



    .fContent.cont_home .keyBox h1{
        top: 20vh;
        transform: unset;
        font-size: 3rem;
        line-height: 3.4rem;
    }
    .fContent.cont_home .slideBox .slideControl{
        top: -30px;
    }
    .fContent.cont_business .cont-wrap .serviceList{
        
        column-count: 1;
        margin-top: unset;
    }
    .fContent.cont_business .cont-wrap .serviceList .serviceItem{
        margin-bottom: 80px;
    }
    .fContent.cont_business .cont-wrap .serviceList .serviceItem .iconBox{
        margin-bottom: 30px;
    }



    .fContent.cont_service{padding-bottom: 100px;}
    .fContent.cont_service .cont-title{padding-bottom: 100px;}
    .fContent.cont_service .serviceList {
        column-count: 2;
        column-gap: 15px;
    }
    .fContent.cont_service .serviceList .serviceItem > .wrap > .icon:first-child{
        margin-bottom: 25px;
        margin-top: 5px;
    }
        
    .fContent.cont_partners .cont-title{
        padding-bottom: 120px;
    }
    .fContent.cont_confluence .fp-tableCell > .wrap{padding-bottom: 120px;}



    footer .infoCont{width: 100%}
    footer .logo{
        position: unset;
        margin-bottom: 30px;
        display: block;
    }
    footer .btnBox{
        position: unset;
    }
    footer .infoCont .infomation h6.infoTitle{
        width: 100px;
    }
    footer .infoCont.btnBox{
        margin-left: 100px;
    }
    footer .infoCont.btnBox .btn {
        margin-left: unset;
        margin-top: -1px;
    }
    footer .actCont .copyright{
        position: unset;
        top: unset;
        transform: unset;
        margin-top: unset;
    }

    .popupItem[data-popup="workDetail"] > .btn,
    .popupItem[data-popup="work"] > .btn{
        width: 60px;
        height: 60px;
        line-height: 58px;
    }
    .popupItem[data-popup="work"] .popup-cont{
        height:  calc((var(--vh, 1vh) * 100) - 60px);
        padding-top: 50px !important;
    }
    .popupItem[data-popup="work"] .workList .workItem{
        width: 50%;
        padding-bottom: 50%;
    }
    .popupItem[data-popup="work"] .workList .workItem .workInfo{
        padding: 60px 15px 15px;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .infoBox .infoTitle{
        font-size: 2.4rem;
        line-height: 3rem;
    }
    .popupItem[data-popup="contact"] .popup-cont .cont-title{
        padding-left: 0;
        padding-right: 0;
    }


    
}


@media only screen and (max-width:480px) {
    .fContent.cont_home .slideBox .slideControl{
        top: -20px;
    }
    .fContent.cont_home .slideBox .slideControl .slideInfo{
        width: 100%;

        padding-bottom: 50px;
    }
    .fContent.cont_home .slideBox .slideControl .slideBtn .btn{
        width: 35px;
        height: 35px;
    }
    .fContent.cont_service .serviceList {
        column-count: 1;
        column-gap: 15px;
    }
    


    .popupItem[data-popup="workDetail"] .popup-cont .infoBox .infoTable li {
        margin-bottom: 10px;
    }
    .popupItem[data-popup="workDetail"] .popup-cont .infoBox .infoTable li h5{
        display: block;
        width: 100%;
    }
    
    .popupItem[data-popup="partners"] .partnerList .partnerItem{
        width: calc((100%/2.1) - 10px);
    }
}




@media only screen and (max-height:700px) {
    .fContent.cont_home .keyBox{
        height: 70%;
    }
    .fContent.cont_home .slideBox{
        height:  calc((var(--vh, 1vh) * 30));
    }
}






@media only screen and (max-width:800px) {
    .popup .popupItem > .btn{
        right: 0;
        top: 0;
    }
    .popup .popupItem .popup-cont {
        padding: 25px 20px 20px;
        max-height:  calc((var(--vh, 1vh) * 100) - 30px);
    }
    

    .formBox .formRow.col-2{
        column-count: 1;
    }
    .formBox .formTerm{
        padding: 15px;
    }
}