body {
  margin: 0;
  -webkit-text-size-adjust: 100%
}

.topshell,
.btmshell,
.navhold,
.brandMount,
.contactMount,
.ftrGrid,
.cookieBar {
  box-sizing: border-box
}

.topshell {
  background: linear-gradient(135deg, #222940 0%, #F43800 100%);
  padding: 24px 40px;
  position: relative;
  overflow: hidden
}

.topshell::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle at 30% 40%, #f7f8f914 0%, transparent 70%);
  pointer-events: none
}

.topInner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  position: relative;
  z-index: 2
}

.brandMount {
  background: #f7f8f91f;
  padding: 12px 24px;
  border-radius: 9px;
  box-shadow: 0 4px 14px 0 #22294014 0 0 0 1px #f7f8f926;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.brandMount:hover {
  box-shadow: 0 8px 36px 0 #22294021 0 0 0 1px #f7f8f940
}

.brandLogo {
  display: block;
  width: 72px;
  height: 72px;
  object-fit: contain
}

.navhold {
  flex: 1;
  display: flex;
  justify-content: center
}

.topNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center
}

.topNav li {
  margin: 0
}

.navLnk {
  display: block;
  padding: 12px 24px;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  color: #F7F8F9;
  text-decoration: none;
  background: #f7f8f914;
  border-radius: 42px;
  border: 1px solid #f7f8f933;
  transition: background .15s ease-out, border-color .15s ease-out, transform .12s cubic-bezier(0.4, 0, 0.6, 1);
  white-space: nowrap
}

.navLnk:hover {
  background: #f7f8f92e;
  border-color: #f7f8f966;
  transform: translateY(-1px)
}

.navLnk:focus {
  outline: 2px dashed #F7F8F9;
  outline-offset: 4px
}

.contactMount {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end
}

.contactLine {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .012em;
  color: #F7F8F9
}

.contactLine i {
  font-size: 22px;
  opacity: .85
}

.contactTel,
.contactMail {
  color: #F7F8F9;
  text-decoration: none;
  transition: opacity .14s ease-out
}

.contactTel:hover,
.contactMail:hover {
  opacity: .75
}

.contactTel:focus,
.contactMail:focus {
  outline: 2px dashed #F7F8F9;
  outline-offset: 2px
}

@media (max-width: 1024px) {
  .topInner {
    flex-direction: column;
    gap: 24px
  }

  .navhold {
    width: 100%
  }

  .contactMount {
    align-items: center
  }
}

@media (max-width: 640px) {
  .topshell {
    padding: 24px 12px
  }

  .navLnk {
    padding: 8px 12px;
    font-size: 15px
  }

  .contactLine {
    font-size: 15px
  }
}

.btmshell {
  background: #222940;
  padding: 80px 40px 40px;
  position: relative;
  overflow: hidden
}

.btmshell::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle at 60% 60%, #f438000f 0%, transparent 65%);
  pointer-events: none
}

.ftrGrid {
  max-width: 1366px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 40px;
  align-items: start;
  position: relative;
  z-index: 2
}

.ftrBrand {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.ftrLogoMount {
  background: #f7f8f914;
  padding: 12px;
  border-radius: 9px;
  display: inline-block;
  box-shadow: 0 3px 3px 0 #f4380012;
  width: fit-content
}

.ftrLogo {
  display: block;
  width: 65px;
  height: 65px;
  object-fit: contain
}

.ftrTagline {
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #F7F8F9;
  opacity: .7;
  margin: 0
}

.ftrCenter {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center
}

.ftrNav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center
}

.ftrNav li {
  margin: 0
}

.ftrLnk {
  display: block;
  padding: 8px 12px;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .012em;
  color: #F7F8F9;
  text-decoration: none;
  transition: opacity .16s ease-out
}

.ftrLnk:hover {
  opacity: .7
}

.ftrLnk:focus {
  outline: 2px dashed #F7F8F9;
  outline-offset: 3px
}

.ftrCopy {
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F7F8F9;
  opacity: .6;
  margin: 0
}

.ftrContact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end
}

.ftrAddr {
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #F7F8F9;
  font-style: normal;
  text-align: right;
  margin: 0
}

.ftrContactItem {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F7F8F9
}

.ftrContactItem i {
  font-size: 22px;
  opacity: .75
}

.ftrContactLnk {
  color: #F7F8F9;
  text-decoration: none;
  transition: opacity .14s ease-out
}

.ftrContactLnk:hover {
  opacity: .7
}

.ftrContactLnk:focus {
  outline: 2px dashed #F7F8F9;
  outline-offset: 2px
}

@media (max-width: 1024px) {
  .ftrGrid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .ftrBrand,
  .ftrContact {
    align-items: center
  }

  .ftrAddr {
    text-align: center
  }

  .ftrLogoMount {
    margin: 0 auto
  }
}

@media (max-width: 640px) {
  .btmshell {
    padding: 40px 12px 24px
  }

  .ftrGrid {
    gap: 24px
  }
}

.cookieBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #F7F8F9;
  border-top: 2px solid #F43800;
  box-shadow: 0 -4px 14px 0 #22294014;
  padding: 24px 40px;
  z-index: 1200;
  display: none;
  transform: translateY(100%);
  transition: transform .22s cubic-bezier(0.4, 0, 0.6, 1)
}

.cookieBar.visible {
  transform: translateY(0)
}

.cookieInner {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}

.cookieTxt {
  flex: 1;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  margin: 0
}

.cookieTxt strong {
  font-weight: 700;
  color: #F43800
}

.cookieActions {
  display: flex;
  gap: 12px;
  align-items: center
}

.cookieBtn {
  padding: 12px 24px;
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .015em;
  color: #F7F8F9;
  background: #F43800;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .16s ease-out, box-shadow .16s ease-out;
  box-shadow: 0 3px 3px 0 #f4380012;
  min-width: 120px
}

.cookieBtn:hover {
  background: #d63200;
  box-shadow: 0 4px 14px 0 #f4380014
}

.cookieBtn:focus {
  outline: 2px dashed #F43800;
  outline-offset: 4px
}

.cookiePolicy {
  font-family: 'Exo 2', sans-serif;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  text-decoration: underline;
  transition: opacity .14s ease-out
}

.cookiePolicy:hover {
  opacity: .7
}

.cookiePolicy:focus {
  outline: 2px dashed #222940;
  outline-offset: 2px
}

@media (max-width: 1024px) {
  .cookieInner {
    flex-direction: column;
    align-items: stretch
  }

  .cookieActions {
    flex-direction: column;
    width: 100%
  }

  .cookieBtn {
    width: 100%
  }
}

@media (max-width: 640px) {
  .cookieBar {
    padding: 24px 12px
  }

  .cookieTxt {
    font-size: 15px
  }
}

.rules-text {
  max-width: 1366px;
  margin: 0 auto;
  padding: 80px 24px;
  background: #fff
}

@media (max-width: 640px) {
  .rules-text {
    padding: 40px 12px
  }
}

.rules-text h1 {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 40px
}

.rules-text h2 {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 80px 0 24px
}

.rules-text h3 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 40px 0 24px
}

.rules-text h4,
.rules-text h5,
.rules-text h6 {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 24px 0 12px;
  font-weight: 600
}

.rules-text p {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px
}

.rules-text ul,
.rules-text ol {
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px;
  padding-left: 40px
}

@media (max-width: 640px) {

  .rules-text ul,
  .rules-text ol {
    padding-left: 24px
  }
}

.rules-text ul {
  list-style-type: disc
}

.rules-text ol {
  list-style-type: decimal
}

.rules-text li {
  margin: 0 0 12px
}

.rules-text li:last-child {
  margin-bottom: 0
}

.rules-text ul ul,
.rules-text ol ul,
.rules-text ul ol,
.rules-text ol ol {
  margin: 12px 0 0
}

