﻿.header{

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

    background: #fff;

    width: 100%;

    border-bottom: 1px #ccc solid;

}

#navtop{

    position: fixed;

    top: -100px;

    opacity: 0;

    z-index: 99;

}

#phnav{

    display: none;

    position:fixed;

    left:0;

    top:0;

    z-index:20;

    -webkit-transition:-webkit-transform 400ms;

    background:#fff;

}

body .show1{

    opacity: 1 !important;

}

.logo{

    margin-left: 4%;

    height: 100px;

    display: table;

}

.logo span{

    display: table-cell;

    vertical-align: middle;

}

.logo span img{
    height: 48px;
}



.nav li{
    float: left;
    position: relative;
}

.header .nav li .active{
    color: #2f37e2;
}

.nav li>a{
    border: 1px #fff solid;
    display: block;
    padding: 0 29px;
    line-height: 98px;
    color: #666;
    font-size: 18px;
    transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -webkit-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -ms-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
}

.nav li:hover>a{
    border-left: 1px #e5e5e5 solid;
    border-right: 1px #e5e5e5 solid;
}

.nav li dl{
    width: 160%;
    position: absolute;
    top: 100px;
    background-color: #fff;
    background-image: url(../image/header01.png);
    -moz-background-size: 37.5% 1px;
         background-size: 37.5% 1px;
    background-position: right top;
    background-repeat: no-repeat;
    border:  1px #e5e5e5 solid;
    border-top: none;
    display: none;
    opacity: 0;
    transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -webkit-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -ms-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
}

.nav li dl dd{
    transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -webkit-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -ms-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
}

.nav li dl dd a{
    font-size: 16px;
    color: #333;
    line-height: 48px;
    display: block;
    margin-left: 20px;
}
.nav li dl dd:hover{
    background: #e5e5e5;
}

.search{

    margin-right: 4%;

    height: 100px;

}

.search dd{

    float: left;

    margin-left: 40px;

    height: 100%;

}

.search a{

    height: 100%;

    display: table;

}

.search dd span{

    display: table-cell;

    vertical-align: middle;

}

.search dd span{

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    transition: all 1s;

}

@-webkit-keyframes span-img-anim

{

from {-webkit-transform:rotate(0deg);}

to {-webkit-transform:rotate(360deg);}

}

@-moz-keyframes span-img-anim

{

from {-webkit-transform:rotate(0deg);}

to {-webkit-transform:rotate(360deg);}

}

@keyframes span-img-anim

{

from {-webkit-transform:rotate(0deg);}

to {-webkit-transform:rotate(360deg);}

}

.search dd span:hover img{

    animation: span-img-anim 0.4s;

    -moz-animation: span-img-anim 0.4s; /* Firefox */

    -webkit-animation: span-img-anim 0.4s;  /* Safari 和 Chrome */

    -o-animation: span-img-anim 0.4s;   /* Opera */

}



.search dd span img{

    width: 30px;

}



.banner{

    width: 100%;

    overflow: hidden;

    position: fixed;

    top: 0;

    z-index: -2;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}

.banner ul{

    position: relative;

    height: 100%;

}

.banner li{

    display: none;

    height: 100%;

}

.banner img{

    width: 100%;

}

.banner li a{
    width: 100%;

    display: block;

    position: absolute;

    z-index: 1;

    -webkit-transition: all 1s;

    -moz-transition: all 1s;

    transition: all 1s;

}



.banner_btn{

    position: absolute;

    left: 50%;

    bottom: 40px;

    z-index: 10;

    -webkit-transform: translateX(-50%);

       -moz-transform: translateX(-50%);

        -ms-transform: translateX(-50%);

            transform: translateX(-50%);

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

}

.banner_btn dd{

    width: 14px;

    height: 14px;

    border: 3px #fff solid;

    -webkit-box-sizing: border-box;

       -moz-box-sizing: border-box;

            box-sizing: border-box;

    -moz-border-radius: 50%;

         border-radius: 50%;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

        -ms-flex-align: center;

            align-items: center;

    margin: 0 8px;

    -webkit-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.6);

       -moz-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.6);

            box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.6);

}



.banner_btn .active{

    border: none;

    background: #2e37e1;
}



