@charset "UTF-8";
/* file: _variable */
/* btn */
/* border */
/* txt */
/* bg */
/* file: _mymain.sass */
/* ============================================================ */
/*                      general                                 */
/* ============================================================ */
body,
html {
  font-family: "Microsoft JhengHei", Lato, sans-serif, "Segoe UI Emoji";
  line-height: 1.5;
  letter-spacing: 0px;
  font-size: 1rem;
  position: relative;
  width: 100%;
  height: 100%;
  word-break: break-all;
}

p {
  font-size: 1rem;
  color: #000;
  margin: 0.5rem 0;
  line-height: 1.5;
  font-size: 1rem;
}

ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #E1251B;
}
a:hover {
  text-decoration: none;
  font-weight: bold;
}

*:focus {
  outline: 0;
}

* {
  box-sizing: border-box;
}

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

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

input[type="submit"] {
  padding: 0;
  border: none;
}

input[type="text"], input[type="search"], input[type="password"], input[type="number"], input[type="tel"], input[type="date"] {
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"], input[type="password"], input[type="number"], input[type="tel"], textarea {
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 5px;
  background: #fff;
  height: 40px;
  padding: 0.375rem 0.75rem;
  border: 1px solid #fff;
  letter-spacing: 1px;
}

input:focus, textarea:focus {
  border: 1px solid #E1251B;
}

textarea {
  height: auto;
}

.input-with-border {
  border-color: #D8D8D8;
}

.input-with-border[type="tel"] {
  border-color: #D8D8D8;
}

::placeholder {
  color: #919191;
}

a.show-link {
  color: #E1251B;
}
a.show-link:hover {
  font-weight: bold;
}

.txt-hlight {
  color: #25AAB4;
  font-weight: bold;
}

input[type=text]::-ms-clear, input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* ============================================================ */
/*                      elements                                */
/* ============================================================ */
.row {
  width: 100%;
  padding: 0 1rem;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 0rem;
}