.rules-text strong,
.rules-text b {
  font-weight: 600;
  color: #222940
}

.rules-text em,
.rules-text i {
  font-style: italic
}

.rules-text a {
  color: #F43800;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color .16s ease-out
}

.rules-text a:hover {
  color: #222940
}

.rules-text a:focus {
  outline: 2px solid #F43800;
  outline-offset: 2px;
  border-radius: 4px
}

.rules-text table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 40px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  background: #fff;
  border: 1px solid #F7F8F9;
  box-shadow: 0 3px 3px 0 #22294012
}

.rules-text thead {
  background: #F7F8F9
}

.rules-text th {
  padding: 12px 24px;
  text-align: left;
  font-weight: 600;
  color: #222940;
  border-bottom: 2px solid #F43800
}

.rules-text td {
  padding: 12px 24px;
  color: #222940;
  border-bottom: 1px solid #F7F8F9
}

.rules-text tr:last-child td {
  border-bottom: none
}

.rules-text tbody tr:hover {
  background: #F7F8F9;
  transition: background .14s ease-out
}

@media (max-width: 640px) {
  .rules-text table {
    font-size: 15px
  }

  .rules-text th,
  .rules-text td {
    padding: 8px 12px
  }
}

.rules-text hr {
  border: none;
  height: 1px;
  background: #F7F8F9;
  margin: 80px 0
}

@media (max-width: 640px) {
  .rules-text hr {
    margin: 40px 0
  }
}

.rules-text div {
  margin: 0 0 24px
}

.rules-text blockquote {
  margin: 0 0 24px;
  padding: 24px 24px 24px 40px;
  background: #F7F8F9;
  border-left: 4px solid #F43800;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: .01em;
  color: #222940;
  border-radius: 4px
}

@media (max-width: 640px) {
  .rules-text blockquote {
    padding: 12px 12px 12px 24px
  }
}

.rules-text code {
  background: #F7F8F9;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-size: 15px;
  color: #222940
}

.rules-text pre {
  background: #F7F8F9;
  padding: 24px;
  border-radius: 4px;
  overflow-x: auto;
  margin: 0 0 24px
}

.rules-text pre code {
  background: none;
  padding: 0
}

.lrnprgdtl {
  background: #F7F8F9;
  overflow-x: clip
}

.lrnprgdtl .tpbnr {
  background: linear-gradient(127deg, #F43800 0%, #F7F8F9 48%, #222940 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden
}

.lrnprgdtl .tpbnr::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #222940;
  border-radius: 42px;
  top: 40px;
  left: 12%;
  opacity: 0;
  animation: dotreveal .18s ease-out .1s forwards
}

.lrnprgdtl .tpbnr::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background: #F43800;
  border-radius: 42px;
  top: 60px;
  left: 14%;
  opacity: 0;
  animation: dotreveal .18s ease-out .2s forwards
}

@keyframes dotreveal {
  to {
    opacity: 1
  }
}

.lrnprgdtl .tpbnrwrp {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  position: relative
}

.lrnprgdtl .tpcnt {
  flex: 0 0 42%;
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .15s forwards
}

@keyframes cascadeup {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.lrnprgdtl .eyebrow {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 12px;
  text-transform: uppercase;
  font-weight: 600
}

.lrnprgdtl .tpcnt h1 {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  margin: 0
}

.lrnprgdtl .tpimg {
  flex: 1;
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .25s forwards
}

.lrnprgdtl .tpimg img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
  box-shadow: 0 8px 36px 0 #f4380021
}

.lrnprgdtl .dtlgrd {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px
}

.lrnprgdtl .mtablk {
  background: #FFF;
  border: 2px solid #F7F8F9;
  border-radius: 15px;
  padding: 40px;
  margin: 0 0 40px;
  position: relative;
  box-shadow: 0 4px 14px 0 #22294014;
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .35s forwards
}

.lrnprgdtl .mtablk::before {
  content: '';
  position: absolute;
  top: -2px;
  right: 40px;
  width: 80px;
  height: 6px;
  background: #F43800;
  border-radius: 4px
}

.lrnprgdtl .mtarow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 24px
}

.lrnprgdtl .mtatag {
  display: inline-flex;
  align-items: center;
  background: #F7F8F9;
  border: 1px solid #F43800;
  border-radius: 42px;
  padding: 8px 24px;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  transition: background .15s ease-out, border-color .15s ease-out
}

.lrnprgdtl .mtatag:hover {
  background: #F43800;
  border-color: #F43800;
  color: #FFF
}

.lrnprgdtl .mtarow .prc {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F43800;
  font-weight: 700;
  margin: 0
}

.lrnprgdtl .mtarow .prcnote {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0;
  flex: 1 1 100%
}

.lrnprgdtl .mtainf {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid #F7F8F9
}

.lrnprgdtl .infitm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940
}

.lrnprgdtl .infitm svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0
}

.lrnprgdtl .prgblk {
  background: #FFF;
  border: 2px solid #F7F8F9;
  border-radius: 15px;
  padding: 40px;
  margin: 0 0 40px;
  box-shadow: 0 4px 14px 0 #22294014;
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .45s forwards
}

.lrnprgdtl .prgblk h2 {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px;
  text-transform: uppercase
}

.lrnprgdtl .prgblk p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 24px
}

.lrnprgdtl .prgblk p:last-child {
  margin: 0
}

.lrnprgdtl .prgblk mark {
  background: linear-gradient(127deg, #F43800 0%, #F7F8F9 48%, #222940 100%);
  color: #FFF;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600
}

.lrnprgdtl .prgblk ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.lrnprgdtl .prgblk ul li {
  position: relative;
  padding: 0 0 0 32px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.lrnprgdtl .prgblk ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 2px;
  background: #F43800
}

.lrnprgdtl .prgblk blockquote {
  border-left: 4px solid #F43800;
  padding: 12px 24px;
  margin: 24px 0;
  background: #F7F8F9;
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.lrnprgdtl .dscblk {
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .55s forwards
}

.lrnprgdtl .dscsplit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 #22294014
}

.lrnprgdtl .dsclft {
  background: #222940;
  padding: 40px
}

.lrnprgdtl .dscrgt {
  background: #F7F8F9;
  padding: 40px
}

.lrnprgdtl .dsclft h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #FFF;
  margin: 0 0 24px
}

.lrnprgdtl .dsclft p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F8F9;
  margin: 0 0 24px
}

.lrnprgdtl .dsclft p:last-child {
  margin: 0
}

.lrnprgdtl .dsclft cite {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F43800;
  font-style: normal;
  font-weight: 600
}

.lrnprgdtl .dsclft ul,
.lrnprgdtl .dsclft ol {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  counter-reset: item
}

.lrnprgdtl .dsclft ol {
  counter-reset: item
}

.lrnprgdtl .dsclft ul li,
.lrnprgdtl .dsclft ol li {
  position: relative;
  padding: 0 0 0 32px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F8F9
}

.lrnprgdtl .dsclft ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 2px;
  background: #F43800
}

.lrnprgdtl .dsclft ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #F43800;
  font-weight: 600
}

.lrnprgdtl .dsclft dl {
  margin: 0 0 24px
}

.lrnprgdtl .dsclft dt {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #F43800;
  font-weight: 600;
  margin: 0 0 8px
}

.lrnprgdtl .dsclft dd {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F8F9;
  margin: 0 0 24px;
  padding: 0
}

.lrnprgdtl .dsclft details {
  margin: 0 0 24px
}

.lrnprgdtl .dsclft summary {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #F43800;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0 12px;
  transition: color .15s ease-out
}

.lrnprgdtl .dsclft summary:hover {
  color: #FFF
}

.lrnprgdtl .dscrgt h2 {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px
}

.lrnprgdtl .dscrgt p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 24px
}

