@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;400;500;600;700&family=Lexend:wght@100..900&display=swap");
:root {
  --colorPrimary: var(--ci-pink60);
  --colorPrimaryOn: var(--colorGray25);
  --colorPrimaryHover: var(--ci-pink80);
  --colorPrimaryLight: var(--ci-pink20);
  --colorPrimaryDark: color-mix(in srgb, var(--colorPrimary) 70%, black);
  --colorPrimaryFocused: var(--ci-pink70);
  --colorPrimaryOutline: var(--colorGray300);
  --colorPrimaryVariant: var(--colorGray600);
  --colorSecondary: var(--ci-purple60);
  --colorSecondaryOn: var(--colorGray25);
  --colorSecondaryHovered: var(--ci-purple80);
  --colorSecondaryLight: var(--ci-purple20);
  --colorSecondaryDark: color-mix(in srgb, var(--colorSecondary) 70%, black);
  --colorSecondaryFocused: var(--ci-purple70);
  --colorSecondaryOutline: var(--colorGray300);
  --colorSecondaryVariant: var(--colorGray600);
  --colorSubSecondary: var(--ci-green60);
  --colorSubSecondaryOn: var(--colorGray900);
  --colorSubSecondaryHovered: var(--ci-green80);
  --colorSubSecondaryLight: var(--ci-green20);
  --colorSubSecondaryDark: color-mix(in srgb, var(--colorSubSecondary) 70%, black);
  --colorSubSecondaryFocused: var(--ci-green40);
  --colorSubSecondaryOutline: var(--ci-green30);
  --colorSubSecondaryVariant: var(--colorGray600);
  --colorError: var(--colorRed600);
  --colorErrorOn: var(--colorGray25);
  --colorErrorDisbled: var(--colorRed200);
  --colorErrorHovered: var(--colorRed700);
  --colorErrorOutline: var(--colorRed300);
  --colorErrorFg: var(--colorRed50);
  --colorSuccess: var(--colorGreen60);
  --colorSuccessOn: var(--colorGray25);
  --colorSurface: var(--colorGreen10);
  --colorSuccessFg: var(--colorGreen20);
  --colorBg: var(--colorGray25);
  --colorBgForeground: var(--colorGray50);
  --colorBgForegroundDark: var(--colorGray300);
  --colorBgForegroundLight: var(--colorRed25);
  --colorBgDarkCi: var(--colorRed50);
  --colorTypoBasetext: var(--colorGray800);
  --colorTypoIcon: var(--colorGray400);
  --colorTypoPlaceholder: var(--colorGray500);
  --colorTypoSubtext1: var(--colorGray700);
  --colorTypoSubtext2: var(--colorGray600);
  --colorStateError: #d92d20;
  --colorStateSuccess: #079455;
  --colorStateWorking: #9b59b6;
  --colorWhite: var(--colorGray25);
  --colorBlack: var(--colorGray900);
  --colorWarning: #fcaf17;
  --colorDisabled: var(--colorGray400);
  --colorDisbledOn: var(--colorGray300);
  --colorTertiary: var(--colorBlue70);
  --colorTertiaryHovered: var(--colorBlue80);
  --colorTertiaryOutline: var(--colorBlue40);
  --gradient-primary: linear-gradient(92deg, #ADA2F0 -7.45%, #FFACCA 54.54%, #5DF3DA 116.53%);
  --gradient-secound: linear-gradient(92deg, #ADA2F0 -7.45%, #FFACCA 54.54%, #5DF3DA 116.53%);
  --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%);
  --gradient-gold: linear-gradient(165deg, #B1884E 12.42%, #BF9A5D 14%, #DFC480 18.75%, #F3DD96 21.92%, #FBE79E 24.29%, #C8A465 43.3%, #D8B872 48.05%, #FBE38E 57.55%, #B1884E 77.34%, #815D3A 86.05%, #67462F 91.59%);
  --baseFontsize: 16px;
  --colorYellow10: #FFFDFA;
  --colorYellow20: #FCEED9;
  --colorYellow30: #F8D8AA;
  --colorYellow40: #F4C27B;
  --colorYellow50: #F0AC4C;
  --colorYellow60: #FCAF17;
  --colorYellow70: #D38D03;
  --colorYellow80: #965D0D;
  --colorYellow90: #674009;
  --colorYellow100: #382305;
  --colorBlue10: #FBFCFE;
  --colorBlue20: #F3F5FB;
  --colorBlue30: #CCD2F0;
  --colorBlue40: #A5AFE4;
  --colorBlue50: #7E8DD8;
  --colorBlue60: #566ACC;
  --colorBlue70: #384DB8;
  --colorBlue80: #2C3D92;
  --colorBlue90: #202C6A;
  --colorBlue100: #141C43;
  --colorRed25: #FFFBFA;
  --colorRed50: #FEF3F2;
  --colorRed100: #FEE4E2;
  --colorRed200: #FECDCA;
  --colorRed300: #FDA29B;
  --colorRed400: #F97066;
  --colorRed500: #F04438;
  --colorRed600: #D92D20;
  --colorRed700: #B42318;
  --colorRed800: #912018;
  --colorRed900: #7A271A;
  --colorRed950: #55160C;
  --colorGreen10: #F6FEF9;
  --colorGreen20: #DBFAE6;
  --colorGreen30: #75E0A7;
  --colorGreen40: #47CD89;
  --colorGreen50: #17B26A;
  --colorGreen60: #079455;
  --colorGreen70: #067647;
  --colorGreen80: #085D3A;
  --colorGreen90: #074D31;
  --colorGreen100: #053321;
  --colorGray25: #FCFCFD;
  --colorGray50: #F9FAFB;
  --colorGray100: #F2F4F7;
  --colorGray200: #F2F4F7;
  --colorGray300: #D0D5DD;
  --colorGray400: #98A2B3;
  --colorGray500: #667085;
  --colorGray600: #475467;
  --colorGray700: #1D2939;
  --colorGray800: #1D2939;
  --colorGray900: #101828;
  --colorGray950: #0C111D;
  --colorViolet25: #FBFAFF;
  --colorViolet50: #F5F3FF;
  --colorViolet100: #ECE9FE;
  --colorViolet200: #DDD6FE;
  --colorViolet300: #C3B5FD;
  --colorViolet400: #A48AFB;
  --colorViolet500: #875BF7;
  --colorViolet600: #7839EE;
  --colorViolet700: #6927DA;
  --colorViolet800: #5720B7;
  --colorViolet900: #491C96;
  --colorViolet950: #2E125E;
  --colorOrange25: #FEFAF5;
  --colorOrange50: #FEF6EE;
  --colorOrange100: #FDEAD7;
  --colorOrange200: #F9DBAF;
  --colorOrange300: #F7B27A;
  --colorOrange400: #F38744;
  --colorOrange500: #EF6820;
  --colorOrange600: #E04F16;
  --colorOrange700: #B93815;
  --colorOrange800: #932F19;
  --colorOrange900: #772917;
  --colorOrange950: #511C10;
  --ci-pink10: #FFF1F6;
  --ci-pink20: #FFD2E2;
  --ci-pink30: #FFBCD4;
  --ci-pink40: #FF9EC1;
  --ci-pink50: #FF8BB5;
  --ci-pink60: #FF6EA2;
  --ci-pink70: #E86493;
  --ci-pink80: #B54E73;
  --ci-pink90: #8C3D59;
  --ci-pink100: #6B2E44;
  --ci-purple10: #F7F6FE;
  --ci-purple20: #EBE9FB;
  --ci-purple30: #DCD7F9;
  --ci-purple40: #CBC4F6;
  --ci-purple50: #BCB3F3;
  --ci-purple60: #ADA2F0;
  --ci-purple70: #938ACC;
  --ci-purple80: #7B73AA;
  --ci-purple90: #635C89;
  --ci-purple100: #4E496C;
  --ci-green10: #EFFEFB;
  --ci-green20: #CDFBF4;
  --ci-green30: #B4F9EE;
  --ci-green40: #92F7E6;
  --ci-green50: #7DF5E1;
  --ci-green60: #5DF3DA;
  --ci-green70: #55DDC6;
  --ci-green80: #42AD9B;
  --ci-green90: #338678;
  --ci-green100: #27665C;
  --ci-gray10: #F2F2F2;
  --ci-gray20: #D8D8D8;
  --ci-gray30: #C5C5C5;
  --ci-gray40: #AAAAAA;
  --ci-gray50: #999999;
  --ci-gray60: #747474;
  --ci-gray70: #5B5B5B;
  --ci-gray80: #5B5B5B;
  --ci-gray90: #464646;
  --ci-gray100: #363636;
}

* {
  -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; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}

main {
  display: block;
}

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

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

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

a {
  background-color: transparent;
  text-decoration: none;
}

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

b,
strong {
  font-weight: bolder;
}

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

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; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

button,
input {
  /* 1 */
  overflow: visible;
}

button,
select {
  /* 1 */
  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: 0.35em 0.75em 0.625em;
}

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

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

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

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

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

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

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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: #000000;
}

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 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  font-size: 0.75rem;
  line-height: normal;
  font-weight: 700;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  color: var(--colorWhite);
  background-color: var(--colorPrimary);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  flex-wrap: nowrap;
  align-items: center;
}
@media (min-width: 768px) {
  .btn {
    font-size: 0.875rem;
  }
}
@media (min-width: 1024px) {
  .btn {
    height: 48px;
    line-height: 48px;
  }
}
.btn:hover {
  background-color: var(--colorPrimaryLight);
  border-color: var(--colorPrimaryLight);
  color: var(--colorPrimary);
}
.btn.outline {
  background: transparent;
  color: var(--colorGray300);
  border: 1px solid var(--colorGray300);
  box-shadow: none;
}
.btn.small {
  font-size: 0.75rem;
  line-height: normal;
  font-weight: 700;
  height: 44px;
  line-height: 44px;
}
@media (min-width: 768px) {
  .btn.small {
    font-size: 0.875rem;
  }
}
.btn.disabled, .btn:disabled {
  background-color: var(--colorGray100);
  color: var(--colorGray300);
  border-color: var(--colorGray100);
  cursor: unset;
}
.btn.facebook {
  background: #2081e2;
  border-color: #2081e2;
  color: #ffffff;
  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;
}

