/* 縮小失敗。正在傳回未縮小的內容。
(231,38): run-time error CSS1034: Expected closing parenthesis, found ','
(231,38): run-time error CSS1042: Expected function, found ','
(231,42): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
(580,36): run-time error CSS1046: Expect comma, found '0'
(580,39): run-time error CSS1046: Expect comma, found ')'
(1382,43): run-time error CSS1034: Expected closing parenthesis, found ','
(1382,43): run-time error CSS1042: Expected function, found ','
(1382,48): run-time error CSS1062: Expected semicolon or closing curly-brace, found ')'
 */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*customized*/
button{
    border: 0;
    background-color: transparent;
    cursor: pointer;
    outline: none;
}

a{
    text-decoration: none;
}

input[type=button]{
	border: 0;
	background-color: transparent;
}

/*======下拉選單樣式======*/
select,
input[type=date] {
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
    border: 1px solid #A2A6AB;
    /*移除箭頭樣式*/
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    /*改變右邊箭頭樣式*/
    /*background: url("../image/select.png") no-repeat right top transparent;*/
    /*padding: 3px 8px;*/
    height: 34px;
    text-indent: 4px;
    padding-right: 30px;
}
/*IE隱藏箭頭樣式*/
input[type=date]::-ms-expand,
select::-ms-expand { 
    display: none; 
}



/*輸入框*/
input,textarea{    
    height: 34px; 
    border: 1px solid #A2A6AB;   
    border-radius: 30px;
    outline: none;

    font-size: 16px;
    text-indent: 4px;
}

/*勾選框*/
[type=checkbox]{
    width: 20px;
    height: 20px;
    vertical-align: middle
}

/*段落文章*/
textarea{
    line-height: normal;
    resize: none;
    overflow: auto;
}

/*radio button*/
input[type=radio]{
	margin-right: 6px;
}

* {
    box-sizing: border-box;
  }
html,body{
    width: 100%;
    height: 100%;
}
body{
    font-family:微軟正黑體,Microsoft JhengHei,Arial,helvetica,sans-serif,Apple LiGothic Medium;
}
a{
    color: #000;
}
h1{
    font-size: 4em;
    line-height: 1.25em;
}
h2{
    font-size: 2em;
    line-height: 1.5em;
}
h3{
    font-size: 1.5em;
    font-weight: bold;
    line-height: 2em;
}
h4{
    font-size: 1.25em;
    font-weight: bold;
    line-height: 1.5em;
}
p{
    line-height: 1.25em;
    word-wrap: break-word;
    word-break: break-word;
}
span{
    font-size: 14px;
}
input{
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    /*min-width: 400px;*/
    vertical-align: middle;
}
select{
    appearance: auto;
    border: 1px solid #CCCCCC;
    min-width: 200px;
    vertical-align: middle;
    margin: 5px 0px;
}
.containerH {
    max-width: 1542px;
    margin: 0 auto;
}
.container{
    max-width: 1428px;
    margin: 0 auto;
}
section{
    position: relative;
    width: 100%;
}

/* header */
article{
    position: relative;
}
article img{
    max-width: 100%;
}
.redline {
	width: 100%;
	height: 30px;
    background-color:#B60033;
    color: #fff;
    font-weight: bold;
    text-align: right;
    padding: 7.5px;
}
.redline span{
    color: #fff;
}
.redline img{
    vertical-align: middle;
    width: 14px;
}
.redline .drop_m{
    display: inline-block;
}
.redline .drop_m a {
    padding: 0px;
    font-size: 14px;
    margin-bottom: 0px;
    color: #fff;
}
.redline .drop_m .dropbtn img{
    margin: 0px 3px;
}
.redline .drop_m-content, .redline .drop_m:hover .drop_m-content{
    position: absolute;
}
.redline .drop_m-content{
    width: 140px;
    top: 30px;
    background-color: #fff;
    box-shadow: 0px 3px 6px rgb(0,0,0,0.5);
    z-index: 1;
}
.redline .column {
    padding: 0px;
}
.redline .column a {
    text-align: center;
}
.redline .drop_m .column a{
    color: #000;
    padding: 10px 0px;
}
.redline .drop_m .column a:hover{
    color: #fff;
    background: #b60033;
    border-bottom: 0px solid #000;
}

/*navigation*/
.top_white{
    width: 100%;
    background-color: white;
}
.logo, .top_white .navbar{
    display: inline-block;
    padding: 15px 10px;
}
.logo{
    float: left;
}
.nav{
    transform: translateY(30%);
    width: 100%;
}
.nav_m{
    display: none;
}
.navbar {
    overflow-y: hidden;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0 auto;
    padding-left: 3%;
    padding-top: 30px;
}
.navbar a {
    font-size: 16px;
    text-align: center;
    text-decoration: none;
}

