@charset "utf-8";

/* RESET
--------------------------------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

/* BODY,HTML
--------------------------------------------------------------------------------------*/

html,
body {
    width: 100%;
    height: 100%;
    min-width: 1000px;
    background: #fff;
/*    overflow-x: hidden;*/
    font-family:"微軟正黑體","新細明體","蘋果儷黑體",  Verdana, Helvetica, sans-serif;
    background: black;
}
body div{
    line-height: 0;
}
/*
h2 font15px
h3 font13px
*/
/* 共用
--------------------------------------------------------------------------------------*/


/* 架構
--------------------------------------------------------------------------------------*/
header{
    width: 100%;
}

.menu_bg{
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -683px;

}
.icon{
    position: absolute;
    top: 0;
    left: 20px;
    background: url(../images/logo.jpg) no-repeat;
    background-size:contain;
    width: 92px;
    height: 120px;
}
.scrollBtn{
    width: 137px;
    height: 137px;
    position: absolute;
    bottom: 62px;
    left: 45%;
    z-index: 1;
}
.cicle{
    position: relative;
}

.sCircle{
    width: 64px;
    height: 65px;
    position: absolute;
    top: 36px;
    left: 35px;
}
.sCircle img, .mCircle img,.lCircle img,.go img{width: 100%;}
.mCircle{
    width: 93px;
    height: 92px;
    position: absolute;
    left: 21px;
    top: 23px;
}
.lCircle{
    width: 137px;
    height: 137px;
    position: absolute;
}
.scroll_arrow{
    width: 9px;
    height: 9px;
}
.arrow1{
    position: absolute;
    left: 66px;
    bottom: 13px;
}
.arrow2{
    position: absolute;
    left: 66px;
    bottom: 2px;
}
.go{
    position: absolute;
    top: -15px;
    right: 4px;
}
.car{
    position: absolute;
    top: 29px;
    left: 45px;
}
.menulist ul{
    position: fixed;
    left: 50%;
    top: 160px;
    width: 192px;
    height: 281px;
    margin-left: 470px;
    z-index: 1;
}
.menulist li a{
    background: url(../images/menu.png) no-repeat;
    height: 36px;
    opacity: 0.5;
    margin-bottom: 12px;
    transition: opacity .4s ease-in-out;
    -moz-transition: opacity .4s ease-in-out;
    -webkit-transition: opacity .4s ease-in-out;
    display: block;
}
.menulist li a:hover,.selected{
    opacity: 1.0;
    transition: opacity .1s ease-in-out;
   -moz-transition: opacity .1s ease-in-out;
   -webkit-transition: opacity .1s ease-in-out;
}
.menulist li a.selected{
    opacity: 1.0;
}
/*
.menulist li a{
    display: block;
    height: 36px;
}
*/
.menulist .no1{
    background-position: 3px 1px;
}
.menulist .no2{
    background-position: -230px 1px;
}
.menulist .no3{
    background-position: -480px 1px;
}
.menulist .no4{
    background-position: -704px 1px;
}
.menulist .no5{
    background-position: -972px 1px;
}
.menulist .no6{
    background-position: -1164px 1px;
}
.menulist .no7{
    background-position: -1357px 3px;
}
.menulist .no1:hover{
    background-position: 3px bottom;
}
.menulist .no2:hover{
    background-position: -230px bottom;
}
.menulist .no3:hover{
    background-position: -481px bottom;
}
.menulist .no4:hover{
    background-position: -704px bottom;
}
.menulist .no5:hover{
    background-position: -972px bottom;
}
.menulist .no6:hover{
    background-position: -1164px bottom;
}
.menulist .no7:hover{
    background-position: -1357px bottom;
}
.menulist .selected{
    background-position-y:bottom;
}
/*--------------------------COMMON--------------------------*/
.bgbox{
    width: 100%;
}
.unitBox{
    position: relative;
    height: 642px;
    margin: 0 auto;
}
.title{
    width: 100%;
}