.lrnprgdtl .dscrgt p:first-of-type::first-letter {
  font-size: 72px;
  line-height: 1;
  float: left;
  margin: 0 12px 0 0;
  color: #F43800;
  font-weight: 700
}

.lrnprgdtl .dscrgt p:last-child {
  margin: 0
}

.lrnprgdtl .dscrgt cite {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F43800;
  font-style: normal;
  font-weight: 600
}

.lrnprgdtl .dscrgt ul,
.lrnprgdtl .dscrgt ol {
  list-style: none;
  padding: 0;
  margin: 0 0 24px
}

.lrnprgdtl .dscrgt ol {
  counter-reset: item
}

.lrnprgdtl .dscrgt ul li,
.lrnprgdtl .dscrgt ol li {
  position: relative;
  padding: 0 0 0 32px;
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.lrnprgdtl .dscrgt ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 16px;
  height: 2px;
  background: #F43800
}

.lrnprgdtl .dscrgt ol li::before {
  counter-increment: item;
  content: counter(item) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: #F43800;
  font-weight: 600
}

.lrnprgdtl .dscrgt dl {
  margin: 0 0 24px
}

.lrnprgdtl .dscrgt dt {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #F43800;
  font-weight: 600;
  margin: 0 0 8px
}

.lrnprgdtl .dscrgt dd {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 24px;
  padding: 0
}

.lrnprgdtl .dscrgt details {
  margin: 0 0 24px
}

.lrnprgdtl .dscrgt summary {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #F43800;
  font-weight: 600;
  cursor: pointer;
  margin: 0 0 12px;
  transition: color .15s ease-out
}

.lrnprgdtl .dscrgt summary:hover {
  color: #222940
}

.lrnprgdtl .ctazone {
  text-align: center;
  margin: 80px 0 0;
  opacity: 0;
  animation: cascadeup .2s cubic-bezier(0.4, 0, 0.6, 1) .65s forwards
}

.lrnprgdtl .ctabtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F43800;
  color: #FFF;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  padding: 24px 40px;
  border: 2px solid #F43800;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 600;
  transition: background .18s cubic-bezier(0.4, 0, 0.6, 1), color .18s cubic-bezier(0.4, 0, 0.6, 1), border-color .18s cubic-bezier(0.4, 0, 0.6, 1), transform .18s cubic-bezier(0.4, 0, 0.6, 1);
  box-shadow: 0 4px 14px 0 #f4380014;
  position: relative;
  overflow: hidden
}

.lrnprgdtl .ctabtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #222940;
  transition: left .22s cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 0
}

.lrnprgdtl .ctabtn:hover::before {
  left: 0
}

.lrnprgdtl .ctabtn span {
  position: relative;
  z-index: 1
}

.lrnprgdtl .ctabtn:hover {
  border-color: #222940;
  transform: translateY(-2px);
  box-shadow: 0 8px 36px 0 #f4380021
}

.lrnprgdtl .ctabtn:active {
  transform: translateY(0)
}

.lrnprgdtl .zigzag {
  width: 100%;
  height: 40px;
  margin: 80px 0
}

@media (max-width: 1024px) {
  .lrnprgdtl .tpbnrwrp {
    flex-direction: column;
    gap: 40px
  }

  .lrnprgdtl .tpcnt {
    flex: 1 1 100%;
    text-align: center
  }

  .lrnprgdtl .tpimg {
    flex: 1 1 100%
  }

  .lrnprgdtl .dscsplit {
    grid-template-columns: 1fr
  }
}

@media (max-width: 640px) {
  .lrnprgdtl .tpbnr {
    padding: 40px 24px
  }

  .lrnprgdtl .tpcnt h1 {
    font-size: 30px
  }

  .lrnprgdtl .dtlgrd {
    padding: 40px 24px
  }

  .lrnprgdtl .mtablk,
  .lrnprgdtl .prgblk {
    padding: 24px
  }

  .lrnprgdtl .dsclft,
  .lrnprgdtl .dscrgt {
    padding: 24px
  }

  .lrnprgdtl .mtarow {
    flex-direction: column
  }

  .lrnprgdtl .zigzag {
    margin: 40px 0
  }

  .lrnprgdtl .ctazone {
    margin: 40px 0 0
  }
}

.first {
  max-width: 1366px;
  margin: 0 auto
}

.first .ttlblk {
  position: relative;
  padding: 80px 24px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  background: linear-gradient(127deg, #F7F8F9 0%, #fff 48%, #F7F8F9 100%);
  overflow: visible
}

.first .ttlblk::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #F43800
}

.first .ttlcntnr {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center
}

.first .imgwrp {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 360px;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%);
  overflow: hidden
}

.first .imgwrp::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #2229406b 0%, #22294014 100%);
  z-index: 1;
  pointer-events: none
}

.first .ttlimg {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.first .txtzn {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 620px
}

.first .mnhdng {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  text-transform: uppercase
}

.first .qtslogn {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  opacity: .87
}

.first .outcm {
  padding: 80px 24px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-top: 80px
}

.first .outcmhdng {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940
}

.first .outcmgrd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px
}

.first .outcmcrd {
  background: #F7F8F9;
  padding: 24px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 3px 3px 0 #f4380012;
  transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1), box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.first .outcmcrd:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 36px 0 #f4380021
}

.first .outcmcrdttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F43800
}

.first .outcmcrddsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.first .scl {
  padding: 80px 24px;
  background: linear-gradient(127deg, #222940 0%, #F43800 52%, #222940 100%);
  margin-top: 40px;
  position: relative
}

.first .sclptrn {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(90deg, #ffffff08 0px, #ffffff08 1px, transparent 1px, transparent 8px);
  pointer-events: none
}

.first .sclcntnr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.first .sclhdng {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #fff;
  text-align: center
}

.first .sclgrd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 960px;
  margin: 0 auto
}

.first .sclitm {
  background: #f7f8f91f;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 24px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border: 1px solid #ffffff2e
}

.first .sclnmbr {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F43800;
  background: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  display: inline-block;
  align-self: flex-start
}

.first .scllbl {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #fff
}

.first .gp {
  padding: 80px 24px;
  background: #fff;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.first .gphdng {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  position: relative;
  padding-left: 40px
}

.first .gphdng::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 3px;
  background: #F43800
}

.first .gpcmprsn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto
}

.first .gpcl {
  padding: 24px;
  border-radius: 9px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative
}

.first .gpcl.crnt {
  background: #F7F8F9;
  border: 2px solid #222940
}

.first .gpcl.trgt {
  background: linear-gradient(135deg, #f4380014 0%, #f7f8f9ff 100%);
  border: 2px solid #F43800
}

.first .gpclttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  text-transform: uppercase
}

.first .gpcldsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.first .prfcrrnt {
  padding: 80px 24px;
  background: #F7F8F9;
  margin-top: 40px;
  position: relative;
  overflow: hidden
}

.first .prfshp {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 42px;
  background: #f438000f;
  transform: rotate(23deg);
  top: -120px;
  right: -80px;
  pointer-events: none
}

.first .prfcntnr {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.first .prfhdng {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940
}

.first .prfflx {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.first .prfimgwrp {
  width: 100%;
  max-width: 480px;
  height: 280px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 #22294014;
  position: relative
}

.first .prfimgwrp::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #f7f8f9ff 0%, #f7f8f900 28%, #f7f8f900 72%, #f7f8f9ff 100%);
  pointer-events: none
}

.first .prfimg {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.first .prftxt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 580px
}

.first .prftxthdng {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F43800
}

.first .prftxtprg {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.first .prftxtprg::first-letter {
  font-size: 42px;
  line-height: 1;
  float: left;
  margin-right: 8px;
  margin-top: 4px;
  color: #F43800
}

.first .lngvl {
  padding: 80px 24px;
  background: #fff;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px
}

.first .lngvlhdng {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940
}

.first .lngvlgrd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px
}

.first .lngvlcrd {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: #F7F8F9;
  border-radius: 9px;
  position: relative;
  overflow: hidden
}

.first .lngvlcrd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: #F43800;
  animation: pls 2.4s ease-in-out infinite
}