.btn1{

    display: block;

    width: 160px;

    height: 48px;

    -moz-border-radius: 4px;

         border-radius: 4px;

    line-height: 48px;

    text-align: center;

    border:1px solid #666;

    color: #666;

    font-size: 18px;

    background: rgba(0,0,0,0);

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}

.btn1:hover{

    border:1px solid #2e37e1;

    background: #2e37e1;

    color: #fff;

}

.btn3{

    display: block;

    width: 160px;

    height: 48px;

    -moz-border-radius: 4px;

         border-radius: 4px;

    line-height: 48px;

    text-align: center;

    background: #2e37e1;

    color: #fff;

    font-size: 18px;

}

/*菜單按钮*/

#menu-btn {

    position:absolute;

    top:0;

    right:0;

    width:70px;

    height:70px;

}

#menu-btn span {

    position:absolute;

    left:23px;

    width:24px;

    height:2px;

    background-color:#565656;

    -webkit-transition: top 300ms, -webkit-transform 300ms;

    transition: top 300ms, -webkit-transform 300ms;

    -moz-transition: transform 300ms, top 300ms, -moz-transform 300ms;

    transition: transform 300ms, top 300ms;

    transition: transform 300ms, top 300ms, -webkit-transform 300ms, -moz-transform 300ms;
    -webkit-transition: -webkit-transform 300ms, top 300ms;
    -moz-transition: -moz-transform 300ms, top 300ms;
    -ms-transition: -ms-transform 300ms, top 300ms;

}

#menu-btn .top {

    top:24px;

}

#menu-btn .mid {

    top:32px;

}

#menu-btn .bot {

    top:40px;

}

#menu-btn ul{

    display:none;

}

    /* 菜單按钮控制 */

#menu-btn .top {

    top:32px;

    animation:menuBtn-off-top-anim 400ms forwards;
    -webkit-animation:menuBtn-off-top-anim 400ms forwards;
    -ms-animation:menuBtn-off-top-anim 400ms forwards;
    -moz-animation:menuBtn-off-top-anim 400ms forwards;

}

#menu-btn .mid {
    opacity: 0;
    -webkit-opacity:0;

    animation:menuBtn-off-mid-anim 400ms forwards;
    -webkit-animation:menuBtn-off-mid-anim 400ms forwards;
    -ms-animation:menuBtn-off-mid-anim 400ms forwards;
    -moz-animation:menuBtn-off-mid-anim 400ms forwards;

}

#menu-btn .bot {

    top:32px;

    animation:menuBtn-off-bot-anim 400ms forwards;
    -webkit-animation:menuBtn-off-bot-anim 400ms forwards;
    -ms-animation:menuBtn-off-bot-anim 400ms forwards;
    -moz-animation:menuBtn-off-bot-anim 400ms forwards;

}

    /* 菜單按钮動畫 */

@-webkit-keyframes menuBtn-on-top-anim {

    50% {top:32px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);}

    100% {
        transform:rotate(45deg); top:32px;
        -webkit-transform:rotate(45deg); top:32px;
        -moz-transform:rotate(45deg); top:32px;
        -ms-transform:rotate(45deg); top:32px;}

}

@-webkit-keyframes menuBtn-on-mid-anim {

    100% {opacity:0;}

}

@-webkit-keyframes menuBtn-on-bot-anim {

    50% {top:32px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);
        }

    100% {
        -transform:rotate(-45deg);
        -webkit-transform:rotate(-45deg);
        -moz-transform:rotate(-45deg);
        -ms-transform:rotate(-45deg);
         top:32px;}

}

@-webkit-keyframes menuBtn-off-top-anim {

    50% {
        top:32px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);}

    100% {
        top:24px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);}

}

@-webkit-keyframes menuBtn-off-mid-anim {

    100% {opacity:1;}

}

@-webkit-keyframes menuBtn-off-bot-anim {

    50% {top:32px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);}

    100% {top:40px;
        transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -ms-transform:rotate(0deg);}

}



