/* 共用 */
.title { font-size: 2.5rem; background:url("./images/bg_title.png") repeat-x center top; color:#ffffff; }
.img { width: 100%; height:auto; object-fit: cover; }   /* 網頁版圖片 */
.imgb { width: 100%; height:auto; object-fit: cover; display:none; }  /* 手機版圖片 */

.top { width:100%; height:100vh; }
.top .topbnr { position: absolute; top:0px; left:0px; width:100%; z-index: 0; }
.top .topbnr .bnr { width:100%; height:100vh; display:block; }

.top .topall {position: absolute; z-index:6; }


.future { height:360px; position: relative; line-height:50px; }
.future .container { position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.future .ft1 { color:#8FC31F; font-size:2.4rem; }
.future .ft2 { color:#474747; font-size:1.25rem;  }

.company { background:url("./images/bg_company.jpg") no-repeat center center; background-size:cover; padding:140px 0px; color:#ffffff; }
.company .ct { margin-bottom:30px; }
.company .content { display: inline-block; color:#fff; line-height:30px; }

.service { position: relative; }
.service .st { position: absolute; top:10%; left:50%; transform:translate(-50%,-50%); }

/* .job { height:640px; } */

.contactus { padding:120px 0px; }
.contact .subtitle { margin-top:30px; }
.contactus { background:#00a0e9 ; background-size:cover; }
.contactus .subtitle { color:#c7eefd; }

.map-responsive{
    overflow:hidden;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.service { position: relative; }
.service .st { position: absolute; top:10%; left:50%; transform:translate(-50%,-50%); }

.contact .change { height:100%; border:none; background-color: transparent; white-space: nowrap; }
.contact .contform .change { color:#fff; }
.contact .change:hover { color:#fff100; }
.contact img { width:100%; }
.contact .contform { margin:0 auto; text-align:left; width:480px; }
.contact .contform .label { margin:15px 0px 10px 0px; font-weight:bold; }
.contact .contform .import { color:#fff100; }
.contact .contform .input { border:0; outline:0; background: transparent; width:100%; padding-bottom:5px; }
.contact .contform textarea { resize:none; height: 110px; }
.contact .contform .btn { border:0; margin-top:20px; padding:8px 60px; border-radius: 5px; }
.contact .contactus .contform .input { border-bottom:1px solid #ffffff; color:#c7eefd; }
.contact .contactus .contform .label { color:#ffffff; }
.contact .contactus .contform .btn { background-color:#ffffff; color:#009ee7; }
.contact .contactus .contform .btn:hover { cursor: pointer; background-color: #fff100; color:#009ee7; }

/* placeholder */
.contactus .input::placeholder { color:#005083; }
.contactus .input::-webkit-input-placeholder{ color:#005083; }
.contactus .input::-moz-placeholder { color:#005083; }
.contactus .input::-ms-input-placeholder { color:#005083; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }

/* amination area init */
.anicomp, .future { transform:translateY(100px); opacity: 0; }
.upslideAni { animation:upslide 2s; transform:translateY(0px); opacity: 1; }
/* animation */
@keyframes upslide {
    0% { transform:translateY(100px); opacity: 0; }
    100% { transform: translateY(0px); opacity: 1; }
}


@media (max-width:1200px) {
    /* .top .topall { padding:0px 50px; } */
    .contact .contform { max-width:400px; }
    /* .job { height:560px; }     */
}

@media (max-width:1199.98px) and (min-width:992px){
    /* .top .topall .topmenu .logo { height:36px; margin:12px 0px; } */
}

@media (min-width:992px) {
    .company .container { max-width: 930px; }
    .contactus,.joinus { float: left; width:50%; height:840px; }
    .map-responsive { height:840px; }
}

@media (max-width:991.98px) {
    .future { height:360px; }
    .contact .contform { max-width:350px; }
    .map-responsive { padding-top:100%; }
}

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

@media (max-width:767.98px){
    .img { display:none; }
    .imgb { display:block; }
    
    .p_none { display: none; }
    .company { padding:100px 0px; }
    .service .st { top:5%; }
    /* .job { height:320px; } */
    .contact .contform { width:70%; }
    .contact .input.code { margin-bottom:20px; }

}

@media (max-width:767.98px){

    .title { font-size:2rem; }

    .future { height:320px; line-height:30px; }
    .future .ft1 { font-size:1.5rem; }

}