@keyframes pls {

  0%,
  100% {
    opacity: .3
  }

  50% {
    opacity: 1
  }
}

.first .lngvlcrdttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940
}

.first .lngvlcrddsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940
}

.first .lngvlimgwrp {
  width: 100%;
  height: 220px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 #22294014;
  position: relative;
  margin-top: 12px
}

.first .lngvlimgwrp::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #f7f8f9ff 0%, #f7f8f900 32%);
  pointer-events: none
}

.first .lngvlimg {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.first .scnln {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #f438004d 50%, transparent 100%);
  animation: drft 8s linear infinite;
  pointer-events: none
}

.first .scnln:nth-child(1) {
  top: 18%;
  animation-delay: 0s
}

.first .scnln:nth-child(2) {
  top: 42%;
  animation-delay: 2.8s
}

.first .scnln:nth-child(3) {
  top: 67%;
  animation-delay: 5.2s
}

@keyframes drft {
  0% {
    transform: translateY(-100px);
    opacity: 0
  }

  10% {
    opacity: .6
  }

  90% {
    opacity: .6
  }

  100% {
    transform: translateY(100vh);
    opacity: 0
  }
}

@media (min-width: 640px) {
  .first .ttlblk {
    padding: 80px 40px
  }

  .first .ttlcntnr {
    flex-direction: row;
    align-items: center
  }

  .first .imgwrp {
    max-width: 420px;
    height: 320px
  }

  .first .outcm {
    padding: 80px 40px
  }

  .first .outcmgrd {
    grid-template-columns: repeat(2, 1fr)
  }

  .first .scl {
    padding: 80px 40px
  }

  .first .sclgrd {
    grid-template-columns: repeat(2, 1fr)
  }

  .first .gp {
    padding: 80px 40px
  }

  .first .gpcmprsn {
    grid-template-columns: repeat(2, 1fr)
  }

  .first .prfcrrnt {
    padding: 80px 40px
  }

  .first .prfflx {
    flex-direction: row;
    align-items: center
  }

  .first .prfimgwrp {
    max-width: 380px
  }

  .first .lngvl {
    padding: 80px 40px
  }

  .first .lngvlgrd {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (min-width: 1024px) {
  .first .ttlblk {
    padding: 80px
  }

  .first .imgwrp {
    max-width: 520px;
    height: 380px
  }

  .first .mnhdng {
    font-size: 72px
  }

  .first .outcm {
    padding: 80px
  }

  .first .outcmgrd {
    grid-template-columns: repeat(3, 1fr)
  }

  .first .scl {
    padding: 80px
  }

  .first .sclgrd {
    grid-template-columns: repeat(3, 1fr)
  }

  .first .gp {
    padding: 80px
  }

  .first .prfcrrnt {
    padding: 80px
  }

  .first .prfimgwrp {
    max-width: 440px;
    height: 320px
  }

  .first .lngvl {
    padding: 80px
  }
}

.svc {
  background: #F7F8F9;
  overflow-x: clip
}

.svc .opnr {
  background: linear-gradient(127deg, #F43800 0%, #222940 42%, #F43800 100%);
  padding: 80px 24px;
  position: relative;
  overflow: hidden
}

.svc .opnr::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, #ffffff08 2px, #ffffff08 4px);
  animation: scndrft 8s linear infinite;
  pointer-events: none
}

@keyframes scndrft {
  0% {
    transform: translateY(0)
  }

  100% {
    transform: translateY(40px)
  }
}

.svc .opnr::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 30%, #f7f8f914 0%, transparent 50%), radial-gradient(circle at 80% 70%, #f7f8f90f 0%, transparent 50%);
  pointer-events: none
}

.svc .opnrcnt {
  max-width: 1366px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  gap: 40px;
  align-items: stretch;
  position: relative;
  z-index: 1
}

.svc .opnrlft {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px
}

.svc .opnrimg {
  width: 100%;
  height: 420px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 8px 36px 0 #22294021;
  position: relative
}

.svc .opnrimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.3)
}

.svc .opnrrgt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 80px 40px 40px
}

.svc .opnrttl {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin: 0 0 24px
}

.svc .opnrttl .pnc {
  color: #F43800;
  display: inline-block;
  animation: pncpls 2s ease-in-out infinite
}

@keyframes pncpls {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .5
  }
}

.svc .opnrtxt {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #F7F8F9;
  margin: 0;
  max-width: 680px
}

.svc .opnrdec {
  position: absolute;
  width: 120px;
  height: 120px;
  border: 2px solid #f7f8f933;
  border-radius: 42px;
  top: 40px;
  right: 80px;
  pointer-events: none
}

.svc .opnrdec::before {
  content: '';
  position: absolute;
  width: 60px;
  height: 60px;
  background: #f438004d;
  border-radius: 42px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

.svc .opnrdec2 {
  position: absolute;
  width: 80px;
  height: 80px;
  border: 2px solid #f7f8f926;
  border-radius: 4px;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) rotate(15deg);
  pointer-events: none
}

@media (max-width: 1024px) {
  .svc .opnrcnt {
    flex-direction: column;
    gap: 24px
  }

  .svc .opnrlft {
    flex: 0 0 auto;
    padding: 0
  }

  .svc .opnrimg {
    height: 320px
  }

  .svc .opnrrgt {
    padding: 24px
  }

  .svc .opnrttl {
    font-size: 42px
  }

  .svc .opnrdec {
    width: 80px;
    height: 80px;
    top: 24px;
    right: 24px
  }

  .svc .opnrdec::before {
    width: 40px;
    height: 40px
  }
}

@media (max-width: 640px) {
  .svc .opnr {
    padding: 40px 12px
  }

  .svc .opnrimg {
    height: 240px
  }

  .svc .opnrttl {
    font-size: 30px
  }

  .svc .opnrtxt {
    font-size: 15px
  }

  .svc .opnrdec {
    display: none
  }

  .svc .opnrdec2 {
    display: none
  }
}

.svc .ofr {
  background: #FFF;
  padding: 80px 24px;
  position: relative
}

.svc .ofr::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 2px;
  background: #F43800
}

.svc .ofr::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 2px;
  background: #FFF;
  box-shadow: -300px 0 0 0 #FFFFFF, 300px 0 0 0 #FFF
}

.svc .ofrcnt {
  max-width: 1366px;
  margin: 0 auto
}

.svc .ofrttlwrp {
  text-align: center;
  margin: 0 0 80px
}

.svc .ofrttl {
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 12px;
  text-transform: uppercase
}

.svc .ofrsub {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #222940;
  margin: 0;
  opacity: .7
}

.svc .ofrgrd {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 0 0 80px
}

.svc .ofritm {
  background: #F7F8F9;
  border-radius: 15px;
  padding: 40px;
  position: relative;
  overflow: hidden;
  transition: transform .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.svc .ofritm:hover {
  transform: translateY(-8px)
}

.svc .ofritm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #F43800 0%, #222940 100%)
}

.svc .ofritmicn {
  width: 64px;
  height: 64px;
  background: #F43800;
  border-radius: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 24px;
  box-shadow: 0 4px 14px 0 #f4380014
}

.svc .ofritmicn svg {
  width: 32px;
  height: 32px;
  fill: #F7F8F9
}

.svc .ofritmttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .015em;
  color: #222940;
  margin: 0 0 12px
}

.svc .ofritmtxt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #222940;
  margin: 0;
  opacity: .8
}