/* 右側菜單 */
#menu {
    position:fixed;
    top:0;
    right:0;
    z-index:-3;
    width:72%;
    height:100%;
    background:#333333;
    -webkit-opacity:0;
    overflow:hidden;
    -webkit-transform:translateX(72%);
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
#menu .links {
    margin-top:50px;
    -webkit-transition:margin-left 400ms;
    list-style:none;
}
#menu .links li>a {
    display:block;
    position:relative;
    z-index:2;
    line-height:48px;
    height: 48px;
    padding-left:54px;
    color:#a7a7a7;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    transition: all 0.4s;
}
#menu .links li>a{
    -webkit-transition:-webkit-transform 400ms;
    -webkit-transform:scale(1.0, 1.0);
}
#menu .links li>dl{
    background: rgba(0,0,0,0.2);
}
#menu .links li>dl dd>a{
    display: block;
    color: #ccc;
    padding-left:64px;
    line-height: 40px;
    font-size: 14px;
}
.phnav-ico a span{
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
       -moz-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}





/* 菜單打開 */

body.menu-on .header{

    transform:translateX(-72%);
    -webkit-transform:translateX(-72%);
    -moz-transform:translateX(-72%);
    -ms-transform:translateX(-72%);

}

body.menu-on #menu-btn .top {

    animation:menuBtn-on-top-anim 400ms forwards;
    -webkit-animation:menuBtn-on-top-anim 400ms forwards;
    -moz-animation:menuBtn-on-top-anim 400ms forwards;
    -ms-animation:menuBtn-on-top-anim 400ms forwards;


}

body.menu-on #menu-btn .mid {

    animation:menuBtn-on-mid-anim 400ms forwards;
    -webkit-animation:menuBtn-on-mid-anim 400ms forwards;
    -moz-animation:menuBtn-on-mid-anim 400ms forwards;
    -ms-animation:menuBtn-on-mid-anim 400ms forwards;

}

body.menu-on #menu-btn .bot {

    animation:menuBtn-on-bot-anim 400ms forwards;
    -webkit-animation:menuBtn-on-bot-anim 400ms forwards;
    -moz-animation:menuBtn-on-bot-anim 400ms forwards;
    -ms-animation:menuBtn-on-bot-anim 400ms forwards;

}

body.menu-on #menu {

    z-index:8;

    opacity:1;

    transform:translateX(0%);
    -webkit-transform:translateX(0%);
    -moz-transform:translateX(0%);
    -ms-transform:translateX(0%);
}

#goTop{

    position:fixed;

    bottom:1rem;

    right:1rem;

    z-index:10;

    no-repeat;

    -moz-background-size:100% 100%;

    no-repeat;

         background-size:100% 100%;

    width:50px;

    height:47px;

    display:none;

}

#modal1Title{

    font-size: 1.4em;

    line-height: 2.4em;

}

::-webkit-scrollbar {

  width: 6px;

}



::-webkit-scrollbar-track {

  background: #fff;

}



::-webkit-scrollbar-thumb {

  background: #2e37e1;

}



::-webkit-scrollbar-thumb:window-inactive {

  background: #2e37e1;

}



::-webkit-scrollbar-thumb:vertical:hover {

  background: #2e37e1;

}

.input1{

    border-bottom: 1px #999 solid;

    height: 32px;

    vertical-align:middle

}

.btn2{

    width: 32px;

    height: 32px;

    vertical-align:middle;

}



/* 標題 */

.main{

    background: #fff;

    padding-bottom: 120px;

}

.main_title{

    text-align: center;

}

.main_title h1{

    font-size: 48px;

    padding-top: 80px;

}

.main_title h2{

    font-size: 16px;

    line-height: 44px;

}

.main_title h3{

    font-size: 20px;

    padding-bottom: 60px;

}

/* 內容 */

.left_main{

    width: 50%;

    float: left;

}

.left_main .img1{

    padding-right: 100px;

    float: right;

}

.right_main{

    width: 50%;

    float: left;

}

.right_main p{

    font-size: 16px;

    letter-spacing: 1px;

    line-height: 38px;

    width: 560px;

    color: #333;

    margin:40px 0;

    margin-left:100px;

}

.btn1{

    margin-left: 100px;

}



/* 解決方案 */

.solution_ico01{

    background-image: url(../image/solution01.png);

}

.solution_ico011{

    background-image: url(../image/solution011.png) !important;

}

.solution_ico02{

    background-image: url(../image/solution02.png);

}

.solution_ico022{

    background-image: url(../image/solution022.png) !important;

}

.solution_ico03{

    background-image: url(../image/solution03.png);

}

.solution_ico033{

    background-image: url(../image/solution033.png) !important;

}

.solution_ico04{

    background-image: url(../image/solution04.png);

}