/*navigation_dropdown*/
.dropdown {
    overflow: hidden;
    display: block;
    padding: 15px 1%;
    float: left;
}
.dropdown .dropbtn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: black;
    background-color: inherit;
    font: inherit;
    margin: 0;
}
.dropdown-content, .dropdown-content2 {
    display: none;
    position: absolute;
    z-index: 1;
}
.dropdown-content2 {
    width: 100%;
    left: 0;  
    min-height: 300px;
    background-color: #fff;
    box-shadow: 0px 5px 5px rgba(0,0,0,0.25);   
}
.dropdown a:hover{
    border-bottom: 2px solid #B60033;
}
.dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content2{
    display: block;
    top: 100px;
}
.row {
    padding: 0px;
}
.column {
    padding: 0px 5px;
}
.column .column {
    padding: 0px 10px;
}
.column a {
    float: none;
    color: black;
    padding: 10px 0px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.column p {
    padding: 5px 0px;
}  
.column a:hover {
    border-bottom: 2px solid #B60033;
}

/*navigation_buttons*/
#menu_btn{
    display: none;
}
.navbar .btn1,.navbar .btn2{
    display: inline-block;
    border-radius: 5px;
    text-align: center;
    min-width: 60px; 
    font-weight: bold;
    padding: 5px 10px;
}
.navbar .btn1, .navbar .btn2{
    transform: translateY(10px); 
}

/*buttons*/
.btn1 a, .btn2 a{
    padding: 5px 10px;   
}
.btn1{
    background-color: #B60033;
    border: 1px solid #B60033;
}
.btn1:hover{
    background-color: #8d0028;
    border: 1px solid #B60033;
}
.btn1, .btn1 a, .btn3, .btn3 a{
    color: #fff;
}
.btn2{
    background-color: #fff;
    border: 1px solid #B60033;
}
.btn2:hover{
    color: #fff;
    background-color:#8d0028;
}
.btn2, .btn2 a{
    color: #B60033;
}
.btn1, .btn2, .btn3, .tab_btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    min-width: 80px;
    font-weight: bold;
}
.btn3{
    background-color: #FFAA00;
    border: 2px solid #AF7500;
}
.btn_l{
    font-size:24px;
    font-weight: normal;
}
.tab_btn{
    display: inline-block;
    border-bottom: 2px solid #CCCCCC;
    border-radius: 0px;
}
.tab_btn:hover, #current{
    border-bottom: 2px solid #B60033;
}

/*banner*/
article h1{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    text-align: center;
    top: 180px;
    padding: 20px;
    color: #fff;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
}
article span{
    display: block;
    padding-top: 20px;
    font-size: 16px;
    line-height: 1.5em;
    color: #fff;
    font-weight: bold;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
}
.head_info{
    position: absolute;
	width: 100%;
    height: 175px;
    top: 655px;
    padding: 40px 0;
    background-color:rgba(0, 109, 196, .75);
    color: #fff;
    font-weight: bold;
}
.head_info img{
    vertical-align: top;
}
.head_info .col4-r{
    transform: translateY(50%);
}

/*banner slide*/
article .slideshow-container, article .mySlides {
    height: 100%;
}
article .dot{
    padding: 7px;
    height: auto;
    width: auto;
    border: 2px solid #fff;
    opacity: 0.5;
}
article .active, article .dot:hover {
    background-color: #fff;
    opacity: 0.5;
}
/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}
@-webkit-keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}
@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

/*marquee*/
.marquee{
    padding: 5px 0;
    background-color: #FFAA00;
}
.marquee .container{
    overflow: hidden;
}
.marquee img{
    padding: 0px 3px;
}
marquee{
    max-width: 98%;
    vertical-align: bottom;
    float: right;
}
.marquee span{
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
}

