@charset "utf-8";
/* CSS Document */
body{font-family:"Noto Sans T Chinese", "微軟正黑體", sans-serif; font-size:18px; line-height:1.7em; min-width:350px; color:#fff;}
a, *:hover, *:active{ 
/*-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in;*/
-webkit-transition: color 0.3s ease-in, background 0.3s ease-in, border 0.3s ease-in, text-decoration 0.3s ease-in; 
-moz-transition: color 0.3s ease-in, background 0.3s ease-in, border 0.3s ease-in, text-decoration 0.3s ease-in; 
-ms-transition: color 0.3s ease-in, background 0.3s ease-in, border 0.3s ease-in, text-decoration 0.3s ease-in; 
-o-transition: color 0.3s ease-in, background 0.3s ease-in, border 0.3s ease-in, text-decoration 0.3s ease-in; 
transition: color 0.3s ease-in, background 0.3s ease-in, border 0.3s ease-in, text-decoration 0.3s ease-in; text-decoration:none; color:#FFF;}
.clean{ clear:both;}
ul li{ list-style:none;}
/*clean*/
.cf:before,
.cf:after { content:""; display:table;}
.cf:after { clear:both; }
/* For IE 6/7 (trigger hasLayout) */
.cf { zoom:1;}

/*placeholder*/
.placeholder { color: #FFF; }
.placeholderFocus { color: #000;}
::-webkit-input-placeholder { color:#FFF; }
::-moz-placeholder { color:#FFF; } /* firefox 19+ */
:-ms-input-placeholder { color:#FFF; } /* ie */
input:-moz-placeholder { color:#FFF; }

/*header*/
header{ width:100%; position:fixed; display:inline-block; height:76px; background:rgba(255, 255, 255, 0.6); display: none;}
.inheader{ width:100%; max-width:1200px; margin:0 auto; height:76px;  }
.logo{ width:162px; height:56px; overflow:hidden; position:relative; margin:10px 20px; float:left;  }
.logo img{ width:100%; max-width:100%; }
.logo h1{position:absolute; text-indent:-9999px;}
ul.icon{ width:230px; float:right; padding-top:20px;}
ul.icon li{ width:39px; margin-left:5px; float:left;}


.cd-vertical-nav ul li:last-child{display:none;}

/*contenter*/
img{width:100%;}
#contenter{background:url(../images/banner.jpg) no-repeat top center, #000000; background-size:100%; padding-top:53%; padding-bottom:30px; position: relative;}
.header-url{position:absolute; right:20px; top:10px; color:#ff0000; font-size:0.8em; line-height:1em;}
.header-url a{color:#ff0000; margin:0 2px;}

.action, .process, .note{width:95%; margin:20px auto 0px auto; max-width:1200px;}


/*action*/
.action-intro{width: 100%; margin:0 auto; background:url(../images/banner-info-line.png) no-repeat; background-size:100% 100%; padding:3% 8%; text-align:center; margin-top:-1px;}
.action-intro .action-slogan{width:70%; margin:0 auto;}
.action-intro>ul{width:100%; text-align:left; margin:20px auto;}
.action-intro>ul>li{margin-bottom:10px; text-indent: -5em; margin-left:5em;}
.action-intro>ul>li span{border-bottom: 1px #FFF solid; padding-bottom:5px;}
.action-intro>ul>li em{ color:#ff0000;}
.action-intro>ul>li:last-child{text-indent:-3em;}
.action-mark{margin:20px 0; text-indent: 0em;}
.action-mark figure{width:100%; margin:0 auto 30px auto; text-align:left;  padding-bottom:20px;}
.action-mark figure:first-child{border-bottom:dotted 1px #ccc;}
.action-mark figure .mark_img{width: 20%; display:inline-block;}
.action-mark figure .mark_img img{width:100%; vertical-align: middle;}
    .action-mark figure figcaption {
        width: 78%;
        width: -webkit-calc(80% - 20px);
        width: -moz-calc(80% - 20px);
        width: calc(80% - 20px);
        display: inline-block;
        padding: 0 0 0 10px;
        vertical-align: middle;
    }
.action-mark figure figcaption h3 span, .action-intro ul li b{ font-size:0.7em; padding:0.25em; border:none; font-weight:normal;}
.action-mark figure figcaption p{margin:10px 0;}
.action-mark figure figcaption p img{width:auto; max-width:80%;}
.action-mark figure figcaption article{font-size:1.2em; font-weight:bold; margin-bottom:5px;}


.login-button{background: url(../images/button-line.png) no-repeat; background-size:100%; width:100%; text-align:center; max-width:1200px; margin:-2px auto 0 auto;}
.login-button a{width:15%; margin-top:-2%; display:inline-block;}
.login-button a>img{ width:100%;}

/*process*/
.process img{ width:auto;}
.process-table{width:100%;  margin:0 auto 50px auto; display: table; border-collapse: collapse; border-collapse:separate;border-spacing:10px;background: #fcf1ff; /* Old browsers */
background: -moz-linear-gradient(45deg,  #fcf1ff 0%, #f0f9ff 3%, #db2784 18%, #0db9de 90%, #ffffff 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(45deg,  #fcf1ff 0%,#f0f9ff 3%,#db2784 18%,#0db9de 90%,#ffffff 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg,  #fcf1ff 0%,#f0f9ff 3%,#db2784 18%,#0db9de 90%,#ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcf1ff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}
.row{display: table-row;}
.cell1, .cell2 { display: table-cell; width: 20%; text-align:center; background-color:#000;  padding:10px; vertical-align:middle;}  
.cell2 { width: 80%; text-align:left;}  
.cell2 ul li{text-indent: -2em; margin-left:2em;}


.search-button{width:100%; text-align:center;}
.search-button a{width:15%;display:inline-block;}
.search-button a>img{ width:100%;}

/*note*/
.note img{width:auto;}
.note ul{ width:95%; margin:10px auto;}
.note ul li{text-indent: -1.5em; margin-left:1.5em;}
.note ul li span{ width:1.5em; text-align:center; display:inline-block;}
.note-btn{width:95%; margin:40px auto;}
.btn-button{ width:100%; text-align:center;}
.btn-button img{ width:15%;}
.btn-button a:nth-of-type(1){margin-right:50px;}
.note-bg {
    background: url(../images/note-dot.png) repeat-x;
    width: 60%;
    width: -webkit-calc(100% - 260px);
    width: -moz-calc(100% - 260px);
    width: calc(100% - 260px);
    height: 60px;
    display: inline-block;
    text-align: right;
    background-position: right 65%;
}

ul.hot-pro{margin: 20px auto; float:left; width:100%;}
ul.hot-pro li{ width: 24%; margin:0 1% 1% 0; display:inline-block; float:left; text-indent: 0em;}
ul.hot-pro li img{width:100%;}



footer{ background:#000; text-align:center; font-size:0.6em; border-top: #e40000 solid 2px; line-height:1.5em; padding:5px 0;}
.infooter { width:80%; margin:0 auto; }
.copyright, .footer-contact{ color:#999; font-size:0.5em;}



.qm-modal h1{width:12%;display:inline-block; vertical-align:middle;}
.qm-modal .qm-info {
        width: 80%;
        width: -webkit-calc(88% - 50px);
        width: -moz-calc(88% - 50px);
        width: calc(88% - 50px);
}


.qm-table{border-spacing:5px; margin:10px auto;}
.qm-table row a{width:100%; float:left; display:inline-block;}
    .qm-table .row .cell1, .qm-table .row .cell2, .qm-table .row .cell-mark {
        width: 28%;
        width: -webkit-calc(30% - 5px);
        width: -moz-calc(30% - 5px);
        width: calc(30% - 5px);
        margin-right: 5px;
        padding: 5px;
        background: #fff;
        color: #000;
        font-size: 0.9em;
        float: left;
    }
.qm-table .row:first-child .cell1, .qm-table .row:first-child .cell2{ background:#999; color:#fff; text-align:center; height:59px; line-height:59px;}
.qm-table .row:first-child .cell-mark{ color:#fff; text-align:center;}


    .qm-table .row .cell2 {
        width: 34%;
        width: -webkit-calc(36% - 5px);
        width: -moz-calc(36% - 5px);
        width: calc(36% - 5px);
    }
.qm-table .row .cell2 a{color:#000;}
.qm-table .row .cell-mark{width:34%; background: none; padding:0; margin-right:0;}


.qm-table .row:first-child .cell-mark .cell-mark-1, .qm-table .row:first-child .cell-mark .cell-mark-2, .qm-table .row:first-child .cell-mark .cell-mark-3{ background:#999; padding:0px;}
.qm-table .row:first-child .cell-mark .cell-mark-2:hover, .qm-table .row:first-child .cell-mark .cell-mark-3:hover{color:#FFF;}
.qm-table .row .cell-mark .cell-mark-1, .qm-table .row .cell-mark .cell-mark-2, .qm-table .row .cell-mark .cell-mark-3{background:#FFF; padding:5px; text-align:center; display:inline-block;}
.qm-table .row .cell-mark .cell-mark-2:hover, .qm-table .row .cell-mark .cell-mark-3:hover{color:#000;}
.qm-table .row:nth-of-type(2n+3) .cell1, .qm-table .row:nth-of-type(2n+3) .cell2, .qm-table .row:nth-of-type(2n+3) .cell-mark .cell-mark-2, .qm-table .row:nth-of-type(2n+3) .cell-mark .cell-mark-3{ background:#ccc;}
.qm-table .row .cell-mark .cell-mark-1{ width:100%; margin-bottom:5px; }
.qm-table .row .cell-mark .cell-mark-2{ width: 48%; width: -webkit-calc(50% - 8px); width: -moz-calc(50% - 8px); width: calc(50% - 8px); margin-right:3px;}
.qm-table .row .cell-mark .cell-mark-3{ width: 48%; width: webkit-calc(50% - 1px); width: -moz-calc(50% - 1px); width: calc(50% - 1px);}





.tabs{width: 100%; float:left;}
.tabs ul{width:100%; float:left; margin-left:1px; margin:0 auto 10px auto;}
.tabs ul li{line-height:30px; width:90px; height:40px; float:left; text-align:center; cursor:pointer; padding:10px; margin-right:10px; font-size:1em;}
.tabs ul li:last-child{margin-right:0px;}
.tabs .tab-action{ color:#88a0b9; border-bottom:3px #88a0b9 solid;}
.tabs .tab-unaction{color:#CCC; border-bottom:3px #CCC solid;}
.tabs .tabs_info{width:100%; margin-bottom:5px;}

.qm-table1{margin:10px auto;}
.qm-table1 .row:first-child .cell1, .qm-table1 .row:first-child .cell2{ height:40px; line-height:30px;}
    .qm-table1 .row .cell2 {
        width: 68%;
        width: -webkit-calc(70% - 5px);
        width: -moz-calc(70% - 5px);
        width: calc(70% - 5px);
    }
    .qm-table1 .row .cell1 {
        width: 28%;
        width: -webkit-calc(30% - 5px);
        width: -moz-calc(30% - 5px);
        width: calc(30% - 5px);
    }

.pro-button{width:100%; text-align: right; padding:10px 0; margin-bottom:5%;}
.pro-button>a>img{width:30%; max-width:400px; min-width:280px;}
.pro-login-button a{width:25%; margin-top:-4%;}

/*}
.qm-table .row .cell1{width:20%;}
.qm-table .row:first-child .cell1, .qm-table .row:first-child .cell2{ background:#999; color:#fff; text-align:center;}
.qm-table .row:nth-of-type(2n+3) .cell1, .qm-table .row:nth-of-type(2n+3) .cell2{ background:#ccc;}
.qm-table .row .cell2:last-child{ background: none; padding: 0;}

.qm-table .row .cell2 .cell-title{background-color: #999; color: #FFF; text-align: center;}
.qm-table .row .cell2 .cell5{margin:5px 3px 0 0; }



.qm-cell-title{background-color: #999; color:#FFF; text-align:center;}
.qm-table .cell4{width:100%;}
.qm-table .cell5{width: calc(50% - 7px); display:inline-block;text-align:center;}
.qm-table .cell6{width: calc(50% - 2px); display:inline-block; text-align:center;}
.qm-table1 .row .cell1, .qm-table1 .row .cell2{width:20%;}
.qm-table1 .row .cell1{width:15%;}
.qm-table1 .row .cell3{ width:30%;}*/





@media only screen and (max-width:800px) {
header{display: inline-block; height:55px; z-index:1; margin-top:-56px;}
header .logo{width:15%; min-width:90px;}
.header-url{display:none;}
.cd-vertical-nav ul li:last-child{display:inline-block;}
body{font-size:15px;}
#contenter{margin-top:52px;}
.btn-button a:nth-of-type(1){margin-right:30px;}
.process-table{border-spacing:5px;}
.login-button a{margin-top:-3%;}
.login-button a, .search-button a, .btn-button img{width:20%;}
.process>img{ height: 35px;}
.note>img{ width:150px;}
    .note-bg {
        width: -webkit-calc(100% - 155px);
        width: -moz-calc(100% - 155px);
        width: calc(100% - 155px);
        height: 35px;
    }
.action-mark{margin-left: -5em;}

ul.hot-pro li{ width: 32%;}

.pro-button{margin-bottom:10%;}
.pro-login-button a{width:30%; margin-top:-5%;}
}

@media only screen and (max-width:600px) {
body{font-size:12px;}
.banner-intro ul, .banner-intro figure{ width:73%;}
.banner-intro figure figcaption p img{width:50%;}
.login-button a{margin-top:-4%;}
.login-button a, .search-button a, .btn-button img{width:25%;}
.process-table{margin: 0 auto 30px auto;}
.action-mark figure figcaption p img{max-width:initial; height:25px;}


.pro-login-button a{width:40%; margin-top:-6%;}
}



@media only screen and (max-width:500px) {
body{font-size:12px; }
.banner-intro ul, .banner-intro figure{ width:73%;}
.banner-intro figure figcaption p img{width:60%;}
.login-button a{margin-top:-5%;}
.login-button a, .search-button a, .btn-button img{width:30%;}
.process-table{margin: 0 auto 20px auto;}

.infooter { width:100%; margin:0 auto;}
.copyright, .footer-contact{line-height: 1.2em; font-size:0.8em;}

ul.hot-pro li{ width: 49%;}

.pro-button{margin-bottom:20%;}
.pro-login-button a{width:60%; margin-top:-10%;}

.qm-table1 .row .cell2 {
        width: 58%;
        width: -webkit-calc(60% - 5px);
        width: -moz-calc(60% - 5px);
        width: calc(60% - 5px);
}
.qm-table1 .row .cell1 {
        width: 38%;
        width: -webkit-calc(40% - 5px);
        width: -moz-calc(40% - 5px);
        width: calc(40% - 5px);
}

}

@media only screen and (max-width:400px) {
.action-mark figure figcaption p img{max-width:initial; height:20px;}
.qm-table .row .cell1, .qm-table .row .cell2, .qm-table .row .cell-mark{font-size:0.7em;}
}