@charset "UTF-8";

/* base */
* {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  border-radius: 0;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

/* Display */
*[hidden] {
  display: none !important;
}
legend,
caption {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  border: none;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}
caption {
  position: static;
  color: transparent;
}

/* Text */
a {
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}
a[href*='tel'] {
  color: inherit;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bold;
}
i,
address,
dfn,
em {
  font-style: normal;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
}

/* Table */
table {
  width: 100%;
  border-spacing: 0;
  /*border-collapse: collapse;*/
}
table td {
  word-break: break-all;
}

/* Form */
button,
input,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-transform: none;
}
button,
input {
  overflow: visible;
}
textarea {
  resize: none;
}
[type='reset'],
[type='button'],
[type='submit'] {
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}
button:not(:disabled),
[type='reset']:not(:disabled),
[type='button']:not(:disabled),
[type='submit']:not(:disabled) {
  cursor: pointer;
}
[type='checkbox'] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}
[type='radio'] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}
[type='search'] {
  -webkit-appearance: textfield;
}
[type='text']::-ms-clear,
[type='text']::-ms-reveal {
  display: none;
}
[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}


/* Align */
button,
input,
label,
iframe,
img,
select {
  vertical-align: middle;
}

/* Placeholder */
::-webkit-input-placeholder {
  color: #afafaf;
}
:-ms-input-placeholder {
  color: #afafaf;
}
::-moz-placeholder {
  color: #afafaf;
  opacity: 1;
}
:-moz-placeholder {
  color: #afafaf;
  opacity: 1;
}
::placeholder {
  color: #afafaf;
}
input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus:-ms-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}
input:focus:-moz-placeholder {
  color: transparent;
}
input:focus::placeholder {
  color: transparent;
}
textarea:focus::placeholder {
  color: transparent;
}
*:focus {
  outline: none;
}

/* ETC */
img,
a img,
fieldset {
  border: none;
}
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #000;
}
img {
  max-width: 100%;
}

/* common */
* {
  font-family: 'Open Sans', sans-serif;
}
/* email */
.page-stage * {
  font-family: inherit;
  & em {
    font-style: italic
  }
}
b,
h1,
h2,
h3,
h4,
h5,
h6,
strong,
th {
  font-weight: bold;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  color: #3c4147;
  font-size: 16px;
  font-weight: normal;
  word-break: break-word;
  overflow-x: hidden;
}
body > #hubspot-messages-iframe-container {
  visibility: hidden;
}
a {
  color: #000;
}
input,
button,
select,
textarea {
  font-weight: normal;
}
button {
  border: 0;
  cursor: pointer;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url('/img/common/ico_select.svg');
  background-repeat: no-repeat;
  background-position-y: 50%;
}
::-moz-selection {
  background-color: rgba(231, 46, 53, 0.1);
}
::selection {
  background-color: rgba(231, 46, 53, 0.1);
}
.text-editor-main::-moz-selection {
  background-color: rgba(1, 186, 239, 0.2) !important;
}
.text-editor-main::selection {
  background-color: rgba(1, 186, 239, 0.2) !important;
}
.text-editor-main *::-moz-selection {
  background-color: rgba(1, 186, 239, 0.2) !important;
}
.text-editor-main *::selection {
  background-color: rgba(1, 186, 239, 0.2) !important;
}
.no-click {
  cursor: not-allowed;
  pointer-events: none
}

.click-touch-block {
  pointer-events: none;
}

/* Clear Fix */
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}

/* Hide Element, Text */
.sr-only {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  border: none;
  white-space: nowrap;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}
.sr-only-text {
  overflow: hidden;
  display: block;
  color: transparent;
  text-indent: 100%;
  white-space: nowrap;
}
.es {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.align-right {
  text-align: right !important;
}
.align-left {
  text-align: left !important;
}
.align-center {
  text-align: center;
}

/* Disable outline */
.outline-disabled * {
  outline: 0 !important;
}

/* scrollbar temporary */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #b4b4b4;
  border-radius: 5px;
}
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
}
.highlight-selected {
  background: #EEF6FB;
}

/* layout */
.w50{
  width: 50%;
}
.w100{
  width: 100%;
}
#app {
  height: 100%;
}
.tw-container {
  position: relative;
  overflow: hidden;
  height: 100%;
  padding-left: 208px;
  padding-top: 60px;
  transition: padding-left 0.3s;
}
.tw-container-type02 {
  padding-top: 102px;
}
.tw-container-type02.no-tabs-type {
  padding-top: 60px;
}
.tw-no-header {
  padding-top: 0;
}
.tw-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-left: 208px;
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  transition: padding-left 0.3s;
  z-index: 10001;
}
.tw-header .tw-inner {
  position: relative;
  height: 60px;
  padding: 0 16px;
}
.tw-header h1 {
  display: inline-block;
  font-size: 20px;
  padding: 15px 0 0;
  font-weight: 600;
  vertical-align: middle;
}
.tw-header h1 span {
  vertical-align: middle;
}
.tw-header .btn-open-nav {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 60px;
  padding: 24px 20px;
  background-color: #01baef;
}
.tw-header .btn-open-nav .menu-btn-box {
  display: inline-block;
  position: relative;
  width: 16px;
  height: 12px;
}
.tw-header .btn-open-nav .menu-btn-inner {
  display: block;
  top: 50%;
  margin-top: -3px;
}
.tw-header .btn-open-nav .menu-btn-inner,
.tw-header .btn-open-nav .menu-btn-inner:after,
.tw-header .btn-open-nav .menu-btn-inner:before {
  position: absolute;
  width: 16px;
  height: 2px;
  background-color: #fff;
  border-radius: 5px;
}
.tw-header .btn-open-nav .menu-btn-inner:before {
  top: -5px;
}
.tw-header .btn-open-nav .menu-btn-inner:after,
.tw-header .btn-open-nav .menu-btn-inner:before {
  content: '';
  display: block;
}
.tw-header .btn-open-nav .menu-btn-inner:after {
  bottom: -5px;
}
.tw-header .btn-console {
  position: absolute;
  top: 50%;
  right: 32px;
  transform: translateY(-50%);
  z-index: 99999;
}
.tw-header .btn-console span + span {
  margin-left: 10px;
}
.header-bottom {
  position: relative;
  height: 42px;
}
.header-bottom.no-tabs {
  height: 0;
}
.tw-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  width: 210px;
  height: 100%;
  background-color: #fff;
  box-shadow: 3px 0px 10px #00000026;
  transition: left 0.3s;
  z-index: 10002;
  display: flex;
  flex-direction: column;
}
.tw-contents {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: overlay;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}
.tw-contents-inner {
  position: relative;
  padding: 24px;
}
@media only screen and (max-width: 767px) {
  .padding-top-in-mobile:has(.table-container) {
    padding-top: 20px !important;
  }
}
.tw-contents-inner-type02 {
  position: relative;
  padding: 24px;
  height: 100%;
}
.tw-container.expand-mode {
  padding-left: 46px;
}
.expand-mode .tw-header {
  padding-left: 46px;
}
.expand-mode .tw-sidebar {
  left: -162px;
}
.dimm {
  overflow-x: hidden;
  overflow-y: auto;
  overflow-y: overlay;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 10003;
}
.dimm.email {
  z-index: 10000 !important;
}
.dimm.active {
  display: block;
}

.send-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.direction-row {
  display: flex;
  flex-direction: row;
}
.direction-row-vertical-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.direction-column {
  display: flex;
  flex-direction: column;
}
.full-screen {
  width: 100%;
  height: 100%;
}
.fill-area {
  /* 부모 element의 display가 flex여야 함  */
  flex-grow: 1;
  width: 100%;
}

.send-bottom-right {
  position: absolute;
  bottom: 0;
  right: 0;
}

