@charset "UTF-8";
/*-----------------------------------------------------------------------------------
	
	Dialogue Service | Version: 0.1 

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------

	- Basic
	- Input Field
	- LightBox
	- Icon
	- Header
	- Main Wrap

-----------------------------------------------------------------------------------*/
/* ----------------------------------------------------------------
	Basic
-----------------------------------------------------------------*/
.dialogue-service-head, .dialog-wrap .dialog-box {
  font-size: 14px;
  line-height: 1.5;
}

/**/
body {
  color: #000;
  font-family: 'Microsoft YaHei', 'Noto Sans TC', Arial, Helvetica, sans-serif;
  font-weight: normal;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/*----------消虛線----------*/
a {
  color: #2f61df;
  outline: none;
  text-decoration: none;
}

:focus {
  outline-style: none;
  -webkit-outline-style: none;
  -moz-outline-style: none;
  /* For Firefox */
}

/*-------------------------*/
div, img, a {
  /* behavior:url(../images/temp_j/iepngfix.htc); */
  outline: 0;
}

dl, dt, dd, ol, ul, li {
  margin: 0;
  padding: 0;
}

:active,
:focus {
  outline: none !important;
}

fieldset, label {
  margin: 0;
  padding: 0;
}

::-moz-selection {
  background-color: #3390ff;
  color: #FFF;
  text-shadow: none;
}

::selection {
  background-color: #3390ff;
  color: #FFF;
  text-shadow: none;
}

::-moz-selection {
  background-color: #3390ff;
  color: #FFF;
  text-shadow: none;
}

::-webkit-selection {
  background-color: #3390ff;
  color: #FFF;
  text-shadow: none;
}

::-webkit-scrollbar {
  color: rgba(150, 150, 150, 0.2);
  background-color: rgba(150, 150, 150, 0.2);
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  color: rgba(150, 150, 150, 0.2);
}

::-webkit-scrollbar-thumb {
  background-color: #969696;
  border-radius: 1.5px;
}

::-webkit-input-placeholder {
  color: rgba(40, 40, 40, 0.5);
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  color: rgba(40, 40, 40, 0.5);
  opacity: 1;
  /* Firefox */
}

::-ms-input-placeholder {
  color: rgba(40, 40, 40, 0.5);
  opacity: 1;
  /* Firefox */
}

::placeholder {
  color: rgba(40, 40, 40, 0.5);
  opacity: 1;
  /* Firefox */
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: rgba(40, 40, 40, 0.5);
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: rgba(40, 40, 40, 0.5);
}

/* Other */
.clear {
  clear: both;
  display: block;
  font-size: 0px;
  height: 0px;
  line-height: 0;
  width: 100%;
  overflow: hidden;
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%;
}

/* End hide from IE-mac */
/* Common Elements */
.dialogue-service-head, .dialog-wrap .dialog-box {
  font-size: 14px;
  line-height: 1.5;
}

.dialog-input-wrap .dialog-input-field .send, .dialog-input-wrap .dialog-setting, .dialog-input-wrap .dialog-sound-effect, .dialog-input-wrap .dialog-upload-image, .dialog-input-wrap .dialog-go-away {
  color: #282828;
  background-color: transparent;
  width: 58px;
  height: 58px;
  border: 1px solid transparent;
  cursor: pointer;
}

.dialog-input-wrap .dialog-input-field .send, .dialog-input-wrap .dialog-setting, .dialog-input-wrap .dialog-input-field .input-field {
  background-color: #f0f0f0;
  border: 1px solid #e0e0e0;
  border-radius: 29px;
}

.dialog-input-wrap .dialog-input-field .send, .dialog-input-wrap .dialog-setting {
  border-radius: 100%;
}

/*-----------------*/
/* ----------------------------------------------------------------
	Input Field
-----------------------------------------------------------------*/
.multiple-fields-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.button-group {
  display: block;
  text-align: center;
}

.button {
  color: white;
  font-size: 14px;
  line-height: 20px;
  text-indent: 5px;
  letter-spacing: 5px;
  background-color: #2f61df;
  padding: 10px;
  min-width: 100px;
  border: 1px solid transparent;
  border-radius: 5px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.button + .button {
  margin-left: 15px;
}

.button:hover {
  opacity: 0.7;
}

.field-input-group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.field-input-group + .field-input-group {
  padding: 15px 0 0;
}

.field-input-group .field-input-tit {
  font-size: 14px;
  line-height: 1em;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: right;
  width: 21%;
  padding: 10px 10px 10px 0;
}

.field-input-group .field-input-txt {
  text-align: left;
  width: 79%;
}

h4 + .field-input-group,
h4 + table {
  margin-top: 11px;
}

.table-field-input-group .table-field-input-tit {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  text-align: right;
}

.table-field-input-group .table-field-input-tit span {
  display: block;
  padding: 10px 6px 10px 0;
  margin-top: 5.5px;
  margin-bottom: 5.5px;
}

.table-field-input-group .table-field-input-txt {
  text-align: left;
  width: 100%;
}

input, textarea {
  font-family: 'Microsoft YaHei', 'Noto Sans TC', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 18px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  width: 100%;
  padding: 10px;
  margin-top: 5.5px;
  margin-bottom: 5.5px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  outline: 0;
}

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

textarea {
  resize: none;
  resize: vertical;
  max-width: 36em;
  min-height: 6em;
}

.control-group {
  display: block;
}

.control {
  font-size: 14px;
  line-height: 20px;
  display: block;
  padding-left: 22px;
  position: relative;
  cursor: pointer;
  /*-- checkbox --*/
}

.control + .control {
  margin-top: 8px;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control input:disabled ~ .control__indicator {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

.control input:checked ~ .control__indicator {
  background: #e6e6e6;
}

.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}

.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:not([disabled]):checked ~ .control__indicator,
.control .control input:checked:focus ~ .control__indicator,
.control:hover .control input:checked:focus ~ .control__indicator {
  background: #f0f0f0;
}

.control input:checked ~ .control__indicator:after {
  display: block;
}

.control__indicator {
  position: absolute;
  top: 6px;
  left: 0;
  height: 10px;
  width: 10px;
  background: #e6e6e6;
  border: 1px solid #e0e0e0;
}

.control__indicator:after {
  content: ' ';
  position: absolute;
  display: none;
}

.control--radio .control__indicator {
  border-radius: 50%;
  /*-- select --*/
}

.control--radio .control__indicator:after {
  left: 2px;
  top: 2px;
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background: #282828;
}

.control--radio .control__indicator input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}

.control--radio .control__indicator .select {
  position: relative;
  display: inline-block;
  margin-bottom: 15px;
  width: 100%;
}

.control--checkbox .control__indicator:after {
  left: 8px;
  top: 4px;
  width: 3px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}

.select-box {
  display: block;
  width: 100%;
  position: relative;
}

.select-box select {
  font-size: 14px;
  line-height: 1em;
  background-color: #fff;
  padding: 12px;
  margin: 1px 0;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  outline: 0;
  cursor: pointer;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

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

.select-box select:focus {
  border: 1px solid #2f61df;
}

.select-box select:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.select-box select:hover ~ .select__arrow,
.select-box select:focus ~ .select__arrow {
  border-top-color: #000;
}

.select-box select:disabled ~ .select__arrow {
  border-top-color: #ccc;
}

.select-box select option {
  line-height: 30px;
  height: 30px;
  background: white;
  padding: 8px 0;
}

.select-box select option:hover {
  background: #2f61df;
}

.select-box select option:disabled {
  color: rgba(40, 40, 40, 0.5);
  background-color: #ddd;
}

.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

.select {
  cursor: pointer;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 40px;
  margin-top: 5.5px;
  margin-bottom: 5.5px;
  font-size: 14px;
  line-height: 1em;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.select-styled {
  font-size: 14px;
  line-height: 1;
  padding: 12px;
  border-radius: 5px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: initial;
  cursor: pointer;
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.select-styled::before {
  content: '\e8b5';
  color: #282828;
  font-family: 'font-icon';
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  pointer-events: none;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15px;
  z-index: 3;
  opacity: 0.5;
}

.select-styled.active {
  border: 1px solid #2f61df;
}

.select-styled.active:before {
  opacity: 1;
}

.select-styled.active::after {
  content: ' ';
  display: block;
  background-color: #fff;
  -webkit-box-shadow: -1px -1px 0 0.5px #e0e0e0;
          box-shadow: -1px -1px 0 0.5px #e0e0e0;
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  bottom: -15px;
  position: absolute;
  left: 19px;
  z-index: 1000;
}

.select-options {
  display: none;
  list-style: none;
  background: white;
  width: 100%;
  max-height: 120px;
  margin: 9px 0 0;
  padding: 5px 0;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  -webkit-transform: translate(-1px, 0);
          transform: translate(-1px, 0);
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 999;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

.select-options li {
  text-indent: 15px;
  margin: 0;
  padding: 8px 0;
  -webkit-transition: all 0.15s ease-in;
  transition: all 0.15s ease-in;
  position: relative;
  z-index: 1001;
}

.select-options li:hover {
  color: white;
  background: #2f61df;
}

.select-options li:first-child {
  display: none;
}

.select-options li[rel="hide"] {
  display: none;
  opacity: 0;
}

.verification-input-fields {
  font-size: 14px;
  line-height: 1em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: #fff;
  padding: 0;
  margin-top: 5.5px;
  margin-bottom: 5.5px;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  outline: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.verification-input-fields input {
  max-width: 65%;
  margin: 0;
  border: none;
}

.verification-input-fields .verification-code {
  max-width: 35%;
  margin: 3px;
}

.verification-input-fields:focus, .verification-input-fields:focus-within {
  border: 1px solid #2f61df;
}

.rating-box {
  height: 53px;
}

/*-- Style Star Rating Widget --*/
.rating {
  font-size: 18px;
  line-height: 18px;
  font-family: 'font-icon';
  display: block;
  width: calc( 0.8em + 1.2em + 1.2em + 1.2em + 1.2em + 1.2em);
  padding-top: 25px;
  padding-bottom: 15px;
  margin: auto;
  border: none;
  /* CSS Magic to Highlight Stars on Hover */
  /* hover previous stars in list */
}

.rating > input {
  display: none;
}

.rating > label {
  position: relative;
}

.rating > label::before {
  margin: 0 0.2em;
  display: inline-block;
  content: '\e806';
  position: relative;
  z-index: 2;
}

.rating > label::after {
  content: '\e806';
  color: #e0e0e0;
  font-size: 18px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0.2em;
  z-index: 1;
}

.rating > label::after:checked, .rating > label::after:hover {
  color: transparent;
}

.rating > .half {
  opacity: 0;
}

.rating > .half:hover {
  opacity: 1;
}

.rating > .half:before {
  content: '\e808';
  position: absolute;
}

.rating > label {
  color: transparent;
  float: right;
  position: relative;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #f7ba2a;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #f7ba2a;
}

/* ----------------------------------------------------------------
	LightBox
-----------------------------------------------------------------*/
.lightbox,
#lightbox-apply {
  display: none;
  position: fixed;
  z-index: 1001;
}

/* Lightbox background */
#lightbox_lightboxbg {
  display: none;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  left: 0px;
  min-width: 100%;
  min-height: 100%;
  z-index: 1000;
}

/* content */
.lightbox_lightbox-content {
  background-color: #fff;
  margin: auto;
}

.lightbox_lightbox-content table th, .lightbox_lightbox-content table td {
  vertical-align: top;
}

.lightbox_lightbox-close {
  color: #939393;
  font-size: 20px;
  line-height: 20px;
  display: block;
  text-align: center;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 15px;
  right: 15px;
  -webkit-transition: ease-in-out 0.5s;
  transition: ease-in-out 0.5s;
}

.lightbox_lightbox-close:hover, .lightbox_lightbox-close:focus, .lightbox_lightbox-close:active {
  color: #e44e4f;
}

.lightbox_title {
  text-align: center;
}

.lightbox_form .apply {
  margin: 8px auto;
}

.lightbox_input-row {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.lightbox_input-row > div {
  line-height: 30px;
  padding: 1%;
  font-size: 1rem;
}

.lightbox_input-name {
  width: 32%;
  text-align: right;
  color: #f1d05f;
  font-size: 16px;
}

.lightbox_input-keyin {
  border: 1px solid #1b2f4a;
  background-color: #070e16;
  padding-left: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border-radius: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 5px;
  width: 100%;
  color: #627998;
}

.lightbox_input-columninput::-webkit-input-placeholder {
  color: #627998;
  font-size: 14px;
}

.lightbox_input-columninput::-moz-placeholder {
  color: #627998;
  opacity: 1;
  font-size: 14px;
}

.lightbox_input-columninput:-moz-placeholder {
  color: #627998;
  opacity: 1;
  font-size: 14px;
}

.lightbox_input-select {
  padding: 5px;
  border-radius: 5px;
  width: 100%;
  background: #070e16;
  color: #627998;
  border: 1px solid #1b2f4a;
  font-size: 14px;
}

.lightbox_input-column {
  width: 55%;
  color: #cce2ff;
}

.lightbox-btnBox {
  text-align: center;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.lightbox-btnBox .submit {
  /*margin: 3% auto 3% auto;*/
}

.lightbox_form-btn {
  text-align: center;
  padding-top: 25px;
}

.subbtn {
  color: #111e2f;
  padding: .6rem 2rem;
  background: -ms-linear-gradient(90deg, #fffe89 0%, #efb840 100%);
  border-radius: 100px;
  border: none;
  font-size: 1.2rem;
  font-weight: 700;
}

@media screen and (max-width: 920px) {
  .lightbox_input-row .lightbox_input-column {
    line-height: 30px;
    padding: 1%;
    font-size: .8rem;
    width: 80%;
  }
  .lightbox_input-row .lightbox_input-name {
    line-height: 30px;
    padding: 1%;
    font-size: .8rem;
    width: 40%;
  }
  .lightbox_title img {
    width: 60%;
    height: auto;
  }
}

/*彈窗 lightbox-1 start*/
/* Lightbox panel with some content */
.lightbox-1 {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /*margin-left: -200px;*/
  max-width: 600px;
  min-width: 450px;
  box-sizing: border-box;
  background: #FFFFFF;
  padding: 35px 8px 15px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
          box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

.lightbox-1 .lightbox_lightbox-content {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0 32px 15px;
  max-height: 85vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.lightbox-1 h3 {
  font-size: 18px;
  line-height: 1;
  font-weight: bold;
  margin: 0;
}

.lightbox-1 h3 + p {
  padding-top: 15px;
}

.lightbox-1 h4 {
  font-size: 16px;
  line-height: 1.5;
  font-weight: normal;
  margin: 0;
}

.lightbox-1 h4 + p {
  padding-top: 15px;
}

.lightbox-1 p {
  font-size: 16px;
  line-height: 1;
  margin: 0;
}

@media screen and (max-width: 920px) {
  .lightbox-1 {
    width: calc(100% - 30px);
    min-width: initial;
  }
}

/*彈窗 lightbox-1 end*/
/*彈窗 lightbox-apply start*/
/* Lightbox panel with some content */
#lightbox-apply {
  /*margin-left: -200px;*/
  min-width: 360px;
  width: 90%;
  max-width: 700px;
  background: #192a40;
  /*border: 2px solid #CCCCCC;*/
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #192a40;
}

#lightbox-apply .lightbox_lightbox-content {
  background: #111e2f;
}

#lightbox-apply .lightbox_lightbox-close {
  color: #fff;
  font-size: 2rem;
  width: 20px;
  height: 20px;
  line-height: 20px;
  top: 2%;
  right: 2%;
}

@media screen and (max-width: 920px) {
  #lightbox-apply {
    min-width: 310px;
    max-width: 96vw;
  }
  #lightbox-apply .lightbox_lightbox-close {
    width: 30px;
    height: 30px;
  }
}

/*彈窗 lightbox-apply end*/
/* ----------------------------------------------------------------
	Icon
-----------------------------------------------------------------*/
@font-face {
  font-family: 'font-icon';
  src: url("../fonts/font-icon.eot?3270881");
  src: url("../fonts/font-icon.eot?3270881#iefix") format("embedded-opentype"), url("../fonts/font-icon.woff?3270881") format("woff"), url("../fonts/font-icon.ttf?3270881") format("truetype"), url("../fonts/font-icon.svg?3270881#font-icon") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: 'font-icon';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1em;
  display: inline-block;
  text-decoration: inherit;
  text-transform: none;
  text-align: center;
  speak: never;
  /* opacity: .8; */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ----------------------------------------------------------------
	Header
-----------------------------------------------------------------*/
header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #000;
  width: 100%;
  height: 120px;
}

header .logo {
  width: 350px;
  max-height: 80px;
  margin-left: 40px;
}

header .logo a {
  display: block;
}

header .logo img {
  max-width: 100%;
  max-height: 80px;
}

header #primary-menu {
  width: calc(100% - 290px);
  max-width: 980px;
  position: relative;
}

header #primary-menu .menu-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
}

header #primary-menu .menu-arrow a {
  color: white;
  font-size: 20px;
  line-height: 1;
  display: block;
  opacity: 0.6;
}

header #primary-menu .menu-arrow a:hover {
  opacity: 1;
}

header #primary-menu .menu-arrow-left {
  left: 0;
}

