@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800");
@import url(FontAwesomeAll.min.css);

/* -------------- reset --------------*/
/* 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;
}

/* 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;
}

.clearfix {
  zoom: 1;
}

.clearfix:before,
.clearfix:after {
  content: "";
  display: block;
}

.clearfix:after {
  clear: both;
}

.pageContainer .mbMenuBtn .icon,
.infoRow .secHead .icon i,
header .mainMenu .icon i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

/* -------------- layout --------------*/
/* 修正粗體 ASCII (碧筵綰) */
@font-face {
  font-family: "fix Microsoft JhengHei";
  font-style: normal;
  font-weight: bold;
  unicode-range: U+7db0, U+78A7, U+7B75;
  src: url("../fonts/msgothic.otf");
}

* {
  box-sizing: border-box;
}

body {
  font-family:
    "Open Sans", Arial, "LiHei Pro", "fix Microsoft JhengHei",
    "Microsoft JhengHei", "新細明體", sans-serif;
  position: relative;
}

.unreset {
  line-height: initial;
}

.unreset a {
  text-decoration: underline;
}

.unreset img {
  max-width: 100% !important;
}

.container {
  max-width: calc(1440px + 40px);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
}

/* -------------- layout RWD --------------*/
@media (max-width: 640px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* -------------- pageLayout --------------*/
.pageContainer {
  max-width: calc(100% - 320px);
  width: 100%;
  margin-left: 320px;
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: url(../images/blog_bg.jpg) repeat;
  min-height: 100vh;
}

.pageContainer .top {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  width: 100%;
  z-index: 1;
}

.pageContainer .leftSec {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.pageContainer .mbMenuBtn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: rgba(1, 142, 199, 0.1);
  margin-right: 15px;
  position: relative;
  display: none;
}

.pageContainer .mbMenuBtn:hover {
  background: #718391;
}

.pageContainer .mbMenuBtn:hover span {
  background: #fff;
}

.pageContainer .mbMenuBtn span {
  width: 25px;
  height: 2px;
  display: block;
  background: #718391;
}

.pageContainer .mbMenuBtn span:nth-child(n + 2) {
  margin-top: 6px;
}

.pageContainer .breadcrumb {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.pageContainer .breadcrumb li:not(:last-child) {
  padding-right: 16px;
  position: relative;
}

.pageContainer .breadcrumb li:not(:last-child):after {
  position: absolute;
  top: 1px;
  right: 6px;
  content: "/";
  display: inline-block;
  font-size: 0.9375rem;
  color: #aaa;
}

.pageContainer .breadcrumb a {
  color: #333;
  font-size: 0.9375rem;
  line-height: 1rem;
}

.pageContainer .breadcrumb a:hover {
  color: #aaa;
}

.pageContainer .rightSec {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.pageContainer .rightSec .member {
  color: #333;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.1;
  margin-right: 20px;
}

.pageContainer .rightSec #changeData {
  color: #579cf1;
  display: inline-block;
  margin-top: 3px;
  font-size: 0.9375rem;
  line-height: 0.9375rem;
}

.pageContainer .rightSec #changeData:hover {
  color: #0f85b5;
  text-decoration: underline;
}

.pageContainer .rightSec .logOut {
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: rgba(1, 142, 199, 0.1);
  color: #718391;
  font-size: 1rem;
  padding: 10px;
}

.pageContainer .rightSec .logOut:hover {
  background: #718391;
  color: #fff;
}

.pageContainer .rightSec .logOut i {
  padding-right: 4px;
}

.pageContainer .pageMainContainer {
  max-width: 100%;
  width: 100%;
  height: calc(100vh - 75px);
  overflow: auto;
}

/* -------------- form --------------*/
.baseForm {
  padding: 30px 20px;
}

.baseForm form .btnRow {
  max-width: 100%;
  text-align: center;
}

.infoForm form {
  position: relative;
}

.infoForm form:before {
  position: absolute;
  top: 0;
  left: 65px;
  width: 2px;
  height: calc(100% - 100px);
  content: "";
  display: block;
  background: #0f85b5;
}

.infoRow {
  max-width: 100%;
  width: 100%;
  background: #f5fcff;
  border: 1px solid #d0e5ed;
  padding: 30px 40px 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  position: relative;
}

.infoRow .secHead .icon {
  width: 50px;
  height: 50px;
  background: #0f85b5;
  border-radius: 50%;
  position: relative;
  transform: translateY(-50%);
  margin-top: -30px;
}

.infoRow .secHead .icon i {
  color: #fff;
  font-size: 1.25rem;
}

.infoRow .secHead h4 {
  color: #000;
  font-size: 1.25rem;
  font-weight: bold;
  margin-top: -13px;
}

.infoRow .secHead h4 span {
  color: #333;
  display: inline-block;
  font-weight: normal;
  font-size: 0.9375rem;
  line-height: 1.125rem;
  padding-left: 5px;
}

.infoRow .secBox {
  max-width: 100%;
  width: 100%;
}

.infoRow .secBox.half {
  max-width: calc(50% - 15px);
}

.infoRow .subHead {
  position: relative;
  margin-top: 5px;
  margin-bottom: -5px;
  width: 100%;
}

.infoRow .subHead:before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  content: "";
  background: rgba(1, 142, 199, 0.3);
}