.svc .ofrchk {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.svc .ofrchkitm {
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: flex-start;
  position: relative
}

.svc .ofrchkitm:nth-child(odd) {
  transform: translateY(0)
}

.svc .ofrchkitm:nth-child(even) {
  transform: translateY(40px)
}

.svc .ofrchklft {
  flex: 0 0 auto
}

.svc .ofrchkimg {
  width: 240px;
  height: 180px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 #22294014;
  position: relative
}

.svc .ofrchkimg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(45deg, transparent, transparent 10px, #f4380008 10px, #f4380008 20px);
  pointer-events: none;
  z-index: 1
}

.svc .ofrchkimg img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.svc .ofrchkrgt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center
}

.svc .ofrchkttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .015em;
  color: #222940;
  margin: 0 0 8px
}

.svc .ofrchktxt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .015em;
  color: #222940;
  margin: 0;
  opacity: .8
}

.svc .ofrchktxt::first-letter {
  font-size: 30px;
  line-height: 1.1;
  color: #F43800;
  float: left;
  margin: 4px 8px 0 0;
  font-weight: 700
}

@media (max-width: 1024px) {
  .svc .ofrgrd {
    grid-template-columns: repeat(2, 1fr)
  }

  .svc .ofrchk {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .svc .ofrchkitm:nth-child(even) {
    transform: translateY(0)
  }
}

@media (max-width: 640px) {
  .svc .ofr {
    padding: 40px 12px
  }

  .svc .ofrttlwrp {
    margin: 0 0 40px
  }

  .svc .ofrttl {
    font-size: 30px
  }

  .svc .ofrsub {
    font-size: 15px
  }

  .svc .ofrgrd {
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0 0 40px
  }

  .svc .ofritm {
    padding: 24px
  }

  .svc .ofrchkitm {
    flex-direction: column;
    gap: 12px
  }

  .svc .ofrchkimg {
    width: 100%;
    height: 200px
  }
}

.svc .hlghttrgt {
  position: relative;
  transition: opacity .22s ease-out
}

.svc .hlghttrgt:hover {
  animation: hlghtfd 1.2s ease-out
}

@keyframes hlghtfd {
  0% {
    opacity: 1
  }

  20% {
    opacity: .7
  }

  100% {
    opacity: 1
  }
}

.cntct {
  max-width: 1366px;
  margin: 0 auto;
  background: #F7F8F9
}

.cntct .hro {
  position: relative;
  padding: 80px 24px;
  background: linear-gradient(127deg, #F43800 0%, #222940 48%, #F7F8F9 100%);
  overflow: hidden
}

.cntct .hro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, #ffffff05 1px, transparent 1px), linear-gradient(0deg, #ffffff05 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: .3;
  pointer-events: none
}

.cntct .hro-innr {
  position: relative;
  z-index: 1;
  max-width: 880px;
  margin: 0 auto;
  text-align: center
}

.cntct .hro-ttl {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin: 0 0 24px
}

.cntct .hro-ttl .acnt {
  background: linear-gradient(127deg, #F7F8F9 0%, #F43800 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent
}

.cntct .hro-txt {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #f7f8f9eb;
  margin: 0
}

@media (max-width: 1024px) {
  .cntct .hro {
    padding: 40px 24px
  }

  .cntct .hro-ttl {
    font-size: 42px
  }

  .cntct .hro-txt {
    font-size: 15px
  }
}

@media (max-width: 640px) {
  .cntct .hro {
    padding: 40px 12px
  }

  .cntct .hro-ttl {
    font-size: 30px
  }
}

.cntct .mn {
  padding: 80px 24px;
  background: #fff
}

.cntct .mn-innr {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 30fr 70fr;
  gap: 80px;
  align-items: start
}

.cntct .sdbr {
  position: relative
}

.cntct .sdbr::before {
  content: '';
  position: absolute;
  top: -12px;
  right: -12px;
  width: 100%;
  height: 100%;
  border: 2px solid #f438001f;
  border-radius: 15px;
  pointer-events: none
}

.cntct .sdbr::after {
  content: '';
  position: absolute;
  top: -24px;
  right: -24px;
  width: 100%;
  height: 100%;
  border: 1px solid #f438000f;
  border-radius: 15px;
  pointer-events: none
}

.cntct .sdbr-crd {
  position: relative;
  background: #F7F8F9;
  border-radius: 15px;
  padding: 40px 24px;
  box-shadow: 0 4px 14px 0 #f4380014
}

.cntct .sdbr-hdng {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px;
  text-transform: uppercase
}

.cntct .sdbr-lst {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.cntct .sdbr-itm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  opacity: 0;
  animation: sdbr-appr .18s cubic-bezier(0.4, 0, 0.6, 1) forwards
}

.cntct .sdbr-itm:nth-child(1) {
  animation-delay: .08s
}

.cntct .sdbr-itm:nth-child(2) {
  animation-delay: .16s
}

.cntct .sdbr-itm:nth-child(3) {
  animation-delay: .24s
}

.cntct .sdbr-itm:nth-child(4) {
  animation-delay: .32s
}

@keyframes sdbr-appr {
  to {
    opacity: 1
  }
}

.cntct .sdbr-lbl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940a3;
  margin: 0;
  text-transform: uppercase
}

.cntct .sdbr-vl {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  margin: 0
}

.cntct .sdbr-lnk {
  color: #F43800;
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color .15s ease-out
}

.cntct .sdbr-lnk::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #F43800;
  transition: width .18s cubic-bezier(0.4, 0, 0.6, 1), left .18s cubic-bezier(0.4, 0, 0.6, 1)
}

.cntct .sdbr-lnk:hover::after {
  width: 100%;
  left: 0
}

.cntct .sdbr-lnk:focus {
  outline: 2px solid #F43800;
  outline-offset: 4px
}

.cntct .img-wrp {
  position: relative;
  width: 100%;
  height: 280px;
  border-radius: 9px;
  overflow: hidden;
  margin: 24px 0 0;
  box-shadow: 0 8px 36px 0 #22294021
}

.cntct .img-wrp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: img-zm 12s ease-out infinite alternate
}

@keyframes img-zm {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.08)
  }
}

.cntct .frm-wrp {
  position: relative
}

.cntct .frm-ttl {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 12px
}

.cntct .frm-sttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #F43800;
  margin: 0 0 40px
}

.cntct .frm {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.cntct .frm-rw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}

.cntct .frm-grp {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntct .frm-lbl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0
}

.cntct .frm-lbl .rqrd {
  color: #F43800
}

.cntct .frm-inpt {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  background: #F7F8F9;
  border: 2px solid #2229401f;
  border-radius: 4px;
  padding: 12px;
  transition: border-color .14s ease-out, box-shadow .14s ease-out;
  box-shadow: inset 0 2px 4px 0 #2229400a
}

.cntct .frm-inpt::placeholder {
  color: #2229407a
}

.cntct .frm-inpt:focus {
  outline: none;
  border-color: #F43800;
  box-shadow: inset 0 2px 4px 0 #2229400a 0 0 0 3px #f438001f
}

.cntct .frm-inpt:hover:not(:focus) {
  border-color: #2229403d
}

.cntct .frm-rdgrp {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntct .frm-rdgrp-ttl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 4px
}

.cntct .frm-rdgrp-ttl .rqrd {
  color: #F43800
}