.send-bottom-right-flex {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.cursor-pointer {
  cursor: pointer;
}

.visibility-hidden {
  visibility: hidden;
}

.splitter {
  border: none;
  border-left: 1px solid #cccccc;
  height: 12px;
  margin: 0;
}
.splitter.type-2 {
  border-left: 1px solid #BEBEBE;
  height: 20px;
}

/*setting area*/

.inner-box{
  position: relative;
  margin: 24px;
  padding-top: 22px;
  background-color: #fff;
  border: 1px solid #EEE;
  border-radius: 4px;
}

.inner-box:nth-of-type(1){
  margin-top: 0;
}
.inner-box h2,
.inner-box-heading {
  padding: 0 28px 20px;
  border-bottom: 1px solid #eee;
  font-size: 20px;
  font-weight: 700;
}
.inner-box h2 .titExp{
  display: inline-block;
  margin-left: 16px;
  font-size: 14px;
  color: #666;
  font-weight: 400;
  vertical-align: 2px;
}
.inner-box .box-contents{
  display: flex;
  padding: 0 50px 0 28px;
}
.inner-box .row{
  padding: 32px 50px 32px 0;
}
.box-contents > .row.w100 {
  padding-right: 0;
}
.inner-box .row.w50 + .row.w50{
  padding-left: 28px;
  padding-right: 0;
  border-left: 1px solid #eee;
}
.inner-box .subTxt{
  margin-top: 12px;
  padding-left: 13px;
  font-size: 14px;
  line-height: 22px;
}
.inner-box.no-line{
  margin: 0;
  padding-top: 0;
  border: 0px;
  border-radius: 0px;
}
.inner-box.no-line + .inner-box.no-line{
  margin-top: 48px;
}
.inner-box.no-line h2{
  padding: 0 0px 18px;
}
.inner-box.no-line .box-contents{
  padding: 0;
}
.tit-01{
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.tit-01::before{
  content: "";
  position: absolute;
  top: 8px;
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  background-color: #666;
}
.tit-02{
  padding-left: 13px;
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.tit-01 span + button.btn,
.article-wrapper .info span + button.btn,
.ico-info + button.btn{
  margin-left: 32px;
}
.article-wrapper .info{
  margin-top: 20px;
  padding-left: 13px;
  font-size: 16px;
  font-weight: 700;
  color: #3C4147;
}
.article-wrapper .sub-title{
  margin-top: 20px;
  padding-left: 13px;
  font-size: 14px;
  font-weight: 600;
  color: #3C4147;
  line-height: 16px;
}
.article-wrapper .info + .info{
  margin-top: 12px;
}
.article-wrapper .info .selectable{
  font-weight: normal;
}
.article-wrapper + .article-wrapper{
  margin-top: 48px;
}
.selc{
  padding: 12px 0 0 13px;
}
.selc .info{
  padding-left: 0;
}

/*bg color*/
.bg-type01{
  min-height: 100%;
  padding: 24px 0 1px;
  background-color: #F2F6F8;
}

/* button */
.btn {
  border: 1px solid transparent;
  display: inline-block;
  min-width: 80px;
  padding: 0 16px;
  text-align: center;
  border-radius: 20px;
  font-size: 13px;
}
.btn:disabled,
.btn:disabled:hover {
  border: 1px solid #e1e1e1 !important;
  color: #afafaf !important;
  background: #eff0f4 !important;
}
.btn.disabled-type01:disabled {
  border-width: 1px !important;
  border-style: solid !important;
  border-color: #bebebe !important;
  color: #fff !important;
  background-color: #bebebe !important;
}
.tw-header .btn:disabled,
.tw-header .btn:disabled:hover {
  color: #ffffff;
  background: #bebebe;
}
.btn:disabled {
  cursor: default;
}
.btn.btn-type02 {
  padding: 0 19px;
  border-radius: 15px;
}
.btn.size-type01 {
  height: 30px;
  line-height: 28px;
  font-weight: 600;
}
.btn.size-type02 {
  height: 30px;
  line-height: 27px;
  font-weight: 600;
}
.btn.size-type03 {
  height: 20px;
  line-height: 18px;
  font-weight: 600;
  font-size: 12px;
}
.btn.size-type04 {
  height: 20px;
  line-height: 18px;
  font-weight: 600;
  font-size: 11px;
}
.btn.size-type05 {
  height: 19px;
  padding: 0 10px;
  border-radius: 4px;
  font-weight: 600;
}
.btn.size-type20 {
  height: 38px;
  line-height: 2px;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 20px;
}
.btn.size-type21 {
  height: 38px;
  line-height: 18px;
  font-weight: 600;
  font-size: 16px;
  padding: 10px 22px;
}
/* small button */
.btn.size-type06 {
  min-width: auto;
  padding: 0px 10px;
  height: 20px;
  font-weight: 600;
  font-size: 11px;
}
.btn.size-type07 {
  width: 100%;
  height: 60px;
  padding: 16px;
  border-radius: 4px;
}
[class*='color-type'] {
  transition: background-color 0.3s;
}
/*UX 버튼 디자인 신규 추가*/
.btn.color-type04,
.btn.color-type01 {
  background-color: #0188EF;
  color: #fff;

}
.btn.size-type03.color-type01:hover,
.btn.size-type05.color-type01:hover,
.btn.size-type06.color-type01:hover {
  background-color: #0069B9 !important;
}
.btn.color-type03 {
  color: #fff;
  background-color: #59c3c3;
}
.btn.color-type02,
.btn.color-type05 {
  border: 1px solid #0188ef;
  background-color: #fff;
  color: #0188ef;
}
.btn.color-type02:disabled {
  border-color: #BBBBBB !important;
  background-color: #F5F5F5 !important;
  color: #BBBBBB !important;
}
.btn.color-type05:disabled {
  border-color: #E1E1E1 !important;
  background-color: #EFF0F4 !important;
  color: #AFAFAF !important;
}
/* 커서가 없는 모바일에서는 hover 제외시킨다 */
@media (hover: hover) and (pointer: fine) {
  .btn.color-type02:hover:not([disabled]),
    /*UX 버튼 디자인 신규 추가2*/
  .btn.color-type05:hover:not([disabled]) {
    color: #0188EF;
    background-color: #E8F5FF;
    border: 1px solid #0188EF;
  }
  .btn.size-type01.color-type01:hover,
  .btn.color-type04:hover {
    background-color: #0069B9 !important;
    color: #fff;
  }
  .btn.color-type04:disabled,
  .btn.color-type01:disabled,
  .btn.color-type01:hover:disabled{
    border-color: #BEBEBE !important;
    background-color: #BEBEBE !important;
    color: #fff !important;
  }
  .ico-analytics:hover:before {
    width: 30px;
    height: 30px;
    background: url('/img/common/ico_analytics_hover.svg') 50% 50% no-repeat;
    background-size: 30px 30px;
  }
  .ico-table:hover:before {
    width: 30px;
    height: 30px;
    background: url('/img/common/ico_table_hover.svg') 50% 50% no-repeat;
    background-size: 30px 30px;
  }
}
.btn.btn-type02.color-type01 {
  border: 1px solid #0188ef;
  background-color: #fff;
  color: #0188ef;
}
.btn.btn-type02.color-type01:hover {
  border: 1px solid #01bbef;
  color: #01bbef;
}
.btn.btn-type02.color-type02 {
  border: 1px solid #c2c2c2;
  background-color: #fff;
  color: #c2c2c2;
}
.btn.btn-type02.color-type02:hover {
  background-color: #c2c2c2;
  color: #fff;
}
.btn.btn-type02.color-type03 {
  border: 1px solid #e1e1e1;
  background-color: #f5f5f5;
  color: #01baef;
}
.btn.btn-type04 {
  width: 100%;
  padding: 11px 15px;
  border: 1px solid #e1e1e1;
  background: none;
  border-radius: 3px;
  text-align: left;
  font-size: 14px;
  color: #3c4147;
  transition: border-color 0.3s;
}
.btn.btn-type04:hover {
  border-color: #0188ef;
}
.btn.btn-type04 strong {
  display: block;
  font-weight: 600;
  transition: color 0.3s;
}
.btn.btn-type04:hover strong {
  color: #0188ef;
}
.btn.btn-type04 span {
  font-size: 12px;
  font-weight: normal;
  color: #3c4147;
}
.btn.btn-type04:disabled:hover strong,
.btn.btn-type04:disabled span {
  color: #bebebe;
}

/* add-icon */
.btn[class*='add-icon'] {
  min-width: auto;
}
.btn[class*='add-icon'] span {
  position: relative;
}
.btn[class*='add-icon'] span:before {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 14px;
}

/* add-icon01 */
.btn.add-icon01 span {
  padding-left: 14px;
}
.btn.add-icon01 span:before,
.btn.add-icon01 span:after {
  content: '';
  position: absolute;
  top: 8px;
  background-color: #0188ef;
}
.btn.add-icon01 span:before {
  left: 0;
  width: 8px;
  height: 2px;
}
.btn.add-icon01 span:after {
  left: 3px;
  width: 2px;
  height: 8px;
  margin-top: -3px;
}
.btn.add-icon01:disabled span:before,
.btn.add-icon01:disabled span:after {
  background-color: #bebebe;
}
.btn.btn-type02.color-type01.add-icon01:hover > span:after,
.btn.btn-type02.color-type01.add-icon01:hover > span:before {
  background-color: #01bbef;
}
.btn.btn-type02.color-type01.add-icon01:disabled:hover > span:after,
.btn.btn-type02.color-type01.add-icon01:disabled:hover > span:before {
  background-color: #bebebe;
}
/* add-icon02 */
.btn.add-icon02 {
  padding: 0 20px;
}
.btn.add-icon02 span {
  padding-left: 24px;
}
.btn.add-icon02 span:before {
  top: 50%;
  background: url('/img/common/ico_lens.svg') 0 0 no-repeat;
  transform: translateY(-50%);
}
.btn-group .btn + .btn {
  margin-left: 10px;
}
.btn-group.align-center {
  text-align: center;
}
.btn-group.align-left {
  text-align: left;
}
.btn-group.align-right {
  text-align: right;
}
.btn-text {
  font-size: 12px;
  color: #01baef;
  background: none;
}
.btn-text02 {
  position: relative;
  padding-right: 20px;
  font-size: 13px;
  color: #808080;
  background: none;
}
.btn-text02:before {
  content: '';
  position: absolute;
  top: 8px;
  right: 0;
  width: 10px;
  height: 6px;
  background: #b5b5b5;
}
[class*='btn-add-type'] {
  position: relative;
  padding-left: 20px;
  background: none;
}
[class*='btn-add-type']:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  transform: translateY(-50%);
}
[class*='btn-add-type'] span {
  display: inline-block;
  height: 20px;
  padding: 0 12px;
  line-height: 20px;
  border-radius: 10px;
  color: #fff;
  background: #0188ef;
  font-size: 12px;
}
[class*='btn-add-type']:disabled span {
  background: #bebebe !important;
}
.btn-add-type-plus:after {
  background: url('/img/common/ico_plus.svg') 0 0 no-repeat;
}
.btn-add-type-plus:disabled {
  cursor: default;
}
.btn-add-type-plus:disabled:after {
  background: url('/img/common/ico_plus_dimm.svg') 0 0 no-repeat;
}
.btn-add-type-minus:after {
  background: url('/img/common/ico_minus.svg') 0 0 no-repeat;
}
.btn-add-type-minus:disabled:after {
  background: url('/img/common/ico_minus_dimm.svg') 0 0 no-repeat;
}
.condition-set-header .btn-set-delete:disabled {
  cursor: default;
}

/* ico button */
.btn-list-arrow {
  position: absolute;
  top: 25px;
  right: 5px;
  transform: translateY(-50%);
  background: white;
  width: 25px;
  height: 25px;
}
.btn-list-arrow:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  background: url(/img/common/list_arrow_up.svg) 50% 50% no-repeat;
  background-size: 25px 25px;
  transform: translate(-50%, -50%);
}
.btn-list-arrow-up:after {
  background: url(/img/common/list_arrow_up.svg) 50% 50% no-repeat;
}
.btn-list-arrow-down:after {
  background: url('/img/common/list_arrow_down.svg') 50% 50% no-repeat;
}
.btn-mini-panel {
  position: absolute;
  top: 50%;
  right: 70px;
  transform: translateY(-50%);
  background: white;
}
.btn-mini-panel:after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url('/img/common/mini.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
  transform: translate(-50%, +50%);
}
.btn-max-panel {
  position: absolute;
  top: 50%;
  right: 40px;
  transform: translateY(-50%);
  background: white;
}
.btn-max-panel:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url('/img/common/max.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
  transform: translate(-50%, -50%);
}
.btn-close-panel {
  width: 14px;
  height: 14px;
  background: none;
}
.btn-close-panel:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_x11.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
  transform: translate(-50%, -50%);
}
.btn-template {
  background: none;
  width: 14px;
  height: 14px;
}
.btn-template.ico-template:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.btn-personalization {
  position: relative;
  width: 16px;
  height: 16px;
  background: none;
}
.btn-load-template {
  position: relative;
  width: 16px;
  height: 16px;
  background: none;
}
.btn-panel-back {
  display: none;
  position: relative;
  width: 22px;
  height: 20px;
  background: none;
  vertical-align: middle;
}
.btn-panel-back:before {
  content: '';
  width: 14px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 0;
  background: url('/img/common/ico_back_arrow02.svg') 0 0 no-repeat;
  background-size: 14px 12px;
  transform: translateY(-50%);
}
.panel-bottom .btn-close-panel-bottom {
  width: 24px;
  height: 24px;
  background: none;
  position: absolute;
  top: 20px;
  right: 20px;
}
.panel-bottom .btn-close-panel-bottom:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: url('/img/common/ico_x11.svg') 50% 50% no-repeat;
  transform: translate(-50%, -50%);
  background-size: contain;
}
[class*='btn-panel-back-type'] {
  position: relative;
  width: 24px;
  height: 24px;
  background: none;
}
[class*='btn-panel-back-type']:before {
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  mask-image: url(/img/common/ico_back_arrow.svg);
  -webkit-mask-image: url(/img/common/ico_back_arrow.svg);
  background-color: #3c4147;
}
.btn-panel-back-type02:before {
  width: 7.78px;
  height: 12.74px;
  mask-size: 7.78px 12.74px;
  -webkit-mask-size: 7.78px 12.74px;
}
.btn-panel-back-type03:before {
  width: 6px;
  height: 12px;
  mask-size: 6px 12px;
  -webkit-mask-size: 6px 12px;
}
.btn-td {
  border-radius: 8px;
  padding: 1px 8px 1px 10px;
  font-size: 10px;
  background-color: #ffffff;
}
.btn-td:before {
  content: '';
  width: 8px;
  height: 7px;
  background-size: 8px 7px;
  display: inline-block;
  margin: 0px 3px 0px -2px;
}
.btn-download {
  color: #01baef;
  border: 1px solid #01baef;
}
.btn-download:before {
  background: url('/img/common/img_download.svg') 0 0 no-repeat;
}
.hover-button-div:hover {
  background-color: #f0f6fB;
  border-radius: 20px;
  @media only screen and (max-width: 767px) {
    background-color: white;
  }
}
/* icon */
[class*='ico-']:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
}
[class*='ico-']:disabled {
  cursor: default;
}
.ico-folder:before {
  width: 16px;
  height: 14px;
  background: url('/img/common/ico_folder.svg') 50% 50% no-repeat;
}
.btn-google:before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('/img/selfSignUp/ico_google_logo.svg') 50% 50% no-repeat;
  margin-right: 8px;
}
.btn-google > span {
  vertical-align: top;
}
.ico-template:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_sms.svg') 50% 50% no-repeat;
  background-size: 24px 24px;
}
.ico-template02:before {
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_template02.svg') 50% 50% no-repeat;
}
.ico-media:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_add_media.svg') 50% 50% no-repeat;
}
.ico-media:disabled:before {
  background: url('/img/common/ico_media_disabled.svg') 50% 50% no-repeat;
}
.ico-url:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_shorten_url.svg') 50% 50% no-repeat;
  background-size: 24px 24px;
}
.ico-url:disabled:before {
  background: url('/img/common/ico_shorten_url_disabled.svg') 50% 50% no-repeat;
}
.ico-coupon:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_coupon.svg') 50% 50% no-repeat;
}
.ico-coupon:disabled:before {
  background: url('/img/common/ico_coupon_disabled.svg') 50% 50% no-repeat;
}
.ico-edit:before {
  width: 12px;
  height: 12px;
  background: url('/img/common/ico_edit.svg') 50% 50% no-repeat;
}
.ico-edit02 {
  width: 20px;
  height: 20px;
  background: url('/img/common/ico_edit2.svg') 50% 50% no-repeat;
  background-size: 20px 20px;
}
.ico-edit03:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_edit03.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-edit04:before {
  width: 8px;
  height: 8px;
  background: url('/img/common/ico_edit04.svg') 0 0 no-repeat;
}
.ico-detail-view:before {
  width: 10px;
  height: 10px;
  background: url('/img/common/ico_detail_view.svg') 0 0 no-repeat;
}
.ico-trash:before {
  width: 12px;
  height: 12px;
  background: url('/img/common/ico_trash.svg') 50% 50% no-repeat;
}
.ico-trash02:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_trash02.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-trash07:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_trash07.svg') 50% 50% no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-trash07:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_trash07.svg') 50% 50% no-repeat;
  background-size: 38px 38px;
}
.ico-trash03:before {
  width: 12px;
  height: 14px;
  background: url('/img/common/ico_trash03.svg') 50% 50% no-repeat;
}
.ico-trash04:before {
  width: 6px;
  height: 8px;
  background: url('/img/common/ico_trash04.svg') 0 0 no-repeat;
}
.ico-trash05:before {
  width: 12px;
  height: 15px;
  background: url('/img/common/ico_trash05.svg') 0 0 no-repeat;
}
.ico-file:before {
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_file1.svg') 50% 50% no-repeat;
}
.ico-hamburger:before {
  width: 10px;
  height: 4px;
  background: url('/img/common/ico_hamburger.svg') 50% 50% no-repeat;
}
.ico-x:before {
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_x.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
}
.ico-x02:before {
  width: 13px;
  height: 16px;
  background: url('/img/common/ico_x02.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
}
.ico-x03:before {
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_x03.svg') 50% 50% no-repeat;
  background-size: 16px 16px;
}
.ico-x04:before {
  width: 14px;
  height: 14px;
  background: url('/img/common/ico_x04.svg') 50% 50% no-repeat;
  background-size: 14px 14px;
  top: 8px;
}
.ico-x08:before {
  width: 14px;
  height: 14px;
  background: url('/img/common/ico_x08.svg') 50% 50% no-repeat;
  background-size: 14px 14px;
  left: 15px;
  top: 8px;
}
.ico-back-arrow:before {
  width: 8px;
  height: 16px;
  background: url('/img/common/ico_back_arrow.svg') 50% 50% no-repeat;
  background-size: 8px 16px;
}
.ico-grid-view:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_grid_view.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-list-view:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_list_view.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-add:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_add.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-add.active:before {
  background: url('/img/common/ico_add_active.svg') 50% 50% no-repeat;
}
.ico-search:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_search.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-search01:before {
  width: 25px;
  height: 25px;
  background: url('/img/common/ico_search01.svg') 100% 100% no-repeat;
  background-size: 25px 25px;
  top: 2px;
}
.ico-search02:before {
  width: 14px;
  height: 14px;
  background: url('/img/common/ico_search02.svg') 50% 50% no-repeat;
  background-size: 14px 14px;
}
.ico-search03:before {
  width: 16px;
  height: 16px;
  background: url('/img/common/ico_search.png') 50% 50% no-repeat;
}
.ico-search04:before {
  width: 15px;
  height: 15px;
  background: url('/img/common/ico_search04.svg') 50% 50% no-repeat;
}
.ico-search05:before {
  width: 20px;
  height: 20px;
  background: url('/img/common/ico_search05.svg') 50% 50% no-repeat;
}
.ico-search05-mobile:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_search05-mobile.svg') 50% 50% no-repeat;
}
.ico-org-name:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_org_name.svg') 50% 50% no-repeat;
}
.ico-export:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_export.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-mobile-export:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_export2.svg') 50% 50% no-repeat;
  background-size: 38px 38px;
}
.ico-analytics:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_analytics.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-analytics.selected:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_analytics_selected.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-table:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_table.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-table.selected:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_table_selected.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-read:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_read.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-unread:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_unread.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-restore:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_restore.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-move-folder:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_move_folder.svg') 50% 50% no-repeat;
  background-size: 30px 30px;
}
.ico-personalization:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_personalization.svg') 50% 50% no-repeat;
}
.ico-shopify-personalization:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_personalization.svg') 50% 50% no-repeat;
}
.ico-personalization:disabled:before {
  background: url('/img/common/ico_personalization_disabled.svg') 50% 50% no-repeat;
}
.ico-shopify-personalization:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_shopify_personalization.svg') 50% 50% no-repeat;
}
.ico-shopify-personalization:disabled:before {
  background: url('/img/common/ico_shopify_personalization_disabled.svg') 50% 50% no-repeat;
}
.ico-template-sms:before,
.ico-template-email:before{
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_sms.svg') 50% 50% no-repeat;
}
.ico-template-sms:disabled:before {
  background: url('/img/common/ico_template_sms_disabled.svg') 50% 50% no-repeat;
}
.ico-template-email-disabled:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_sms_disabled.svg') 50% 50% no-repeat;
}
.ico-image:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_image.svg') 50% 50% no-repeat;
}
.ico-template-create:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_create.svg') 0 0 no-repeat #fff;
  background-size: 24px 24px;
}
.ico-template-create-disabled:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_create_disabled.svg') 0 0 no-repeat #fff;
  background-size: 24px 24px;
}
.ico-template-create-dimm:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_template_create-dimm.svg') 0 0 no-repeat #fff;
  background-size: 24px 24px;
}
.ico-date:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_date.svg') 50% 50% no-repeat;
}
.ico-date:disabled:before {
  background: url('/img/common/ico_date_disabled.svg') 50% 50% no-repeat;
}
.ico-emoji:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_emoji.svg') 50% 50% no-repeat;
}
.ico-emoji:disabled:before {
  background: url('/img/common/ico_emoji_disabled.svg') 50% 50% no-repeat;
}
.ico-ai:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_ai.svg') 50% 50% no-repeat;
}
.ico-ai:disabled:before {
  background: url('/img/common/ico_ai_disabled.svg') 50% 50% no-repeat;
}
.ico-vcard:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_vcard.svg') 50% 50% no-repeat;
}
.ico-qr-code:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_qr_code.svg') 50% 50% no-repeat;
}
.ico-qr-code:disabled:before {
  background: url('/img/common/ico_qr_code_disabled.svg') 50% 50% no-repeat;
}
.ico-info:before {
  width: 14px;
  height: 14px;
  background: url('/img/common/ico_info.svg') 50% 50% no-repeat;
}
.ico-info.error:before {
  background: url('/img/common/ico_info_error.svg') 50% 50% no-repeat;
}
.ico-move {
  width: 14px;
  height: 12px;
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAbCAYAAABr/T8RAAAAAXNSR0IArs4c6QAAAbxJREFUSA3tVrFOAkEQfYvXC8aCktLCBPwCtZHYYWnHp8Af8AeW+gfGa+APPFsbr7RysTMaGd8sQQnkbvdgjY2TwN3evjdvZvZmbw3UxraOd1wZg54bB/wJkOETFzhv5AHwNUjNPflAr4qocgzQQQ2jNY+BDxKHE7TUkwiG6DYGXu6tbZkdPBHX9mILAPOMCyYLH7O8AnlllVpgEIW4kgmD1HaY6jWMOYAgZ+Z5CX556pCDff5eyH8k/215svBeMKXG0ODOZjDSNlrrDY1LRN1wMvF5QkJbKCoil6iZ53A6kTNpktMkPaN2kBnBmJot93JpsNLduwlibgtKrfOw2cu1rTj5/8KbFTG1I9eWFdixSt2h5riK+HzLLItUNxhgtwyi8+yMOltKxU9x1sg8eHiF6fDe52TRw1XEY5X6OzYV58Bb9ujC8wiE+uUWXVi/Wty5T3zr7F1jrt8R92ItX7HNeCBwe36YqDryCvsid9Gkdhqa6SL6OKUWTELKuxDVqz/jZXTRfchxaYUbJ+MVpyHDPxP+KXVqj0MijYVJeP550OMPO34Sy6nPj2om7L8+e7VPsH4Mft/0JDvD4AvlF3v4YPvNdgAAAABJRU5ErkJggg==')
  50% 50% no-repeat;
  background-size: 14px 12px;
}
.ico-move02:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_move.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-change:before {
  width: 30px;
  height: 30px;
  background: #ccc;
  background-size: 30px 30px;
}
.ico-copy:before {
  width: 7px;
  height: 8px;
  background: url('/img/common/ico_copy.svg') 0 0 no-repeat;
}
.ico-copy02:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_copy03.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-copy02:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_copy03.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-more-menu:before {
  width: 4px;
  height: 24px;
  background: url('/img/common/ico_more_menu.svg') 50% 50% no-repeat;
  background-size: 24px 24px;
}
.ico-more-menu-button-group:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_more_menu2.svg') 50% 50% no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-more-menu-button-group:before {
  width: 8px;
  height: 6px;
  background: url('/img/common/ico_arrow03.svg') 50% 50% no-repeat;
  background-size: 8px 6px;
}
.ico-filter:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_filter04.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-filter:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_filter05.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-customize:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/edit_columns.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-customize:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/edit_columns_mobile.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-filter-load:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_filter_load.svg') 0 0 no-repeat #fff;
  background-size: 24px 24px;
}
.ico-filter-load-dimm:before {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_filter_load_dimm.svg') 0 0 no-repeat #fff;
  background-size: 24px 24px;
}
.ico-refresh:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_refresh.svg') 50% 50% no-repeat;
  background-size: 24px 24px;
}
.ico-more-open:before {
  top: 50%;
  left: 50%;
  width: 32px;
  height: 14px;
  background: url('/img/common/ico_more_open.svg') 50% 50% no-repeat;
  background-size: 32px 14px;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  transition: height 0.3s, background 0.3s;
}
.active.ico-more-open:before {
  width: 14px;
  height: 14px;
  background: #0188ef url('/img/common/ico_more_close.svg') 50% 50% no-repeat;
  border-radius: 50%;
  background-size: 14px 14px;
}
.ico-more-open02:before {
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  background: url('/img/common/ico_more_open2.svg') 50% 50% no-repeat;
  background-size: 32px 32px;
  transform: translate(-50%, -50%);
  transition: height 0.3s, background 0.3s;
}
.ico-send-message:before {
  width:  28px;
  height: 28px;
  background: url('/img/common/ico_send_message02.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-send-message:before {
  width:  38px;
  height: 38px;
  background: url('/img/common/ico_send_message02.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-forward:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_forward.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-cancel:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_cancel.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-stop:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_stop.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-pause:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_pause.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-release-keyword:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_release_keyword.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-resume:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_resume.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-play:before {
  width: 20px;
  height: 20px;
  background: url('/img/common/ico_play.svg') 0 0 no-repeat;
  background-size: 20px 20px;
}
.ico-message {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_message.svg') 0 0 no-repeat;
}
.ico-email {
  width: 24px;
  height: 24px;
  background: url('/img/common/ico_email.svg') 0 0 no-repeat;
}
.ico-send-workflow:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_send_workflow2.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-send-workflow:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_send_workflow2.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-add-list:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_add_list2.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-mobile-add-list:before {
  width: 38px;
  height: 38px;
  background: url('/img/common/ico_add_list2.svg') 0 0 no-repeat;
  background-size: 38px 38px;
}
.ico-move-contact:before {
  width: 28px;
  height: 28px;
  background: url('/img/common/ico_move_contact2.svg') 0 0 no-repeat;
  background-size: 28px 28px;
}
.ico-cancel02:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_cancel02.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
.ico-tag:before {
  width: 30px;
  height: 30px;
  background: url('/img/common/ico_tag.svg') 0 0 no-repeat;
  background-size: 30px 30px;
}
/* form */
.input {
  width: 100%;
  height: 30px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  padding: 0 10px;
  font-size: 12px;
  color: #3c4147;
  font-weight: normal;
}
.input.input-type01 {
  padding: 0 10px 0 32px;
  border-radius: 25px;
  box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2);
}
.input:read-only {
  background-color: #f0f2f4;
}
.input:disabled {
  color: #afafaf;
  background-color: #eff0f4;
  opacity: 1;
}
.input.input-error,
.input-error .input {
  border: 1px solid #ea657b;
}
.select {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 0 32px 0 10px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  font-size: 12px;
  color: #3c4147;
  font-weight: normal;
  background-position-x: calc(100% - 10px);
}
.select option:checked {
  background-color: #e2f2ff;
}
.select:disabled {
  color: #afafaf;
  background-color: #eff0f4;
  opacity: 1;
  -webkit-appearance: none;
}
.textarea {
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  color: #3c4147;
}
.textarea:disabled {
  color: #afafaf;
  background-color: #eff0f4;
  opacity: 1;
}
.input-error .textarea {
  border: 1px solid #ea657b;
  border-radius: 3px;
}
.radio,
.checkbox {
  display: inline-flex;
  /* align-items: flex-start; */
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
.checkbox i:focus,
.checkbox i:hover,
.checkbox i:visited {
  border: 1px solid #c2c2c2 !important;
}
.checkbox i.error:focus,
.checkbox i.error:hover,
.checkbox i.error:visited {
  border: 1px solid #ea657b !important;
}
.checkbox span:focus,
.checkbox span:hover,
.checkbox span:visited {
  border: none !important;
}
.radio input[type='radio'],
.checkbox input[type='checkbox'] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
.table-checkbox input[type='checkbox'] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
.radio span,
.radio strong,
.checkbox span,
.checkbox strong {
  font-size: 13px;
  margin-left: 10px;
}
.radio strong,
.checkbox strong {
  font-weight: 600;
}
.radio span .link-text,
.checkbox span .link-text {
  color: #01baef;
  text-decoration: underline;
}
.radio i,
.checkbox i {
  flex-shrink: 0;
  display: block;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 14px;
  height: 14px;
  border: 1px solid #c2c2c2;
  border-radius: 3px;
  background: #fff;
}
.radio i:before,
.checkbox i:before {
  content: '';
  position: absolute;
}
.table-checkbox i:before {
  content: '';
  position: absolute;
}
.radio i:last-child,
.checkbox i:last-child {
  margin-right: 0;
}
/*.radio:hover input[type='radio']:hover:not(:disabled):not(:checked) + i,*/
/*.radio:hover input[type='radio']:focus:not(:disabled):not(:checked) + i,*/
/*.checkbox:hover [type='checkbox']:not(:disabled) + i,*/
/*.checkbox:focus [type='checkbox']:not(:disabled) + i {*/
/*  border-color: #282828;*/
/*}*/
.radio i {
  border-radius: 50%;
}
.radio i:before {
  display: none;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #01baef;
  transform: translate(-50%, -50%);
}
.checkbox i:before {
  display: none;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 7px;
  border: 1px solid #01baef;
  border-width: 0 0 2px 2px;
  transform: translate(-50%, -70%) rotate(-45deg);
}
.table-checkbox i:before {
  display: none;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 7px;
  border: 1px solid #fff;
  border-width: 0 0 2px 2px;
  transform: translate(-50%, -70%) rotate(-45deg);
}
.checkbox :checked ~ i {
  background-color: #fff;
}
.table-checkbox :checked ~ i {
  border: none !important;
  background-color: #1890ff;
}
.radio :checked ~ i,
.checkbox :checked ~ i {
  /* border-color: #c2c2c2; */
}
.radio :checked ~ i:before,
.checkbox :checked ~ i:before {
  display: block;
}
.table-checkbox :checked ~ i:before {
  display: block;
}
.radio :disabled ~ i,
.checkbox :disabled ~ i {
  background-color: #eff0f4;
  border-color: #dedede !important;
}
.radio :checked:disabled ~ i:before {
  background-color: #ccc;
}
.checkbox :checked:disabled ~ i:before {
  border-color: #ccc;
}
.radio :disabled ~ span,
.radio :disabled ~ strong,
.checkbox :disabled ~ span,
.checkbox :disabled ~ strong {
  color: #afafaf;
}
.check-terms-of-use span {
  color: #01baef;
  font-weight: 600;
  text-decoration: underline;
}
.preview-readonly {
  height: 30px;
  background-color: white;
  padding: 6px 10px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  color: #afafaf;
  font-size: 12px;
}
.schWrap{
  position: relative;
}
.schWrap .btn-search{
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  right: 0;
  background-color: transparent;
}

/* temporary later delete or move */
.radio-type02 input[type='radio'],
.radio-type03 input[type='radio'],
.checkbox-type02 input[type='checkbox'],
.checkbox-type03 input[type='checkbox'] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
.radio-type02 .label,
.radio-type03 .label,
.checkbox-type02 .label,
.checkbox-type03 .label {
  display: block;
  padding: 10px 15px;
  border: 1px solid #e1e1e1;
  border-radius: 3px;
  text-decoration: none;
}
.radio-type03 .label,
.checkbox-type03 .label {
  font-weight: bold;
}
.radio-type03 .label {
  padding: 10px 18px;
}
.radio-type02 :checked ~ .label,
.checkbox-type02 :checked ~ .label {
  border: 1px solid #01baef;
}
.radio-type03 :checked ~ .label,
.checkbox-type03 :checked ~ .label {
  border: 1px solid #01baef;
  color: #fff;
  background: #01baef;
}
[class*='radio-type'] :focus ~ .label,
[class*='checkbox-type'] :focus ~ .label {
  outline: 1px dotted #000;
  outline: 2px auto Highlight;
  outline: 2px auto -webkit-focus-ring-color;
}
.error-input {
  border-color: #ea657b;
}
.error-message {
  margin-top: 6px;
  font-size: 10px;
  color: #ea657b;
  font-weight: 400;
}
/* temporary later delete or move */

.label-text {
  font-size: 14px;
}
.emphasis-type {
  position: relative;
  vertical-align: middle;
}
.emphasis-type:after {
  content: '*';
  color: #ea657b;
  margin-left: 6px;
}
p.dimmed {
  color: #3c4147;
}
p.dimmed:after {
  color: #3c4147;
}
span.dimmed {
  color: #3c4147;
}

/* paragraph */
.heading-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}
.heading-title-panel {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 20px;
}
.text {
  font-weight: normal;
}
.text.smallest {
  font-size: 10px;
}
.text.smaller {
  font-size: 11px;
}
.text.small {
  font-size: 12px;
}
.text.normal {
  font-size: 13px;
}
.text.large {
  font-size: 14px;
}
.text.color01 {
  color: #3c4147;
}
.text-color01 {
  color: #3c4147;
}
.text-color02 {
  color: #01baef;
}
.text-color03 {
  color: #3c4147;
}
.text-color04 {
  color: #0188ef;
}
.text-color05 {
  color: #afafaf;
}
.linked{
  color: #137333;
  text-decoration: underline;
}
.lighter {
  font-weight: lighter;
}
.semi-bold {
  font-weight: 600;
}
.bold {
  font-weight: bold;
}

/* form style */
.checkbox-group {
  margin-top: 10px;
}
.checkbox-group > div {
  margin-top: 5px;
}
.checkbox-group .bottom-location {
  margin-top: 30px;
}
.file-group {
  margin-top: 10px;
}
.file-group > div {
  display: inline-block;
  position: relative;
}
.file-group > div .input {
  margin-top: 0;
  padding-right: 50px;
}
.file-group .file {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 38px;
  height: 33px;
  background-color: #01baef;
  border-left: 1px solid #e1e1e1;
  border-radius: 0 3px 3px 0;
  cursor: pointer;
}
.file-group .file:before,
.file-group .file:after {
  content: '';
  position: absolute;
  top: 8px;
  left: 18px;
  height: 16px;
  width: 2px;
  background-color: #fff;
}
.file-group .file:before {
  transform: rotate(90deg);
}
.file-group .file:after {
  transform: rotate(180deg);
}
.file-group .file [type='file'] {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
  border: none;
  white-space: nowrap;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
}

/* table */
.table th,
.table td {
  height: 30px;
  padding: 6px 15px 7px;
  font-size: 12px;
  word-break: break-all;
  text-align: left;
  vertical-align: middle;
}
.table th {
  background-color: #ebebeb;
  font-weight: bold;
}
.table td {
  color: #3c4147;
  border-top: 1px solid #c9c9c980;
}
.table tbody tr:first-child td {
  border-top: 0;
}
.table-type02 table {
  border: solid #c9c9c980;
  border-width: 0 1px;
}
.table-type02 th,
.table-type02 td {
  height: auto;
  padding: 14px 15px 13px 15px;
}
.table-type02 th {
  border-top: 1px solid #c9c9c980;
  word-break: keep-all;
}
.table-type02 tbody tr:first-child td {
  border-top: 1px solid #c9c9c980;
}
.table-type02 tbody tr:last-child td {
  border-bottom: 0;
}
.table.scroll {
  overflow-x: auto;
}
.editable-table {
  overflow-x: overlay;
  -webkit-overflow-scrolling: touch;
}
.editable-table::-webkit-scrollbar:horizontal {
  height: 12px;
}
.editable-table::-webkit-scrollbar-track:horizontal {
  padding-top: 4px;
  border-top: 1px solid #e1e1e1;
}
.editable-table::-webkit-scrollbar-thumb:horizontal {
  background-color: #cbcbcb;
}
.editable-table::-webkit-scrollbar:vertical {
  width: 12px;
}
.editable-table::-webkit-scrollbar-track:vertical {
  border: 1px solid #e1e1e1;
  border-right: none;
}
.editable-table::-webkit-scrollbar-thumb:vertical {
  background-color: #cbcbcb;
}
/* popup */
.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 340px;
  padding: 38px 30px 30px 30px;
  background-color: #fff;
  border-radius: 16px;
  transform: translate(-50%, -50%);
}
.popup:before,
.popup:after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 100px;
}
.popup:before {
  top: -100px;
}
.popup:after {
  bottom: -100px;
}
.popup .title {
  display: inline-block;
  font-weight: 600;
}
.popup .message {
  font-size: 13px;
  line-height: 20px;
  white-space: pre-wrap;
}
.popup .message.notice-type {
  color: #ea657b;
  font-weight: bold;
}
.popup .btn-console .btn {
  margin-left: 10px;
  /* min-width: 80px; */
}
.popup .scroll-area {
  overflow-y: auto;
  overflow-y: overlay;
  -webkit-overflow-scrolling: touch;
}
.popup-head {
  position: relative;
  padding-bottom: 10px;
}
.popup-head .btn-back {
  position: relative;
  width: 24px;
  height: 16px;
  background: none;
}
.popup-head .btn-close {
  position: absolute;
  top: 50%;
  right: 22px;
  width: 32px;
  height: 32px;
  background: none;
  transform: translateY(-50%);
}
.popup-head .btn-close:before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.popup-foot {
  position: relative;
  padding-top: 12px;
  text-align: right;
}