.btn {
  display: inline-block;
  border-radius: 5px;
  height: 46px;
  font-size: 1.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-full {
  width: 100%;
}

.btn-autow {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.btn-confirm, .btn-normal:hover, .btn-normal-left:hover {
  /*background: #E1251B;*/
  background: #D70C18;
  color: #fff;
}

.btn-confirm, .btn-normal:hover, .btn-normal-left:hover .js-bottom-G2-close{
  /*background: #E1251B !important;*/
  background: #D70C18 !important;
  color: #fff !important;
}

.btn-normal, .btn-normal-left {
  background: #fff;
  color: #414141;
  height: 40px;
  overflow: hidden;
}

.btn-normal-left {
  justify-content: flex-start;
  padding-left: 1rem;
  padding-right: 1rem;
  line-height: 1.1;
}

.btn-one-icon {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 5px;
  /*background-color: #E1251B;*/
  background-color: #D70C18;
  background-position: center center;
  background-image: url("../img/menu-toggle@2x.png");
  background-repeat: no-repeat;
  background-size: auto 20px;
}

::-moz-focus-inner {
  border: 0;
}

.custom-select {
  font-size: 1.125rem;
  display: inline-block;
  width: 100%;
  height: 46px;
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  color: inherit;
  vertical-align: middle;
  background: url("../img/select-arrow.svg") no-repeat right 0.75rem center/8px 10px;
  background-size: 17px auto;
  background-color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  -moz-appearance: none;
  -o-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
.custom-select:focus {
  border: 1px solid #E1251B;
}

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

/* G3 */
.G3-2btn-raio-wrapper {
  display: flex;
  justify-content: space-around;
}
.G3-2btn-raio-wrapper input[type='radio'].radio-button + label {
  width: 48%;
}

input[type='radio'].radio-button {
  opacity: 0;
  position: fixed;
  width: 0;
}

input[type='radio'].radio-button + label {
  display: inline-block;
  border-radius: 5px;
  height: 46px;
  font-size: 1.0625rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fff;
  color: #414141;
}

input[type='radio'].radio-button:checked + label,
input[type='radio'].radio-button:focus + label {
  background: #E1251B;
  color: #fff;
}

/* ============================================================ */
/*                         layout                               */
/* ============================================================ */
.mask {
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}

.mask.mode-popup {
  z-index: 998;
  display: block;
}

header {
  width: 100%;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
}

header.mode-popup {
  z-index: 999;
}

.main-wrapper {
  overflow-y: auto;
  width: 100%;
  height: calc(100% - 110px);
  position: absolute;
  z-index: 1;
  top: 50px;
  left: 0;
  display: flex;
  flex-direction: column;
}

.popup-sec {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
}

.popup-sec.mode-popup {
  display: block;
  z-index: 999;
}

footer {
  width: 100%;
  position: fixed;
  z-index: 0;
  top: auto;
  left: 0;
  bottom: 0;
}

footer.mode-popup {
  z-index: 999;
}

.input-bar-outer {
  position: fixed;
  z-index: 2;
  top: auto;
  bottom: 0;
  left: 0;
}

.lock-scroll {
  position: fixed;
  overflow-y: hidden;
}

/* ============================================================ */
/*                      top menu                                 */
/* ============================================================ */
.top-bar-outer {
  width: 100%;
  /*background: #E1251B;*/
  background: #D70C18;
}

.top-bar {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top-bar > * {
  background-position: center center;
  background-repeat: no-repeat;
}
.top-bar .logo {
  height: 50px;
  width: 240px;
}
.top-bar .top-toggle {
  height: 40px;
  width: 40px;
  cursor: pointer;
  background-image: url("../img/topmenu-open@2x.png");
  background-size: auto 24px;
}
.top-bar .top-toggle.mode-popup {
  background-image: url("../img/topmenu-close@2x.png");
  background-size: auto 24px;
}

.top-menu {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #EAE9E9;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
}

.top-menu-wrapper {
  margin-left: auto;
  margin-right: auto;
  max-width: 768px;
}

.tmenu-list {
  display: flex;
  flex-direction: column;
}
.tmenu-list li {
  width: 100%;
  padding: 10px 20px;
}
.tmenu-list li a.tmenu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  background: #fff;
  font-size: 1rem;
  color: #000;
  font-weight: normal;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in {
  width: 90%;
  max-width: 220px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in span.tmenu-icon {
  margin-right: 5px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: 40px 40px;
  background-position: center center;
}
.tmenu-list li a.tmenu-item span.tmenu-item-in span:nth-child(2) {
  text-align: left;
}

.top-privacy {
  background: #fff;
}

/* ============================================================ */
/*                      msg input                                   */
/* ============================================================ */
body, html {
  background: -webkit-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: -moz-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: -o-linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
  background: linear-gradient(to bottom, #fff 0%, #fff 30%, #EAE9E9 100%);
}

.msg-sec {
  padding-top: 0.5rem;
  max-width: 768px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 20px;
}

.msg-sec .msg-box:last-child {
  margin-bottom: 20px;
}

.main-wrapper {
  background-color: #fff;
  background-image: url("../img/main-bg.jpg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right bottom;
}

.input-bar-outer {
  width: 100%;
  background: #EAE9E9;
}

.input-bar {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 10px;
  padding-right: 10px;
}
.input-bar .inputfield {
  height: 40px;
  flex-grow: 1;
  position: relative;
}
.input-bar .inputfield .user-input {
  font-size: 1rem;
  height: 100%;
  width: 100%;
  padding-right: 50px;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  border: none;
  background-color: transparent;
  padding-left: 10px;
  border: 1px solid #fff;
  border-radius: 5px;
  background: #fff;
}
.input-bar .inputfield .user-input + .btn-input-send {
  display: none;
}
.input-bar .inputfield .user-input:focus {
  border: 1px solid #E1251B;
}
.input-bar .inputfield .user-input:focus + .btn-input-send {
  display: inline-block;
  background: url("../img/input-send@2x.png") no-repeat 10px center;
  background-size: auto 36px;
}
.input-bar .inputfield .user-input:focus + .btn-input-send.active {
  display: inline-block;
  background: url("../img/input-send-act@2x.png") no-repeat 10px center;
  background-size: auto 36px;
}
.input-bar .inputfield .btn-input-send {
  cursor: pointer;
  width: 45px;
  height: 40px;
  position: absolute;
  z-index: 2;
  top: 0;
  right: 10px;
  background: url("../img/input-send@2x.png") no-repeat 10px center;
  background-size: auto 36px;
}
.input-bar .bottom-toggle {
  flex-shrink: 0;
  margin-right: 10px;
  background-position: 10px center;
  background-image: url("../img/menu-toggle@2x.png");
}

/* ============================================================ */
/*                 popup page                            */
/* ============================================================ */
.popup-page {
  position: relative;
  margin: 15vh auto 0 auto;
  height: 60vh;
  max-height: 350px;
  width: 90%;
  max-width: 300px;
  background: #fff;
  border-radius: 10px;
}
.popup-page .popup-close {
  position: absolute;
  z-index: 2;
  top: -15px;
  right: -15px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  background: #fff url(../img/menu-close-red@2x.png) no-repeat center center;
  background-size: auto 20px;
}
.popup-page .popup-wrapper {
  width: 100%;
  height: 100%;
}
.popup-page .popup-wrapper .msg-btnlist-bottom {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}

/* ============================================================ */
/*                     bottom page                              */
/* ============================================================ */
.bottom-page, .inputopt-page {
  width: 100%;
  height: auto;
  max-height: 80vh;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #EAE9E9;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  padding-top: 70px;
  padding-bottom: 20px;
  padding-left: 0px;
  padding-right: 0px;
}

.bottom-close {
  position: absolute;
  z-index: 2;
  top: 0px;
  right: calc(50% - 384px);
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: url("../img/menu-close-red@2x.png") no-repeat center center;
  background-size: auto 20px;
}

@media only screen and (max-width: 768px) {
  .bottom-close {
    right: 0px;
  }
}
.bottom-page-wrapper {
  max-height: calc(80vh - 70px);
  overflow-y: auto;
  width: 100%;
  margin: 0 auto;
}

.inputopt-section {
  width: 100%;
  position: fixed;
  z-index: 999;
  top: auto;
  left: 0;
  bottom: 60px;
}

.inputopt-page {
  padding-top: 20px;
  padding-bottom: 0px;
  box-shadow: 0 -5px 5px rgba(0, 0, 0, 0.25);
}

.inputopt-J1-wrapper, .inputopt-J2-wrapper {
  max-width: 768px;
  margin: 0 auto;
}

.inputopt-J3-wrapper {
  max-width: 768px;
  padding-left: 60px;
  padding-right: 10px;
  margin: 0 auto;
}
.inputopt-J3-wrapper .msg-btnlist-alone {
  margin-top: 5px;
  margin-bottom: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.inputopt-J3-wrapper .msg-btnlist-alone a {
  text-align: left;
}

.inputopt-J1, .inputopt-J3 {
  overflow-y: auto;
  max-height: 350px;
}
.inputopt-J1 .btn-wrapper, .inputopt-J3 .btn-wrapper {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.inputopt-page.inputopt-J3 {
  box-shadow: none;
  background-color: transparent;
  width: auto;
  max-width: 768px;
  margin: 0 auto;
  padding-top: 0;
}

/* ============================================================ */
/*                    login and G module                        */
/* ============================================================ */
.bottom-close-G, .bottom-close-H {
  top: 10px;
}

.login-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  max-width: 768px;
}
.login-wrapper .row {
  padding: 10px 5px;
}

.login-title, .bottom-page-title, .bottom-G-smalltitle {
  text-align: center;
  font-size: 1.5rem;
  color: #414141;
  overflow: hidden;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 1;
  height: 70px;
  line-height: 70px;
}

.login-input[type="search"], .login-input[type="password"], .login-input[type="number"], .login-input[type="tel"] {
  width: 100%;
  height: 46px;
  padding-left: 48px;
  background-position: 5px center;
  background-repeat: no-repeat;
  background-size: 36px 36px;
}

.login-input[type="search"].login-icon-id {
  background-image: url(../img/login-icon-id@2x.png);
}

.login-input[type="password"].login-icon-pass {
  background-image: url(../img/login-icon-pass@2x.png);
}

.login-input[type="tel"].login-icon-auth {
  background-image: url(../img/login-icon-auth@2x.png);
}

.login-input[type="search"].login-icon-auth {
  background-image: url(../img/login-icon-auth@2x.png);
}

.login-auth-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.login-auth-wrapper .login-input {
  flex-grow: 1;
}
.login-auth-wrapper .btn-one-icon {
  flex-shrink: 0;
  background-image: url(../img/login-icon-renew@2x.png);
}
.login-auth-wrapper .login-auth-img {
  flex-shrink: 0;
  width: 130px;
  height: 40px;
  margin-right: 8px;
  margin-left: 8px;
}
.login-auth-wrapper .login-auth-img img {
  width: 100%;
  height: 100%;
}

.G-auth-wrapper {
  justify-content: center;
}
.G-auth-wrapper > * {
  margin: 0 0.25rem;
}
.G-auth-wrapper span {
  line-height: 1.2;
  font-size: 0.875rem;
}

/* G3 - G7 */
.bottom-page-Gform {
  padding-bottom: 0;
}

.bottom-G-smalltitle, .bottom-G3G4-label {
  font-size: 1.125rem;
  font-weight: bold;
  color: #414141;
}

.bottom-G3G4-title {
  border-bottom: 1px solid #ACACAC;
}

.bottom-G3G4-label {
  margin-top: 0;
}

.bottom-page .G-form-wrapper {
  max-width: 768px;
  max-height: calc(60vh - 50px);
  width: 98%;
  overflow-y: auto;
  margin: 0 auto;
  background: #fff;
}

.scrollbar-inner > .scroll-element .scroll-element_outer, .scrollbar-inner > .scroll-element .scroll-element_track, .scrollbar-inner > .scroll-element .scroll-bar {
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
}

.scrollbar-inner > .scroll-element .scroll-bar {
  background-color: #919191;
}

/* G-datebox - calendar for PC */
.G-datebox {
  position: relative;
  width: 100%;
  height: 46px;
}
.G-datebox input {
  line-height: initial;
}
.G-datebox input[type="text"] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.G-datebox input[type="date"] {
  font-size: 1.125rem;
}

/* 修改date range picker 日曆內部樣式 */
.daterangepicker {
  font-family: inherit;
}
.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
  font-size: 1rem;
  width: 2.5rem;
  height: 2rem;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #E1251B;
}
.daterangepicker th.month {
  color: #25AAB4;
  font-weight: bolder;
}
.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
  border-color: #25AAB4;
}

/* G6 G7 */
/* shared style */
@media only screen and (max-width: 768px) {
  .bottom-page .bottom-G-smalltitle {
    padding-left: 15px;
    text-align: left;
  }
}
.G-formin {
  padding: 0px 10px 10px 10px;
}

.G-table {
  border-collapse: collapse;
  width: 100%;
}
.G-table td {
  vertical-align: top;
}
.G-table tr {
  padding: 0.5rem 1rem;
}
.G-table tr:not(:last-child) {
  border-bottom: 1px solid #D8D8D8;
}
.G-table td.G-col-100 {
  width: 100%;
}
.G-table td.G-col-50 {
  width: 50%;
}
.G-table td.G-col-33 {
  width: 33%;
}

.G-label {
  font-size: 1rem;
  color: #25AAB4;
  font-weight: bold;
}

.G-value {
  font-size: 1rem;
}

.G-notes {
  color: #E1251B;
}

.G7-table .G-value {
  font-size: 1.125rem;
  margin-top: 0;
}
.G7-table .G-label {
  margin-bottom: 0;
}

/* msg-F-swiper */
.msg-box-robot.msg-F-swiper {
  padding-left: 0;
  padding-right: 0;
}

.F-card-img {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.F-card-img img {
  width: 100%;
  height: auto;
}

.F-form {
  max-width: 100%;
  width: 100%;
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.F-title {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background: #E1251B;
  font-size: 1.125rem;
  letter-spacing: 1px;
  color: #fff;
  padding: 0.25rem 0;
}

.F-label {
  color: #919191;
  font-size: 0.875rem;
  margin-bottom: 0;
}

.F-amount, .F-value, .F-article {
  font-size: 1rem;
  margin-top: 0;
}

.F-article {
  margin: 10px;
}

.F4-mail, .F4-date {
  font-size: 0.875rem;
  margin-top: 0;
  padding-left: 5px;
  padding-right: 5px;
}

.F-row {
  width: 100%;
  border-bottom: 1px solid #D8D8D8;
  border-left: 1px solid #D8D8D8;
  border-right: 1px solid #D8D8D8;
}

.F-col-50, .F-col-33, .F-col-70, .F-col-30, .F-col-100 {
  vertical-align: top;
  display: inline-block;
}

.F-col-100 {
  width: 100%;
}

.F-col-50 {
  width: 49%;
}

.F-col-33 {
  width: 31%;
}

.F-col-30 {
  width: 29%;
}

.F-col-70 {
  width: 69%;
}

.F-col-50:not(:last-child) {
  border-right: 1px solid #D8D8D8;
}

.F-col-70 {
  border-left: 1px solid #D8D8D8;
}

.F-row:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* F2,F3, F4,F5 */
.msg-btnlist-alone {
  margin-top: 10px;
  border-radius: 10px;
  border: 1px solid #D8D8D8;
}

.F3-row, .F3-row:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.txt-wrap {
  word-break: break-all;
}

.F-row .G6f-value:last-child {
  border-bottom: 0;
}

.G6f-label, .G6f-value {
  display: block;
  width: 100%;
  padding-left: 10px;
  padding-right: 5px;
  border-bottom: 1px solid #D8D8D8;
  text-align: left;
}
.G6f-label p, .G6f-value p {
  display: inline-block;
  margin-left: -5px;
  vertical-align: top;
}

.G6f-label p {
  color: #25AAB4;
  font-weight: bold;
}
.G6f-label .G6f-datePay {
  width: 30%;
}
.G6f-label .G6f-dateAskMoney {
  width: 30%;
}
.G6f-label .G6f-amount {
  width: 40%;
  text-align: right;
}

.G6f-value .G6f-datePay {
  width: 30%;
  margin-bottom: 0;
}
.G6f-value .G6f-dateAskMoney {
  width: 70%;
  margin-bottom: 0;
}
.G6f-value .G6f-detail {
  width: 60%;
  margin-top: 0;
  word-break: break-all;
}
.G6f-value .G6f-amount {
  width: 40%;
  margin-top: 0;
  text-align: right;
}

/* ============================================================ */
/*                     main menu                              */
/* ============================================================ */
.mainmenu-wrapper {
  max-width: 600px;
  max-height: calc(80vh - 50px);
  margin-top: -20px;
}

/* main menu kv banner */
.mainmenu-kv {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.mainmenu-kv img {
  width: 100%;
  height: auto;
}

/* main menu tabs */
.mmenu-nav-tabs, .mmenu-tab-contents {
  padding-top: 10px;
  padding-left: 20px;
  padding-right: 20px;
}

.mmenu-nav-tabs {
  display: flex;
  justify-content: center;
  align-items: center;
}
.mmenu-nav-tabs li {
  width: 33%;
  max-width: 100px;
}
.mmenu-nav-tabs .tab {
  text-align: center;
  font-size: 0.9375rem;
  color: #919191;
  font-weight: bold;
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;
  border-bottom: 3px solid #EAE9E9;
}
.mmenu-nav-tabs .tab.active {
  color: #000;
  border-bottom: 3px solid #E1251B;
}

.mmenu-tab-contents {
  padding-top: 10px;
}

.mmenu-tab-panel {
  display: none;
}

.mmenu-tab-panel.active {
  display: block;
  height: auto;
  overflow-y: auto;
  max-height: 250px;
}

.mmenu-list {
  display: block;
  height: auto;
}
.mmenu-list li {
  display: inline-block;
  width: 49%;
  padding: 5px;
  height: 60px;
}
.mmenu-list li a.mmenu-item.invisible {
  visibility: hidden;
}
.mmenu-list li a.mmenu-item:hover span:nth-child(2) {
  font-weight: bold;
}
.mmenu-list li a.mmenu-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 5px;
  height: 50px;
  width: 100%;
  margin: 0 auto 0 auto;
  background-color: #fff;
  font-size: 1rem;
  color: #000;
}
.mmenu-list li a.mmenu-item span.mmenu-icon {
  margin-right: 10px;
  margin-left: 5px;
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 42px 42px;
  background-position: center center;
}
.mmenu-list li a.mmenu-item span:nth-child(2) {
  display: flex;
  align-items: center;
  line-height: 1.2;
  height: 50px;
  width: calc(100% - 60px);
}

/* ============================================================ */
/*                      msg box                                */
/* ============================================================ */
.msg-box {
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 0rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 0 0.5rem;
}

/* A1 */
.msg-box-robot {
  justify-content: flex-start;
}
.msg-box-robot .avatar {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;
  background: url("../img/avatar.svg") no-repeat top center;
  background-size: 45px 45px;
  margin-right: 5px;
  align-self: flex-start;
}
.msg-box-robot .msg-bubble {
  background: #FFF;
  margin-right: 6px;
  margin-left: 12px;
}

/* A2 */
.msg-box-user {
  justify-content: flex-start;
  flex-direction: row-reverse;
}
.msg-box-user .msg-bubble {
  background: #FF6D68;
  color: #FFF;
  margin-right: 12px;
  margin-left: 6px;
}
.msg-box-user .msg-bubble:after {
  left: auto;
  right: -12px;
  border-color: #FF6D68 transparent transparent transparent;
}

/* A1 A2 common style */
.msg-box-robot:after, .msg-box-user:after {
  content: attr(data-time);
  width: auto;
  font-size: 12px;
  color: #414141;
  margin-top: 5px;
}

.swiper-container.card-B2-swiper .swiper-slide:last-child, .swiper-container.card-B3-swiper .swiper-slide:last-child,
.swiper-container.card-Fcard-swiper .swiper-slide:last-child {
  width: 250px;
}
.swiper-container.card-B2-swiper .swiper-slide:last-child:after, .swiper-container.card-B3-swiper .swiper-slide:last-child:after,
.swiper-container.card-Fcard-swiper .swiper-slide:last-child:after {
  content: attr(data-time);
  width: 50px;
  text-align: center;
  font-size: 12px;
  color: #414141;
  margin-top: 5px;
  position: absolute;
  right: 0;
  bottom: 0;
}

.swiper-container.card-Fcard-swiper .swiper-slide:last-child {
  width: 240px;
  padding-right: 50px;
}

.msg-box-user:after {
  text-align: right;
  padding-right: 0px;
}

.msg-box-robot:after {
  text-align: left;
  padding-left: 0;
}

.msg-box-robot .msg-bubble, .msg-box-user .msg-bubble {
  border-radius: 10px;
  padding: 10px 1rem;
  position: relative;
  box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.15);
  max-width: calc(75% - 45px);
}

/* bubble triangle style */
.msg-box-user .msg-bubble:before, .msg-box-user .msg-bubble:after, .msg-box-robot .msg-bubble:before, .msg-box-robot .msg-bubble:after {
  content: "";
  position: absolute;
  top: 12px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 12px 0 12px;
}

.msg-box-robot .msg-bubble:after {
  left: -12px;
  border-color: #fff transparent transparent transparent;
}

/* bubble triangle shadows */
.msg-box-robot .msg-bubble:before {
  left: -3px;
  top: 12px;
  z-index: -1;
  box-shadow: -4px 2px 2px 2px rgba(0, 0, 0, 0.15);
  -moz-transform: skewX(45deg);
  -o-transform: skewX(45deg);
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  background-color: transparent;
}

.msg-box-user .msg-bubble:before {
  right: -3px;
  top: 12px;
  z-index: -1;
  box-shadow: 4px 2px 2px 2px rgba(0, 0, 0, 0.15);
  -moz-transform: skewX(-45deg);
  -o-transform: skewX(-45deg);
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  background-color: transparent;
}

/* A1 A2 msg continuous */
.msg-box-robot.msg-cont .avatar {
  visibility: hidden;
}

.avatar.hidden {
  height: 1px;
  visibility: hidden;
}

.msg-box-robot.msg-cont .msg-bubble:before, .msg-box-robot.msg-cont .msg-bubble:after, .msg-box-user.msg-cont .msg-bubble:before, .msg-box-user.msg-cont .msg-bubble:after {
  visibility: hidden;
}

.msg-cont, .msg-B1, .msg-B2, .msg-B3, .msg-F-swiper {
  margin-top: 0.5rem;
}

/* ============================================================ */
/*                     loading dots                              */
/* ============================================================ */
.msg-box-robot.msg-loading {
  line-height: 1;
}

.msg-loading-anim #dot1 {
  animation: load 0.8s infinite;
}
.msg-loading-anim #dot2 {
  animation: load 0.8s infinite;
  animation-delay: 0.2s;
}
.msg-loading-anim #dot3 {
  animation: load 0.8s infinite;
  animation-delay: 0.4s;
}

@keyframes load {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
    r: 4;
  }
  100% {
    opacity: 0.5;
  }
}
/* ============================================================ */
/*                    swiper style                    					 */
/* ============================================================ */
/* global style */
.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled {
  opacity: 0 !important;
}

.swiper-button-prev, .swiper-button-next {
  width: 60px;
  height: 100%;
  top: 0px;
  margin-top: 0;
}

.swiper-button-prev {
  justify-content: flex-start;
}

.swiper-button-next {
  justify-content: flex-end;
}

.swiper-button-prev:after, .swiper-button-next:after {
  width: 40px;
  height: 40px;
  border-radius: 40px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  background: #EAE9E9;
  color: #919191;
  font-size: 1rem;
  line-height: 40px;
  text-align: center;
}

.swiper-button-prev.small, .swiper-button-next.small {
  width: 60px;
}

.swiper-button-prev.small:after, .swiper-button-next.small:after {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 0.875rem;
}

.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 5px;
}

.swiper-pagination-bullet {
  margin-top: 5px;
  width: 10px;
  height: 10px;
  border: 1px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.swiper-pagination-bullet-active {
  background: #E1251B;
}

/* for IE11 and EDEG, use normal font instead of icon font */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .swiper-button-prev:after, .swiper-button-next:after {
    font-family: FontAwesome;
    font-size: 20px;
  }

  .swiper-button-prev:after {
    content: "";
  }

  .swiper-button-next:after {
    content: "";
  }
}
@supports (-ms-accelerator: true) {
  .swiper-button-prev:after, .swiper-button-next:after {
    font-family: FontAwesome;
    font-size: 20px;
  }

  .swiper-button-prev:after {
    content: "";
  }

  .swiper-button-next:after {
    content: "";
  }
}
@supports (-ms-ime-align: auto) {
  .swiper-button-prev:after, .swiper-button-next:after {
    font-family: FontAwesome;
    font-size: 20px;
  }

  .swiper-button-prev:after {
    content: "";
  }

  .swiper-button-next:after {
    content: "";
  }
}
/* custom style */
.swiper-wrapper {
  z-index: -1;
}

/* mainmenu */
.swiper-container.mainmenu-swiper {
  width: 100%;
  max-width: 600px;
  height: auto;
}
.swiper-container.mainmenu-swiper .swiper-button-prev:after, .swiper-container.mainmenu-swiper .swiper-button-next:after {
  background: #fff;
  opacity: 0.5;
}
.swiper-container.mainmenu-swiper .swiper-button-prev {
  left: 5px;
}
.swiper-container.mainmenu-swiper .swiper-button-next {
  right: 5px;
}

/* card-B2, B3 */
.swiper-container.card-B2-swiper, .swiper-container.card-B3-swiper, .swiper-container.card-F-swiper {
  width: 100%;
  padding-left: 70px;
  padding-right: 70px;
  padding-right: 10px;
}
.swiper-container.card-B2-swiper .swiper-slide, .swiper-container.card-B3-swiper .swiper-slide, .swiper-container.card-F-swiper .swiper-slide {
  width: 200px;
}
.swiper-container.card-B2-swiper .swiper-button-prev, .swiper-container.card-B3-swiper .swiper-button-prev, .swiper-container.card-F-swiper .swiper-button-prev {
  left: 55px;
}
.swiper-container.card-B2-swiper .swiper-button-next, .swiper-container.card-B3-swiper .swiper-button-next, .swiper-container.card-F-swiper .swiper-button-next {
  right: 10px;
}

/* card-F */
.swiper-container.card-Fcard-swiper {
  padding-bottom: 20px;
  width: 100%;
}
.swiper-container.card-Fcard-swiper .swiper-slide {
  width: 190px;
  height: 119px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.3;
}
.swiper-container.card-Fcard-swiper .swiper-slide.swiper-slide-active {
  opacity: 1;
}
.swiper-container.card-Fcard-swiper .swiper-button-prev, .swiper-container.card-Fcard-swiper .swiper-button-next {
  padding-bottom: 20px;
}
.swiper-container.card-Fcard-swiper > .swiper-pagination-bullets {
  bottom: -5px;
}

.swiper-container.card-Fform-swiper {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10px;
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 5px;
}

.msg-box-robot.msg-F-swiper:after {
  padding-left: 25px;
  text-align: left;
}

@media only screen and (max-width: 350px) {
  .swiper-container.card-Fform-swiper {
    padding-left: 0px;
    padding-right: 0px;
  }

  .msg-box-robot.msg-F-swiper:after {
    padding-left: 0px;
  }
}
/* card-J2 */
.swiper-container.card-J2-swiper {
  width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}
.swiper-container.card-J2-swiper .swiper-slide {
  width: auto;
}

/* card-B1 */
.swiper-container.card-B1-swiper {
  box-sizing: border-box;
  width: 75%;
  max-width: calc(400px + 120px);
  height: auto;
  margin-left: 0;
  margin-right: 0;
  padding-left: 70px;
  padding-right: 70px;
  padding-bottom: 20px;
}
.swiper-container.card-B1-swiper .swiper-button-prev {
  left: 20px;
}
.swiper-container.card-B1-swiper .swiper-button-next {
  right: 20px;
}
.swiper-container.card-B1-swiper .swiper-button-prev, .swiper-container.card-B1-swiper .swiper-button-next {
  padding-bottom: 20px;
}
.swiper-container.card-B1-swiper > .swiper-pagination-bullets {
  bottom: 0px;
}

@media only screen and (max-width: 700px) {
  .swiper-container.card-B1-swiper {
    width: 100%;
  }
}
.B1-kv {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  text-align: center;
}
.B1-kv img {
  width: 100%;
  height: auto;
}

/* ============================================================ */
/*           H module questionnaire H問卷版型                     */
/* ============================================================ */
.swiper-container.card-H-swiper {
  padding-bottom: 45px;
}
.swiper-container.card-H-swiper .swiper-button-prev:after, .swiper-container.card-H-swiper .swiper-button-next:after {
  background: #fff;
  opacity: 1;
}
.swiper-container.card-H-swiper .swiper-button-prev, .swiper-container.card-H-swiper .swiper-button-next {
  top: auto;
  bottom: 0px;
  width: 80px;
  height: 30px;
}
.swiper-container.card-H-swiper .swiper-button-prev:after, .swiper-container.card-H-swiper .swiper-button-next:after {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: none;
  font-size: 0.9375rem;
  line-height: 30px;
  color: #E1251B;
  font-weight: bold;
  font-family: FontAwesome, "Microsoft JhengHei";
  content: attr(data-txt);
}
.swiper-container.card-H-swiper .swiper-button-prev {
  left: 10px;
}
.swiper-container.card-H-swiper .swiper-button-next {
  right: 10px;
}
.swiper-container.card-H-swiper .swiper-pagination {
  color: #25AAB4;
  font-size: 1.125rem;
}
.swiper-container.card-H-swiper .swiper-pagination:before, .swiper-container.card-H-swiper .swiper-pagination:after {
  font-size: 0.9375rem;
  color: #414141;
}
.swiper-container.card-H-swiper .swiper-pagination:before {
  content: attr(data-before-txt);
  margin-right: 5px;
}
.swiper-container.card-H-swiper .swiper-pagination:after {
  content: attr(data-after-txt);
  margin-left: 5px;
}

.H-wrapper {
  max-width: 768px;
}

.H-page-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 1rem;
  height: 280px;
  overflow-y: auto;
}
.H-page-wrapper img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.H-page-wrapper .H-ques-txt {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
}
.H-page-wrapper .H-ques-txt:before {
  content: attr(data-ques-no);
  width: 24px;
  text-align: center;
  display: block;
}
.H-page-wrapper .H-ques-txt p {
  text-align: left;
  margin-top: 30px;
  text-align: justify;
}
.H-page-wrapper .H-legend {
  max-width: 320px;
  margin: 10px 0;
}
.H-page-wrapper textarea {
  width: 100%;
  padding: 10px;
}
.H-page-wrapper .btn-wrapper {
  padding-top: 0;
  width: 100%;
}

.H-svgani {
  width: 230px;
  height: 60px;
  margin: 10px 0 5px 0;
}

.H-svgani svg, .H-svgani object {
  width: 100%;
  height: auto;
}

.H-score-box {
  margin: 10px 0;
  width: 100%;
  max-width: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.H-score-box .H-score {
  border-radius: 5px;
  height: 40px;
  padding: 0.375rem 0.75rem;
  width: calc(100% - 90px);
  text-align: center;
  font-size: 1.0625rem;
  border: 1px solid #D8D8D8;
  margin: 0 3px;
}
.H-score-box .btn-one-icon {
  background-size: 20px auto;
}
.H-score-box .btn-minus {
  background-image: url(../img/score-minus@2x.png);
}
.H-score-box .btn-add {
  background-image: url(../img/score-add@2x.png);
}

.H-star-rating {
  margin:0.1em 0;
  font-size: 2.5rem;
  overflow: hidden;
}
.H-star-rating input {
  float: right;
  opacity: 0;
  position: absolute;
}
.H-star-rating label {
  float: right;
  margin: 0 0.3rem;
  color: #ACACAC;
}
.H-star-rating label:hover ~ label, .H-star-rating label:hover,
.H-star-rating input:focus ~ label, .H-star-rating input:checked ~ label {
  color: #E1251B;
  cursor: pointer;
}

/* ============================================================ */
/*                   general modules                            */
/* ============================================================ */
/* card-I */
.msg-box-robot.msg-Imap {
  padding-top: 0.3rem;
  box-sizing: border-box;
}
.msg-box-robot.msg-Imap:after {
  margin-bottom: 5px;
}

.msg-Imap-img {
  padding-left: 70px;
  max-width: 360px;
  margin-right: 6px;
}
.msg-Imap-img img {
  width: 100%;
  height: auto;
}

@media only screen and (max-width: 500px) {
  .msg-Imap-img {
    max-width: 75%;
  }
}
/* card-C1 */
.icon-inline {
  width: 20px;
  height: 20px;
  vertical-align: middle;
  line-height: 20px;
  margin: 0 3px 0 3px;
}

/* card-C2 */
.msg-box-robot .msg-bubble.msg-bubble-with-img img {
  display: block;
  width: 100%;
  height: auto;
  margin: 5px 0;
}

.img-full {
  display: block;
  width: 100%;
  height: auto;
}

/* msg-D4, msg-D5, msg-D6, msg-D7 */
.msg-box-robot .msg-bubble.msg-bottom-with-btn {
  padding: 0;
}
.msg-box-robot .msg-bubble.msg-bottom-with-btn .msg-header {
  padding: 0.5rem 1rem 0.5rem 1rem;
}
.msg-box-robot .msg-btnlist-inside {
  border-radius: 10px;
  margin: 10px 0;
}
.msg-box-robot .msg-btnlist-inside a {
  text-align: left;
}

.msg-btnlist {
  background: #fff;
  border: 1px solid #D8D8D8;
}

.msg-btnlist-bottom {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.toggle-box-button {
  margin-top: 0.25rem;
  cursor: pointer;
  position: relative;
  display: inline-block;
  max-width: calc(9rem + 1.5rem);
  width: auto;
  padding: 0 2rem 0 0.5rem;
  background: #fff;
  border-radius: 5px;
}

.toggle-box-button span {
  display: inline-block;
  vertical-align: middle;
  height: 2rem;
  line-height: 2rem;
  font-size: 1rem;
  color: #E1251B;
  overflow: hidden;
}
.toggle-box-button span:hover {
  font-weight: bold;
}

.toggle-box-button:after {
  position: absolute;
  right: 0;
  top: 0.5rem;
  font-family: FontAweSome;
  text-align: center;
  width: 1.5rem;
  font-size: 1rem;
  color: #E1251B;
  margin: 0 0.25rem;
  content: "";
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.toggle-box-button.opened:after {
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  top: 0.25rem;
}

.toggle-box-button.opened + .toggle-box {
  visibility: visible;
  height: auto;
}

.toggle-box {
  visibility: hidden;
  height: 1px;
}

.li-with-icon {
  text-indent: -26px;
  padding-left: 26px;
  margin-bottom: 3px;
}

/* ============================================================ */
/*                E modules popup                               */
/* ============================================================ */
.popup-page.msg-E1, .popup-page.msg-E2 {
  height: 65vh;
  max-height: 350px;
}

.popup-page.msg-E3 {
  height: auto;
  max-height: 375px;
  max-height: 65vh;
}

.popup-page.msg-E4 {
  height: auto;
  max-height: 350px;
  max-height: 60vh;
}

.popup-page.msg-E5, .popup-page.msg-E6, .popup-page.msg-E7 {
  height: auto;
  max-height: 250px;
}

/* popup E1 */
.popup-wrapper .msg-btnlist {
  height: 50px;
}
.popup-wrapper .msg-header {
  height: calc(100% - 50px);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
}

/* popup E2 */
.E2-wrapper .msg-header {
  padding-top: 35px;
}
.E2-wrapper .toggle-box-button:after {
  top: 0.3rem;
}
.E2-wrapper .toggle-box-button.opened:after {
  top: 0.05rem;
}
.E2-wrapper .toggle-box-button.opened + .toggle-box {
  height: calc(65vh - 204px);
  max-height: calc(350px - 204px);
  overflow-y: auto;
}
.E2-wrapper .toggle-box-button.opened + .toggle-box p {
  font-size: 0.9375rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
}

.E2-txtsec {
  position: relative;
  z-index: 9;
  padding: 20px 20px 10px 20px;
  background: inherit;
  overflow: hidden;
}
.E2-txtsec:before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(255, 255, 255, 0.7);
}
.E2-txtsec:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -2;
  background: inherit;
  filter: blur(5px);
}

.E2-h1 {
  height: 1.125rem;
}

.E2-txt {
  font-size: 0.9375rem;
  height: 0.9375rem;
}

.E2-h1, .E2-txt {
  line-height: 1;
  display: block;
  overflow: hidden;
  margin: 0 0 10px 0;
}

/* popup E3 */
.E3-wrapper .msg-header {
  padding-top: 0;
}

.E3title {
  font-size: 1rem;
  font-weight: bold;
  color: #414141;
  margin-bottom: 0;
  margin-top: 0;
}

.E3-txt {
  margin-top: 0;
}

/* popup E4 */
.E4-h1 {
  text-align: center;
  padding-top: 0px;
  padding-bottom: 0px;
}

.E4-icon {
  width: 30px;
  height: auto;
  display: block;
  margin-left: calc(50% - 15px);
  margin-bottom: 10px;
}

/* shared style */
.E3-list-wrapper {
  height: 260px;
  overflow-y: auto;
}

.E3-list {
  margin-top: 0;
}

.E3-list li, .E4-list li, .E5-list li, .E6-list li, .E7-list li {
  border-top: 1px solid #D8D8D8;
}

.E3-list li:first-child {
  border-top: 0;
}

.E3-h1 {
  border-bottom: 1px solid #D8D8D8;
  padding-bottom: 10px;
  margin-bottom: 0;
}

.E3-list li, .E4-list li, .E5-list li, .E6-list li, .E7-list li,
.E3-h1, .E4-h1, .E5-h1, .E6-h1, .E7-h1 {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
}

.E2-h1, .E3-h1, .E4-h1, .E5-h1, .E6-h1, .E7-h1 {
  font-size: 1.125rem;
  color: #E1251B;
  font-weight: bold;
}

.E3-h1, .E5-h1, .E6-h1, .E7-h1 {
  width: 100%;
  display: flex;
  align-items: center;
  height: 50px;
}
.E3-h1 img, .E5-h1 img, .E6-h1 img, .E7-h1 img {
  margin-right: 5px;
}

.E5-h1, .E6-h1, .E7-h1 {
  justify-content: center;
}

.E3-txt, .E4-txt, .E5-txt, .E6-txt, .E7-txt {
  font-size: 0.9375rem;
  color: #666;
}

.E5-list li, .E6-list li, .E7-list li {
  padding-bottom: 10px;
  text-align: center;
}

.msg-btnlist.msg-btn-2sel {
  border-collapse: collapse;
  display: table;
  width: 100%;
  box-sizing: border-box;
}
.msg-btnlist.msg-btn-2sel a {
  width: 50%;
  display: table-cell;
}
.msg-btnlist.msg-btn-2sel a:not(:last-child) {
  border-bottom: 0;
  border-right: 1px solid #D8D8D8;
}

.msg-btnlist.msg-btn-2sel {
  border: 0;
  border-top: 1px solid #D8D8D8;
}

/* ============================================================ */
/*                       sticker                                */
/* ============================================================ */
/* card-sticker */
.msg-box-robot.msg-sticker {
  margin-top: 0;
}
.msg-box-robot.msg-sticker:after {
  margin-bottom: 5px;
  margin-left: -5px;
}

.msg-sticker-img {
  margin-left: calc(60px - 10px);
  width: auto;
}

.sticker {
  width: 170px;
  height: 170px;
  background-size: 170px 170px;
  background-repeat: no-repeat;
  background-position: left center;
  overflow: hidden;
}

.sticker-ani-6f {
  background-size: 1020px 170px;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(6, end);
  animation-name: stickerAniSteps6;
}

.sticker-ani-7f {
  background-size: 1190px 170px;
  animation-duration: 1.8s;
  animation-iteration-count: infinite;
  animation-timing-function: steps(7, end);
  animation-name: stickerAniSteps7;
}

@keyframes stickerAniSteps6 {
  100% {
    background-position: -1020px center;
  }
}
@keyframes stickerAniSteps7 {
  100% {
    background-position: -1190px center;
  }
}
/* ============================================================ */
/*                      card                                */
/* ============================================================ */
.msg-box-robot.msg-B1 {
  flex-direction: row;
  align-items: flex-end;
  box-sizing: border-box;
}
.msg-box-robot.msg-B1:after {
  content: attr(data-time);
  width: 50px;
  text-align: center;
  font-size: 12px;
  color: #414141;
  margin-top: 5px;
  margin-left: -60px;
  z-index: 2;
}

/* card B2, B3 */
.msg-box-robot.msg-B2, .msg-box-robot.msg-B3 {
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0;
  padding-right: 0;
  /* data-time */
}
.msg-box-robot.msg-B2:after, .msg-box-robot.msg-B3:after {
  display: none;
}

.card-B2, .card-B3 {
  box-sizing: content-box;
  width: 200px;
  border-radius: 5px;
  border: 1px solid #D8D8D8;
  background: #fff;
}

.B2-kv, .B3-kv {
  height: 100px;
}
.B2-kv img, .B3-kv img {
  width: 200px;
  height: 100px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.B2-title, .B3-title {
  font-size: 1rem;
  font-weight: bold;
  color: #414141;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid #D8D8D8;
  background: url("../img/B2-title.svg") no-repeat right 0px top 0px;
  background-size: 20px 20px;
}
.B2-title p, .B3-title p {
  color: #666;
}

.B2-linklist a, .B3-linklist a, .msg-btnlist a {
  display: block;
  color: #E1251B;
  padding: 0.8rem 1rem;
}
.B2-linklist a:not(:last-child), .B3-linklist a:not(:last-child), .msg-btnlist a:not(:last-child) {
  border-bottom: 1px solid #D8D8D8;
}

.B2-title, .B2-linklist a, .B3-title, .B3-linklist a, .msg-btnlist a {
  text-align: center;
}

.B3-title p {
  font-weight: normal;
  font-size: 0.875rem;
  text-align: left;
  margin-bottom: 0;
}

/* file: _queries.sass */
/* ============================================================ */
/*                    msg bubble width              			 */
/* ============================================================ */
/* ============================================================ */
/*                    main menu                        			 */
/* ============================================================ */
@media only screen and (max-width: 768px) {
  .swiper-container.card-B2-swiper .swiper-button-prev, .swiper-container.card-B3-swiper .swiper-button-prev {
    left: 10px;
  }
}
@media only screen and (min-width: 601px) {
  .mmenu-nav-tabs, .mmenu-tab-contents {
    padding-left: 0;
    padding-right: 0;
  }

  .mmenu-tab-panel.active {
    height: calc(80vh -340px);
  }

  .mmenu-list li {
    width: 49.5%;
  }
  .mmenu-list li a.mmenu-item {
    max-width: 100%;
  }
  .mmenu-list li a.mmenu-item span:nth-child(2) {
    width: auto;
  }
}
@media only screen and (max-height: 620px) {
  .swiper-container.mainmenu-swiper {
    max-width: 400px;
    height: auto;
  }
}
@media only screen and (max-width: 350px) {
  .mmenu-nav-tabs, .mmenu-tab-contents {
    padding-left: 5px;
    padding-right: 5px;
  }

  .mmenu-list li a.mmenu-item span.mmenu-icon {
    margin-left: 2px;
    margin-right: 5px;
  }
}
/* ============================================================ */
/*                      masterlink only                         */
/* ============================================================ */

input[type="search"].mas-input-pwd, 
input[type="password"].mas-input-pwd{
	width: 94%; 
	height: 46px;
	padding-left: 48px;
	background-position: 5px center; 
	background-repeat: no-repeat;
	background-size: 36px 36px;
	background-image: url('../img/login-icon-pass@2x.png');
}

input[type="search"].mas-input-otp{
	width: 81%; 
	height: 46px;
	padding-left: 5px; 
	display: inline-block;
	border-radius: unset;
}

.mas-otp-code{
	width: 16%;
	height: 46px;
	padding: 13px 7px 12px 48px;
	background: #fff;
	background-position: 5px center; 
	background-repeat: no-repeat;
	background-size: 36px 36px;
	background-image: url(../img/login-icon-auth@2x.png);
}

.mas-btn{
	width: 5%;
}

@media screen and (min-width: 451px) and (max-width: 650px) {
	input[type="search"].mas-input-pwd, 
	input[type="password"].mas-input-pwd{
		width: 84%;
	}
	
	input[type="search"].mas-input-otp{
		width: 68%;
	}
	
	.mas-btn{
		width: 14%;
		padding-left: 0px;
	}
}

@media screen and (max-width: 450px) {
	input[type="search"].mas-input-pwd, 
	input[type="password"].mas-input-pwd{
		width: 84%;
	}
	
	input[type="search"].mas-input-otp{
		width: 68%;
	}
	
	.mas-btn{
		width: 14%;
		padding-left: 0px;
	}
}

/* Galaxy S20 Ultra 、 iPhone XR */
@media screen and (max-width: 414) {
	input[type="search"].mas-input-otp{
		width: 67%;
	}
}
/* Pixel 5 */
@media screen and (max-width: 393px) {
	input[type="search"].mas-input-otp{
		width: 64%;
	}
}

/* iPhone 12 Pro */
@media screen and (max-width: 390px) {
	input[type="search"].mas-input-otp{
		width: 64%;
	}
}
/* iPhone SE */
@media screen and (max-width: 375px) {
	input[type="search"].mas-input-otp{
		width: 63%;
	}
}

/* Galaxy S8+ */
@media screen and (max-width: 360px) {
	input[type="search"].mas-input-otp{
		width: 61%;
	}
}

/* iPhone 4 */
@media screen and (max-width: 320px) {
	input[type="search"].mas-input-otp{
		width: 56%;
	}
}