.btnTop {
  color: var(--colorPrimary);
  display: flex;
  align-items: center;
  width: 40px;
  height: 40px;
  background: url(../img/ui/button/ico-top.svg) center center no-repeat;
  background-size: contain;
}
@media (min-width: 768px) {
  .btnTop {
    width: 52px;
    height: 52px;
  }
}
.btnTop:hover {
  transform: scale(1.2);
}

.link {
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  column-gap: 12px;
}
.link:after {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  position: relative;
  content: "";
  display: block;
  right: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.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: #ffffff;
}
.link.gray {
  color: #929292;
}
.link.gray:after {
  background-image: url(../img/ci/ico-arrow-r-gray.svg);
}
.link.down {
  font-size: 1rem;
}
@media (min-width: 1024px) {
  .link.down {
    font-size: 1.25rem;
  }
}
.link.down:after {
  right: inherit;
  background-image: url(../img/ci/ico-arrow-d.svg);
}
.link.down:hover {
  color: var(--colorPrimary);
}

a.btnBack {
  color: var(--colorPrimary);
  font-size: 0.625rem;
  line-height: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
}
@media (min-width: 768px) {
  a.btnBack {
    font-size: 0.75rem;
  }
}
@media (min-width: 1024px) {
  a.btnBack {
    font-size: 1.5625rem;
  }
}
a.btnBack:before {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  position: relative;
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-color: var(--colorPrimary);
  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: transparent;
}
#btnLoadmore:hover:after {
  right: inherit;
  border-color: #ffffff;
}