/*section1*/
.sec1{
    background-image: url("../image/sec1_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-color: #eeeeee;
    height: 860px;
}
.sec1 > .container{
    text-align: center;
    padding: 50px 10px;
    height: 500px;
}
.sec1 button{
    display: block;
    margin: 40px auto;
}
.sec1_service{
    position: relative;
    width: 100%;
    height: 360px;
    padding: 40px;
    background-color: #707070;
    color: #fff;
}
.shape1{
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -10px;
    width: 20px;
    height: 20px;
    background-color: #707070;
    transform: rotate(45deg);
}
.sec1_service > .container > h3{
    text-align: center;
}
.sec1_service .col5{
    padding: 25px 0;
    display: inline-block;
}
.sec1_service .col5 img{
    padding: 0 10px;
    vertical-align: middle;
}
.sec1_service .col3{
    text-align: left;
}
.sec1_service .col3 img{
    width: 80px;
}
.descript{
    display: inline-block;
    vertical-align: top;
}
.des_right{
    width: 100%;
}
.agency{
    display: none;
}
.agency img{
    height: 50px;
    padding: 5px;
}

/*section2*/
.sec2{
    background-image: url("../image/sec2_bg.png");
    background-position-x: center;
    background-size: cover;
    color: #fff;
    height: 860px;
    padding: 40px;
}
.sec2 .descript{
    transform: translateY(70%);
    display: block;
    float: left;
    text-shadow: 0px 0px 5px rgb(0 0 0);
}
.sec2 .descript img{
    padding: 20px 30px 20px 0px;
}
.sec2 p{
    padding: 20px 0;
}
.sec2 button{
    display: block;
}
.sec2 img{
    display: inline-block;
    transform: translateY(15%);
}

/*section3*/
.sec3{
    background-image: url("../image/sec3_bg.png");
    text-align: center;
    display: inline-block;
    padding: 40px 0px;
}
.sec3 .col4 img{
    width: 100%;
}
.award{
    padding: 20px;
}
.award ul{
    text-align: left;
    line-height: 2em;
}
.award ul li{
    list-style: disc;
}
.award ul ul li{
    margin-left: 24px;
}
.issue .col4{
    width: 49%;
    padding: 0 10%;
}
.card{
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
    background-color: #fff;
}
.card img{
    width: 100%;
}
.sec3 .card{
    margin: 0 auto;
    width: 95%; 
}
.sec3 .col2, .sec3 .col3, .sec3 .col4{
    padding-bottom: 20px;
}
.sec3 .col3 .card{
    text-align: left;
    padding-bottom: 20px;
}
.sec3 p{
    line-height: 1.5em;
    font-weight: bold;
}
.sec3 .card p:first-of-type, .sec3 .col4 p{
    padding-top: 10px;
}

/*footer*/
footer{
    width: 100%;
    background-color: #707070;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
}
footer a{
    color: #fff;
}
footer>.container{
    padding: 40px 10px;
}
.ft_sitemap{
    display: inline-block;
    padding: 5px;
    width: 100%;
    text-align: center;
}
.ft_sitemap ul li, .ft_contact ul li{
    display: inline-block;
    font-size: 1.25em;
    padding: 5px;
}

/*float buttons*/
.float_btn, .float_sms{
    position: fixed;
    top: 200px;
}
.float_btn {
    right: 60px;
    width: 70px;
}
.float_btn a img {
    width: 40px;
    display: block;
    margin: 0px auto;
}
.float_btn a {
    background-color: #B60033;
    display: block;
    text-align: center;
    padding: 5px 0;
}
.float_hr{
    display: block;
    background-color: #B60033;
    padding: 1px;
}
.float_hr hr{
    width: 70%;
    border-width: 0.5px;
    border-style: solid;
}
.float_btn a:first-of-type{
    padding-top: 25px;
    border-radius: 50px 50px 0px 0px;
}
.float_btn a:last-of-type{
    padding-bottom: 25px;
    border-radius: 0px 0px 50px 50px;
}
.float_sms{
    left: 0px;
    width: 30px;
}
.float_sms img{
    padding-bottom: 2px;
}

.ft_contact{
    text-align: center;
}
.bottom{
    padding: 30px 0;
    text-align: center;
    background-color: #444444;
}

/* goTop button*/
#goTop{
    display: none;
    width: 70px;
    padding: 10px 0px 0px 0px;
}

/*columns*/
.col5{
    width: 19%;
    display: block;
}
.col4{
    /*float: left;*/
    width: 24%;
    /*width: 25%;*/
    display: inline-block;
    padding: 10px;
}
.col4-r{
    text-align: right;
}
.col3{
    /*float: left;*/
    width: 32.8%;
    display: inline-block;
}
.col2{
    /*float: left;*/
    width: 49%;
    display: inline-block;
}
.col1{
    padding: 10px;
    width: 100%;
    display: inline-block;
}
.col2:last-of-type, .col3:last-of-type, .col4:last-of-type, .col5:last-of-type{
    float: none;
}

/*cutlines*/
.cutline{
    display: none;
}
.cutline2{
    display: none;
}

/* inpages */
.pages h1{
    top: 40px;
}
.inpage{
    padding: 50px 10px;
}
.inpage > h3, .inpage >h3 >a{
    color: #B60033;
}
.detail h3{
    text-align: center;
}
.detail p{
    padding: 0.5em 0px;
    word-break: break-word;
}
.detail ol{
    list-style: decimal;
    margin-left: 1em;
}
.detail ul{
    list-style: disc;
    margin-left: 1.5em;
}
.detail li{
    line-height: 1.5em;
}
.goods{
    padding-bottom: 50px;
}
.goods > h3 {
    text-align: left !important;
}
.goods > table th{
    width: 15%;
}
.spec td{
    text-align: left;
}
.goods > table th, table td{
    border-right: 1px solid #EEEEEE;
}
.goods > table th:last-child, table td:last-child{
    border-right: 0px solid #EEEEEE;
}

/*news*/
.news .col2, .news .col3, .news .col4{
    float: left;
    padding: 10px;
}
.news .col4{
    width: 25%;
}
.news .col4 p{
    text-align: center;
}
.news h3{
    color: #B60033;
    display: block;
    float: left;
}
.news span{
    float: right;
    display: block;
    transform: translateY(1.5em);
}
.news hr{
    width: 100%;
}
.news td{
    text-align: left;
    overflow : hidden;
    text-overflow : ellipsis;
    white-space : nowrap;
    max-width: 200px;
}
.news td:first-child {
    border-top: 0px solid #EEEEEE;
}
.news .card p:first-of-type, .news .col4 p {
    padding-top: 10px;
}

/*login*/
.login, .signup{
    background-color: #fff;
    min-height: 80%;
}
.logcard, .signcard {
    text-align: center;
}
.logcard{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    padding: 50px;
    margin-top: -40px;
    max-width: 480px;
}
.logcard img, .signcard img{
    max-width: 100%;
}
.logcard input{
    width: 80%;
    min-width: 400px;
}
.signcard{
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 50px 20px;
}
.signcard input{
    max-width: 100%;
}
input[type=checkbox] {
    vertical-align: sub;
}
.tabs{
    padding: 20px 0px;
    width: 100%;
}
.tabs .tab_btn{
    float: left;
}
.signup select, .signup input, .signup .btn1{
    margin: 10px 0px;
}

