@import"https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap";
@import"../font/font.css";

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 120%
}

*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

html {
  line-height: normal;
  -webkit-text-size-adjust: 100%
}

body {
  margin: 0
}

main {
  display: block
}

h1 {
  font-size: 2em;
  margin: .67em 0
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}

pre {
  font-family: monospace, monospace;
  font-size: 1em
}

a {
  background-color: rgba(0, 0, 0, 0);
  text-decoration: none
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}

b,
strong {
  font-weight: bolder
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em
}

small {
  font-size: 80%
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sub {
  bottom: -0.25em
}

sup {
  top: -0.5em
}

img {
  border-style: none
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0
}

button,
input {
  overflow: visible
}

button,
select {
  text-transform: none
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText
}

fieldset {
  padding: .35em .75em .625em
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}

progress {
  vertical-align: baseline
}

textarea {
  overflow: auto
}

[type=checkbox],
[type=radio] {
  box-sizing: border-box;
  padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto
}

[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}

details {
  display: block
}

summary {
  display: list-item
}

template {
  display: none
}

[hidden] {
  display: none
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0
}

ul,
ol {
  padding-inline-start: 1.5em
}

ul li::marker {
  font-size: 1em
}

ol,
ul,
li {
  margin: 0
}

hr {
  display: block;
  width: 100%;
  height: 1px;
  margin: 0;
  border: none;
  background-color: #000
}

section {
  position: relative
}

.btn {
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  cursor: pointer;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  font-size: 1.25rem;
  line-height: normal;
  height: 40px;
  line-height: 40px;
  text-transform: none;
  width: 100%;
  min-width: 120px;
  padding: 0 16px;
  color: var(--colorWhite);
  background-color: var(--colorSecond);
  font-weight: 500;
  border: none;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center
}

.btn.outline {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 500;
  background: #fff;
  color: var(--colorSecond);
  border: 1px solid var(--colorSecond);
  box-shadow: none;
  width: 100%
}

.btn.small {
  font-size: 1rem;
  line-height: normal;
  font-weight: 600;
  min-width: 150px;
  height: 44px;
  line-height: 44px
}

.btn.disabled,
.btn:disabled {
  background: var(--colorGray300);
  color: #667085;
  border-color: var(--colorGray300);
  cursor: unset
}

.btn.facebook {
  background: #2081e2;
  border-color: #2081e2;
  color: #fff;
  font-weight: bold
}

.btn.facebook i {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/ui/button/ico-fb.svg) center center no-repeat;
  background-size: auto 100%;
  margin-right: 10px
}

.btn.facebook:hover {
  background-color: #2e89ff;
  border-color: #2e89ff
}

.btn.download i {
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/ui/button/ico-download.svg) center center no-repeat;
  background-size: auto 100%;
  margin-right: 10px
}

.btn.red {
  color: #fff;
  background: var(--colorPrimary)
}

.btnTop {
  color: #a06c49;
  display: flex;
  align-items: center
}

.btnTop:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/ui/button/ico-top.svg) center center no-repeat;
  background-size: 100% auto;
  margin-right: 8px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

.btnTop:hover {
  color: var(--colorPrimary)
}

.link {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  column-gap: 12px
}

.link:after {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  position: relative;
  content: "";
  display: block;
  right: 0;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  position: relative;
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-color: var(--colorPrimary);
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg)
}

.link:hover:after {
  right: -10px
}

.link.white {
  color: #fff
}

.link.gray {
  color: #929292
}

.link.down {
  font-size: 1rem
}

@media(min-width: 1024px) {
  .link.down {
    font-size: 1.25rem
  }
}

.link.down:after {
  right: inherit
}

.link.down:hover {
  color: var(--colorPrimary)
}

a.btnBack {
  color: #a06c49;
  font-size: .875rem;
  line-height: normal;
  cursor: pointer;
  display: flex;
  align-items: center
}

@media(min-width: 1024px) {
  a.btnBack {
    font-size: 1.5625rem
  }
}

a.btnBack:before {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  position: relative;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-color: #a06c49;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  margin-right: 10px;
  left: 0px
}

a.btnBack:hover {
  color: var(--colorPrimary)
}

a.btnBack:hover:before {
  left: -10px
}

#btnLoadmore:after {
  right: inherit;
  top: -2px;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  -o-transform: rotate(225deg)
}

#btnLoadmore:hover {
  color: var(--colorPrimary);
  border-color: rgba(0, 0, 0, 0)
}

#btnLoadmore:hover:after {
  right: inherit;
  border-color: #fff
}

#btnFilter {
  cursor: pointer;
  overflow: hidden;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  background-color: #fff;
  width: 52px;
  height: 52px;
  border: 1px solid #d6d6d6;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, .1), 0px 1px 2px 0px rgba(16, 24, 40, .06);
  display: flex;
  align-items: center;
  justify-content: center
}

#btnFilter span {
  display: flex;
  flex-direction: column;
  row-gap: 6px
}

#btnFilter i {
  display: block;
  width: 16px;
  height: 2px;
  background-color: #424242;
  position: relative
}

#btnFilter i:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  content: "";
  display: block;
  overflow: hidden;
  border-radius: 24px;
  -webkit-border-radius: 24px;
  -moz-border-radius: 24px;
  -ms-border-radius: 24px;
  -o-border-radius: 24px;
  width: 7px;
  height: 7px;
  border: 2px solid #424242;
  background: #fff;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

#btnFilter i:first-child:before {
  left: -1px
}

#btnFilter i:last-child:before {
  left: 11px
}

#btnFilter:hover {
  background-color: #ffd6d6
}

#btnFilter:hover i {
  background-color: var(--colorPrimary)
}

#btnFilter:hover i:before {
  border-color: var(--colorPrimary);
  background-color: #ffd6d6
}

#btnFilter:hover i:first-child:before {
  left: 11px
}

#btnFilter:hover i:last-child:before {
  left: -1px
}

#btnFilter.active {
  background-color: var(--colorPrimary)
}

#btnFilter.active i {
  background-color: #fff
}

#btnFilter.active i:before {
  border-color: #fff;
  background-color: var(--colorPrimary)
}

#btnFilter.active i:first-child:before {
  left: 11px
}

#btnFilter.active i:last-child:before {
  left: -1px
}

body {
  position: relative
}

body.openedMenu {
  width: 100%;
  height: 100vh;
  overflow: hidden
}

.bHideArea {
  display: none;
  position: fixed;
  z-index: 94036;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5)
}

#btnMenu {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer
}

#btnMenu span {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  position: relative;
  width: 20px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0);
  overflow: hidden;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px;
  overflow: inherit
}

#btnMenu span:before,
#btnMenu span:after {
  content: "";
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  display: block;
  height: 2px;
  background-color: var(--colorBlack);
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  -ms-border-radius: 2px;
  -o-border-radius: 2px
}

#btnMenu span:before {
  width: 20px;
  top: 4px
}

#btnMenu span:after {
  width: 20px;
  bottom: 4px
}

#btnMenu.opened span:before,
#btnMenu.opened span:after {
  background-color: var(--colorPrimary) !important
}

#btnMenu.opened span:before {
  width: 100%;
  top: 0px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg)
}

#btnMenu.opened span:after {
  width: 100%;
  bottom: 0px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg)
}

@media(min-width: 1024px) {
  #btnMenu {
    display: none
  }
}

header {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  background-image: url(../img/ci/header/img-header-bg.png);
  position: relative;
  padding-top: 37.3%;
  background-size: 110% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 94035
}

header .tHead {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%
}

header p {
  text-align: center;
  font-size: 1.75rem;
  line-height: normal;
  font-weight: 500;
  color: var(--colorWhite);
  line-height: 28px
}

header .bHeader {
  position: relative;
  margin-inline: auto;
  width: calc(100% - 32px);
  display: flex;
  justify-content: center;
  align-items: center
}

@media(min-width: 768px) {
  header .bHeader {
    width: 90%
  }
}

@media(min-width: 1024px) {
  header .bHeader {
    max-width: 1280px
  }
}

footer {
  background-color: #fff;
  border-top: 1px solid var(--colorGray500);
  padding: 48px 0
}

@media(min-width: 768px) {
  footer {
    padding: 96px 0 48px
  }
}

footer .bFooter {
  margin-inline: auto;
  width: calc(100% - 32px);
  display: flex;
  justify-content: space-between;
  margin-bottom: 32px
}

@media(min-width: 768px) {
  footer .bFooter {
    width: 90%
  }
}

@media(min-width: 1024px) {
  footer .bFooter {
    max-width: 1280px
  }
}

@media(min-width: 768px) {
  footer .bFooter {
    margin-bottom: 64px
  }
}

footer .bCopyTerms {
  margin-inline: auto;
  width: calc(100% - 32px);
  display: flex;
  column-gap: 12px
}

@media(min-width: 768px) {
  footer .bCopyTerms {
    width: 90%
  }
}

@media(min-width: 1024px) {
  footer .bCopyTerms {
    max-width: 1280px
  }
}

footer .bCopyTerms .bTerms a {
  border-left: 1px solid var(--colorGray800);
  padding: 0 12px;
  color: var(--colorGray800)
}

footer .bCopyTerms .bTerms a:hover {
  color: var(--colorPrimary)
}

section#pPdpa {
  z-index: 94035;
  box-shadow: 0px -10px 10px rgba(0, 0, 0, .1);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding: 20px 0
}

section#pPdpa p {
  font-size: .875rem
}

section#pPdpa .bPdpa .bGroup {
  display: grid;
  grid-template-columns: 100%;
  grid-column-gap: 30px;
  justify-items: center
}

@media(min-width: 768px) {
  section#pPdpa .bPdpa .bGroup {
    grid-column-gap: 10%;
    justify-items: start;
    grid-template-columns: auto auto
  }
}

section#pPdpa .bPdpa .bGroup .bText {
  display: flex;
  align-items: center;
  margin-bottom: 16px
}

@media(min-width: 768px) {
  section#pPdpa .bPdpa .bGroup .bText {
    margin-bottom: 0
  }
}

section#pPdpa .bPdpa .bGroup .bText span {
  font-size: .875rem;
  line-height: normal;
  font-weight: 500;
  color: #a06c49;
  text-transform: uppercase
}

section#pPdpa .bPdpa .bGroup p {
  color: #a06c49;
  font-size: 1.125rem;
  line-height: normal
}

section#pPdpa .bPdpa .bBtn {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center
}

@media(min-width: 768px) {
  section#pPdpa .bPdpa .bBtn {
    justify-content: flex-end
  }
}

section#pPdpa .bPdpa .bPolicy {
  margin-bottom: 12px
}

@media(min-width: 768px) {
  section#pPdpa .bPdpa .bPolicy {
    margin-bottom: 0
  }
}

section#pPdpa .bPdpa .bPolicy a,
section#pPdpa .bPdpa .bPolicy span {
  font-weight: 400;
  font-size: .875rem;
  line-height: normal;
  text-decoration: underline;
  color: #a06c49
}

section#pPdpa .bPdpa .bPolicy span {
  margin: 0 4px
}

section#pPdpa .bPdpa .bPolicy a:hover {
  color: var(--colorPrimary)
}

.inputStyle,
.select>select,
input[list],
input[type=text],
input[type=password],
input[type=textarea],
textarea,
input[type=date],
input[type=month],
input[type=year],
input[type=email] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: "db_heaventround";
  font-weight: normal;
  line-height: normal;
  position: relative;
  width: 100%;
  outline: 0;
  border: 0;
  background-color: #fff;
  color: var(--colorGray900);
  line-height: 40px;
  overflow: hidden;
  border-bottom: 1px solid var(--colorGray600);
  font-size: 1rem;
  line-height: normal;
  font-weight: 400
}

.inputStyle::placeholder,
.select>select::placeholder,
input[list]::placeholder,
input[type=text]::placeholder,
input[type=password]::placeholder,
input[type=textarea]::placeholder,
textarea::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=year]::placeholder,
input[type=email]::placeholder,
.inputStyle:-ms-input-placeholder,
.select>select:-ms-input-placeholder,
input[list]:-ms-input-placeholder,
input[type=text]:-ms-input-placeholder,
input[type=password]:-ms-input-placeholder,
input[type=textarea]:-ms-input-placeholder,
textarea:-ms-input-placeholder,
input[type=date]:-ms-input-placeholder,
input[type=month]:-ms-input-placeholder,
input[type=year]:-ms-input-placeholder,
input[type=email]:-ms-input-placeholder,
.inputStyle::-ms-input-placeholder,
.select>select::-ms-input-placeholder,
input[list]::-ms-input-placeholder,
input[type=text]::-ms-input-placeholder,
input[type=password]::-ms-input-placeholder,
input[type=textarea]::-ms-input-placeholder,
textarea::-ms-input-placeholder,
input[type=date]::-ms-input-placeholder,
input[type=month]::-ms-input-placeholder,
input[type=year]::-ms-input-placeholder,
input[type=email]::-ms-input-placeholder {
  color: var(--colorGray400);
  opacity: 1
}