.full-screen-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 99999;
  overflow: auto;
}

.full-screen-popup .full-screen-contents {
  padding: 100px 126px 80px 130px;
}

/* alert-type */
.popup.alert-type {
  padding: 30px;
  border: 1px solid #e1e1e1;
}

/* content-type01 */
.popup.content-type01 {
  border: 1px solid #e1e1e1;
}

/* content-type03 */
.popup.content-type03 {
  padding: 0;
}

/* content-type04 */
.popup.content-type04 {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  transform: translate(0, 0);
  border-radius: 0;
}
.popup.content-type04::before,
.popup.content-type04::after {
  display: none;
}

/* content-type05 */
.popup.content-type05 {
  text-align: center;
}

/* panel-right */
.panel-right {
  /*overflow-x: hidden;*/
  /*overflow-y: hidden;*/
  position: absolute;
  display: block;
  z-index: 10004;
  background-color: #fff;
  width: 496px;
  height: 100%;
  right: 0;
  top: 0;
  box-shadow: -3px 0 10px #00000029;
  transition: 0.3s;
}
.panel-right .label-text {
  margin-bottom: 10px;
  font-weight: 600;
}

/* panel-right-type02 */
.panel-right.panel-right-type02 {
  top: 102px;
  width: 340px;
  height: calc(100% - 102px);
  z-index: 10000;
}