.solution_ico044{

    background-image: url(../image/solution044.png) !important;

}

.solution_ico05{

    background-image: url(../image/solution05.png);

}

.solution_ico055{

    background-image: url(../image/solution055.png) !important;

}

.solutionimg{

    width: 100%;

}

.solutionimg li{

    width: 100%;

    display: none;

}

.solutionimg li img{

    width: 100%;

}

.right_solution{

    float: right;

    margin-right: 15%;

    display: table;

}

.right_solution ul{

    display: table-cell;

    vertical-align: middle;

}

.right_solution li{

    width:72px;

    height: 72px;

    border: 2px #333 solid;

    -moz-border-radius: 50%;

         border-radius: 50%;

    background-position: center;

    background-repeat: no-repeat;

    -moz-background-size: 56%;

         background-size: 56%;

    margin-bottom:48px;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}

.right_solution .active{

    border-color: #2f37e2;

}

.right_solution .selected{

    border-color: rgba(0,0,0,0);

    -moz-background-size: 70%;

         background-size: 70%;

}

.left_solution{

    display: table;

    float: left;

    padding-left: 15%;

    width: 60%;

}

.left_solution2{

    width: 100% !important;

    padding-right: 15%;

}

.left_solution li{

    display: none;

    vertical-align: middle;

}

.main_title h4{

    font-size: 20px;

    margin-top: 28px;

    margin-bottom: 24px

}

.main_title h5{

    font-size: 18px;

    line-height: 36px;

    margin-top: 28px;

    margin-bottom: 16px

}

.main p{

    line-height: 36px;

    font-size:16px;

    letter-spacing: 1px;

    height:

}

.left_solution .btn1{

    margin-left:0;

}

.left_solution dl dt{

    margin: 60px 0;

}

.left_solution dl dd{

    display: none;

}

.left_solution dl dt button{

    width: 16px;

    height: 16px;

    background: #e6e6e6;

    margin-right: 10px;

    -moz-border-radius: 50%;

         border-radius: 50%;

}

.left_solution dl dt button.active{

    background: #2e37e1;

}



/* 案例参考 */

.case_main{

    overflow: hidden;

}

.case_mainimg{

    width: 99999px;

    position: relative;

    padding-bottom: 20px;

}

.case_mainimg a{

    display: block;

}

.case_mainimg li{

    float: left;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}



.case_mainimg li img{

    width: 100%;

    -moz-border-radius:8px;

         border-radius:8px;

}

.case_mainimg li>a{

    background: #fff;

    padding: 30px;

    -moz-border-radius-bottomleft:8px;

         border-bottom-left-radius:8px;

    -moz-border-radius-bottomright:8px;

         border-bottom-right-radius:8px;

    display: none;

}