input[list],
input[type=text],
input[type=password],
input[type=textarea],
textarea,
input[type=date],
input[type=month],
input[type=year],
input[type=email] {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  resize: none
}

input[list]:disabled,
input[type=text]:disabled,
input[type=password]:disabled,
input[type=textarea]:disabled,
textarea:disabled,
input[type=date]:disabled,
input[type=month]:disabled,
input[type=year]:disabled,
input[type=email]:disabled {
  opacity: .6
}

input[list]:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=textarea]:focus,
textarea:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=year]:focus,
input[type=email]:focus {
  border-color: #f3c941
}

input[type=date] {
  border: 1px solid #d0d5dd;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.control {
  display: block;
  position: relative;
  padding: 4px 14px;
  cursor: pointer;
  padding-left: 30px;
  font-size: 1rem;
  line-height: normal
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%)
}

@media(min-width: 1024px) {
  .control input {
    top: 70%
  }
}

.control--checkbox.validate :after {
  content: "*";
  color: #a02018
}

.control--checkbox .control__indicator {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  height: 20px;
  width: 20px;
  background: url(../img/ui/form/ico-check.svg) center center no-repeat no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 0px
}

.control--checkbox input:checked~.control__indicator {
  background-image: url(../img/ui/form/ico-checked.svg)
}

.control--checkbox input:disabled~.control__indicator {
  opacity: .6
}

.control--checkbox input:disabled~.control__indicator:after {
  opacity: .6
}

.control--radio-time {
  height: 28px;
  color: var(--colorGray900);
  background-color: #f3c941
}

.control--radio-time .control__indicator {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid var(--colorGray400);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 0
}

.control--radio-time .control__indicator:after {
  content: "";
  position: absolute;
  display: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--colorWhite);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%)
}

.control--radio-time input:disabled~.control__indicator {
  opacity: .6
}

.control--radio-time input:disabled~.control__indicator:after {
  opacity: .6
}

.control--radio-time.time {
  color: var(--colorWhite);
  padding: 0px;
  display: flex;
  background-color: #f85b56
}

.control--radio {
  padding-left: 30px;
  color: var(--colorGray900)
}

.control--radio .control__indicator-time input:checked {
  background-color: #f85b56
}

.control--radio .control__indicator {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  background-color: #fff;
  border: 1px solid var(--colorGray400);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  left: 0
}

.control--radio input:checked~.control__indicator {
  border: 1px solid var(--colorSecond);
  background-color: green;
  width: 60px
}

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

.control--radio .control__indicator:after {
  content: "";
  position: absolute;
  display: none;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background: var(--colorWhite);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%)
}

.control--radio input:disabled~.control__indicator {
  opacity: .6
}

.control--radio input:disabled~.control__indicator:after {
  opacity: .6
}

.control--radio.time {
  color: var(--colorWhite);
  padding: 0px;
  display: flex;
  background-color: #f85b56
}

.select {
  position: relative;
  display: inline-block;
  width: 100%;
  background-color: #fff;
  cursor: pointer
}

.select>select {
  display: inline-block;
  cursor: pointer;
  border: 1px solid var(--colorGray600);
  background-color: rgba(0, 0, 0, 0);
  padding-right: 36px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 170%
}

.select>select::-ms-expand {
  display: none
}

.select>select:disabled {
  opacity: .5;
  pointer-events: none
}

.select:before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 0px;
  content: "";
  width: 40px;
  height: 100%;
  background: url(../img/ui/form/ico-arrow-select.svg) center center no-repeat
}

@media(min-width: 1024px) {
  .select:before {
    width: 40px
  }
}

.datalist {
  line-height: 33px
}

datalist {
  display: none
}

input::-webkit-calendar-picker-indicator {
  display: none;
  opacity: 0
}

textarea {
  height: 120px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--colorGray600);
  line-height: normal;
  overflow: scroll
}

input[type=date],
input[type=month],
input[type=year] {
  text-align: left
}

input[type=date]:before,
input[type=month]:before,
input[type=year]:before {
  content: "";
  display: block;
  z-index: 0;
  right: 16px;
  width: 40px;
  height: 100%;
  background: url(../img/ci/form/ico-calendar.svg) center center no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 0
}

input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=year]::-webkit-calendar-picker-indicator {
  display: block;
  opacity: 1;
  width: 40px;
  height: 100%;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 1;
  right: 0
}

input[type=date]::-webkit-date-and-time-value,
input[type=month]::-webkit-date-and-time-value,
input[type=year]::-webkit-date-and-time-value {
  color: var(--colorGray900);
  text-align: left
}

input[type=password] {
  padding-right: 36px
}

.controlPass {
  position: relative
}

.controlPass .btnshowPass {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 7px;
  color: var(--colorGray300);
  width: 40px;
  height: 100%;
  overflow: hidden;
  text-indent: -999px;
  background: url(../img/ui/form/ico-invisible.svg) center center no-repeat
}

@media(min-width: 1024px) {
  .controlPass .btnshowPass {
    width: 40px
  }
}

.controlPass .btnshowPass:hover {
  color: var(--colorPrimary)
}

.controlPass .btnshowPass.show {
  background-image: url(../img/ui/form/ico-visibility.svg)
}

.checkboxPDPA {
  display: flex;
  align-items: flex-start;
  flex-direction: column
}

.checkboxPDPA .control {
  line-height: 28px
}

.checkboxPDPA .control input {
  top: 50%
}

.checkboxPDPA .bText a:hover {
  color: var(--colorSecond)
}

.bCaptcha {
  margin-bottom: 25px
}

.bCaptcha>img {
  width: 100%;
  max-width: 300px;
  height: auto
}

@media(min-width: 1024px) {
  .bCaptcha>img {
    width: 360px
  }
}

.control-group [data-content]:after {
  content: attr(data-content);
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  right: 20px;
  color: var(--colorSecond)
}

.control-group [data-content] input {
  padding-right: 20%
}

.control-group .floating-label {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  display: block;
  position: absolute;
  opacity: 0;
  top: -10px;
  left: 0px;
  font-size: .75rem;
  line-height: normal;
  color: var(--colorGray500);
  white-space: nowrap
}

.control-group .form-control:placeholder-shown+.floating-label {
  visibility: hidden;
  z-index: -1;
  transition: .2s ease-in-out;
  -webkit-transition: .2s ease-in-out;
  -moz-transition: .2s ease-in-out;
  -ms-transition: .2s ease-in-out;
  -o-transition: .2s ease-in-out
}

.control-group .form-control:not(:placeholder-shown)+.floating-label,
.control-group .form-control:focus:not(:placeholder-shown)+.floating-label {
  visibility: visible;
  z-index: 1;
  opacity: 1;
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out
}

.bForm {
  width: 100%;
  display: grid;
  grid-template-columns: 100%;
  grid-row-gap: 32px
}

.bForm>*:last-child {
  margin-bottom: 0
}

.bForm .bRow {
  display: flex;
  column-gap: 16px
}

.bForm .bRow.radio {
  display: flex;
  flex-direction: column;
  font-size: .875rem;
  line-height: normal;
  font-weight: 600;
  color: var(--colorGray600)
}

.bForm .bRow.radio .tChoice {
  display: flex
}

.bForm .control-group {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  row-gap: 8px
}

.bForm .control-group.question {
  row-gap: 0px
}

.bForm .control-group [class*=tTitle] {
  font-size: .875rem;
  line-height: normal;
  font-weight: 600;
  color: var(--colorGray600)
}

.bForm .control-group [class*=tTitle] span {
  display: inline
}

.bForm .control-group.validate [class*=tTitle]:after {
  content: "*";
  color: #a02018
}

.bForm .control-group.error input,
.bForm .control-group.error select {
  border-color: #a02018
}

.bForm .control-group.error label.tError {
  display: flex
}

.bForm .control-group.error label.tError:before {
  display: none
}

.bForm .control-group.pdpa .control__indicator {
  top: 48%
}

.bForm .control-group.pdpa p {
  color: var(--colorGray900);
  font-size: .875rem;
  line-height: normal;
  font-weight: 400
}

.bForm .control-group.pdpa p::after {
  content: "*";
  color: #a02018
}

.bForm .control-group.pdpa p a {
  text-decoration: underline;
  color: var(--colorGray900);
  font-weight: 500
}

.bForm .control-group.pdpa.error>.tError {
  display: flex
}

.bForm .control-group.pdpa.error>.tError:before {
  display: block
}

.bForm .control-group>p {
  font-size: .75rem;
  line-height: normal;
  color: var(--colorGray700)
}

.bForm .control-group.question .tTitle {
  color: var(--colorSecond);
  font-size: 1rem;
  line-height: normal;
  font-weight: 600;
  text-align: center;
  row-gap: 0px;
  margin-bottom: 16px
}

.bForm .tError {
  display: none;
  font-size: .75rem;
  line-height: normal;
  color: #a02018;
  font-weight: 300;
  display: none;
  align-items: center;
  column-gap: 8px
}

.bForm .tError:before {
  content: "";
  display: block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(../img/ui/form/ico-error.svg) center center no-repeat;
  background-size: contain
}

.bForm.error>.tError {
  display: flex
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

.jBox-wrapper {
  z-index: 99999 !important
}

.jBox-overlay {
  z-index: 99998 !important;
  background-color: rgba(0, 0, 0, .5)
}

.jBox-Modal .jBox-container {
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: rgba(0, 0, 0, 0)
}

.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
  box-shadow: none
}

.jBox-Modal .jBox-content {
  padding: 0 !important;
  margin: 0 auto !important
}

.jBox-closeButton-box .jBox-closeButton {
  width: 30px;
  height: 30px;
  background-size: 70% auto;
  background-color: rgba(0, 0, 0, .25);
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

.jBox-closeButton-box .jBox-closeButton:hover {
  background-color: var(--colorSecond)
}

.jBox-closeButton-box .jBox-closeButton svg {
  display: none
}

.bModal {
  display: none;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0);
  margin: 0px;
  -webkit-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  -moz-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  box-shadow: 0px 0px 10px rgba(16, 50, 90, .2)
}

.bModal.bCard {
  padding: 0;
  background-color: #fff;
  padding: 42px 33px;
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

.bModal.bCard .bInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 16px
}

.bModal.bCard .bInner p {
  font-size: 1.125rem;
  line-height: normal;
  color: var(--colorGray800);
  font-weight: 600
}

.bModal.bCard .bInner .bDetail {
  text-align: center
}

.bModal.bCard .bInner .bDetail .detail {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600);
  font-weight: 400
}

.bModal.bCard .bInner .modlaBtn {
  cursor: pointer;
  background-color: var(--colorPrimary);
  text-align: center;
  width: 100%;
  padding: 10px 24px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bModal.bCard .bInner .modlaBtn .confirmBtn {
  color: #000;
  font-weight: 600;
  width: 100%
}

.bModal.bCard .bInner .bBtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

.bModal.bCard .bTitle {
  color: var(--colorThird);
  text-align: center
}

.bModal.bCard .bTitle .bPdpa p {
  text-align: left
}

.bModal.bCard .bTitle .bPdpa .tPdpa {
  text-align: left
}

.bModal.bCard .bTitle span {
  font-size: 1.75rem;
  line-height: normal;
  display: block;
  font-weight: bold;
  margin-bottom: 8px
}

.bModal.bCard .bTitle img {
  width: 122px;
  height: 110px;
  margin-bottom: 16px
}

.bModal.bCard .bTitle p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 400
}

.bModal.bCard .bDetails {
  text-align: center;
  color: var(--colorGray900);
  line-height: 160%
}

.bModal.bCard .bText {
  margin-bottom: 24px;
  text-align: center
}

.bModal.bCard .bText p {
  font-size: 1.125rem;
  line-height: normal
}

@media(min-width: 768px) {
  .bModal.bCard .bText p {
    font-size: 1.25rem;
    line-height: normal
  }
}

.bModal.VDO .bYoutube {
  width: 70vw;
  padding-top: 56.25%
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .bModal.VDO .bYoutube {
    width: 80vw
  }
}

