body {background-image: url(../images/bg.jpg); background-repeat: repeat-x; overflow-x: hidden;}

/** loading process **/
#UpdateProgress {width:100%; height: calc(100vh); background-color:#fff;z-index:100001; position:absolute;}
.loading {position: fixed; top:45%; left:0; width: 100%; height:34px; text-align: center; z-index:100002; }
.loading .sk-child {width: 16px; height: 16px; background-color: #676767; border-radius: 0; display: inline-block; -webkit-animation: loading 1.4s ease-in-out 0s infinite both; animation: loading 1.4s ease-in-out 0s infinite both;}
.loading .sk-bounce1 {-webkit-animation-delay: -0.48s; animation-delay: -0.48s;}
.loading .sk-bounce2 {-webkit-animation-delay: -0.32s; animation-delay: -0.32s;}
.loading .sk-bounce3 {-webkit-animation-delay: -0.16s; animation-delay: -0.16s;}
@-webkit-keyframes loading {
  0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0); }
  40% {-webkit-transform: scale(1); transform: scale(1); }
}
@keyframes loading {
  0%, 80%, 100% {-webkit-transform: scale(0); transform: scale(0); }
  40% {-webkit-transform: scale(1); transform: scale(1); }
}

.unstyled {list-style: none; margin: 0; padding: 0;}

.wow {visibility: hidden}
.clear {clear: both}

.main-nav.dark-nav {
    box-shadow: 0 3px 2px -2px rgb(0 0 0 / 10%);
    z-index: 1000;
    position: absolute;
    width: 100%;
    border: 0;
    background-color: #fff;
    border-bottom: 1px solid rgba(95, 95, 95, 0.6);
    box-shadow: rgb(0 0 0 / 20%) 0 10px 20px 0;
    -webkit-box-shadow: rgb(0 0 0 / 20%) 0 10px 20px 0;
}