/*study*/
.study{
    padding-top: 20px;
    text-align: center;
}
.study table{
    margin-bottom: 20px;
}
.study th{
    background: none;
}
.study tr{
    border-top: 0px solid #EEEEEE;
}
.study td{
    text-align: left;
}
.study span{
    color: #AAAAAA;
}
.study .card{
    margin-bottom: 20px;  
}
.list{
    display: inline-block;
    width: 66%;
    padding-right: 30px;
}
.list .head_img, .list .title{
    display: inline-block;
    vertical-align: middle;
}
.head_img{
    width:30%;
}
.list .title{
    padding-left: 10px;
    width: 69%;
}
.list h4{
    display: block;
    display: -webkit-box;
    text-overflow : ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25em;
    height: 1.25em;
}
.list .card{
    margin: 10px;
    margin-bottom: 20px;
}
.list .col2 {
    width: 47%;
    float: none;
}
.hot{
    display: inline-block;
    width: 33%;
    vertical-align: top;
}
.hot .card{
    padding: 20px;
}
.hot h3{
    color: #B60033;
}
.rank_tag{
    position: absolute;
    width: 30px;
    height: 30px;
    transform: translateY(-30px);
    text-align: center;
    padding: 2px 0px;
    background-color: #B60033;
    color: #fff;
    font-size: 1.5em;
}
.hot .head_img{
    width: 120px;
}
.hot .head_img, .hot .title {
    display: inline-block
}
.hot .top_title p, .hot .title p{
    display: block;
    display: -webkit-box;
    text-overflow : ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 3em;
    margin-bottom: 10px;
}
.hot .title p{
    width: 180px;
}
.hot_word{
    text-align: center;
}
.hot_word a{
    display: inline-block;
    background-color: #EEEEEE;
    padding: 5px;
    margin: 5px;
}
.more{
    color: #B60033;
}
.video_title{
    text-align: left;
    padding: 20px 20px 0px 20px;
}
.list .video h4{
    -webkit-line-clamp: 2;
    height: 2.5em;
}
.video_viewed{
    text-align: right;
    padding: 0px 20px 20px 20px;
}
.play {
    position: absolute;
    width: 80px;
    max-width:6%;
    transform: translate(160%,-160%);
    vertical-align: middle;
    text-align: center;
    opacity: 0.7;
}
.play:hover{
    opacity: 1;
}
.head_img .play {
    max-width: 4%;
    width: 60px;
    transform: translate(60%,-110%);
}

/*product*/
.product .btn1{
    padding: 5px 20px;
    font-size: 1em;
    vertical-align: middle;
    margin: 5px 0px;
}
.product .card{
    margin-top: 20px;
    padding: 30px;
}
.roll_list{
    background-color: #ADADAD;
}
.roll_list tbody{
    display:block;
    height:400px;
    overflow-y:scroll;
    background-color: #fff;
}
.roll_list thead, .roll_list > tbody tr {
    display:table;
    width:100%;
    table-layout:fixed;
    border-collapse: collapse;
}
.roll_list td{
    border: 0px solid #fff;
}
.roll_list tbody td{
    border-bottom: 1px solid #EEEEEE;

}
.roll_list thead {
    width: calc( 100% - 1em )
}

.expiry td{
    border-top: 0px solid #fff; 
    border-right: 0px solid #fff;  
}
.expiry td div:first-of-type{
    display: block;
    text-align: left;
    float: left;
}
.expiry td div:last-of-type{
    display: block;
    text-align: right;
    float: right;
}

/*client*/
.client > table{
    margin-bottom: 20px;
}
.client > table th, .client > table td{
    border-right: 1px solid #EEEEEE;
}
.client > table th:last-child, .client > table td:last-child{
    border-right: 0px solid #EEEEEE;
}
.steps{
    text-align: center;
}
.slide_view, .slide_desc{
    display:inline-block;
}
.slide_view{
    width:40%;
    text-align: right;
    padding-right: 20px;
}
.slide_single{
    text-align: center;
}
.slide_view img, .slide_single img{
    max-width: 240px;
    width:100%;
}
.slide_desc{
    width:50%;
    vertical-align: top;
    text-align: left;
    min-height: 430px;
}
.slide_desc h4{
    padding-bottom: 10px;
}
.steps .mySlides{
    padding: 0px 40px;
}

/*open_account*/
.open > .col2{
    padding: 20px 20px;
    width: 48%;
    min-height: 200px;
    margin: 20px 10px;
    vertical-align: top;
    text-align: center;
}
.open > .card > .col2{
    text-align: left;
}
.open .card img{
    width: auto;
    padding-right: 10px;
}

/*table*/
table{
    width: 100%;
    border-collapse: collapse;
}
th{
    background-color: #ADADAD;
    color: #fff;
}
th, td{
    padding: 15px;
    vertical-align: middle;
    border-top: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    border-collapse: collapse;
}
td{
    text-align: center;
}

/*slide show*/
.mySlides {
    display: none;
}
.slideshow-container {
  max-width: 100%;
  position: relative;
  margin: auto;
}
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
.prev{
    left: 0;
}
.next {
  right: 0;
}
.prev:hover, .next:hover {
    filter: brightness(0.75);
}
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 0 2px;
  border: 1px solid #B60033;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
.active, .dot:hover {
  background-color: #B60033;
}