header #primary-menu .menu-arrow-left a {
  padding: 20px 10px 20px 20px;
}

header #primary-menu .menu-arrow-right {
  right: 0;
}

header #primary-menu .menu-arrow-right a {
  padding: 20px 20px 20px 10px;
}

header #primary-menu ul {
  initial-letter: 1px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding-right: 40px;
  padding-left: 40px;
}

header #primary-menu ul li {
  text-align: center;
  display: inline-block;
}

header #primary-menu ul li:hover {
  opacity: 0.6;
}

header #primary-menu ul li:hover a {
  /*color: $color-cis-01;*/
}

header #primary-menu ul li:hover a img {
  /*filter: sepia(1) saturate(1);*/
}

header #primary-menu ul li a {
  color: #fff;
  font-size: 14px;
  display: block;
  width: 75px;
  margin: auto;
}

header #primary-menu ul li img {
  text-align: center;
  display: block;
  margin: auto;
}

header #primary-menu ul li span {
  display: block;
  padding-top: 12px;
}

/* ----------------------------------------------------------------
	Main Wrap
-----------------------------------------------------------------*/
.main-wrap {
  max-width: 100vw;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: calc(100vh - 120px);
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.main-wrap main#dialog-wrapper {
  background-color: #f0f0f0;
  width: 81.7%;
  height: 100%;
  -webkit-box-flex: 6;
      -ms-flex-positive: 6;
          flex-grow: 6;
}