.case_mainimg li>a h4{

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.case_mainimg li>a p{

    line-height:24px;

    color: #666;

    margin-top: 12px;

}

.casebtn{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 25%;
    z-index: 11;
    opacity: 0.8;
}
.casenext{
    right: 0;
    background: rgba(0,0,0,0.4) url(../image/right.png) center no-repeat;
    -moz-background-size: 54px;
         background-size: 54px;
}
.caseprev{
    background: rgba(0,0,0,0.4) url(../image/left.png) center no-repeat;
    -moz-background-size: 54px;
         background-size: 54px;
}

.case_mainimg .caseshow img{

    -moz-border-radius-bottomleft: 0 !important;

         border-bottom-left-radius: 0 !important;

    -moz-border-radius-bottomright: 0 !important;

         border-bottom-right-radius: 0 !important;

}

.caseshow a{

    display: block !important;

}

.caseshow{

    -webkit-box-shadow:0 12px 20px rgba(0,0,0,0.1);

    -moz-box-shadow:0 12px 20px rgba(0,0,0,0.1);

         box-shadow:0 12px 20px rgba(0,0,0,0.1);

}

.case_btn{
    text-align: center;
    margin-top: 8px;
}
.case_btn dl{
    display: inline-block;
}
.case_btn dl dd{
    width: 20px;
    height: 20px;
    float: left;
    background: url(../image/case-btn.png) center no-repeat;
    transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -webkit-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
}
.case_btn dl .active{
    background: url(../image/case-btnac.png) center no-repeat;
}

/*map*/

.anchorBL{

    display: none;

}

/* contact */

.input2{

    border: 1px #666 solid;

    width: 47%;

    padding-left: 20px;

    height: 48px;

    -moz-border-radius: 4px;

         border-radius: 4px;

    font-size: 20px;

    color: #666;

    margin-bottom: 5%;

}

.input3{

    border: 1px #666 solid;

    width: 100%;

    padding-left: 20px;

    padding-top: 12px;

    height: 180px;

    -moz-border-radius: 4px;

         border-radius: 4px;

    font-size: 20px;

    color: #666;

    font-family:Microsoft YaHei;

    margin-bottom: 5%;

}

.contact{

    padding: 0 8%;

    padding-bottom:10%;

}

.contact .dfl{

    float: left;

    width: 48%;

}

.contact .dfr{

    float: right;

    width: 48%;

}

.contact dd{

    margin-bottom: 30px;

}

.contact dd span{

    word-wrap: break-word;

    display: block;

    padding-left: 48px;

    background-position: left 7px;

    background-repeat: no-repeat;

    -moz-background-size: 30px;

         background-size: 30px;

    font-size: 20px;

    letter-spacing: 1px;

    line-height: 44px;

}

.contact dd img{

    float: left;

    margin-left:48px;

    height: 100px;

}

/* 頁腳 */

.footer{

    padding: 0 4%;

    background: #454647;

    color: #fff;

}

.footer dd{

    width: 20%;

    float: left;

    font-size: 16px;

    margin-bottom:10px;

}

.footer dd a{

    color: #ccc;

}

.footer dd a:hover{

    text-decoration: underline;

}

.footer dt{

    padding-top:40px;

    font-size:20px;

    padding-bottom:20px;

}

#adas{

    color: #ccc;

    font-size: 16px;

}

.solutionimg .advantage01{

    display: block;

}

.solutionimg .advantage02{

    display: none;

}

/* 內頁二級導航 */

.contact_main{

    width: 100%;

    text-align:center;

    background:#fafafa;

    border-bottom: 1px #e0e0e0 solid;

    height: 81px;

    display: table;

    position: relative;

}



.vamb{

    display:inline-block;

    width:0px;

    height:100%;

    vertical-align:middle;

}



.title{

    display:inline-block;

    margin-bottom: -4px;

}



.title li{

    float: left;

}



.title li a{

    display: block;

    font-size: 18px;

    color: #333;

    line-height: 77px;

    letter-spacing: 1px;

    padding: 0 30px;

    border-bottom: 3px #fafafa solid;

}



.title .active{

    color: #2f37e2 !important;

    border-color: #2f37e2 !important;

}



/* 知識產權 */

.intellectual_main{

    width: 100%;

    margin-top: 80px;

}

.intellectual_main .intellectual{

    width: 92%;

    margin: 0 auto;

}

.intellectual_main .intellectual li{

    float: left;

    width: 22%;

    margin-left: 4%;

    position: relative;

}

.intellectual_main .intellectual li img{

    width: 100%;

}

.intellectual_main .intellectual li span{

    width: 100%;

    height: 100%;

    position: absolute;

    background: rgba(0,0,0,0.7);

    top: 0;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}



.intellectual_main .intellectual li div{

    width: 100%;

    height: 100%;

    display: table;

}

.intellectual_main .intellectual li div b{

    display: table-cell;

    vertical-align: middle;

    font-weight: normal;

}



.intellectual_main .intellectual li span h1{

    text-align: center;

    color: #fff;

    font-family: math;

    font-size: 80px;

}



.intellectual_main .intellectual li span h4{

    margin-top: 30px;

    text-align: center;

    color: #fff;

    font-size: 24px;

}



.intellectual_main .intellectual li:hover span{

    opacity: 0;

}



.disabled{

    pointer-events: none;

}



.right_solution a{

    display: block;

    width: 100%;

    height: 100%;

}

#marginnone{
    margin-left: 0;
}

#margin13{
    margin-left: 13%;
}

/* 及时新聞 */

.news_main{

    width: 92%;

    margin: 0 auto;

    padding: 1.6666% 0;

}

.news_main li{

    width: 29%;

    float: left;

    margin: 1.6666%;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

}

