:root {
  --sidebar: 210px;
  --colora1: #2c3556;
  --topbar: 64px;
  --colora2: #495b71;
  --colort1: #f4f4f4;
  --sidebarnegative: -210px;
  --colort2: #ffb992;
  --c-pd: 0px;
  --g1: 210px;
}

.heading {
  color: #8d4949;
  font-weight: 400;
}

.paragraph {
  color: #924949;
}

.componentlayout {
  flex-flow: column;
  padding: 60px 40px 100px;
  display: flex;
}

.div-block {
  display: flex;
}

.div-block-2 {
  min-width: var(--sidebar);
  background-color: var(--colora1);
  min-height: 100%;
  position: fixed;
}

.div-block-3 {
  height: var(--topbar);
  background-color: var(--colora2);
  justify-content: center;
  align-items: center;
  display: flex;
}

.div-block-4 {
  margin-top: var(--topbar);
  margin-left: var(--sidebar);
  background-color: #2b2b2b;
  width: 100%;
}

.div-block-5 {
  left: var(--sidebar);
  height: var(--topbar);
  background-color: var(--colora1);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0%;
  bottom: auto;
  right: 0%;
}

.sb-mr {
  color: var(--colort1);
  background-color: #2e3347;
  justify-content: flex-start;
  align-items: center;
  min-height: 64px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.sb-mr:hover {
  color: #f7931e;
}

.zt {
  width: 100%;
}

.div-block-8 {
  width: 64px;
  height: 64px;
}

.sb-mrh {
  color: #fdbb6d;
  background-color: #2b2f42;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  text-decoration: none;
  display: flex;
}

.sb-mrh:hover {
  color: #f7931e;
}

.zi {
  justify-content: center;
  align-items: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  display: flex;
}

.zi.hm {
  color: #f4f4f4;
  width: 44px;
  min-width: 44px;
}

.zi.hm:hover {
  color: #f7931e;
}

.code-embed {
  width: 28px;
  height: 28px;
}

.text-block {
  color: #f4f4f4;
  font-weight: 700;
}

.ctm {
  color: #f4f4f4;
  background-color: #edf2f5;
  padding: 44px 40px 80px;
  font-family: Anuphan, sans-serif;
}

.grid21 {
  grid-column-gap: 22.5px;
  grid-row-gap: 22.5px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 22.5px;
  display: grid;
}

.text-block-2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.sptt {
  color: #2c3556;
  padding-top: 20px;
  padding-bottom: 20px;
}

.hl {
  color: #e3c39d;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}

.hln {
  color: #e3c39d;
  margin-right: 24px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.cardy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #2b2b2b;
  background-color: #e3c39d;
  border-radius: 12px;
  flex-flow: column;
  padding: 24px;
  display: flex;
}

.text-block-3 {
  font-size: 18px;
  line-height: 22px;
}

.text-block-4 {
  text-align: right;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 24px;
}

.cardg {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #071739;
  background-color: #a4b6c4;
  border-radius: 12px;
  flex-flow: column;
  padding: 24px;
  display: flex;
}

.cardyy {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #fdbb6d;
  background-color: #2e3347;
  border: 2px solid #e3c39d;
  border-radius: 12px;
  flex-flow: column;
  padding: 24px;
  display: flex;
}

.text-block-5 {
  margin-top: 12px;
}

.text-block-5-copy {
  margin-top: 12px;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.cardw {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
  color: #f4f4f4;
  background-color: #2e3347;
  border: 2px solid #f4f4f4;
  border-radius: 12px;
  flex-flow: column;
  padding: 24px;
  display: flex;
}

.rtr {
  justify-content: center;
  align-items: center;
  display: flex;
}

.rbtmr {
  color: #f4f4f4;
  justify-content: center;
  align-items: center;
  height: 64px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  display: flex;
}

.rbtmr:hover {
  color: #f7931e;
}

.menup {
  color: var(--colort1);
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}

.sb-m {
  min-width: var(--sidebar);
  height: calc(100vh - 64px);
  margin-top: 64px;
  font-family: Anuphan, sans-serif;
  overflow: auto;
}

.div-block-9-copy {
  color: #f4f4f4;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
}

.div-block-9-copy.hm {
  color: #f4f4f4;
}

.div-block-17 {
  background-color: var(--colora1);
  border-radius: 12px;
  height: 400px;
  margin-top: 24px;
  margin-bottom: 36px;
}

.grid421 {
  grid-column-gap: 22.5px;
  grid-row-gap: 22.5px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 22.5px;
  display: grid;
}

.grid21-ori {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 12px;
  display: grid;
}

.div-block-18 {
  text-align: right;
}

.text-block-6 {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
}

.mf {
  z-index: 9;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 200px 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.sb {
  width: var(--sidebar);
  background-color: var(--colora1);
  height: 100vh;
  transition: width .333s;
  position: static;
}

.ct {
  background-color: #495b71;
  width: 100%;
  height: 100vh;
  overflow: auto;
}

.sb-h {
  z-index: 10;
  height: var(--topbar);
  background-color: var(--colora1);
  justify-content: flex-start;
  align-items: center;
  font-family: Anuphan, sans-serif;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.cthd {
  height: var(--topbar);
  background-color: var(--colora1);
  justify-content: flex-end;
  align-items: center;
  font-family: Anuphan, sans-serif;
  display: flex;
  position: sticky;
  top: 0;
}

.btnsb {
  color: #ebebeb;
  cursor: pointer;
  background-color: #272c3f80;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  transition: background-color .225s cubic-bezier(.445, .05, .55, .95);
  display: flex;
  overflow: hidden;
}

.ces {
  width: 28px;
  height: 28px;
}

.hf {
  display: none;
}

.txtmenu {
  white-space: nowrap;
}

.menu-pf {
  background-color: #e3c39d;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
}

.menu {
  color: #2c3556;
  background-color: #fcfcfc;
  justify-content: center;
  align-items: center;
  height: 52px;
  text-decoration: none;
  display: flex;
}

.menu:hover {
  color: #bd7147;
}

.menupl {
  background-color: var(--colort1);
  border-radius: 6px;
  position: absolute;
  inset: 72px 8px auto auto;
  overflow: hidden;
  transform: scale(0);
}

.txt-menu {
  padding-left: 12px;
  padding-right: 12px;
}

.ff {
  background-color: var(--colora1);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: flex;
}

.formtxtfield {
  background-color: var(--colora2);
  color: var(--colort1);
  border: 1px solid #f4f4f461;
  border-radius: 4px;
  width: 100%;
  height: 44px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 16px;
}

.formtxtfield:focus {
  border: 1px solid var(--colort1);
}

.formtxtfield.disabled {
  color: var(--colort2);
}

.form {
  width: 520px;
  padding-left: 35px;
  padding-right: 35px;
}

.submit-button {
  color: var(--colora2);
  background-color: #e3c39d;
  border-radius: 4px;
  width: 100%;
  height: 44px;
  font-size: 16px;
}

.submit-button:hover {
  background-color: #f7931e;
}

.text-block-7 {
  color: var(--colort1);
  text-align: center;
  margin-bottom: 40px;
  font-size: 26px;
  font-weight: 700;
  line-height: 32px;
}

.txt-f {
  color: var(--colort1);
  text-align: center;
  margin-top: 40px;
}

.ffc {
  padding-top: 0;
  font-family: Anuphan, sans-serif;
}

.txt-error-msg {
  color: #fdc763;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

.h-form {
  color: var(--colort1);
  text-align: center;
  margin-bottom: 40px;
  font-size: 26px;
}

.bgdraft {
  background-color: var(--colora1);
}

.success-message {
  background-color: var(--colora1);
  width: 520px;
  height: 358px;
}

.div-block-19 {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.error-message {
  color: #b80000;
  text-align: center;
}

.messagevalid {
  color: #fdc763;
}

.msgf {
  padding-bottom: 10px;
}

.ffc-2 {
  width: 520px;
  padding-top: 0;
  padding-left: 35px;
  padding-right: 35px;
  font-family: Anuphan, sans-serif;
}

.h-formlogo {
  justify-content: center;
  align-items: center;
  display: flex;
}

.image {
  width: 333px;
  margin-bottom: 20px;
}

.txt-top {
  white-space: nowrap;
  display: block;
}

.logo {
  width: 112px;
}

.menupl2 {
  background-color: var(--colort1);
  border-radius: 6px;
  position: absolute;
  inset: 72px 8px auto auto;
  overflow: hidden;
  transform: scale(0);
}

.ddr {
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  margin-right: 10px;
  padding: 0;
  display: flex;
}

.dropdown-list {
  inset: 0% 0% auto auto;
}

.dropdown-list.w--open {
  border-radius: 8px;
  top: 32px;
  right: 42px;
  overflow: hidden;
}

.div-block-21 {
  display: flex;
}

.fl {
  justify-content: center;
  align-items: center;
  width: 146px;
  display: flex;
}

.lg {
  z-index: 10;
  position: fixed;
  inset: 0% auto auto 0%;
}

.f {
  position: relative;
}

.l {
  z-index: 10;
  height: var(--topbar);
  background-color: #2e3347;
  width: 210px;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.t {
  z-index: 9;
  height: var(--topbar);
  background-color: var(--colora1);
  position: fixed;
  inset: 0% 0% auto;
}

.s {
  z-index: 9;
  background-color: #2e3347;
  width: 210px;
  height: calc(100vh - 64px);
  margin-top: 64px;
  font-family: Anuphan, sans-serif;
  transition-property: width;
  transition-duration: .225s;
  transition-timing-function: cubic-bezier(.445, .05, .55, .95);
  position: fixed;
  inset: 0% auto auto 0%;
  overflow: auto;
}

.c {
  z-index: 8;
  padding-top: 44px;
  padding-left: var(--c-pd);
  width: 100%;
  transition: width .225s cubic-bezier(.445, .05, .55, .95);
  position: relative;
}

.jgccgj {
  z-index: 0;
  background-color: var(--colora1);
  justify-content: center;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.gf210 {
  width: 210px;
  transition: width .225s cubic-bezier(.445, .05, .55, .95);
}

.flm {
  justify-content: center;
  align-items: center;
  padding-left: 12px;
  display: flex;
}

.lm {
  z-index: 10;
  height: var(--topbar);
  background-color: var(--colora1);
  width: 210px;
  display: flex;
  position: fixed;
  inset: 0% auto auto 0%;
}

.flmm {
  justify-content: center;
  align-items: center;
  padding-left: 12px;
  display: flex;
}

.lmm, .bqm {
  display: none;
}

.cesmh {
  width: 28px;
  height: 28px;
}

.cesms {
  width: 28px;
  height: 28px;
  display: none;
}

.g {
  display: none;
}

.code-embed-2 {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
}

.ts {
  grid-column-gap: 1px;
  grid-row-gap: 1px;
  border: 0 solid #a4b6c42e;
  border-radius: 4px;
  flex-flow: column;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  display: flex;
  overflow: hidden;
}

.tsrow {
  color: #2c3556;
  text-align: center;
  background-color: #edf2f5;
  border-bottom: 1px solid #a4b6c42e;
  height: 44px;
  font-weight: 400;
}

.tsrow:hover {
  background-color: #f7f9fa;
}

.text-block-8 {
  color: #2c3556;
}

.spc {
  padding-top: 16px;
  padding-bottom: 16px;
}

.tsrowhe {
  color: #2b2b2b;
  background-color: #e3c39d;
  height: 44px;
}

.btnicon {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #f4f4f4;
  background-color: #2b2f42;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding-left: 12px;
  padding-right: 16px;
  font-size: 16px;
  text-decoration: none;
  display: flex;
}

.btnicon:hover {
  box-shadow: none;
  color: #f7931e;
}

.sptool {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  padding-top: 12px;
  padding-bottom: 12px;
  display: flex;
}

.div-block-23 {
  justify-content: center;
  align-items: center;
  height: 44px;
  display: flex;
}

.spl {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  white-space: nowrap;
  display: flex;
}

.txtg {
  color: #7f86a0;
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.btnicon-ol {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #2b2f42;
  background-color: #edf2f5;
  border: 2px solid #2c3556;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding-left: 12px;
  padding-right: 16px;
  font-size: 16px;
  text-decoration: none;
  display: flex;
}

.btnicon-ol:hover {
  box-shadow: none;
  color: #f7931e;
  border-color: #f7931e;
}

.div-block-24 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: column;
  display: flex;
}

.form-block-2 {
  margin-bottom: 0;
}

.text-field {
  color: #2b2f42;
  background-color: #f7f9fa;
  border: 2px solid #2b2f42;
  border-radius: 12px 0 0 12px;
  height: 44px;
  font-size: 16px;
}

.text-field:hover {
  border-color: #f7931e;
}

.text-field:focus {
  background-color: #fff;
  border-color: #fdbb6d;
}

.submit-button-2 {
  background-color: #2b2f42;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  height: 44px;
  font-size: 16px;
}

.submit-button-2:hover {
  color: #f7931e;
}

.form-2 {
  display: flex;
}

.zbtnm {
  z-index: 1;
  color: var(--colort1);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.zbtnm:hover {
  color: #f7931e;
}

.za {
  z-index: 0;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.sbhs {
  background-color: #1a1c29;
  height: 0;
  overflow: hidden;
}

.mg {
  position: relative;
}

.sb-mr-e {
  color: var(--colort1);
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.sb-mr-e:hover {
  background-color: #2b2b2b2e;
}

.cea {
  width: 28px;
  height: 28px;
}

.sb-mr-2 {
  color: var(--colort1);
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.sb-mr-2:hover {
  color: #f7931e;
  background-color: #2b2b2b2e;
}

.div-block-25 {
  z-index: 10;
  background-color: #cf9f9f;
  width: 210px;
  position: relative;
  inset: 0% 0% 0% auto;
  transform: translate(133px);
}

.zaho {
  min-width: 64px;
  min-height: 64px;
  display: none;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.ddtg {
  justify-content: center;
  align-items: center;
  min-width: 64px;
  min-height: 64px;
  display: flex;
}

.ddtg:hover {
  color: #f7931e;
}

.ddl {
  z-index: 10;
}

.ddl.w--open {
  z-index: 11;
  background-color: #1a1c29;
  flex-flow: column;
  min-width: 210px;
  padding-right: 0;
  display: flex;
  transform: translate(64px, -64px);
}

.ddm {
  position: fixed;
}

.sb-mr-fix {
  color: var(--colort1);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  min-height: 64px;
  text-decoration: none;
  display: flex;
}

.sb-mr-fix:hover {
  color: #f7931e;
  background-color: #2b2b2b2e;
}

.zi-fix {
  justify-content: center;
  align-items: center;
  width: 64px;
  min-width: 64px;
  height: 64px;
  display: flex;
}

.zi-fix.hm {
  color: #f4f4f4;
  width: 44px;
  min-width: 44px;
}

.zi-fix.hm:hover {
  color: #f7931e;
}

.ddlr {
  color: #fff;
  justify-content: flex-start;
  align-items: center;
  height: 64px;
  text-decoration: none;
  display: flex;
}

.ddlr:hover {
  color: #f7931e;
}

.gd {
  z-index: 20;
  background-color: #0006;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
  overflow: visible;
}

.dialog {
  background-color: #edf2f5;
  border: 0 solid #000;
  border-radius: 12px;
  width: 400px;
  max-width: 960px;
  padding: 0;
  position: relative;
  overflow: hidden;
}

.dialog-ttop {
  border-bottom: 1px solid #d9e1e5;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  padding-left: 24px;
  padding-right: 0;
  font-family: Anuphan, sans-serif;
  font-size: 18px;
  display: flex;
}

.dtrbtm {
  color: #333;
  background-color: #edf2f5;
  border: 0 solid #000;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  min-height: 63px;
  text-decoration: none;
  display: flex;
}

.dtrbtm:hover {
  color: #f7931e;
}

.txtb {
  font-size: 22px;
  font-weight: 700;
  line-height: 28px;
}

.form-block-3 {
  margin-bottom: 0;
}

.rowtxt {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  display: grid;
}

.txtf2 {
  color: #292424;
  background-color: #fffc;
  border-radius: 12px;
  height: 44px;
  margin-bottom: 0;
  font-size: 16px;
}

.txtf2:focus {
  border: 1px solid #000;
}

.dialog-cm {
  background-color: #edf2f5a8;
  border-top: 1px solid #cacaca;
  justify-content: flex-end;
  align-items: center;
  height: 72px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  position: absolute;
  inset: auto 0% 0%;
}

.btnform {
  background-color: #2b2f42;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 156px;
  height: 44px;
  display: flex;
}

.btnform:hover {
  color: #f7931e;
}

.dfs {
  overflow: auto;
}

.dialog-fs {
  max-height: calc(100vh - 244px);
  padding-top: 10px;
  padding-bottom: 82px;
  overflow: auto;
}

.ctm-customize {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-rows: auto;
  grid-template-columns: 1.618fr 1fr;
  grid-auto-columns: 1fr;
  min-height: calc(100vh - 88px);
  display: grid;
}

.zmu {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.framemb {
  border: 4px solid #000;
  border-radius: 44px;
  width: 267.92px;
  height: 580.824px;
  margin-top: 88px;
  position: sticky;
  top: 88px;
}

.toolb {
  justify-content: flex-start;
  align-items: center;
  min-height: 88px;
  display: flex;
}

.textarea {
  color: #2b2f42;
  background-color: #ffffffe6;
  border-radius: 12px;
  min-height: 30vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 16px;
}

.textarea:focus {
  border: 1px solid #2b2f42;
}

.txtlb {
  color: #221b1b;
}

.title2 {
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  margin-top: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.toolc {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 24px;
  display: flex;
}

.btncolor {
  background-color: #818181;
  border: 1px solid #666;
  border-radius: 24px;
  min-width: 48px;
  min-height: 48px;
}

.ctm2 {
  color: #f4f4f4;
  background-color: #edf2f5;
  padding: 44px 40px 0;
  font-family: Anuphan, sans-serif;
}

.zmo {
  z-index: 20;
  background-color: #7272728f;
  width: 210px;
  position: absolute;
  inset: 0% 0% 0% auto;
  transform: translate(138px);
}

.tbtm {
  background-color: #d3d3d3;
  justify-content: center;
  align-items: center;
  width: 210px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

.tbtmd {
  background-color: #c2bcbc;
  display: none;
}

.zmf {
  z-index: 901;
  background-color: #1a1c29;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 210px;
  height: auto;
  display: none;
  position: fixed;
  transform: translate(210px, -64px);
}

.div-block-36 {
  justify-content: center;
  align-items: center;
  height: 64px;
  display: flex;
}

.zml-c {
  z-index: 10;
  background-color: #6858586b;
  width: 64px;
  height: 64px;
  display: none;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.div-block-38 {
  background-color: #53393975;
  width: 210px;
  position: fixed;
  inset: 0% auto 0% 210px;
}

.zmf2 {
  z-index: 901;
  background-color: #1a1c29;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 210px;
  height: auto;
  display: flex;
  position: fixed;
  transform: translate(210px, -64px);
}

.mnh {
  z-index: 10;
  background-color: #85858575;
  justify-content: center;
  align-items: center;
  width: 64px;
  height: 64px;
  display: flex;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.mnhm {
  color: #ccc;
  justify-content: flex-start;
  align-items: center;
  height: 64px;
  display: flex;
}

.mnhc {
  background-color: #eeeeeef7;
  flex-flow: column;
  width: 210px;
  display: flex;
  position: fixed;
  transform: translate(0, -64px);
}

.lnr {
  color: #b1b1b1;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  display: flex;
}

.div-block-39 {
  width: 64px;
  height: 64px;
}

.zi2 {
  color: #e44e4e;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  min-height: 64px;
  display: flex;
}

.zi2.hm {
  color: #f4f4f4;
  width: 44px;
  min-width: 44px;
}

.zi2.hm:hover {
  color: #f7931e;
}

.zaho2 {
  z-index: 100;
  display: none;
  position: fixed;
  transform: translate(0, -64px);
}

.dropdown-toggle {
  color: var(--colort1);
  min-width: 64px;
  min-height: 64px;
  padding: 0;
}

.dropdown-toggle:hover {
  color: #f7931e;
}

.dropdown-list-2 {
  min-width: 210px;
}

.dropdown-list-2.w--open {
  transform: translate(64px, -64px);
}

.dropdown-link {
  justify-content: flex-start;
  align-items: center;
  min-width: 210px;
  min-height: 64px;
  display: flex;
}

.sb-mr-2-h {
  color: #f7931e;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  text-decoration: none;
  display: flex;
  position: relative;
}

.sb-mr-2-h:hover {
  color: #f7931e;
  background-color: #2b2b2b2e;
}

.rbtmrh {
  color: #fdbb6d;
  justify-content: center;
  align-items: center;
  height: 64px;
  padding-left: 12px;
  padding-right: 12px;
  text-decoration: none;
  display: flex;
}

.rbtmrh:hover {
  color: #f7931e;
}

.toolb-sticky {
  z-index: 10;
  background-color: #edf2f5;
  justify-content: flex-start;
  align-items: center;
  min-height: 88px;
  display: flex;
  position: sticky;
  top: 64px;
}

.inputa {
  color: #2b2f42;
  background-color: #ffffffe6;
  border-radius: 12px;
  min-height: 44px;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 16px;
}

.inputa:focus {
  border: 1px solid #2b2f42;
}

.set-t {
  color: #221b1b;
  min-width: 100px;
}

.raw-set {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 16px;
  display: flex;
}

.txt-in {
  color: #2b2f42;
  border-radius: 12px;
  height: 44px;
  margin-bottom: 0;
  font-size: 16px;
  position: relative;
}

.txt-in:focus {
  border: 1px solid #2b2f42;
}

.zpick {
  color: #221b1b;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  min-width: 64px;
  display: flex;
}

.sp {
  min-height: 64px;
}

.clcustomize {
  padding-bottom: 64px;
}

.zifm {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  display: flex;
}

.toolc2 {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.btniconp {
  background-color: #c9c9c9;
  border: 1px solid #c9c9c9;
  border-radius: 12px;
  min-width: 44px;
  min-height: 44px;
}

.txt-in-arrow {
  color: #2b2f42;
  border-radius: 12px;
  height: 44px;
  margin-bottom: 0;
  font-size: 16px;
  position: relative;
}

.txt-in-arrow:focus {
  border: 1px solid #2b2f42;
}

.text-block-10 {
  font-weight: 400;
}

.btnr {
  background-color: #2b2f42;
  border-radius: 6px;
  padding: 4px 12px;
  font-size: 12px;
}

.text-block-11 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.flexhori {
  justify-content: center;
  align-items: center;
  display: flex;
}

.ce24 {
  width: 24px;
  height: 24px;
}

.raw-setting {
  border-bottom: 1px solid #d4d7da;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  display: flex;
}

.txt-abel {
  color: #221b1b;
}

.btnicon-ol-tool {
  grid-column-gap: 6px;
  grid-row-gap: 6px;
  color: #2b2f42;
  background-color: #edf2f5;
  border: 2px solid #2c3556;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}

.btnicon-ol-tool:hover {
  box-shadow: none;
  color: #f7931e;
  border-color: #f7931e;
}

.hori {
  display: flex;
}

.txt-dt {
  color: #221b1b;
  justify-content: center;
  align-items: center;
  padding-right: 12px;
  display: flex;
}

.title2-usp {
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  margin-top: 44px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.title2-first {
  justify-content: flex-start;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
  display: flex;
}

.swoff {
  background-color: #c9c9c9;
  border: 2px solid #c9c9c9;
  border-radius: 20px;
  width: 60px;
  height: 30px;
}

.clw {
  background-color: #fff;
  border-radius: 20px;
  min-width: 26px;
  max-width: 26px;
  min-height: 26px;
  max-height: 26px;
  transition: all .333s cubic-bezier(.86, 0, .07, 1);
}

.swon {
  background-color: #f7931e;
  border: 2px solid #f7931e;
  border-radius: 20px;
  justify-content: flex-end;
  align-items: center;
  width: 60px;
  height: 30px;
  display: flex;
}

.pickcolor {
  background-color: #c9c9c9;
  border: 1px solid #c9c9c9;
  border-radius: 22px;
  min-width: 44px;
  min-height: 44px;
}

.swts {
  transition: all .333s cubic-bezier(.86, 0, .07, 1);
}

@media screen and (min-width: 1280px) {
  .framemb {
    width: 334.9px;
    height: 580.824px;
  }
}

@media screen and (max-width: 991px) {
  .div-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .div-block-2 {
    max-width: 64px;
  }

  .grid21, .grid421, .grid21-ori {
    grid-template-columns: 1fr 1fr;
  }

  .mf {
    grid-template-columns: 64px 1fr;
    height: 100vh;
  }

  .sb-h {
    height: var(--topbar);
  }

  .ddr {
    margin-right: 0;
  }

  .dropdown-list.w--open {
    right: 32px;
  }

  .s {
    transition: width .225s cubic-bezier(.445, .05, .55, .95);
  }

  .flmm {
    height: 64px;
    padding-left: 0;
    display: none;
  }

  .spl {
    flex-flow: wrap;
  }

  .ctm-customize {
    flex-flow: column;
    grid-template-columns: 1.618fr;
    display: flex;
  }

  .zmu {
    justify-content: center;
    align-items: flex-start;
  }

  .framemb {
    margin-top: 0;
  }

  .ctm2 {
    padding-bottom: 44px;
  }
}

@media screen and (max-width: 767px) {
  .div-block {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    display: grid;
  }

  .div-block-4 {
    margin-left: 0;
  }

  .div-block-5 {
    left: 0;
  }

  .ctm {
    padding-top: 24px;
  }

  .grid21, .grid421 {
    grid-column-gap: 22.5px;
    grid-row-gap: 22.5px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    margin-bottom: 22.5px;
  }

  .grid21-ori {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .mf {
    z-index: 9;
    grid-template-columns: 1fr;
  }

  .sb {
    left: var(--sidebarnegative);
    z-index: 10;
    width: var(--sidebar);
    transition: transform .333s, width;
    position: fixed;
    top: 0%;
    bottom: 0%;
    right: auto;
  }

  .ct {
    width: 100%;
  }

  .sb-h {
    inset: 0% auto auto 0%;
  }

  .cthd {
    left: 0;
  }

  .hf {
    z-index: 9;
    background-color: #000000d9;
    position: fixed;
    inset: 0%;
  }

  .form {
    width: 460px;
    min-width: 100px;
  }

  .ffc-2 {
    width: 460px;
  }

  .fl {
    display: none;
  }

  .l {
    width: 64px;
  }

  .s {
    z-index: 11;
    height: 100vh;
    margin-top: 0;
    transition-property: transform, width;
    transition-duration: .225s, .225s;
    transition-timing-function: cubic-bezier(.445, .05, .55, .95), cubic-bezier(.445, .05, .55, .95);
    position: fixed;
    inset: 0% auto 0% 0%;
    transform: none;
  }

  .c {
    width: 100%;
    padding-top: 64px;
    transition-duration: 0s;
  }

  .gf210 {
    width: 0;
    transition-duration: 0s;
  }

  .lm {
    position: static;
  }

  .flmm {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    padding-left: 0;
    display: flex;
  }

  .lmm {
    justify-content: space-between;
    align-items: center;
    max-width: 210px;
    display: flex;
  }

  .bqmh {
    color: #f4f4f4;
    justify-content: center;
    align-items: center;
    width: 64px;
    min-width: 64px;
    height: 64px;
    min-height: 64px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .bqm {
    color: #f4f4f4;
    background-color: #2c3556;
    justify-content: center;
    align-items: center;
    min-width: 64px;
    min-height: 64px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .g {
    z-index: 10;
    background-color: #0006;
    display: none;
    position: fixed;
    inset: 0%;
  }

  .qmt {
    color: #f4f4f4;
    justify-content: center;
    align-items: center;
    min-width: 64px;
    min-height: 64px;
    display: flex;
  }

  .dialog-fs {
    max-height: calc(100vh - 128px);
  }

  .ctm2 {
    padding-top: 24px;
  }
}

@media screen and (max-width: 479px) {
  .sb-mr {
    z-index: 10;
  }

  .zi.hm {
    display: none;
  }

  .ctm {
    padding-left: 33.3px;
    padding-right: 33.3px;
  }

  .grid21 {
    grid-column-gap: 22.5px;
    grid-row-gap: 22.5px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    margin-bottom: 22.5px;
  }

  .sptt {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .div-block-9-copy.hm {
    display: none;
  }

  .grid421 {
    grid-column-gap: 22.5px;
    grid-row-gap: 22.5px;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    margin-bottom: 22.5px;
  }

  .grid21-ori {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .form {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .ffc, .ffc-2 {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .fl {
    min-width: 210px;
    display: none;
  }

  .l {
    width: 64px;
  }

  .s {
    flex-flow: column;
    display: flex;
    transform: translate(-210px);
  }

  .lm {
    width: 64px;
    position: static;
  }

  .sbhs {
    z-index: 9;
    height: 0;
    position: relative;
  }

  .mg {
    z-index: 9;
  }

  .cea {
    transform: rotate(0);
  }

  .zi-fix.hm {
    display: none;
  }

  .txtb {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .dialog-fs {
    max-height: calc(100vh - 228px);
  }

  .ctm2 {
    padding-left: 33.3px;
    padding-right: 33.3px;
  }

  .zi2.hm {
    display: none;
  }
}

#Name-2.w-node-_9c2bbe61-d947-2e07-b402-0a3566d58ea7-66d58ea4, #w-node-_1a15c1fe-1eda-d046-d6f8-32e999384fbc-eac24f16 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}