@charset "UTF-8";
/*共用版型*/
html {
  font-size: 16px; }

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  font-family: "微軟正黑體","Helvetica Neue",'Microsoft JhengHei',sans-serif;
  font-size: 100%;
  color: #222222;
  background-color: #fafafa;
  overflow-x: hidden; }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0rem; }

ul {
  padding-left: 0;
  list-style: none;
  margin-bottom: 0rem; }

a.goBack {
  color: #444444;
  line-height: 1;
  padding: 0.25rem; }
  a.goBack:hover {
    color: #d81716;
    text-decoration: none; }

.btn {
  border-radius: 0.5rem; }
  .btn.focus, .btn :focus {
    box-shadow: none; }

/*kendo 修正*/
/*日期重複套form-control*/
.form-control {
  height: auto; }
  .form-control:not(.is-invalid) {
    margin-bottom: 0.5rem; }
  .form-control.is-invalid.k-widget {
    border: 2px solid #f83319;
    padding-right: 0rem;
    background-image: none; }

.k-datepicker .form-control {
  margin-bottom: 0rem; }

.k-datepicker .form-control-lg {
  padding: 0.375rem 1rem; }

@media (max-width: 576px) {
  .container {
    padding-right: 0px;
    padding-left: 0px; } }

/*--------------------------------
色系 */
.font-color-red {
  color: #f83319; }

/*--------------------------------
共用 */
.font-size-sm {
  font-size: 0.85rem; }

.font-size-lg {
  font-size: 1.25rem; }

.bold {
  font-weight: bold; }

img {
  vertical-align: middle;
  border-style: none;
  width: 100%;
  height: 100%; }

/*kendo修正*/
.k-dropdown .k-input, .k-dropdown .k-state-focused .k-input, .k-menu .k-popup, .k-multiselect .k-button, .k-multiselect .k-button:hover {
  padding: 0.375rem 0; }

.header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  z-index: 2;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid #eeeeee; }
  .header .header-title {
    display: flex;
    align-items: center;
    font-size: 1rem; }
    .header .header-title img {
      width: auto;
      height: 40px; }
    .header .header-title .page-name {
      white-space: nowrap;
      font-size: 0.9rem;
      padding: 0rem 1rem;
      font-weight: bold;
      letter-spacing: 0px;
      margin-left: 1rem;
      border-left: 1px solid #444444; }

.main .card.card--noRadius {
  padding: 1rem;
  border: none;
  border-radius: 0rem;
  min-height: calc(100vh - 8rem); }

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1); }
  .footer .flex-btn-block {
    padding: 0.5rem 1rem;
    display: flex; }
  .footer label {
    margin-bottom: 0; }
  .footer .btn {
    margin: 0rem; }

