@import url("vendor/reset.css");
@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&family=Noto+Sans+TC:wght@100..900&display=swap");
:root {
  --font168:8.75vw;
  --font128:6.6667vw;
  --font96:5vw;
  --font74:3.855vw;
  --font69:3.5938vw;
  --font64:3.33335vw;
  --font60:3.125vw;
  --font48:2.5vw;
  --font40:2.0835vw;
  --font34:1.77085vw;
  --font32:1.66671vw;
  --font28:1.4584vw;
  --font24:1.25vw;
  --font22:1.14585vw;
  --font20:1.0417vw;
  --font18:0.9375vw;
  --font16:0.83334vw;
  --font14:0.72917vw;
  --font10:0.5209vw;
}

@media all and (max-width: 1660px) {
  :root {
    --font168:calc(0.1vw + 8.75vw);
    --font128:calc(0.1vw + 6.6667vw);
    --font96:calc(0.1vw + 5vw);
    --font74:calc(0.1vw + 3.855vw);
    --font69:calc(0.1vw + 3.5938vw);
    --font64:calc(0.1vw + 3.33335vw);
    --font60:calc(0.1vw + 3.125vw);
    --font48:calc(0.1vw + 2.5vw);
    --font40:calc(0.1vw + 2.0835vw);
    --font34:calc(0.1vw + 1.77085vw);
    --font32:calc(0.1vw + 1.66671vw);
    --font28:calc(0.1vw + 1.4584vw);
    --font24:calc(0.1vw + 1.25vw);
    --font22:calc(0.1vw + 1.14585vw);
    --font20:calc(0.1vw + 1.0417vw);
    --font18:calc(0.1vw + 0.9375vw);
    --font16:calc(0.1vw + 0.83334vw);
    --font14:calc(0.1vw + 0.72917vw);
    --font10:calc(0.1vw + 0.5209vw);
  }
}
@media all and (max-width: 1440px) {
  :root {
    --font168:calc(0.2vw + 8.75vw);
    --font128:calc(0.2vw + 6.6667vw);
    --font96:calc(0.2vw + 5vw);
    --font74:calc(0.2vw + 3.855vw);
    --font69:calc(0.2vw + 3.5938vw);
    --font64:calc(0.2vw + 3.33335vw);
    --font60:calc(0.2vw + 3.125vw);
    --font48:calc(0.2vw + 2.5vw);
    --font40:calc(0.2vw + 2.0835vw);
    --font34:calc(0.2vw + 1.77085vw);
    --font32:calc(0.2vw + 1.66671vw);
    --font28:calc(0.2vw + 1.4584vw);
    --font24:calc(0.2vw + 1.25vw);
    --font22:calc(0.2vw + 1.14585vw);
    --font20:calc(0.2vw + 1.0417vw);
    --font18:calc(0.2vw + 0.9375vw);
    --font16:calc(0.2vw + 0.83334vw);
    --font14:calc(0.2vw + 0.72917vw);
    --font10:calc(0.2vw + 0.5209vw);
  }
}
@media all and (max-width: 1024px) {
  :root {
    --font168:calc(0.6vw + 8.75vw);
    --font128:calc(0.6vw + 6.6667vw);
    --font96:calc(0.6vw + 5vw);
    --font74:calc(0.6vw + 3.855vw);
    --font69:calc(0.6vw + 3.5938vw);
    --font64:calc(0.6vw + 3.33335vw);
    --font60:calc(0.6vw + 3.125vw);
    --font48:calc(0.6vw + 2.5vw);
    --font40:calc(0.6vw + 2.0835vw);
    --font34:calc(0.6vw + 1.77085vw);
    --font32:calc(0.6vw + 1.66671vw);
    --font28:calc(0.6vw + 1.4584vw);
    --font24:calc(0.6vw + 1.25vw);
    --font22:calc(0.6vw + 1.14585vw);
    --font20:calc(0.6vw + 1.0417vw);
    --font18:calc(0.6vw + 0.9375vw);
    --font16:calc(0.6vw + 0.83334vw);
    --font14:calc(0.6vw + 0.72917vw);
    --font10:calc(0.6vw + 0.5209vw);
  }
}
body, html {
  font-family: "Instrument Sans", "Noto Sans TC", "Noto Sans SC", sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  background-color: #fff;
  -webkit-text-size-adjust: none;
  color: #1B1B1B;
}
@keyframes flash {
  0% {
    opacity: 0;
  }
  100% {
    overflow: 1;
  }
}
/* Safari */
@keyframes prloader {
  0% {
    background-image: url(../images/loading/loading_00.svg);
  }
  30% {
    background-image: url(../images/loading/loading_01.svg);
  }
  40% {
    background-image: url(../images/loading/loading_02.svg);
  }
  60% {
    background-image: url(../images/loading/loading_03.svg);
  }
  80% {
    background-image: url(../images/loading/loading_04.svg);
  }
  90% {
    background-image: url(../images/loading/loading_05.svg);
  }
  100% {
    background-image: url(../images/loading/loading_06.svg);
  }
}
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}
#preloder .loader .img { /* Safari */
  animation: prloader 1s linear;
  width: 210px;
  height: 96px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/loading/loading_06.svg);
}
#preloder .loader .deco {
  border-top: 1px solid #000;
  margin-top: 15px;
  padding-top: 15px;
}
#preloder .loader .desc {
  font-size: 14px;
  text-align: center; /* Safari */
  animation: flash 0.5s linear infinite;
}

