@font-face {
    font-family:'myfont';
    src:url('../fonts/Roboto-Light-webfont.woff') format('woff');
    font-weight: normal;font-style: normal }
html { min-height:100% }
body { position:absolute;width:100%;height:100%;
    font-family:'myfont';background-color:#31313A }
* { box-sizing:border-box;-moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;margin:0;padding:0 }
[v-cloak] { visibility:hidden }
/* response css */
@media screen and (min-width:992px) {
    body { font-size:1.8rem }
    .mynav { height:150px;padding:30px 130px 20px 130px;
        background-color:transparent }
    .mynav ul { display:block }
    .mynav ul li { cursor:pointer }
    .mynav i { display:none }
    #login1 { font-size:1.9rem !important }
    #login2 { font-size:1.3rem !important }
    .mynav #logoTxt { max-width:230px }
    #navContent { display:none }

    #homeContent { margin:450px 120px 0 120px !important }

    #svcName { padding:10px 30px 30px 30px !important }
    .service .container p {  margin-top:30px !important }
} 
@media screen and (max-width:992px) {
    body { font-size:1rem }
    .mynav { height:130px;padding:20px 30px 10px 30px;
        background-color:#001651 }
    .mynav ul { display:none }
    .mynav i { display:block }
    .mynav #logoTxt { max-width:150px }

    #homeContent { margin:350px 20px 0 20px !important }
    #homeContent p { font-size:2.5rem !important }
    .about { padding-top:130px !important }
    .about .container { margin-top:25px !important }
    .about .container p {  font-size:1.5rem }

    .service { padding-top:130px !important }
    .service #hkdetail { margin:0 !important;padding-bottom:30px !important }
    .service .container p {  font-size:1.6rem }
    .service .link { padding-right:30px !important;font-size:1.5rem !important }

    .contact { padding-top:130px !important }
    .contact .container { margin-top:25px !important }
    .contact .container p {  font-size:1.5rem }
}
@media screen and (max-height:568px) {
    .mynav img { height:50px !important;margin-top:25px !important }
    #homeContent { margin:250px 20px 0 20px !important }
}
@media screen and (min-height:700px) and (max-height:763px) {
    #homeContent { margin:450px 20px 0 20px !important }
}
/* base */
#myApp { position:absolute;width:100%;height:100% }
.mynav { position:fixed;left:0;top:0;width:100%;z-index:9997;color:white }
.mynav ul { float:right;margin:0;list-style:none }
.mynav ul li { display:inline-block;padding:20px 15px 0 15px;line-height:80px }
.defaultNav { background-color:#001651 }

.home { position:absolute;left:0;top:0;width:100%;height:100%;
    background:url(../img/header.jpg) no-repeat bottom center;
    background-size:cover;color:white }
.home p { font-size:3rem }
.about { position:absolute;left:0;top:0;width:100%;height:100%;
    background:url(../img/bg.jpg) no-repeat bottom center;background-size:cover;
    padding:150px 0 35px 0;color:black }
.service { position:absolute;left:0;top:0;width:100%;height:100%;overflow-y:auto;
    background:url(../img/bg.jpg) no-repeat bottom center;background-size:cover;
    padding:150px 0 35px 0;color:black }
.service ul { background-color:transparent }
.service li { color:black } 
.service .link { padding-left:30px;margin-right:15px;font-size:2rem;
    background-color:#e0e0e0 }
.contact { position:absolute;left:0;top:0;width:100%;height:100%;
    background:url(../img/bg.jpg) no-repeat bottom center;background-size:cover;
    padding:150px 0 35px 0;color:black }
.contact i { background-color:#434343;width:40px;height:40px;line-height:40px;
    border-radius:50%;text-align:center;color:#fff;margin:0 5px;
    -webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;
    -ms-transition:all 0.4s;transition:all 0.4s }
.contact i:hover { cursor:pointer;background-color:#001651 }
.foot { position:fixed;left:0;bottom:0;width:100%;height:35px;
    background-color:#212121;text-align:center;color:#746e6e }
.foot p { line-height:35px;font-size:1.3rem }
/* loading */
.loading { 
    position:fixed;top:0;left:0;width:100%;height:100%;
    z-index:9999;background-color:#31313A }
.spinner { position:absolute;top:50%;left:50%;
    transform:translate(-50%, -50%) }
.spinner > div { width:30px;height:30px;background-color:white;
    border-radius:100%;display: inline-block;
    -webkit-animation:bouncedelay 1.4s infinite ease-in-out;
    animation:bouncedelay 1.4s infinite ease-in-out;
    -webkit-animation-fill-mode:both;
    animation-fill-mode:both }
.spinner .bounce1 {
    -webkit-animation-delay:-0.32s;animation-delay:-0.32s }
.spinner .bounce2 {
    -webkit-animation-delay:-0.16s;animation-delay:-0.16s }
@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
    0%, 80%, 100% { transform:scale(0.0);-webkit-transform:scale(0.0) }
    40% { transform:scale(1.0);-webkit-transform:scale(1.0) }
}
/* img */
.portfolio{
    overflow: hidden;
}
.portfolio:hover img{
    -webkit-transform: scale(1.3,1.3);
    -moz-transform: scale(1.3,1.3);
    -o-transform: scale(1.3,1.3);
    -ms-transform: scale(1.3,1.3);
    transform: scale(1.3,1.3);
}
.portfolio img{
    width: 100%;
    -webkit-transition: all 0.6s;
    -o-transition: all 0.6s;
    -moz-transition: all 0.6s;
    -ms-transition: all 0.6s;
    transition: all 0.6s;
}