.main-wrap main#dialog-wrapper .dialog-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}

.main-wrap .side-menu {
  background-color: #fff;
  width: 18.3%;
  max-width: 40%;
  min-width: 240px;
  height: 100%;
  border-left: 1px solid #e0e0e0;
  -webkit-box-flex: 4;
      -ms-flex-positive: 4;
          flex-grow: 4;
}

/* Main */
main#dialog-wrapper {
  position: relative;
}

.marquee {
  color: #282828;
  background-color: #cccccc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 30px;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.marquee i {
  color: #505050;
  font-size: 22px;
  margin-right: 10px;
}

.marquee marquee {
  font-size: 14px;
  line-height: 14px;
}

.float-switch-service {
  /* background: #f1f1f1;
  background: linear-gradient(147deg, #f1f1f1 0%, #f2f2f2 80%, #e6e6e6 81%, #ffffff 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#ffffff',GradientType=1 );
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
          clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%); */
  position: absolute;
  top: 20px;
  right: 3px;
  z-index: 9;
}

/* .float-switch-service .show-panel-switch-service {
  font-size: 14px;
  line-height: 16px;
  color: #282828;
  font-size: 14px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 25px;
  position: relative;
  mix-blend-mode: multiply;
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
          clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
  background-color: white;

  border-left: 2px solid transparent;
  -o-border-image: linear-gradient(top, #bababa 0%, #7a7a7c 55%, #7a7a7c 75%, #acacac 100%);
     border-image: -webkit-gradient(linear, left top, left bottom, from(#bababa), color-stop(55%, #7a7a7c), color-stop(75%, #7a7a7c), to(#acacac));
     border-image: linear-gradient(top, #bababa 0%, #7a7a7c 55%, #7a7a7c 75%, #acacac 100%);
  border-image-slice: 1;

  word-break: break-all;
  height: auto;
  padding: 15px 0;
  min-height: 130px;
}

.float-switch-service .show-panel-switch-service::before, .float-switch-service .show-panel-switch-service::after {
  display: block;
  content: ' ';
  width: 0;
  height: 0;
  position: absolute;
  left: -2px;
  right: 0;
  z-index: 10;
}

.float-switch-service .show-panel-switch-service::before {
  border-style: solid;
  border-width: 12px ​25px 0 0;
  border-color: #f0f0f0 transparent transparent transparent;
  top: 0;
}

.float-switch-service .show-panel-switch-service::after {
  border-style: solid;
  border-width: 12px 0 0 25px;
  border-color: transparent transparent transparent #f0f0f0;
  bottom: 0;
}
.float-switch-service i {
  font-size: 18px;
  display: block;
  margin: 3px auto;
}

.float-switch-service::before, .float-switch-service::after {
  display: block;
  content: ' ';
  width: 28px;
  height: 2px;
  position: absolute;
  right: -2px;
}

.float-switch-service::before {
  background-color: #fff;
  top: 6px;
  -webkit-transform: rotate(-27deg);
          transform: rotate(-27deg);
}

.float-switch-service::after {
  background-color: #b0b0b0;
  bottom: 6px;
  -webkit-transform: rotate(27deg);
          transform: rotate(27deg);
}
 */