@media(max-width: 767px) {
  .bModal.VDO .bYoutube {
    width: 90vw;
    padding: 0 20px;
    padding-top: 56.25%
  }
}

.bModal.VDO iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block
}

.bModal.Image .bPic {
  width: 90vw
}

@media(min-width: 768px) {
  .bModal.Image .bPic {
    width: 80vw
  }
}

.bModal.Image a {
  color: #fff;
  margin-top: 16px
}

.bModal.Image img {
  height: auto;
  width: 100%;
  margin: 0 auto
}

@media(min-width: 768px) {
  .bModal.Image img {
    width: auto;
    max-height: 80vh
  }
}

a.btnCloseModalIcon {
  overflow: hidden;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 8px;
  right: 8px
}

#ModalFilter.bCard {
  padding: 24px 16px
}

#ModalFilter.bCard .bInner {
  row-gap: 0
}

#ModalFilter .bFilterForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#ModalFilter .bBtn {
  display: flex;
  column-gap: 16px
}

#ModalConfirm .bCard,
#ModalConfirm .bInner,
#ModalCancel .bCard,
#ModalCancel .bInner,
#ModalEditConfirm .bCard,
#ModalEditConfirm .bInner,
#ModalEditCancel .bCard,
#ModalEditCancel .bInner {
  row-gap: 24px
}

#ModalConfirm .bCard .group-Btn,
#ModalConfirm .bInner .group-Btn,
#ModalCancel .bCard .group-Btn,
#ModalCancel .bInner .group-Btn,
#ModalEditConfirm .bCard .group-Btn,
#ModalEditConfirm .bInner .group-Btn,
#ModalEditCancel .bCard .group-Btn,
#ModalEditCancel .bInner .group-Btn {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%
}

#ModalConfirm .bCard .tDetail,
#ModalConfirm .bInner .tDetail,
#ModalCancel .bCard .tDetail,
#ModalCancel .bInner .tDetail,
#ModalEditConfirm .bCard .tDetail,
#ModalEditConfirm .bInner .tDetail,
#ModalEditCancel .bCard .tDetail,
#ModalEditCancel .bInner .tDetail {
  text-align: center
}

#ModalConfirm .bCard .tDetail p:last-child,
#ModalConfirm .bInner .tDetail p:last-child,
#ModalCancel .bCard .tDetail p:last-child,
#ModalCancel .bInner .tDetail p:last-child,
#ModalEditConfirm .bCard .tDetail p:last-child,
#ModalEditConfirm .bInner .tDetail p:last-child,
#ModalEditCancel .bCard .tDetail p:last-child,
#ModalEditCancel .bInner .tDetail p:last-child {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600)
}

#ModalConfirm .bCard .modlaBtn.outline,
#ModalConfirm .bInner .modlaBtn.outline,
#ModalCancel .bCard .modlaBtn.outline,
#ModalCancel .bInner .modlaBtn.outline,
#ModalEditConfirm .bCard .modlaBtn.outline,
#ModalEditConfirm .bInner .modlaBtn.outline,
#ModalEditCancel .bCard .modlaBtn.outline,
#ModalEditCancel .bInner .modlaBtn.outline {
  background-color: #fff;
  border: 1px solid var(--colorSecond)
}

#ModalConfirm .bCard .modlaBtn.outline a,
#ModalConfirm .bInner .modlaBtn.outline a,
#ModalCancel .bCard .modlaBtn.outline a,
#ModalCancel .bInner .modlaBtn.outline a,
#ModalEditConfirm .bCard .modlaBtn.outline a,
#ModalEditConfirm .bInner .modlaBtn.outline a,
#ModalEditCancel .bCard .modlaBtn.outline a,
#ModalEditCancel .bInner .modlaBtn.outline a {
  color: var(--colorSecond)
}

#ModalConfirm .bBtn,
#ModalCancel .bBtn,
#ModalEditConfirm .bBtn,
#ModalEditCancel .bBtn {
  display: flex;
  column-gap: 16px
}

.bOtp {
  width: 100%;
  padding: 0
}

.bOtp>p {
  text-align: center;
  color: var(--colorGray600);
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .control-group.otp {
  display: flex;
  column-gap: 10px;
  justify-content: center;
  margin-bottom: 24px
}

.bOtp .bFrom .control-group.otp input[type=text] {
  max-width: 48px;
  height: 48px;
  text-align: center;
  font-size: 1.125rem;
  line-height: normal;
  font-weight: 600;
  padding: 0
}

.bOtp .bFrom .control-group.otp input::-webkit-outer-spin-button,
.bOtp .bFrom .control-group.otp input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.bOtp .bFrom .control-group.otp input[type=number] {
  -moz-appearance: textfield
}

.bOtp .bFrom .bTextSend {
  margin-bottom: 12px;
  text-align: center;
  color: var(--colorGray500)
}

.bOtp .bFrom .bTextSend p {
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .bTextSend a {
  color: var(--colorSecond);
  font-weight: 600;
  text-decoration: none
}

.bOtp .bFrom .tError {
  display: none;
  color: #f85b56;
  font-weight: 300;
  align-items: center;
  justify-content: center;
  column-gap: 8px
}

.bOtp .bFrom .tError:before {
  content: "";
  display: block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(../img/ui/form/ico-error.svg) center center no-repeat;
  background-size: contain
}

.bOtp .bFrom.error .control-group input {
  border-color: var(--colorSecond)
}

.bOtp .bFrom.error .tError {
  display: flex
}

.bOtp .bBtn {
  display: flex;
  align-content: center;
  flex-direction: column
}

.bOtp .bBtn span {
  font-size: .875rem;
  line-height: normal;
  color: #a06c49;
  text-align: center;
  margin: 12px 0
}

.bOtp .bBtn .btn {
  max-width: 260px;
  max-width: max-content;
  margin: 0 auto
}

#pageBooking-detail #pBookingDetail .bBookingDetail {
  padding: 20px 0px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #343a40
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead p {
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 700
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead a {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 16px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead a::before {
  content: url(../img/ci/booking/edit.svg);
  position: relative;
  top: 2px;
  margin-right: 5px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(0deg, #F9DEB3 -8.73%, #CD8C48 73.15%, #DFAE75 87.53%, #F8F3CB 109.45%);
  border-radius: 22px;
  row-gap: 16px;
  margin-top: 12px;
  margin-bottom: 20px;
  padding: 4px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background-color: #fff;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  row-gap: 16px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail {
  display: flex;
  justify-content: space-between
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail p {
  font-size: 1.25rem;
  line-height: normal;
  color: #343a40
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail .bold {
  font-weight: 700;
  color: #1d2939
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .bNote p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .bNote .tNote p {
  font-weight: 400
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn {
  display: flex;
  flex-direction: column;
  align-items: center
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn .btn {
  width: 153px;
  margin-bottom: 4px;
  font-size: 20px;
  text-transform: none
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn p {
  font-size: 1.25rem;
  line-height: normal;
  color: #1d2939
}

#pageBooking-detail #pActionBtn .bBtn .btn {
  width: 153px
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

body {
  font-family: "Inter"
}

#confirmModal {
  background-color: #fff;
  position: relative;
  padding: 60px 0px 0px 0px
}

#confirmModal p {
  font-family: "db_heaventround"
}

#confirmModal .closeBtn {
  position: absolute;
  width: 44px;
  height: 44px;
  background-image: url(../img/ci/booking/ico-close.svg);
  top: 18px;
  right: 18px
}

#confirmModal .bInner-calendarDetail .bTitle {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding: 0px 40px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: 0px !important;
  margin-bottom: 0px !important
}

#confirmModal .bInner-calendarDetail .bTitle .bHead h2 {
  font-weight: 600;
  font-size: 32px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead p {
  font-size: 16px;
  color: #667085
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon {
  display: flex;
  align-items: center
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon .iconLine {
  background-image: url(../img/ci/booking/ico-lineIcon.svg);
  display: block;
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  margin-right: 12px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon a {
  padding: 8px 12px;
  background-color: #2ccf54;
  color: #fff;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .iconCopy {
  background-image: url(../img/ci/booking/ico-copyIcon.svg);
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail {
  display: flex;
  justify-content: start;
  align-items: center
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .icon {
  background-image: url(../img/ci/booking/ico-user.svg);
  background-size: contain;
  display: block;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  margin-right: 12px
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName {
  display: flex;
  flex-direction: column;
  align-items: start
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName p {
  font-size: 16px
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName p:last-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--colorSecond)
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  row-gap: 16px
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail p {
  text-align: start
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail .tBold {
  text-align: end;
  font-size: 20px;
  font-weight: 700
}

#confirmModal .bInner-calendarDetail .bBtn {
  display: flex;
  justify-content: end;
  margin-top: 24px;
  border-top: 1px solid #eaecf0;
  padding: 24px 17px 16px
}

#confirmModal .bInner-calendarDetail .bBtn button {
  padding: 8px 31px;
  color: var(--colorSecond);
  overflow: hidden;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border: 1px solid #d0d5dd;
  background-color: #fff
}

#confirmModal-cancel {
  font-family: "db_heaventround";
  position: relative;
  padding: 47px 45px 40px
}

#confirmModal-cancel .closeBtn {
  position: absolute;
  width: 44px;
  height: 44px;
  background-image: url(../img/ci/booking/ico-close.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  top: 18px;
  right: 18px
}

#confirmModal-cancel .bTitle span {
  font-size: 40px
}

#confirmModal-cancel .bBtn button {
  font-size: 20px
}

#confirmModal-cancel .bBtn .bCancelMeeting {
  color: #a02018;
  font-size: 20px;
  text-align: center
}

.custom-calendar {
  padding: 0px 80px 80px
}

.rbc-event {
  background-color: #fff;
  color: #1d2939;
  display: flex;
  align-items: center;
  font-weight: 400
}

.rbc-event:before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #a02018;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  display: block;
  margin-right: 8px
}

.rbc-today {
  background-color: #fff !important
}

.rbc-today .rbc-event {
  background-color: #a02018
}

.rbc-day-bg {
  cursor: pointer;
  padding: 16px
}

.rbc-day-bg.rbc-off-range-bg {
  cursor: default;
}

.closeBtn {
  cursor: pointer;
}

.tAddMeeting {
  margin-top: -10px;
  text-align: left;
}

.p-dropdown {
  border: 1px solid #d1d5db;
  height: 44.39px
}

.p-dropdown.p-invalid{
  border: 1px solid #e24c4c;
}

span.p-dropdown-label {
  font-size: 16px !important;
  margin-left: 10px;
  margin-top: 12px;
  font-weight: normal !important;
}

.btnCloseAdd {
  cursor: pointer;
}

.btnAddModal {
  justify-content : center !important;
}
.txtAddMeet {
  width: 100%;
}

.txe-help {
  color: red;
}

.rbc-toolbar-label {
  font-size: 32px;
  font-weight: 600;
  color: #1d2939
}

.rbc-toolbar {
  margin-bottom: 52px
}

.rbc-btn-group button {
  background-color: #fff
}

.rbc-timeslot-group {
  padding: 8px 33px 8px;
  min-height: 107px
}

.rbc-timeslot-group .rbc-time-slot span {
  font-size: 16px;
  font-weight: 600
}

.rbc-label {
  min-width: 99px;
  color: #667085
}

.rbc-day-slot .rbc-event {
  background-color: #ffebee;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border: none;
  border-left: 3px solid var(--colorSecond) !important
}

.rbc-day-slot .rbc-event:before {
  display: none
}

.rbc-events-container .rbc-event {
  padding: 20px 14px;
  width: 100%
}

.rbc-events-container .rbc-event .rbc-event-label {
  width: 100%;
  font-size: 16px;
  color: #1d2939;
  margin-bottom: 8px
}

.rbc-events-container .rbc-event .rbc-event-content {
  width: 100%;
  font-size: 16px;
  color: #667085
}

.rbc-time-view .rbc-row {
  min-height: auto
}

.rbc-time-view .rbc-row .rbc-header {
  padding: 12px
}

.rbc-time-view .rbc-row .rbc-header span {
  color: #667085;
  font-size: 20px;
  font-weight: 600
}

.rbc-month-header .rbc-header {
  padding: 12px;
  font-size: 20px;
  font-weight: 600
}

.rbc-month-header .rbc-header span {
  color: #667085
}

.rbc-date-cell button {
  font-size: 16px;
  font-weight: 600;
  color: #1d2939;
  margin: 8px 12px 0px 0px
}

.rbc-off-range button {
  font-size: 16px;
  font-weight: 600;
  color: #98a2b3;
  margin: 8px 12px 0px 0px
}

.bHead {
  color: #1d2939;
  margin: 27px 0px 29px;
  display: flex;
  align-items: center
}

.bHead .iconBurger {
  background-image: url(../img/ci/header/ico-burger.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  width: 39px;
  height: 39px;
  margin: 20px
}

.bHeaderActiont {
  display: flex;
  justify-content: space-between;
  padding: 0px 80px 16px
}

.bHeaderActiont .bDoctorSearch .control-group {
  width: 200px
}

.bHeaderActiont .bDoctorSearch .control-group .select {
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bHeaderActiont .bDoctorSearch .control-group .select select {
  padding: 4px 14px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bHeaderActiont .bDownload {
  display: flex;
  column-gap: 10px
}

.bHeaderActiont .bDownload .btn {
  max-height: 50px
}

.bHeaderActiont .bDownload .import {
  background-color: #23336b;
  font-size: 18px;
  text-transform: none;
  padding: 16px 28px
}

.bHeaderActiont .bDownload .import:before {
  content: "";
  background-image: url(../img/ci/header/ico-import.svg);
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 12px
}

.bHeaderActiont .bDownload .export {
  color: #23336b;
  background-color: #f0dc8d;
  font-size: 18px;
  text-transform: none;
  padding: 16px 28px
}

.bHeaderActiont .bDownload .export:before {
  content: "";
  background-image: url(../img/ci/header/ico-export.svg);
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 12px
}

.jBox-wrapper {
  z-index: 99999 !important
}

.jBox-overlay {
  z-index: 99998 !important;
  background-color: rgba(0, 0, 0, .5)
}

.jBox-Modal .jBox-container {
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: rgba(0, 0, 0, 0)
}

.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
  box-shadow: none
}

.jBox-Modal .jBox-content {
  padding: 0 !important;
  margin: 0 auto !important
}

.jBox-closeButton-box .jBox-closeButton {
  width: 30px;
  height: 30px;
  background-size: 70% auto;
  background-color: rgba(0, 0, 0, .25);
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

.jBox-closeButton-box .jBox-closeButton:hover {
  background-color: var(--colorSecond)
}

.jBox-closeButton-box .jBox-closeButton svg {
  display: none
}

.bModal {
  display: none;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0);
  margin: 0px;
  -webkit-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  -moz-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  box-shadow: 0px 0px 10px rgba(16, 50, 90, .2)
}

.bModal.bCard {
  padding: 0;
  background-color: #fff;
  padding: 42px 33px;
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

.bModal.bCard .bInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 16px
}

.bModal.bCard .bInner p {
  font-size: 1.125rem;
  line-height: normal;
  color: var(--colorGray800);
  font-weight: 600
}

.bModal.bCard .bInner .bDetail {
  text-align: center
}

.bModal.bCard .bInner .bDetail .detail {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600);
  font-weight: 400
}

.bModal.bCard .bInner .modlaBtn {
  cursor: pointer;
  background-color: var(--colorPrimary);
  text-align: center;
  width: 100%;
  padding: 10px 24px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bModal.bCard .bInner .modlaBtn .confirmBtn {
  color: #000;
  font-weight: 600;
  width: 100%
}

.bModal.bCard .bInner .bBtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

.bModal.bCard .bTitle {
  color: var(--colorThird);
  text-align: center
}

.bModal.bCard .bTitle .bPdpa p {
  text-align: left
}

.bModal.bCard .bTitle .bPdpa .tPdpa {
  text-align: left
}

.bModal.bCard .bTitle span {
  font-size: 1.75rem;
  line-height: normal;
  display: block;
  font-weight: bold;
  margin-bottom: 8px
}

.bModal.bCard .bTitle img {
  width: 122px;
  height: 110px;
  margin-bottom: 16px
}

.bModal.bCard .bTitle p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 400
}

.bModal.bCard .bDetails {
  text-align: center;
  color: var(--colorGray900);
  line-height: 160%
}

.bModal.bCard .bText {
  margin-bottom: 24px;
  text-align: center
}

.bModal.bCard .bText p {
  font-size: 1.125rem;
  line-height: normal
}

@media(min-width: 768px) {
  .bModal.bCard .bText p {
    font-size: 1.25rem;
    line-height: normal
  }
}

.bModal.VDO .bYoutube {
  width: 70vw;
  padding-top: 56.25%
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .bModal.VDO .bYoutube {
    width: 80vw
  }
}

@media(max-width: 767px) {
  .bModal.VDO .bYoutube {
    width: 90vw;
    padding: 0 20px;
    padding-top: 56.25%
  }
}

.bModal.VDO iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block
}

.bModal.Image .bPic {
  width: 90vw
}

@media(min-width: 768px) {
  .bModal.Image .bPic {
    width: 80vw
  }
}

.bModal.Image a {
  color: #fff;
  margin-top: 16px
}

.bModal.Image img {
  height: auto;
  width: 100%;
  margin: 0 auto
}

@media(min-width: 768px) {
  .bModal.Image img {
    width: auto;
    max-height: 80vh
  }
}

a.btnCloseModalIcon {
  overflow: hidden;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 8px;
  right: 8px
}

#ModalFilter.bCard {
  padding: 24px 16px
}

#ModalFilter.bCard .bInner {
  row-gap: 0
}

#ModalFilter .bFilterForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#ModalFilter .bBtn {
  display: flex;
  column-gap: 16px
}

#ModalConfirm .bCard,
#ModalConfirm .bInner,
#ModalCancel .bCard,
#ModalCancel .bInner,
#ModalEditConfirm .bCard,
#ModalEditConfirm .bInner,
#ModalEditCancel .bCard,
#ModalEditCancel .bInner {
  row-gap: 24px
}

#ModalConfirm .bCard .group-Btn,
#ModalConfirm .bInner .group-Btn,
#ModalCancel .bCard .group-Btn,
#ModalCancel .bInner .group-Btn,
#ModalEditConfirm .bCard .group-Btn,
#ModalEditConfirm .bInner .group-Btn,
#ModalEditCancel .bCard .group-Btn,
#ModalEditCancel .bInner .group-Btn {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%
}

#ModalConfirm .bCard .tDetail,
#ModalConfirm .bInner .tDetail,
#ModalCancel .bCard .tDetail,
#ModalCancel .bInner .tDetail,
#ModalEditConfirm .bCard .tDetail,
#ModalEditConfirm .bInner .tDetail,
#ModalEditCancel .bCard .tDetail,
#ModalEditCancel .bInner .tDetail {
  text-align: center
}

#ModalConfirm .bCard .tDetail p:last-child,
#ModalConfirm .bInner .tDetail p:last-child,
#ModalCancel .bCard .tDetail p:last-child,
#ModalCancel .bInner .tDetail p:last-child,
#ModalEditConfirm .bCard .tDetail p:last-child,
#ModalEditConfirm .bInner .tDetail p:last-child,
#ModalEditCancel .bCard .tDetail p:last-child,
#ModalEditCancel .bInner .tDetail p:last-child {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600)
}

#ModalConfirm .bCard .modlaBtn.outline,
#ModalConfirm .bInner .modlaBtn.outline,
#ModalCancel .bCard .modlaBtn.outline,
#ModalCancel .bInner .modlaBtn.outline,
#ModalEditConfirm .bCard .modlaBtn.outline,
#ModalEditConfirm .bInner .modlaBtn.outline,
#ModalEditCancel .bCard .modlaBtn.outline,
#ModalEditCancel .bInner .modlaBtn.outline {
  background-color: #fff;
  border: 1px solid var(--colorSecond)
}