.infoRow .subHead p {
  background: #f9f9fb;
  color: #216ece;
  display: inline-block;
  font-size: 1.125rem;
  font-weight: bold;
  padding-right: 10px;
  position: relative;
}

.infoRow .secForm {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 20px;
  width: 100%;
}

.infoRow .secForm .field {
  margin-bottom: 15px;
}

.infoRow .recordText {
  border-top: 1px dashed rgba(1, 142, 199, 0.3);
  color: #333;
  font-size: 1rem;
  line-height: 22px;
  padding-top: 15px;
}

/* -------------- table --------------*/
.table {
  max-width: 100%;
  width: 100%;
}

.table .row {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.table .row.thead {
  background: #f5fcff;
  text-align: center;
}

.table .row.thead p,
.table .row.thead a {
  color: #0f85b5;
  font-weight: bold;
}

.table .cell {
  max-width: 100px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px;
  flex-direction: column;
}

.table .cell.wide {
  align-items: flex-start;
  max-width: 100%;
}

.table .cell.titleSbj {
  max-width: calc(100% - (100px * 3));
  align-items: flex-start;
}

.table .fileTableRow .cell.titleSbj {
  max-width: calc(100% - (100px * 5));
}

.table .fileTableRow.unconnect .cell.titleSbj {
  max-width: calc(100% - (100px * 3));
}

.table .checkTableRow .cell.titleSbj {
  max-width: calc(100% - (100px * 1));
}

.table .cell.fileSbj {
  max-width: calc(100px * 2);
}

.table .tbody {
  background: #fff;
}

.table .tbody .row:nth-child(2n) {
  background: rgba(147, 147, 147, 0.04);
}

/* -------------- pageLayout RWD --------------*/
@media (max-width: calc(1280px + 40px)) {
  .pageContainer {
    max-width: calc(100% - 280px);
    margin-left: 280px;
  }

  .table .cell {
    padding: 10px 5px;
    max-width: 80px;
  }

  .table .cell.titleSbj {
    max-width: calc(100% - (80px * 3));
  }

  .table .fileTableRow .cell.titleSbj {
    max-width: calc(100% - (80px * 5));
  }

  .table .cell.fileSbj {
    max-width: calc(80px * 2);
  }
}

@media (max-width: 1024px) {
  .pageContainer {
    max-width: 100%;
    margin-left: 0;
  }

  .pageContainer .mbMenuBtn {
    display: block;
  }

  /* .pageContainer .pageMainContainer {
      height: calc(100vh - 65px); }  */
}

@media (max-width: 960px) {
  .table .row {
    justify-content: flex-end;
  }

  .table .row.thead .cell:nth-child(n + 3) {
    display: none;
  }

  .table .cell {
    max-width: calc(100% - 60px);
    flex-direction: row;
    justify-content: flex-start;
  }

  .table .cell.no {
    max-width: 60px;
    justify-content: center;
  }

  .table .cell.titleSbj,
  .table .cell.fileSbj {
    max-width: calc(100% - 60px) !important;
  }

  .table .cell.fillSbj,
  .table .cell.fileSbj {
    border-top: 1px dashed rgba(1, 142, 199, 0.3);
  }

  .table .cell.fillSbj:before,
  .table .cell.fileSbj:before {
    content: attr(data-title);
    display: inline-block;
    padding-right: 10px;
  }
}

@media (max-width: 768px) {
  .infoForm form:before {
    left: 45px;
  }

  .infoRow {
    padding: 30px 20px 20px;
  }
}

@media (max-width: 640px) {
  .pageContainer .breadcrumb {
    display: none;
  }

  .infoRow .secHead h4 span {
    width: 100%;
    margin-top: 3px;
    padding-left: 0;
  }

  .infoRow .secForm .field {
    margin-bottom: 10px;
  }

  .infoRow .secBox.half {
    max-width: 100%;
  }

  .table .cell {
    padding: 7px 5px;
  }
}

/* -------------- common --------------*/
a {
  text-decoration: none;
}

button,
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
}

input[type="reset"],
input[type="submit"],
input[type="text"],
input[type="email"],
input[type="tel"],
textarea,
select,
input[type="date"],
input[type="time"],
input[type="number"],
input[type="password"],
input[type="url"],
button {
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  font-family:
    "Open Sans", Arial, "LiHei Pro", "fix Microsoft JhengHei",
    "Microsoft JhengHei", "新細明體", sans-serif;
  box-shadow: none;
  border: none;
  outline: none;
}

select::-ms-expand {
  display: none;
}

.hide {
  display: none !important;
}