#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: #ffffff;
  width: 52px;
  height: 52px;
  border: 1px solid #d6d6d6;
  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.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: #ffffff;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.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: #ffffff;
}
#btnFilter.active i:before {
  border-color: #ffffff;
  background-color: var(--colorPrimary);
}
#btnFilter.active i:first-child:before {
  left: 11px;
}
#btnFilter.active i:last-child:before {
  left: -1px;
}

.btnGoogleMap {
  display: block;
  width: 180px;
  height: 57px;
  overflow: hidden;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border: 1px solid var(--colorPrimaryOutline);
  background: url(../img/ci/icon/ico-logo-googlemap.svg) center center no-repeat;
  background-color: var(--colorWhite);
  background-size: auto 24px;
}
.btnGoogleMap:hover {
  background-color: var(--colorGray100);
}

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, 0.5);
}

#btnMenu {
  width: 24px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#btnMenu span {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  position: relative;
  width: 20px;
  height: 2px;
  background-color: transparent;
  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 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  display: block;
  height: 2px;
  background-color: var(--colorPrimary);
  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 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 94035;
  height: auto;
  min-height: 64px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--colorWhite);
}
@media (min-width: 1024px) {
  header {
    height: 77px;
  }
}
header .bHeader {
  margin-inline: auto;
  width: calc(100% - 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: row;
}
@media (min-width: 768px) {
  header .bHeader {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  header .bHeader {
    max-width: 1224px;
  }
}
header .bHeader .bLeft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
  padding: 16px 0;
}
@media (min-width: 1024px) {
  header .bHeader .bLeft {
    width: auto;
    flex-grow: 1;
    flex-basis: 0;
  }
}
header .bHeader .bLeft .bLogo img {
  display: block;
  width: auto;
  height: 26px;
}
header .bHeader .bMenu {
  display: none;
  border-top: 1px solid var(--colorPrimaryOutline);
  padding: 32px 0;
  position: absolute;
  width: 100%;
  background-color: var(--colorWhite);
  left: 0;
  top: 100%;
}
@media (min-width: 1024px) {
  header .bHeader .bMenu {
    position: relative;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    border: none;
    display: block;
    width: initial;
    padding: 0;
  }
}
header .bHeader .bMenu nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
@media (min-width: 767px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  header .bHeader .bMenu nav {
    zoom: 0.9;
  }
}
@media (min-width: 1024px) {
  header .bHeader .bMenu nav {
    column-gap: 44px;
    flex-direction: row;
  }
}
header .bHeader .bMenu nav > a {
  font-size: 0.875rem;
  line-height: normal;
  color: var(--colorTypoBasetext);
}
@media (min-width: 768px) {
  header .bHeader .bMenu nav > a {
    font-size: 1rem;
  }
}
header .bHeader .bMenu nav > a:hover, header .bHeader .bMenu nav > a.active {
  color: var(--colorPrimary);
}
header .bHeader .bMenu nav > a.active {
  font-weight: bold;
}
header .bHeader .bRight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}
@media (min-width: 1024px) {
  header .bHeader .bRight {
    display: flex;
    justify-content: flex-end;
    flex-grow: 1;
    flex-basis: 0;
  }
}

