/* 共用 */
/* .title { font-size: 2.5rem; font-weight: bold; background:url("./images/bg_title.png") repeat-x center top; color:#ffffff; } */
.title { font-size:2.5rem; color:#182a3f; }
.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 { width:100%; position: absolute; background: url("./images/bg_menu.png") repeat-x; z-index:10; }


.top .toptxt { position: absolute; left:120px; right:80px; top:200px; font-weight: bold; text-align: left;  line-height:70px; }
.top .toptxt .txt1 { font-size:3rem; color:#46c8fa; }
.top .toptxt .txt2 { color:#ffffff; font-size:4rem; overflow:hidden; border-right: .5rem solid transparent; margin:0 auto; display:inline; position:relative; }

/* 輸入文字效果 */
.typewriter.active { 
    animation: 
        /* typing 6s steps(30, end), */
        blink-caret .5s step-end infinite;
 }
/* typewriter animate */
@keyframes typing{
    0% { width: 0 }
    50% { width: 100% }
    100% { width: 100% }
}
@keyframes blink-caret{
    from,to { border-color: transparent }
    50% { border-color: #ffffff }
}

.imgText { position: absolute; right:10px; bottom:5px; font-size:2rem; font-weight: bold; }
.imgText1 { color:#fff; }
.imgText2 { color:#182a3f; }
.imgTitle { font-size:1.5rem; font-weight: bold; }
.textArea1 { background-color:#182a3f; color:#fff; }
.textArea2 { background-color: #f8f8e6; color:#182a3f; }
.imgSentence { text-align: left; padding:20px; position: absolute; top:50%; transform: translate(0,-50%); }
.imgSentence.des { max-width:360px; right:0px; font-size:1.125rem; }

.future { background:url("./images/bg_slogan.jpg") no-repeat 50% 40%; background-size:cover; height:640px; position: relative; line-height:50px; }
.future .container { position: absolute; top:70%; left:50%; transform:translate(-50%,-50%); }
.future .ft1 { color:#034063; font-size:2.4rem; font-family: "Helvetica"; }
.future .ft2 { color:#009ee7; font-weight: bold; }

/* .company { background:url("./images/bg_company.jpg") no-repeat center center; background-size:cover; padding:220px 0px; color:#ffffff; } */
.company { margin:80px 0px; background-color:#fff; }
.company .ct { margin-bottom:30px; }
.company .content { color:#182a3f; line-height:30px; font-size:1.125rem; }

.LRArea > div { width:50%; }
.skill .sideImg { width:18.75%; height:100%; }

.join .tit { font-size:2.5rem; font-weight:bold; }
.join .link { font-size:1.25rem; }
.join .link a { text-decoration: underline; }

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

.service,.talent,.join { margin:40px 20px; }
/* .job { height:640px; } */

.contactus,.joinus { padding:60px 20px; width:100%; }
.contact .subtitle { margin-top:30px; font-weight: bold; }
/* .contactus { background:url("./images/bg_contact1.jpg") no-repeat left center; background-size:cover; } */
.contactus .subtitle { color:#c7eefd; }
/* .joinus { background:url("./images/bg_contact2.jpg") no-repeat center center; background-size:cover; } */
.joinus .title { color:#009ee7; }
.joinus .subtitle { color:#777777; }

.contact .change { height:100%; border:none; background-color: transparent; white-space: nowrap; }
.contact .contform .change { color:#6a7062; }
.contact .joinus .change { color:#009ee7; }
.contact .change:hover { color:#15293f; }
.contact img { width:100%; }    
.contact .contform { margin:0 auto; text-align:left; width:480px; }
.contact .contform .label { margin:10px 0px 5px 0px; font-weight:bold; }
.contact .contform .input { border:0; outline:0; background: transparent; width:100%; padding-bottom:5px; font-weight:bold; }
.contact .contform textarea { resize:none; height: 110px; }
.contact .contform .btn { border:0; margin-top:20px; padding:8px 60px; border-radius: 5px; font-weight: bold; }
.contact .contactus .contform .input { border-bottom:1px solid #182a3f; color:#182a3f; }
.contact .contactus .contform .label { color:#182a3f; }
.contact .contactus .contform .btn { background-color:#182a3f; color:#fff; }
.contact .contactus .contform .btn:hover { cursor: pointer; background-color: #009ee7; color:#ffffff; }
.contact .joinus .contform .input { border-bottom:1px solid #009ee7; color:#474747; }
.contact .joinus .contform .label { color:#009ee7; }
.contact .joinus .contform .label .import { color:#00679c; }
.contact .joinus .contform .btn { background-color:#009ee7; color:#ffffff; }
.contact .joinus .contform .btn:hover { cursor: pointer; background-color:#ffffff; color:#009ee7; }
/* placeholder */
.contactus .input::-webkit-input-placeholder { color:#182a3f; font-weight: bold; }  /* Chrome/Opera/Safari */
.contactus .input::-moz-placeholder { color: #182a3f; font-weight: bold; } /* firefox 19+ */
.contactus .input::-ms-input-placeholder { color: #182a3f; font-weight: bold; } /* IE 10+ */
.joinus .input::-webkit-input-placeholder { color:#474747; font-weight: bold; }  /* Chrome/Opera/Safari */
.joinus .input::-moz-placeholder { color: #474747; font-weight: bold; } /* firefox 19+ */
.joinus .input::-ms-input-placeholder { color: #474747; font-weight: bold; } /* IE 10+ */

/* amination area init */
.anicomp, .ft1 { 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; } */
    .top .toptxt { left:100px; }
    .future .ft1 { font-size:2.1rem; }
    .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) {
    /* .f_br { display:none; } */
    /* .top .topall .topmenu .menu .submenu > a { padding:31px 0px; }
    .top .topall .topmenu .menu .submenu a:hover { background:url("./images/bg_btn.png") repeat-x center bottom; color:#c7eefd; }
    .top .topall .topmenu .navbar-nav > .nav-item:hover > .dp_menu { display:block; }
    .top .topall .topmenu .menu .dp_menu { top:50px; right:0px; text-align:right; } */
    .future .container { max-width:700px; }
    .company .container { max-width: 930px; }
}

@media (max-width:991.98px) {
    /* .top .topall { top:-40px; padding:0px; }
    .top .topall .topmenu { padding:0px; }
    .top .topall .topmenu .logo { left:40px; top:10px; }
    .top .topall .topmenu .menu { width:100%; padding:0px; position:relative; }
    .top .topall .topmenu .menu .pos { color:#fcfbe2; }
    .top .topall .topmenu .menu .submenu { display: block; text-transform: uppercase; margin:0px 30px; padding:20px 0px; border-bottom: 1px solid #00679c; }
    .top .topall .topmenu .menu .submenu a { display:block; width:100%; }
    .top .topall .topmenu .menu .lastmenu { padding:0px; }
    .top .topall .topmenu .menu .lastmenu > a { padding:20px 0px; }
    .top .topall .topmenu .menu .lastmenu .line { display: none; }
    .top .topall .topmenu .menu .lastmenu .icon { display:block; float:right; margin:4px 0px; margin-right:10px; }
    .top .topall .toplan .lan { display: block; text-transform: uppercase; margin:10px 30px; padding:0px; border-bottom: 1px solid #00679c; }
    .top .topall .navbarItems { position: absolute; left:0px; width:100%; background-color: #003051; padding:10px 0px; z-index:1; } */
    /* .top .toplan .tl #navbarLan {  top:0px; padding-top:120px; } */
    
    /* .top .topall .topmenu .menu .active { color:#009ee7; }
    .top .topall .topmenu .menu .dp_menu { position:static; }
    .top .topall .topmenu .menu .dp_menu ul { padding:0px; }
    .top .topall .topmenu .menu .dp_menu li { border-top:1px solid #00679c; font-weight: normal; padding:20px 0px; padding-left:0px; }
    .top .topall .topmenu .menu .dp_menu li a { color:#fcfbe2; } */

    .top .toptxt { left:80px; }

    .future { height:560px; }
    .future .container { max-width:530px; }
    .contact .contform { max-width:350px; }

    .company { padding:100px 0px; }
    .LRArea > div { width:100%; }
    .join .textArea2 { padding:60px 0px; }
    .join .tit { font-size:1.5rem; }
    .join .link { font-size:1rem; }

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

    /* .footer .fcont { font-size:0.8rem; } */
    /* .footer .container { max-width: 760px; } */
}

@media (min-width:768px){
    
    .contactus,.joinus { width:50%; }
    /* .footer .pic { height:48px; }
    .footer .fcont { margin-top:20px; }
    .footer .fcont .fr { text-align:right; } */
}

@media (max-width:767.98px){
    .img { display:none; }
    .imgb { display:block; }
    
    .p_none { display: none; }
    .future .container { top:80%; }

    .service .st { top:5%; }
    /* .job { height:320px; } */
    .contact .contform { width:100%; }
    .contact .input.code { margin-bottom:20px; }

    .imgText { font-size:1.5rem; }

    .skill .textArea1 .imgSentence { max-width:100%; }
}

/* @media (min-width:576px) and (max-width:767.98px){
    .title { font-size:3.5rem; background-position:center bottom; }
    .top .topall { background:transparent; }
    .top .toptxt { top:175px; }
    .top .toptxt .txt1 { font-size:3rem; }
    .top .toptxt .txt2 { font-size:3.5rem; }

    .future { height:500px; }
    .future .ft1 { font-size:2.3rem; }
    
    .company .content { font-size:1.5rem; font-weight: bold; }

    .contact .subtitle { font-size: 1.5rem; }
    .contact .contform textarea { height:220px; }
    .contact .contform .label { font-size: 2rem; margin:35px 0px 25px 0px; }
    .contact .contform .input { padding-bottom:15px; font-size: 1.5rem; }
    .contact .contform .btn { padding:16px 120px; font-size:2rem; margin-top:40px; }
} */

@media (max-width:767.98px){
    /* .top .topall .topmenu .menu .topbtn { width:60px; }
    .top .topall .topmenu .menu .btn_lan { right: 60px; } */

    /* .top .topall .topmenu .logo { left:10px; height:28px; margin:16px 0px; } */
    .title { font-size:2rem; }
    .top .toptxt { left:30px; top:150px; line-height:40px; }
    .top .toptxt .txt1 { font-size:1.8rem; }
    .top .toptxt .txt2 { font-size:2rem; }

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

    .company { padding:60px 0px; }

    .imgSentence.des { left:0px; }

    .skill .sideImg { width:25%; }

    /* .job { height:240px; background-size:170% 100%; } */

    /* .footer { font-size:1.1rem; }
    .footer .container { max-width: 410px; }
    .footer .fcont .fl { margin:30px 0px; }
    .footer .fcont .time,.pp,.tu,.copyright { font-size:1rem; } */

    /* .totop { right: 1rem; } */
}