.dialogue-service-head {
  color: #969696;
  text-align: center;
  padding-top: 15px;
  padding-bottom: 10px;
}

.dialog-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: relative;
}

.dialog-wrap .dialog-portrait {
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  overflow: hidden;
}

.dialog-wrap .dialog-portrait img {
  height: 100%;
}

.dialog-wrap .dialog-main {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  max-width: 50%;
}

.dialog-wrap .dialog-name {
  color: #505050;
  font-size: 14px;
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 10px;
}

.dialog-wrap .dialog-box {
  color: #000;
  text-align: left;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 10px;
  -webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
          box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1);
}

.dialog-wrap .dialog-box + .dialog-box {
  margin-top: 10px;
}

.dialog-wrap .dialog-box.box-text {
  padding: 20px;
}

.dialog-wrap .dialog-box.box-text a {
  color: #2f61df;
}

.dialog-wrap .dialog-box.box-img {
  padding: 3px;
  border-radius: 10px;
  overflow: hidden;
}

.dialog-wrap .dialog-box.box-img img {
  border-radius: 9px;
}

.dialog-wrap .dialog-box p {
  margin: -5px 0 -7px;
  padding: 0;
}

.dialog-wrap .dialog-box p + p {
  margin: 7px 0 -7px;
}

.dialog-wrap .dialog-box p + a {
  margin-top: calc(7px + 3.5px + 8px);
}

