/*========================
*
* 基礎
*
========================*/
.user-dealer .menu {
  display: none;
}
.user-dealer .ad-box {
  padding-top: 70px;
}
.user-dealer .menu.v2 {
  display: block;
  z-index: 0;
}
.user-dealer .menu.v2 .menuContent {
  opacity: 1; 
}
.user-dealer .menu.v2.active #ham-menu.menuContent {
  display: initial;
}
.user-dealer .menu.v2 #ham-menu {
  display: block;
  top: 0;
}
.user-dealer .menu.v2 .menuContent ul {
  background: #fff;
}
.user-dealer .menu.v2 .menuContent ul li:hover{
  background: #f2f4f5a6;
 }

.user-dealer .ad-banner .img-fluid{
  height: 300px;
}
.breadcrumb-box p {
  margin-top: 10px;
  font-size: 13px;
  line-height: 26px;
}
.breadcrumb-box span {
  margin-left: 10px;
  margin-right: 10px;
}
.breadcrumb-box a.underline {
  text-decoration: underline;
}
.breadcrumb-box a.underline:hover {
  text-decoration: inherit;
}
.user-dealer .connection-box {
  margin-bottom: 84px;
}
.user-dealer .data-box {
  padding: 0 15px;
}
.user-dealer .data-box h5 {
  font-size: 21px;
  line-height: 25px;
  text-align: left;
  margin-bottom: 10px;
}
.user-dealer .data-box p {
  font-size: 15px;
  line-height: 26px;
}
.user-dealer .data-box button {
  width: 100%;
  height: 44px;
  font-size: 18px;
  line-height: 26px;
}
.user-dealer .data-box form {
  width: 360px;
  margin: 0 auto;
}
/* 0506增加 */
.user-dealer .data-box .but button,
.user-dealer .data-box .but {
  width: 72px !important;
  height: 26px !important;
  font-size: 13px;
  line-height: 13px;
  padding: 0;
  margin-left: 8px;
  margin-top: -8px;
}
.user-dealer .data-box .but_2 button,
.user-dealer .data-box .but_2 {
  width: 50px !important;
  height: 26px !important;
  font-size: 13px;
  line-height: 13px;
  padding: 0;
  margin-right: -1px;
  float: right;
}



/* 0506修改 */
.user-dealer .data-box .form-group textarea {
  width: 100%;
  height: 77px;
  margin-top: 10px;
  border: solid 1px #c0c6cf;
  border-radius: 4px;
  padding: 6px;
}
.user-dealer .data-box span.red {
  color: #cf000e;
}
.user-dealer .data-box .table th,
.user-dealer .data-box .table td {
  width: 50%;
}
.user-dealer .data-box .label-tag th,
.user-dealer .data-box .label-tag td {
  background-color: #4c5768;
  color: #fff;
}

.user-dealer .new-knowledge .card-list li {
  width: 190px;
}
.user-dealer .article-box .article-body p {
  font-size: 18px;
  line-height: 32px;
  margin-bottom:0;
}



.user-dealer .repair-but {
  margin-top: 20px;
}
.user-dealer .repair-but button {
  width: 333px;
  height: 50px;
  font-size: 18px;
  line-height: 26px;
}
.user-dealer footer {
  margin-top: 100px;
}