footer {
  background-color: var(--colorWhite);
  border-top: 2px solid var(--ci-gray10);
  padding: 32px 0;
}
@media (min-width: 767px) and (max-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) {
  footer {
    zoom: 0.8;
  }
}
@media (min-width: 768px) {
  footer {
    padding: 40px 0;
  }
}
footer .bFooter {
  margin-inline: auto;
  width: calc(100% - 48px);
  margin-bottom: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 36px;
}
@media (min-width: 768px) {
  footer .bFooter {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  footer .bFooter {
    max-width: 1224px;
  }
}
@media (min-width: 768px) {
  footer .bFooter {
    margin-bottom: 64px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    align-items: flex-start;
  }
}
footer .bFooter a {
  color: var(--colorTypoBasetext);
  font-weight: 300;
}
footer .bFooter a:hover {
  color: var(--colorPrimary);
}
footer .bFooter .bCompanuInfo {
  gap: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 768px) {
  footer .bFooter .bCompanuInfo {
    align-items: flex-start;
    justify-content: flex-start;
  }
}
footer .bFooter .bCompanuInfo .bAddress {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
@media (min-width: 768px) {
  footer .bFooter .bCompanuInfo .bAddress {
    align-items: flex-start;
    justify-content: flex-start;
  }
}
footer .bFooter .bCompanuInfo .bAddress h3 {
  font-size: 0.875rem;
  line-height: normal;
}
@media (min-width: 768px) {
  footer .bFooter .bCompanuInfo .bAddress h3 {
    font-size: 1rem;
  }
}
footer .bFooter .bCompanuInfo .bAddress p {
  font-size: 0.75rem;
  line-height: normal;
  font-weight: 300;
  text-align: center;
}
@media (min-width: 768px) {
  footer .bFooter .bCompanuInfo .bAddress p {
    font-size: 0.875rem;
  }
}
@media (min-width: 768px) {
  footer .bFooter .bCompanuInfo .bAddress p {
    text-align: left;
  }
}
footer .bFooter .bContact {
  width: 100%;
  gap: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 36px 0;
  border-top: 1px solid var(--colorPrimaryOutline);
  border-bottom: 1px solid var(--colorPrimaryOutline);
}
@media (min-width: 768px) {
  footer .bFooter .bContact {
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0;
    border: none;
  }
}
footer .bFooter .bContact > h3 {
  font-size: 1.125rem;
  line-height: normal;
}
@media (min-width: 768px) {
  footer .bFooter .bContact > h3 {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  footer .bFooter .bContact > h3 {
    font-size: 1rem;
    line-height: normal;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  footer .bFooter .bContact > h3 {
    font-size: 1.125rem;
  }
}
footer .bFooter .bContact .bGroup {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 768px) {
  footer .bFooter .bContact .bGroup {
    align-items: flex-start;
    justify-content: flex-start;
  }
}
footer .bFooter .bContact nav {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
@media (min-width: 768px) {
  footer .bFooter .bContact nav {
    align-items: flex-start;
    justify-content: flex-start;
    padding-left: 32px;
  }
}
footer .bFooter .bContact nav:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain;
}
@media (min-width: 768px) {
  footer .bFooter .bContact nav:before {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 0;
    top: -2px;
  }
}
footer .bFooter .bContact nav.bContactCall:before {
  background-image: url(../img/ci/icon/ico-phone.svg);
}
footer .bFooter .bContact nav.bContactMail:before {
  background-image: url(../img/ci/icon/ico-mail.svg);
}
footer .bFooter .bContact nav.bContactLine span {
  font-weight: 300;
}
footer .bFooter .bContact nav.bContactLine a {
  font-weight: bold;
}
footer .bFooter .bContact nav.bContactLine:before {
  background-image: url(../img/ci/icon/ico-line.svg);
}
footer .bFooter .bSitemap {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 768px) {
  footer .bFooter .bSitemap {
    align-items: flex-start;
    justify-content: flex-start;
  }
}
footer .bFooter .bSitemap > h3 {
  font-size: 1.125rem;
  line-height: normal;
}
@media (min-width: 768px) {
  footer .bFooter .bSitemap > h3 {
    font-size: 1.25rem;
  }
}
@media (min-width: 768px) {
  footer .bFooter .bSitemap > h3 {
    font-size: 1rem;
    line-height: normal;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  footer .bFooter .bSitemap > h3 {
    font-size: 1.125rem;
  }
}
footer .bFooter .bSitemap nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 12px;
  grid-row-gap: 16px;
}
footer .bCopyright {
  margin-inline: auto;
  width: calc(100% - 48px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 16px;
  border-top: 1px solid var(--colorPrimaryOutline);
}
@media (min-width: 768px) {
  footer .bCopyright {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  footer .bCopyright {
    max-width: 1224px;
  }
}
@media (min-width: 768px) {
  footer .bCopyright {
    flex-direction: row;
    justify-content: space-between;
  }
}
footer .bCopyright .bCopy {
  font-size: 0.625rem;
  line-height: normal;
  font-weight: 300;
}
@media (min-width: 768px) {
  footer .bCopyright .bCopy {
    font-size: 0.75rem;
  }
}
footer .bCopyright .bPdpa nav a {
  font-size: 0.625rem;
  line-height: normal;
  border-right: 1px solid var(--colorPrimaryOutline);
  padding: 0 12px;
  color: var(--colorTypoBasetext);
  font-weight: 300;
}
@media (min-width: 768px) {
  footer .bCopyright .bPdpa nav a {
    font-size: 0.75rem;
  }
}
footer .bCopyright .bPdpa nav a:hover {
  color: var(--colorPrimary);
}
footer .bCopyright .bPdpa nav a:last-child {
  border-right: none;
}

.btnTop {
  position: fixed;
  bottom: 3%;
  right: 3%;
}

section#pPdpa {
  z-index: 94035;
  box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  padding: 20px 0;
}
section#pPdpa p {
  font-size: 0.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: 0.625rem;
  line-height: normal;
  font-weight: 500;
  color: var(--colorPrimary);
  text-transform: uppercase;
}
@media (min-width: 768px) {
  section#pPdpa .bPdpa .bGroup .bText span {
    font-size: 0.75rem;
  }
}
section#pPdpa .bPdpa .bGroup p {
  color: var(--colorPrimary);
  font-size: 0.875rem;
  line-height: normal;
}
@media (min-width: 768px) {
  section#pPdpa .bPdpa .bGroup p {
    font-size: 1rem;
  }
}
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: 0.625rem;
  line-height: normal;
  text-decoration: underline;
  color: var(--colorPrimary);
}
@media (min-width: 768px) {
  section#pPdpa .bPdpa .bPolicy a,
  section#pPdpa .bPdpa .bPolicy span {
    font-size: 0.75rem;
  }
}
section#pPdpa .bPdpa .bPolicy span {
  margin: 0 4px;
}
section#pPdpa .bPdpa .bPolicy a:hover {
  color: var(--colorPrimary);
}