.panel-right.panel-right-full-height {
  top: 0;
  height: 100%;
}

/* panel-right-type03(email editor) */
.panel-right.panel-right-type03 {
  top: 61px;
  width: 496px;
  height: 100%;
}
.panel-right.panel-right-type-mobile {
  width: 100%;
  height: 100%;
}
.panel-right.panel-right-type03 .panel-body {
  height: calc(100% - 84px);
}
.panel-right-inner {
  height: 100%;
}
.panel-right .panel-header {
  position: relative;
  height: 74px;
  padding: 30px 30px 0;
}
.panel-right .panel-header .heading-title-panel {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
  font-size: 16px;
}
.panel-right .panel-body {
  overflow-y: auto;
  overflow-y: overlay;
  height: calc(100% - 164px);
  padding: 0 30px;
  -webkit-overflow-scrolling: touch;
}
.panel-right .panel-foot {
  position: relative;
  height: 80px;
}
.panel-right .panel-foot .error-message {
  position: absolute;
  top: 0;
  left: 32px;
  margin-top: 0;
}
.panel-right .panel-foot .btn-group {
  position: absolute;
  bottom: 30px;
  right: 32px;
}
.panel-right .panel-foot .btn-group .btn {
  margin-left: 10px;
}
.panel-right.collapsed {
  right: -496px;
}
.panel-right.panel-right-type02.collapsed {
  right: -340px;
}
.panel-right.panel-right-type03.collapsed {
  right: -496px;
}