/*software*/
.software .head_left {
    position:absolute;
    text-align: left;
    left: unset;
    right: unset;
    top: 150px;
    padding: 20px;
}
.software .head_left h1{
    position:relative;
    text-align: left;
    top: 0px;
    padding: 0px;
}
.software .btn3{
    width: 240px;
    margin: 5px;
}
.software .head_right{
    position:absolute;
    top: 0;
    right: 15%;
    width: 35%;
    padding: 20px;
}
.software .head_right img{
    max-width: none;
    width: 100%;
    overflow-x: hidden;
}
.sec_soft {
    background-image: url(../image/software_bg.jpg);
    text-align: center;
    display: inline-block;
    padding: 40px 0px;
}
.software .col1 {
    padding: 20px;
}
.software .card{
    padding: 50px;
    margin-top: -100px;
    margin-bottom: 50px;
}
.software .fea{
    display:inline-block;
    width: 30%;
    padding: 20px;
}
.software .fea img{
    max-width: 100px;
}
.software span{
    display: block;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2em;
}
.software .download{
    padding: 100px 0px;
}
.software .downleft {
    transform: translate(10%, 15%);
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.software .btn1{
    min-width: 200px;
    margin: 5px;
}
.software .btn1 img{
    width: 20px;
    margin-right: 5px;
}
.software .downright{
    transform: translate(-20%,10%);
}
.software .downright img{
    width: 100%;
}

@media(max-width: 1600px){
    h1{
        font-size: 3.5em;
    }
    article h1 {
        top: 100px;
    }

    /*study*/
    .list .col2 {
        width: 45%;
    }

    /*software*/
    .software h1{
        top: 100px;
    }
}

@media(max-width: 1200px){
    html{
        overflow-x: hidden;
    }
    .redline .dropdown {
        display: block;
    }
    article {
        width: 100%;
        height: calc(100vw * 0.583);
        /* height: 600px;*/
    }
    article h1 {
        top: 200px;
    }
    article img {
        /*object-fit: none;
        object-position: center top;*/
        height: 100%;
    }
    h1{
        font-size: 3em;
    }    

    .dropdown:hover .dropdown-content, .dropdown:hover .dropdown-content2 {
        right: 0;
    }
    .navbar {
        padding-top: 0px;
    }

    .pages{
        height: 370px;
    }

    /*nav mobile*/
    .nav_m{
        display: inline-block;
    }
    .nav_m {
        height: 100%;
        width: 0%;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
        transition: 0.5s;
        background-color: #707070;
        background-color: rgba(112,112,112,0.95);
        box-shadow: 5px 0px 10px rgb(0,0,0,0.25);
    }
    .nav_m-content {
        position: relative;
        width: 100%;
        margin-top: 60px;
    }
    .drop_m a, .column p {
        padding: 20px;
        text-decoration: none;
        font-size: 1.25em;
        display: block;
        transition: 0.3s;
        margin-bottom: 10px;
    }
    .nav_m .closebtn {
        position: absolute;
        top: 0px;
        right: 10px;
        font-size: 4em;
    }
    .closebtn, .drop_m .column a, .column p {
        color: #fff;
    }
    .drop_m .dropbtn {
        border: none;
        outline: none;
        color: white;
        background-color: inherit;
        margin: 0;
    }
    .drop_m-content{
        z-index: 1;
        background-color: rgba(0,0,0, 0.25);
    }
    .drop_m:hover .drop_m-content{
        display: block;
        position: relative;
    }    
    .drop_m .dropbtn:hover{
        background: #b60033;
    }
    .column{
        padding: 0px 10px;
    }
    .column a:hover {
        background: #b60033;
        border-bottom: 0px solid #000;
    }
    .nav_m .btn1, .nav_m .btn2{
        display: inline-block;
        margin: 10px 5px;
        padding: 10px 20px;
        border-radius: 5px;
        text-align: center;
        min-width: 80px;
        font-weight: bold;
    }
    .dropdown, .navbar .btn1, .navbar .btn2 {
        display: none;
    }
    #menu_btn{
        display: block;
        float: right;
        width: 75px;
        padding: 15px;
    }

    marquee {
        max-width: 97%;
    }
    .sec1 {
        background-image: url(../image/sec1_bg_m.png);
        background-size: contain;
        height: auto;
    }
    .sec1_service {
        height: 430px;
    }
    .sec1_service .col3 {
        text-align: center;
        padding: 15px;
    }
    .sec1_service .col3 img{
        display: block;
        margin: 0 auto;
    }
    .sec1 > .container {
        height: auto; 
    }
    .agency{
        display: block;
    }

    .sec2 .descript {
        transform: translateY(50%);
    }
    .sec2 img {
        transform: translateY(30%);
    }    
    .float_btn {
        right: 30px;
    }

    /*study*/
    .hot .title p{
        width: 120px;
    }
    .list h4 {
        width: 100%;
    }
    .video h4{
        width: 100%;
    }
    .play {
        transform: translate(180%,-170%);
    }
    .head_img .play {
        max-width: 6%;
    }

    /*open_account*/
    .open > .col2{
        min-height: 350px;
        width: 47%;
    }

    /*software*/
    .software .head_right{
        right: -10%;
        width: 60%;
        top: 5%;
    }
    .software .head_right img{
        object-fit: contain;
        height: auto;
        max-width: 80%;
        width: 80%;
    }
}
@media(max-width: 900px){
    /*study*/
    .hot .head_img{
        width: 100%;
    }
    .hot .title p{
        width: 100%;
    }
    .list h4 {
        width: 100%;
    }
    .hot .play {
        transform: translate(140%,-150%);
    }
    
    /*product*/
    .product .card{
        overflow-x: overlay;
        padding: 0px;
    }
    .roll_list thead, .product tbody tr {
        /*display:table;*/
        width:1000px;
        overflow-x: scroll;
    }

    /*software*/
    .software .head_right {
        right: -20%;
        top: 20%;
    }
    .software .download{
        padding: 10px 20px;
        width: 100%;
    }
    .software .downleft{
        transform: none;
    }
    .software .downright{
        transform: none;
        width: 80%;
    }
}