.news_main li:hover{

    -webkit-box-shadow:0 12px 20px rgba(0,0,0,0.1);

    -moz-box-shadow:0 12px 20px rgba(0,0,0,0.1);

         box-shadow:0 12px 20px rgba(0,0,0,0.1);

    -webkit-transform:translate3d(0, -2px, 0);

    -moz-transform:translate3d(0, -2px, 0);

         transform:translate3d(0, -2px, 0);

    opacity:1;

    filter:alpha(opacity=100)\9;

}

.news_main li div img{

    width: 100%;

}

.news_main li span a{

    display: block;

    background: #fff;

    padding: 28px;

}

.news_main li span a h4{

    font-size: 18px;

    color: #333;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.news_main li span a p{

    letter-spacing: 0;

    line-height: 28px;

    font-size: 16px;

    color: #666;

    margin-top: 12px;

    display: -webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

/*分頁樣式*/

.page_info{

    text-align:center;

    color:#333;

    font-size:14px;

}

.page_info span{

    padding:0 2px;

    font-weight:bold;

    font-size:14px;

}

.page_list{

    height:24px;

    line-height:24px;

    text-align:center;

    letter-spacing:0;

    font-family:"Arial";

    font-size:12px;

    margin-top:20px;

    font-size:14px;

    padding-bottom: 15px;

}

.page_list a{

    display:inline-block;

    color:#898989;

    background:#f8f8f8;

    text-align:center;

    padding:2px 10px;

    margin:0 3px;

    font-size:14px;}

.page_list a:hover{

    color:#fff;

    background:#2f37e2;

    font-size:14px;}

.page_list a.on{

    color:#fff;

    background:#2f37e2;

    font-size:14px;

}

/* 及时新聞樣式二 */

.news_main2{

    width: 100%;

}

.news_main2 li{

    width: 100%;

    padding: 2% 0;

    background: #f5f5f5;

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

    display: -webkit-box;

    display: -webkit-flex;

    display: -moz-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-align: center;

    -webkit-align-items: center;

       -moz-box-align: center;

        -ms-flex-align: center;

            align-items: center;

}

.news_main2 li:hover{

    background: #fff;

}

.news_main2 li:hover h4{

    color: #2f37e2;

}

.news_main2 li div{

    width:24%;

    padding-left: 4%;

    float: left;

}

.news_main2 li div img{

    width: 100%;

}

.news_main2 li span{

    display: block;

    width: 73%;

    padding-left: 4%;

}

.news_main2 li span a{

    display: block;

}

.news_main2 li span a h4{

    font-size: 24px;

    color: #333;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.news_main2 li span a p{

    letter-spacing: 0;

    color: #666;

    margin-top: 20px;

    font-size: 16px;

    line-height: 36px;

    display: -webkit-box;

    -webkit-line-clamp:3;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.twbjq{

    width: 92%;

    margin: 0 auto;

    overflow: hidden;

}

.twbjq h1{

    font-size: 24px;

    padding-top: 70px;

    padding-bottom: 50px;

    text-align: center;

}

.twbjq p{

    margin: 12px 0;

    color: #666;

}

.twbjq p img{
    max-width: 100%;
    margin: 0 auto;
    display: inline-block;

}

.case_title{

    padding: 0 4%;

    display: table-cell;

    vertical-align: middle;

}

.case_title dt{

    float: left;

    font-size: 16px;

    color: #666;

    margin-right: 20px;

    line-height: 36px;

}

.case_title dd{

    float: left;

    margin-right: 20px;

}

.case_title dd select{

    width: 120px;

    height: 36px;

    font-size: 14px;

    color: #999;

    padding: 0 12px;

    -moz-border-radius: 2px;

         border-radius: 2px;

    border-color: #e0e0e0;

}

.case_title dd select option{

    color: #666;

}

.case_title dd .select01{

    width:100%;

}

.casehide{

    display: none;

    margin: 0 !important;

}

/* 案例参考list */

.casenei_main{

    width: 92%;

    margin: 0 auto;

    padding: 1.6666% 0;

}

.casenei_main li{

    width: 16%;

    float: left;

    margin: 1.5%;

}

.casenei_main li:hover div img{

    -webkit-transform:translate3d(0, -2px, 0);

    -moz-transform:translate3d(0, -2px, 0);

         transform:translate3d(0, -2px, 0);

    opacity:0.8;

    filter:alpha(opacity=80)\9;

}

.casenei_main li div img{

    -webkit-transition: all 0.4s;

    -moz-transition: all 0.4s;

    transition: all 0.4s;

    width: 100%;

}

.casenei_main li span a{

    display: block;

    padding: 28px 0;

}

.casenei_main li span a h4{

    font-size: 18px;

    text-align: center;

    color: #333;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}

.casenei_main li span a p{

    letter-spacing: 0;

    text-align: center;

    line-height: 28px;

    font-size: 16px;

    color: #666;

    margin-top: 12px;

    display: -webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



.content{

    display: table;

    text-align: center;

}



.content p{

    padding: 0 8%;

    text-align: left;

}

.aboutshow{
    height: auto;

}

.content .aboutmath{

    margin: 0 auto;

    display:inline-block;

}

.content .aboutmath li{

    text-align: center;

    margin-top:80px;

    float: left;

    padding: 0 40px;

}

.content .aboutmath li h1{

    font-family: "math";

    font-size: 72px;

    line-height: 120px;

}

.content .aboutmath li h5{

    font-size: 20px;

}

.team .intellectual li span{

    opacity: 0;

}

.team .intellectual li:hover span{

    opacity: 1;

}



.team .intellectual li span h1{

    text-align: center;

    color: #fff;

    font-family: "微軟雅黑";

    font-size: 36px;

}



.team .intellectual li span h4{

    padding: 0 10%;

    margin-top: 30px;

    text-align: center;

    color: #fff;

    font-size: 18px;

    line-height:36px;

}



.cooperation_main{

    padding: 0 4%;

    padding-top: 4%;

}

.cooperation li{

    width: 25%;

    float: left;

    opacity: 0.75;

}

.cooperation li a{
    display: block;
}

.cooperation li img{

    width: 100%;



}

.cooperation li:hover{

    opacity: 1;

}

.left_solution_index li dl dd p{

    display: -webkit-box;

    -webkit-line-clamp:6;

    -webkit-box-orient: vertical;

    overflow: hidden;

}

.solution_more a{

    display: none;

}

.dingwei{

    position: absolute;

    top: -100px;

    width: 100%;

    height: 1px;

    z-index: -99;

    visibility: visible;

}

.sub-mouse{
  width: 30px;
  height: 43px;
  position: absolute;
  top: 30px; left: 50%;
  margin-left: -15px;
  cursor: pointer;
  z-index: -1;
  zoom: 0.9;
  -moz-transform: scale(0.9);
}
.sub-mouse:after{
  display: none;
  z-index: -1;
  position: absolute;
  content: '';
  top: -30px;
  left: 50%;
  height: 53px;
  border-right: 1px solid #333;
  margin-left: -1px;
}
.sub-mouse span{
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  -moz-animation: ani-svg 0.85s linear 0s alternate infinite;
       animation: ani-svg 0.85s linear 0s alternate infinite;
  -webkit-animation: ani-svg 0.85s linear 0s alternate infinite;
}
.sub-mouse i{
    width: 3px;
    height: 14px;
  position: absolute; bottom: 20px; left: 50%;
  background: #fff;
  -ms-transform: translateX(-50%);
      transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
}
@keyframes ani-svg{
    0%{
      -webkit-transform: translateY(-20px);
         -moz-transform: translateY(-20px);
              transform: translateY(-20px);
    }
    15%{
      -webkit-transform: translateY(-15px);
         -moz-transform: translateY(-15px);
              transform: translateY(-15px);
    }
    25%{
      -webkit-transform: translateY(-10px);
         -moz-transform: translateY(-10px);
              transform: translateY(-10px);
    }
    50%{
      -webkit-transform: translateY(0px);
         -moz-transform: translateY(0px);
              transform: translateY(0px);
    }
    65%{
      -webkit-transform: translateY(5px);
         -moz-transform: translateY(5px);
              transform: translateY(5px);
    }
    75%{
      -webkit-transform: translateY(10px);
         -moz-transform: translateY(10px);
              transform: translateY(10px);
    }
    100%{
      -webkit-transform: translateY(15px);
         -moz-transform: translateY(15px);
              transform: translateY(15px);
    }
}
@-webkit-keyframes ani-svg{
    0%{
      -webkit-transform: translateY(-20px);
    }
    15%{
      -webkit-transform: translateY(-15px);
    }
    25%{
      -webkit-transform: translateY(-10px);
    }
    50%{
      -webkit-transform: translateY(0px);
    }
    65%{
      -webkit-transform: translateY(5px);
    }
    75%{
      -webkit-transform: translateY(10px);
    }
    100%{
      -webkit-transform: translateY(15px);
    }
}
@-moz-keyframes ani-svg{
    0%{
      -moz-transform: translateY(-20px);
    }
    15%{
      -moz-transform: translateY(-15px);
    }
    25%{
      -moz-transform: translateY(-10px);
    }
    50%{
      -moz-transform: translateY(0px);
    }
    65%{
      -moz-transform: translateY(5px);
    }
    75%{
      -moz-transform: translateY(10px);
    }
    100%{
      -moz-transform: translateY(15px);
    }
}

.mh{
    min-height: 780px;
}

.myTop a.active {
    opacity: 1;
    visibility: visible;
}

.myTop{width: 80px; height: 400px;position: fixed;right: 0;bottom: 0px; z-index: 10;}
.myTop a{width: 100%;
    height: 80px;
    text-align: center;
    line-height: 80px;
    color: #000;
    display: block;
    position: relative;
    transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
}
.myTop p{height: 80px;
    line-height: 80px;
    width: 240px;
    color: rgba(0,0,0,0);
    padding-left: 80px;
    font-size: 14px;
    background: rgba(255,255,255,0.15);
    position: absolute;
    left: 0;
    top: 0;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
}
.myPhone p{background: rgba(255,255,255,.15) url(../image/mynum.png) no-repeat 27px center;}
.myPhone:hover p{background: rgba(0,0,0,.4) url(../image/mynum1.png) no-repeat 27px center;left: -140px;color: #fff;}
.myQQ{background: rgba(255,255,255,0.15) url(../image/myqq.png) no-repeat center;}
.myQQ:hover{background-image: url(../image/myqq1.png);background-color: rgba(0,0,0,.4);}
.GoTop{background: rgba(255,255,255,0.15) url(../image/top.png) no-repeat center;}
.GoTop:hover{background-image: url(../image/top1.png);background-color: rgba(0,0,0,.4);}

#video1{
    padding: 0px;
    background: none;
}
#video1 video{
    width: 100%;
    height: auto;
}

.tel400{
     font-family: 'math';
     font-size: 32px;
     line-height: 100px;
}
#sbteam{
    width: 66%;
}

#sbteam .intellectual{
    width: 100%;
}

#sbteam .intellectual li{
    margin-left: 0;
}
.team-button{
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    z-index: 11;
    opacity: 0.8;
}