a {
  transition: 0.5s ease;
  text-decoration: none;
}

button {
  transition: 0.5s ease;
}

textarea, select, input, button {
  outline: none;
}

:focus {
  outline-color: transparent;
  outline-style: none;
}

.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.text-center {
  text-align: center;
}

h3, p {
  /*text-align: justify;*/
  text-justify: inter-word;
  word-break: break-all;
}

.clear-fix {
  clear: both;
}

::-moz-placeholder {
  color: #00061A;
}

::placeholder {
  color: #00061A;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  box-shadow: none;
  border-radius: 10px;
  background: #E8E8E8;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #7A7A7A;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #343339;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 4;
  background-color: rgba(255, 255, 255, 0.9);
}
header .header-div {
  position: relative;
  padding: 20px 0;
}
header .header-div .two-cols {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .header-div .two-cols .col01 {
  display: flex;
  align-items: center;
}
header .header-div .two-cols .col02 {
  position: relative;
}
header .header-div .language i {
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url(./../images/icon_language.svg);
  background-position: center;
  background-repeat: no-repeat;
}
header .header-div .language .sub-menu {
  position: absolute;
  left: calc(50% - 40px);
  display: none;
}
header .header-div .language .sub-menu .box {
  min-width: 78px;
  border: 1px solid #FCB32A;
  overflow: hidden;
  border-radius: 8px;
  background-color: #fff;
}
header .header-div .language .sub-menu .box a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 55px;
  font-size: 16px;
  color: #36464E;
  text-align: center;
  border-bottom: 1px solid #E0E0E0;
}
header .header-div .language .sub-menu .box a.active, header .header-div .language .sub-menu .box a:hover {
  background-color: #FCB32A;
  color: #fff;
  border-bottom: 1px solid #FCB32A;
}
header .header-div .language .sub-menu .box a:last-child {
  border-bottom: none;
}
header .header-div .language:hover .sub-menu {
  display: block;
}
header .header-div .brand {
  position: relative;
}
header .header-div .brand a {
  display: flex;
}
header .header-div .brand a img {
  height: 60px;
}
header .header-div .navi {
  position: relative;
  z-index: 3;
  margin-left: 15px;
}
header .header-div .navi ul {
  display: flex;
  flex-wrap: wrap;
}
header .header-div .navi ul li {
  display: inline-block;
}
header .header-div .navi ul li a {
  display: block;
  color: #36464E;
  font-size: 16px;
  font-weight: 700;
  padding: 15px 15px;
  -webkit-font-smoothing: antialiased;
}
header .header-div .navi ul li a:hover {
  color: #ffb71b;
}

/*
.body-open-sub-brands{
    header{
        .header-div{
            .brands-div{
                display: block;
            }
        } 
    } 
}
.body-open-sub-seach{
    header{
        .header-div{
            .search-div{
                display: block;
            }
        } 
    } 
}
*/
main {
  position: relative;
  z-index: 1;
  padding-top: 0px;
}