@media(max-width: 768px){
    article h1 {
        top: 140px;
    } 

    marquee{
        max-width: 95%;
    }
    h1{
        font-size: 2.5em;
    }
    h3{
        font-size: 1.25em;
        line-height: 2em;
    }
    h4{
        font-size: 1em;
    } 
   
    .col2{
        width: 100%;
    }

    .sec1_service .col5 {
        padding: 5px 0;
    }
    .sec1_service .col5 img {
        padding: 0px 5px;
        width: 20px;
    }
    .sec2{
        height: auto;
    }
    .sec2 .descript, .sec2 img {
        transform: translateY(0%);
        text-align: center;
    }
    .sec2 .descript img {
        padding: 10px;
    }
    .sec2 button {
        margin: 0 auto;
    }
    .sec2 .des_right {
        margin-left: 20%;
        width: 80%;
    }

    .sec3 .col2{
        padding: 10px;
    }

    /*news*/
    .news .col4 {
        width: 50%;
    }
    .news span {
        transform: translateY(1.25em);
    }

    /*study*/
    .list {
        width: 60%;
    }
    .list h4 {
        width: 100%;
    }
    .head_img{
        width: 40%;
    }
    .list .title {
        width: 55%;
    }
    .hot {
        width: 39%;
    }
    .video .col2 {
        width: 100%;
    }
    .play {
        max-width: 10%;
        transform: translate(210%,-180%);
    }
    .hot .play {
        transform: translate(85%,-120%);
    }
    .head_img .play {
        max-width: 10%;
        width: auto;
    } 

    /*product*/
    .slide_view, .slide_desc{
        min-height: 400px;
    }

    /*open_account*/
    .open > .col2{
        min-height: auto;
        margin: 20px 0px;
        width: 100%;
    }
    .open > .card > .col2{
        width: auto;
        display: block;
    }

    /*software*/
    .software .head_left {
        text-align: left;
        top: 0px;
        left: 0;
        right: 0;
        padding: 20px;
        text-align: center;
    }
    .software .head_left h1{
        position:relative;
        text-align: center;
        top: 0px;
        padding: 0px;
    }
    .software .head_right {
        width: 100%;
        top: 35%;
        right: 0;
    }
    .software .head_right img {
        width: 100%;
        max-width: 320px;
        text-align: center;
        transform: translateX(60%);
    }
}
@media(max-width: 600px){
    article h1 {
        top: 100px;
    }
    article span {
        font-size: 14px;
    }  

    h3,.award ul {
        font-size: 1em;
    }
    p {
        font-size: 0.9em;
    }
    
    .sec1_service {
        height: auto;
    }
    .sec1_service .col5 {
        width: 100%;
        text-align: center;
    }
    .sec1_service .col3 {
        width: 100%;
        text-align: left;
    }
    .sec1_service .col3 img {
        display: inline-block;
    }   

    .col4 {
        width: 49%;
    }
    .col5:last-child{
        padding-bottom: 20px;
    }

    .issue .col4{
        padding: 2%;
    }

    /*float buttons*/
    .float_btn {
        right: 10px;
        width: 70px;
    }
    .float_btn a:first-of-type {
        padding-top: 25px;
    }
    .float_btn a:last-of-type {
        padding-bottom: 25px;
    }
    .float_hr {
        height: 8px;
    }
    #goTop{
        width: 70px;
    } 

    /*news*/
    .news span {
        transform: translateY(10px);
    }    
    
    /*study*/
    .list{
        padding-right: 10px;
    }
    .head_img{
        width: 100%;
    }
    .list .title {
        width: 100%;
        padding-left: 0px;
    }
    .hot .card {
        padding: 10px;
    }
    .video{
        padding-right: 10px;
    }
    .play {
        transform: translate(230%,-190%);
    }

    /*product*/
    .slide_view, .slide_desc{
        min-height: 300px;
    }

    /*goods*/
    .rich {
        display:block;
        width:100%;
        max-width: 1000px;
        overflow: scroll;
    }

    /*open_account*/
    .open > .col2{
        width: 100%;
        min-height: auto;
    }

    /*software*/
    .software .fea{
        width: 48%;
    }
    .software .head_right {
        top: 40%;
        transform: translateX(-10%);
    }
}