/* panel-bottom */
.panel-bottom .panel-header {
  position: relative;
  height: 60px;
  padding: 20px 16px 20px;
  background-color: #ffffff;
  color: #3c4147;
  font-size: 12px;
  border-radius: 5px 5px 0 0;
}
.panel-bottom .panel-body {
  overflow-y: auto;
  overflow-y: overlay;
  height: 555px;
  padding: 0 16px;
  margin-bottom: 20px;
  -webkit-overflow-scrolling: touch;
}
.panel-bottom .btn-close-panel {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}
.panel-bottom .panel-header-type02 {
  position: relative;
  padding: 14px 16px 20px;
  font-size: 0;
  height: 54px;
}
.panel-bottom .panel-header-type02 .heading-title-panel {
  display: inline-block;
  margin-bottom: 0;
  vertical-align: middle;
}
.panel-bottom .panel-foot {
  position: relative;
  height: 50px;
}
.panel-bottom .panel-foot .btn-group {
  position: absolute;
  right: 30px;
  bottom: 30px;
}
.panel-bottom .panel-foot .btn-group .btn {
  /* min-width: 100px; */
}
.fixed-text-bottom-panel {
  position: fixed;
  /*
  bottom으로부터 51px인 이유:
  panel의 고정 footer의 height: 80px, 해당 text의 height: 14px, margin-top: 15px
  80 - (14 + 15) = 51
  */
  bottom: 51px;
}