#ModalConfirm .bCard .modlaBtn.outline a,
#ModalConfirm .bInner .modlaBtn.outline a,
#ModalCancel .bCard .modlaBtn.outline a,
#ModalCancel .bInner .modlaBtn.outline a,
#ModalEditConfirm .bCard .modlaBtn.outline a,
#ModalEditConfirm .bInner .modlaBtn.outline a,
#ModalEditCancel .bCard .modlaBtn.outline a,
#ModalEditCancel .bInner .modlaBtn.outline a {
  color: var(--colorSecond)
}

#ModalConfirm .bBtn,
#ModalCancel .bBtn,
#ModalEditConfirm .bBtn,
#ModalEditCancel .bBtn {
  display: flex;
  column-gap: 16px
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pageTimeSelect .wrapContent {
  background-position: bottom;
  margin-top: -164px;
  height: auto
}

#pageTimeSelect .wrapContent #pTimeSelect {
  position: relative;
  padding-top: 160px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%;
  padding: 20px 0px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: var(--colorThird);
  font-weight: 500
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 16px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  border-radius: 22px;
  padding: 4px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect {
  border-radius: 16px;
  background: #fff;
  padding: 15px 20px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorName {
  display: flex;
  margin-bottom: 8px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorName img {
  box-shadow: 5px -5px 6px 0px rgba(51, 51, 51, .1) inset, 0px 3px 10px 0px rgba(136, 86, 21, .15);
  border-radius: 50px;
  width: 34px;
  height: 34px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorName .tName {
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorName .tName p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorName .tName .doctorPosition {
  font-size: 1rem;
  line-height: normal;
  font-weight: 400
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail {
  display: flex;
  align-items: center
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="1"] {
  border-right: 1px solid #d0d5dd;
  padding-right: 8px;
  color: #1d2939
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="1"]:before {
  content: url(../img/ci/register/ico-type1.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="2"] {
  padding-left: 8px;
  padding-right: 8px;
  color: #1d2939
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="2"]:before {
  content: url(../img/ci/register/ico-type2.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="3"] {
  border-left: 1px solid #d0d5dd;
  padding-left: 8px;
  color: #1d2939;
  color: #1d2939
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="3"]:before {
  content: url(../img/ci/register/ico-type3.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon1::before {
  content: url(../img/ci/register/ico-type1.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon2::before {
  content: url(../img/ci/register/ico-type2.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon3::before {
  content: url(../img/ci/register/ico-type3.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bChoice .bBorder .doctorSelect .doctorDetail .leftBorder {
  height: 18px;
  width: 1px;
  background-color: #d0d5dd;
  margin: 0 8px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  border-radius: 22px;
  padding: 4px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background: var(--Base-White, #fff);
  width: 100%;
  height: auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .daySelect {
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .daySelect p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  text-align: left
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .daySelect p::before {
  content: url(../img/ci/register/ico-calendar.svg);
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect {
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime {
  display: flex;
  align-items: center;
  column-gap: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .free {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .free::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  border: 1px solid #d0d5dd;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .noFree {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .noFree::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  background-color: #d0d5dd;
  border: 1px solid #d0d5dd;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .selectTime {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime .selectTime::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  background-color: var(--colorSecond);
  border: 1px solid var(--colorSecond);
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .bTime label {
  color: var(--colorThird);
  font-size: 1.125rem;
  line-height: normal;
  font-weight: 700
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect p::before {
  content: url(../img/ci/register/ico-clock.svg);
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio {
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--colorGray700);
  height: 36px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent {
  color: #2c1e1e;
  z-index: 1;
  position: relative;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent[data-time=day]::before {
  content: url(../img/ci/register/ico-time.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio .control__indicator {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  height: 36px;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--colorGray400);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 0
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio .control__indicator:after {
  display: none
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .tContent[data-time=day]::before {
  content: url(../img/ci/register/ico-time-disable-check.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .tContent[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night-dis.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .control__indicator {
  color: #667085;
  background-color: #d0d5dd;
  border: none
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span {
  color: #fff;
  z-index: 1;
  position: relative;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span[data-time=day]::before {
  content: url(../img/ci/register/ico-time-check.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night-select.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelect .wrapContent #pTimeSelect .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~.control__indicator {
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: none
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pageTimeSelectEdit .wrapContent {
  background-position: bottom;
  margin-top: -164px;
  height: 100vh
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit {
  position: relative;
  padding-top: 160px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%;
  padding: 20px 0px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  border-radius: 22px;
  padding: 4px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice {
  background: var(--Base-White, #fff);
  width: 100%;
  height: auto;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .daySelect {
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .daySelect p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  text-align: left
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .daySelect p::before {
  content: url(../img/ci/register/ico-calendar.svg);
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect {
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime {
  display: flex;
  align-items: center;
  column-gap: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .free {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .free::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  border: 1px solid #d0d5dd;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .noFree {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .noFree::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  background-color: #d0d5dd;
  border: 1px solid #d0d5dd;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .selectTime {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: normal
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime .selectTime::before {
  content: "";
  position: relative;
  top: 3px;
  margin-right: 8px;
  display: inline-block;
  background-color: var(--colorSecond);
  border: 1px solid var(--colorSecond);
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  width: 14px;
  height: 14px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .bTime label {
  color: var(--colorThird);
  font-size: 1.125rem;
  line-height: normal;
  font-weight: 700
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  text-align: left;
  display: flex;
  align-items: center
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect p::before {
  content: url(../img/ci/register/ico-clock.svg);
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio {
  padding: 0;
  display: flex;
  align-items: center;
  color: var(--colorGray700);
  height: 36px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent {
  color: #2c1e1e;
  z-index: 1;
  position: relative;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent[data-time=day]::before {
  content: url(../img/ci/register/ico-time.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio .tContent[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio .control__indicator {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  height: 36px;
  width: 100%;
  background-color: #fff;
  border: 1px solid var(--colorGray400);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  z-index: 0
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio .control__indicator:after {
  display: none
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .tContent[data-time=day]::before {
  content: url(../img/ci/register/ico-time-disable-check.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .tContent[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night-dis.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio.disabled .control__indicator {
  color: #667085;
  background-color: #d0d5dd;
  border: none
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span {
  color: #fff;
  z-index: 1;
  position: relative;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span[data-time=day]::before {
  content: url(../img/ci/register/ico-time-check.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~span[data-time=night]::before {
  content: url(../img/ci/register/ico-time-night-select.svg);
  position: relative;
  top: 3px;
  margin-right: 8px;
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bBorder .bBookingChoice .timeSelect .control--radio input:checked~.control__indicator {
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: none
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: var(--colorThird);
  font-weight: 500
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  row-gap: 16px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  border-radius: 22px;
  padding: 4px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect {
  border-radius: 16px;
  background: #fff;
  padding: 15px 20px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorName {
  display: flex;
  margin-bottom: 8px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorName img {
  box-shadow: 5px -5px 6px 0px rgba(51, 51, 51, .1) inset, 0px 3px 10px 0px rgba(136, 86, 21, .15);
  border-radius: 50px;
  width: 34px;
  height: 34px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorName .tName {
  margin-left: 12px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorName .tName p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorName .tName .doctorPosition {
  font-size: 1rem;
  line-height: normal;
  font-weight: 400
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail {
  display: flex;
  align-items: center
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="1"] {
  border-right: 1px solid #d0d5dd;
  padding-right: 8px;
  color: #1d2939
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="1"]:before {
  content: url(../img/ci/register/ico-type1.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="2"] {
  padding-left: 8px;
  padding-right: 8px;
  color: #1d2939
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="2"]:before {
  content: url(../img/ci/register/ico-type2.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="3"] {
  border-left: 1px solid #d0d5dd;
  padding-left: 8px;
  color: #1d2939;
  color: #1d2939
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail [data-docType="3"]:before {
  content: url(../img/ci/register/ico-type3.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon1::before {
  content: url(../img/ci/register/ico-type1.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon2::before {
  content: url(../img/ci/register/ico-type2.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail .icon3::before {
  content: url(../img/ci/register/ico-type3.svg);
  position: relative;
  margin-right: 4px;
  top: 2px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bContent .bChoice .bBorder .doctorSelect .doctorDetail .leftBorder {
  height: 18px;
  width: 1px;
  background-color: #d0d5dd;
  margin: 0 8px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bImage {
  margin-top: 32px;
  margin-bottom: 20px
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bImage h2 {
  color: var(--colorThird);
  text-align: center
}

#pageTimeSelectEdit .wrapContent #pTimeSelectEdit .bImage .meetingImg {
  background-image: url(../img/ci/register/ico-meeting.svg);
  background-repeat: no-repeat;
  background-size: contain;
  padding-top: 18.1%;
  background-position: center
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

.jBox-wrapper {
  z-index: 99999 !important
}

.jBox-overlay {
  z-index: 99998 !important;
  background-color: rgba(0, 0, 0, .5)
}

.jBox-Modal .jBox-container {
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: rgba(0, 0, 0, 0)
}

.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
  box-shadow: none
}

.jBox-Modal .jBox-content {
  padding: 0 !important;
  margin: 0 auto !important
}

.jBox-closeButton-box .jBox-closeButton {
  width: 30px;
  height: 30px;
  background-size: 70% auto;
  background-color: rgba(0, 0, 0, .25);
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

.jBox-closeButton-box .jBox-closeButton:hover {
  background-color: var(--colorSecond)
}

.jBox-closeButton-box .jBox-closeButton svg {
  display: none
}

.bModal {
  display: none;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0);
  margin: 0px;
  -webkit-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  -moz-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  box-shadow: 0px 0px 10px rgba(16, 50, 90, .2)
}

.bModal.bCard {
  padding: 0;
  background-color: #fff;
  padding: 42px 33px;
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

.bModal.bCard .bInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 16px
}

.bModal.bCard .bInner p {
  font-size: 1.125rem;
  line-height: normal;
  color: var(--colorGray800);
  font-weight: 600
}

.bModal.bCard .bInner .bDetail {
  text-align: center
}

.bModal.bCard .bInner .bDetail .detail {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600);
  font-weight: 400
}

.bModal.bCard .bInner .modlaBtn {
  cursor: pointer;
  background-color: var(--colorPrimary);
  text-align: center;
  width: 100%;
  padding: 10px 24px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bModal.bCard .bInner .modlaBtn .confirmBtn {
  color: #000;
  font-weight: 600;
  width: 100%
}

.bModal.bCard .bInner .bBtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

.bModal.bCard .bTitle {
  color: var(--colorThird);
  text-align: center
}

.bModal.bCard .bTitle .bPdpa p {
  text-align: left
}

.bModal.bCard .bTitle .bPdpa .tPdpa {
  text-align: left
}

.bModal.bCard .bTitle span {
  font-size: 1.75rem;
  line-height: normal;
  display: block;
  font-weight: bold;
  margin-bottom: 8px
}

.bModal.bCard .bTitle img {
  width: 122px;
  height: 110px;
  margin-bottom: 16px
}

.bModal.bCard .bTitle p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 400
}

.bModal.bCard .bDetails {
  text-align: center;
  color: var(--colorGray900);
  line-height: 160%
}

.bModal.bCard .bText {
  margin-bottom: 24px;
  text-align: center
}

.bModal.bCard .bText p {
  font-size: 1.125rem;
  line-height: normal
}

@media(min-width: 768px) {
  .bModal.bCard .bText p {
    font-size: 1.25rem;
    line-height: normal
  }
}

.bModal.VDO .bYoutube {
  width: 70vw;
  padding-top: 56.25%
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .bModal.VDO .bYoutube {
    width: 80vw
  }
}

@media(max-width: 767px) {
  .bModal.VDO .bYoutube {
    width: 90vw;
    padding: 0 20px;
    padding-top: 56.25%
  }
}

.bModal.VDO iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block
}

.bModal.Image .bPic {
  width: 90vw
}

@media(min-width: 768px) {
  .bModal.Image .bPic {
    width: 80vw
  }
}

.bModal.Image a {
  color: #fff;
  margin-top: 16px
}

.bModal.Image img {
  height: auto;
  width: 100%;
  margin: 0 auto
}

@media(min-width: 768px) {
  .bModal.Image img {
    width: auto;
    max-height: 80vh
  }
}

a.btnCloseModalIcon {
  overflow: hidden;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 8px;
  right: 8px
}

#ModalFilter.bCard {
  padding: 24px 16px
}

#ModalFilter.bCard .bInner {
  row-gap: 0
}

#ModalFilter .bFilterForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#ModalFilter .bBtn {
  display: flex;
  column-gap: 16px
}

#ModalConfirm .bCard,
#ModalConfirm .bInner,
#ModalCancel .bCard,
#ModalCancel .bInner,
#ModalEditConfirm .bCard,
#ModalEditConfirm .bInner,
#ModalEditCancel .bCard,
#ModalEditCancel .bInner {
  row-gap: 24px
}

#ModalConfirm .bCard .group-Btn,
#ModalConfirm .bInner .group-Btn,
#ModalCancel .bCard .group-Btn,
#ModalCancel .bInner .group-Btn,
#ModalEditConfirm .bCard .group-Btn,
#ModalEditConfirm .bInner .group-Btn,
#ModalEditCancel .bCard .group-Btn,
#ModalEditCancel .bInner .group-Btn {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%
}

#ModalConfirm .bCard .tDetail,
#ModalConfirm .bInner .tDetail,
#ModalCancel .bCard .tDetail,
#ModalCancel .bInner .tDetail,
#ModalEditConfirm .bCard .tDetail,
#ModalEditConfirm .bInner .tDetail,
#ModalEditCancel .bCard .tDetail,
#ModalEditCancel .bInner .tDetail {
  text-align: center
}

#ModalConfirm .bCard .tDetail p:last-child,
#ModalConfirm .bInner .tDetail p:last-child,
#ModalCancel .bCard .tDetail p:last-child,
#ModalCancel .bInner .tDetail p:last-child,
#ModalEditConfirm .bCard .tDetail p:last-child,
#ModalEditConfirm .bInner .tDetail p:last-child,
#ModalEditCancel .bCard .tDetail p:last-child,
#ModalEditCancel .bInner .tDetail p:last-child {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600)
}

#ModalConfirm .bCard .modlaBtn.outline,
#ModalConfirm .bInner .modlaBtn.outline,
#ModalCancel .bCard .modlaBtn.outline,
#ModalCancel .bInner .modlaBtn.outline,
#ModalEditConfirm .bCard .modlaBtn.outline,
#ModalEditConfirm .bInner .modlaBtn.outline,
#ModalEditCancel .bCard .modlaBtn.outline,
#ModalEditCancel .bInner .modlaBtn.outline {
  background-color: #fff;
  border: 1px solid var(--colorSecond)
}

#ModalConfirm .bCard .modlaBtn.outline a,
#ModalConfirm .bInner .modlaBtn.outline a,
#ModalCancel .bCard .modlaBtn.outline a,
#ModalCancel .bInner .modlaBtn.outline a,
#ModalEditConfirm .bCard .modlaBtn.outline a,
#ModalEditConfirm .bInner .modlaBtn.outline a,
#ModalEditCancel .bCard .modlaBtn.outline a,
#ModalEditCancel .bInner .modlaBtn.outline a {
  color: var(--colorSecond)
}

#ModalConfirm .bBtn,
#ModalCancel .bBtn,
#ModalEditConfirm .bBtn,
#ModalEditCancel .bBtn {
  display: flex;
  column-gap: 16px
}

.bOtp {
  width: 100%;
  padding: 0
}

.bOtp>p {
  text-align: center;
  color: var(--colorGray600);
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .control-group.otp {
  display: flex;
  column-gap: 10px;
  justify-content: center;
  margin-bottom: 24px
}

.bOtp .bFrom .control-group.otp input[type=text] {
  max-width: 48px;
  height: 48px;
  text-align: center;
  font-size: 1.125rem;
  line-height: normal;
  font-weight: 600;
  padding: 0
}

.bOtp .bFrom .control-group.otp input::-webkit-outer-spin-button,
.bOtp .bFrom .control-group.otp input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.bOtp .bFrom .control-group.otp input[type=number] {
  -moz-appearance: textfield
}

.bOtp .bFrom .bTextSend {
  margin-bottom: 12px;
  text-align: center;
  color: var(--colorGray500)
}

.bOtp .bFrom .bTextSend p {
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .bTextSend a {
  color: var(--colorSecond);
  font-weight: 600;
  text-decoration: none
}

.bOtp .bFrom .tError {
  display: none;
  color: #f85b56;
  font-weight: 300;
  align-items: center;
  justify-content: center;
  column-gap: 8px
}

.bOtp .bFrom .tError:before {
  content: "";
  display: block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(../img/ui/form/ico-error.svg) center center no-repeat;
  background-size: contain
}

.bOtp .bFrom.error .control-group input {
  border-color: var(--colorSecond)
}

.bOtp .bFrom.error .tError {
  display: flex
}

.bOtp .bBtn {
  display: flex;
  align-content: center;
  flex-direction: column
}

.bOtp .bBtn span {
  font-size: .875rem;
  line-height: normal;
  color: #a06c49;
  text-align: center;
  margin: 12px 0
}

.bOtp .bBtn .btn {
  max-width: 260px;
  max-width: max-content;
  margin: 0 auto
}

#pageRegister .wrapContent {
  background-position: bottom
}

#pageRegister .wrapContent #pRegisterMain {
  position: relative
}

#pageRegister .wrapContent #pRegisterMain .bContent {
  width: 100%;
  padding: 32px 0px
}

#pageRegister .wrapContent #pRegisterMain .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: var(--colorThird);
  font-weight: 500
}

#pageRegister .wrapContent #pRegisterMain .bContent .bChoice {
  padding-top: 16px;
  display: flex;
  flex-direction: column
}

#pageRegister .wrapContent #pRegisterMain .bContent .bChoice .choice1 {
  position: relative;
  background: url(../img/ci/register/ico-banner-choice1.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 36.5%
}

#pageRegister .wrapContent #pRegisterMain .bContent .bChoice .choice1 p {
  position: absolute;
  top: 0;
  padding: 13%
}

#pageRegister .wrapContent #pRegisterMain .bContent .bChoice .choice2 {
  position: relative;
  background: url(../img/ci/register/ico-bannner-choice2.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  padding-top: 36.5%
}

#pageRegister .wrapContent #pRegisterMain .bContent .bChoice .choice2 p {
  position: absolute;
  top: 0;
  padding: 13%
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pagePolicy .wrapContent #pPolicy .bContent {
  margin-top: 20px
}

#pagePolicy .wrapContent #pPolicy .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: var(--colorThird);
  font-weight: 500
}

#pagePolicy .wrapContent #pPolicy .bContent .container {
  width: 100%;
  height: auto;
  padding: 4px;
  margin-top: 24px;
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background: var(--gradient-border)
}

#pagePolicy .wrapContent #pPolicy .bContent .container .tContent {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  padding: 20px 12px;
  background-color: #fff;
  width: 100%;
  height: 100%
}

#pagePolicy .wrapContent #pPolicy .bContent .container .tContent p {
  font-size: 1.25rem;
  line-height: normal;
  color: #344054;
  text-align: left
}

#pagePolicy .wrapContent #pPolicy .bContent .container .tContent p a {
  color: #344054;
  font-weight: 700
}

#pagePolicy .wrapContent .bCard .bInner .bTitle .bPdpa {
  background-color: aqua
}

#pagePolicy .wrapContent .bCard .bInner .bTitle .bPdpa p {
  color: aqua
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pageMomDetail {
  height: auto
}

#pageMomDetail .wrapContent {
  background-position: bottom;
  margin-top: -164px;
  height: 120vh
}

#pageMomDetail .wrapContent #pMomdetail {
  position: relative;
  padding-top: 160px
}

#pageMomDetail .wrapContent #pMomdetail .bContent {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  width: 100%;
  padding: 32px 0px 120px
}

#pageMomDetail .wrapContent #pMomdetail .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: var(--colorThird);
  font-weight: 500
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  width: 100%;
  height: auto;
  padding: 4px;
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background-color: #fff;
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  color: #1d2939
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle::before {
  content: "";
  background-image: url(../img/ci/momdetail/ico-baby.svg);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle-select {
  font-size: 1.25rem;
  line-height: normal;
  color: #1d2939;
  font-weight: 700
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle-select::before {
  content: "";
  background-image: url(../img/ci/momdetail/ico-chat.svg);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle-textarea {
  font-size: 1.25rem;
  line-height: normal;
  color: #1d2939;
  font-weight: 700
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .tTitle-textarea::before {
  content: "";
  background-image: url(../img/ci/momdetail/ico-text.svg);
  width: 16px;
  height: 16px;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: 12px
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent input[type=text] {
  border: 1px solid #d0d5dd;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  padding: 12px;
  font-size: 1.25rem;
  line-height: normal
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .select>select {
  padding: 12px;
  border: 1px solid #d0d5dd;
  color: #1d2939;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  font-size: 1.25rem;
  line-height: normal
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent .select option:checked {
  background: var(--colorSecond);
  color: #fff
}

#pageMomDetail .wrapContent #pMomdetail .bContent .bForm .tContent textarea {
  padding: 12px;
  border: 1px solid #d0d5dd;
  color: #1d2939;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  font-size: 1.25rem;
  line-height: normal
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pageDoctorSelect #pDoctorSelect .bContent {
  padding: 32px 0px
}

#pageDoctorSelect #pDoctorSelect .bContent p {
  font-size: 1.75rem;
  line-height: normal;
  text-align: center;
  color: #23336b;
  font-weight: 500
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect {
  margin-top: 24px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  row-gap: 20px
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail {
  background-image: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  padding: 4px;
  width: 100%;
  overflow: visible !important;
  overflow: hidden;
  border-radius: 22px;
  -webkit-border-radius: 22px;
  -moz-border-radius: 22px;
  -ms-border-radius: 22px;
  -o-border-radius: 22px
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail .bDetail {
  min-height: 90px;
  display: flex;
  align-items: center;
  position: relative;
  padding: 16px;
  justify-content: space-between;
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background-color: #fff;
  width: 100%;
  overflow: visible
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail .bDetail .tDetail p {
  font-size: 1.25rem;
  line-height: normal;
  color: #292929
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail .bDetail img {
  position: absolute;
  width: 35.8%;
  bottom: 5px;
  right: -5px
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail.active .bDetail {
  background-color: var(--colorSecond)
}

#pageDoctorSelect #pDoctorSelect .bContent .bDoctorSelect .doctorDetail.active .bDetail p {
  color: #fff
}

#pageDoctorSelect #pDoctorSelect #pActionBtn .bBtn {
  padding: 23px 24px
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

#pageConclustion .wrapContent {
  background-position: bottom;
  margin-top: -164px;
  height: 100vh;
  width: 100%
}

#pageConclustion .wrapContent #pConclusion {
  position: relative;
  padding-top: 160px
}

#pageConclustion .wrapContent #pConclusion .bContent {
  margin-top: 32px
}

#pageConclustion .wrapContent #pConclusion .bContent h2 {
  text-align: center;
  color: var(--colorThird)
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail {
  margin-top: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  background-color: #fff;
  border-radius: 24px 24px 0px 0px;
  -webkit-border-radius: 24px 24px 0px 0px;
  -moz-border-radius: 24px 24px 0px 0px;
  -ms-border-radius: 24px 24px 0px 0px;
  -o-border-radius: 24px 24px 0px 0px;
  height: 100vh
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail p {
  font-size: 1.25rem;
  line-height: normal;
  color: var(--colorThird)
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail p.tBold {
  font-weight: 700
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .topic {
  font-size: 1.25rem;
  line-height: normal;
  color: var(--colorThird);
  text-align: left;
  font-weight: 700
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .tDetail {
  display: flex;
  flex-direction: column;
  row-gap: 16px
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .tDetail .meetingDetail {
  display: flex;
  justify-content: space-between
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .tDetail .meetingDetail-note {
  display: flex;
  align-items: start;
  flex-direction: column
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .tDetail .meetingDetail-note .tNote {
  text-align: left
}

#pageConclustion .wrapContent #pConclusion .bContent .bDetail .tDetail .meetingDetail-note .tNote.warning {
  margin-top: 20px;
  color: var(--colorSecond)
}

#pageConclustion .wrapContent #pConclusion .bContent .bNote p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700;
  color: #343a40
}

#pageConclustion .wrapContent #pConclusion .bContent .bNote .tNote p {
  font-weight: 400
}

#pageConclustion .wrapContent #pConclusion .bContent .bNote .tNote .tRed {
  color: var(--colorSecond)
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

.jBox-wrapper {
  z-index: 99999 !important
}

.jBox-overlay {
  z-index: 99998 !important;
  background-color: rgba(0, 0, 0, .5)
}

.jBox-Modal .jBox-container {
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  background-color: rgba(0, 0, 0, 0)
}

.jBox-Modal .jBox-container,
.jBox-Modal.jBox-closeButton-box:before {
  box-shadow: none
}

.jBox-Modal .jBox-content {
  padding: 0 !important;
  margin: 0 auto !important
}

.jBox-closeButton-box .jBox-closeButton {
  width: 30px;
  height: 30px;
  background-size: 70% auto;
  background-color: rgba(0, 0, 0, .25);
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease
}

.jBox-closeButton-box .jBox-closeButton:hover {
  background-color: var(--colorSecond)
}

.jBox-closeButton-box .jBox-closeButton svg {
  display: none
}

.bModal {
  display: none;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  padding: 0px;
  background-color: rgba(0, 0, 0, 0);
  margin: 0px;
  -webkit-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  -moz-box-shadow: 0px 0px 10px rgba(16, 50, 90, .2);
  box-shadow: 0px 0px 10px rgba(16, 50, 90, .2)
}

.bModal.bCard {
  padding: 0;
  background-color: #fff;
  padding: 42px 33px;
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

.bModal.bCard .bInner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 16px
}

.bModal.bCard .bInner p {
  font-size: 1.125rem;
  line-height: normal;
  color: var(--colorGray800);
  font-weight: 600
}

.bModal.bCard .bInner .bDetail {
  text-align: center
}

.bModal.bCard .bInner .bDetail .detail {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600);
  font-weight: 400
}

.bModal.bCard .bInner .modlaBtn {
  cursor: pointer;
  background-color: var(--colorPrimary);
  text-align: center;
  width: 100%;
  padding: 10px 24px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bModal.bCard .bInner .modlaBtn .confirmBtn {
  color: #000;
  font-weight: 600;
  width: 100%
}

.bModal.bCard .bInner .bBtn {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 12px
}

.bModal.bCard .bTitle {
  color: var(--colorThird);
  text-align: center
}

.bModal.bCard .bTitle .bPdpa p {
  text-align: left
}

.bModal.bCard .bTitle .bPdpa .tPdpa {
  text-align: left
}

.bModal.bCard .bTitle span {
  font-size: 1.75rem;
  line-height: normal;
  display: block;
  font-weight: bold;
  margin-bottom: 8px
}

.bModal.bCard .bTitle img {
  width: 122px;
  height: 110px;
  margin-bottom: 16px
}

.bModal.bCard .bTitle p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 400
}

.bModal.bCard .bDetails {
  text-align: center;
  color: var(--colorGray900);
  line-height: 160%
}

.bModal.bCard .bText {
  margin-bottom: 24px;
  text-align: center
}

.bModal.bCard .bText p {
  font-size: 1.125rem;
  line-height: normal
}

@media(min-width: 768px) {
  .bModal.bCard .bText p {
    font-size: 1.25rem;
    line-height: normal
  }
}

.bModal.VDO .bYoutube {
  width: 70vw;
  padding-top: 56.25%
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .bModal.VDO .bYoutube {
    width: 80vw
  }
}

@media(max-width: 767px) {
  .bModal.VDO .bYoutube {
    width: 90vw;
    padding: 0 20px;
    padding-top: 56.25%
  }
}

.bModal.VDO iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block
}

.bModal.Image .bPic {
  width: 90vw
}

@media(min-width: 768px) {
  .bModal.Image .bPic {
    width: 80vw
  }
}

.bModal.Image a {
  color: #fff;
  margin-top: 16px
}

.bModal.Image img {
  height: auto;
  width: 100%;
  margin: 0 auto
}

@media(min-width: 768px) {
  .bModal.Image img {
    width: auto;
    max-height: 80vh
  }
}

a.btnCloseModalIcon {
  overflow: hidden;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 8px;
  right: 8px
}

#ModalFilter.bCard {
  padding: 24px 16px
}

#ModalFilter.bCard .bInner {
  row-gap: 0
}

#ModalFilter .bFilterForm {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 24px
}

#ModalFilter .bBtn {
  display: flex;
  column-gap: 16px
}

#ModalConfirm .bCard,
#ModalConfirm .bInner,
#ModalCancel .bCard,
#ModalCancel .bInner,
#ModalEditConfirm .bCard,
#ModalEditConfirm .bInner,
#ModalEditCancel .bCard,
#ModalEditCancel .bInner {
  row-gap: 24px
}

#ModalConfirm .bCard .group-Btn,
#ModalConfirm .bInner .group-Btn,
#ModalCancel .bCard .group-Btn,
#ModalCancel .bInner .group-Btn,
#ModalEditConfirm .bCard .group-Btn,
#ModalEditConfirm .bInner .group-Btn,
#ModalEditCancel .bCard .group-Btn,
#ModalEditCancel .bInner .group-Btn {
  display: flex;
  flex-direction: column;
  row-gap: 16px;
  width: 100%
}

#ModalConfirm .bCard .tDetail,
#ModalConfirm .bInner .tDetail,
#ModalCancel .bCard .tDetail,
#ModalCancel .bInner .tDetail,
#ModalEditConfirm .bCard .tDetail,
#ModalEditConfirm .bInner .tDetail,
#ModalEditCancel .bCard .tDetail,
#ModalEditCancel .bInner .tDetail {
  text-align: center
}

#ModalConfirm .bCard .tDetail p:last-child,
#ModalConfirm .bInner .tDetail p:last-child,
#ModalCancel .bCard .tDetail p:last-child,
#ModalCancel .bInner .tDetail p:last-child,
#ModalEditConfirm .bCard .tDetail p:last-child,
#ModalEditConfirm .bInner .tDetail p:last-child,
#ModalEditCancel .bCard .tDetail p:last-child,
#ModalEditCancel .bInner .tDetail p:last-child {
  font-size: .875rem;
  line-height: normal;
  color: var(--colorGray600)
}

#ModalConfirm .bCard .modlaBtn.outline,
#ModalConfirm .bInner .modlaBtn.outline,
#ModalCancel .bCard .modlaBtn.outline,
#ModalCancel .bInner .modlaBtn.outline,
#ModalEditConfirm .bCard .modlaBtn.outline,
#ModalEditConfirm .bInner .modlaBtn.outline,
#ModalEditCancel .bCard .modlaBtn.outline,
#ModalEditCancel .bInner .modlaBtn.outline {
  background-color: #fff;
  border: 1px solid var(--colorSecond)
}

#ModalConfirm .bCard .modlaBtn.outline a,
#ModalConfirm .bInner .modlaBtn.outline a,
#ModalCancel .bCard .modlaBtn.outline a,
#ModalCancel .bInner .modlaBtn.outline a,
#ModalEditConfirm .bCard .modlaBtn.outline a,
#ModalEditConfirm .bInner .modlaBtn.outline a,
#ModalEditCancel .bCard .modlaBtn.outline a,
#ModalEditCancel .bInner .modlaBtn.outline a {
  color: var(--colorSecond)
}

#ModalConfirm .bBtn,
#ModalCancel .bBtn,
#ModalEditConfirm .bBtn,
#ModalEditCancel .bBtn {
  display: flex;
  column-gap: 16px
}

.bOtp {
  width: 100%;
  padding: 0
}

.bOtp>p {
  text-align: center;
  color: var(--colorGray600);
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .control-group.otp {
  display: flex;
  column-gap: 10px;
  justify-content: center;
  margin-bottom: 24px
}

.bOtp .bFrom .control-group.otp input[type=text] {
  max-width: 48px;
  height: 48px;
  text-align: center;
  font-size: 1.125rem;
  line-height: normal;
  font-weight: 600;
  padding: 0
}

.bOtp .bFrom .control-group.otp input::-webkit-outer-spin-button,
.bOtp .bFrom .control-group.otp input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0
}

.bOtp .bFrom .control-group.otp input[type=number] {
  -moz-appearance: textfield
}

.bOtp .bFrom .bTextSend {
  margin-bottom: 12px;
  text-align: center;
  color: var(--colorGray500)
}

.bOtp .bFrom .bTextSend p {
  font-size: 1rem;
  line-height: normal
}

.bOtp .bFrom .bTextSend a {
  color: var(--colorSecond);
  font-weight: 600;
  text-decoration: none
}

.bOtp .bFrom .tError {
  display: none;
  color: #f85b56;
  font-weight: 300;
  align-items: center;
  justify-content: center;
  column-gap: 8px
}

.bOtp .bFrom .tError:before {
  content: "";
  display: block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  background: url(../img/ui/form/ico-error.svg) center center no-repeat;
  background-size: contain
}

.bOtp .bFrom.error .control-group input {
  border-color: var(--colorSecond)
}

.bOtp .bFrom.error .tError {
  display: flex
}

.bOtp .bBtn {
  display: flex;
  align-content: center;
  flex-direction: column
}

.bOtp .bBtn span {
  font-size: .875rem;
  line-height: normal;
  color: #a06c49;
  text-align: center;
  margin: 12px 0
}

.bOtp .bBtn .btn {
  max-width: 260px;
  max-width: max-content;
  margin: 0 auto
}

#pageBooking-detail #pBookingDetail .bBookingDetail {
  padding: 20px 0px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #343a40
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead p {
  font-size: 1.5rem;
  line-height: normal;
  font-weight: 700
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead a {
  color: var(--colorThird);
  font-weight: 700;
  font-size: 16px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bookingHead a::before {
  content: url(../img/ci/booking/edit.svg);
  position: relative;
  top: 2px;
  margin-right: 5px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail {
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(0deg, #F9DEB3 -8.73%, #CD8C48 73.15%, #DFAE75 87.53%, #F8F3CB 109.45%);
  border-radius: 22px;
  row-gap: 16px;
  margin-top: 12px;
  margin-bottom: 20px;
  padding: 4px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg {
  overflow: hidden;
  border-radius: 16px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  -ms-border-radius: 16px;
  -o-border-radius: 16px;
  background-color: #fff;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  row-gap: 16px
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail {
  display: flex;
  justify-content: space-between
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail p {
  font-size: 1.25rem;
  line-height: normal;
  color: #343a40
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .detail .bold {
  font-weight: 700;
  color: #1d2939
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .bNote p {
  font-size: 1.25rem;
  line-height: normal;
  font-weight: 700
}

#pageBooking-detail #pBookingDetail .bBookingDetail .tDetail .detailBg .bNote .tNote p {
  font-weight: 400
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn {
  display: flex;
  flex-direction: column;
  align-items: center
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn .btn {
  width: 153px;
  margin-bottom: 4px;
  font-size: 20px;
  text-transform: none
}

#pageBooking-detail #pBookingDetail .bBookingDetail .bBtn p {
  font-size: 1.25rem;
  line-height: normal;
  color: #1d2939
}

#pageBooking-detail #pActionBtn .bBtn .btn {
  width: 153px
}

:root {
  --colorPrimaryL: #ffefd4;
  --colorPrimary: #d09455;
  --colorPrimaryD: #5d4327;
  --colorSecondL: #d5463c;
  --colorSecond: #a02018;
  --colorSecondD: #52120e;
  --colorThirdL: #546ab9;
  --colorThird: #23336b;
  --colorThirdD: #0c132c;
  --colorError: #A02018;
  --colorGray50: #f5f5f5;
  --colorGray70: #d0d5dd;
  --colorGray100: #dfe0e0;
  --colorGray200: #d0d1d1;
  --colorGray200: #d0d1d1;
  --colorGray300: #d0d5dd;
  --colorGray400: #98a2b3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #344054;
  --colorGray800: #1d2939;
  --colorGray900: #101828;
  --colorBlack: #1d2939;
  --colorWhite: #ffffff;
  --gradient-primaryL: linear-gradient(180deg, rgba(255, 246, 203, 0.4) 26%, rgba(255, 227, 92, 0.4) 100%), var(--CI-White, #fff);
  --gradient-primary: linear-gradient(180deg, #ffeeb2 0%, #ffe364 36%, #ffdb34 100%);
  --gradient-secoundL: linear-gradient(180deg, #ffeeb2 0%, #ffed8e 36%, #f9d61d 100%);
  --gradient-secound: linear-gradient(0deg, #d09131 0%, #f8d76d 40.97%, #fff 79.41%, #f8d76d 105.43%, #fff 140%);
  --gradient-secoundD: linear-gradient(0deg, #f8d76d 1.23%, #d09131 73.15%, #f8d76d 87.53%, #fff 109.45%, #fff 111.64%);
  --gradient-border: linear-gradient(0deg, #f9deb3 -8.73%, #cd8c48 73.15%, #dfae75 87.53%, #f8f3cb 109.45%);
  --gradient-black: linear-gradient(122deg, #181010 25%, #51515d 100%);
  --gradient-grey: linear-gradient(40deg, #adabab 25%, #777 100%);
  --gradient-silver: radial-gradient(91.77% 115.83% at 22.77% 18.75%, #fff 0%, #d9d9d9 100%);
  --baseFontsize: 16px
}

p {
  font-size: 1rem;
  line-height: normal
}

body {
  font-family: "Inter"
}

#confirmModal {
  background-color: #fff;
  position: relative;
  padding: 60px 0px 0px 0px
}

#confirmModal p {
  font-family: "db_heaventround"
}

#confirmModal .closeBtn {
  position: absolute;
  width: 44px;
  height: 44px;
  background-image: url(../img/ci/booking/ico-close.svg);
  top: 18px;
  right: 18px
}

#confirmModal .bInner-calendarDetail .bTitle {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding: 0px 40px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead {
  display: flex;
  flex-direction: column;
  align-items: start;
  margin-top: 0px !important;
  margin-bottom: 0px !important
}

#confirmModal .bInner-calendarDetail .bTitle .bHead h2 {
  font-weight: 600;
  font-size: 32px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead p {
  font-size: 16px;
  color: #667085
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon {
  display: flex;
  align-items: center
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon .iconLine {
  background-image: url(../img/ci/booking/ico-lineIcon.svg);
  display: block;
  width: 21px;
  height: 21px;
  background-repeat: no-repeat;
  margin-right: 12px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .bIcon a {
  padding: 8px 12px;
  background-color: #2ccf54;
  color: #fff;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

#confirmModal .bInner-calendarDetail .bTitle .bHead .bLinkOut .iconCopy {
  background-image: url(../img/ci/booking/ico-copyIcon.svg);
  display: block;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail {
  display: flex;
  justify-content: start;
  align-items: center
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .icon {
  background-image: url(../img/ci/booking/ico-user.svg);
  background-size: contain;
  display: block;
  width: 19px;
  height: 19px;
  background-repeat: no-repeat;
  margin-right: 12px
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName {
  display: flex;
  flex-direction: column;
  align-items: start
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName p {
  font-size: 16px
}

#confirmModal .bInner-calendarDetail .bTitle .tUserDetail .tName p:last-child {
  font-size: 14px;
  font-weight: 600;
  color: var(--colorSecond)
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  row-gap: 16px
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail p {
  text-align: start
}

#confirmModal .bInner-calendarDetail .bTitle .tMeetingDetail .tBold {
  text-align: end;
  font-size: 20px;
  font-weight: 700
}

#confirmModal .bInner-calendarDetail .bBtn {
  display: flex;
  justify-content: end;
  margin-top: 24px;
  border-top: 1px solid #eaecf0;
  padding: 24px 17px 16px
}

#confirmModal .bInner-calendarDetail .bBtn button {
  padding: 8px 31px;
  color: var(--colorSecond);
  overflow: hidden;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  border: 1px solid #d0d5dd;
  background-color: #fff
}

#confirmModal-cancel {
  font-family: "db_heaventround";
  position: relative;
  padding: 47px 45px 40px
}

#confirmModal-cancel .closeBtn {
  position: absolute;
  width: 44px;
  height: 44px;
  background-image: url(../img/ci/booking/ico-close.svg);
  background-size: 100%;
  background-repeat: no-repeat;
  top: 18px;
  right: 18px
}

#confirmModal-cancel .bTitle span {
  font-size: 40px
}

#confirmModal-cancel .bBtn button {
  font-size: 20px
}

#confirmModal-cancel .bBtn .bCancelMeeting {
  color: #a02018;
  font-size: 20px;
  text-align: center
}

.custom-calendar {
  padding: 0px 80px 80px
}

.rbc-event {
  background-color: #fff;
  color: #1d2939;
  display: flex;
  align-items: center;
  font-weight: 400
}

.rbc-event:before {
  content: "";
  width: 9px;
  height: 9px;
  background-color: #a02018;
  overflow: hidden;
  border-radius: 50px;
  -webkit-border-radius: 50px;
  -moz-border-radius: 50px;
  -ms-border-radius: 50px;
  -o-border-radius: 50px;
  display: block;
  margin-right: 8px
}

.rbc-today {
  background-color: #fff !important
}

.rbc-today .rbc-event {
  background-color: #a02018
}

.rbc-day-bg {
  padding: 16px
}

.rbc-toolbar-label {
  font-size: 32px;
  font-weight: 600;
  color: #1d2939
}

.rbc-toolbar {
  margin-bottom: 52px
}

.rbc-btn-group button {
  background-color: #fff
}

.rbc-timeslot-group {
  padding: 8px 33px 8px;
  min-height: 107px
}

.rbc-timeslot-group .rbc-time-slot span {
  font-size: 16px;
  font-weight: 600
}

.rbc-label {
  min-width: 99px;
  color: #667085
}

.rbc-day-slot .rbc-event {
  background-color: #ffebee;
  overflow: hidden;
  border-radius: 0px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border: none;
  border-left: 3px solid var(--colorSecond) !important
}

.rbc-day-slot .rbc-event:before {
  display: none
}

.rbc-events-container .rbc-event {
  padding: 20px 14px;
  width: 100%
}

.rbc-events-container .rbc-event .rbc-event-label {
  width: 100%;
  font-size: 16px;
  color: #1d2939;
  margin-bottom: 8px
}

.rbc-events-container .rbc-event .rbc-event-content {
  width: 100%;
  font-size: 16px;
  color: #667085
}

.rbc-time-view .rbc-row {
  min-height: auto
}

.rbc-time-view .rbc-row .rbc-header {
  padding: 12px
}

.rbc-time-view .rbc-row .rbc-header span {
  color: #667085;
  font-size: 20px;
  font-weight: 600
}

.rbc-month-header .rbc-header {
  padding: 12px;
  font-size: 20px;
  font-weight: 600
}

.rbc-month-header .rbc-header span {
  color: #667085
}

.rbc-date-cell button {
  font-size: 16px;
  font-weight: 600;
  color: #1d2939;
  margin: 8px 12px 0px 0px
}

.rbc-off-range button {
  font-size: 16px;
  font-weight: 600;
  color: #98a2b3;
  margin: 8px 12px 0px 0px
}

.bHead {
  color: #1d2939;
  margin: 27px 0px 29px;
  display: flex;
  align-items: center
}

.bHead .iconBurger {
  background-image: url(../img/ci/header/ico-burger.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  display: block;
  width: 39px;
  height: 39px;
  margin: 20px
}

.bHeaderActiont {
  display: flex;
  justify-content: space-between;
  padding: 0px 80px 16px
}

.bHeaderActiont .bDoctorSearch .control-group {
  width: 200px
}

.bHeaderActiont .bDoctorSearch .control-group .select {
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bHeaderActiont .bDoctorSearch .control-group .select select {
  padding: 4px 14px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px
}

.bHeaderActiont .bDownload {
  display: flex;
  column-gap: 10px
}

.bHeaderActiont .bDownload .btn {
  max-height: 50px
}

.bHeaderActiont .bDownload .import {
  background-color: #23336b;
  font-size: 18px;
  text-transform: none;
  padding: 16px 28px
}

.bHeaderActiont .bDownload .import:before {
  content: "";
  background-image: url(../img/ci/header/ico-import.svg);
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 12px
}

.bHeaderActiont .bDownload .export {
  color: #23336b;
  background-color: #f0dc8d;
  font-size: 18px;
  text-transform: none;
  padding: 16px 28px
}

.bHeaderActiont .bDownload .export:before {
  content: "";
  background-image: url(../img/ci/header/ico-export.svg);
  display: block;
  width: 24px;
  height: 24px;
  margin-right: 12px
}

html {
  font-size: var(--baseFontsize)
}

body {
  font-family: "db_heaventround";
  font-weight: normal;
  line-height: normal;
  font-size: 1rem;
  line-height: normal;
  color: #56341b;
  min-height: -webkit-fill-available;
  background-color: #fff;
  background-attachment: fixed;
  overflow-x: hidden
}

.container {
  margin-inline: auto;
  width: calc(100% - 32px)
}

@media(min-width: 768px) {
  .container {
    width: 90%
  }
}

@media(min-width: 1024px) {
  .container {
    max-width: 1280px
  }
}

a {
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -o-transition: all .3s ease;
  -ms-transition: all .3s ease;
  color: var(--colorPrimary)
}

.bPreload {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .25);
  background-size: 100px auto;
  z-index: 94036
}

.bPreload img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  display: block;
  width: auto;
  height: 50px
}

div[id^=page] {
  width: 100%;
  max-width: 500px;
  margin-inline: auto;
  background-color: var(--colorWhite);
  height: 100vh;
  height: max-content;
  background: linear-gradient(42deg, #ddc06d 4.7%, #ead57e 17.21%, #fff3cc 41.32%, #fff3cc 59.63%, #ecd67e 84.19%, #f8e59e 95.34%);
  background-position: bottom
}

div[id^=page] .wrapContent {
  position: relative;
  padding-bottom: 130px;
  margin-inline: auto;
  width: calc(100% - 32px);
  min-height: calc(100vh - 54px)
}

@media(min-width: 768px) {
  div[id^=page] .wrapContent {
    width: 90%
  }
}

@media(min-width: 1024px) {
  div[id^=page] .wrapContent {
    max-width: 1280px
  }
}

.hide {
  display: none !important
}

.pc {
  display: none
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .pc {
    display: none
  }
}

@media(min-width: 1024px) {
  .pc {
    display: block
  }
}

.pc-tablet {
  display: none
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .pc-tablet {
    display: block
  }
}

@media(min-width: 768px) {
  .pc-tablet {
    display: block
  }
}

.mobile-tablet {
  display: block
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .mobile-tablet {
    display: block
  }
}

@media(min-width: 768px) {
  .mobile-tablet {
    display: none
  }
}

.mobile {
  display: block
}

@media(min-width: 767px)and (max-width: 1366px)and (-webkit-min-device-pixel-ratio: 2) {
  .mobile {
    display: none
  }
}

@media(min-width: 1024px) {
  .mobile {
    display: none
  }
}

#pLoadmore .bLoadmore {
  border-top: 1px solid var(--colorGray300);
  text-align: center;
  padding-top: 32px
}

@media(min-width: 768px) {
  #pLoadmore .bLoadmore {
    padding-top: 48px
  }
}

#pLoadmore .bLoadmore p {
  color: var(--colorPrimary);
  font-weight: bold;
  font-size: 1.125rem;
  line-height: normal
}

@media(min-width: 768px) {
  #pLoadmore .bLoadmore p {
    font-size: 1.25rem;
    line-height: normal
  }
}

.bNoData {
  height: 100vw;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  row-gap: 16px
}

.bNoData img {
  display: block;
  width: auto;
  height: 115px
}

.bNoData p {
  font-size: 1rem;
  line-height: normal;
  color: #fff
}

#pTiltlePage {
  width: 100%;
  background-color: #fff;
  background-size: cover
}

#pTiltlePage .bTitle {
  margin-inline: auto;
  width: calc(100% - 32px)
}

@media(min-width: 768px) {
  #pTiltlePage .bTitle {
    width: 90%
  }
}

@media(min-width: 1024px) {
  #pTiltlePage .bTitle {
    max-width: 1280px
  }
}

#pTiltlePage .bTitle .bText {
  display: flex;
  justify-content: space-between;
  padding: 12px 24px;
  position: fixed;
  top: 0;
  max-width: 500px;
  width: 100%;
  z-index: 999;
  background-color: var(--colorWhite);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, .05)
}

#pTiltlePage .bTitle .bText a {
  cursor: pointer
}

#pTiltlePage .bTitle .bText img {
  width: 24px
}

#pTiltlePage .bTitle .bText .tag {
  color: var(--colorPrimary);
  font-size: .75rem;
  line-height: normal;
  background-color: var(--colorWhite);
  display: inline-flex;
  align-items: center;
  column-gap: 4px;
  padding: 0 8px;
  line-height: 24px;
  overflow: hidden;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  margin-bottom: 12px
}

#pTiltlePage .bTitle .bText .tag span {
  font-weight: bold
}

#pTiltlePage .bTitle .bText h2 {
  font-size: 1.75rem;
  line-height: normal;
  font-weight: 500;
  text-align: center
}

#pTiltlePage .bTitle .bText .empty {
  width: 24px
}

#pTitleContentMain {
  margin-inline: auto;
  width: calc(100% - 32px);
  background: var(--gradient-secoundD);
  overflow: hidden;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  position: relative;
  overflow: inherit;
  margin-top: -32px;
  box-shadow: 0px 2px 10px 0px rgba(126, 76, 9, .3);
  z-index: 2
}

@media(min-width: 768px) {
  #pTitleContentMain {
    width: 90%
  }
}

@media(min-width: 1024px) {
  #pTitleContentMain {
    max-width: 1280px
  }
}

#pTitleContentMain:before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  background: linear-gradient(180deg, #d23549 -8.85%, #96090d 100%), linear-gradient(180deg, #cd0228 -8.85%, #88110d 100%);
  overflow: hidden;
  border-radius: 4px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px
}

#pTitleContentMain>* {
  position: relative
}

#pTitleContentMain .bTitleContent {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  row-gap: 8px;
  padding: 24px 32px
}

#pTitleContentMain .bTitleContent .tTag {
  color: var(--colorPrimary);
  padding: 0 32px;
  background-size: 100%;
  height: 24px;
  line-height: 24px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  top: -9px;
  white-space: nowrap
}

#pTitleContentMain .bTitleContent h2 {
  font-size: 1.9rem;
  line-height: normal;
  background: linear-gradient(0deg, #d09131 -19.86%, #f8d76d 25.21%, #fff 64.93%, #f8d76d 87.53%, #fff 111.64%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0)
}

#pTitleContentMain .bTitleContent .tStep {
  position: relative;
  background: var(--gradient-secound);
  padding: 0 16px;
  height: 24px;
  overflow: hidden;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  bottom: -9px
}

#pTitleContentMain .bTitleContent .tStep span {
  position: relative;
  background: var(--gradient-primaryL);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: rgba(0, 0, 0, 0);
  font-size: 1.25rem;
  line-height: normal;
  line-height: 23px;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, .25)
}

#pActionBtn {
  background-color: #fff;
  border-top: 1px solid #e4e4e4;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  z-index: 999
}

#pActionBtn .bBtn {
  margin-inline: auto;
  width: calc(100% - 32px);
  display: flex;
  justify-content: center;
  column-gap: 20px;
  padding: 24px
}

@media(min-width: 768px) {
  #pActionBtn .bBtn {
    width: 90%
  }
}

@media(min-width: 1024px) {
  #pActionBtn .bBtn {
    max-width: 1280px
  }
}

#pActionMenu {
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  z-index: 999
}

#pActionMenu .bBtn {
  margin-inline: auto;
  width: calc(100% - 32px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 0;
  grid-row-gap: 0;
  align-items: flex-end;
  justify-content: center;
  padding: 12px 0
}

@media(min-width: 768px) {
  #pActionMenu .bBtn {
    width: 90%
  }
}

@media(min-width: 1024px) {
  #pActionMenu .bBtn {
    max-width: 1280px
  }
}

#pActionMenu .bBtn a {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--colorGray900);
  row-gap: 8px;
  font-size: .875rem;
  line-height: normal
}

#pActionMenu .bBtn a i {
  width: 36px;
  height: 36px;
  background-color: var(--colorGray200);
  overflow: hidden;
  border-radius: 36px;
  -webkit-border-radius: 36px;
  -moz-border-radius: 36px;
  -ms-border-radius: 36px;
  -o-border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center
}

#pActionMenu .bBtn a.active {
  color: var(--colorSecond)
}

#pActionMenu .bBtn a.active i {
  background: var(--gradient-secoundD)
}

#pageTest {
  height: 100vh
}

#pageTest p {
  color: #000;
  font-size: 1.75rem;
  line-height: normal;
  width: 100%;
  text-align: center
}

@media(max-width: 320px) {
  #pageTest {
    background-color: aqua
  }

  #pageTest p {
    color: #96090d;
    font-size: 1.75rem;
    line-height: normal;
    width: 100%;
    text-align: center
  }
}

#pStep {
  padding: 0px 57px
}

#pStep .bStep {
  display: flex;
  justify-content: center;
  column-gap: 4px;
  padding-top: 20px
}

#pStep .bStep[data-step="1"] div:nth-child(1) {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

#pStep .bStep[data-step="2"] div:nth-child(1),
#pStep .bStep[data-step="2"] div:nth-child(2) {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

#pStep .bStep[data-step="3"] div:nth-child(1),
#pStep .bStep[data-step="3"] div:nth-child(2),
#pStep .bStep[data-step="3"] div:nth-child(3) {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

#pStep .bStep[data-step="4"] div:nth-child(1),
#pStep .bStep[data-step="4"] div:nth-child(2),
#pStep .bStep[data-step="4"] div:nth-child(3),
#pStep .bStep[data-step="4"] div:nth-child(4) {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

#pStep .bStep[data-step="5"] div:nth-child(1),
#pStep .bStep[data-step="5"] div:nth-child(2),
#pStep .bStep[data-step="5"] div:nth-child(3),
#pStep .bStep[data-step="5"] div:nth-child(4),
#pStep .bStep[data-step="5"] div:nth-child(5) {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorSecond);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}

#pStep .bStep .step {
  width: 80px;
  padding-top: 1.5%;
  background-color: var(--colorWhite);
  overflow: hidden;
  border-radius: 20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px
}