@media(max-width: 480px){
    h1 {
        font-size: 2em;
    }
    select, input{
        min-width: auto;
        width: 100%;
    }    
    .top_white{
        height: 84px;
    }
    .logo{
        width: 75%;
    }
    .logo, .navbar{
        max-height: 84px;
    }
    .drop_m a, .column p {
        padding: 10px;
        margin-bottom: 0px;
    }
    article h1 {
        top: 80px;
    }
    marquee {
        max-width: 92%;
    }
    th, td {
        padding: 10px;
    }
    .cutline{
        display: inline-block;
    }

    .sec1_service {
        padding: 40px 10px;
    }
    .sec1_service .col3 {
        padding: 10px;
    }     
    .sec1_service .col3 img {
        width: 60px;
    }
    .agency img{
        height: 40px;
    }

    .bottom {
        padding: 30px 20px;
    }
    
    /*news*/
    .news .col4 {
        width: 100%;
    }
    .news td {
        max-width: 100px;
    }

    /*login*/
    .login {
        min-height: 65%;
    }
    .logcard {
        padding: 30px;
        margin: 0 auto;
        top: 0%;
        left: 0%;
        transform: translate(0%,10%);
    }
    .logcard input{
        width: 90%;
    }

    /*study*/
    .study td{
        padding: 10px;
    }
    .hot {
        width: 38%;
    }
    .play {
        transform: translate(200%,-190%);
    }

    /*product*/
    .product .tab_btn{
        width: 49%;
    }
    .slide_view, .slide_desc{
        width: 100%;
        min-height: 230px;
    }
    .slide_view{
        text-align: center;
        padding-right: 0px;
    }
    
    /*open_account*/
    .open .card img{
        padding-right: 0px;
    }

    /*software*/
    .software .fea{
        padding: 10px;
    }
    .software .head_right img {
        transform: translateX(30%);
    }
}

@media(max-width: 375px){
    .top_white{
        height: 78px;
    }    
    .logo, .navbar {
        max-height: 78px;
    }
    article h1 {
        top: 140px;
    }

    /*study*/
    .study td{
        padding: 5px;
    }

    .steps .mySlides {
        padding: 30px;
    }

    /*software*/
    .software .head_right img {
        transform: translateX(15%);
    }
}

@media(max-width: 320px){
    .top_white{
        height: 74px;
    }    
    .logo, .navbar {
        max-height: 74px;
    }
    #menu_btn {
        width: 60px;
        padding: 10px;
    }  
    .btn_l {
        font-size: 1em;
    }
    .sec2 .descript img {
        padding: 5px;
    }
    .cutline2{
        display: inline-block;
    } 
    
    .expiry td div:first-of-type, .expiry td div:last-of-type{
        width: 100%;
    }

    .open .card img{
        width: 80%;
    }

    /*software*/
    .software .btn3 {
        max-width: 180px;
        width: 100%;
    }
    .software .head_right {
        top: 45%;
    }
    .software .card {
        padding: 30px;
    }    
    .software .btn1{
        min-width: 150px;
        margin: 5px;
    }
}

/*float nonagency*/
.float_nonagency {
    position: fixed;
    top: 115px;
    right: 56px;
}
.float_nonagency img {
    width: 80px;
}

@media (max-width: 1200px) {
    .float_nonagency {
        right: 25px;
    }
}

@media (max-width: 600px) {
    .float_nonagency {
        right: 6px;
    }
}
/*public*/
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.text-center {
    text-align: center;
}
.text-justify {
    text-align: justify;
}
.text-nowrap {
    white-space: nowrap;
}
.text-lowercase {
    text-transform: lowercase;
}
.text-uppercase {
    text-transform: uppercase;
}
.text-capitalize {
    text-transform: capitalize;
}

.text-primary {
    color: #337ab7;
}
a.text-primary:hover,
a.text-primary:focus {
    color: #286090;
}
.text-success {
    color: #3c763d;
}
a.text-success:hover,
a.text-success:focus {
    color: #2b542c;
}
.text-info {
    color: #31708f;
}
a.text-info:hover,
a.text-info:focus {
    color: #245269;
}
.text-warning {
    color: #8a6d3b;
}
a.text-warning:hover,
a.text-warning:focus {
    color: #66512c;
}
.text-danger {
    color: #a94442;
}
a.text-danger:hover,
a.text-danger:focus {
    color: #843534;
}

.bg-primary {
    color: #fff;
    background-color: #337ab7;
}
a.bg-primary:hover,
a.bg-primary:focus {
    background-color: #286090;
}
.bg-success {
    background-color: #dff0d8;
}
a.bg-success:hover,
a.bg-success:focus {
    background-color: #c1e2b3;
}
.bg-info {
    background-color: #d9edf7;
}
a.bg-info:hover,
a.bg-info:focus {
    background-color: #afd9ee;
}
.bg-warning {
    background-color: #fcf8e3;
}
a.bg-warning:hover,
a.bg-warning:focus {
    background-color: #f7ecb5;
}
.bg-danger {
    background-color: #f2dede;
}
a.bg-danger:hover,
a.bg-danger:focus {
    background-color: #e4b9b9;
}