/*--------------------------COMMON--------------------------*/
h3{
    font-size: 14px;
    line-height: 1.3;
    color: #333;
}
.video .title{
    background: url(../images/title_no1.png) no-repeat center top;
    height: 153px;
    position: absolute;
    top: -133px;
}
.video .content{
    background: url(../images/no1_txt.png) no-repeat center;
    height: 711px;
    
}
.navi .title{
    background: url(../images/title_no2.png) no-repeat center;
    height: 121px;
}
.navi .content{
    background: url(../images/no2_txt.png) no-repeat center;
    height: 836px;
}
.monitor .title{
    background: url(../images/title_no3.png) no-repeat center;
    height: 143px;
}
.monitor .content{
    background: url(../images/no3_txt.png) no-repeat center;
    height: 248px;
}
.astern .title{
    background: url(../images/title_no4.png) no-repeat center;
    height: 71px;
}
.astern .content{
    background: url(../images/no4_txt.png) no-repeat center;
    height: 512px;
}
.recorders .title{
    background: url(../images/title_no5.png) no-repeat center;
    height: 120px;
}
.recorders .content{
    background: url(../images/no5_txt.png) no-repeat center;
    height: 492px;
}
.digital .title{
    background: url(../images/title_no6.png) no-repeat center;
    height: 112px;
}
.digital .content{
    background: url(../images/no6_txt.png) no-repeat center;
    height: 230px;
}
.cars .content{
    background: url(../images/no7_txt.png) no-repeat center;
    -webkit-background-size: 100%;
    background-size: 100%;
    height: 656px;
    margin-top: -33px;
}
footer{
    background: #333333;
    width: 100%;
    height: 42px;
    font-family:  Helvetica,Arial,"MHei HK Medium","Adobe Clean","LiHei","LiHei Pro","微軟正黑體","Microsoft JhengHei",sans-serif;
}
footer .footerBox{
    padding-top: 14px;
    width: 1366px;
    margin: 0 auto;
}
.nissantaiwan{
    line-height: 1;
    float: left;
    font-size: 14px;
    color: #696969;
    white-space: nowrap;
}
footer .menu{
    font-size: 15px;
    color: #89888c;
    line-height: 1;

}
footer ul{
    text-align: right;
    margin: 0;
    padding: 0;
    list-style: none outside none;
}
footer li{
    display: inline-block;
    vertical-align: top;
    margin-left: 25px;
    text-align: left;
}
footer .menu a{
    color: #89888c;
    text-decoration: none;
}
.wapper{
    max-width: 1366px;
    width: 100%;
    /* height: 4925px; */
    height: 4650px;
    margin: 0 auto;
    background: url('../images/bg.jpg') no-repeat center top;
    
}




/* Northa
====================================================================== */
.content{
    position: relative;
}

.content ul{
    width: 260px;
    color: #5374ce;
    font-size: 12px; line-height: 1.3;
    font-weight: bold;
    list-style-type: disc;
    list-style-position: outside;
    position: absolute;
}

.content li{
    margin-bottom: 3px;
}

.content p, .content>p{
    color: #333;
    font-size: 14px; 
    font-weight: bold;
}
.contentBox{
    width: 800px;
    position: relative;
/*    height: 100%;*/
    margin: 0 auto;
}
.HD{
    top: 190px; left: 100px;
}

.music{
    top: 190px; left: 510px;
}

.phone{
    top: 510px; left: 100px;
}

.movie{
    top: 510px; left: 510px;
}
.movie_txt{
    width: 310px;
    top: 652px;left: 470px;
    position: absolute;
    line-height: 1.2;
    transform: scale(0.83);
}