/*申請進度條*/
.stepper-block {
  display: flex;
  counter-reset: num; }
  .stepper-block li.step {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    padding: 0rem 0.25rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 0;
    color: #9a9a9a;
    border-bottom: 4px solid #9a9a9a; }
    .stepper-block li.step:not(:last-child)::after {
      content: ">";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -0.25rem; }
    .stepper-block li.step.active {
      color: #d81716;
      border-bottom: 4px solid #d81716; }
      .stepper-block li.step.active .circle {
        background-color: #d81716; }
    .stepper-block li.step .circle {
      display: none;
      position: relative;
      width: 2rem;
      height: 2rem;
      border-radius: 99rem;
      background-color: #9a9a9a;
      color: #ffffff; }
      .stepper-block li.step .circle:after {
        counter-increment: num;
        content: "0" counter(num);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); }
    .stepper-block li.step .text {
      position: relative;
      padding: 0.5rem 0rem;
      font-size: 0.85rem; }

/*按鈕*/
.btn-main {
  background-color: #d81716;
  color: #ffffff; }
  .btn-main:hover, .btn-main:active, .btn-main:focus {
    color: #ffffff; }
    .btn-main:hover :not([disabled]), .btn-main:active :not([disabled]), .btn-main:focus :not([disabled]) {
      opacity: 0.9; }

.btn-delect {
  background-color: #d81716;
  color: #ffffff; }
  .btn-delect:hover, .btn-delect:active, .btn-delect:focus {
    opacity: 0.9;
    color: #ffffff; }

.btn-other {
  color: #888888; }
  .btn-other:hover, .btn-other:active, .btn-other:focus {
    color: #888888; }

/*返回區塊*/
.back-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0rem;
  color: #494949; }
  .back-block .left {
    display: flex;
    align-items: center; }
  .back-block .right {
    display: flex;
    align-items: center; }
  .back-block .circle {
    background-color: transparent;
    margin-right: 10px; }

/*header*/
.title-block {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 1rem; }
  .title-block .title {
    color: #17a2b8;
    font-weight: bold;
    font-size: 1.5rem; }

.sub-title-block {
  padding: 0.5rem 1rem;
  background-color: #eeeeee;
  font-size: 1.25rem;
  border-radius: 0.25rem;
  margin: 0.25rem 0rem; }

.label-remark {
  background-color: #fff6f6;
  border-radius: 0.5rem;
  padding: 1rem; }
  .label-remark b {
    display: block; }
  .label-remark span {
    display: inline-block; }

.circle span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  color: #fff;
  font-weight: bold; }

/*隱私權*/
.policy-style p {
  margin: 0.5rem 0rem;
  padding: 0rem 1rem; }

/*申請流程*/
.step-list-block {
  width: 100%;
  margin-top: 1rem; }
  .step-list-block .step-list {
    position: relative;
    padding-left: 3.5rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem; }
    .step-list-block .step-list:not(:last-child) {
      border-bottom: 1px solid #eeeeee; }
    .step-list-block .step-list::before {
      content: "";
      width: 2.5rem;
      height: 2.5rem;
      position: absolute;
      left: 0rem;
      top: 0rem;
      background-color: #17a2b8;
      border-radius: 99rem;
      box-shadow: 0px 0px 3px 4px #d2f6f4; }
    .step-list-block .step-list::after {
      content: attr(data-list);
      position: absolute;
      left: 0.5rem;
      top: 0.25rem;
      color: #ffffff;
      font-size: 1.25rem; }
  .step-list-block ul {
    padding-left: 1rem;
    list-style-type: disc; }
  .step-list-block .title {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    margin-bottom: 0.25rem; }
    .step-list-block .title h3 {
      font-size: 1.5rem; }

/*文件上傳*/
.addFastID_IMG_block {
  cursor: pointer;
  position: relative;
  border: 2px solid #d81716;
  border-radius: 1rem;
  padding: 0.5rem;
  max-height: 245px;
  height: 245px;
  margin: 10px auto; }
  .addFastID_IMG_block .photoblock-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-weight: 700;
    text-align: center;
    background-color: #d81716;
    padding: 0.5rem;
    border-radius: 1rem;
    width: 120px;
    line-height: 1rem;
    top: -1rem; }
  .addFastID_IMG_block img {
    object-fit: contain; }
  .addFastID_IMG_block.hasImg {
    max-height: none;
    height: auto; }
    .addFastID_IMG_block.hasImg img {
      margin-bottom: 0.5rem; }
    .addFastID_IMG_block.hasImg img:last-child {
      margin-bottom: 0; }

.photoChoice_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  color: #888; }

.addCircle {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  border-radius: 99em;
  position: relative;
  border: 1px solid #888;
  margin: 0 auto 1rem auto; }
  .addCircle .line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1px;
    height: 20px;
    border: 1px solid #888; }
    .addCircle .line:last-child {
      transform: translate(-50%, -50%) rotate(90deg); }

/*輪播圖*/
.carousel-block {
  margin: 0rem 3rem; }
  .carousel-block .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.5rem;
    line-height: 1;
    z-index: 1; }
  .carousel-block .pre {
    left: -3rem; }
  .carousel-block .next {
    right: -3rem; }

/*上傳檔案*/
.drag_block {
  position: relative; }
  .drag_block .upload-icon {
    font-size: 8rem; }
  .drag_block .form-group {
    margin-bottom: 0; }
    .drag_block .form-group input {
      display: none;
      opacity: 0;
      width: 0;
      padding: 0; }
    .drag_block .form-group .btn {
      cursor: pointer;
      position: absolute;
      left: 50%;
      transform: translateX(-50%); }
  .drag_block #filedrag {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    padding: 13vh 1rem;
    color: #555;
    border: 2px dashed #555;
    border-radius: 0.5rem;
    padding: 4rem 1rem 6rem 1rem;
    margin-bottom: 1rem; }
    .drag_block #filedrag.hover {
      color: #f83319;
      border-color: #f83319;
      border-style: solid;
      box-shadow: inset 0 3px 4px #e1aaaa; }
      .drag_block #filedrag.hover .form-group {
        pointer-events: none; }

.preview_block .preview_title {
  display: flex;
  padding-bottom: 5px;
  border-bottom: 1px solid #494949;
  margin-bottom: 15px; }
  .preview_block .preview_title label {
    font-weight: bold;
    margin-right: 10px;
    margin-bottom: 0; }
  .preview_block .preview_title span {
    font-size: 0.875rem; }

.preview_block .upload_img {
  position: relative;
  display: inline-block;
  padding: 5px;
  margin-bottom: 1rem;
  border: 1px solid #494949;
  border-radius: 5px; }
  .preview_block .upload_img .delflag {
    cursor: pointer;
    position: absolute;
    background-color: #ffffff;
    font-size: 1.25rem;
    opacity: 0.9;
    right: 0;
    border-radius: 99rem;
    padding: 0.25rem;
    top: -0.25rem;
    right: -0.25rem;
    box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.1);
    color: #444444; }
    .preview_block .upload_img .delflag:hover {
      opacity: 1;
      color: #f83319; }
  .preview_block .upload_img img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.pointer-none {
  pointer-events: none;
  text-align: center; }

.cutting {
  position: relative; }

.fastID_img {
  position: relative;
  text-align: center;
  width: 100%; }
  .fastID_img.fastID_upload {
    position: absolute;
    z-index: -1;
    padding-top: 65vh; }
  .fastID_img .fastIDcanvas {
    width: 100%;
    /* position: absolute;
        left: 50%;
        top: 0%;
        transform: translateX(-50%);
        width:100%;*/ }

.photo_contorl button {
  min-width: 32px;
  min-height: 32px;
  border-radius: 99em;
  color: #fff;
  background-color: #5bbee9;
  border-color: #5bbee9;
  margin: 15px 5px 0px;
  box-shadow: none;
  border-width: 0px; }

.photo_contorl .photo_btn {
  padding: 5px 30px; }

/*調整PDF顯示GTW0090*/
#pdf-container canvas {
  display: block;
  margin-bottom: 10px;
  max-width: 100%;
  height: auto; }

@media (min-width: 768px) {
  /*--------------------------------
    共用 */
  .footer .flex-btn-block {
    flex-direction: row-reverse;
    padding: 0rem 1rem; }
  .footer .btn {
    margin: 0.5rem 0rem; }
  .footer .btn-other {
    border: 1px solid #888888; }
  /*流程*/
  .step-list-block {
    width: 80%;
    margin: 1rem auto; }
  /*申請流程*/
  .step-list-block {
    /*.step-list {
            padding-bottom: 2rem;

        }*/ }
  /*上傳圖檔*/
  .fastID_img .fastIDcanvas {
    width: auto; }
  /*輪播圖*/
  .carousel-block .slick-arrow {
    padding: 1rem;
    border-radius: 99rem;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
    line-height: 1;
    background-color: #ffffff;
    opacity: 0.5; }
    .carousel-block .slick-arrow:hover {
      opacity: 1; }
  .carousel-block .pre {
    left: -1.5rem; }
  .carousel-block .next {
    right: -1.5rem; } }