.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}
.bg-gray-light {
    background-color: #f7f7f7;
}
.bg-black {
    background-color: #111111 !important;
}
.bg-red,
.callout.callout-danger,
.alert-danger,
.alert-error,
.label-danger,
.modal-danger .modal-body {
    background-color: #dd4b39 !important;
}
.bg-yellow,
.callout.callout-warning,
.alert-warning,
.label-warning,
.modal-warning .modal-body {
    background-color: #f39c12 !important;
}
.bg-aqua,
.callout.callout-info,
.alert-info,
.label-info,
.modal-info .modal-body {
    background-color: #00c0ef !important;
}
.bg-blue {
    background-color: #0073b7 !important;
}
.bg-light-blue,
.label-primary,
.modal-primary .modal-body {
    background-color: #3c8dbc !important;
}
.bg-green,
.callout.callout-success,
.alert-success,
.label-success,
.modal-success .modal-body {
    background-color: #00a65a !important;
}
.bg-navy {
    background-color: #001f3f !important;
}
.bg-teal {
    background-color: #39cccc !important;
}
.bg-olive {
    background-color: #3d9970 !important;
}
.bg-lime {
    background-color: #01ff70 !important;
}
.bg-orange {
    background-color: #ff851b !important;
}
.bg-fuchsia {
    background-color: #f012be !important;
}
.bg-purple {
    background-color: #605ca8 !important;
}
.bg-maroon {
    background-color: #d81b60 !important;
}
.bg-gray-active {
    color: #000;
    background-color: #b5bbc8 !important;
}
.bg-black-active {
    background-color: #000000 !important;
}
.bg-red-active,
.modal-danger .modal-header,
.modal-danger .modal-footer {
    background-color: #d33724 !important;
}
.bg-yellow-active,
.modal-warning .modal-header,
.modal-warning .modal-footer {
    background-color: #db8b0b !important;
}
.bg-aqua-active,
.modal-info .modal-header,
.modal-info .modal-footer {
    background-color: #00a7d0 !important;
}
.bg-blue-active {
    background-color: #005384 !important;
}
.bg-light-blue-active,
.modal-primary .modal-header,
.modal-primary .modal-footer {
    background-color: #357ca5 !important;
}
.bg-green-active,
.modal-success .modal-header,
.modal-success .modal-footer {
    background-color: #008d4c !important;
}
.bg-navy-active {
    background-color: #001a35 !important;
}
.bg-teal-active {
    background-color: #30bbbb !important;
}
.bg-olive-active {
    background-color: #368763 !important;
}
.bg-lime-active {
    background-color: #00e765 !important;
}
.bg-orange-active {
    background-color: #ff7701 !important;
}
.bg-fuchsia-active {
    background-color: #db0ead !important;
}
.bg-purple-active {
    background-color: #555299 !important;
}
.bg-maroon-active {
    background-color: #ca195a !important;
}

.pad {
    padding: 10px;
}
.margin {
    margin: 10px;
}
.margin-bottom {
    margin-bottom: 20px;
}
.margin-bottom-none {
    margin-bottom: 0;
}
.margin-r-5 {
    margin-right: 5px;
}

.inline {
    display: inline;
}
.hidden {
    display: none !important;
}

/*修正jqueryconfirm位置*/
.jconfirm-scrollpane {
    width: 22% !important;
    margin-left: 38%;
}

@media (max-width: 1200px) {
    .jconfirm-scrollpane {
        width: 60% !important;
        margin-left: 20%;
    }
}
/*修正jqueryconfirm位置*/
.img-rwd {
    max-width: 100%;
    height: auto;
}

.float_left_hidden {
    display: none;
}

@media screen and (min-width: 640px) {
    .float_left_hidden {
        display: block;
    }
}

.gotop_rb {
    position: fixed;
    right: 12px;
    bottom: 12px;
    z-index: 99;

}

.float_sms {
    top: 120px !important;
    z-index: 99;
}

.gotopbt {
    width: 44px;
    height: 44px;
    padding: 0px;
    background: url(../image/ic_gotop.svg)no-repeat;
    background-size: cover;
}

.float_left {
    position: fixed;
    left: 8px;
    bottom: 12px;
    z-index: 99;
    width: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 640px) {
    .float_left {
        position: fixed;
        left: calc(100% - 64px);
        bottom: 60px;
        z-index: 99;
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

.statement {
    width: 100%;
    margin-bottom: 4px;
}

.nav_switch {
    display: block;
    width: 100%;
}

.nav_switch .ic_more {
    transition: all 0.2s;
    transition-timing-function: linear;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto;
    background: url(../image/ic_more.svg)no-repeat, #B60033;
    background-size: cover;
    border-radius: 100%;
    cursor: pointer;

}

.float_left .switch_open .ic_more {
    width: 60px;
    height: 60px;
    background: url(../image/ic_close.svg)no-repeat, #B60033;
}

.float_left .inner {
    max-width: 60px;
    text-align: center;
    opacity: 100%;
    transition: all 0.2s;
    transition-timing-function: linear;
}

.float_left .inner .menu {
    padding: 16px 0 24px;
    border-radius: 44px;
    background: #B60033;
    text-align: center;
    color: #fff;
    font-size: 12px;
    margin-bottom: 4px;
}

.float_left .inner .menu a {
    color: #fff;
    font-size: 12px;
    display: block;
}

.float_left .inner .menu a img {
    display: block;
    width: 78%;
    margin: 0 auto;
}

.float_left .inner .menu a::after {
    margin-top: 8px;
    display: inline-block;
    content: "";
    width: 80%;
    height: 1px;
    border-bottom: 1px solid #740021;
}

.float_left .inner .menu a:last-child::after {
    display: none;
}

@media screen and (min-width: 640px) {
    .float_left {
        position: fixed;
        left: calc(100% - 72px);
        bottom: 72px;
        z-index: 99;
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .nav_switch {
        display: none;

    }

    .gotopbt {
        width: 60px;
        height: 60px;

    }
}