/* etc */
.row-group + .row-group {
  margin-top: 30px;
}
.row-group .label-text {
  margin-bottom: 10px;
}
.row-group-in + .row-group-in {
  margin-top: 10px;
}

/* search-result-message */
.search-result-message {
  font-weight: 600;
}
.search-result-message:not(tr) {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.table tbody tr.search-result-message td {
  border-bottom: 1px solid #c9c9c980;
}
.table-type02 .search-result-message td {
  padding: 14px;
}
.search-result-message p {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.search-result-message .no-data span,
.search-result-message .no-search span {
  display: block;
  position: relative;
  padding-top: 80px;
  font-size: 14px;
  color: #808080;
}
.search-result-message p {
  color: #808080;
  margin-top: 20px;
}
.search-result-message .no-data span:before,
.search-result-message .no-search span:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 70px;
  height: 70px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: 70px 70px;
  transform: translateX(-50%);
}
.search-result-message .no-data span:before {
  background-image: url('/img/common/ico_no_data.png');
}
.search-result-message .no-search span:before {
  background-image: url('/img/common/ico_no_search.svg');
}
.search-result-message .no-data span b,
.search-result-message .no-search span b {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  font-weight: normal;
  word-break: break-word;
}
.pre {
  white-space: pre !important;
  white-space: -moz-pre-wrap !important;
}
.pre-wrap {
  white-space: pre-wrap !important;
  white-space: -moz-pre-wrap !important;
}
.break-spaces {
  white-space: break-spaces !important;
}
.break-all {
  word-break: break-all;
}
.normalize-icon {
  font-family: monospace
}
.vcard-container {
  width: 234px;
  min-height: 80px;
  background-color: #f3f7ff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.vcard-container span:first-child {
  font-weight: 600;
  font-size: 12px;
  width: 150px;
  line-height: 18px;
}
.vcard-container span:nth-child(2) {
  width: 46px;
  height: 46px;
  border-radius: 30px;
  background-color: #2799ba;
  text-align: center;
  padding: 11px 0;
  font-size: 20px;
  font-weight: 600;
  color: white;
  line-height: 24px;
}
/* tablet */
@media only screen and (max-width: 1199px) {
  .pc-view {
    display: none;
  }
  .tw-container {
    padding-left: 0;
  }
  .tw-contents-inner {
    padding: 24px;
  }
  .tw-contents-inner-type02 {
    padding: 24px;
  }
  .tw-header {
    padding-left: 0;
  }
  .expand-mode .tw-sidebar {
    left: -230px;
  }
  .tw-header .tw-inner {
    padding: 0 24px 0 72px;
  }
  .tw-header .btn-open-nav {
    display: block;
  }
  .tw-header .btn-console {
    right: 24px;
  }

  /* reset shrink-type for mobile */
  .expand-mode .tw-header {
    padding-left: 0;
  }
  .tw-container.expand-mode {
    padding-left: 0;
  }

  /* form style */
  .file-group > div {
    display: block;
  }

  /* panel-right */
  .panel-right {
    width: 468px;
  }

  /* panel-right-type03 (email editor) */
  .panel-right-type03 {
    width: 496px;
  }
  .panel-right.collapsed {
    right: -468px;
  }
  .w50{
    width: 100%;
  }
  .inner-box .box-contents{
    flex-direction: column;
    padding-bottom: 40px !important;
  }
  .inner-box .row{
    width: 100%;
    padding: 32px 0 0 0;
  }
  .inner-box .row.w50 + .row.w50{
    padding-top: 48px;
    padding-left: 0;
    border-left: 0;
  }
  .inner-box h2 .titExp{
    display: block;
    margin-top: 12px;
    margin-left:0;
  }
  .full-screen-popup .full-screen-contents {
    padding: 100px 16px 80px 16px;
  }
  .tw-sidebar {
    width: 100%;
    z-index: 100000;
  }
  .hide-sidebar .tw-sidebar {
    left: -230px;
    width: 210px;
  }
}

/* mobile */
@media only screen and (max-width: 767px) {
  .tw-container {
    min-height: auto;
  }
  .tw-contents-inner {
    padding: 16px 16px 32px 16px;
  }
  .tw-contents-inner:has(.basic-table) {
    padding: 0;
  }
  .tw-contents-inner-type02 {
    padding: 16px;
  }
  .tw-contents-inner-type02:has(.basic-table) {
    padding: 16px 0 0 0;
  }
  .tw-header h1 {
    font-size: 20px;
  }
  .tw-header .btn-group.active {
    display: block;
    position: absolute;
    top: 38px;
    right: 0;
    width: 176px;
    box-shadow: 0px 0px 9px 2px #00000029;
  }
  .tw-header .btn-group span + span {
    margin: 0;
  }
  .tw-header .tw-inner {
    padding: 0 16px 0 72px;
  }
  .tw-header .btn-console {
    right: 16px;
  }

  /* popup */
  .popup {
    width: 90%;
    padding: 16px;
    border: 0;
  }

  /* content-type02 */
  .popup.content-type02 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: translate(0, 0);
    border-radius: 0;
  }
  .popup.content-type02::before,
  .popup.content-type02::after {
    display: none;
  }
  .popup.content-type02 .popup-head {
    padding: 16px 16px 14px;
  }
  .popup.content-type02 .popup-foot {
    padding: 18px 16px;
  }
  .popup.content-type02 .popup-body {
    overflow-y: auto;
    overflow-y: overlay;
    height: calc(100% - 118px);
    padding: 0 16px;
    -webkit-overflow-scrolling: touch;
  }

  /* content-type03 */
  .popup.content-type03 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    transform: translate(0, 0);
    border-radius: 0;
  }
  .popup.content-type03::before,
  .popup.content-type03::after {
    display: none;
  }

  /* tobe modify */
  .popup .scroll-area.example-class {
    width: 100%;
    height: calc(100% - 42px);
  }

  /* panel-right */
  .panel-right {
    width: 100%;
  }
  .panel-right .panel-header {
    height: 60px;
    padding: 26px 16px 0;
  }
  .panel-right .panel-body {
    height: calc(100% - 126px);
    padding: 0 16px;
  }
  .panel-right .panel-foot {
    height: 80px;
  }
  .panel-right .panel-foot .error-message {
    left: 16px;
  }
  .panel-right .panel-foot .btn-group {
    bottom: 40px;
    right: 16px;
  }
  .panel-right.collapsed {
    right: -100%;
  }

  [class*='btn-panel-back-type'] {
    width: 28px;
    height: 28px;
  }
  .btn-panel-back-type03:before {
    width: 8px;
    height: 16px;
    mask-size: 8px 16px;
    -webkit-mask-size: 8px 16px;
  }

  /* panel-bottom */
  .panel-bottom .panel-header {
    position: relative;
    height: auto;
    padding: 0;
    background-color: #ffffff;
    color: #3c4147;
    border-radius: 0;
  }
  .panel-bottom .panel-body {
    height: calc(100% - 126px);
    padding: 16px 16px 0;
  }
  .panel-bottom .panel-foot {
    height: 46px;
  }
  .panel-bottom .panel-foot .btn-group {
    bottom: 30px;
  }
  .panel-bottom .heading-title-panel {
    margin-bottom: 4px;
    padding: 0 0 0 0;
    font-size: 16px;
    font-weight: 600;
  }
  .panel-bottom .btn-close-panel {
    top: 0;
    right: auto;
    left: 0;
    width: 56px;
    height: 60px;
    transform: translateY(0);
    background-color: #01baef;
  }
  .panel-bottom .btn-panel-back {
    display: block;
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    width: 56px;
    height: 60px;
    transform: translateY(0);
    background: #01baef;
  }
  .panel-bottom .btn-panel-back:before {
    top: 50%;
    left: 50%;
    width: 16px;
    background: url('/img/common/ico_back_arrow03.svg') 0 0 no-repeat;
    background-size: 16px 12px;
    transform: translate(-50%, -50%);
  }
  .panel-bottom .panel-header-type02 {
    height: 60px;
    padding: 18px 16px 19px;
    border-bottom: 1px solid #e1e1e1;
  }
  .panel-bottom .panel-header-type02.add-btn-back {
    padding: 18px 0 19px 70px;
  }
  .panel-bottom .btn-close-panel-bottom {
    width: 28px;
    height: 28px;
    right: 16px;
  }
  .panel-bottom .btn-close-panel-bottom:after {
    width: 18px;
    height: 18px;
  }

  /* table */
  .table-type02 th,
  .table-type02 td {
    line-height: 15px;
    padding: 5px 15px;
    font-size: 11px;
  }
  .heading-title {
    font-size: 13px;
  }
  .bg-type01{
    padding-top: 0;
  }
  .inner-box{
    margin: 14px 0 0 0;
  }
  .inner-box h2,
  .inner-box-heading {
    padding: 0 16px 20px;
  }
  .inner-box .box-contents{
    padding: 0 16px;
  }
  .btn.size-type05{
    font-size: 11px;
  }
  .radio span, .radio strong, .checkbox span, .checkbox strong {
    font-size: 12px;
  }
  .label-text {
    font-size: 13px;
  }
}
@media only screen and (max-width: 500px) {
  .row:not(.w100) {
    & .btn.size-type05{
      display: block;
    }
    & .tit-01 span + button.btn,
    .article-wrapper .info span + button.btn,
    .ico-info + button.btn{
      margin-left: 0;
      margin-top: 12px;
    }
  }
}