.cntct .frm-rdlst {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.cntct .frm-rdwrp {
  position: relative
}

.cntct .frm-rd {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.cntct .frm-rdlbl {
  display: inline-block;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  background: #F7F8F9;
  border: 2px solid #2229401f;
  border-radius: 42px;
  padding: 8px 24px;
  cursor: pointer;
  transition: background .16s ease-out, border-color .16s ease-out, color .16s ease-out;
  user-select: none
}

.cntct .frm-rdlbl:hover {
  border-color: #f4380052;
  background: #f7f8f9ff
}

.cntct .frm-rd:checked+.frm-rdlbl {
  background: #F43800;
  border-color: #F43800;
  color: #fff
}

.cntct .frm-rd:focus+.frm-rdlbl {
  outline: 2px solid #F43800;
  outline-offset: 2px
}

.cntct .frm-chkwrp {
  display: flex;
  align-items: start;
  gap: 12px;
  margin: 12px 0 0
}

.cntct .frm-chk {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #2229403d;
  border-radius: 4px;
  appearance: none;
  cursor: pointer;
  transition: background .14s ease-out, border-color .14s ease-out;
  position: relative;
  margin: 4px 0 0
}

.cntct .frm-chk:checked {
  background: #F43800;
  border-color: #F43800
}

.cntct .frm-chk:checked::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}

.cntct .frm-chk:focus {
  outline: 2px solid #F43800;
  outline-offset: 2px
}

.cntct .frm-chklbl {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940d6;
  margin: 0;
  cursor: pointer
}

.cntct .frm-chklbl a {
  color: #F43800;
  text-decoration: none;
  position: relative
}

.cntct .frm-chklbl a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 1px;
  background: #F43800;
  transition: width .16s cubic-bezier(0.4, 0, 0.6, 1), left .16s cubic-bezier(0.4, 0, 0.6, 1)
}

.cntct .frm-chklbl a:hover::after {
  width: 100%;
  left: 0
}

.cntct .frm-sbmt {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #fff;
  background: #222940;
  border: 2px solid #222940;
  border-radius: 4px;
  padding: 12px 40px;
  cursor: pointer;
  transition: background .18s cubic-bezier(0.4, 0, 0.6, 1), transform .14s ease-out;
  align-self: start;
  position: relative;
  overflow: hidden
}

.cntct .frm-sbmt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #F43800;
  transition: left .22s cubic-bezier(0.4, 0, 0.6, 1);
  z-index: 0
}

.cntct .frm-sbmt:hover::before {
  left: 0
}

.cntct .frm-sbmt:hover {
  border-color: #F43800
}

.cntct .frm-sbmt:active {
  transform: scale(0.98)
}

.cntct .frm-sbmt:focus {
  outline: 2px solid #F43800;
  outline-offset: 4px
}

.cntct .frm-sbmt span {
  position: relative;
  z-index: 1
}

.cntct .mtrc-wrp {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 40px 0 0;
  padding: 40px 0 0;
  border-top: 2px solid #22294014
}

.cntct .mtrc {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.cntct .mtrc-vl {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F43800;
  margin: 0
}

.cntct .mtrc-lbl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940b8;
  margin: 0;
  text-transform: uppercase
}

@media (max-width: 1024px) {
  .cntct .mn {
    padding: 40px 24px
  }

  .cntct .mn-innr {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .cntct .sdbr::before,
  .cntct .sdbr::after {
    display: none
  }

  .cntct .frm-ttl {
    font-size: 30px
  }

  .cntct .frm-sttl {
    font-size: 15px
  }

  .cntct .mtrc-vl {
    font-size: 42px
  }
}

@media (max-width: 640px) {
  .cntct .mn {
    padding: 40px 12px
  }

  .cntct .mn-innr {
    gap: 24px
  }

  .cntct .sdbr-crd {
    padding: 24px 12px
  }

  .cntct .frm-rw {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .cntct .frm-rdlst {
    flex-direction: column
  }

  .cntct .frm-rdlbl {
    display: block;
    text-align: center
  }

  .cntct .mtrc-wrp {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .cntct .img-wrp {
    height: 220px
  }
}

.lrnprog {
  max-width: 1366px;
  margin: 0 auto;
  background: #F7F8F9
}

.lrnprog .titlblk {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background: linear-gradient(127deg, #F43800 0%, #222940 45%, #F7F8F9 100%);
  position: relative;
  margin-bottom: 40px
}

.lrnprog .titlblk::before {
  content: '';
  position: absolute;
  top: -20px;
  right: 40px;
  width: 180px;
  height: 180px;
  border: 2px solid #f7f8f926;
  border-radius: 42px;
  transform: rotate(12deg)
}

.lrnprog .titlblk::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 60px;
  width: 240px;
  height: 120px;
  border: 2px solid #f7f8f91f;
  border-radius: 50%;
  transform: rotate(-8deg)
}

.lrnprog .titlimgwrp {
  flex-shrink: 0;
  width: 220px;
  height: 140px;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 8px 36px 0 #22294021;
  position: relative
}

.lrnprog .titlimgwrp::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #F43800;
  opacity: .18;
  z-index: 1
}

.lrnprog .titlimgwrp img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.lrnprog .titltxt {
  flex: 1;
  color: #F7F8F9;
  z-index: 1
}

.lrnprog .titllbl {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px
}

.lrnprog .titlh {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  margin-bottom: 12px
}

.lrnprog .titldsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  opacity: .9;
  max-width: 620px
}

.lrnprog .crdgrd {
  padding: 40px 24px;
  background: #fff
}

.lrnprog .crdgrdh {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin-bottom: 40px;
  text-align: center
}

.lrnprog .crdlist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px
}

.lrnprog .crd {
  background: #F7F8F9;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 3px 3px 0 #f4380012;
  transition: box-shadow .18s cubic-bezier(0.4, 0, 0.6, 1);
  display: flex;
  flex-direction: column
}

.lrnprog .crd:hover {
  box-shadow: 0 8px 36px 0 #f4380021
}

.lrnprog .crdimgwrp {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
  background: #222940
}

.lrnprog .crdimgwrp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .22s ease-out
}

.lrnprog .crd:hover .crdimgwrp img {
  transform: scale(1.04)
}

.lrnprog .crdmeta {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2
}

.lrnprog .crdtag {
  background: #F43800;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content
}

.lrnprog .crdusr {
  background: #f7f8f9f2;
  color: #222940;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 4px 12px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content
}

.lrnprog .crdbdy {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1
}

.lrnprog .crdttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin-bottom: 8px
}

.lrnprog .crddsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  opacity: .8;
  margin-bottom: 12px
}

.lrnprog .crdinfo {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px
}

.lrnprog .crdinfitm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  opacity: .7
}

.lrnprog .crdinfitm svg {
  width: 18px;
  height: 18px;
  fill: #F43800
}

.lrnprog .crdpricing {
  background: #fff;
  padding: 12px;
  border-radius: 9px;
  margin-bottom: 12px
}

.lrnprog .crdprc {
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F43800;
  font-weight: 700;
  margin-bottom: 4px
}

.lrnprog .crdprcds {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  opacity: .7;
  margin-bottom: 4px
}

.lrnprog .crdprcnt {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  opacity: .6
}

.lrnprog .crdftr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid #2229401a
}

.lrnprog .crddur {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  opacity: .7
}

.lrnprog .crdseats {
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F43800;
  font-weight: 600
}

.lrnprog .crdlink {
  display: inline-block;
  background: #F43800;
  color: #fff;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 12px 24px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .16s ease-out, transform .14s cubic-bezier(0.4, 0, 0.6, 1);
  text-align: center;
  margin-top: auto
}

.lrnprog .crdlink:hover {
  background: #222940;
  transform: translateY(-2px)
}

.lrnprog .crdlink:active {
  transform: translateY(0)
}

.lrnprog .lgndblk {
  padding: 80px 24px;
  background: #222940;
  position: relative;
  overflow: hidden
}

.lrnprog .lgndblk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0h60v60H0z' fill='none'/%3E%3Cpath d='M30 0v60M0 30h60' stroke='%23F7F8F9' stroke-width='0.5' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .4
}

.lrnprog .lgndcntr {
  max-width: 980px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.lrnprog .lgndh {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin-bottom: 40px;
  text-align: center
}

.lrnprog .lgndgrd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px
}

