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,
dl,
dt,
dd,
ol,
ul,
li,
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;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

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

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

a {
  text-decoration: none;
}

body {
  color: #212121;
  line-height: 1.2;
  background-color: #F5F5F5;
}

body .main {
  padding-top: 100px;
  padding-bottom: 360px;
  background: url("../img/background/bg1.png") no-repeat left 14px top 20px, url("/img/background/bg2.png") no-repeat left top 20px, url("/img/background/bg3.png") no-repeat center, url("/img/background/bg5.png") no-repeat right 180px bottom 47px, url("/img/background/bg6.png") no-repeat center bottom, url("/img/background/bg4.png") no-repeat center bottom;
  background-size: auto, auto, 100%, auto, 100%, 100%;
  background-color: #F5F5F5;
}

@media (max-width: 991px) {
  body .main {
    padding-top: 40px;
    padding-bottom: 200px;
    background: url("../img/background/bg1.png") no-repeat left 14px top 20px, url("/img/background/bg2.png") no-repeat left top 20px, url("/img/background/bg3.png") no-repeat center, url("/img/background/bg5.png") no-repeat right 10px bottom 20px, url("/img/background/bg6.png") no-repeat center bottom, url("/img/background/bg4.png") no-repeat center bottom;
    background-size: auto, auto, 100%, 50%, 100%, 100%;
  }
}

@media (max-width: 576px) {
  body .main {
    padding-bottom: 100px;
  }
}

body .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 14px;
}

body .pagination .prevest img {
  rotate: 180deg;
}

body .pagination .page {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

body .pagination .page a {
  font-size: 20px;
  font-weight: 700;
  color: #8f9997;
}

body .pagination .page.active,
body .pagination .page:hover {
  background: #43b794;
}

body .pagination .page.active a,
body .pagination .page:hover a {
  color: #fff;
}

body .search {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-bottom: 60px;
}

body .search input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border: none;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1) inset;
  background: #f9f9f9;
  padding: 18px 20px 18px 60px;
  border-radius: 10px;
  background: url("../img/other/search.svg") no-repeat left 20px center;
}

body .search button {
  padding: 16px 40px;
  font-size: 22px;
  color: #fff;
  background: #43b794;
  border-radius: 10px;
  border: none;
}