.dialog-wrap .dialog-box p + img {
  margin-top: calc(7px + 6px);
}

.dialog-wrap .dialog-box p + br {
  margin-top: 7px;
}

.dialog-wrap .dialog-box p + ul, .dialog-wrap .dialog-box p + ol {
  margin-top: 15px;
}

.dialog-wrap .dialog-box p a {
  line-height: inherit;
  display: inline-block;
  padding: inherit;
  margin: 0 !important;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.dialog-wrap .dialog-box a {
  display: block;
  display: table;
  line-height: 1;
  margin: 0 0 4px;
  -webkit-transform: translate(0, -5px);
          transform: translate(0, -5px);
  padding: 3px 0;
}

.dialog-wrap .dialog-box a + p {
  margin-top: calc(5px + 8px);
}

.dialog-wrap .dialog-box a + a {
  margin: 8px 0;
}

.dialog-wrap .dialog-box a + a + p {
  margin-top: -8px;
}

.dialog-wrap .dialog-box a:last-child {
  margin-bottom: -6px;
}

.dialog-wrap .dialog-box img {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

.dialog-wrap .dialog-box img + p {
  margin-top: 5px;
}

.dialog-wrap .dialog-box img + a {
  margin: 6px 0 0;
  -webkit-transform: translate(0, 3px);
          transform: translate(0, 3px);
}

.dialog-wrap .dialog-box br + p {
  margin-top: 0;
}

.dialog-wrap .dialog-box br + a {
  margin-top: 0;
}

.dialog-wrap .dialog-box ul, .dialog-wrap .dialog-box ol, .dialog-wrap .dialog-box li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.dialog-wrap .dialog-box ul a, .dialog-wrap .dialog-box ol a, .dialog-wrap .dialog-box li a {
  margin: 14px 0;
  -webkit-transform: translate(0);
          transform: translate(0);
}

.dialog-wrap .dialog-box ul p, .dialog-wrap .dialog-box ol p, .dialog-wrap .dialog-box li p {
  margin: 0;
}

.dialog-wrap .dialog-box ul li {
  padding-left: 1.1em;
  position: relative;
}

.dialog-wrap .dialog-box ul li::before {
  content: ' ';
  display: block;
  background: url("../images/ul-icon.png") center no-repeat;
  color: #555555;
  width: 2px;
  height: 2px;
  position: absolute;
  top: 0.7em;
  left: 0;
}

.dialog-wrap .dialog-box ol {
  padding-left: 2em;
}

.dialog-wrap .dialog-box ol li {
  list-style-type: decimal-leading-zero;
}

.dialog-wrap .dialog-box ol li::marker {
  color: #555555;
}

.dialog-wrap .dialog-time {
  color: #969696;
  font-size: 12px;
  clear: both;
  padding: 10px 2px;
}

.dialogue-area {
  height: 83%;
  overflow-y: auto;
  overflow-x: hidden;
}

.dialogue-area .dialog-wrap.dialogue-service {
  text-align: left;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  padding-left: 75px;
  padding-right: 15px;
  margin-left: 40px;
  margin-right: 100px;
}

.dialogue-area .dialog-wrap.dialogue-service .dialog-portrait {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  left: 0;
}

.dialogue-area .dialog-wrap.dialogue-service .dialog-main {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.dialogue-area .dialog-wrap.dialogue-service .dialog-box {
  float: left;
  clear: both;
  border-radius: 0 10px 10px 10px;
}

.dialogue-area .dialog-wrap.dialogue-service .dialog-box.box-img {
  border-radius: 10px;
}

.dialogue-area .dialog-wrap.dialogue-client {
  text-align: right;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding-right: 75px;
  padding-left: 15px;
  margin-right: 40px;
  margin-left: 100px;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-portrait {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  right: 0;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-main {
  margin-top: 25px;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-name {
  display: none;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-box {
  background-color: #ffcd2b;
  float: right;
  clear: both;
  border-radius: 10px 0 10px 10px;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-box.box-img {
  border-radius: 10px;
}

.dialogue-area .dialog-wrap.dialogue-client .dialog-time {
  text-align: right;
}

.warning-bar {
  color: #ffffff;
  font-size: 28px;
  font-weight: bold;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: #e34e4e;
  width: 100%;
  height: 150px;
}

.dialog-input-wrap {
  font-size: 14px;
  line-height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #fff;
}

.dialog-input-wrap .dialog-sound-effect {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 45px;
  height: 45px;
  margin-left: 30px;
  border: 0;
}

.dialog-input-wrap .dialog-sound-effect .icon {
  color: #282828;
  font-size: 45px;
}

.dialog-input-wrap .dialog-upload-image {
  width: 45px;
  height: 45px;
  margin-left: 24px;
  position: relative;
}

.dialog-input-wrap .dialog-upload-image .icon {
  color: #282828;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 45px;
  height: 45px;
}

.dialog-input-wrap .dialog-upload-image .icon:before {
  font-size: 45px;
}

.dialog-input-wrap .dialog-upload-image input {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  cursor: pointer;
  width: 45px;
  height: 45px;
  padding: 0;
  margin: 0;
  border: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
}

.dialog-input-wrap .dialog-go-away {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 45px;
  height: 45px;
  margin-left: 24px;
}

.dialog-input-wrap .dialog-go-away .icon {
  color: #282828;
}

.dialog-input-wrap .dialog-go-away .icon:before {
  font-size: 45px;
}

.dialog-input-wrap .dialog-input-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 80%;
  padding-top: 15px;
  padding-bottom: 15px;
  margin-left: 25px;
}

.dialog-input-wrap .dialog-input-field .icon {
  color: #282828;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  border: none;
  border-radius: 100%;
  width: inherit;
  height: inherit;
}

.dialog-input-wrap .dialog-input-field .input-field {
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  min-height: 58px;
  overflow: hidden;
}

.dialog-input-wrap .dialog-input-field .input-field .emoticons {
  width: 40px;
  height: 40px;
  margin-left: 14px;
}

.dialog-input-wrap .dialog-input-field .input-field .emoticons .icon:before {
  color: #969696;
  font-size: 40px;
}

.dialog-input-wrap .dialog-input-field .input-field .textarea {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  padding: 15px 15px 15px 10px;
  max-height: 5em;
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-input-wrap .dialog-input-field .input-field .textarea:-webkit-scrollbar {
  color: transparent;
  background-color: transparent;
}

.dialog-input-wrap .dialog-input-field .input-field .textarea:-webkit-scrollbar-track {
  color: transparent;
}

.dialog-input-wrap .dialog-input-field .input-field .textarea:-webkit-scrollbar-thumb {
  background-color: 0, 0, 0, 0.1;
}

.dialog-input-wrap .dialog-input-field .send {
  font-size: 14px;
  line-height: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-left: 15px;
}

.dialog-input-wrap .dialog-input-field .send .icon:before {
  font-size: 45.3px;
  -webkit-transform: translate(-3px, 0);
          transform: translate(-3px, 0);
}

.dialog-input-wrap .dialog-input-field .send .submit-btn {
  cursor: pointer;
}

.dialog-input-wrap .dialog-setting {
  margin-left: 15px;
  margin-right: 20px;
}

.dialog-input-wrap .dialog-setting .switch-item {
  display: block;
}

.dialog-input-wrap .dialog-setting .icon {
  color: #282828;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 58px;
  height: 58px;
}

.dialog-input-wrap .dialog-setting .icon:before {
  font-size: 45px;
}

.dialog-bottom .control-group {
  color: #000;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
  background: #fff;
  padding: 20px;
  -webkit-box-shadow: 0 4px 5px rgba(204, 204, 204, 0.5);
          box-shadow: 0 4px 5px rgba(204, 204, 204, 0.5);
  position: absolute;
  top: -108px;
  right: 20px;
  z-index: 9;
}

.switch-box > .switch-item > .item-on {
  display: block;
}

.switch-box > .switch-item > .item-off {
  display: none;
}

.switch-mian {
  display: none;
}

.switch-open > .switch-item > .item-on {
  display: none;
}

.switch-open > .switch-item > .item-off {
  display: block;
}

.switch-open > .switch-mian, .switch-open.switch-mian {
  display: block;
}

@media only screen and (max-width: 1441px) {
  .dialog-wrap .dialog-main {
    max-width: 80%;
  }
}

@media only screen and (max-width: 1201px) {
  .dialog-wrap .dialog-main {
    max-width: initial;
  }
}

/* Side Menu */
.advertising-graphic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0;
}

.advertising-graphic a {
  display: flex;
}

.advertising-graphic img {
  max-width: 100%;
  max-height: 380px;
}

.manual {
  padding-bottom: 25px;
}

.manual .manual-title {
  color: #282828;
  font-size: 14px;
  font-weight: bold;
  padding: 0 20px 9px;
}

.accordion {
  color: #282828;
  font-size: 14px;
  line-height: 2;
  height: 100%;
  max-height: 40vh;
  margin: 0 20px;
  padding: 0 20px 0 0;
  overflow-y: auto;
  overflow-x: auto;
}

.accordion::-webkit-scrollbar {
  background-color: rgba(204, 204, 204, 0.3);
}

.accordion::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  height: 196px;
  width: 196px;
  max-height: 196px;
  max-width: 196px;
  border-radius: 1.5px;
}

.accordion ul, .accordion li {
  list-style: none;
}

.accordion .accordion-list .accordion-item.item-open > .item-txt {
  display: block;
}

.accordion .accordion-list .accordion-item > .item-txt {
  margin-left: 1.4em;
}

.accordion .accordion-item .item-tit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  line-height: 1.4em;
  padding-top: 5px;
  padding-bottom: 5px;
}

.accordion .accordion-item .item-tit .item-img {
  padding-top: 3px;
  padding-right: 5px;
}

.accordion .accordion-item .item-tit .item-img .qa-close {
  display: block;
}

.accordion .accordion-item .item-tit .item-img .qa-open {
  display: none;
}

.accordion .accordion-item .item-tit:hover {
  color: #2f61df;
}

.accordion .accordion-item .item-tit:hover .qa-close {
  display: none;
}

.accordion .accordion-item .item-tit:hover .qa-open {
  display: block;
}

.accordion .accordion-item.item-open > .item-tit .qa-close {
  display: none;
}

.accordion .accordion-item.item-open > .item-tit .qa-open {
  display: block;
}

.accordion .accordion-item .item-txt {
  line-height: 1.5;
  display: none;
  padding-top: 5px;
  padding-bottom: 5px;
}
/*# sourceMappingURL=style.css.map */