.lrnprog .lgnditm {
  background: #f7f8f90d;
  padding: 24px;
  border-radius: 15px;
  display: flex;
  align-items: flex-start;
  gap: 24px;
  transition: background .18s ease-out
}

.lrnprog .lgnditm:hover {
  background: #f7f8f914
}

.lrnprog .lgndicn {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: #F43800;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center
}

.lrnprog .lgndicn svg {
  width: 28px;
  height: 28px;
  fill: #fff
}

.lrnprog .lgndtxt {
  flex: 1
}

.lrnprog .lgndttl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin-bottom: 8px
}

.lrnprog .lgnddsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #F7F8F9;
  opacity: .8
}

.lrnprog .faqblk {
  padding: 80px 24px;
  background: #fff;
  position: relative
}

.lrnprog .faqblk::before {
  content: '';
  position: absolute;
  top: 40px;
  right: -80px;
  width: 320px;
  height: 320px;
  border: 3px solid #F43800;
  border-radius: 50%;
  opacity: .06;
  transform: rotate(15deg)
}

.lrnprog .faqcntr {
  max-width: 840px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.lrnprog .faqh {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  margin-bottom: 40px;
  text-align: center
}

.lrnprog .faqlist {
  display: flex;
  flex-direction: column;
  gap: 24px
}

.lrnprog .faqitm {
  background: #F7F8F9;
  padding: 24px;
  border-radius: 15px;
  border-left: 4px solid #F43800
}

.lrnprog .faqq {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin-bottom: 12px
}

.lrnprog .faqq::first-letter {
  font-size: 30px;
  color: #F43800;
  font-weight: 700;
  line-height: 1
}

.lrnprog .faqa {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  opacity: .8
}

.lrnprog .prcblk {
  padding: 40px 24px;
  background: linear-gradient(218deg, #F7F8F9 0%, #fff 55%, #F7F8F9 100%);
  border-top: 2px solid #F43800;
  border-bottom: 2px solid #F43800
}

.lrnprog .prccntr {
  max-width: 1100px;
  margin: 0 auto
}

.lrnprog .prch {
  font-size: 30px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  text-transform: uppercase;
  margin-bottom: 40px;
  text-align: center
}

.lrnprog .prcgrd {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px
}

.lrnprog .prcitm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0 4px 14px 0 #22294014;
  position: relative
}

.lrnprog .prcitm::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 3px;
  background: #F43800;
  border-radius: 0 0 4px 4px
}

.lrnprog .prcnum {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F43800;
  font-weight: 700
}

.lrnprog .prclbl {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  text-align: center
}

.lrnprog .prcdsc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .01em;
  color: #222940;
  opacity: .7;
  text-align: center
}

@media (min-width: 640px) {
  .lrnprog .titlblk {
    padding: 40px;
    gap: 40px
  }

  .lrnprog .titlimgwrp {
    width: 280px;
    height: 180px
  }

  .lrnprog .crdlist {
    grid-template-columns: repeat(2, 1fr)
  }

  .lrnprog .lgndgrd {
    grid-template-columns: repeat(2, 1fr)
  }

  .lrnprog .prcgrd {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (min-width: 1024px) {
  .lrnprog .crdgrd {
    padding: 80px 40px
  }

  .lrnprog .crdlist {
    grid-template-columns: repeat(3, 1fr)
  }

  .lrnprog .lgndblk {
    padding: 80px 40px
  }

  .lrnprog .faqblk {
    padding: 80px 40px
  }

  .lrnprog .prcblk {
    padding: 80px 40px
  }
}

.lrnprog .crdviews {
  position: absolute;
  bottom: 12px;
  right: 12px;
  background: #222940d9;
  color: #F7F8F9;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .01em;
  padding: 4px 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}

.lrnprog .crdviews svg {
  width: 16px;
  height: 16px;
  fill: #F7F8F9
}

.lrnprog a {
  position: relative;
  overflow: hidden
}

.lrnprog a::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #f7f8f91a;
  transform: scaleX(0);
  transition: transform .2s cubic-bezier(0.4, 0, 0.6, 1)
}

.lrnprog a:hover::before {
  transform: scaleX(1)
}

.lrnprog .crdlink::before {
  display: none
}

.abtstory {
  max-width: 1366px;
  margin: 0 auto
}

.abtstory .titlezone {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  position: relative;
  overflow: hidden
}

.abtstory .titlezone::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(42deg, #f4380008 0px, #f4380008 2px, transparent 2px, transparent 12px);
  pointer-events: none;
  z-index: 1
}

.abtstory .leftpanel {
  background: #222940;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2
}

.abtstory .rightpanel {
  background: #F43800;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2
}

.abtstory .maintitle {
  font-size: 72px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin: 0 0 24px;
  text-transform: uppercase
}

.abtstory .subdesc {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F8F9;
  margin: 0
}

@media (max-width: 1024px) {
  .abtstory .titlezone {
    grid-template-columns: 1fr;
    min-height: auto
  }

  .abtstory .leftpanel,
  .abtstory .rightpanel {
    padding: 40px 24px
  }

  .abtstory .maintitle {
    font-size: 42px
  }
}

@media (max-width: 640px) {

  .abtstory .leftpanel,
  .abtstory .rightpanel {
    padding: 40px 12px
  }

  .abtstory .maintitle {
    font-size: 30px
  }

  .abtstory .subdesc {
    font-size: 15px
  }
}

.abtstory .originstory {
  background: #F7F8F9;
  padding: 80px 40px;
  position: relative
}

.abtstory .originstory::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #F43800 0%, #f438004d 50%, #F7F8F9 100%);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  pointer-events: none
}

.abtstory .originwrap {
  max-width: 960px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 80px;
  align-items: start
}

.abtstory .storytxt {
  display: flex;
  flex-direction: column
}

.abtstory .origintitle {
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px
}

.abtstory .storytxt p {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 24px
}

.abtstory .storytxt p:last-child {
  margin-bottom: 0
}

.abtstory .storytxt p:first-of-type::first-letter {
  font-size: 72px;
  line-height: 1;
  float: left;
  margin: 0 12px 0 0;
  color: #F43800;
  font-weight: 700
}

.abtstory .imgcontain {
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  box-shadow: 0 8px 36px 0 #f4380021;
  height: 100%;
  min-height: 380px
}

.abtstory .imgcontain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s ease-out
}

.abtstory .imgcontain:hover img {
  transform: scale(1.08) translateX(-8px)
}

@media (max-width: 1024px) {
  .abtstory .originstory {
    padding: 40px 24px
  }

  .abtstory .originwrap {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .abtstory .origintitle {
    font-size: 30px
  }

  .abtstory .imgcontain {
    min-height: 280px
  }
}

@media (max-width: 640px) {
  .abtstory .originstory {
    padding: 40px 12px
  }

  .abtstory .origintitle {
    font-size: 22px
  }

  .abtstory .storytxt p:first-of-type::first-letter {
    font-size: 42px;
    margin: 0 8px 0 0
  }
}

.abtstory .valuesec {
  background: linear-gradient(217deg, #F43800 0%, #f4380033 45%, #F7F8F9 100%);
  padding: 80px 40px;
  position: relative
}

.abtstory .valuesec::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, #F43800 0px, #F43800 8px, transparent 8px, transparent 16px)
}

.abtstory .valuewrap {
  max-width: 1100px;
  margin: 0 auto
}

.abtstory .valuehead {
  text-align: center;
  margin: 0 0 80px
}

.abtstory .valuetitle {
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #222940;
  margin: 0;
  text-transform: uppercase
}

.abtstory .valuegrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px
}

.abtstory .valuecard {
  background: #ffffffe6;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 4px 14px 0 #22294014;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
  position: relative;
  overflow: hidden
}