section {width: calc(100vw); overflow:hidden;}
p {line-height:1.2; color:#868686;}
.title_1 {color:#595b5b; line-height:1; margin-bottom:5px;}
.title_2 {font-size: 20px;color: #595b5b;line-height: 1.1;margin-bottom: 0;}
.color_g1 {color: #55bda8;}
.color_g2 {color: #39938f;}
.hiot_logo {width:180px; margin-left:-15px; margin-bottom: 10px;}
#section01 {
    background-image: url(../images/top_iot.png);    
    background-repeat: no-repeat;
}
#section01, #section02 {border-bottom: 1px solid #ddd;}
#section02 h5 {padding-top: 10px;}
#section03 .col-sm-2:hover img {
    animation: shake 1s;
    -moz-animation: shake 1s;
    -webkit-animation: shake 1s;
    -o-animation: shake 1s;
}
#footer {height: calc(13vw); background-image: url(../images/footer_bk.png); background-position: 150% bottom; background-repeat: repeat-x; background-size: auto 100%;}
.copyright {
    color: #fff;
    background: #29827e;
    padding: 15px 0;
}
.copyright a {color: #fff;}
.copyright a:hover {color: #fff;}

#footer p {padding-top: calc(13vw - 100px); padding-bottom: 3rem; color: #fff; margin-bottom: 0; margin-left: 5rem; line-height: 1.4;}
#back-to-top { position: fixed; right: 25px; bottom: 0; z-index: 10; backface-visibility: hidden; display: none}
#back-to-top.affix { bottom: 0}
#back-to-top .btn {width: 40px; height: 35px; line-height: 30px; font-weight: 700; font-size: 16px; padding: 0; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border: 0; color: #fff; background-color: #404040;}
#back-to-top .btn:hover {color: #fff; background: #007fef}

.border-b {border-bottom:1px solid #ddd;}

.newtable {
    font-size: 14px;
    font-weight: normal;
    border-color: #39938f;
}
.newtable > :not(caption) > * > * { padding: .7rem .5rem .4rem;}
td {vertical-align: middle;}
td[colspan] {background-color: #39938f !important;color: #fff;font-size: 15px;padding-bottom: .5rem;}
tr td:first-child {background-color: #f5f5f5;}


@media (min-width: 1920px) {
}

@media (max-width: 1919px) {
}

@media (min-width: 1600px) {
}

@media (max-width: 1599px) {
}

@media (min-width: 1140px) {
}

@media (max-width: 1139px) {
}

@media (min-width: 1200px) {
    #section01 {       
        background-position: 80% 100px;
        background-size: auto calc(100% - 100px);
    }
}

@media (max-width: 1199px) {
    .title_2 {font-size: 18px;}    
    #footer {height: calc(18vw); background-position: 0 bottom;}
    #footer p {margin-left: 0; padding-top: calc(13vw - 30px);}
    .section01_wrap {width: 85%; height: calc(74vw + 55px);}
}


@media (min-width: 960px) and (max-width:1199px) {
    #section01 {
        background-position: 90% 132px;
        background-size: auto calc(95% - 100px);
    }
}

@media (min-width: 649px) and (max-width:792px) {
}

@media (min-width: 768px) and (max-width:959px) {
    #section01 {
        background-position: 100% 180px;
        background-size: auto calc(90% - 110px);
    }
}

@media (min-width: 992px) {
    .modal-body h4 { font-size:20px;} 
}

@media (max-width: 991px) {
    .hiot_logo { width: 140px; margin-left: -12px;}
}

@media (min-width: 576px) and (max-width: 991px) {
    #section03 .row { display: block;text-align: center;}
    #section03 .col {display: none;}
    #section03 [class*=col-] {
        width: auto;
        display: inline-block;
        vertical-align: top;
        flex: 0 0 auto;
        max-width: unset;
    }
    #section03 [class*=col] img[class*=mb] {
        max-width: 150px;
        margin-bottom: 8px !important;
    }
    .modal-body h4 { font-size:17px;} 
}

@media (min-width: 768px) {
    body { background-position: center 65px; background-size: contain;}
    .main-nav.dark-nav {height: 65px;}
    #navbar-brand {margin-left: 15px; margin-top: 18px; max-width:145px;} 
    .section01_wrap {width: 70vw; margin: 0; height: calc(100vh - 100px);}
}

@media (max-width: 767px) {
    body { background-position: center 52px; background-size:200% auto;}
    .main-nav.dark-nav, .main-nav.dark-nav nav {height: 52px;}
    #navbar-brand {margin: 14px 10px 0 10px; max-width:130px;}
    #section01 {
        background-position: 100% 180px;
        background-size: auto calc(90% - 110px);
    }
    .section01_wrap {
        width: 50%;
        margin: 0 0 0 3rem;
        height: calc(74vw + 55px);
    }
    .title_1 {font-size: 22px;}
    .title_2 {font-size: 16px;}
    #section01_1 {font-size:1.1rem;}
    .modal-open .modal {padding-right:0 !important;}
}

@media (min-width: 576px) and (max-width: 767px) {

}

@media (min-width: 576px) {
   
}

@media (max-width: 575px) {
    .wow {visibility: visible !important;}
    .col-sm-2 {width: 33%;}
    .col {display: none;}
    [class*=col] img[class*=mb] {margin-bottom: 5px !important;}
    .section01_wrap {width: 50% !important; margin: 0 3rem; padding: 100px 0;}
    #section01_1 .container {width:calc(90vw);}
    #section02 img {max-width:120px;}
    #section03 .row { margin-left: 0; margin-right: 0;}
    #section03 p, .modal-body p { font-size:12px;} 
    .modal-body h4 { font-size:15px;} 
    .copyright .nav {float:right;}
}

@media (min-width: 461px) and (max-width: 575px) {
    #section03 img { max-width:120px;} 
}


@media (min-width: 461px) {
}

@media (max-width: 460px) {
    #section01 {background-position: 110% 180px;}
    .section01_wrap {
        height: calc(100vw + 55px);
        margin: 0 0 0 2rem;
        width: 45% !important;
    }
    #section02 h5 {font-size:15px;}    
    p, .copyright, #examples {font-size:12px; line-height:1.1;}
    #examples div {line-height:20px;}
    .title_1 {font-size: 17px;}
    #footer {height: 100px;background-position: 0 bottom;}
    #footer p {padding-top: 50px;margin-left: 0;}    
}