#pBreadcrumb {
  margin-inline: auto;
  width: calc(100% - 48px);
  padding: 24px 0;
}
@media (min-width: 768px) {
  #pBreadcrumb {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  #pBreadcrumb {
    max-width: 1224px;
  }
}
@media (min-width: 768px) {
  #pBreadcrumb {
    padding: 48px 0;
  }
}
#pBreadcrumb nav {
  width: 100%;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
#pBreadcrumb nav a {
  display: flex;
  align-items: center;
  column-gap: 16px;
  font-size: 0.75rem;
  line-height: normal;
  font-weight: 300;
  color: var(--colorTypoSubtext2);
}
@media (min-width: 768px) {
  #pBreadcrumb nav a {
    font-size: 0.875rem;
  }
}
#pBreadcrumb nav a:before {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  background: url(../img/ui/breadcrumb/ico-arrow.svg) center center no-repeat;
  background-size: contain;
}
#pBreadcrumb nav a:hover {
  text-decoration: underline;
}
#pBreadcrumb nav a:first-child:before {
  display: none;
}
#pBreadcrumb nav a:last-child {
  color: var(--colorTypoSubtext1);
  font-weight: bold;
}
#pBreadcrumb .bBreadcrumb.white a {
  color: #fff;
}
#pBreadcrumb .bBreadcrumb.white a:last-child {
  color: var(--colorTypoSubtext1);
}