/* 進度查詢 */
.inquire-box {
  /*width: 616px;*/
  margin: 35px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inquire-box h5 {
  font-size: 32px;
  margin-bottom: 20px;
}

.inquire-box .float-left {
  /* 0507 修改 */
  margin-right: 46px;
}
.chart-three {
  width: 360px;
  height: 360px;
  margin: 0;
  position: relative;
}
.chart-three.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-three.animate figcaption:after {
  -webkit-animation: chart-three-label 3s steps(75) forwards;
          animation: chart-three-label 3s steps(75) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.chart-three svg {
  width: 100%;
  height: 100%;
}
.chart-three svg .circle-background, .chart-three svg .circle-foreground {
  r: 159.5px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: #c0c6cf;
  stroke-width: 38px;
}
.chart-three svg .circle-foreground {
  stroke: #cf000e;
  stroke-dasharray: 752.125px 1549.5px;
  stroke-dashoffset: 752.125px;
  /*stroke-linecap: round;*/
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.chart-three figcaption {
  display: inline-block;
  width: 100%;
  height: 110px;
  overflow: hidden;
  text-align: center;
  color: #4c5768;
  position: absolute;
  top: calc(50% - 3.25rem);
  left: 0;
  font-size: 0;
}
.chart-three figcaption:after {
  display: inline-block;
  content: "0%\a 1%\a 2%\a 3%\a 4%\a 5%\a 6%\a 7%\a 8%\a 9%\a 10%\a 11%\a 12%\a 13%\a 14%\a 15%\a 16%\a 17%\a 18%\a 19%\a 20%\a 21%\a 22%\a 23%\a 24%\a 25%\a 26%\a 27%\a 28%\a 29%\a 30%\a 31%\a 32%\a 33%\a 34%\a 35%\a 36%\a 37%\a 38%\a 39%\a 40%\a 41%\a 42%\a 43%\a 44%\a 45%\a 46%\a 47%\a 48%\a 49%\a 50%\a 51%\a 52%\a 53%\a 54%\a 55%\a 56%\a 57%\a 58%\a 59%\a 60%\a 61%\a 62%\a 63%\a 64%\a 65%\a 66%\a 67%\a 68%\a 69%\a 70%\a 71%\a 72%\a 73%\a 74%\a 75%\a 76%\a 77%\a 78%\a 79%\a 80%\a 81%\a 82%\a 83%\a 84%\a 85%\a 86%\a 87%\a 88%\a 89%\a 90%\a 91%\a 92%\a 93%\a 94%\a 95%\a 96%\a 97%\a 98%\a 99%\a 100%\a";
  white-space: pre;
  font-size: 7.5rem;
  line-height: 6.5rem;
}

@-webkit-keyframes chart-three-label {
  100% {
    transform: translateY(-487.5rem);
  }
}

@keyframes chart-three-label {
  100% {
    transform: translateY(-487.5rem);
  }
}
@-webkit-keyframes offset {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes offset {
  100% {
    stroke-dashoffset: 0;
  }
}

.inquire-box .float-right {
  width: 226px;
}
.inquire-box .nijyu-box {
  font-size: 25px;
  line-height: 25px;
  padding: 30px 20px;
  border: solid 1px #c0c6cf;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 0507 修改 */
  padding: 21px 20px;
}
.inquire-box .nijyu-box span {
  margin: 0 0 0 7px;
}
.inquire-box .nijyu-box .svg-inline--fa {
  margin: 0 10px;
  font-size: 40px;
}
.inquire-box .nijyu-text {
  font-size: 15px;
  color: #4c5768;
}

/* 第二個百分比 */
.inquire-box .float-left.v2 .chart-three svg .circle-foreground {
  stroke-dasharray: 650.125px 1549.5px;
  stroke-dashoffset: 650.125px;
}
.v2 .chart-three.animate figcaption:after {
  -webkit-animation: v2-chart-three-label 3s steps(65) forwards;
          animation: v2-chart-three-label 3s steps(65) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
@-webkit-keyframes v2-chart-three-label {
  100% {
    transform: translateY(-422.5rem);
  }
}

@keyframes v2-chart-three-label {
  100% {
    transform: translateY(-422.5rem);
  }
}


/* new % */
@charset "UTF-8";
@-webkit-keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.progress-ring,
.progress-ring-v2 {
  position: relative;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  /*height: 360px;
  width: 360px;*/
  /* 0507 修改 */
  width: 250px;
  height: 250px;
}
.progress-ring div,
.progress-ring-v2 div {
  position: absolute;
  top: 0;
  left: 0;
  /*height: 360px;
  width: 360px;*/
  /* 0507 修改 */
  width: 250px;
  height: 250px;
  /* 圓環高寬 */
  border: 22px solid transparent;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.progress-ring .progress-left,
.progress-ring .progress-right,
.progress-ring .progress-cover,
.progress-ring-v2 .progress-left,
.progress-ring-v2 .progress-right,
.progress-ring-v2 .progress-cover {
  /*clip: rect(0 180px 360px 0);*/
  /* 0507 修改 */
  clip: rect(0 125px 250px 0);
  /* [0 | <width/2> | <width> | 0] */
}
.progress-ring .progress-right,
.progress-ring-v2 .progress-right {
  opacity: 0;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.progress-ring .progress-text,
.progress-ring-v2 .progress-text  {
  border: none;
  font-family: "Arial", sans-serif;
  text-align: center;
  font-size: 6.5rem;
  color: #4c5768;
  /* 百分比文字顏色 
  line-height: 360px;*/
  /* 0507 修改 */
  font-size: 3.5rem;
  line-height: 250px;
}
/*.progress-ring .progress-percent {
  font-size: 0.55em;
}*/


/*========================
*
*     RWD
*
========================*/

@media only screen and (max-width:1055px) {
  .user-dealer .data-box form {
    width: auto;
  }
  .user-dealer .ad-banner .img-fluid {
    height: 225px;
  }
}
@media only screen and (max-width:991px) {
  .user-dealer .ad-banner .img-fluid {
    height: 200px;
  }
  .user-dealer .new-knowledge .card-list li {
    width: auto;
  }
}
@media only screen and (max-width:767px) {
  .user-dealer header .ctrl {
    width: 60px;
  }
  .user-dealer .ad-banner .img-fluid {
    height: 170px;
  }
  .inquire-box {
    display: block;
    width: 100%;
  }
  .inquire-box .chart-three {
    margin: 0 auto;
  }
  .inquire-box .float-left,
  .inquire-box .float-right {
    float: initial!important;
  }
  .inquire-box .float-left {
    margin-right: 0;
  }
  .inquire-box .float-right {
    margin: 0 auto;
  }
  .inquire-box .nijyu-box {
    margin-top: 19px;
  }
  .inquire-box .float-left.v2 {
    margin-top: 30px;
  }
  .progress-ring,
  .progress-ring-v2 {
    margin: 0 auto;
  }
  .user-dealer .menu.v2 {
    display: none;
  }
  .user-dealer .ad-box {
    padding-top: 0px;
  }
}
@media only screen and (max-width:414px) {
  .inquire-box h5 {
    margin-bottom: 10px;
  }
  .user-dealer .ad-banner .img-fluid{
    height: 79px;
  }
  .user-dealer .data-box {
    padding: 0;
  }
  .user-dealer .data-box .tab-pane {
    margin-bottom: 50px;
  }
  .user-dealer .data-box .table th{
    width: 35%;
  }
  .user-dealer .data-box .table td{
    width: 65%;
  }
  .user-dealer .connection-box {
    margin-bottom: 0px;
    margin-top: 10px;
  }
  .user-dealer .title-area.t-29 {
    margin-top: 19px;
  }
  .user-dealer footer {
    margin-top: 80px;
  }
  .user-dealer .article-box .but {
    margin: 20.4px 0 0px;
  }
  .user-dealer .repair-but button {
    width: 100%;
  }
  .user-dealer .connection-box .dazhang .repair-but {
    margin-right: 15px;
    margin-left: 15px;
  }
  .user-dealer .inquiry_box {
    margin-top: 20px;
  }
  /* 0507 修改 */
  /*
  .progress-ring, .progress-ring-v2,
  .progress-ring div, .progress-ring-v2 div {
    width: 320px;
    height: 320px;
  }
  .progress-ring div, .progress-ring-v2 div {
    border: 30px solid transparent;
  }
  .progress-ring .progress-text, .progress-ring-v2 .progress-text {
    font-size: 6rem;
    line-height: 320px;
  }
  .progress-ring .progress-left, .progress-ring .progress-right, .progress-ring .progress-cover, .progress-ring-v2 .progress-left, .progress-ring-v2 .progress-right, .progress-ring-v2 .progress-cover {
    clip: rect(0 160px 320px 0);
  }*/
}
@media only screen and (max-width:375px) {
  .chart-three {
    width: 320px;
    height: 320px;
  }
  .chart-three svg .circle-background, .chart-three svg .circle-foreground {
    r: 139.5px;
    stroke-width: 30px;
  }
  .chart-three svg .circle-foreground {
    stroke-dasharray: 658.125px 1477.5px;
  }
  .chart-three figcaption:after {
    font-size: 6.5rem;
  }
  .inquire-box .float-left.v2 .chart-three svg .circle-foreground {
    stroke-dasharray: 595.125px 1549.5px;
  }
}

@media only screen and (max-width:320px) {
  /* 0506增加 */
  .user-dealer .data-box .but button,
  .user-dealer .data-box .but{
    margin-left: 0px;
  }
}