@media all and (max-width: 1330px) {
  header .header-div .copy-code .code-message {
    top: 8px;
    right: 15px;
  }
}
@media all and (max-width: 1100px) {
  header {
    background-color: rgb(255, 255, 255);
  }
  header .header-div {
    padding: 10px 0;
  }
  header .header-div .brand a img {
    height: 40px;
  }
  header .header-div .navi {
    display: none;
  }
  header .header-div .two-cols .col02 {
    display: none;
  }
  main {
    padding-top: 60px;
  }
}
/* Safari */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.block-outer {
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  position: relative;
}

main {
  background-color: #FFDAD3;
  padding: 60px 0;
}

.section-block .box {
  padding: 40px;
  background-color: #fff;
  border-radius: 16px;
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1607843137);
}
.section-block .copyright {
  font-size: 14px;
  text-align: center;
  color: #00061A;
  margin-top: 30px;
}
.section-block .describe {
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(255, 56, 60, 0.14);
  font-size: 22px;
  line-height: 1.5;
  color: #212121;
}
.section-block .instruction {
  padding: 20px;
  border-radius: 16px;
  background-color: #FF5F57;
  font-size: 18px;
  line-height: 1.5;
  color: #fff;
}
.section-block .instruction .label {
  font-weight: 700;
}
.section-block .instruction .info {
  margin-top: 20px;
}
.section-block .describe + .instruction {
  margin-top: 20px;
}
.section-block .brand {
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(255, 56, 60, 0.14);
}
.section-block .brand .img img {
  height: 60px;
}
.section-block .brand .slogan {
  font-size: 24px;
  line-height: 1.2;
  color: #212121;
  margin-top: 10px;
}
.section-block .brand .slogan span {
  display: block;
}
.section-block .keyin {
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
  /* On mouse-over, add a grey background color */
  /* When the radio button is checked, add a blue background */
  /* Create the indicator (the dot/circle - hidden when not checked) */
  /* Show the indicator (dot/circle) when checked */
}
.section-block .keyin .radio-container {
  display: block;
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 16px;
  color: #00061A;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.section-block .keyin .radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.section-block .keyin .radio-container .checkmark {
  position: absolute;
  top: 6px;
  left: 6px;
  height: 10px;
  width: 10px;
  background-color: #fff;
  border: 1px solid rgba(0, 32, 128, 0.2);
  border-radius: 50%;
}
.section-block .keyin .radio-container:hover input ~ .checkmark:after {
  background-color: rgba(0, 32, 128, 0.2);
}
.section-block .keyin .radio-container:hover input:checked ~ .checkmark:after {
  background-color: rgb(133, 63, 249);
}
.section-block .keyin .radio-container input:checked ~ .checkmark {
  background-color: #fff;
}
.section-block .keyin .radio-container .checkmark:after {
  content: "";
  position: absolute;
  display: block;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #fff;
}
.section-block .keyin .radio-container input:checked ~ .checkmark:after {
  display: block;
  background-color: rgb(133, 63, 249);
}
.section-block .keyin .radio-container input ~ .checkmark:hover:after {
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(133, 63, 249, 0.2);
}
.section-block .keyin .item {
  margin-top: 40px;
}
.section-block .keyin .item .label {
  font-size: 16px;
  color: rgba(0, 13, 51, 0.4);
}
.section-block .keyin .item .controller {
  margin-top: 15px;
}
.section-block .keyin .item .controller .input input,
.section-block .keyin .item .controller .date input {
  border: none;
  border-bottom: 1px solid rgba(0, 32, 128, 0.2);
  font-size: 14px;
  padding: 10px 0;
  width: 100%;
}
.section-block .keyin .item .controller .select-dropdown select {
  -webkit-appearance: none;
  border: 0;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid rgba(0, 32, 128, 0.2);
  font-size: 14px;
  padding: 10px 0;
  width: 100%;
}
.section-block .keyin .item .error {
  font-size: 12px;
  color: #FF4B4B;
  margin-top: 10px;
  display: none;
}
.section-block .keyin .item .error.active {
  display: block;
}
.section-block .keyin .item.action {
  text-align: right;
}
.section-block .keyin .item.action button {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 102px;
  min-height: 40px;
  background-color: #000000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .keyin .item.action button i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_arrwo_right_white.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.section-block .keyin .item.action button:hover {
  background-color: rgb(133, 63, 249);
}
.section-block .question .radio-list {
  display: flex;
  flex-wrap: wrap;
  margin-left: -3px;
  margin-right: -3px;
  /* Hide the browser's default radio button */
  /* Create a custom radio button */
}
.section-block .question .radio-list .radio-container {
  display: block;
  position: relative;
  padding-left: 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0, 32, 128, 0.4);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid rgba(0, 32, 128, 0.2);
  border-radius: 4px;
  padding: 5px 7px;
  margin: 3px;
  overflow: hidden;
}
.section-block .question .radio-list .radio-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 3;
}
.section-block .question .radio-list .radio-container .checkmark {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.section-block .question .radio-list .radio-container input:checked ~ .checkmark {
  display: block;
  background-color: rgba(133, 63, 249, 0.2);
}
.section-block .question .item {
  margin-top: 40px;
}
.section-block .question .item .label {
  font-size: 16px;
  color: #00061A;
}
.section-block .question .item .controller {
  margin-top: 10px;
}
.section-block .question .item .error {
  font-size: 12px;
  color: #FF4B4B;
  margin-top: 10px;
  display: none;
}
.section-block .question .item .error.active {
  display: block;
}
.section-block .question .item.action {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.section-block .question .item.action .btn-next {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 102px;
  min-height: 40px;
  background-color: #000000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .question .item.action .btn-next i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_arrwo_right_white.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.section-block .question .item.action .btn-next:hover {
  background-color: rgb(133, 63, 249);
}
.section-block .question .item.action .btn-prev {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 102px;
  min-height: 40px;
  background-color: #000000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .question .item.action .btn-prev i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_arrwo_left_white.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.section-block .question .item.action .btn-prev:hover {
  background-color: rgb(133, 63, 249);
}
.section-block .question .item.action .btn-finish {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 175px;
  min-height: 40px;
  background-color: #FF4B4B;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .question .item.action .btn-finish i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_sumbit_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 2px;
}
.section-block .question .item.action .btn-finish:hover {
  background-color: rgb(133, 63, 249);
}
.section-block .brand + .finish {
  margin-top: 25px;
}
.section-block .describe + .finish {
  margin-top: 20px;
}
.section-block .finish .explanation {
  padding: 20px;
  border-radius: 16px;
  background-color: rgba(255, 56, 60, 0.14);
  color: #212121;
}
.section-block .finish .explanation .title {
  font-size: 20px;
}
.section-block .finish .explanation .info {
  font-size: 14px;
}
.section-block .finish .explanation .condition .item {
  border: 1px solid rgba(0, 32, 128, 0.2);
  padding: 10px;
  border-radius: 5px;
  background-color: #fff;
  margin: 15px 0;
}
.section-block .finish .explanation .condition .item .two-cols {
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
}
.section-block .finish .explanation .condition .item .two-cols .col01 {
  width: 60px;
}
.section-block .finish .explanation .condition .item .two-cols .col01 .status span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 20px;
  background-color: #FF4B4B;
  border-radius: 3px;
  color: #fff;
}
.section-block .finish .explanation .condition .item .two-cols .col02 {
  width: calc(100% - 60px - 20px);
  padding-left: 20px;
}
.section-block .finish .explanation .remark {
  font-size: 14px;
  color: #212121;
}
.section-block .finish .radar {
  margin-top: 30px;
}
.section-block .finish .radar .title {
  font-size: 16px;
  font-weight: 700;
  color: #00061A;
  text-align: center;
}
.section-block .finish .radar .chart {
  padding: 0 10%;
  margin-top: 15px;
}
.section-block .finish .results .item {
  background-color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(255, 56, 60, 0.1411764706);
  border-radius: 12px;
  padding: 10px;
  margin: 15px 0px;
}
.section-block .finish .results .item .two-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.section-block .finish .results .item .two-cols .col01 {
  width: 80px;
}
.section-block .finish .results .item .two-cols .col01 .score span {
  font-size: 10px;
  color: #000000;
  display: block;
  text-align: center;
}
.section-block .finish .results .item .two-cols .col01 .score span:nth-child(1) {
  font-size: 32px;
  font-weight: 700;
  color: #ff0000;
  line-height: 1;
}
.section-block .finish .results .item .two-cols .col02 {
  width: calc(100% - 80px);
}
.section-block .finish .results .item .two-cols .col02 .desc span {
  display: inline-block;
  font-size: 12px;
  background-color: rgba(255, 56, 60, 0.14);
  border: 1px solid rgb(255, 95, 87);
  border-radius: 4px;
  padding: 0 5px;
}
.section-block .finish .results .item .two-cols .col02 .area {
  font-size: 20px;
  color: #000000;
  margin-top: 5px;
}
.section-block .finish .results .item .two-cols .col02 .info {
  font-size: 12px;
  color: #797979;
}
.section-block .finish .remind {
  font-size: 14px;
  color: #00061A;
}
.section-block .finish .remind + .action {
  margin-top: 20px;
}
.section-block .finish .comments {
  margin-top: 30px;
  margin-bottom: 50px;
}
.section-block .finish .comments .title {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #00061A;
}
.section-block .finish .comments .score {
  font-size: 14px;
  color: #4A4A4A;
  text-align: center;
  margin-top: 10px;
}
.section-block .finish .comments .score .red {
  color: #FF0000;
}
.section-block .finish .comments .score .green {
  color: #34C759;
}
.section-block .finish .comments .score .orange {
  color: #FFAD00;
}
.section-block .finish .comments .list .item {
  margin: 15px 0;
}
.section-block .finish .comments .list .item .sub-title {
  color: #4A4A4A;
  font-size: 14px;
  font-weight: 700;
  border-bottom: 1px solid #E0E0E0;
  padding-bottom: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.section-block .finish .comments .list .item .sub-title span {
  display: inline-block;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(1) {
  width: 60px;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(1) i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  border-radius: 10px;
  color: #fff;
  width: 100%;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(1) i.red {
  background-color: #FF0000;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(1) i.green {
  background-color: #34C759;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(1) i.orange {
  background-color: #FFAD00;
}
.section-block .finish .comments .list .item .sub-title span:nth-child(2) {
  width: calc(100% - 60px - 10px);
  padding-left: 10px;
}
.section-block .finish .comments .list .item .sub-comment {
  margin-top: 5px;
}
.section-block .finish .comments .list .item .sub-comment .sub-desc {
  color: #292929;
  font-size: 14px;
  font-weight: 700;
}
.section-block .finish .comments .list .item .sub-comment .sub-info {
  color: #4A4A4A;
  font-size: 14px;
}
.section-block .finish .action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.section-block .finish .action .btn-prev {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 102px;
  min-height: 40px;
  background-color: #000000;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .finish .action .btn-prev i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_arrwo_left_white.svg);
  background-position: center;
  background-repeat: no-repeat;
}
.section-block .finish .action .btn-prev:hover {
  background-color: rgb(133, 63, 249);
}
.section-block .finish .action .btn-finish {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  min-width: 175px;
  min-height: 40px;
  background-color: #FF4B4B;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.section-block .finish .action .btn-finish i {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url(../images/icon_sumbit_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 2px;
}
.section-block .finish .action .btn-finish:hover {
  background-color: rgb(133, 63, 249);
}

@media all and (max-width: 749px) {
  main {
    padding: 20px;
  }
  .section-block .box {
    padding: 20px;
  }
  .section-block .brand {
    padding: 12px;
  }
  .section-block .brand .img img {
    width: 100%;
    height: auto;
  }
  .section-block .brand .slogan {
    font-size: 20px;
  }
  .section-block .brand .slogan span {
    display: inline;
  }
  .section-block .describe {
    font-size: 14px;
  }
  .section-block .instruction {
    font-size: 12px;
  }
  .section-block .finish .radar .chart {
    padding: 0;
  }
  .section-block .finish .results .item .two-cols .col01 {
    width: 55px;
  }
  .section-block .finish .results .item .two-cols .col02 {
    width: calc(100% - 55px);
  }
  .section-block .copyright {
    font-size: 10px;
  }
}
@media all and (max-width: 414px) {
  .section-block .brand {
    padding: 12px;
  }
}/*# sourceMappingURL=main.css.map */