@media (max-width: 768px) {
  body .search {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body .search2 {
  padding: 20px;
  background: #fff;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 60px;
  border-radius: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

body .search2 div.defaultArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  gap: 20px;
}

body .search2 div.defaultArea input {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  border-radius: 10px;
  border: none;
  padding: 18px 20px 18px 60px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  background: url("../img/other/search.svg") no-repeat left 20px center;
  background-color: #f9f9f9;
}

body .search2 div.defaultArea select {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  border-radius: 10px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding: 18px 54px;
}

body .search2 div.defaultArea select:first-child {
  background: url("../img/other/pin.svg") no-repeat left 10px center, url("/img/other/expand.svg") no-repeat right 10px center;
  background-color: #f9f9f9;
}

body .search2 div.defaultArea select:last-child {
  background: url("../img/other/filter.svg") no-repeat left 10px center, url("/img/other/expand.svg") no-repeat right 10px center;
  background-color: #f9f9f9;
}

body .search2 div.defaultArea button[type=submit] {
  border-radius: 10px;
  color: #fff;
  border: none;
  font-size: 22px;
  padding: 16px 40px;
  background: #43b794;
}

body .search2 div.defaultArea button.selectBtn {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  border-radius: 10px;
  border: none;
  padding: 18px 54px;
  color: #000;
  font-size: 16px;
  background: url("../img/other/filter.svg") no-repeat left 10px center;
  background-color: #f9f9f9;
  position: relative;
}

body .search2 div.defaultArea button.selectBtn::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: url("../img/other/expand.svg") no-repeat center;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

body .search2 div.defaultArea button.selectBtn.active::after {
  -webkit-transform: translateY(50%);
  transform: translateY(50%);
  rotate: 180deg;
}

@media (max-width: 991px) {
  body .search2 div.defaultArea {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  body .search2 div.defaultArea input {
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }

  body .search2 div.defaultArea select {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
  }

  body .search2 div.defaultArea button[type=submit] {
    width: 100%;
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }

  body .search2 div.defaultArea button.selectBtn {
    width: 100%;
  }
}

@media (max-width: 768px) {
  body .search2 div.defaultArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  body .search2 div.defaultArea select {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }
}

body .search2 div.hiddenArea.mobile {
  display: none;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea.mobile {
    display: none;
  }

  body .search2 div.hiddenArea.mobile.active {
    display: block;
  }
}

body .search2 div.hiddenArea.desktop {
  padding-top: 20px;
  display: none;
}

body .search2 div.hiddenArea.desktop.active {
  display: block;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea.desktop {
    display: none;
  }

  body .search2 div.hiddenArea.desktop.active {
    display: none;
  }
}

body .search2 div.hiddenArea .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px 40px;
  margin-bottom: 20px;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body .search2 div.hiddenArea .top .dateArea {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px 10px;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .top .dateArea {
    width: 100%;
  }
}

@media (max-width: 440px) {
  body .search2 div.hiddenArea .top .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body .search2 div.hiddenArea .top .dateArea input {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  padding: 20px;
  border-radius: 10px;
  border: none;
  background: #f9f9f9;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .top .dateArea input {
    -webkit-box-ordinal-group: initial;
    -ms-flex-order: initial;
    order: initial;
  }
}

body .search2 div.hiddenArea .top .dateArea input[type=date]::-webkit-calendar-picker-indicator {
  width: 20px;
  height: 25px;
  background: url("../img/other/date2.svg") no-repeat center;
}

body .search2 div.hiddenArea .top .inputArea {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px 10px;
}

body .search2 div.hiddenArea .top .typeArea {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  padding: 12px;
  border-radius: 10px;
  border: none;
  background: #f9f9f9;
  gap: 12px 0;
  align-items: center;
  gap: 10px;
}

@media (max-width:992px) {
  body .search2 div.hiddenArea .top .typeArea {
    width: 100%;
  }
}

body .search2 div.hiddenArea .top .typeArea label {
  flex: 1;
}

body .search2 div.hiddenArea .top .typeArea label span {
  color: #43b794;
  border: 1px solid #43b794;
  border-radius: 8px;
  padding: 8px;
  display: block;
  text-align: center;
}

body .search2 div.hiddenArea .top .typeArea label input:checked+span {
  background: #43b794;
  color: #fff;
}

body .search2 div.hiddenArea .top .typeArea label input {
  display: none;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .top .inputArea {
    width: 100%;
  }
}

@media (max-width: 440px) {
  body .search2 div.hiddenArea .top .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body .search2 div.hiddenArea .top .inputArea input {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  padding: 20px;
  border-radius: 10px;
  border: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  position: relative;
}

body .search2 div.hiddenArea .top .inputArea input.ping {
  background: url("../img/other/ping.svg") no-repeat right 20px center;
  background-color: #f9f9f9;
}

body .search2 div.hiddenArea .top .inputArea input.year {
  background: url("../img/other/year.svg") no-repeat right 20px center;
  background-color: #f9f9f9;
}

body .search2 div.hiddenArea .top .inputArea input.wan {
  background: url("../img/other/wan.svg") no-repeat right 20px center;
  background-color: #f9f9f9;
}

body .search2 div.hiddenArea .top .inputArea input::-webkit-inner-spin-button,
body .search2 div.hiddenArea .top .inputArea input::-webkit-outer-spin-button {
  display: none;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .top .inputArea input {
    -webkit-box-ordinal-group: initial;
    -ms-flex-order: initial;
    order: initial;
  }
}

body .search2 div.hiddenArea .inputArea2 {
  width: 100%;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px 10px;
}

@media (max-width: 440px) {
  body .search2 div.hiddenArea .inputArea2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.loginMoreBtn {
  display: flex;
  align-items: center;
  margin: 0 auto 20px;
  background: #FFE248;
  gap: 10px;
  padding: 12px 40px;
  border-radius: 10px;
  border: none;
  box-shadow: 3px 6px 8px 0px #00000040;
  font-size: 22px;
  font-weight: 500;
}

body .search2 div.hiddenArea .inputArea2 input {
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  padding: 20px;
  border-radius: 10px;
  border: none;
  background: url("../img/other/wan.svg") no-repeat right 20px center;
  background-color: #f9f9f9;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

body .search2 div.hiddenArea .inputArea2 input::-webkit-inner-spin-button,
body .search2 div.hiddenArea .inputArea2 input::-webkit-outer-spin-button {
  display: none;
}

@media (max-width: 992px) {
  body .search2 div.hiddenArea .inputArea2 input {
    -webkit-box-ordinal-group: initial;
    -ms-flex-order: initial;
    order: initial;
  }
}

body .search2 div.hiddenArea .checkoutArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 15px;
}

@media (max-width: 640px) {
  body .search2 div.hiddenArea .checkoutArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

body .search2 div.hiddenArea .checkoutArea>p {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

body .search2 div.hiddenArea .checkoutArea .inner {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1) inset;
  padding: 12px;
  padding-right: 0;
  border-radius: 10px;
  border: none;
  background: #f9f9f9;
  gap: 12px 0;
}

body .search2 div.hiddenArea .checkoutArea .inner .item {
  width: 25%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  gap: 10px;
  padding-right: 20px;
}

@media (max-width: 1200px) {
  body .search2 div.hiddenArea .checkoutArea .inner .item {
    width: 50%;
  }
}

@media (max-width: 640px) {
  body .search2 div.hiddenArea .checkoutArea .inner .item {
    width: 100%;
  }
}

body .search2 div.hiddenArea .checkoutArea .inner .item label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

body .search2 div.hiddenArea .checkoutArea .inner .item label span {
  color: #43b794;
  border: 1px solid #43b794;
  border-radius: 8px;
  padding: 8px;
  display: block;
  text-align: center;
}

body .search2 div.hiddenArea .checkoutArea .inner .item label input {
  display: none;
}

body .search2 div.hiddenArea .checkoutArea .inner .item label input:checked+span {
  background: #43b794;
  color: #fff;
}

header .top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 16px 40px;
}

header .top h1 {
  width: 170px;
}

header .top .right {
  min-width: 170px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: end;
}

header .top .right a {
  padding: 14px 28px;
  border-radius: 8px;
  font-size: 22px;
  color: #fff;
  font-weight: 700;
  border-radius: 8px;
  background: #63bfc5;
}

header .top .right a.member {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  background: #ffa557;
  text-align: center;
}

header .top .right .hamBtn {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
}

header .top .right .hamBtn div {
  width: 32px;
  height: 4px;
  border-radius: 40px;
  background: #000;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

header .top .right .hamBtn.active div:first-child {
  -webkit-transform: translateY(8px) rotate(45deg);
  transform: translateY(8px) rotate(45deg);
}

header .top .right .hamBtn.active div:nth-child(2) {
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
  opacity: 0;
}

header .top .right .hamBtn.active div:last-child {
  -webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

header nav {
  background: #ffbd3c;
}

header nav>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

header nav>ul>li {
  position: relative;
}

header nav>ul>li .pageLink {
  font-size: 20px;
  color: #fff;
  padding: 20px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

header nav>ul>li .pageLink::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 8px;
  background: #fff;
  display: block;
  right: 0;
}

header nav>ul>li:last-child .pageLink::after {
  display: none;
}

header nav>ul>li:hover ul {
  display: block;
}

header nav>ul>li ul {
  display: none;
  width: 100%;
  position: absolute;
  z-index: 99;
  background: rgba(0, 0, 0, 0.6);
}

header nav>ul>li ul li a {
  padding: 10px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 20px;
  color: #ffa557;
}

header nav>ul>li ul li a:hover {
  color: #ffe248;
}

header .mobile {
  width: 100%;
  height: calc(100% - 90px);
  background-color: #ffbd3c;
  position: fixed;
  top: 90px;
  left: 0;
  padding: 20px;
  z-index: 9999;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

header .mobile .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}

header .mobile .btnGroup a {
  padding: 12px 28px;
  color: #fff;
  font-size: 20px;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

header .mobile .btnGroup a.login {
  background: #3ab2c3;
}

header .mobile .btnGroup a.member {
  background: #43b794;
}

header .mobile ul li .pageLink {
  font-size: 24px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 10px;
  color: #212121;
}

header .mobile ul li ul li a {
  display: block;
  padding: 4px 15px;
  font-size: 20px;
  color: #212121;
}

@media (max-width: 991px) {
  header .mobile.active {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@media (max-width: 1400px) {
  header nav ul li .pageLink {
    padding: 10px 20px;
  }
}

@media (max-width: 1200px) {
  header nav ul li .pageLink {
    font-size: 18px;
  }
}

@media (max-width: 991px) {
  header .top {
    padding: 16px 20px;
  }

  header .top h1 {
    width: 150px;
  }

  header .top .right {
    width: 150px;
  }

  header .top .right a {
    display: none;
  }

  header .top .right a.member {
    display: none;
  }

  header .top .right .hamBtn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  header nav {
    display: none;
  }
}

@media (max-width: 768px) {
  header .top .middle {
    display: none;
  }
}

footer .ad {
  background: #ffe248;
  padding: 80px 0;
}

footer .ad .swiper-wrapper .swiper-slide div {
  /* padding: 50px 0; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: #fff;
}

footer .ad .swiper-wrapper .swiper-slide div p {
  color: #a8a8a8;
  font-size: 24px;
  font-weight: 700;
}

footer .copyRight {
  font-size: 18px;
  color: #fff;
  padding: 20px;
  background: #3ab2c3;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 0;
}

@media (max-width: 768px) {
  footer .ad ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  footer .ad ul li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

.forgetModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: none;
}

.forgetModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.forgetModal form {
  width: 90%;
  max-width: 600px;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  font-size: 20px;
  position: relative;
}

.forgetModal form .close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.forgetModal form h3 {
  text-align: center;
  font-size: 32px;
  color: #ffa557;
  margin-bottom: 20px;
  font-weight: 700;
}

.forgetModal form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.forgetModal form .inputArea label {
  width: 80px;
}

.forgetModal form .inputArea input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 8px;
  background: #f3f3f3;
  padding: 16px;
}

.forgetModal form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.forgetModal form .btnGroup button {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 24px;
  color: #fff;
  background: #ffa557;
  border: none;
}

@media (max-width: 576px) {
  .forgetModal form {
    padding: 20px;
  }

  .forgetModal form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.forgetSuccessModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: none;
}

.forgetSuccessModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.forgetSuccessModal div {
  width: 90%;
  max-width: 600px;
  background: #fff;
  border-radius: 12px;
  padding: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}

.forgetSuccessModal div button {
  padding: 12px 40px;
  background: #3ab2c3;
  border: none;
  border-radius: 40px;
  color: #fff;
  font-size: 24px;
}

.registerModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.registerModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.registerModal form {
  width: 90%;
  max-width: 600px;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  font-size: 20px;
}

.registerModal form h3 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #ffa557;
}

.registerModal form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.registerModal form .inputArea label {
  width: 80px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.registerModal form .inputArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  width: 100%;
}

.registerModal form .inputArea input {
  padding: 16px;
  border-radius: 8px;
  background: #f3f3f3;
  border: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

.registerModal form .inputArea button {
  border-radius: 8px;
  background: #ffa557;
  padding: 12px 16px;
  color: #fff;
  border: none;
}

.registerModal form .checkArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.registerModal form .checkArea button {
  color: #3d9e8d;
  background: transparent;
  border: none;
  text-decoration: underline;
}

.registerModal form .checkArea label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
}

.registerModal form .checkArea label input {
  display: none;
}

.registerModal form .checkArea label input:checked+span {
  background: url("../img/other/checked.svg") no-repeat center;
  background-size: contain;
}

.registerModal form .checkArea label span {
  width: 24px;
  height: 24px;
  display: block;
  background: url("../img/other/check.svg") no-repeat center;
  background-size: contain;
}

.registerModal form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.registerModal form .btnGroup button {
  border: none;
  border-radius: 40px;
  padding: 15px 40px;
}

.registerModal form .btnGroup button.back {
  border: 1px solid #ffa557;
  background: #fff7ce;
  color: #ffa557;
}

.registerModal form .btnGroup button.next {
  color: #fff;
  background: #3ab2c3;
}

@media (max-width: 768px) {
  .registerModal form {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .registerModal form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .registerModal form .checkArea {
    font-size: 16px;
  }

  .registerModal form .checkArea label span {
    width: 20px;
    height: 20px;
    display: block;
    background: url("../img/other/check.svg") no-repeat center;
    background-size: contain;
  }
}

@media (max-width: 440px) {
  .registerModal form .inputArea div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.termModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: none;
}

.termModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.termModal>div {
  width: 90%;
  max-width: 600px;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  font-size: 20px;
}

.termModal>div h3 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  color: #ffa557;
  margin-bottom: 20px;
}

.termModal>div p {
  max-height: 420px;
  overflow: auto;
  margin-bottom: 20px;
}

.termModal .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.termModal .btnGroup button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 40px;
  border-radius: 40px;
  background: #3ab2c3;
  color: #fff;
  border: none;
}

@media (max-width: 768px) {
  .termModal>div {
    padding: 20px;
  }
}

.normalModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.normalModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.normalModal form {
  width: 90%;
  max-width: 800px;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  font-size: 20px;
}

.normalModal form h3 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #ffa557;
}

.normalModal form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.normalModal form .inputArea label {
  width: 80px;
}

.normalModal form .inputArea input {
  padding: 16px;
  border-radius: 8px;
  background: #f3f3f3;
  border: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

.normalModal form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.normalModal form .btnGroup button {
  border: none;
  border-radius: 40px;
  padding: 15px 40px;
}

.normalModal form .btnGroup button.back {
  border: 1px solid #ffa557;
  background: #fff7ce;
  color: #ffa557;
}

.normalModal form .btnGroup button.next {
  color: #fff;
  background: #3ab2c3;
}

@media (max-width: 768px) {
  .normalModal form {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .normalModal form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.formalModal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0;
  left: 0;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.formalModal.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.formalModal form {
  width: 90%;
  max-width: 800px;
  max-height: 600px;
  overflow: auto;
  padding: 40px;
  background: #fff;
  border-radius: 12px;
  font-size: 20px;
}

.formalModal form h3 {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
  color: #ffa557;
}

.formalModal form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.formalModal form .inputArea label {
  width: 100px;
}

.formalModal form .inputArea input {
  padding: 16px;
  border-radius: 8px;
  background: #f3f3f3;
  border: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
}

.formalModal form .inputArea div {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f3f3f3;
  border-radius: 8px;
}

.formalModal form .inputArea div input {
  background: #fff;
  padding: 10px;
}

.formalModal form .inputArea div input:first-child {
  width: 80px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

.formalModal form .radioArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.formalModal form .radioArea .title {
  width: 100px;
}

.formalModal form .radioArea div {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.formalModal form .radioArea div label {
  width: 30%;
}

.formalModal form .radioArea div label input {
  display: none;
}

.formalModal form .radioArea div label input:checked+span {
  background: #3ab2c3;
  color: #fff;
}

.formalModal form .radioArea div label span {
  color: #3ab2c3;
  background: #e9f6f4;
  border: 1px solid #3ab2c3;
  padding: 10px;
  display: block;
  border-radius: 8px;
  text-align: center;
}

.formalModal form .selectArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.formalModal form .selectArea label {
  width: 100px;
}

.formalModal form .selectArea select {
  padding: 16px;
  border-radius: 8px;
  border: none;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/other/expand.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.formalModal form .selectArea div {
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.formalModal form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}

.formalModal form .btnGroup button {
  border: none;
  border-radius: 40px;
  padding: 15px 40px;
}

.formalModal form .btnGroup button.back {
  border: 1px solid #ffa557;
  background: #fff7ce;
  color: #ffa557;
}

.formalModal form .btnGroup button.next {
  color: #fff;
  background: #3ab2c3;
}

@media (max-width: 768px) {
  .formalModal form {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .formalModal form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .formalModal form .radioArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .formalModal form .selectArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .formalModal form .selectArea div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.news .pageBanner {
  background: url("../img/banner/banner_news.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.news .pageBanner .top {
  padding-bottom: 60px;
}

.news .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.news .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.news .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.news .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.news .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.news .pageBanner .pageLink li a .icon {
  width: 48px;
  height: 48px;
  background: url("../img/news/icon.svg") no-repeat center;
  background-size: cover;
}

.news .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

.news .pageBanner .pageLink li.active a .icon {
  background: url("../img/news/icon_active.svg") no-repeat center;
  background-size: cover;
}

@media (max-width: 991px) {
  .news .pageBanner .pageLink {
    display: none;
  }
}

.news .list {
  gap: 60px 0;
  margin-bottom: 100px;
}

.news .list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  color: #212121;
  height: 100%;
}

.news .list a img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.news .list a h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.news .list a p {
  font-size: 18px;
  font-weight: 700;
  color: #3ab2c3;
  margin-top: auto;
}

.newsDetail .pageBanner {
  background: url("../img/banner/banner_news.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.newsDetail .pageBanner .top {
  margin-bottom: 60px;
}

.newsDetail .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.newsDetail .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.newsDetail .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.newsDetail .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.newsDetail .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.newsDetail .pageBanner .pageLink li a .icon {
  width: 48px;
  height: 48px;
  background: url("../img/news/icon.svg") no-repeat center;
  background-size: cover;
}

.newsDetail .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

.newsDetail .pageBanner .pageLink li.active a .icon {
  background: url("../img/news/icon_active.svg") no-repeat center;
  background-size: cover;
}

.newsDetail .content {
  padding: 20px;
  background: #fff;
}

.newsDetail .content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  border-bottom: 1px solid #cdcdcd;
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.newsDetail .content .title div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
}

.newsDetail .content .title div h3 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 10px;
}

.newsDetail .content .title div span {
  font-size: 24px;
  color: #a1a1a1;
}

.newsDetail .content .title .back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  gap: 8px;
  color: #a1a1a1;
  font-size: 24px;
}

.newsDetail .content .text {
  padding-bottom: 100px;
  border-bottom: 1px solid #cdcdcd;
  margin-bottom: 40px;
}

.newsDetail .content .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.newsDetail .content .btnGroup .back {
  padding: 16px 40px;
  border-radius: 10px;
  font-size: 22px;
  color: #fff;
  background: #43b794;
  border: none;
}

@media (max-width: 768px) {
  .newsDetail .content .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
}

.comment .pageBanner {
  background: url("../img/banner/banner_comment.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.comment .pageBanner .top {
  padding-bottom: 60px;
}

.comment .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.comment .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.comment .pageBanner .pageLink {
  color: #ffa557;
  padding: 30px 0;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
}

.comment .pageBanner .pageLink h3 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 20px;
}

.comment .pageBanner .pageLink p {
  font-size: 24px;
}

@media (max-width: 991px) {
  .comment .pageBanner .pageLink {
    display: none;
  }
}

.comment .process {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 40px;
}

.comment .process li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  font-size: 20px;
  border: 1px solid #a1a1a1;
  border-radius: 40px;
  background: #fff;
  padding: 20px;
  color: #a1a1a1;
  position: relative;
}

.comment .process li::after {
  position: absolute;
  content: "";
  display: block;
  width: 20px;
  height: 1px;
  background: #a1a1a1;
  right: 0;
  top: 50%;
  -webkit-transform: translate(100%, -50%);
  transform: translate(100%, -50%);
}

.comment .process li:last-child::after {
  display: none;
}

.comment .process li.active {
  color: #212121;
  border: 1px solid #ffa557;
}

.comment .process li.done {
  background: #3ab2c3;
  color: #fff;
}

.comment .process li.done::after {
  background: #ffa557;
}

.comment .process li.done2 {
  background: #3ab2c3;
  color: #fff;
}

.comment .process li.done2::after {
  background: #3ab2c3;
}

@media (max-width: 768px) {
  .comment .process li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  .comment .process {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .comment .process li {
    width: 100%;
  }

  .comment .process li::after {
    position: absolute;
    content: "";
    display: block;
    width: 1px;
    height: 20px;
    background: #a1a1a1;
    right: 50%;
    top: 100%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
  }
}

.comment1 form {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  gap: 20px 0;
  font-size: 20px;
}

.comment1 form .selectArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.comment1 form .selectArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
}

.comment1 form .selectArea select {
  width: 100%;
  padding: 15px 30px 15px 15px;
  border-radius: 8px;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/comment/arrowD.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.comment1 form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.comment1 form .inputArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: #f2f2f2;
  border-radius: 8px;
}

.comment1 form .inputArea div span {
  color: #3ab2c3;
}

.comment1 form .inputArea input {
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  border: none;
  background: #fff;
}

.comment1 form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.comment1 form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.comment1 form .radioArea div label {
  width: 30%;
}

.comment1 form .radioArea div label span {
  display: block;
  padding: 10px;
  border: 1px solid #3ab2c3;
  color: #3ab2c3;
  background: #e9f6f4;
  border-radius: 4px;
  text-align: center;
}

.comment1 form .radioArea div label input {
  display: none;
}

.comment1 form .radioArea div label input:checked+span {
  background: #3ab2c3;
  color: #fff;
}

.comment1 form .textArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.comment1 form .textArea textarea {
  width: 100%;
  background: #f2f2f2;
  border-radius: 12px;
  border: none;
  padding: 10px;
}

.comment1 form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.comment1 form .btnGroup a {
  padding: 15px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  color: #fff;
  font-size: 20px;
  background: #3ab2c3;
  border-radius: 40px;
}

@media (max-width: 576px) {
  .comment1 form .selectArea div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .comment1 form .radioArea div label {
    width: 100%;
  }
}

.comment2 form {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  gap: 20px 0;
  font-size: 20px;
}

.comment2 form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.comment2 form .inputArea input {
  background: #f3f3f3;
  padding: 16px;
  border: none;
  border-radius: 8px;
  width: 100%;
}

.comment2 form .inputArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 5px;
  background: #f3f3f3;
}

.comment2 form .inputArea div input {
  background: #fff;
  padding: 10px;
}

.comment2 form .inputArea div input:first-child {
  width: 80px;
}

.comment2 form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 40px;
}

.comment2 form .btnGroup a {
  padding: 15px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  font-size: 20px;
  border-radius: 40px;
}

.comment2 form .btnGroup a.back {
  border: 1px solid #ffa557;
  color: #ffa557;
  background: #fff7ce;
}

.comment2 form .btnGroup a.next {
  color: #fff;
  background: #3ab2c3;
}

.comment3 form {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  gap: 20px 0;
  font-size: 20px;
}

.comment3 form ul {
  border-bottom: 1px solid #a1a1a1;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.comment3 form .textArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.comment3 form .textArea .title {
  width: 100px;
  color: #a1a1a1;
}

.comment3 form .textArea p {
  padding: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.comment3 form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 20px;
}

.comment3 form .btnGroup .back {
  border-radius: 40px;
  padding: 16px 40px;
  color: #ffa557;
  border: 1px solid #ffa557;
  background: #fff7ce;
}

.comment3 form .btnGroup button {
  border: none;
  color: #fff;
  background: #3ab2c3;
  padding: 16px 40px;
  border-radius: 40px;
}

@media (max-width: 576px) {
  .comment3 form .textArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .comment3 form .btnGroup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.calculate .pageBanner {
  background: url("../img/banner/banner_calculate.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.calculate .pageBanner .top {
  padding-bottom: 60px;
}

.calculate .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.calculate .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.calculate .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.calculate .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.calculate .pageBanner .pageLink li a .icon {
  width: 48px;
  height: 48px;
}

.calculate .pageBanner .pageLink li:first-child a .icon {
  background: url("../img/calculate/calculate1_1.svg") no-repeat center;
  background-size: cover;
}

.calculate .pageBanner .pageLink li:nth-child(2) a .icon {
  background: url("../img/calculate/calculate2_1.svg") no-repeat center;
  background-size: cover;
}

.calculate .pageBanner .pageLink li:last-child a .icon {
  background: url("../img/calculate/calculate3_1.svg") no-repeat center;
  background-size: cover;
}

.calculate .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

.calculate .pageBanner .pageLink li.active:first-child a .icon {
  background: url("../img/calculate/calculate1.svg") no-repeat center;
  background-size: cover;
}

.calculate .pageBanner .pageLink li.active:nth-child(2) a .icon {
  background: url("../img/calculate/calculate2.svg") no-repeat center;
  background-size: cover;
}

.calculate .pageBanner .pageLink li.active:last-child a .icon {
  background: url("../img/calculate/calculate3.svg") no-repeat center;
  background-size: cover;
}

@media (max-width: 991px) {
  .calculate .pageBanner .pageLink {
    display: none;
  }
}

.calculate1 .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.calculate1 .type li {
  cursor: pointer;
  padding: 20px 40px;
  font-size: 24px;
  color: #808080;
  border: 1px solid #808080;
  border-radius: 10px;
  background: #fafafa;
}

.calculate1 .type li.active {
  background: #ffa557;
  color: #fff;
  border: 1px solid #ffa557;
}

.calculate1 .content {
  padding: 20px;
  background: #fff;
  border-radius: 24px;
}

.calculate1 .content.sub1 {
  display: none;
}

.calculate1 .content.sub1.active {
  display: block;
}

.calculate1 .content.sub2 {
  display: none;
}

.calculate1 .content.sub2.active {
  display: block;
}

.calculate1 .content .row {
  gap: 20px 0;
}

.calculate1 .content h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.calculate1 .content form {
  margin-bottom: 20px;
}

.calculate1 .content form ul {
  border-radius: 8px;
  overflow: hidden;
}

.calculate1 .content form ul li {
  padding: 6px 6px 0px 6px;
  background: #e6e6e6;
}

.calculate1 .content form ul li:first-child {
  padding: 0;
}

.calculate1 .content form ul li:last-child {
  padding-bottom: 6px;
}

.calculate1 .content form ul li .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calculate1 .content form ul li .title h4 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #b6d9de;
  color: #235e66;
}

.calculate1 .content form ul li .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.calculate1 .content form ul li .inputArea label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate1 .content form ul li .inputArea input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

.calculate1 .content form .add {
  border: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: transparent;
  margin-top: -1px;
}

.calculate1 .content form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.calculate1 .content form .btnGroup button {
  padding: 16px 40px;
  border-radius: 40px;
  border: none;
}

.calculate1 .content form .btnGroup button:first-child {
  color: #ffa557;
  background: #fff7ce;
  border: 1px solid #ffa557;
}

.calculate1 .content form .btnGroup button:last-child {
  color: #fff;
  background: #3ab2c3;
  border: 1px solid #3ab2c3;
}

.calculate1 .content .result {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
}

.calculate1 .content .result ul {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.calculate1 .content .result ul li {
  padding: 6px 6px 0 6px;
  background: #e6e6e6;
}

.calculate1 .content .result ul li:first-child {
  padding: 0;
}

.calculate1 .content .result ul li:last-child {
  padding-bottom: 6px;
}

.calculate1 .content .result ul li .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calculate1 .content .result ul li .title h4 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #ffedc9;
  color: #664223;
}

.calculate1 .content .result ul li .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.calculate1 .content .result ul li .inputArea div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate1 .content .result ul li .inputArea div p {
  background: #f9f9f9;
  text-align: center;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

.calculate1 .content .result ul li .totalArea p {
  padding: 10px;
  background: #fff;
  text-align: center;
  border-radius: 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.calculate1 .content .result ul li .totalArea p span {
  font-size: 24px;
  font-weight: 700;
  color: #ffa557;
}

.calculate1 .content .result .subTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  border-bottom: 1px dashed #f2f2f2;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.calculate1 .content .result .subTitle div {
  width: 320px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.calculate1 .content .result .subTitle div p {
  font-size: 20px;
}

.calculate1 .content .result .subTitle div span {
  font-size: 24px;
  color: #ffa557;
}

.calculate1 .content .total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.calculate1 .content .total ul {
  width: 320px;
  padding: 20px;
}

.calculate1 .content .total ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 10px;
}

.calculate1 .content .total ul li:last-child {
  margin-bottom: 0;
}

.calculate1 .content .total ul li p {
  font-size: 20px;
}

.calculate1 .content .total ul li span {
  font-size: 24px;
  color: #ffa557;
}

@media (max-width: 768px) {
  .calculate1 .content form ul li .title {
    display: none;
  }

  .calculate1 .content form ul li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate1 .content form ul li .inputArea label {
    position: relative;
  }

  .calculate1 .content form ul li .inputArea label::after {
    position: absolute;
    content: attr(data-th);
    display: block;
    top: 50%;
    left: 0;
    width: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .calculate1 .content form ul li .inputArea label input {
    width: calc(100% - 70px);
    margin-left: auto;
    display: block;
  }

  .calculate1 .content .result ul li .title {
    display: none;
  }

  .calculate1 .content .result ul li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate1 .content .result ul li .inputArea div {
    position: relative;
  }

  .calculate1 .content .result ul li .inputArea div p {
    width: calc(100% - 70px);
    margin-left: auto;
  }

  .calculate1 .content .result ul li .inputArea div::after {
    position: absolute;
    content: attr(data-th);
    display: block;
    top: 50%;
    left: 0;
    width: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }
}

@media (max-width: 576px) {
  .calculate1 .content form .btnGroup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.calculate2 .content {
  padding: 20px;
  background: #fff;
  border-radius: 24px;
}

.calculate2 .content h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.calculate2 .content form {
  margin-bottom: 20px;
}

.calculate2 .content form>ul {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.calculate2 .content form>ul li {
  padding: 6px 6px 0px 6px;
  background: #e6e6e6;
}

.calculate2 .content form>ul li:first-child {
  padding: 0;
}

.calculate2 .content form>ul li:last-child {
  padding-bottom: 6px;
}

.calculate2 .content form>ul li .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calculate2 .content form>ul li .title h4 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #a0d2c9;
  color: #235e66;
}

.calculate2 .content form>ul li .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.calculate2 .content form>ul li .inputArea label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate2 .content form>ul li .inputArea label input {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 4px;
  text-align: right;
}

.calculate2 .content form .type {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}

.calculate2 .content form .type .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 16px;
  background: #a0d2c9;
  font-size: 20px;
}

.calculate2 .content form .type .title h4 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

.calculate2 .content form .type .title div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.calculate2 .content form .type .title div label {
  width: 60px;
  border: 1px solid #3d9e8d;
  background: #e9f6f0;
  border-radius: 40px;
  padding: 4px;
}

.calculate2 .content form .type .title div label input {
  display: none;
}

.calculate2 .content form .type .title div label input:checked+span {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.calculate2 .content form .type .title div label span {
  display: block;
  width: 24px;
  height: 24px;
  background: #3d9e8d;
  border-radius: 50%;
}

.calculate2 .content form .type .inputArea {
  padding: 6px;
  background: #e6e6e6;
}

.calculate2 .content form .type .inputArea input {
  width: 100%;
  padding: 16px;
  background: #fff;
  border: none;
  border-radius: 4px;
  text-align: right;
}

.calculate2 .content form .type .inputList {
  padding: 8px;
  background: #e6e6e6;
}

.calculate2 .content form .type .inputList ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.calculate2 .content form .type .inputList ul li:last-child {
  margin-bottom: 0;
}

.calculate2 .content form .type .inputList ul li span {
  font-size: 20px;
  color: #235e66;
  width: 30px;
  text-align: right;
}

.calculate2 .content form .type .inputList ul li div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.calculate2 .content form .type .inputList ul li div span {
  width: auto;
}

.calculate2 .content form .type .inputList ul li input {
  width: 80px;
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  text-align: right;
}

.calculate2 .content form .type .inputList ul li input:last-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate2 .content form .type .inputList .btnGroup {
  margin-top: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.calculate2 .content form .type .inputList .btnGroup button {
  font-size: 20px;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  background: #3d9e8d;
  border: none;
}

.calculate2 .content form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.calculate2 .content form .btnGroup button {
  padding: 16px 40px;
  border-radius: 40px;
  border: none;
}

.calculate2 .content form .btnGroup button:first-child {
  color: #ffa557;
  background: #fff7ce;
  border: 1px solid #ffa557;
}

.calculate2 .content form .btnGroup button:last-child {
  color: #fff;
  background: #3ab2c3;
  border: 1px solid #3ab2c3;
}

.calculate2 .content .result .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.calculate2 .content .result .info h4 {
  padding: 10px 16px;
  color: #fff;
  font-size: 20px;
  border-radius: 4px;
  background: #e79951;
}

.calculate2 .content .result .info div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calculate2 .content .result .info div p {
  font-size: 20px;
}

.calculate2 .content .result .info div p span {
  font-size: 24px;
  color: #e79951;
  font-weight: 700;
}

.calculate2 .content .result ul {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.calculate2 .content .result ul li {
  padding: 6px 6px 0 6px;
  background: #e6e6e6;
}

.calculate2 .content .result ul li:first-child {
  padding: 0;
}

.calculate2 .content .result ul li:last-child {
  padding-bottom: 6px;
}

.calculate2 .content .result ul li .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.calculate2 .content .result ul li .title h4 {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #ffedc9;
  color: #664223;
}

.calculate2 .content .result ul li .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.calculate2 .content .result ul li .inputArea div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate2 .content .result ul li .inputArea div p {
  background: #f9f9f9;
  text-align: center;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

.calculate2 .content .result ul li .totalArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
}

.calculate2 .content .result ul li .totalArea div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.calculate2 .content .result ul li .totalArea div p {
  text-align: center;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

@media (max-width: 1200px) {
  .calculate2 .content .result .info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .calculate2 .content .result .info div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .calculate2 .content .result ul li .title {
    display: none;
  }

  .calculate2 .content .result ul li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate2 .content .result ul li .inputArea div {
    position: relative;
  }

  .calculate2 .content .result ul li .inputArea div p {
    width: calc(100% - 70px);
    margin-left: auto;
  }

  .calculate2 .content .result ul li .inputArea div::after {
    position: absolute;
    content: attr(data-th);
    display: block;
    top: 50%;
    left: 0;
    width: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .calculate2 .content .result ul li .totalArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate2 .content .result ul li .totalArea div {
    position: relative;
  }

  .calculate2 .content .result ul li .totalArea div p {
    width: calc(100% - 70px);
    margin-left: auto;
  }

  .calculate2 .content .result ul li .totalArea div::after {
    position: absolute;
    content: attr(data-th);
    display: block;
    top: 50%;
    left: 0;
    width: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .calculate2 .content form>ul li .title {
    display: none;
  }

  .calculate2 .content form>ul li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate2 .content form>ul li .inputArea label {
    position: relative;
  }

  .calculate2 .content form>ul li .inputArea label::after {
    position: absolute;
    content: attr(data-th);
    display: block;
    top: 50%;
    left: 0;
    width: 70px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  .calculate2 .content form>ul li .inputArea label input {
    width: calc(100% - 70px);
    margin-left: auto;
    display: block;
  }

  .calculate2 .content form .type .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .calculate2 .content form .type .title div {
    -ms-flex-item-align: end;
    align-self: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

@media (max-width: 576px) {
  .calculate2 .content form .type .inputList ul li {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
  }

  .calculate2 .content form .type .inputList ul li div {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .calculate2 .content form .type .inputList ul li input {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .calculate2 .content form .type .inputList ul li input:last-child {
    width: 100%;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .calculate2 .content form .btnGroup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.product .pageBanner {
  background: url("../img/banner/banner_news.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.product .pageBanner .top {
  padding-bottom: 60px;
}

.product .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.product .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.product .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.product .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.product .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.product .pageBanner .pageLink li a .icon {
  width: 48px;
  height: 48px;
}

.product .pageBanner .pageLink li:first-child a .icon {
  background: url("../img/product/build2.svg") no-repeat center;
  background-size: cover;
}

.product .pageBanner .pageLink li:last-child a .icon {
  background: url("../img/product/land2.svg") no-repeat center;
  background-size: cover;
}

.product .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

.product .pageBanner .pageLink li.active:first-child a .icon {
  background: url("../img/product/build.svg") no-repeat center;
  background-size: cover;
}

.product .pageBanner .pageLink li.active:last-child a .icon {
  background: url("../img/product/land.svg") no-repeat center;
  background-size: cover;
}

@media (max-width: 991px) {
  .product .pageBanner .pageLink {
    display: none;
  }
}

.product .titleStyle {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.product .titleStyle p {
  font-size: 32px;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

.product .titleStyle p::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background: #ffe248;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.product .list {
  gap: 60px 0;
  margin-bottom: 60px;
}

.product .list li a {
  padding: 20px;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.product .list li a .title {
  margin-bottom: 8px;
  color: #212121;
  flex-grow: 1;
}

.product .list li a .title h3 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 4px;
}

.product .list li a .title p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.product .list li a .title ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.product .list li a .title ul li {
  padding: 5px 16px;
  border-radius: 4px;
  background: #fff7ce;
  color: #ff8720;
}

.product .list li a .imgArea {
  margin-bottom: 8px;
  position: relative;
}

.product .list li a .imgArea img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

@media screen and (max-width:1280px) {
  .product .list li a .imgArea img {
    height: 220px;
  }
}

@media screen and (max-width:768px) {
  .product .list li a .imgArea img {
    height: 280px;
  }
}

.product .list li a .imgArea .tag {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0px 0px 8px 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff7600), to(#ffae23));
  background: linear-gradient(180deg, #ff7600 0%, #ffae23 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 20px;
}

.product .list li a .price {
  padding: 12px 20px;
  color: #fff;
  background: #3ab2c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.product .list li a .price span {
  font-size: 20px;
}

.product .list li a .price p {
  font-size: 32px;
  font-weight: 700;
}

.product .list li:nth-child(3n+2) a .price {
  background: #43b794;
}

.productDetail .section1 {
  padding: 40px;
  background: #fff;
  margin-bottom: 20px;
}

.productDetail .section1 .left .Swiper2 {
  margin-bottom: 20px;
}

.productDetail .section1 .left .Swiper2 .swiper-slide img {
  width: 100%;
  max-height: 460px;
  object-fit: contain;
}

.productDetail .section1 .left .Swiper {
  position: relative;
}

.productDetail .section1 .left .Swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.productDetail .section1 .left .Swiper .swiper-slide img {
  height: 120px;
}

.productDetail .section1 .left .Swiper .button_prev {
  background: url("../img/product/prev.png") no-repeat;
  width: 40px;
  height: 80px;
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 10;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.productDetail .section1 .left .Swiper .button_next {
  background: url("../img/product/next.png") no-repeat;
  width: 40px;
  height: 80px;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 10;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.productDetail .section1 .left .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 40px;
  margin-bottom: 8px;
}

.productDetail .section1 .left .title a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-right: 1px solid #a1a1a1;
  font-size: 24px;
  color: #a1a1a1;
}

.productDetail .section1 .left .title div h3 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 8px;
}

.productDetail .section1 .left .title div p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.productDetail .section1 .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: flex-start;
  height: 100%;
  padding: 16px 20px;
  gap: 40px;
}

.productDetail .section1 .right .price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid #a1a1a1;
}

.productDetail .section1 .right .price span {
  padding: 12px 20px;
  color: #fff;
  background: #3ab2c3;
  border-radius: 8px;
  font-size: 20px;
}

.productDetail .section1 .right .price p {
  font-size: 40px;
  font-weight: 700;
  color: #d82725;
}

.productDetail .section1 .right a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: #3ab2c3;
  color: #fff;
  font-size: 20px;
  -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  margin-bottom: 20px;
}

.productDetail .section1 .right .businessCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #e7f3f4;
  border-radius: 12px;
}

.productDetail .section1 .right .businessCard .user {
  width: 120px;
}

.productDetail .section1 .right .businessCard div {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.productDetail .section1 .right .businessCard div h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 24px;
}

.productDetail .section1 .right .businessCard div p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.productDetail .section1 .right .businessCard div p span {
  color: #999999;
}

@media (max-width: 1400px) {
  .productDetail .section1 .right {
    padding: 0;
  }
}

@media (max-width: 1200px) {
  .productDetail .section1 .right .businessCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width: 991px) {
  .productDetail .section1 .left {
    margin-bottom: 40px;
  }

  .productDetail .section1 .right .price {
    margin-bottom: 40px;
  }

  .productDetail .section1 .right .businessCard {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media (max-width: 768px) {
  .productDetail .section1 {
    padding: 20px;
  }

  .productDetail .section1 .left .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
  }

  .productDetail .section1 .left .title a {
    border-right: 0;
    border-bottom: 1px solid #a1a1a1;
  }
}

@media (max-width: 440px) {
  .productDetail .section1 .right .businessCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.productDetail .section2 {
  padding: 40px;
  background: #fff;
  margin-bottom: 20px;
}

.productDetail .section2 div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.productDetail .section2 ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  margin-bottom: 40px;
}

.productDetail .section2 ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.productDetail .section2 ul li .title {
  width: 100px;
  color: #a1a1a1;
}

.productDetail .section2 ul li p {
  padding: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.productDetail .section2 ul li:first-child p {
  color: #ff8720;
}

.productDetail .section2 ul:first-child {
  padding-right: 40px;
}

.productDetail .section2 ul:nth-child(2) {
  padding: 0 40px;
  border-left: 1px solid #a1a1a1;
  border-right: 1px solid #a1a1a1;
}

.productDetail .section2 ul:last-child {
  padding-left: 40px;
}

.productDetail .section2 .memo {
  font-size: 20px;
  display: flex;
  flex-direction: row;
}

.productDetail .section2 .memo .title {
  width: 100px;
  color: #a1a1a1;
  flex-shrink: 0;
}

.productDetail .section2 .memo p {
  padding: 0 16px;
}

@media (max-width: 1200px) {
  .productDetail .section2 ul:first-child {
    padding-right: 20px;
  }

  .productDetail .section2 ul:nth-child(2) {
    padding: 0 20px;
  }

  .productDetail .section2 ul:last-child {
    padding-left: 20px;
  }
}

@media (max-width: 991px) {
  .productDetail .section2 div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productDetail .section2 ul {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }

  .productDetail .section2 ul:first-child {
    padding-right: 0px;
  }

  .productDetail .section2 ul:nth-child(2) {
    padding: 0px;
    border-left: none;
    border-right: none;
    border-top: 1px solid #a1a1a1;
    border-bottom: 1px solid #a1a1a1;
  }

  .productDetail .section2 ul:last-child {
    padding-left: 0px;
  }
}

@media (max-width: 768px) {
  .productDetail .section2 {
    padding: 20px;
  }
}

@media (max-width: 440px) {
  .productDetail .section2 ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .productDetail .section2 ul:nth-child(2) {
    padding-top: 20px;
  }

  .productDetail .section2 ul:last-child {
    padding-top: 20px;
  }

  .productDetail .section2 .memo {
    flex-direction: column;
  }

  .productDetail .section2 .memo p {
    padding: 16px;
  }
}

.productDetail .section3 {
  padding: 40px;
  background: #fff;
}

.productDetail .section3 .list {
  margin-bottom: 0;
}

.productDetail .section3 .list a {
  padding: 0;
}

@media (max-width: 768px) {
  .productDetail .section3 {
    padding: 20px;
  }
}

.productEDM .content {
  padding: 20px;
  background: #fff;
}

.productEDM .content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
  margin-bottom: 20px;
}

.productEDM .content .title .back {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 20px;
  border-right: 1px solid #a1a1a1;
  font-size: 24px;
  color: #a1a1a1;
}

.productEDM .content .title div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.productEDM .content .title div h3 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 8px;
}

.productEDM .content .title div p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 20px;
  gap: 8px;
}

.productEDM .content .title .print {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 8px;
  background: #fff7ce;
  color: #ffa557;
}

.productEDM .content .imgArea {
  margin-bottom: 20px;
}

.productEDM .content .imgArea img {
  width: 100%;
}

.productEDM .content .title2 {
  margin-bottom: 20px;
}

.productEDM .content .title2 h3 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 8px;
}

.productEDM .content .title2 p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  font-size: 20px;
  gap: 8px;
}

.productEDM .content .infoArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px;
}

.productEDM .content .infoArea .info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-right: 20px;
  padding-top: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.productEDM .content .infoArea .info .price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.productEDM .content .infoArea .info .price span {
  font-size: 20px;
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  background: #3ab2c3;
}

.productEDM .content .infoArea .info .price p {
  font-size: 40px;
  color: #d82725;
}

.productEDM .content .infoArea .info .businessCard {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background: #e7f3f4;
  border-radius: 12px;
}

.productEDM .content .infoArea .info .businessCard .user {
  width: 120px;
}

.productEDM .content .infoArea .info .businessCard div {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.productEDM .content .infoArea .info .businessCard div h4 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 24px;
}

.productEDM .content .infoArea .info .businessCard div p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.productEDM .content .infoArea .info .businessCard div p span {
  color: #999999;
}

.productEDM .content .infoArea ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  padding: 0 20px;
}

.productEDM .content .infoArea ul:last-child {
  border-left: 1px solid #a1a1a1;
}

.productEDM .content .infoArea ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.productEDM .content .infoArea ul li p:first-child {
  color: #a1a1a1;
  width: 100px;
}

.productEDM .content .infoArea ul li p:last-child {
  padding: 16px;
}

.productEDM .content .title3 {
  margin-bottom: 20px;
}

.productEDM .content .title3 h3 {
  font-size: 32px;
  font-weight: 500;
}

.productEDM .content .imgList {
  gap: 20px 0;
}

.productEDM .content .imgList li a img {
  width: 100%;
}

@media (max-width: 1200px) {
  .productEDM .content .infoArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productEDM .content .infoArea .info .price {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .productEDM .content .infoArea ul {
    padding-top: 20px;
  }

  .productEDM .content .infoArea ul:last-child {
    border-top: 1px solid #a1a1a1;
    border-left: none;
  }
}

@media (max-width: 768px) {
  .productEDM .content .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 20px;
  }

  .productEDM .content .title .back {
    border-bottom: 1px solid #a1a1a1;
    width: 100%;
    border-right: none;
  }

  .productEDM .content .title .print {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width: 440px) {
  .productEDM .content .infoArea .info .businessCard {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productEDM .content .infoArea ul li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.productAgent .content {
  padding: 20px;
  background: #fff;
}

.productAgent .content .section1 {
  margin-bottom: 40px;
}

.productAgent .content .section1 .imgArea img {
  width: 100%;
}

.productAgent .content .section1 .right .name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 16px;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 70px;
}

.productAgent .content .section1 .right h4 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.productAgent .content .section1 .right .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.productAgent .content .section1 .right .info .infoList {
  width: 40%;
}

.productAgent .content .section1 .right .info .infoList ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 8px;
  gap: 20px;
}

.productAgent .content .section1 .right .info .infoList ul li:last-child {
  margin-bottom: 0;
}

.productAgent .content .section1 .right .info .infoList ul li p:first-child {
  color: #a1a1a1;
}

.productAgent .content .section1 .right .info .infoList ul li p:last-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.productAgent .content .section1 .right .info .achievement {
  width: 60%;
  border-left: 1px solid #a1a1a1;
  padding-left: 20px;
}

.productAgent .content .section2 .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 40px;
  gap: 8px;
}

.productAgent .content .section2 .title .titleStyle {
  margin-bottom: 0;
}

.productAgent .content .section2 .infoList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.productAgent .content .section2 ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
}

.productAgent .content .section2 ul:first-child {
  padding-right: 40px;
  border-right: 1px solid #a1a1a1;
}

.productAgent .content .section2 ul:last-child {
  padding-left: 40px;
}

.productAgent .content .section2 ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.productAgent .content .section2 ul li p:first-child {
  color: #a1a1a1;
  width: 100px;
}

.productAgent .content .section2 ul li p:last-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 16px;
}

@media (max-width: 991px) {
  .productAgent .content .section1 .imgArea {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .productAgent .content .section1 .imgArea img {
    max-width: 240px;
  }

  .productAgent .content .section1 .right .name {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 40px;
  }

  .productAgent .content .section1 .right .info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productAgent .content .section1 .right .info .infoList {
    width: 100%;
    margin-bottom: 20px;
  }

  .productAgent .content .section1 .right .info .achievement {
    width: 100%;
    border-left: none;
    border-top: 1px solid #a1a1a1;
    padding-left: 0px;
    padding-top: 20px;
  }

  .productAgent .content .section2 .infoList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productAgent .content .section2 ul {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .productAgent .content .section2 ul:first-child {
    padding-right: 0px;
    border-right: none;
    border-bottom: 1px solid #a1a1a1;
  }

  .productAgent .content .section2 ul:last-child {
    padding-left: 0px;
  }
}

@media (max-width: 440px) {
  .productAgent .content .section2 ul li {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .productAgent .content .section2 ul li p:first-child {
    color: #a1a1a1;
    width: 100px;
  }

  .productAgent .content .section2 ul li p:last-child {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    padding: 16px;
  }

  .productAgent .content .section2 ul:last-child {
    padding-top: 20px;
  }
}

.member .pageBanner {
  background: url("../img/banner/banner_login.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.member .pageBanner .top {
  padding-bottom: 60px;
}

.member .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.member .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.member .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.member .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.member .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.member .pageBanner .pageLink li a .icon {
  width: 48px;
  height: 48px;
}

.member .pageBanner .pageLink li:first-child a .icon {
  background: url("../img/member/member1.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li:nth-child(2) a .icon {
  background: url("../img/member/member2.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li:nth-child(3) a .icon {
  background: url("../img/member/member3.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li:nth-child(4) a .icon {
  background: url("../img/member/member4.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li:last-child a .icon {
  background: url("../img/member/member5.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

.member .pageBanner .pageLink li.active:first-child a .icon {
  background: url("../img/member/member1_1.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li.active:nth-child(2) a .icon {
  background: url("../img/member/member2_1.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li.active:nth-child(3) a .icon {
  background: url("../img/member/member3_1.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li.active:nth-child(4) a .icon {
  background: url("../img/member/member4_1.svg") no-repeat center;
  background-size: cover;
}

.member .pageBanner .pageLink li.active:last-child a .icon {
  background: url("../img/member/member5_1.svg") no-repeat center;
  background-size: cover;
}

@media (max-width: 991px) {
  .member .pageBanner .pageLink {
    display: none;
  }
}

.member .titleStyle {
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.member .titleStyle p {
  font-size: 32px;
  font-weight: 500;
  position: relative;
  display: inline-block;
}

.member .titleStyle p::after {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 12px;
  background: #ffe248;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.member1 .type {
  background: #fff;
  padding: 20px;
  border-radius: 10px 10px 0 0;
  /* margin-bottom: 60px; */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
}

.member1 .type2 {
  margin-bottom: 60px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px;
}

.member1 .type2 a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 28px;
  color: #808080;
  border: 1px solid #808080;
  border-radius: 10px;
}

.member1 .type2 a:hover {
  color: #fff;
  background: #FFBD3B;
  border: 1px solid #FFBD3B;
}

.member1 .type2 a:hover img:first-child {
  display: none;
}

.member1 .type2 a img:nth-child(2) {
  display: none;
}

.member1 .type2 a:hover img:nth-child(2) {
  display: block;
}


.member1 .type2 a.active{
  color: #fff;
  background: #FFBD3B;
  border: 1px solid #FFBD3B;
}

.member1 .type2 a.active img:first-child {
  display: none;
}

.member1 .type2 a.active img:nth-child(2) {
  display: block;
}


.member1 .type ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.member1 .type ul li {
  cursor: pointer;
  border: 1px solid #8d8d8d;
  color: #8d8d8d;
  background: #fafafa;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 24px;
}

.member1 .type ul li a {
  color: #8d8d8d;
}

.member1 .type ul li.active {
  border: 1px solid #ffa557;
  color: #fff;
  background: #ffa557;
}

.member1 .type ul li.active a {
  color: #fff;
}

.member1 .type .add {
  border-radius: 40px;
  padding: 16px 40px;
  font-size: 22px;
  color: #fff;
  background: #3ab2c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 768px) {
  .member1 .type {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .member1 .type .add {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width: 440px) {
  .member1 .type {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .member1 .type ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1 .type .add {
    -ms-flex-item-align: center;
    align-self: center;
  }
}

.member1 .productList {
  gap: 60px 0;
  margin-bottom: 160px;
}

.member1 .productList li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  height: 100%;
}

.member1 .productList li a .title {
  color: #212121;
  margin-bottom: 8px;
  flex: 1;
}

.member1 .productList li a .title h4 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 4px;
}

.member1 .productList li a .title p {
  font-size: 18px;
}

.member1 .productList li a .imgArea {
  margin-bottom: 8px;
}

.member1 .productList li a .imgArea img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

@media screen and (max-width:1280px) {
  .member1 .productList li a .imgArea img {
    height: 220px;
  }
}

@media screen and (max-width:768px) {
  .member1 .productList li a .imgArea img {
    height: 280px;
  }
}


.member1 .productList li a .price {
  padding: 12px 20px;
  color: #fff;
  background: #3ab2c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.member1 .productList li a .price .typeArea{
  display: flex;
  align-items: center;
  gap: 8px;
}

.member1 .productList li a .price .typeArea span:first-child{
  font-size: 20px;
}

.member1 .productList li a .price .typeArea span.nopass{
  font-size: 14px;
  padding: 2px 10px;
  color: #fff;
  border-radius: 50px;
  background: #D82725;
}

.member1 .productList li a .price .typeArea span.removed{
  font-size: 14px;
  padding: 2px 10px;
  color: #fff;
  border-radius: 50px;
  background: #787878;
}

.member1 .productList li a .price .typeArea span.done{
  font-size: 14px;
  padding: 2px 10px;
  color: #3AB2C3;
  border-radius: 50px;
  background: #fff;
}

.member1 .productList li a .price .typeArea span.review{
  font-size: 14px;
  padding: 2px 10px;
  color: #fff;
  border-radius: 50px;
  background: #FFBD3B;
}

.member1 .productList li a .price .typeArea span.expire{
  font-size: 14px;
  padding: 2px 10px;
  color: #FFA557;
  border-radius: 50px;
  background: #FFF7CE;
}


.member1 .productList li a .price p {
  font-size: 32px;
  font-weight: 700;
}

.member1 .productList li:nth-child(3n+2) a .price {
  background: #43b794;
}

/* �X�ⶵ�� - �Ŧ�I�� */
.member1 .productList li a .price.blue {
  background: #3ab2c3 !important;
  /* �Ŧ� */
}

/* ��L���� - �ź��I�� */
.member1 .productList li a .price.green {
  background: #43b794 !important;
  /* �ź�� */
}

/* �X�ⶵ�� - �Ŧ�I�� */
.member1 .productList li a .price.orange {
  background: #FFA557 !important;
  /* �Ŧ� */
}


.member1_add .type {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0px 4px 8px 0px #0000001A;
}

.member1_add .type ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.member1_add .type ul li {
  cursor: pointer;
  border: 1px solid #8d8d8d;
  color: #8d8d8d;
  background: #fafafa;
  padding: 20px 40px;
  border-radius: 10px;
  font-size: 24px;
}

.member1_add .type ul li.active {
  border: 1px solid #ffa557;
  color: #fff;
  background: #ffa557;
}

.member1_add .type .back {
  padding: 16px 40px;
  background: #fff7ce;
  border: 1px solid #ffa557;
  color: #ffa557;
  border-radius: 40px;
  font-size: 22px;
}

@media (max-width: 768px) {
  .member1_add .type {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }

  .member1_add .type .back {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

@media (max-width: 440px) {
  .member1_add .type {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .member1_add .type ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .type .back {
    -ms-flex-item-align: center;
    align-self: center;
  }
}

.member1_add .titleStyle {
  padding-top: 40px;
  border-top: 1px dashed #a1a1a1;
}

.member1_add .titleStyle.data {
  border-top: 1px solid #a1a1a1;
}

.member1_add .titleStyle:first-child {
  border-top: none;
  padding-top: none;
}

.member1_add .addForm {
  gap: 20px 0;
  font-size: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 24px;
}

.member1_add .addForm .statusArea{
  display: flex;
  align-items: center;
  gap: 8px;
}

.member1_add .addForm .statusArea h4{
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 0;
}

.member1_add .addForm .statusArea p{
  font-size: 20px;
  font-weight: normal;
  margin-bottom: 0;
}

.member1_add .addForm .textArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member1_add .addForm .textArea textarea {
  resize: none;
  width: 100%;
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 16px;
}

.member1_add .addForm .addressArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member1_add .addForm .addressArea input {
  width: 100%;
  border: none;
  background: #fff;
  border-radius: 8px;
  padding: 10px;
}

.member1_add .addForm .addressArea select {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/other/expand.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.member1_add .addForm .addressArea .address {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 4px;
}

.member1_add .addForm .addressArea .address div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.member1_add .addForm .addressArea .address div span {
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.member1_add .addForm .addressArea .address div:nth-child(2),
.member1_add .addForm .addressArea .address div:last-child {
  padding: 8px;
  background: #f3f3f3;
}

.member1_add .addForm .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member1_add .addForm .inputArea input {
  width: 100%;
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 16px;
}

.member1_add .addForm .inputArea select {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/other/expand.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.member1_add .addForm .inputArea .style1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.member1_add .addForm .inputArea .style2 {
  padding: 8px;
  background: #f3f3f3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.member1_add .addForm .inputArea .style2 input {
  background: #fff;
  padding: 10px;
}

.member1_add .addForm .inputArea .style2 input:first-child {
  width: 80px;
}

.member1_add .addForm .inputArea .style3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
  padding: 8px;
  background: #f3f3f3;
}

.member1_add .addForm .inputArea .style3 input {
  background: #fff;
  padding: 10px;
}

.member1_add .addForm .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 8px;
}

.member1_add .addForm .radioArea label {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.member1_add .addForm .radioArea label span {
  padding: 10px;
  color: #3ab2c3;
  border: 1px solid #3ab2c3;
  border-radius: 8px;
  background: #e9f6f4;
  width: 100%;
  display: block;
  text-align: center;
}

.member1_add .addForm .radioArea label input {
  display: none;
}

.member1_add .addForm .radioArea label input:checked+span {
  color: #fff;
  background: #3ab2c3;
}

.member1_add .addForm .radioArea div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.member1_add .addForm .radioArea input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 16px;
}

.member1_add .addForm .selectArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member1_add .addForm .selectArea select {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/other/expand.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.member1_add .addForm .selectArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.member1_add .addForm .imgShowArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
}

.member1_add .addForm .imgShowArea .uploadBtn {
  border: 1px solid #a1a1a1;
  border-radius: 12px;
  width: 120px;
  height: 120px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.member1_add .addForm .imgShowArea .uploadBtn input {
  display: none;
}

.member1_add .addForm .imgShowArea .imgShowList {
  position: relative;
  cursor: pointer;
}

.member1_add .addForm .imgShowArea .imgShowList:hover::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.member1_add .addForm .imgShowArea .imgShowList:hover::after {
  content: "";
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  background: url("../img/other/delete.svg") no-repeat center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 2;
}

.member1_add .addForm .imgShowArea .imgShowList img {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
  object-fit: cover;
  border-radius: 12px;
}

.member1_add .addForm .dataArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4px;
  word-break: break-all;
}

.member1_add .addForm .dataArea .title {
  width: 100px;
  color: #a1a1a1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.member1_add .addForm .dataArea p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 20px;
  padding: 16px;
}

.member1_add .addForm .imgArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 30px;
}

.member1_add .addForm .imgArea img {
  width: 120px;
  height: 120px;
  border-radius: 12px;
  -o-object-fit: cover;
  object-fit: cover;
}

.member1_add .addForm .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 20px;
  border-top: 1px solid #a1a1a1;
  padding-top: 40px;
}

.member1_add .addForm .btnGroup a {
  padding: 16px 40px;
  font-size: 20px;
  border-radius: 40px;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

.member1_add .addForm .btnGroup a.back {
  background: #fff7ce;
  border: 1px solid #ffa557;
  color: #ffa557;
}

.member1_add .addForm .btnGroup a.next {
  background: #3ab2c3;
  color: #fff;
}

@media (max-width: 576px) {
  .member1_add .addForm .addressArea .address div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .inputArea .style1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .inputArea .style3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .selectArea div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .radioArea .style2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .radioArea .style2 div {
    width: 100%;
  }
}

@media (max-width: 440px) {
  .member1_add .addForm .btnGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member1_add .addForm .dataArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.member2 .content {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
}

.member2 .content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 0px 20px;
}

.member2 .content .title ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.member2 .content .title ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 40px;
}

.member2 .content .title ul li:first-child {
  background: #e9f6f4;
}

.member2 .content .title ul li:last-child {
  background: #ffedc9;
}

@media (max-width: 768px) {
  .member2 .content .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .member2 .content .title ul {
    -ms-flex-item-align: end;
    align-self: flex-end;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
  }
}

.member2 .content .data {
  padding-bottom: 20px;
  border-bottom: 1px solid #a1a1a1;
  margin-bottom: 40px;
  word-break: break-all;
}

.member2 .content .data li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  font-size: 20px;
}

.member2 .content .data li .label {
  width: 100px;
  color: #a1a1a1;
}

.member2 .content .data li p {
  padding: 16px;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

@media (max-width: 440px) {
  .member2 .content .data li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
}

.member2 .content .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.member2 .content .btnGroup .next {
  border-radius: 40px;
  color: #fff;
  padding: 16px 40px;
  font-size: 20px;
  background: #3ab2c3;
}

.member2_edit form {
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  font-size: 20px;
  gap: 20px 0;
}

.member2_edit form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member2_edit form .inputArea input {
  padding: 16px;
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  width: 100%;
}

.member2_edit form .inputArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: #f3f3f3;
}

.member2_edit form .inputArea div input {
  padding: 10px;
  background: #fff;
}

.member2_edit form .inputArea div input:first-child {
  width: 80px;
}

.member2_edit form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member2_edit form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.member2_edit form .radioArea div label {
  width: 30%;
}

.member2_edit form .radioArea div label input {
  display: none;
}

.member2_edit form .radioArea div label input:checked+span {
  background: #3ab2c3;
  color: #fff;
}

.member2_edit form .radioArea div label span {
  width: 100%;
  display: block;
  text-align: center;
  padding: 10px;
  color: #3ab2c3;
  border: 1px solid #3ab2c3;
  background: #e9f6f4;
  border-radius: 8px;
}

.member2_edit form .selectArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
}

.member2_edit form .selectArea select {
  border-radius: 8px;
  padding: 16px;
  width: 100%;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url("../img/other/expand.svg") no-repeat right 10px center;
  background-color: #b6d9de;
}

.member2_edit form .selectArea input {
  padding: 16px;
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  width: 100%;
}

.member2_edit form .selectArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.member2_edit form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 40px;
  border-top: 1px dashed #a1a1a1;
}

.member2_edit form .btnGroup .back {
  border-radius: 40px;
  border: 1px solid #ffa557;
  background: #fff7ce;
  color: #ffa557;
  padding: 16px 40px;
}

.member2_edit form .btnGroup .next {
  background: #3ab2c3;
  border-radius: 40px;
  border: 1px solid #3ab2c3;
  color: #fff;
  padding: 16px 40px;
}

@media (max-width: 576px) {
  .member2_edit form .selectArea div {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member2_edit form .radioArea div label {
    width: 50%;
  }

  .member2_edit form .btnGroup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.member3 .content {
  padding: 20px;
  background: #fff;
  border-radius: 24px;
}

.member3 .content .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 0 20px;
}

.member3 .content .title .titleStyle {
  padding-top: 0;
}

.member3 .content .title form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  font-size: 20px;
}

.member3 .content .title form label {
  width: 60px;
  border: 1px solid #3ab2c3;
  padding: 4px;
  border-radius: 60px;
  background: #e9f6f4;
}

.member3 .content .title form label input {
  display: none;
}

.member3 .content .title form label input:checked+span {
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}

.member3 .content .title form label span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #3ab2c3;
  display: block;
}

.member3 .content .info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 40px;
}

.member3 .content .info .imgArea {
  padding-right: 20px;
  width: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}

.member3 .content .info .imgArea label input {
  display: none;
}

.member3 .content .info .imgArea label span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  background: #3ab2c3;
  font-size: 20px;
  gap: 10px;
  color: #fff;
}

.member3 .content .info .text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 20px;
  border-left: 1px solid #d4d4d4;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.member3 .content .info .text h4 {
  font-size: 20px;
  margin-bottom: 8px;
}

.member3 .content .info .text p {
  font-size: 20px;
}

.member3 .content .info .text textarea {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
  border: none;
  border-radius: 12px;
  resize: none;
  padding: 16px;
}

@media (max-width: 768px) {
  .member3 .content .info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member3 .content .info .imgArea {
    margin: auto;
    padding-right: 0;
    margin-bottom: 20px;
  }

  .member3 .content .info .text {
    padding-left: 0;
    border-left: none;
  }
}

.member3 .content .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 20px;
}

.member3 .content .btnGroup a,
.member3 .content .btnGroup button {
  padding: 16px 40px;
  font-size: 20px;
  border-radius: 40px;
}

.member3 .content .btnGroup a.next,
.member3 .content .btnGroup button.next {
  background: #3ab2c3;
  color: #fff;
  border: 1px solid #3ab2c3;
}

.member3 .content .btnGroup a.back,
.member3 .content .btnGroup button.back {
  border: 1px solid #ffa557;
  background: #fff7ce;
  color: #ffa557;
}

@media (max-width: 576px) {
  .member3 .content .btnGroup {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

.member4 .content {
  padding: 40px;
  border-radius: 24px;
  background: #fff;
}

.member4 .content .titleLinear {
  font-size: 32px;
  font-weight: 700;
  background: -webkit-gradient(linear, left top, left bottom, from(#ffc42d), color-stop(65.62%, #ff972e));
  background: linear-gradient(180deg, #ffc42d 0%, #ff972e 65.62%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.member4 .content h4 {
  margin-bottom: 20px;
  font-size: 20px;
}

.member4 .content .levelList {
  margin-bottom: 60px;
  gap: 40px 0;
}

.member4 .content .levelList li .levelBox {
  padding: 20px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  height: 100%;
}

.member4 .content .levelList li .levelBox .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding-bottom: 25px;
  border-bottom: 1px solid #ffffff;
  margin-bottom: 20px;
}

.member4 .content .levelList li .levelBox .title h5 {
  font-size: 24px;
  font-weight: 700;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.member4 .content .levelList li .levelBox .title p {
  padding: 8px 16px;
  border-radius: 10px;
  color: #fff;
}

.member4 .content .levelList li .levelBox .titleLevel {
  font-size: 20px;
  gap: 8px 0;
}

.member4 .content .levelList li .levelBox .titleLevel li:first-child p {
  color: #fff;
  background: #ffa557;
  padding: 8px;
  border-radius: 8px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.member4 .content .levelList li .levelBox .titleLevel li p {
  padding: 8px;
  border-radius: 8px;
  background: #fff;
  color: #ffa557;
  text-align: center;
}

.member4 .content .levelList li .levelBox .listGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.member4 .content .levelList li .levelBox .listGroup .list {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.member4 .content .levelList li .levelBox .list {
  font-size: 20px;
  list-style: disc;
  padding-left: 14px;
}

.member4 .content .levelList li .levelBox .list li {
  margin-bottom: 8px;
}

.member4 .content .levelList li .levelBox .list li:last-child {
  margin-bottom: 0;
}

.member4 .content .levelList li:first-child .levelBox {
  background: #ebebeb;
}

.member4 .content .levelList li:first-child .levelBox .title p {
  background: #999999;
}

.member4 .content .levelList li:nth-child(2) .levelBox {
  background: #e1f4f5;
}

.member4 .content .levelList li:nth-child(2) .levelBox .title p {
  background: #63bfc5;
}

.member4 .content .levelList li:last-child .levelBox {
  background: #fff6d8;
}

.member4 .content .levelList li:last-child .levelBox .title {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 20px;
  -webkit-box-align: initial;
  -ms-flex-align: initial;
  align-items: initial;
}

.member4 .content .contactList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.member4 .content .contactList li {
  width: 50%;
}

.member4 .content .contactList li:first-child div {
  border-radius: 12px;
  padding: 40px;
  font-size: 20px;
  background: #e9f6f4;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.member4 .content .contactList li:first-child div p {
  text-align: center;
}

.member4 .content .contactList li:first-child div p:first-child {
  margin-bottom: 20px;
}

.member4 .content .contactList li:first-child div p:last-child {
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  font-weight: 700;
}

.member4 .content .contactList li:last-child>div {
  height: 100%;
  min-height: 150px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  -webkit-box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.16);
}

.member4 .content .contactList li:last-child>div .bg {
  width: 100%;
  height: 100%;
  min-height: 150px;
  -o-object-fit: cover;
  object-fit: cover;
}

.member4 .content .contactList li:last-child>div div {
  position: absolute;
  padding: 40px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  top: 0;
  left: 0;
  background: -webkit-gradient(linear, left top, right top, color-stop(30.94%, #00b900), color-stop(58.38%, rgba(0, 185, 0, 0)));
  background: linear-gradient(90deg, #00b900 30.94%, rgba(0, 185, 0, 0) 58.38%);
}

.member4 .content .contactList li:last-child>div div p {
  color: #fff;
  font-size: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
}

.member4 .content .downloadLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 80px;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #a1a1a1;
}

.member4 .content .downloadLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.member4 .content .downloadLink li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px 0 0 12px;
}

.member4 .content .downloadLink li a p {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

.member4 .content .downloadLink li:first-child a::before {
  background: #ffa557;
}

.member4 .content .downloadLink li:first-child a p {
  color: #ffa557;
}

.member4 .content .downloadLink li:last-child a::before {
  background: #3ab2c3;
}

.member4 .content .downloadLink li:last-child a p {
  color: #3ab2c3;
}

@media (max-width: 1200px) {
  .member4 .content .contactList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member4 .content .contactList li {
    width: 100%;
  }
}

@media (max-width: 991px) {
  .member4 .content .downloadLink {
    gap: 20px;
  }

  .member4 .content .downloadLink li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .member4 .content {
    padding: 20px;
  }

  .member4 .content .levelList li .levelBox .listGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .member4 .content .levelList li .levelBox .listGroup .list {
    width: 100%;
  }

  .member4 .content .contactList li:first-child div {
    padding: 20px;
  }

  .member4 .content .contactList li:last-child>div div .line {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 576px) {
  .member4 .content .downloadLink {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

@media (max-width: 440px) {
  .member4 .content .levelList li .levelBox .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 10px;
  }

  .member4 .content .levelList li .levelBox .title p {
    -ms-flex-item-align: end;
    align-self: flex-end;
  }
}

.member5 .content {
  padding: 40px;
  background: #fff;
  border-radius: 24px;
}

.member5 .content .row {
  gap: 20px 0;
}

.member5 .content .ruleList {
  background: #e9f6f4;
  border-radius: 12px;
  padding: 20px;
  height: 100%;
}

.member5 .content .ruleList ul {
  list-style: disc;
  padding-left: 14px;
  font-size: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 100%;
}

.member5 .content .ruleList ul li div {
  padding: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
}

.member5 .content .ruleList ul li::marker {
  color: #3ab2c3;
}

.member5 .content .ruleList ul li span {
  -ms-flex-negative: 0;
  flex-shrink: 0;
  width: 80px;
  text-align: right;
  padding: 12px 20px 12px 0;
  background: #3ab2c3;
  border-radius: 12px;
  color: #fff;
}

.member5 .content .downloadLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 80px;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #a1a1a1;
}

.member5 .content .downloadLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.member5 .content .downloadLink li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px 0 0 12px;
}

.member5 .content .downloadLink li a p {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

.member5 .content .downloadLink li:first-child a::before {
  background: #ffa557;
}

.member5 .content .downloadLink li:first-child a p {
  color: #ffa557;
}

.member5 .content .downloadLink li:last-child a::before {
  background: #3ab2c3;
}

.member5 .content .downloadLink li:last-child a p {
  color: #3ab2c3;
}

@media (max-width: 991px) {
  .member5 .content .downloadLink {
    gap: 20px;
  }

  .member5 .content .downloadLink li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 768px) {
  .member5 .content {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .member5 .content .downloadLink {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.index .banner img {
  width: 100%;
}

.index .indexBG {
  padding: 40px 0 360px;
  background: url("../img/background/bg3.png") no-repeat center top 200px, url("/img/background/bg3.png") no-repeat center 45%, url("/img/background/bg5.png") no-repeat right 180px bottom 47px, url("/img/background/bg6.png") no-repeat center bottom, url("/img/background/bg4.png") no-repeat center bottom;
  background-size: 100%, 100%, auto, 100%, 100%;
}

@media (max-width: 991px) {
  .index .indexBG {
    background: url("../img/background/bg3.png") no-repeat center top 200px, url("/img/background/bg3.png") no-repeat center 45%, url("/img/background/bg5.png") no-repeat right 10px bottom 20px, url("/img/background/bg6.png") no-repeat center bottom, url("/img/background/bg4.png") no-repeat center bottom;
    background-size: 100%, 100%, 50%, 100%, 100%;
  }
}

.index .homeTitle {
  -webkit-writing-mode: vertical-lr;
  -ms-writing-mode: tb-lr;
  writing-mode: vertical-lr;
}

.index .homeTitle h3 {
  font-size: 32px;
  font-weight: 700;
}

.index .homeTitle p {
  font-size: 28px;
  position: relative;
  display: inline-block;
}

.index .homeTitle p::after {
  position: absolute;
  content: "";
  display: block;
  width: 16px;
  height: 100%;
  background: #ffe248;
  top: 0;
  right: 10px;
  z-index: -1;
}

@media (max-width: 991px) {
  .index .homeTitle {
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: lr-tb;
    writing-mode: horizontal-tb;
  }

  .index .homeTitle p {
    font-size: 28px;
    position: relative;
    display: inline-block;
  }

  .index .homeTitle p::after {
    position: absolute;
    content: "";
    display: block;
    width: 100%;
    height: 16px;
    background: #ffe248;
    top: 10px;
    right: 0;
    z-index: -1;
  }
}

.index .section1 {
  padding-bottom: 50px;
}

.index .section1 .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  position: relative;
  gap: 20px 60px;
  background: url("../img/background/bg2.png") no-repeat right 20px top 100px;
}

.index .section1 .swiper {
  width: 100%;
  margin-top: 80px;
}

.index .section1 .swiper .swiper-slide {
  display: flex;
  height: auto;
}

.index .section1 .swiper .swiper-slide a {
  width: 100%;
  ;
  padding: 20px;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.index .section1 .swiper .swiper-slide a .title {
  margin-bottom: 8px;
  color: #212121;
  flex-grow: 1;
}

.index .section1 .swiper .swiper-slide a .title h3 {
  font-size: 26px;
  font-weight: 500;
  margin-bottom: 4px;
}

.index .section1 .swiper .swiper-slide a .title p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 8px;
}

.index .section1 .swiper .swiper-slide a .title ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
}

.index .section1 .swiper .swiper-slide a .title ul li {
  padding: 5px 16px;
  border-radius: 4px;
  background: #fff7ce;
  color: #ff8720;
}

.index .section1 .swiper .swiper-slide a .imgArea {
  margin-bottom: 8px;
  position: relative;
}

.index .section1 .swiper .swiper-slide a .imgArea img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.index .section1 .swiper .swiper-slide a .imgArea .tag {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 0px 0px 8px 0px;
  background: -webkit-gradient(linear, left top, left bottom, from(#ff7600), to(#ffae23));
  background: linear-gradient(180deg, #ff7600 0%, #ffae23 100%);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 20px;
}

.index .section1 .swiper .swiper-slide a .price {
  padding: 12px 20px;
  color: #fff;
  background: #3ab2c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.index .section1 .swiper .swiper-slide a .price span {
  font-size: 20px;
}

.index .section1 .swiper .swiper-slide a .price p {
  font-size: 32px;
  font-weight: 700;
}

.index .section1 .swiper .swiper-slide:nth-child(even) a .price {
  background: #43b794;
}


/* �X�ⶵ�� - �Ŧ�I�� */
/*.product .list li a .price.blue {
    background: #3ab2c3 !important;*/
/* �Ŧ� */
/*}*/

/* ��L���� - �ź��I�� */
/*.product .list li a .price.green {
    background: #43b794 !important;*/
/* �ź�� */
/*}*/

/* �X�ⶵ�� - �Ŧ�I�� */
.index .section1 .swiper .swiper-slide a .price.blue,
.product .list li a .price.blue,
.productDetail .section1 .right .price.blue span,
.product .list li:nth-child(3n+2) a .price.orange {
  background: #3ab2c3 !important;
  /* �Ŧ� */
}

/* ��L���� - �ź��I�� */
.index .section1 .swiper .swiper-slide a .price.green,
.product .list li a .price.green {
  background: #43b794 !important;
  /* �ź�� */
}

/* ��L���� - �ź��I�� */
.index .section1 .swiper .swiper-slide a .price.orange,
.product .list li a .price.orange,
.productDetail .section1 .right .price.orange span,
.product .list li:nth-child(3n+2) a .price.orange {
  background: #FFA557 !important;
  /* �ź�� */
}



.index .section1 .swiper .more {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-top: 20px;
}

.index .section1 .swiper .more a {
  color: #fff;
  background: #ffe248;
  padding: 8px 20px;
}

.index .section1 .btnGroup {
  position: absolute;
  right: 0;
  bottom: 100px;
}

.index .section1 .btnGroup .button_next {
  width: 60px;
  height: 60px;
  background: url("../img/index/next.svg") no-repeat center;
  background-color: #fff;
  border: 6px solid #ffe248;
  border-bottom: 3px solid #ffe248;
}

.index .section1 .btnGroup .button_prev {
  width: 60px;
  height: 60px;
  background: url("../img/index/prev.svg") no-repeat center;
  background-color: #fff;
  border: 6px solid #ffe248;
  border-top: 3px solid #ffe248;
}

@media (max-width: 991px) {
  .index .section1 .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .index .section1 .swiper {
    margin-top: 0;
  }

  .index .section1 .btnGroup {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    right: 20px;
    top: 0;
  }

  .index .section1 .btnGroup .button_next {
    border: 6px solid #ffe248;
    border-left: 3px solid #ffe248;
  }

  .index .section1 .btnGroup .button_prev {
    border: 6px solid #ffe248;
    border-right: 3px solid #ffe248;
  }
}

.index .section2 {
  padding-bottom: 100px;
}

.index .section2 .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  gap: 20px 40px;
  background: url("../img/background/bg2.png") no-repeat left 20px top 100px;
}

.index .section2 .content {
  width: 100%;
  margin-top: 80px;
  padding: 20px;
  background: #fff;
}

.index .section2 .content>div:first-child {
  border-right: 1px solid #cdcdcd;
}

.index .section2 .content .newsArea .imgArea {
  margin-bottom: 10px;
}

.index .section2 .content .newsArea .imgArea img {
  width: 100%;
}

.index .section2 .content .newsArea .newsTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.index .section2 .content .newsArea .newsTitle .date {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.index .section2 .content .newsArea .newsTitle .date span {
  color: #3ab2c3;
  font-weight: 700;
}

.index .section2 .content .newsArea .newsTitle .date span:first-child {
  font-size: 80px;
}

.index .section2 .content .newsArea .newsTitle .date span:last-child {
  font-size: 24px;
}

.index .section2 .content .newsArea .newsTitle h4 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 16px;
}

.index .section2 .content .newsArea .newsTitle p {
  margin-top: auto;
  font-size: 18px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.index .section2 .content ul {
  margin-bottom: 40px;
}

.index .section2 .content ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px dashed #cdcdcd;
}

.index .section2 .content ul li a h4 {
  color: #212121;
}

.index .section2 .content ul li a span {
  color: #999999;
}

.index .section2 .content .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

.index .section2 .content .btnGroup a {
  color: #fff;
  background: #ffe248;
  padding: 8px 20px;
}

@media (max-width: 991px) {
  .index .section2 .container {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .index .section2 .content {
    margin-top: 0;
  }

  .index .section2 .content>div:first-child {
    border-right: none;
    border-bottom: 1px solid #cdcdcd;
    padding-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .index .section2 .content .newsArea .newsTitle {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.index .section3 {
  padding-bottom: 80px;
}

.index .section3 .content {
  gap: 20px 0;
  padding: 20px;
  background: #fff;
}

.index .section3 .content>div>a img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.index .section3 .content .list .listTitle {
  padding: 20px;
  background: #ffe248;
}

.index .section3 .content .list .listTitle h3 {
  margin-bottom: 10px;
  color: #fff;
  font-size: 32px;
}

.index .section3 .content .list .listTitle a {
  display: block;
  font-size: 24px;
  border-radius: 30px;
  background: #ffc42d;
  padding: 5px;
  color: #fff;
  text-align: center;
}

.index .section3 .content .list ul {
  max-height: 500px;
  overflow: auto;
}

.index .section3 .content .list ul li .listLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
  color: #212121;
  border: 1px solid #cdcdcd;
  border-top: none;
}

.index .section3 .content .list ul li .listLink:hover {
  color: #ffa557;
  background: #fafafa;
}

.index .section4 {
  padding-bottom: 120px;
}

.index .section4 ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.index .section4 ul li {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.index .section4 ul li .content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  color: #fff;
}

.index .section4 ul li .content p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
}

.index .section4 ul li .box {
  width: 240px;
  height: 240px;
  background: #ffe248;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
}

.index .section4 ul li .box img {
  width: 60px;
  height: 60px;
}

.index .section4 ul li .box p {
  font-size: 24px;
}

.index .section4 ul li:first-child .content {
  background: url("../img/index/calculator2.png") no-repeat center;
  background-size: cover;
}

.index .section4 ul li:last-child .content {
  background: url("../img/index/member.png") no-repeat center;
  background-size: cover;
}

@media (max-width: 1200px) {
  .index .section4 ul li .box {
    width: 160px;
    height: 160px;
  }
}

@media (max-width: 991px) {
  .index .section4 ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .index .section4 ul li {
    width: 100%;
  }

  .index .section4 ul li:last-child {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .index .section4 ul li:last-child .content p {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }

  .index .section4 ul li:last-child .content p img {
    rotate: 180deg;
  }
}

@media (max-width: 768px) {
  .index .section4 ul li .content {
    font-size: 20px;
  }

  .index .section4 ul li .content p {
    gap: 10px;
  }

  .index .section4 ul li .content p img {
    width: 20px;
  }
}

@media (max-width: 768px) {
  .index .section4 ul li .content {
    font-size: 16px;
  }

  .index .section4 ul li .content p {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .index .section4 ul li:last-child .content p {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.index .section5 {
  padding-bottom: 140px;
}

.index .section5 .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 40px;
}

.index .section5 ul {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px 0;
}

.index .section5 ul:last-child {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.index .section5 ul li h3 {
  font-size: 42px;
  color: #3ab2c3;
  font-weight: 700;
  margin-bottom: 20px;
}

.index .section5 ul li span {
  font-size: 26px;
  position: relative;
  display: inline-block;
  margin-bottom: 10px;
}

.index .section5 ul li span::after {
  content: "";
  display: block;
  position: absolute;
  width: 110%;
  height: 16px;
  background: #ffe248;
  z-index: -1;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.index .section5 ul li p {
  font-size: 22px;
}

.index .section6 .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.index .section6 .video-container iframe,
.index .section6 .video-container object,
.index .section6 .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.index .section7 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.index .section7 .right {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 480px;
}

.index .section7 .right img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.index .section7 .left {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  max-height: 480px;
}

.index .section7 .left img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.index .section7 .middle {
  width: 480px;
  height: 480px;
  background: #fff;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.index .section7 .middle::after {
  display: block;
  content: "";
  position: absolute;
  width: 14px;
  height: 100%;
  background: url("../img/index/path.png") no-repeat center;
  background-size: cover;
  top: 0;
  right: -14px;
}

.index .section7 .middle::before {
  display: block;
  content: "";
  position: absolute;
  width: 14px;
  height: 100%;
  background: url("../img/index/path2.png") no-repeat center;
  background-size: cover;
  top: 0;
  left: -14px;
}

.index .section7 .middle span {
  display: block;
  margin-bottom: 24px;
}

.index .section7 .middle h3 {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 20px;
}

.index .section7 .middle a {
  padding: 20px 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 10px;
  color: #fff;
  background: #212121;
  font-size: 32px;
  -webkit-box-shadow: 6px 12px 16px 0px rgba(0, 0, 0, 0.16);
  box-shadow: 6px 12px 16px 0px rgba(0, 0, 0, 0.16);
  border-radius: 60px;
  margin-bottom: 20px;
}

.index .section7 .middle p {
  font-size: 20px;
}

@media (max-width: 991px) {
  .index .section7 .middle {
    width: 400px;
    height: 400px;
  }
}

@media (max-width: 768px) {

  .index .section7 .right,
  .index .section7 .left {
    display: none;
  }

  .index .section7 .middle {
    width: 100%;
  }

  .index .section7 .middle::after,
  .index .section7 .middle::before {
    display: none;
  }
}

.master .pageBanner {
  background: url("../img/banner/banner_news.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.master .pageBanner .top {
  padding-bottom: 60px;
}

.master .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.master .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.master .pageBanner .pageLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.master .pageBanner .pageLink li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.master .pageBanner .pageLink li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 8px;
  color: #3ab2c3;
  background: #ffe248;
  padding: 16px;
  font-size: 24px;
}

.master .pageBanner .pageLink li.active a {
  color: #ffa557;
  background: #fff;
  padding: 28px;
}

@media (max-width: 991px) {
  .master .pageBanner .pageLink {
    display: none;
  }
}

.master .main {
  padding-top: 100px;
  padding-bottom: 360px;
}

/* .master .list {
  margin-bottom: 80px;
}

.master .list li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 20px;
  background: #fff;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
  color: #212121;
  border-bottom: 1px dashed #cdcdcd;
}

.master .list li a:hover {
  background: #fafafa;
  color: #ffa557;
} */
.master .list {
  gap: 60px 0;
  margin-bottom: 100px;
}

.master .list a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  color: #212121;
  height: 100%;
}

.master .list a img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  margin-bottom: 10px;
}

.master .list a h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 20px;
}

.master .list a p {
  font-size: 18px;
  font-weight: 700;
  color: #3ab2c3;
  margin-top: auto;
}

.QA .pageBanner {
  background: url("../img/banner/banner_QA.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.QA .pageBanner .top {
  padding-bottom: 60px;
}

.QA .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.QA .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.QA .pageBanner .pageLink {
  color: #ffa557;
  padding: 30px 0;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
}

.QA .pageBanner .pageLink h3 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 20px;
}

.QA .pageBanner .pageLink p {
  font-size: 24px;
}

@media (max-width: 991px) {
  .QA .pageBanner .pageLink {
    display: none;
  }
}

.QA .main {
  padding-top: 100px;
  padding-bottom: 360px;
}

.QA .list li {
  margin-bottom: 20px;
}

.QA .list li:last-child {
  margin-bottom: 0;
}

.QA .list .Q {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
}

.QA .list .Q div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  gap: 20px;
  padding: 20px;
  background: #fff;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.QA .list .Q span {
  background: #ffe248;
  font-size: 32px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 13px 26px;
}

.QA .list .Q h3 {
  font-size: 22px;
  font-weight: 500;
}

.QA .list .A {
  display: none;
  background: #fafafa;
  padding: 20px 120px;
}

.QA .list .A.active {
  display: block;
}

@media (max-width: 991px) {
  .QA .list .A {
    padding: 20px 60px;
  }
}

@media (max-width: 768px) {
  .QA .list .A {
    padding: 20px;
  }
}

@media (max-width: 576px) {
  .QA .list .Q span {
    font-size: 20px;
    padding: 8px 16px;
  }
}

.login .pageBanner {
  background: url("../img/banner/banner_login.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.login .pageBanner .top {
  padding-bottom: 60px;
}

.login .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.login .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.login .pageBanner .pageLink {
  color: #ffa557;
  padding: 30px 0;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  border-radius: 12px 12px 0 0;
}

.login .pageBanner .pageLink h3 {
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 20px;
}

.login .pageBanner .pageLink p {
  font-size: 24px;
}

@media (max-width: 991px) {
  .login .pageBanner .pageLink {
    display: none;
  }
}

.login .content {
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 60px 120px 40px;
}

.login .content .col-xl-6 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login .content form {
  width: 80%;
}

.login .content form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.login .content form .inputArea label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.login .content form .inputArea input {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  background: #f3f3f3;
  padding: 16px;
  border-radius: 12px;
  border: none;
}

.login .content form ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 10px;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 20px;
}

.login .content form ul li {
  font-size: 18px;
  text-align: right;
}

.login .content form ul li button {
  border: none;
  background: transparent;
  text-decoration: underline;
}

.login .content form ul li:first-child button {
  color: #3d9e8d;
}

.login .content form ul li:nth-child(2) button {
  color: #ffa557;
}

.login .content form ul li:last-child button {
  color: #3d9e8d;
}

.login .content form .btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login .content form .btnGroup button {
  border: none;
  background: #3ab2c3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 20px;
  font-size: 20px;
  color: #fff;
  padding: 15px 40px;
  border-radius: 40px;
}

@media (max-width: 1200px) {
  .login .content .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    gap: 40px;
  }
}

@media (max-width: 768px) {
  .login .content {
    padding: 40px;
  }

  .login .content form {
    width: 100%;
  }
}

@media (max-width: 440px) {
  .login .content form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.login .downloadLink {
  padding: 40px;
  background: #ffe248;
}

.login .downloadLink ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 80px;
}

.login .downloadLink ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.login .downloadLink ul li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px 0 0 12px;
}

.login .downloadLink ul li a p {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

.login .downloadLink ul li:first-child a::before {
  background: #ffa557;
}

.login .downloadLink ul li:first-child a p {
  color: #ffa557;
}

.login .downloadLink ul li:last-child a::before {
  background: #3ab2c3;
}

.login .downloadLink ul li:last-child a p {
  color: #3ab2c3;
}

@media (max-width: 991px) {
  .login .downloadLink ul {
    gap: 20px;
  }

  .login .downloadLink ul li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .login .downloadLink ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.level .pageBanner {
  background: url("../img/banner/banner_login.png") no-repeat center;
  background-size: cover;
  padding-top: 40px;
}

.level .pageBanner .top {
  padding-bottom: 60px;
}

.level .pageBanner .top h2 {
  font-size: 40px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 8px;
}

.level .pageBanner .top ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #fff;
  font-size: 20px;
  text-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
}

.level .pageBanner .pageLink {
  color: #ffa557;
  padding: 30px 0;
  background: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-radius: 12px 12px 0 0;
  gap: 60px;
}

.level .pageBanner .pageLink div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
}

.level .pageBanner .pageLink p {
  font-size: 24px;
}

@media (max-width: 991px) {
  .level .pageBanner .pageLink {
    display: none;
  }
}

.level .type {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  width: 90%;
  margin: 0 auto 20px;
}

.level .type li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  font-size: 24px;
  color: #808080;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #8d8d8d;
  background: #fafafa;
}

.level .type li:first-child.active {
  background: #70ba97;
  border: 1px solid #70ba97;
  color: #fff;
}

.level .type li:nth-child(2).active {
  background: #63bfc5;
  border: 1px solid #63bfc5;
  color: #fff;
}

.level .type li:last-child.active {
  background: #ffa557;
  border: 1px solid #ffa557;
  color: #fff;
}

@media (max-width: 576px) {
  .level .type {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .type li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

.level .normal {
  display: none;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 60px;
}

.level .normal.active {
  display: block;
}

.level .normal .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px;
  font-size: 20px;
  color: #fff;
  background: #88c8a9;
  border-radius: 10px;
  margin-bottom: 20px;
}

.level .normal .title p:first-child {
  padding-right: 40px;
  border-right: 1px solid #fff;
}

.level .normal .title p:last-child {
  padding-left: 40px;
}

.level .normal .content {
  padding: 20px;
  background: #e9f6f0;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.level .normal .content ul {
  width: 50%;
  padding: 0 20px;
  border-right: 1px solid #a2c8b6;
  font-size: 18px;
  list-style: disc;
}

.level .normal .content ul li {
  margin-bottom: 10px;
}

.level .normal .content ul li:last-child {
  margin-bottom: 0;
}

.level .normal .content div {
  width: 50%;
  padding-left: 20px;
  font-size: 18px;
}

.level .normal .content div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #629a80;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .level .normal .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .normal .content ul {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #a2c8b6;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .level .normal .content div {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .level .normal .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
  }

  .level .normal .title p:first-child {
    padding-right: 0px;
    border: none;
  }

  .level .normal .title p:last-child {
    padding-left: 0px;
  }
}

.level .try {
  display: none;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 60px;
}

.level .try.active {
  display: block;
}

.level .try .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  padding: 8px;
  font-size: 20px;
  color: #fff;
  background: #63bfc5;
  border-radius: 10px;
  margin-bottom: 20px;
}

.level .try .title p:first-child {
  padding-right: 40px;
  border-right: 1px solid #fff;
}

.level .try .title p:last-child {
  padding-left: 40px;
}

.level .try .content {
  padding: 20px;
  background: #e1f4f5;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.level .try .content ul {
  width: 50%;
  padding: 0 20px;
  border-right: 1px solid #63bfc5;
  font-size: 18px;
  list-style: disc;
}

.level .try .content ul li {
  margin-bottom: 10px;
}

.level .try .content ul li:last-child {
  margin-bottom: 0;
}

.level .try .content ul:nth-child(2) {
  padding-left: 40px;
}

.level .try .content div {
  width: 50%;
  padding-left: 20px;
  font-size: 18px;
}

.level .try .content div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #44a6ac;
  margin-bottom: 8px;
}

@media (max-width: 768px) {
  .level .try .content {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .try .content ul {
    width: 100%;
    border-bottom: 1px solid #63bfc5;
    border-right: none;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .level .try .content ul:nth-child(2) {
    padding-left: 20px;
  }

  .level .try .content div {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .level .try .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    gap: 10px;
  }

  .level .try .title p:first-child {
    padding-right: 0px;
    border-right: none;
  }

  .level .try .title p:last-child {
    padding-left: 0px;
  }
}

.level .formal {
  display: none;
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 60px;
}

.level .formal.active {
  display: block;
}

.level .formal .title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #ffa557;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}

.level .formal .title li {
  padding: 10px 40px;
  border-right: 1px solid #ffa557;
  font-size: 20px;
  font-weight: 500;
  color: #ffa557;
}

.level .formal .title li:first-child {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #ffa557;
  color: #fff;
}

.level .formal .title li:last-child {
  border: none;
}

.level .formal .subType {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
}

.level .formal .subType li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
}

.level .formal .subType li p {
  display: inline-block;
  font-size: 24px;
  color: #8d8d8d;
  padding: 12px 0;
  border-bottom: 4px solid #f1f1f1;
}

.level .formal .subType li.active p {
  color: #000;
  border-bottom: 4px solid #ffa557;
}

.level .formal .sub1 {
  display: none;
  background: #fff0e4;
  padding: 20px;
  border-radius: 12px;
}

.level .formal .sub1 .subTitle {
  font-size: 24px;
  font-weight: 500;
  color: #ffa557;
  text-align: center;
  background: #fff;
  padding: 8px;
  border-radius: 12px;
  margin-bottom: 20px;
}

.level .formal .sub1 .subContent {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 18px;
}

.level .formal .sub1 .subContent ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  list-style: disc;
  padding: 0 20px;
  border-right: 1px solid #ffa557;
}

.level .formal .sub1 .subContent ul li {
  margin-bottom: 10px;
}

.level .formal .sub1 .subContent ul li:last-child {
  margin-bottom: 0;
}

.level .formal .sub1 .subContent ul:nth-child(2) {
  padding-left: 40px;
}

.level .formal .sub1 .subContent div {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding-left: 20px;
}

.level .formal .sub1 .subContent div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ffa557;
  margin-bottom: 10px;
}

.level .formal .sub1.active {
  display: block;
}

.level .formal .sub2 {
  display: none;
}

.level .formal .sub2>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.level .formal .sub2>ul>li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #fff0e4;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
}

.level .formal .sub2>ul>li .subTitle {
  background: #fff;
  color: #ffa557;
  text-align: center;
  font-size: 24px;
  padding: 8px;
  font-weight: 500;
  border-radius: 12px;
  margin-bottom: 20px;
}

.level .formal .sub2>ul>li .subContent {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.level .formal .sub2>ul>li .subContent>ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 20px 40px;
  border-bottom: 1px solid #ffa557;
  margin-bottom: 20px;
}

.level .formal .sub2>ul>li .subContent ul {
  list-style: disc;
}

.level .formal .sub2>ul>li .subContent ul li {
  margin-bottom: 10px;
}

.level .formal .sub2>ul>li .subContent ul li:last-child {
  margin-bottom: 0;
}

.level .formal .sub2>ul>li .subContent div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ffa557;
  margin-bottom: 8px;
}

.level .formal .sub2>ul>li .subContent div ul {
  padding: 0 20px;
}

.level .formal .sub2.active {
  display: block;
}

.level .formal .sub3 {
  display: none;
}

.level .formal .sub3>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.level .formal .sub3>ul>li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #fff0e4;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
}

.level .formal .sub3>ul>li .subTitle {
  background: #fff;
  color: #ffa557;
  text-align: center;
  font-size: 24px;
  padding: 8px;
  font-weight: 500;
  border-radius: 12px;
  margin-bottom: 20px;
}

.level .formal .sub3>ul>li .subContent {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.level .formal .sub3>ul>li .subContent>ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 20px 40px;
  border-bottom: 1px solid #ffa557;
  margin-bottom: 20px;
}

.level .formal .sub3>ul>li .subContent ul {
  list-style: disc;
}

.level .formal .sub3>ul>li .subContent ul li {
  margin-bottom: 10px;
}

.level .formal .sub3>ul>li .subContent ul li:last-child {
  margin-bottom: 0;
}

.level .formal .sub3>ul>li .subContent div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ffa557;
  margin-bottom: 8px;
}

.level .formal .sub3>ul>li .subContent div ul {
  padding: 0 20px;
}

.level .formal .sub3.active {
  display: block;
}

.level .formal .sub4 {
  display: none;
}

.level .formal .sub4>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 20px;
}

.level .formal .sub4>ul>li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background: #fff0e4;
  border-radius: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 20px;
}

.level .formal .sub4>ul>li .subTitle {
  background: #fff;
  color: #ffa557;
  text-align: center;
  font-size: 24px;
  padding: 8px;
  font-weight: 500;
  border-radius: 12px;
  margin-bottom: 20px;
}

.level .formal .sub4>ul>li .subContent {
  font-size: 18px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
}

.level .formal .sub4>ul>li .subContent>ul {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 20px 40px;
  border-bottom: 1px solid #ffa557;
  margin-bottom: 20px;
}

.level .formal .sub4>ul>li .subContent ul {
  list-style: disc;
}

.level .formal .sub4>ul>li .subContent ul li {
  margin-bottom: 10px;
}

.level .formal .sub4>ul>li .subContent ul li:last-child {
  margin-bottom: 0;
}

.level .formal .sub4>ul>li .subContent div h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ffa557;
  margin-bottom: 8px;
}

.level .formal .sub4>ul>li .subContent div ul {
  padding: 0 20px;
}

.level .formal .sub4.active {
  display: block;
}

@media (max-width: 1200px) {
  .level .formal .title {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .level .formal .title li {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
  }

  .level .formal .title li:first-child {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }

  .level .formal .sub4>ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .level .formal .sub4>ul>li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 991px) {
  .level .formal .subType {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .level .formal .subType li {
    width: 50%;
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
  }

  .level .formal .sub2>ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .formal .sub2>ul>li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }

  .level .formal .sub3>ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .formal .sub3>ul>li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .level .formal .title {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .level .formal .title li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ffa557;
  }

  .level .formal .sub1 .subContent {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  .level .formal .sub1 .subContent ul {
    border-right: none;
    border-bottom: 1px solid #ffa557;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .level .formal .sub1 .subContent ul:nth-child(2) {
    padding-left: 20px;
  }

  .level .formal .sub4>ul {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  .level .formal .sub4>ul>li {
    -webkit-box-flex: 0;
    -ms-flex: none;
    flex: none;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .level .formal .subType {
    gap: 10px;
  }

  .level .formal .subType li {
    width: 100%;
  }
}

.level .download {
  position: relative;
}

.level .download .img2 {
  -webkit-transform: translateY(-80px);
  transform: translateY(-80px);
}

.level .download ul {
  position: absolute;
  bottom: 20px;
  right: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 80px;
}

.level .download ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 20px;
  padding: 20px 40px;
  background: #fff;
  border-radius: 12px;
  -webkit-box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 16px 0px rgba(0, 0, 0, 0.1);
  position: relative;
}

.level .download ul li a::before {
  position: absolute;
  content: "";
  display: block;
  width: 14px;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 12px 0 0 12px;
}

.level .download ul li a p {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 20px;
}

.level .download ul li:first-child a::before {
  background: #ffa557;
}

.level .download ul li:first-child a p {
  color: #ffa557;
}

.level .download ul li:last-child a::before {
  background: #3ab2c3;
}

.level .download ul li:last-child a p {
  color: #3ab2c3;
}

@media (max-width: 991px) {
  .level .download>div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
  }

  .level .download>div .img2 {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }

  .level .download ul {
    position: relative;
    bottom: 0px;
    right: 0px;
    gap: 20px;
  }

  .level .download ul li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .level .download ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}