.abtstory .valuecard::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #F43800, #222940);
  border-radius: 15px;
  opacity: 0;
  transition: opacity .16s ease-out;
  z-index: -1
}

.abtstory .valuecard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 36px 0 #22294021
}

.abtstory .valuecard:hover::before {
  opacity: .1
}

.abtstory .valueicon {
  width: 48px;
  height: 48px;
  margin: 0 0 24px;
  background: #F43800;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: floaticon 4s ease-in-out infinite
}

@keyframes floaticon {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-8px)
  }
}

.abtstory .valueicon svg {
  width: 24px;
  height: 24px;
  fill: #F7F8F9
}

.abtstory .valuename {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 12px;
  font-weight: 700
}

.abtstory .valuedesc {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0
}

@media (max-width: 1024px) {
  .abtstory .valuesec {
    padding: 40px 24px
  }

  .abtstory .valuehead {
    margin: 0 0 40px
  }

  .abtstory .valuetitle {
    font-size: 30px
  }

  .abtstory .valuegrid {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .abtstory .valuecard {
    padding: 24px
  }
}

@media (max-width: 640px) {
  .abtstory .valuesec {
    padding: 40px 12px
  }

  .abtstory .valuetitle {
    font-size: 22px
  }

  .abtstory .valuename {
    font-size: 15px
  }
}

.abtstory .teamsec {
  background: #222940;
  padding: 80px 40px;
  position: relative
}

.abtstory .teamwrap {
  max-width: 1200px;
  margin: 0 auto
}

.abtstory .teamheader {
  margin: 0 0 80px
}

.abtstory .teamtitle {
  font-size: 42px;
  line-height: 1.3;
  letter-spacing: .01em;
  color: #F7F8F9;
  margin: 0 0 24px
}

.abtstory .teamintro {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F7F8F9;
  margin: 0;
  max-width: 720px
}

.abtstory .teamlayout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start
}

.abtstory .teamcol:last-child {
  margin-top: 120px
}

.abtstory .membercard {
  background: #F7F8F9;
  border-radius: 9px;
  overflow: hidden;
  box-shadow: 0 4px 14px 0 #f4380014;
  margin: 0 0 40px;
  transition: transform .14s cubic-bezier(0.4, 0, 0.6, 1)
}

.abtstory .membercard:hover {
  transform: scale(1.02)
}

.abtstory .memberimg {
  position: relative;
  overflow: hidden;
  height: 280px
}

.abtstory .memberimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s ease-out
}

.abtstory .membercard:hover .memberimg img {
  transform: scale(1.08) translateY(-8px)
}

.abtstory .memberinfo {
  padding: 24px
}

.abtstory .membername {
  font-size: 22px;
  line-height: 1.3;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 8px;
  font-weight: 700
}

.abtstory .memberrole {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #F43800;
  margin: 0 0 12px
}

.abtstory .memberbio {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0
}

.abtstory .taglist {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 24px 0 0
}

.abtstory .tagitem {
  background: #F43800;
  color: #F7F8F9;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  padding: 8px 12px;
  border-radius: 42px;
  transition: background .14s ease-out
}

.abtstory .membercard:hover .tagitem {
  background: #222940
}

@media (max-width: 1024px) {
  .abtstory .teamsec {
    padding: 40px 24px
  }

  .abtstory .teamheader {
    margin: 0 0 40px
  }

  .abtstory .teamtitle {
    font-size: 30px
  }

  .abtstory .teamintro {
    font-size: 15px
  }

  .abtstory .teamlayout {
    grid-template-columns: 1fr;
    gap: 24px
  }

  .abtstory .teamcol:last-child {
    margin-top: 0
  }

  .abtstory .membercard {
    margin: 0 0 24px
  }

  .abtstory .memberimg {
    height: 220px
  }
}

@media (max-width: 640px) {
  .abtstory .teamsec {
    padding: 40px 12px
  }

  .abtstory .teamtitle {
    font-size: 22px
  }

  .abtstory .memberinfo {
    padding: 12px
  }

  .abtstory .memberimg {
    height: 180px
  }
}

.abtstory .pulsebg {
  animation: colorpulse 8s ease-in-out infinite !important
}

@keyframes colorpulse {

  0%,
  100% {
    background-color: #F7F8F9
  }

  50% {
    background-color: #f438000d
  }
}

.successPg {
  background: linear-gradient(127deg, #F7F8F9 0%, #FFF 45%, #F7F8F9 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px
}

.successPg .confirmWrap {
  max-width: 680px;
  width: 100%;
  background: #FFF;
  border-radius: 15px;
  padding: 80px 40px;
  box-shadow: 0 8px 36px 0 #f4380021;
  text-align: center
}

.successPg .iconCirc {
  width: 120px;
  height: 120px;
  margin: 0 auto 40px;
  background: linear-gradient(127deg, #F43800 0%, #222940 100%);
  border-radius: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative
}

.successPg .iconCirc::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 26px;
  border-left: 6px solid #FFF;
  border-bottom: 6px solid #FFF;
  transform: rotate(-45deg) translateY(-8px)
}

.successPg .mainHd {
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: .01em;
  color: #222940;
  margin: 0 0 24px
}

.successPg .descTxt {
  font-size: 22px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  margin: 0 0 40px;
  opacity: .85
}

.successPg .infoPnl {
  background: #F7F8F9;
  border-radius: 9px;
  padding: 24px;
  margin: 0 0 40px;
  text-align: left
}

.successPg .infoPnl .detailRow {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  margin: 0 0 12px
}

.successPg .infoPnl .detailRow:last-child {
  margin: 0
}

.successPg .infoPnl .detailLbl {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  opacity: .6;
  min-width: 140px;
  flex-shrink: 0
}

.successPg .infoPnl .detailVal {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  font-weight: 600
}

.successPg .actBtns {
  display: flex;
  flex-direction: row;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap
}

.successPg .actBtns .primBtn {
  background: #F43800;
  color: #FFF;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  padding: 16px 40px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .18s ease-out, box-shadow .15s ease-out;
  box-shadow: 0 3px 3px 0 #f4380012
}

.successPg .actBtns .primBtn:hover {
  background: #d63000;
  box-shadow: 0 4px 14px 0 #f4380014
}

.successPg .actBtns .secBtn {
  background: transparent;
  color: #222940;
  font-size: 15px;
  line-height: 1.3;
  letter-spacing: .02em;
  padding: 16px 40px;
  border: 2px solid #222940;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background .16s ease-out, color .16s ease-out
}

.successPg .actBtns .secBtn:hover {
  background: #222940;
  color: #FFF
}

.successPg .footNote {
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .02em;
  color: #222940;
  opacity: .5;
  margin: 40px 0 0
}

@media (max-width: 640px) {
  .successPg .confirmWrap {
    padding: 40px 24px
  }

  .successPg .iconCirc {
    width: 90px;
    height: 90px;
    margin: 0 auto 24px
  }

  .successPg .iconCirc::before {
    width: 38px;
    height: 20px;
    border-left: 5px solid #FFF;
    border-bottom: 5px solid #FFF;
    transform: rotate(-45deg) translateY(-6px)
  }

  .successPg .mainHd {
    font-size: 30px;
    margin: 0 0 12px
  }

  .successPg .descTxt {
    font-size: 15px;
    margin: 0 0 24px
  }

  .successPg .infoPnl {
    padding: 12px
  }

  .successPg .infoPnl .detailRow {
    flex-direction: column;
    gap: 4px;
    margin: 0 0 8px
  }

  .successPg .infoPnl .detailLbl {
    min-width: auto
  }

  .successPg .actBtns {
    flex-direction: column;
    gap: 8px
  }

  .successPg .actBtns .primBtn,
  .successPg .actBtns .secBtn {
    width: 100%;
    padding: 14px 24px
  }
}