@charset "utf-8";
/* CSS Document */
html, body { margin:0; padding:0; font:18px/140% Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; color:#333;  }
body{ overflow-x: hidden;}
img { margin:0; padding:0; }
a { text-decoration: none; outline: none; /* for Firefox */ hlbr:expression(this.onFocus=this.blur()); /* for IE */
color:#333; }
a:hover { color:#000; }
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, textarea, table, td, th, img { margin: 0; padding: 0; border: none; }
img { border: none; }
input, textarea { font:16px/140% Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; color:#666; }
input, textarea {
    -webkit-appearance: none;
    border-radius: 0;
}
ul, li { list-style:none; }
.fL { float: left; }
.fR { float: right; }
.clr { clear: both;  }
.tRight { text-align: right; }
.tLeft { text-align:left; }
.tCenter { text-align: center; }

.mobileMode { display: none;}
body { border-top: 5px solid #cc0000;}
.wrapper { overflow: hidden; width: 100%; margin: 0 auto;background-color: #f3f3f3; min-width: 1000px; }

/* subMenu */
.subMenu { position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; box-sizing: border-box; transition: all 1s ease;}
.subMenu.fxd { background-color: rgba( 204, 0, 0, 0.8); box-shadow: 0px 3px 12px -2px rgba(20%,20%,40%,0.5);}
.subMenu h1{ width: 130px; height: 60px; text-indent: -9999px; overflow: hidden; background:url(../images/logo.png) center center no-repeat; float: left;}
.subMenu h1 a{ display: block; height: 60px; text-indent: -9999px; overflow: hidden; }
.subMenu ul { position: absolute; top: 0; right: 0px;}
.subMenu li{ float: left;}
.subMenu li a{ display: block; padding: 0 20px; line-height: 60px; color: #fff; transition: all 1s ease; }
.subMenu li a:hover, .subMenu li a.active{ background-color: #cc0000;}

.section {z-index: 10; position: relative; }
.inner { position: relative; padding:30px 0; color: #fff; text-align: center;}
.inner h2 { font-size: 30px; line-height: 1.4em; }
.inner p { }
.link { display: inline-block; width: 200px; border: 1px solid #ddd; line-height: 50px; font-size: 18px; transition: all 1s ease;}
.link a{ display: block; color: #fff;}
.pic { text-align: center; margin-top: 30px; line-height: 0;}

.inner > h2{ position: relative; top: 50px; opacity: 0; transition: all 1s ease;}
.inner > p { position: relative; top: 50px; opacity: 0; transition: all 1s ease; transition-delay: 0.4s; }
.inner > .link { position: relative; top: 50px; opacity: 0; transition: all 1s ease;}
.active .inner > h2{ top: 0px; opacity: 1; }
.active .inner > p{ top: 0px; opacity: 1; }
.active .inner > .link{ top: 0px; opacity: 1; }


/* sTop */
.sTop .main{ padding-top: 200px; background:url(../images/kv.jpg) no-repeat; background-size: cover; height: 300px; text-align: center;}
.sTop .title{ font-size: 24px; line-height: 140%; color: #fff; margin-bottom: 20px;}
.sTop .title span{ font-size: 48px; line-height: 1.4em;}
.sTop .link { background-color: rgba( 255, 255, 255, 0.3);font-size: 24px;}
.sTop .link:hover { background-color: rgba( 204, 0, 0, 0.6); border-color: #cc0000;}
.sTop .inner{ background-color: #cc0000;}

.list_count { text-align: center; padding-top: 30px; }
.list_count li{ display: inline-block; width: 20%;}
.list_count .count{ font-size: 48px; line-height: 1em;}
.list_count .p1 { font-size: 12px; line-height: 1.4em;}
.list_count .p2 { font-size: 20px;}

.sTop .title{ position: relative; top: -50px; opacity: 0; transition: all 1s ease;}
.sTop .link { position: relative; top: 50px; opacity: 0; transition: all 1s ease;}
.list_count { opacity: 0; transition: all 1s ease;}
.sTop.active .title{ top: 0px; opacity: 1; }
.sTop.active .link{ top: 0px; opacity: 1; }
.sTop.active .list_count { opacity: 1;}


/* s1 */
.s1 { background:url(../images/s1_bg.jpg) 0 0 repeat fixed; background-size: 100% auto; overflow: hidden; }
.s1 .inner{ padding-bottom: 0;}
.s1 h2 { display: inline-block; font-size: 48px; vertical-align: middle; }
.s1 .link {  line-height: 48px; vertical-align: middle; margin-left: 20px; }
.s1 .link:hover { background-color: rgba( 204, 0, 0, 0.6); border-color: #cc0000;}
.s1 .tableArea { background-color: rgba( 26, 78, 94, 0.7); padding: 20px 0;}
.tableArea .content{ width: 980px; margin: 0 auto; font-size: 16px;}
.tableArea .table_list { width: 49%; margin-right: 2%; float: left;}
.tableArea .table_list:nth-child(2) { margin-right: 0;}
.tableArea .th_row { border-bottom: 1px solid #fff; border-top: 1px solid #fff;}
.tableArea .td_row:nth-child(odd) { background-color: rgba( 9, 26, 31, 0.3); }
.tableArea .th_row .th1, .tableArea .td_row .td1 { padding: 10px; display: inline-block; width: 40%; margin-right: -5px; text-align: left; box-sizing: border-box; vertical-align: top;}
.tableArea .th_row .th2, .tableArea .td_row .td2 { padding: 10px; display: inline-block; width: 60%; box-sizing: border-box;}
.tableArea .td_row .td2 { text-align: left;}

.tableArea { position: relative; top: 50px; opacity: 0; transition: all 1s ease;}
.tableArea.active { top: 0px; opacity: 1; }

/* s2 */
.s2 .inner{ padding-bottom: 0; }
.s2 h2 { display: inline-block; font-size: 48px; vertical-align: middle; color:#434343; }
.s2 p { color:#434343; }
.s2 .link {  line-height: 48px; vertical-align: middle; margin-left: 20px; border-color: #434343; }
.s2 .link a{ color:#434343;}
.s2 .link:hover { background-color: rgba( 204, 0, 0, 0.6); border-color: #cc0000;}
.s2 .link:hover a{ color: #fff;}
.s2 .box { position: relative; padding: 0 520px 20px 20px; max-width: 460px; margin: 0 auto; min-height: 500px;}
.list_data { text-align: left; padding-top: 30px;}
.list_data li{ border-bottom: 1px solid #ccc; position:relative;}
.list_data .q{ color: #cc0000; padding: 10px 0; letter-spacing: 1px; cursor: pointer;}
.list_data .q span{ font-weight: bold; margin-right: 5px; font-family: Helvetica;}
.list_data .a{ background-color: #eaeaea; padding: 20px; font-size: 14px; display: none;}
.list_data li.open .a{ display: block;}

.list_data li::after {background:url(../images/arr_r.png) right center no-repeat;content: ""; width: 30px; height: 30px; position: absolute; top: 8px; right: 0;
-moz-transition:0.6s all; -webkit-transition:0.6s all;}
.list_data li.open::after { -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg);}

.pos { position: absolute; top: 0; right: 0;}
.pos .play{ position: absolute; top: 180px; left: 60px; width: 75px; height: 75px; background: url(../images/play.png) no-repeat;}
.pos .play a{ display: block; height: 75px; }

.s2 .note { padding: 20px 0; border-top: 1px solid #ccc; letter-spacing: 1px;}

.box .list_data{ position: relative; left: -100px; opacity: 0; transition: all 1s ease;}
.box .pos{ margin-right: -100px; opacity: 0; transition: all 1s ease;transition-delay: 0.4s;}
.box.active .list_data{ left: 0px; opacity: 1; }
.box.active .pos{ margin-right: 0px; opacity: 1; }


/* s3 */
.s3 .inner{ background-color: #626262;}
.list_service { max-width: 1000px; margin: 0 auto;}
.list_service li{ display: inline-block; width: 20%; margin-right: -5px; vertical-align: top; text-align: left; box-sizing: border-box; padding: 20px 10px 0; }
.list_service .icon{ width: 100px; height: 100px; margin: 0 auto 10px; background-repeat: no-repeat; }
.list_service h3{ margin-bottom: 10px; }
.list_service p{ font-size: 14px; }
.list_service .l1 .icon { background-image:url(../images/icon1.png); }
.list_service .l2 .icon { background-image:url(../images/icon2.png);}
.list_service .l3 .icon { background-image:url(../images/icon3.png);}
.list_service .l4 .icon { background-image:url(../images/icon4.png);}
.list_service .l5 .icon { background-image:url(../images/icon5.png);}
.list_service .l6 .icon { background-image:url(../images/icon6.png);}
.list_service .l7 .icon { background-image:url(../images/icon7.png);}
.list_service .l8 .icon { background-image:url(../images/icon8.png);}
.list_service .l9 .icon { background-image:url(../images/icon9.png);}
.list_service .l10 .icon { background-image:url(../images/icon10.png);}

.list_service .icon {
    /*background-color: rgba(255, 255, 255, 0.1);*/
    transition: all 0.2s ease 0s;
    border-radius: 50%; position: relative;
}
.list_service .icon::after {
    border-radius: 50%;
    box-sizing: content-box;
    content: "";
    height: 100%;
    pointer-events: none;
    position: absolute;
    width: 100%;
    box-shadow: 0 0 0 3px #fff;
    left: 0px;
    padding: 0px;
    top: 0px;
    transition: transform 0.2s ease 0s, opacity 0.2s ease 0s;
    transform: scale(0.8);
    opacity: 0;
}
.list_service li:hover .icon { transform: scale(0.9);}
.list_service li:hover .icon::after { opacity: 0.6; transform: scale(1);}

.list_service li { position:relative; top: 50px; opacity: 0; transition: all 1s ease;}
.list_service .l2 { transition-delay: 0.2s;}
.list_service .l3 { transition-delay: 0.4s; }
.list_service .l4 { transition-delay: 0.6s; }
.list_service .l5 { transition-delay: 0.8s; }
.list_service .l6 { transition-delay: 1s; }
.list_service .l7 { transition-delay: 1.2s; }
.list_service .l8 { transition-delay: 1.4s; }
.list_service .l9 { transition-delay: 1.6s; }
.list_service .l10 { transition-delay: 1.8s; }
.list_service.active li{ top: 0px;opacity: 1;}


/* s4 */
.s4 { background:url(../images/s4_bg.jpg) 0 0 repeat fixed; background-size: 100% auto; }
.list_partner { max-width: 1000px; margin: 0 auto;}
.list_partner li { display: inline-block; margin: 20px 5px 0;}

/* s5 */
.s5 .inner{ background:url(../images/s5_bg.jpg) no-repeat; background-size: 100% auto; padding-bottom: 0;}
.form { padding-top: 30px;}
.input { width: 400px; margin: 0 auto; margin-bottom: 20px;}
.inputSet { width: 100%; box-sizing: border-box; padding: 0 10px; line-height: 40px; background-color: rgba( 255, 255, 255, 0.3); color: #fff; }
.btn { width: 230px; margin: 0 auto 30px; border: 1px solid #ddd; line-height: 50px; transition: all 1s ease;}
.btn a{ display: block; color: #fff;}

tr.a td { background-color: #eee;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #fff;}
input:-moz-placeholder, textarea:-moz-placeholder { color: #fff;}
input::-moz-placeholder, textarea::-moz-placeholder { color: #fff;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #fff;}

.map { line-height: 0;}

/* footer */
.footer { text-align: center; line-height: 0; background:url(../images/footer_bg.jpg) repeat-x;}
.footer .inner { max-width: 600px; margin: 0 auto; padding: 20px 20px 10px 380px; text-align: left;}
.footer .f_left { position: absolute; top: 20px; left: 30px; width: 340px;}
.footer .f_left .logo { margin-bottom: 10px; }
.footer .f_left .logo img{ display: block; }
.footer .f_left p { line-height: 1.4em; font-size: 14px; }
.footer .f_right { font-size: 14px; line-height: 1.2em; width: 500px; }
.footer .f_right li{ margin: 0 0px 8px 0; display: inline-block; letter-spacing: 1px; }
.footer .f_right .info_t { border-right: 3px solid #8b8b8c; width: 60px; margin-right: 10px; display: inline-block;}