/* minimum height */
/* @media only screen and (max-height: 580px) {
	.tw-container {
		overflow: visible;
		height: auto;
	}
	.panel-right {
		height: auto;
	}
} */

/**
 V Tooltip custom CSS
 */
.vue-tooltip {
  --tooltip-bg-color: #3c4147;
  --tooltip-text-color: #fff;
  --tooltip-color-red: #ea657b;
  --tooltip-bg-color-red: #fff2f4;

  background-color: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
  box-sizing: border-box;
  /** 툴팁 두줄되면 이상해지는 버그 발견 */
  white-space: pre-wrap;
  max-width: 485px;
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 100000;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  font-size: 10px;
}
.vue-tooltip.type-2 {
  box-shadow: none;
  font-size: 14px;
}
.vue-tooltip.error {
  background-color: var(--tooltip-bg-color-red);
  color: var(--tooltip-color-red);
  border: 1px solid var(--tooltip-color-red);
}
.vue-tooltip.vue-tooltip-hidden {
  transform: translateX(-100000px) !important;
}
.vue-tooltip .vue-tooltip-content {
  text-align: center;
}
.vue-tooltip .tooltip-arrow {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}
.vue-tooltip[x-out-of-boundaries] {
  display: none;
}
.vue-tooltip[x-placement^='bottom'] {
  margin-top: 5px;
}
.vue-tooltip[x-placement^='bottom'] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-bottom-color: var(--tooltip-bg-color);
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  top: -5px;
  margin-top: 0;
  margin-bottom: 0;
}
.vue-tooltip[x-placement^='bottom'].error .tooltip-arrow {
  border-bottom-color: var(--tooltip-color-red);
}
.vue-tooltip[x-placement^='top'] {
  margin-bottom: 5px;
}
.vue-tooltip[x-placement^='top'] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-top-color: var(--tooltip-bg-color);
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  bottom: -5px;
  margin-top: 0;
  margin-bottom: 0;
}
.vue-tooltip[x-placement^='top'].error .tooltip-arrow {
  border-top-color: var(--tooltip-color-red);
}
.vue-tooltip[x-placement^='right'] {
  margin-left: 5px;
}
.vue-tooltip[x-placement^='right'] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-right-color: var(--tooltip-bg-color);
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  margin-left: 0;
  margin-right: 0;
}
.vue-tooltip[x-placement^='right'].error .tooltip-arrow {
  border-right-color: var(--tooltip-color-red);
}
.vue-tooltip[x-placement^='left'] {
  margin-right: 5px;
}
.vue-tooltip[x-placement^='left'] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-left-color: var(--tooltip-bg-color);
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  margin-left: 0;
  margin-right: 0;
}
.vue-tooltip[x-placement^='left'].error .tooltip-arrow {
  border-left-color: var(--tooltip-color-red);
}

/**
	Workbench Panel에서 쓰이는 공통 div에 대한 Css
 */