#pPagination {
  margin: 20px 0;
}
#pPagination .bPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 36px;
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
}
@media (max-width: 767px) {
  #pPagination .bPagination {
    column-gap: 10px;
  }
}
@media (max-width: 320px) {
  #pPagination .bPagination {
    zoom: 0.7;
  }
}
#pPagination .bPagination .btnPagination, #pPagination .bPagination a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: var(--colorTypoSubtext2);
  white-space: nowrap;
  font-weight: 300;
}
#pPagination .bPagination .btnPagination.active, #pPagination .bPagination a.active {
  color: var(--colorPrimary);
  font-weight: bold;
}
#pPagination .bPagination .btnPagination:hover, #pPagination .bPagination a:hover {
  color: var(--colorPrimary);
}
#pPagination .bPagination .btnPagination.disable, #pPagination .bPagination a.disable {
  background-color: var(--colorGray800);
  color: var(--colorGray50);
  border: none;
  cursor: default;
}
#pPagination .bPagination .btnPagination.disable:hover, #pPagination .bPagination a.disable:hover {
  background-color: var(--colorGray800);
  color: var(--colorGray50);
}
@media (max-width: 767px) {
  #pPagination .bPagination .btnPagination, #pPagination .bPagination a {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }
}
#pPagination .bPagination .bCenter {
  display: flex;
  column-gap: 56px;
  justify-content: center;
}
@media (max-width: 767px) {
  #pPagination .bPagination .bCenter {
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 8px;
  }
}
#pPagination .bPagination .bLeft a,
#pPagination .bPagination .bRight a {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  -ms-border-radius: 100px;
  -o-border-radius: 100px;
  display: flex;
  flex-wrap: nowrap;
  background-color: var(--colorPrimary);
  border: 1px solid transparent;
  font-size: 0.875rem;
  line-height: normal;
  zoom: 0.8;
}
@media (min-width: 768px) {
  #pPagination .bPagination .bLeft a,
  #pPagination .bPagination .bRight a {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  #pPagination .bPagination .bLeft a,
  #pPagination .bPagination .bRight a {
    zoom: 1;
  }
}
#pPagination .bPagination .bLeft a:before, #pPagination .bPagination .bLeft a:after,
#pPagination .bPagination .bRight a:before,
#pPagination .bPagination .bRight a:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
#pPagination .bPagination .bLeft a:hover,
#pPagination .bPagination .bRight a:hover {
  background-color: #f7fcfe;
  border-color: var(--colorPrimary);
}
#pPagination .bPagination .bLeft a:after {
  display: none;
}
#pPagination .bPagination .bLeft a:before {
  background-image: url(../img/ui/pagiantion/ico-arrowL.svg);
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-mask: url("../img/ui/pagiantion/ico-arrowL.svg") center center no-repeat;
  mask: url("../img/ui/pagiantion/ico-arrowL.svg") center center no-repeat;
  mask-size: contain;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  background-color: #f7fcfe;
}
#pPagination .bPagination .bLeft a:hover:before {
  background-color: var(--colorPrimary);
}
#pPagination .bPagination .bRight a:before {
  display: none;
}
#pPagination .bPagination .bRight a:after {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -webkit-mask: url("../img/ui/pagiantion/ico-arrowR.svg") center center no-repeat;
  mask: url("../img/ui/pagiantion/ico-arrowR.svg") center center no-repeat;
  mask-size: contain;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  background-color: #f7fcfe;
}
#pPagination .bPagination .bRight a:hover:after {
  background-color: var(--colorPrimary);
}