.videoContainer {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.selectStyle {
  background: #fff;
  position: relative;
}

.selectStyle:before {
  position: absolute;
  top: 50%;
  right: 10px;
  content: "\f0d7";
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: bold;
  color: #333;
  transform: translateY(-50%);
}

.selectStyle select {
  background: transparent !important;
  padding: 10px;
  padding-right: 25px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.formStyle form {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}

.formStyle .fieldRow {
  max-width: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.formStyle .fieldRow.btn {
  margin-bottom: 5px;
}

.formStyle .fieldRow.btn a {
  display: block;
  color: #fff;
  font-weight: bold;
  font-size: 0.9375rem;
  border-radius: 5px;
  padding: 12px 25px;
  background: #579cf1;
  box-shadow: 0 3px 0 #1167d1;
  margin: auto;
}

.formStyle .fieldRow.btn a:hover {
  background: #2880ed;
  box-shadow: 0 0 0 #1167d1;
  transform: translateY(3px);
}

.formStyle .fieldRow.btn.btnRow {
  justify-content: center;
}

.formStyle .fieldRow.btn.btnRow a {
  margin-left: inherit;
  margin-right: 20px;
}

.formStyle .fieldRow.branch:nth-child(n + 2),
.formStyle .fieldRow.exportMan:nth-child(n + 2),
.formStyle .fieldRow.exportPro:nth-child(n + 2) {
  border-top: 1px dashed rgba(1, 142, 199, 0.3);
  padding-top: 10px;
}

.formStyle .fieldRow.branch .field,
.formStyle .fieldRow.exportMan .field {
  max-width: calc((100% - 30px - 30px) / 2);
}

.formStyle .fieldRow.exportMan .field.third {
  max-width: calc((100% - 30px - 30px - 30px) / 3);
}

.formStyle .fieldRow.branch .field:first-child,
.formStyle .fieldRow.exportMan .field:first-child {
  margin-right: 30px;
}

.formStyle .fieldRow.exportMan .field:nth-child(2) {
  margin-right: 30px;
}

.formStyle .fieldRow.exportPro .field {
  max-width: calc((100% - 90px - 30px) / 4);
}

.formStyle .fieldRow.exportPro .field:not(:nth-last-child(2)) {
  margin-right: 30px;
}

.formStyle .field {
  max-width: calc((100% - 30px) / 2);
  width: 100%;
  margin-bottom: 10px;
}

.formStyle .field .remark {
  color: #333;
  font-size: 14px;
  line-height: 1.4;
}

.formStyle .registerForm .field {
  max-width: calc((100% - (15px * 2)) / 3);
}

.formStyle .field ::-webkit-input-placeholder {
  color: #aaa;
  font-size: 15px;
}

.formStyle .field :-ms-input-placeholder {
  color: #aaa;
  font-size: 15px;
}

.formStyle .field ::-moz-placeholder {
  color: #aaa;
  font-size: 15px;
  opacity: 1;
}

.formStyle .field :-moz-placeholder {
  color: #aaa;
  font-size: 15px;
  opacity: 1;
}

.formStyle .field.wide {
  max-width: 100%;
}

.formStyle .field.qur {
  max-width: calc((100% - 90px) / 4);
}

.formStyle .field.third {
  max-width: calc((100% - 60px) / 3);
}

.formStyle .field.exportCountry {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.formStyle .field.exportCountry .field {
  max-width: calc(100% - 30px);
}

.formStyle .field label {
  color: #333;
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 6px;
}

.formStyle .field input,
.formStyle .field button,
.formStyle .field select,
.formStyle .field textarea {
  color: #333;
  font-size: 17px;
  line-height: 0.9375rem;
}

.formStyle .field input:not([type="checkbox"]):not([type="radio"]),
.formStyle .field select,
.formStyle .field textarea {
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff;
  padding: 10px;
  width: 100%;
}

.formStyle .field input:not([type="checkbox"]):not([type="radio"]):focus,
.formStyle .field select:focus,
.formStyle .field textarea:focus {
  box-shadow: 0 0 2px inset rgba(1, 142, 199, 0.7);
}

.formStyle .field input:not([type="checkbox"]):not([type="radio"]):read-only,
.formStyle .field select:read-only,
.formStyle .field textarea:read-only {
  background: #f9f9f9;
}

.formStyle .field input[type="file"] {
  background: #fff !important;
  padding: 7px 10px !important;
}

.formStyle .field textarea {
  resize: none;
  min-height: 85px;
}

.formStyle .field input:disabled {
  background: #f4f4f4 !important;
}

.formStyle .field select {
  padding: 14px 10px;
}

.formStyle .field .dibItem {
  display: inline-block;
  margin-top: 5px;
}

.formStyle .field .term {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: -5px;
}

.formStyle .field .term label {
  color: #0f85b5;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  max-width: calc(100% - 30px);
}

.formStyle .field .term label a {
  color: #333;
  text-decoration: underline;
}

.formStyle .field .term label a:hover {
  color: #0f85b5;
}

.formStyle .del {
  max-width: 30px !important;
  margin-top: 15px;
  margin-right: 0 !important;
  text-align: right;
}

.formStyle .del a {
  color: #333;
  display: inline-block;
  font-size: 1.25rem;
}

.formStyle .del a:hover {
  color: #0f85b5;
}

.formStyle .captch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.formStyle .captch input {
  max-width: calc(100% - 90px);
  width: 100%;
}

.formStyle .captch img {
  width: 80px;
}

.formStyle .address {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
}

.formStyle .address .zipCode {
  max-width: 120px;
}

.formStyle .address .addText {
  max-width: calc(100% - 120px - 15px);
}

.formStyle .address .same-as {
  width: 100%;
}

.formStyle .btnRow {
  align-self: flex-end;
}

.formStyle .btnRow button {
  font-weight: bold;
  border-radius: 5px;
  padding: 12px 25px;
}

.formStyle .btnRow button:hover {
  transform: translateY(3px);
}

.formStyle .btnRow .reset {
  background: #ddd;
  box-shadow: 0 3px 0 #aaaaaa;
  margin-right: 15px;
}

.formStyle .btnRow .reset:hover {
  background: #c4c4c4;
  box-shadow: 0 0 0 #aaaaaa;
}

.formStyle .btnRow .submit {
  background: #ffd832;
  box-shadow: 0 3px 0 #cba400;
  font-size: 17px;
}

.formStyle .btnRow .submit.btnCheckFinalData {
  display: block;
  margin: auto;
  margin-top: 25px;
}

.formStyle .btnRow .submit:hover {
  background: #fece00;
  box-shadow: 0 0 0 #cba400;
}

.formStyle .remark {
  margin-top: 5px;
  width: 100%;
}

.formStyle .remark p {
  color: #777;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  margin-top: 3px;
}

.popContent {
  display: none;
}

.popContent .contentHead {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #718391;
  padding: 10px;
  color: #fff;
  font-size: 1.125rem;
}

.popContent .contentHead i {
  padding-right: 5px;
}

.popContent .content {
  background: url(../images/blog_bg.jpg) repeat;
  padding: 20px;
}

.popContent .content p {
  color: #333;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* -------------- common RWD --------------*/
@media (max-width: calc(1440px + 40px)) {
  .formStyle .fieldRow.exportPro .field {
    max-width: calc((100% - 30px - 30px) / 2);
  }

  .formStyle .fieldRow.exportPro .field:not(:nth-last-child(2)) {
    margin-right: 30px;
  }

  .formStyle .field.qur {
    max-width: calc((100% - 30px) / 2);
  }
}

@media (max-width: 960px) {
  .formStyle .field.third {
    max-width: calc((100% - 30px) / 2);
  }
}

@media (max-width: 768px) {
  .formStyle .fieldRow.branch .field,
  .formStyle .fieldRow.exportMan .field,
  .formStyle .fieldRow.exportPro .field {
    max-width: calc((100% - 20px - 30px) / 2);
  }

  .formStyle .fieldRow.branch .field:not(:nth-last-child(2)),
  .formStyle .fieldRow.exportMan .field:not(:nth-last-child(2)),
  .formStyle .fieldRow.exportPro .field:not(:nth-last-child(2)) {
    margin-right: 20px;
  }

  .formStyle .field {
    max-width: calc((100% - 20px) / 2);
  }

  .formStyle .field.qur,
  .formStyle .field.third {
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 640px) {
  .formStyle .field {
    max-width: 100% !important;
    margin-right: 0 !important;
  }

  .formStyle .fieldRow .del {
    margin-top: 0;
    max-width: 100% !important;
    text-align: center;
  }

  .formStyle .address .addText {
    max-width: 100%;
    margin-top: 10px;
  }

  .formStyle .btnRow {
    text-align: center;
  }

  .formStyle .field .term {
    justify-content: center;
    margin-top: 5px;
  }
}

/* -------------- header --------------*/
header {
  max-width: 320px;
  width: 100%;
  background: rgba(1, 142, 199, 0.88);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 2;
  transform: translateX(0%);
  transition: transform 0.4s ease;
}

header.open {
  transform: translateX(0%);
}

header .mbCloseBtn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: block;
  margin-left: auto;
  display: none;
}

header .mbCloseBtn span {
  width: 25px;
  height: 2px;
  display: block;
  background: #fff;
  position: absolute;
  top: 10px;
}

header .mbCloseBtn span:nth-child(1) {
  transform: rotate(45deg);
}

header .mbCloseBtn span:nth-child(2) {
  transform: rotate(-45deg);
}

header .head {
  color: #fff;
  padding: 20px 15px 18px;
}

header .head p {
  font-size: 1.125rem;
  line-height: 1.125rem;
  margin-bottom: 7px;
}

header .head h3 {
  font-size: 1.5rem;
  font-weight: bold;
}

header .mainMenu li {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

header .mainMenu li:first-child .icon i {
  font-weight: lighter;
}

header .mainMenu li:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

header .mainMenu li.active p {
  color: #ffd832;
  font-weight: bold;
}

header .mainMenu a {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #0f85b5;
  padding: 7px 10px;
}

header .mainMenu a:hover .icon {
  background: #ffd832;
}

header .mainMenu a:hover .icon i {
  color: #718391;
}

header .mainMenu .icon {
  width: 38px;
  height: 38px;
  background: #fff;
  border-radius: 50%;
  position: relative;
}

header .mainMenu .icon i {
  color: #718391;
  font-size: 1.0625rem;
}

header .mainMenu p {
  color: #fff;
  font-size: 1.1875rem;
  padding: 10px;
}

header .contact-info {
  padding: 10px 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
header .contact-info li {
  color: #fff;
  font-size: 15px;
  line-height: 1.2;
}
header .contact-info li:not(:last-child) {
  margin-bottom: 10px;
}
header .contact-info li a {
  color: #fff;
  text-decoration: underline;
}
header .contact-info li span {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}

/* -------------- header RWD --------------*/
@media (max-width: calc(1280px + 40px)) {
  header {
    max-width: 280px;
  }

  header .head p {
    font-size: 1rem;
    line-height: 1rem;
  }

  header .head h3 {
    font-size: 1.375rem;
  }

  header .mainMenu .icon {
    width: 33px;
    height: 33px;
  }

  header .mainMenu p {
    font-size: 1.0625rem;
    padding: 9px;
  }
}

@media (max-width: 1024px) {
  header {
    transform: translateX(-100%);
  }

  header .mbCloseBtn {
    display: block;
  }
}

/* -------------- footer --------------*/
footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: 7px;
  display: none;
}

footer .container {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}

footer p,
footer b {
  color: #ccc;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

footer .right {
  margin-right: 15px;
}

/* -------------- footer RWD --------------*/
/* -------------- index --------------*/
.idContainer {
  display: flex;
  align-items: center;
  /* background: url(../images/blog_bg.jpg) repeat; */
  background: url(../images/bg-login.jpg) no-repeat;
  background-attachment: fixed;
  background-position: center;
  min-height: 100vh;
  padding: 40px 20px 60px;
}

.idContainer .idBox {
  max-width: 1620px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.idContainer .decImg {
  position: absolute;
  top: 65px;
  left: 0;
  max-height: 45%;
  overflow: hidden;
}

.idContainer .decImg img {
  display: block;
  width: 100%;
}

.idContainer .container {
  background: rgba(1, 142, 199, 0.95);
  box-shadow: 0 20px 10px -15px rgba(50, 50, 50, 0.5);
  padding-bottom: 20px;
  position: relative;
  max-width: 1040px;
}

.idContainer .leftContent {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  /* background: rgba(1, 142, 199, 0.95); */
  color: #fff;
  flex-direction: column;
  padding: 40px 50px 30px;
}

.idContainer .leftContent .top {
  text-align: center;
}

.idContainer .leftContent .top .ch {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.idContainer .leftContent .top .ch p {
  font-size: 1.25rem;
  line-height: 1.25rem;
}

.idContainer .leftContent .top .ch h3 {
  font-size: 2.25rem;
  font-weight: bold;
  line-height: 2.5rem;
  padding-top: 10px;
  padding-bottom: 10px;
}

.idContainer .leftContent .top .en {
  font-size: 1rem;
  font-weight: lighter;
  margin-top: 10px;
}

.idContainer .leftContent .top .des {
  margin-top: 30px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  text-align: left;
  opacity: 0.95;
}

.idContainer .leftContent .bottom {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

.idContainer .leftContent .bottom .tabLink {
  align-items: center;
  display: inline-flex;
}

.idContainer .leftContent .bottom .tabLink:first-child {
  margin-right: 40px;
  position: relative;
}

.idContainer .leftContent .bottom .tabLink:first-child:after {
  position: absolute;
  top: 0;
  right: -40px;
  width: 1px;
  height: 100%;
  content: "";
  display: block;
  background: rgba(255, 255, 255, 0.5);
}

.idContainer .leftContent .bottom .tabLink:nth-child(2) {
  margin-left: 40px;
}

.idContainer .leftContent .bottom .tabLink:hover .ic_img img,
.idContainer .leftContent .bottom .tabLink.active .ic_img img {
  display: none;
}

.idContainer .leftContent .bottom .tabLink:hover .ic_img img:nth-child(2),
.idContainer .leftContent .bottom .tabLink.active .ic_img img:nth-child(2) {
  display: block;
}

.idContainer .leftContent .bottom .tabLink:hover .linkText,
.idContainer .leftContent .bottom .tabLink.active .linkText {
  color: #ffd832;
}

.idContainer .leftContent .bottom .ic_img {
  width: 45px;
  height: 45px;
  margin: auto;
}

.idContainer .leftContent .bottom .ic_img img {
  display: block;
  margin: auto;
  max-height: 100%;
  width: 100%;
}

.idContainer .leftContent .bottom .ic_img img:nth-child(2) {
  display: none;
}

.idContainer .leftContent .bottom .linkText {
  color: #fff;
  font-size: 1.375rem;
  font-weight: bold;
  margin-left: 10px;
}

.idContainer .formSec {
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  padding: 30px 40px;
}

.idContainer .formSec .formTitle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.idContainer .formSec .formTitle .ic_formTitle {
  display: block;
  height: 40px;
}

.idContainer .formSec .formTitle .ic_formTitle img {
  display: block;
  height: 100%;
}

.idContainer .formSec .formTitle h4 {
  color: #718391;
  font-size: 1.375rem;
  font-weight: bold;
  line-height: 1.5rem;
  padding-left: 10px;
}

.idContainer .formSec .regRemark {
  color: #777;
  font-size: 1rem;
  line-height: 1.5rem;
  margin-bottom: 15px;
}

.id-contact-info {
  display: grid;
  grid-auto-flow: column;
  gap: 10px 30px;
  margin-top: 15px;
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  padding: 0 20px;
  align-items: center;
  justify-content: center;
}
.id-contact-info li {
  color: #444;
  font-size: 16px;
  line-height: 1.2;
}
.id-contact-info li img {
  display: inline-block;
  height: 30px;
  vertical-align: middle;
}

.id-contact-info li a {
  color: #444;
  text-decoration: underline;
}
.id-contact-info li span {
  font-weight: bold;
  display: inline-block;
  margin-right: 5px;
}

/* -------------- index RWD --------------*/
@media (max-width: calc(1440px + 40px)) {
}

@media (max-width: 1366px) {
  .idContainer .decImg {
    width: 100%;
    height: 100%;
    top: 0px;
    background: url(../images/id_bg.jpg) no-repeat;
    background-size: cover;
    background-position: center center;
  }

  .idContainer .decImg img {
    display: none;
  }

  .idContainer .leftContent {
    padding: 40px;
  }

  .idContainer .leftContent .top .ch p {
    font-size: 1rem;
    line-height: 1rem;
  }

  .idContainer .leftContent .top .ch h3 {
    font-size: 1.875rem;
  }

  .idContainer .leftContent .top .des {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .idContainer .leftContent .bottom .linkText {
    font-size: 1.25rem;
  }

  .idContainer .formSec {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
  }
}

@media (max-width: 1260px) {
  .id-contact-info li span {
    display: block;
    margin-right: 0;
    margin-bottom: 5px;
  }
}

@media (max-width: 960px) {
  .idContainer .decImg {
    max-height: initial;
  }

  .idContainer .leftContent,
  .idContainer .formSec {
    max-width: 100%;
    min-height: auto;
    padding: 30px;
  }

  .idContainer .formSec {
    padding-bottom: 15px;
  }

  .idContainer .formSec .formTitle {
    display: none;
  }

  .idContainer .formSec .regRemark {
    color: #0f85b5;
    text-align: center;
    max-width: 670px;
    margin-left: auto;
    margin-right: auto;
  }

  .id-contact-info {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
  }
}

@media (max-width: 640px) {
  .idContainer {
    padding-top: 20px;
    padding-left: 0;
    padding-right: 0;
  }

  .idContainer .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .idContainer .leftContent {
    padding: 30px 0px 20px;
  }

  .idContainer .formSec {
    padding: 20px 15px 10px;
  }

  .idContainer .leftContent .top .ch h3 {
    font-size: 1.5rem;
    line-height: 1.5rem;
  }

  .idContainer .leftContent .bottom .tabLink:first-child {
    margin-right: 25px;
  }

  .idContainer .leftContent .bottom .tabLink:first-child:after {
    right: -25px;
  }

  .idContainer .leftContent .bottom .tabLink:nth-child(2) {
    margin-left: 25px;
  }

  .idContainer .leftContent .bottom .ic_img {
    width: 40px;
    height: 40px;
  }

  .idContainer .leftContent .bottom .linkText {
    font-size: 1.125rem;
  }

  .idContainer .formSec {
    margin-bottom: 0;
  }

  .id-contact-info {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 500px) {
  .idContainer {
    padding-bottom: 370px;
  }
  .id-contact-info {
    grid-template-columns: 1fr;
    bottom: 55px;
  }
}

/* -------------- file --------------*/
.fileTable .titleSbjTitle {
  font-weight: bold;
  width: 100%;
}

.fileTable .titleSbjDes {
  margin-top: 3px;
}

.fileTable .titleSbjDes p,
.fileTable .titleSbjDes a {
  font-size: 0.9375rem;
}

.fileTable .titleSbjDes p {
  color: #999;
}

.fileTable .titleSbjDes a {
  color: #579cf1;
  text-decoration: underline;
}

.fileTable .titleSbjDes a:hover {
  color: #0f85b5;
}

.fileTable p,
.fileTable a {
  color: #333;
  font-size: 1.125rem;
  line-height: 1.4;
}

.fileTable p.notMust {
  color: #e55151;
  font-size: 14px;
}

.fileTable .fas,
.fileTable .file label {
  font-size: 1.25rem;
}

.fileTable .fas:hover,
.fileTable .file label:hover {
  color: #0f85b5;
}

.fileTable .fileSbj label {
  cursor: pointer;
}

.fileTable .fileSbj input {
  display: none;
}

.fileTable .fillStatus,
.fileTable .fileName,
.fileTable .fillStatus,
.fileTable .fileName a {
  font-size: 0.9375rem;
  line-height: 1.125rem;
  margin-left: 3px;
}

.fileTable .fileName a:hover {
  color: #0f85b5;
}

.fileTable .linkStatus {
  align-items: baseline;
  display: flex;
}

.fileTable .linkStatus .fas {
  font-size: 1rem;
}

.fileTable .linkStatus .fas:hover {
  cursor: auto;
  color: inherit;
}

.data-group-grid {
  margin-top: 40px;
}

.data-group-grid .thead {
  border: 1px solid #d0e5ed;
  border-bottom: none;
}

.data-group-grid .tbody {
  border: 1px solid #d0e5ed;
  border-top: none;
}

.data-group-grid .tbody .fileRow {
  border-top: 1px solid #d0e5ed;
}

.table-group-title {
  position: relative;
}

.table-group-title p {
  background: #0f85b5;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  color: #fff;
  display: inline-block;
  font-size: 20px !important;
  font-weight: bold;
  line-height: 1;
  padding: 12px 25px;
}

.connect-btn-row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  width: 100%;
}

.connect-btn-row .status-text {
  align-items: center;
  border-left: 4px solid #ffc107;
  background: #fff7df;
  display: flex;
  padding: 13px 15px;
  width: 100%;
}

.connect-btn-row .status-text:not(:last-child) {
  margin-bottom: 10px;
}

.connect-btn-row .status-text i {
  color: #997404;
  font-size: 15px;
  margin-right: 5px;
}

.connect-btn-row .status-text i:hover {
  color: #997404;
}

.connect-btn-row .status-text p {
  font-size: 16px;
  line-height: 1.4;
}

.connect-btn-row .status-text.success {
  border-color: #198754;
  background: #d9efe5;
}

.connect-btn-row .status-text.success i {
  color: #146c43;
}

.getDataBtn {
  margin-bottom: 20px;
}

.getDataBtn a {
  display: block;
  text-align: center;
  border-radius: 13px;
  border: 1px solid #ddd;
  background: #fff;
  box-shadow: inset 0 -5px 4px #ddd;
  padding: 8px 15px 13px;
  margin-bottom: 10px;
}

.getDataBtn a:hover {
  background: #ddd;
  box-shadow: 0 0 0 #ddd;
}

.getDataBtn.cancel {
  margin-left: 20px;
}

.getDataBtn.cancel a {
  background: #e2f2ff;
  box-shadow: inset 0 -5px 4px #bed2e3;
}

.getDataBtn.cancel a:hover {
  background: #cee8ff;
  box-shadow: 0 0 0 #cee8ff;
}

.getDataBtn.is-connect {
  border-radius: 0;
  background: #eee;
  box-shadow: none;
}

.getDataBtn img {
  display: block;
  margin: auto;
  width: 160px;
}

.getDataBtn p {
  font-size: 15px;
  text-align: center;
}

.getDataBtn span {
  color: #d63c3c;
}

.botttomAttentionDes p {
  color: #d53c3c;
  font-size: 24px;
  font-weight: bold;
  margin-top: 20px;
  text-align: center;
}

.botttomAttentionDes i {
  margin-right: 5px;
}

.field-group-title {
  background: #fed742;
  color: #444;
  display: inline-block;
  font-size: 17px;
  font-weight: bold;
  padding: 2px;
  margin-top: 20px;
}

.fileTable .top-intro-content {
  background: #f5fcff;
  border: 1px solid #d0e5ed;
  padding: 25px;
}

.fileTable .top-intro-content .titleSbjTitle {
  background: #707070;
  border-radius: 50px;
  color: #fff;
  display: inline-block;
  padding: 8px 25px 7px;
  margin-bottom: 10px;
  width: auto;
}

.fileTable .top-intro-content .titleSbjUl {
  list-style-type: auto;
  margin-left: 20px;
  margin-bottom: 10px;
}

.fileTable .top-intro-content .titleSbjUl li:not(:last-child) {
  margin-bottom: 5px;
}

.fileTable .top-intro-content .titleSbjUl p {
  font-size: 1rem /* 16/16 */;
}

/* -------------- file RWD --------------*/
@media (max-width: calc(1280px + 40px)) {
  .fileTable p,
  .fileTable a {
    font-size: 1rem;
  }
}

@media (max-width: 960px) {
  .fileTable .fillRow .fileSbj {
    display: none;
  }

  .fileTable .fileRow .fillSbj {
    display: none;
  }

  .fileTable .fillStatus,
  .fileTable .fileName {
    margin-left: 5px;
    margin-top: 0;
  }
}

@media (max-width: 640px) {
  .connect-btn-row {
    flex-direction: column;
  }

  .getDataBtn.cancel {
    margin-left: 0;
  }
}

/* -------------- finance --------------*/
.financeTable {
  max-width: 100%;
  width: 100%;
  overflow-x: auto;
}

.financeTable.mediationRecord {
  line-height: 1.4;
}

.financeTable.mediationRecord .tableBox {
  min-width: 1000px;
}

.financeTable.mediationRecord table.tableBox td {
  padding: 10px 5px;
}

.financeTable .tableBox {
  min-width: 640px;
}

.financeTable .thead .row {
  text-align: center;
}

.financeTable .thead .row .cell {
  background: #718391;
  color: #fff;
}

.financeTable .row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid rgba(1, 142, 199, 0.3);
  background: #fff;
}

.financeTable .row.color1 {
  background: #f3f8fd;
}

.financeTable .row.color2 {
  background: #fff9f2;
}

.financeTable .row.color3 {
  background: #f7fdf3;
}

.financeTable .row.color4 {
  background: #fff7f7;
}

.financeTable .cell {
  max-width: calc(100% / 4);
  width: 100%;
  padding: 8px;
}

.financeTable .cell.subCell {
  background: #eaeaea;
  text-align: center;
  max-width: 100%;
}

.financeTable .cell.wide {
  max-width: 100%;
}

.financeTable .cell .field {
  margin-bottom: 0;
  max-width: 100%;
}

.financeTable table.tableBox {
  width: 100% !important;
}

.financeTable table.tableBox td {
  border-top: 1px solid #cfcddc;
  padding: 10px;
}

.financeTable table.tableBox .field {
  margin-bottom: 0 !important;
  max-width: 100%;
}

.financeTable table.tableBox .secTitle {
  background: #eaeaea;
  font-weight: bold;
  width: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}

.financeTable table.tableBox .secSubTitle {
  width: 220px;
}

.financeTable thead td {
  background: #718391;
  color: #fff;
  text-align: center;
}

/* -------------- finance RWD --------------*/
@media (max-width: 480px) {
  .financeTable table.tableBox .secSubTitle {
    width: 160px;
  }
}

/* -------------- unreset --------------*/
/*
 * Unreset.css
 * Author: Binary Stash <binarystash01@gmail.com>
 * License: https://opensource.org/licenses/MIT MIT
 * Version: 1.0.0
 */
.unreset body {
  margin: 8px;
}

.unreset th {
  font-weight: bolder;
  text-align: center;
}

.unreset caption {
  text-align: center;
}

.unreset h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

.unreset h2 {
  font-size: 1.5em;
  margin: 0.75em 0;
}

.unreset h3 {
  font-size: 1.17em;
  margin: 0.83em 0;
}

.unreset h4,
.unreset p,
.unreset blockquote,
.unreset ul,
.unreset fieldset,
.unreset form,
.unreset ol,
.unreset dl,
.unreset dir,
.unreset menu {
  margin: 1.12em 0;
}

.unreset h5 {
  font-size: 0.83em;
  margin: 1.5em 0;
}

.unreset h6 {
  font-size: 0.75em;
  margin: 1.67em 0;
}

.unreset h1,
.unreset h2,
.unreset h3,
.unreset h4,
.unreset h5,
.unreset h6,
.unreset b,
.unreset strong {
  font-weight: bolder;
}

.unreset blockquote {
  margin-left: 40px;
  margin-right: 40px;
}

.unreset i,
.unreset cite,
.unreset em,
.unreset var,
.unreset address {
  font-style: italic;
}

.unreset pre,
.unreset tt,
.unreset code,
.unreset kbd,
.unreset samp {
  font-family: monospace;
}

.unreset pre {
  white-space: pre;
}

.unreset big {
  font-size: 1.17em;
}

.unreset small,
.unreset sub,
.unreset sup {
  font-size: 0.83em;
}

.unreset sub {
  vertical-align: sub;
}

.unreset sup {
  vertical-align: super;
}

.unreset table {
  border-spacing: 2px;
  border-collapse: separate;
}

.unreset thead,
.unreset tbody,
.unreset tfoot {
  vertical-align: middle;
}

.unreset td,
.unreset th,
.unreset tr {
  vertical-align: inherit;
}

.unreset s,
.unreset strike,
.unreset del {
  text-decoration: line-through;
}

.unreset hr {
  border: 1px inset;
}

.unreset ol,
.unreset ul,
.unreset dir,
.unreset menu,
.unreset dd {
  margin-left: 40px;
}

.unreset ol {
  list-style-type: decimal;
}

.unreset ul {
  list-style-type: disc;
}

.unreset ol ul,
.unreset ul ol,
.unreset ul ul,
.unreset ol ol {
  margin-top: 0;
  margin-bottom: 0;
}

.unreset {
  line-height: 1.2;
}

/* HTML5 */
.unreset figure {
  margin: 1em 40px;
}

/*# sourceMappingURL=application.css.map */

.mask {
  background: rgba(0, 0, 0, 0.7);
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 2;
}

.loading {
  align-items: center;
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.loading .loader {
  transform: scale(1.5);
}

.loading svg path,
.loading svg rect {
  fill: #718391;
}

.loading .load-text {
  color: #ddd;
  margin-top: 10px;
}

.pop-win {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}

.pop-win .pop-text {
  background: #fff;
  padding: 25px 30px;
  margin: auto;
  max-width: 400px;
  width: 100%;
}

.pop-win .text {
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
}

.pop-win a {
  background: #718391;
  color: #fff;
  display: block;
  margin: 10px auto 0;
  padding: 12px;
  text-align: center;
  width: 135px;
}

.pop-win a:hover {
  background: #ffd858;
  color: #444;
}

/* maintain */
.maintain-grid {
  background: url("../images/bg-page.jpg");
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 50px 30px;
  padding-bottom: 120px;
}

.maintain-grid .main-grid {
  position: relative;
}
.maintain-grid img {
  display: block;
  max-width: 100%;
}
.maintain-grid .content {
  position: absolute;
  top: 56%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.maintain-grid .text {
  color: #333;
  text-align: center;
}
.maintain-grid .text .title {
  font-size: calc(80 * (100vw / 1920));
  letter-spacing: 7px;
}
.maintain-grid .text .des {
  font-size: calc(24 * (100vw / 1920));
  text-transform: uppercase;
  letter-spacing: 7px;
  margin-top: 15px;
  opacity: 0.4;
}
.maintain-grid .link {
  background: #d1a68a;
  border-radius: 30px;
  color: #fff;
  display: block;
  font-size: 17px;
  padding: 17px;
  text-align: center;
  transition: all 0.4s ease;
  margin: 40px auto 0;
  width: 200px;
}
.maintain-grid .link:hover {
  background: #333;
}

@media (max-width: 1280px) {
  .maintain-grid .text .title {
    font-size: calc(100 * (100vw / 1920));
  }
  .maintain-grid .text .des {
    font-size: calc(36 * (100vw / 1920));
  }
  .maintain-grid .link {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .maintain-grid .link {
    font-size: 15px;
    padding: 14px;
    width: 160px;
  }
}

@media (max-width: 500px) {
  .maintain-grid {
    padding: 20px 0;
    padding-bottom: 300px;
  }
  .maintain-grid .text .title {
    font-size: 26px;
  }
  .maintain-grid .text .des {
    font-size: 14px;
    letter-spacing: 1px;
    margin-top: 5px;
  }
  .maintain-grid .link {
    margin-top: 15px;
    padding: 11px;
  }
}