.swiper-button-next{
    right: 0px;
    background: rgba(0,0,0,0.4) url(../image/right.png) center no-repeat;
    -moz-background-size: 54px;
         background-size: 54px;
}
.swiper-button-prev{
    left: 0px;
    background: rgba(0,0,0,0.4) url(../image/left.png) center no-repeat;
    -moz-background-size: 54px;
         background-size: 54px;
}
.recruit{
    text-align: left;
    width: 66%;
    margin: 0 auto;
}
.recruit li{
    border-bottom: 1px #e5e5e5 solid;
    padding: 40px 0;
    background: url(../image/bottom.png) right 40px no-repeat;
    transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -webkit-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -ms-transition: all .4s cubic-bezier(0.35, 0.45, 0.55, 1) 0s;
    -moz-background-size: 36px;
         background-size: 36px;
}
.recruit li.active{
    background: url(../image/top2.png) right 40px no-repeat;
    -moz-background-size: 36px;
         background-size: 36px;
}
.recruit li h1{
    font-size:28px;
    color:#333;
    line-height: 28px;
    margin-bottom: 18px;
}
.recruit li h2{
    font-size:20px;
    color: #999;
    line-height: 18px;
    margin-bottom: 16px;
    font-weight: normal;
}
.recruit li h3{
    font-size:18px;
    line-height: 18px;
}
.recruit-main{
    margin-top: 40px;
    display: none;
}
.recruit-main p{
    width: 80%;
    padding: 0;
    margin-left: 0;
    margin-bottom: 20px;
}
video::-internal-media-controls-download-button {
    display:none;
}

video::-webkit-media-controls-enclosure {
    overflow:hidden;
}

video::-webkit-media-controls-panel {
    width: calc(100% + 30px);
}