html {
  font-size: var(--baseFontsize);
  scroll-padding-top: 64px;
  padding-top: 64px;
}
@media (min-width: 1024px) {
  html {
    scroll-padding-top: 77px;
    padding-top: 77px;
  }
}

body {
  font-family: "Lexend", "Kanit", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  line-height: normal;
  font-size: 0.875rem;
  line-height: normal;
  color: var(--colorTypoBasetext);
  min-height: -webkit-fill-available;
  background-color: var(--colorBgForeground);
  overflow-x: hidden;
}
@media (min-width: 768px) {
  body {
    font-size: 1rem;
  }
}

.container {
  margin-inline: auto;
  width: calc(100% - 48px);
}
@media (min-width: 768px) {
  .container {
    width: 90%;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1224px;
  }
}

a {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  color: var(--colorPrimary);
}
a:hover {
  color: var(--colorSecondary);
}

.bPreload {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 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] {
  position: relative;
}
div[id^=page] .wrapContent {
  position: relative;
}
.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(--colorGray700);
  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: 0.875rem;
  line-height: normal;
}
@media (min-width: 768px) {
  #pLoadmore .bLoadmore p {
    font-size: 1rem;
  }
}
@media (min-width: 768px) {
  #pLoadmore .bLoadmore p {
    font-size: 1rem;
    line-height: normal;
  }
}
@media (min-width: 768px) and (min-width: 768px) {
  #pLoadmore .bLoadmore p {
    font-size: 1.125rem;
  }
}

span.cat-label-link {
  background-color: transparent !important;
  color: #fff !important;
  padding: 5px !important;
  border: none !important;
  margin-bottom: 0 !important;
}
span.cat-label-link:hover {
  background-color: transparent !important;
  color: #fff !important;
}

.pt-0 {
  padding-top: 0 !important;
}

section#pRelate {
  background: none !important;
}

/*# sourceMappingURL=style.css.map */