.option-box {
  margin-top: 15px;
  display: block;
}
.option-title {
  color: #000000;
  font-size: 12px;
  display: block;
  margin-top: 20px;
  margin-bottom: 5px;
}
.option-description {
  color: #929292;
  font-size: 10px;
  display: block;
}
.mxTooltip {
  white-space: pre;
  position: absolute;
  background-color: #000;
  box-sizing: border-box;
  color: #fff;
  /*max-width: 320px;*/
  padding: 6px 10px;
  border-radius: 3px;
  z-index: 100000;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.4);
  font-size: 9px;
}
.mxTooltip[x-out-of-boundaries] {
  display: none;
}
.mxTooltip[x-placement^='bottom'] {
  margin-top: 5px;
}
.mxTooltip[x-placement^='top'] {
  margin-bottom: 5px;
}
.mxTooltip[x-placement^='right'] {
  margin-left: 5px;
}
.mxTooltip[x-placement^='left'] {
  margin-right: 5px;
}
.spam {
  color: #ea657b;
  text-decoration: line-through;
}
.text-url {
  color: #01baef;
  text-decoration: underline;
  cursor: pointer;
}
.text-signature {
  font-family: 'Noto Serif KR', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.text-dynamic-date {
  color: #0048ff;
}

.invalid-text {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  color: #ea657b;
}
.invalid-text.new-margin {
  margin-top: 6px;
}
.information-text {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: #137333;
}

.tile-media-preview-image {
  margin: 5px 0;
  border-radius: 3px;
  height: 50px;
  width: 50px;
  background: url(/img/drag/tile-media-preview-image.png) 100% no-repeat;
  background-position-x: center;
  background-color: #eff0f4;
}

.tile-media-preview-video {
  margin: 5px 0;
  border-radius: 3px;
  height: 50px;
  width: 50px;
  background: url(/img/drag/tile-media-preview-video.png) 100% no-repeat;
  background-position-x: center;
  background-color: #eff0f4;
}

/**
	드래그 요소!! TheDragTile에서 Workspace로 drag시 발생하는 icon들
 */
.template-data-capture {
  background: url('/img/drag/template-data-capture.png') 100% no-repeat;
}

.template-survey {
  background: url('/img/drag/template-survey.png') 100% no-repeat;
}

.template-yes-no {
  background: url('/img/drag/template-yes-no.png') 100% no-repeat;
}

.drag-contact {
  background: url('/img/drag/tile-contact.png') 100% no-repeat;
  opacity: 0.5;
}
.drag-branch {
  background: url('/img/drag/tile-branch.png') 100% no-repeat;
}
.drag-delay {
  background: url('/img/drag/tile-pause.png') 100% no-repeat;
}
.drag-wait-for {
  background: url('/img/drag/tile-wait-for-condition.png') 100% no-repeat;
}
.drag-send-message {
  background: url('/img/drag/tile-send-message.png') 100% no-repeat;
}
.drag-data-capture {
  background: url('/img/drag/Data capture.svg') 100% no-repeat;
}
.drag-add-to-list {
  background: url('/img/drag/tile-add-to-list.png') 100% no-repeat;
}
.drag-block-delete-a-contact {
  background: url('/img/drag/tile-block-delete-a-contact.png') 100% no-repeat;
}
.drag-alert-message {
  background: url('/img/drag/tile-alert-message.png') 100% no-repeat;
}
.drag-split {
  background: url('/img/drag/tile-split.svg') 100% no-repeat;
}
.drag-end {
  background: url('/img/drag/tile-end.png') 100% no-repeat;
}
.drag-update-contact {
  background: url('/img/drag/Update Contact.svg') 100% no-repeat;
}
.drag-ask-question {
  background: url('/img/drag/tile-ask-question.svg') 100% no-repeat;
}
.drag-upsert-salesforce-object {
  background: url('/img/drag/upsert-salesforce-object.svg') 100% no-repeat;
}
.drag-add-tag {
  background: url('/img/drag/upsert-salesforce-object.svg') 100% no-repeat;
}
.drag-remove-tag {
  background: url('/img/drag/upsert-salesforce-object.svg') 100% no-repeat;
}
/*.drag-perform-math {*/
/*  background: url('/img/drag/tile-PerformMath.png') 100% no-repeat;*/
/*}*/
.drag-send-email {
  background: url('/img/drag/tile-send-email.png') 100% no-repeat;
}
.drag-dummy {
  background: url('/img/drag/tile-dummy.png') 100% no-repeat;
}
.drag-jump-to-workflow {
  background: url('/img/drag/tile-jump-to-workflow.svg') 100% no-repeat;
}
.drag-alert-email {
  background: url('/img/drag/tile-alert-email.svg') 100% no-repeat;
}
.drag-add-tag {
  background: url('/img/drag/tile-add-tag.svg') 100% no-repeat;
}
.drag-remove-tag {
  background: url('/img/drag/tile-remove-tag.svg') 100% no-repeat;
}

.drag-move-folder .ico-move {
  content: '';
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.drag-delete-folder .ico-move {
  content: '';
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.report-stat-wrapper {
  display: flex;
  width: 210px;
  height: 30px;
  justify-content: space-around;
  flex-wrap: nowrap;
  border-radius: 15px;
  background-color: #808080;
  padding: 0 11px;
}

.report-stat-wrapper.end {
  width: 65px;
}

.report-stat-wrapper:hover {
  background-color: #0188ef;
}

.report-stat-wrapper.selected {
  background-color: #01baef;
}

.report-stat-divider {
  border-left: 1px solid white;
  height: 14px;
  align-self: center;
  margin: 0 10px 0 10px;
}

.report-stat {
  color: #ffffff;
  padding: 2px;
  width: 100%;
}

span.enrollmentCount {
  background: url('/img/workbench/shape_ico/stat-enroll.svg') no-repeat;
  background-size: contain;
  color: #3c4147;
  font-size: 14px;
  background-position: 0% 50%;
  padding: 0 0 0 24px;
}
span.completeCount {
  background: url('/img/workbench/shape_ico/stat-complete.svg') no-repeat;
  background-size: contain;
  color: #3c4147;
  font-size: 14px;
  background-position: 0% 50%;
  padding: 0 0 0 24px;
}

span.splitRate {
  background: url('/img/workbench/shape_ico/stat-split.svg') no-repeat;
  background-size: contain;
  color: #3c4147;
  font-size: 11px;
  background-position: 0% 50%;
  padding: 0 0 0 20px;
}
[contenteditable='true'] {
  -webkit-user-select: text;
  user-select: text;
  -webkit-user-modify: read-write;
  user-modify: read-write;
}
[contenteditable][placeholder]:empty:before {
  content: attr(placeholder);
  color: #c2c2c2;
}
[contenteditable][placeholder]:empty:focus:before {
  content: '';
}
.masking {
  position: absolute;
  top: -3.5px;
  left: -1px;
  height: 23px;
  background: rgba(1, 186, 239, 0.2);
  z-index: -1;
  cursor: pointer;
}
.exceeded-error-text .masking {
  z-index: 1 !important;
  top: -2px !important;
}
/*text editor 치환문자*/
.text-editor-main .text-editor-element-container {
  margin: 0px 0px 0px 1px;
  position: relative;
  padding: 0px 3px 0px 2px;
  top: 0px;
  /*display: inline-block;*/
}
.text-editor-main .text-editor-element.response {
  height: 20px !important;
  font-size: 10px;
  background: #EEECFF;
  color: #786DD5;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  position: relative;
  top: 2px;
  height: 18px;
  padding: 0px 10px 0px 10px;
  border: 1px solid #786DD5;
  border-radius: 3px;
  padding-top: 1px;
  white-space: nowrap;
}
.text-editor-main .text-editor-element.response .text-editor-delete {
  background-color: #786DD5;
}
.text-editor-main .text-editor-element {
  height: 16px;
  font-size: 10px;
  background: transparent;
  color: #01baef;
  display: inline-block;
  margin: 0px 0px 0px 0px;
  position: relative;
  top: 2px;
  height: 18px;
  padding: 0px 10px 0px 10px;
  border: 1px solid #01baef;
  border-radius: 30px;
}
.text-editor-main .text-editor-element:hover {
  cursor: pointer;
  background-color: #d9f5fd;
}
.text-editor-main .text-editor-replace {
  display: inline-block;
  font-size: 12px;
  position: relative;
  height: 18px;
  top: -3px;
}
.text-editor-main .text-editor-delete {
  display: inline-block;
  width: 10px;
  height: 10px;
  vertical-align: middle;
  background-color: #01baef;
  -webkit-mask-image: url(/img/common/ico_x_editor.svg);
  -webkit-mask-size: cover;
  position: relative;
  top: -4px;
  margin-left: 10px;
}
.text-editor-main .text-editor-blank {
  position: relative;
  right: -18px;
}
.text-editor-main .no-content-editable {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-modify: read-only;
}
/* text editor 에러 */
.text-editor-main .text-editor-element-container.error .text-editor-element {
  border-color: #ea657b;
  color: #ea657b;
}
.text-editor-main .text-editor-element-container.error .text-editor-element:hover {
  background-color: #fff2f4;
}
.text-editor-main .text-editor-element-container.error .text-editor-delete {
  background-color: #ea657b;
}
.text-editor-main .exceeded-error-text {
  background-color: #FFE3E8;
  caret-color: black;
  padding: 1px 0px;
}
/* 임시 디자인  */
.text-editor-main .exceeded-error-br {
  display: inline-block;
  width: 0.12em;
  height: 20.96px;
}
.text-editor-element-container.exceeded-error-text {
  /*padding: 1px 3px;*/
}
/* text editor information */
.text-editor-information {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto !important;
}
.text-editor-information > * {
  flex: 1 1;
  height: 100%;
}
.text-editor-information .error-message-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.text-editor-information .information-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: end;
  gap: 5px;
  text-align: end;
}
.text-editor-information .information-container .text-count-container:has(.ico-info) {
  display: flex;
  gap: 6px;
}
.text-editor-information .information-container .ico-info {
  margin-left: 0;
}
.text-editor-information .information-container span.text-value {
  font-weight: bold;
  margin-right: 5px;
}
.text-editor-information.flex-column {
  flex-direction: column;
}
.text-editor-information.flex-column > * {
  width: 100%;
}
/* #145321 : text editor border 스타일 공통화, 예외 처리하려면 textEditor 컴포넌트에 no-common-text-editor-style class 추가 */
.text-editor-container:not(.no-common-text-editor-style) > div {
  border: 1px solid #e1e1e1 !important;
  border-top: none !important;

  &:first-of-type {
    border-radius: 3px 3px 0 0 !important;
    border-top: 1px solid #e1e1e1 !important;
  }
  &:last-of-type {
    border-radius: 0 0 3px 3px !important;
  }
}
/* text editor dimmed */
.text-editor-container-disabled .text-editor-element-container {
  pointer-events: none;
}
.text-editor-container-disabled .text-editor-element-container .text-editor-element{
  border: 1px solid #e1e1e1;
  color: #afafaf;
  background-color: #f5f5f5;
}
.text-editor-container-disabled .text-editor-element-container .text-editor-element:hover {
  cursor: default;
  background-color: #f5f5f5;
}
.text-editor-container-disabled .text-editor-element-container .text-editor-delete{
  background-color: #afafaf;
}
.text-editor-container-disabled .text-editor-element-container .masking{
  z-index: 0;
}

/* #129569: contenteditable 특성 상  .exceeded-error-text 의 스타일을 inline style 로 유지시키는 경우가 있다. */
/* 이것을 막기 위해 background-color 값을 덮어씌운다. */
.text-editor-main span[style*="background-color: rgb(255, 227, 232);"] {
  background-color: rgba(0, 0, 0, 0) !important;
}
/* #147256: contenteditable 특성 상 .spam 의 스타일을 inline style 로 유지시키는 경우가 있다. */
.text-editor-main font {
  color: inherit !important;
}
.text-editor-main strike {
  text-decoration: none !important;
}

.hidden-editor-container {
  width: 0;
  height: 0;
  opacity: 0;
  position: fixed;
  z-index: -1;
}
.btn-trash05 {
  width: 12px;
  height: 15px;
  background: url('/img/common/ico_trash05.svg') 0 0 no-repeat;
}
.error-screen-layer {
  overflow-x: hidden;
  overflow-y: overlay;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 100000;
  display: none;
}
.blur-filter {
  filter: blur(2px);
}