.video .content>p{
    position: absolute;
    top: 672px; left: 775px;
}
.satellite{
    top: 228px;left: 0px;
}
.ephemeris{
    top: 185px;left: 284px;
}
.ephemeris .color{
    margin-top: 15px;
    line-height: 1.5;
    font-size: 10px;
    transform: scale(0.83);
    margin-left: -23px;
    width: 305px;
}
.ephemeris .b:before{
    width: 13px;
    height: 8px;
    background: #067dd2;
    display: table-cell;
    float: left;
    margin-top: 6px;
    margin-right: 6px;
    content: "";
}
.ephemeris .g:before{
    width: 13px;
    height:8px;
    background: #52b700;
    display: table-cell;
    float: left;
    margin-top: 6px;
    margin-right: 6px;
    content: "";
}
.ephemeris .y:before{
    width: 13px;
    height:8px;
    background: #efcd00;
    display: table-cell;
    float: left;
    margin-top: 6px;
    margin-right: 6px;
    content: "";
}
.warning{
    top:225px;left:580px;
}
.comparison{
    font-size: 13px;
    text-align: center;
    width: 802px;
    color: #454545;
    position: absolute;
    top: 510px;
    left: 0
        px;
    line-height: 1.3;
}    
.comparison thead th{
    color: #242424;
    font-size: 14px;
    padding: 6px 15px;
    position: relative;
    background: rgba(20%,20%,20%,0.35);
}
.comparison tbody td{
    border: 1px solid #e5e5e5;
    border-collapse:collapse;
    box-sizing: border-box;
}
.comparison td{padding:8px 0 ; vertical-align: middle;}
.comparison .tr1{background: rgba(20%,20%,20%,0.2);}
.comparison .tr2{background: rgba(20%,20%,20%,0.1);}
.comparison .tr1 .no2{font-weight: bold;color: #242424;background: rgba(20%,20%,20%,0.3);}
.comparison .tr2 .no2{font-weight: bold; color: #242424;background: rgba(1%,1%,1%,0.1);}
/*.comparison tbody>tr>td:first-child{width: 116px;}*/
.comparison .no1{width: 116px;}
.comparison .no2{width: 266px;}
.comparison .no3{width: 175px;}
.astern .content .txt1{
    font-size: 14px;
    font-weight: bolder;
    color: #242424;
    position: absolute;
    left: 520px;
    top: 12px;
}
.content .astern_txt{
    list-style: none;
    top: 23px;
    left: 488px;
    line-height: 1.5;
}
.navi .txt1{
    position: absolute;
    top: 432px;
    text-align: center;
    width: 100%;
}
.navi .txt2{
    position: absolute;
    top: 735px;
    text-align: center;
    width: 100%;
}
.astern .content .txt2{
    position: absolute;
    left: 450px;
    width: 210px;
    top: 120px;
    text-align: center;
}
.astern .content .txt3{
    position: absolute;
    left: 220px;
    width: 400px;
    top: 180px;
}
.recorders .txt1,.recorders .txt2,.recorders .txt3,.recorders .txt4{
    position: absolute;width: 262px;
}
.recorders .txt1{
    left: 80px;
    top: 150px;
}
.recorders .txt2{
    top: 150px;
    right: 95px;
}
.recorders .txt3{
    top: 375px;
    left: 80px;
}
.recorders .txt4{
    top: 375px;
    right: 95px;
}
.recorders span{color: #ff0000;}
.digital .digital_txt{
    width: 345px;
    top: 60px;
    left: 415px;
}
.cars .cars_txt1{
    width: 600px;
    left:180px;
    top: 560px;
}
/* Media Query
====================================================================== */
@media screen and (max-width: 1366px){
body {
    overflow-x:hidden;
}
    .menulist ul{
         margin-left: 32%;
    }
    footer .footerBox{
        padding: 14px 20px;
        width: 100%;
    }
}

@media screen and (max-width: 1024px){
body {
    overflow-x: scroll;
}
    .menulist ul{
         margin-left: 29%;
    }
}

.video {
    margin-top: 63px;
    position: relative;
}

.title {
    
}

.title {
    
}