html{
  overflow-y:scroll !important;
  overflow-x:hidden !important;
  scrollbar-gutter:stable !important;
}
body{
  min-width:1100px !important;
  overflow-x:hidden !important;
  margin:0 !important;
  background:#ffffff !important;
}

html body section.cloud-sub-hero,
html body .cloud-sub-hero{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-width:1100px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  background:
    radial-gradient(circle at 10% 42%, rgba(126,231,224,.13) 0%, rgba(126,231,224,.05) 20%, rgba(126,231,224,0) 46%),
    radial-gradient(circle at 82% 16%, rgba(123,176,255,.14) 0%, rgba(123,176,255,0) 30%),
    linear-gradient(118deg,#061327 0%, #0A234B 47%, #1450B8 100%) !important;
}
html body .cloud-sub-hero-bg,
html body .cloud-sub-visual{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}
html body .cloud-sub-hero-bg{
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) !important;
  background-size:24px 24px,24px 24px !important;
  opacity:.24 !important;
}
html body .cloud-sub-hero:before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:2 !important;
  background:radial-gradient(circle at 50% 50%, rgba(126,231,224,.12) 0%, rgba(126,231,224,.045) 36%, rgba(126,231,224,0) 74%) !important;
  filter:blur(10px) !important;
  opacity:.92 !important;
  pointer-events:none !important;
}
html body .cloud-sub-hero-inner{
  position:relative !important;
  z-index:20 !important;
  width:1000px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:52px !important;
  transform:none !important;
  box-sizing:border-box !important;
}
html body .cloud-subnav-wrap{
  width:100% !important;
  min-width:1100px !important;
  height:56px !important;
  min-height:56px !important;
  max-height:56px !important;
  margin:0 !important;
  padding:0 !important;
  background:#ffffff !important;
  border-bottom:1px solid #edf1f6 !important;
  box-shadow:0 10px 24px rgba(15,23,42,.035) !important;
  overflow:visible !important;
  position:relative !important;
  z-index:40 !important;
  display:block !important;
}
html body .cloud-subnav{
  width:1000px !important;
  height:56px !important;
  min-height:56px !important;
  max-height:56px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:20px !important;
  overflow:visible !important;
}
html body .cloud-subnav a,
html body .cloud-subnav a:hover,
html body .cloud-subnav a.active{
  transform:none !important;
}
html body .cloud-class-section{
  transform:none !important;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#ffffff;
  color:#111111;
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕",Arial,sans-serif;
  word-break:keep-all;
}
a{color:inherit;text-decoration:none;}
img{border:0;display:block;max-width:100%;}

:root{
  --cloud-mint:#7EE7E0;
  --cloud-navy:#07152F;
  --cloud-blue:#1454C8;
  --cloud-bg:#F6F8FB;
  --cloud-gold:#C9A64B;
  --cloud-gray:#667085;
  --cloud-line:#E5EAF1;
}

#banner{
  position:fixed;
  top:240px;
  right:14px;
  width:78px;
  z-index:20000;
  opacity:0.58;
  transition:all 0.2s ease;
}
#banner:hover{opacity:0.95;}
#banner img{
  width:78px;
  max-width:78px;
  height:auto;
  margin:0;
  padding:0;
}
#banner a{
  display:block;
  margin-top:5px;
}
@media (max-width:1400px){
  #banner{display:none;}
}

#banner{
  position:fixed ;
  top:345px ;
  right:0 ;
  left:auto ;
  margin:0 ;
  width:72px ;
  z-index:20000 ;
  opacity:0.18 ;
  filter:saturate(0.85) brightness(0.95) ;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease,
    filter 0.25s ease !important;
}

#banner:hover{
  opacity:0.95 ;
  transform:translateX(-5px) ;
  filter:saturate(1) brightness(1) ;
}

#banner .quick-box{
  width:72px ;
  border-radius:18px 0 0 18px ;
  overflow:hidden ;
  background:rgba(7,21,47,0.72) ;
  border:1px solid rgba(255,255,255,0.13) ;
  border-right:0 ;
  box-shadow:0 18px 34px rgba(7,21,47,0.18) ;
  backdrop-filter:blur(10px) ;
  -webkit-backdrop-filter:blur(10px) ;
}

#banner .quick-title{
  height:30px ;
  display:flex ;
  align-items:center ;
  justify-content:center ;
  color:#ffffff ;
  font-size:9px ;
  line-height:1 ;
  font-weight:900 ;
  letter-spacing:-0.1px ;
  background:rgba(255,255,255,0.08) ;
}

#banner .quick-link{
  display:flex ;
  flex-direction:column ;
  align-items:center ;
  justify-content:center ;
  gap:4px ;
  width:72px ;
  height:56px ;
  margin:0 ;
  padding:0 ;
  color:rgba(255,255,255,0.78) ;
  border-top:1px solid rgba(255,255,255,0.09) ;
  font-size:10px ;
  line-height:1.18 ;
  font-weight:800 ;
  letter-spacing:-0.45px ;
  text-align:center ;
  background:transparent ;
  border-radius:0 ;
  box-shadow:none ;
  transform:none ;
  transition:all 0.18s ease ;
}

#banner .quick-link i{
  display:flex ;
  align-items:center ;
  justify-content:center ;
  width:24px ;
  height:24px ;
  border-radius:50% ;
  background:rgba(126,231,224,0.13) ;
  color:var(--cloud-mint) ;
  font-style:normal ;
  font-size:12px ;
  font-weight:900 ;
}

#banner .quick-link:hover,
#banner .quick-link.current{
  color:#ffffff !important;
  background:rgba(126,231,224,0.18) !important;
}

#banner .quick-link:hover i,
#banner .quick-link.current i{
  background:var(--cloud-mint) !important;
  color:var(--cloud-navy) !important;
}

@media (max-width:1400px){
  #banner{
    display:none !important;
  }
}

.cloud-sub-hero{
  width:100%;
  min-width:1100px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(120deg,#07152F 0%,#0B2454 48%,#1454C8 100%);
}
.cloud-sub-hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(circle at 18% 28%, rgba(126,231,224,0.16) 0%, rgba(126,231,224,0.06) 18%, rgba(126,231,224,0) 36%),
    radial-gradient(circle at 86% 18%, rgba(255,255,255,0.13) 0%, rgba(255,255,255,0.04) 18%, rgba(255,255,255,0) 34%),
    linear-gradient(135deg,#07152F 0%,#0B2454 54%,#1454C8 100%);
}
.cloud-sub-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(7,21,47,0.38) 0%, rgba(7,21,47,0.18) 55%, rgba(7,21,47,0.02) 100%);
  z-index:2;
}
.cloud-sub-hero-inner{
  width:1000px;
  min-height:420px;
  margin:0 auto;
  position:relative;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:50px;
}
.cloud-sub-hero-card{
  width:310px;
  padding:28px 28px 26px 28px;
  border-radius:28px;
  background:rgba(255,255,255,0.96);
  border:1px solid rgba(255,255,255,0.40);
  box-shadow:0 26px 58px rgba(0,0,0,0.22);
  position:relative;
  overflow:hidden;
}
.cloud-sub-hero-card:before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue));
}
.cloud-sub-hero-card strong{
  display:block;
  color:var(--cloud-navy);
  font-size:22px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.8px;
}
.cloud-sub-hero-card ul{
  margin:18px 0 0 0;
  padding:0;
  list-style:none;
}
.cloud-sub-hero-card li{
  position:relative;
  margin:0 0 11px 0;
  padding-left:16px;
  color:#5f6b7a;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
  letter-spacing:-0.3px;
}
.cloud-sub-hero-card li:before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cloud-blue);
}

.cloud-sub-visual{
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  overflow:hidden;
}
.sub-dot-field{
  position:absolute;
  inset:0;
  opacity:0.14;
  background:
    radial-gradient(circle,rgba(255,255,255,0.18) 0 1px,transparent 1.8px) 0 0 / 46px 46px,
    radial-gradient(circle,rgba(126,231,224,0.10) 0 1px,transparent 1.8px) 18px 20px / 64px 64px;
  animation:subDotMove 18s linear infinite;
}
.sub-art-word{
  position:absolute;
  right:3%;
  bottom:38px;
  font-family:Arial,"Pretendard",sans-serif;
  font-size:98px;
  line-height:1;
  font-weight:900;
  letter-spacing:-6px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,0.13);
  opacity:0.34;
  transform:rotate(-4deg);
}
.sub-light-line{
  position:absolute;
  left:0;
  top:58%;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(126,231,224,0.24) 25%,rgba(255,255,255,0.20) 50%,rgba(126,231,224,0.14) 75%,rgba(255,255,255,0) 100%);
  opacity:0.34;
}

.cloud-section-label{
  display:inline-block;
  margin-bottom:18px;
  padding:8px 15px;
  border-radius:999px;
  background:#eef4ff;
  color:var(--cloud-blue);
  font-size:12px;
  font-weight:900;
  letter-spacing:0.8px;
}
.cloud-section-head{
  text-align:center;
  margin:0 0 46px 0;
}
.cloud-section-head h2{
  margin:0;
  color:var(--cloud-navy);
  font-size:40px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-1.7px;
}
.cloud-section-head h2 span{
  color:var(--cloud-blue);
}
.cloud-section-head p{
  width:720px;
  margin:22px auto 0 auto;
  color:#5f6b7a;
  font-size:17px;
  line-height:1.85;
  font-weight:600;
  letter-spacing:-0.45px;
}

.cloud-class-section,
.cloud-fee-section,
.cloud-guide-section,
.cloud-class-cta-section,
.cloud-footer{
  width:100%;
  min-width:1100px;
}
.cloud-inner,
.cloud-footer-inner{
  width:1000px;
  margin:0 auto;
}

.cloud-class-section{
  background:#ffffff;
  padding:58px 0 86px 0;
}
.cloud-course-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.cloud-course-card{
  min-height:270px;
  padding:30px 24px 28px 24px;
  border-radius:28px;
  background:#ffffff;
  border:1px solid var(--cloud-line);
  box-shadow:0 14px 32px rgba(15,23,42,0.07);
  position:relative;
  overflow:hidden;
  transition:all 0.24s ease;
}
.cloud-course-card:before{
  content:"";
  position:absolute;
  left:24px;
  top:0;
  width:54px;
  height:4px;
  border-radius:0 0 999px 999px;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue));
}
.cloud-course-card:hover{
  transform:translateY(-7px);
  box-shadow:0 22px 44px rgba(15,23,42,0.12);
  border-color:#d6e7ff;
}
.cloud-course-card strong{
  display:block;
  margin-bottom:20px;
  color:var(--cloud-blue);
  font-family:Georgia,"Times New Roman",serif;
  font-size:34px;
  line-height:1;
  font-weight:500;
}
.cloud-course-card h3{
  margin:0 0 12px 0;
  color:var(--cloud-navy);
  font-size:22px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.8px;
}
.cloud-course-card p{
  margin:0;
  color:#667085;
  font-size:14px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:-0.3px;
  min-height:78px;
}
.cloud-course-card span{
  display:inline-block;
  margin-top:20px;
  padding:7px 12px;
  border-radius:999px;
  background:#eef4ff;
  color:var(--cloud-blue);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.25px;
}

.cloud-guide-section{
  background:var(--cloud-bg);
  padding:84px 0 92px 0;
}
.cloud-time-list{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.cloud-time-item{
  border-radius:28px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--cloud-line);
  box-shadow:0 14px 32px rgba(15,23,42,0.07);
}
.cloud-time-item summary{
  list-style:none;
  cursor:pointer;
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:24px 30px;
  background:#ffffff;
}
.cloud-time-item summary::-webkit-details-marker{
  display:none;
}
.cloud-time-title{
  display:flex;
  align-items:center;
  gap:18px;
}
.cloud-time-icon{
  width:58px;
  height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,#1454c8,#4d8cff);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  font-size:26px;
  font-weight:900;
  box-shadow:0 10px 24px rgba(20,84,200,0.22);
}
.cloud-time-title strong{
  display:block;
  color:var(--cloud-navy);
  font-size:23px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-0.8px;
}
.cloud-time-title span{
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:-0.2px;
}
.cloud-time-arrow{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#f1f6ff;
  color:var(--cloud-blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  font-weight:900;
  transition:all 0.2s ease;
}
.cloud-time-item[open] .cloud-time-arrow{
  transform:rotate(180deg);
  background:var(--cloud-navy);
  color:#ffffff;
}
.cloud-time-body{
  padding:0 30px 30px 30px;
}
.cloud-time-note{
  margin:0 0 18px 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#667085;
  font-size:13px;
  line-height:1.6;
  font-weight:700;
}
.cloud-time-note strong{
  color:var(--cloud-navy);
  font-weight:900;
}
.cloud-time-note em{
  font-style:normal;
  color:#667085;
  font-weight:800;
}

.cloud-time-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed;
  border:1px solid #dfe6ef;
  background:#ffffff;
}

.cloud-time-table th{
  padding:15px 10px;
  background:#eef2f7;
  color:var(--cloud-navy);
  border-right:1px solid #d9e1ec;
  border-bottom:1px solid #d9e1ec;
  font-size:14px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:-0.3px;
}

.cloud-time-table th:last-child{
  border-right:0;
}

.cloud-time-table td{
  padding:17px 10px;
  color:#344054;
  font-size:14px;
  line-height:1.55;
  font-weight:700;
  text-align:center;
  letter-spacing:-0.25px;
  border-right:1px solid #e5eaf1;
  border-bottom:1px solid #e5eaf1;
  background:#ffffff;
}

.cloud-time-table td:first-child{
  color:var(--cloud-navy);
  font-weight:900;
}

.cloud-time-table td:last-child{
  border-right:0;
}

.cloud-time-table tbody tr:last-child td{
  border-bottom:0;
}

.cloud-time-table .one-day{
  color:var(--cloud-blue);
  font-weight:900;
  line-height:1.65;
  vertical-align:middle;
  background:#ffffff;
  border-bottom:0;
}

.cloud-fee-section{
  background:#ffffff;
  padding:84px 0 92px 0;
}
#class-fee{
  scroll-margin-top:120px;
}
.cloud-fee-table-wrap{
  overflow:hidden;
  border-radius:28px;
  background:#ffffff;
  border:1px solid var(--cloud-line);
  box-shadow:0 18px 42px rgba(15,23,42,0.08);
}
.cloud-fee-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.cloud-fee-table th{
  padding:16px 8px;
  background:var(--cloud-navy);
  color:#ffffff;
  font-size:13px;
  line-height:1.4;
  font-weight:900;
  letter-spacing:-0.3px;
  border-right:1px solid rgba(255,255,255,0.12);
}
.cloud-fee-table th:last-child{
  border-right:0;
}
.cloud-fee-table td{
  padding:15px 8px;
  border-bottom:1px solid #e8edf5;
  border-right:1px solid #eef2f7;
  color:#344054;
  font-size:13px;
  line-height:1.5;
  font-weight:700;
  text-align:center;
  letter-spacing:-0.25px;
}
.cloud-fee-table td:first-child{
  color:var(--cloud-navy);
  font-weight:900;
}
.cloud-fee-table td:last-child{
  border-right:0;
  color:var(--cloud-blue);
  font-weight:900;
}
.cloud-fee-table tbody tr:nth-child(even){
  background:#f8fafc;
}
.cloud-fee-table tbody tr:last-child td{
  border-bottom:0;
}
.cloud-fee-table tbody tr:hover{
  background:#eef4ff;
}
.cloud-fee-note{
  margin-top:18px;
  padding:20px 22px;
  border-radius:20px;
  background:#f7f9fc;
  border:1px solid var(--cloud-line);
  color:#667085;
  font-size:12px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:-0.25px;
}

.cloud-class-cta-section{
  background:var(--cloud-bg);
  padding:84px 0 90px 0;
}
.cloud-class-cta-inner{
  width:1000px;
  margin:0 auto;
  padding:44px 40px 46px 40px;
  border-radius:34px;
  background:linear-gradient(135deg,#07152f 0%,#0b2454 58%,#1454c8 100%);
  text-align:center;
  box-shadow:0 24px 54px rgba(7,21,47,0.16);
}
.cloud-class-cta-inner h2{
  margin:0;
  color:#ffffff;
  font-size:34px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-1.3px;
}
.cloud-class-cta-inner h2 span{
  color:var(--cloud-mint);
}
.cloud-class-cta-inner p{
  width:700px;
  margin:18px auto 0 auto;
  color:rgba(255,255,255,0.76);
  font-size:16px;
  line-height:1.8;
  font-weight:600;
  letter-spacing:-0.4px;
}
.cloud-cta-buttons{
  margin-top:30px;
  display:flex;
  justify-content:center;
  gap:12px;
}
.cloud-class-cta-inner a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 32px;
  border-radius:999px;
  background:#ffffff;
  color:var(--cloud-blue);
  font-size:15px;
  font-weight:900;
  letter-spacing:-0.4px;
  box-shadow:0 14px 26px rgba(0,0,0,0.20);
  transition:all 0.22s ease;
}
.cloud-class-cta-inner a:hover{
  transform:translateY(-3px);
  background:var(--cloud-mint);
  color:var(--cloud-navy);
}
.cloud-class-cta-inner a.sub-result-link{
  background:rgba(255,255,255,0.08);
  color:#ffffff;
  border:1px solid rgba(255,255,255,0.30);
  box-shadow:none;
}
.cloud-class-cta-inner a.sub-result-link:hover{
  background:#ffffff;
  color:var(--cloud-blue);
}

.cloud-footer{
  background:var(--cloud-navy);
  padding:34px 0 36px 0;
}
.cloud-footer-inner{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}
.cloud-footer-brand strong{
  display:block;
  color:#ffffff;
  font-size:24px;
  line-height:1.3;
  font-weight:900;
  letter-spacing:-0.8px;
}
.cloud-footer-brand p{
  margin:14px 0 0 0;
  color:rgba(255,255,255,0.68);
  font-size:14px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:-0.35px;
}
.cloud-footer-info{
  text-align:right;
}
.cloud-footer-info p{
  margin:0 0 10px 0;
  color:rgba(255,255,255,0.62);
  font-size:13px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:-0.3px;
}
.cloud-footer-info p:last-child{
  margin-bottom:0;
}

#gotop{
  display:none;
  position:fixed;
  left:24px;
  bottom:24px;
  z-index:200;
}
#gotop img{
  display:block;
  width:62px;
  height:auto;
}

@keyframes subDotMove{
  from{background-position:0 0,18px 20px;}
  to{background-position:0 -120px,18px -160px;}
}
@media (prefers-reduced-motion:reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

.cloud-sub-hero{
  height:662px ;
  min-height:662px ;
  max-height:662px ;
  background:#07152F ;
  overflow:hidden ;
}

.cloud-sub-hero-inner{
  width:1000px ;
  height:662px ;
  min-height:662px ;
  max-height:662px ;
  margin:0 auto ;
  display:flex !important;
  align-items:center ;
  justify-content:space-between !important;
  gap:48px ;
  transform:translateY(8px) !important;
}

.cloud-sub-hero-bg,
.cloud-sub-visual{
  height:662px !important;
}

.course-detail-link:hover{
  background:var(--cloud-blue);
  color:#ffffff;
}

.cloud-teacher-section{
  width:100%;
  min-width:1100px;
  background:#ffffff;
  padding:0 0 86px 0;
}

.cloud-teacher-wrap{
  width:1000px;
  margin:0 auto;
  padding:40px 40px 42px 40px;
  border-radius:32px;
  background:
    radial-gradient(circle at 88% 0%, rgba(126,231,224,0.10) 0%, rgba(126,231,224,0) 40%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--cloud-line);
  box-shadow:
    0 18px 42px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.92);
}

.cloud-teacher-head{
  text-align:center;
  margin-bottom:34px;
}

.cloud-teacher-head .cloud-section-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:31px;
  padding:0 15px;
  margin-bottom:18px;
  border-radius:999px;
  background:#EEF4FF;
  color:var(--cloud-blue);
  font-size:11.5px;
  line-height:1;
  font-weight:900;
  letter-spacing:0.65px;
}

.cloud-teacher-head h3{
  margin:0;
  color:var(--cloud-navy);
  font-size:34px;
  line-height:1.35;
  font-weight:900;
  letter-spacing:-1.2px;
}

.cloud-teacher-head h3 span{
  color:var(--cloud-blue);
}

.cloud-teacher-head p{
  width:680px;
  margin:14px auto 0 auto;
  color:#566174;
  font-size:15.5px;
  line-height:1.8;
  font-weight:650;
  letter-spacing:-0.35px;
}

.cloud-teacher-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

.cloud-teacher-card{
  position:relative;
  min-height:190px;
  padding:28px 26px 24px 26px;
  border-radius:26px;
  background:#ffffff;
  border:1px solid rgba(229,234,241,0.96);
  box-shadow:
    0 14px 32px rgba(15,23,42,0.065),
    inset 0 1px 0 rgba(255,255,255,0.92);
  overflow:hidden;
  transition:all 0.22s ease;
}

.cloud-teacher-card:hover{
  transform:translateY(-5px);
  box-shadow:
    0 22px 44px rgba(15,23,42,0.11),
    inset 0 1px 0 rgba(255,255,255,0.92);
  border-color:#d7e6fb;
}

.cloud-teacher-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue));
}

.cloud-teacher-year{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  margin-bottom:14px;
  padding:0 12px;
  border-radius:999px;
  background:#EEF4FF;
  color:var(--cloud-blue);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.2px;
}

.cloud-teacher-card h4{
  margin:0;
  color:var(--cloud-navy);
  font-size:28px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:-1px;
}

.cloud-teacher-card h4 span{
  color:var(--cloud-blue);
}

.cloud-teacher-schools{
  margin:16px 0 0 0;
  padding-top:16px;
  border-top:1px dashed #d9e2ec;
  color:#4F5B6C;
  font-size:14.5px;
  line-height:1.82;
  font-weight:700;
  letter-spacing:-0.35px;
}

.cloud-teacher-note{
  margin-top:24px;
  padding:16px 18px;
  border-radius:18px;
  background:#f7f9fc;
  border:1px solid #e7edf4;
  color:#667085;
  font-size:13px;
  line-height:1.75;
  font-weight:600;
  letter-spacing:-0.25px;
}

.course-detail-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:14px;
  height:36px;
  padding:0 14px;
  border-radius:999px;
  background:var(--cloud-navy);
  color:#ffffff ;
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.25px;
  transition:all 0.2s ease;
}

.course-detail-link:hover{
  background:var(--cloud-blue);
  color:#ffffff ;
  transform:translateY(-2px);
}

#gotop{
  display:none;
  position:fixed !important;
  left:24px !important;
  bottom:24px !important;
  z-index:20000 !important;
}

#gotop a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#07152F 0%,#1454C8 100%) !important;
  box-shadow:0 14px 28px rgba(7,21,47,0.22) !important;
  text-decoration:none !important;
}

#gotop img{
  display:none !important;
}

#gotop a:before,
#gotop a:after{
  content:none !important;
  display:none !important;
}

#gotop .top-arrow{
  display:block !important;
  color:#7EE7E0 !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

#gotop .top-text{
  display:block !important;
  color:#ffffff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0.2px !important;
}

.teacher-hidden{
  display:none !important;
}

.course-detail-link{
  border:0 ;
  cursor:pointer ;
}

.cloud-teacher-type{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  margin:0 0 10px 8px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(126,231,224,0.13);
  color:var(--cloud-navy);
  border:1px solid rgba(126,231,224,0.34);
  font-size:12px;
  line-height:1;
  font-weight:900;
  letter-spacing:-0.25px;
  vertical-align:top;
}

.cloud-teacher-type.design{
  background:#EEF4FF;
  color:var(--cloud-blue);
  border-color:#D7E6FF;
}

.cloud-teacher-type.mix{
  background:linear-gradient(90deg,rgba(126,231,224,0.16),rgba(20,84,200,0.10));
  color:var(--cloud-navy);
  border-color:rgba(20,84,200,0.18);
}

.cloud-teacher-tags{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
}

.cloud-teacher-tags .cloud-teacher-year,
.cloud-teacher-tags .cloud-teacher-type{
  margin:0 !important;
}

.cloud-teacher-type{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:28px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  background:rgba(126,231,224,0.13) ;
  color:var(--cloud-navy) ;
  border:1px solid rgba(126,231,224,0.34) ;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-0.25px !important;
  white-space:nowrap !important;
}

.cloud-teacher-type.design{
  background:#EEF4FF ;
  color:var(--cloud-blue) ;
  border-color:#D7E6FF ;
}

.cloud-teacher-type.mix{
  background:linear-gradient(90deg,rgba(126,231,224,0.16),rgba(20,84,200,0.10)) ;
  color:var(--cloud-navy) ;
  border-color:rgba(20,84,200,0.18) ;
}

.cloud-teacher-section{
  width:100% ;
  min-width:1100px ;
  background:
    linear-gradient(180deg,#F7FAFF 0%,#ffffff 100%) ;
  padding:0 0 86px 0 ;
}

.cloud-teacher-wrap{
  width:1000px ;
  margin:0 auto ;
  padding:42px 40px 44px 40px ;
  border-radius:34px ;
  background:
    radial-gradient(circle at 88% 0%, rgba(126,231,224,0.12) 0%, rgba(126,231,224,0) 42%),
    linear-gradient(180deg,#ffffff 0%,#F8FBFF 100%) ;
  border:1px solid rgba(229,234,241,0.96) ;
  box-shadow:
    0 24px 60px rgba(15,23,42,0.10),
    inset 0 1px 0 rgba(255,255,255,0.92) ;
}

.cloud-teacher-card{
  position:relative ;
  min-height:188px ;
  padding:28px 26px 24px 26px ;
  border-radius:28px ;
  background:#ffffff ;
  border:1px solid rgba(229,234,241,0.96) ;
  box-shadow:
    0 16px 36px rgba(15,23,42,0.075),
    inset 0 1px 0 rgba(255,255,255,0.92) ;
  overflow:hidden ;
  transition:all 0.22s ease ;
}

.cloud-teacher-card:hover{
  transform:translateY(-5px) ;
  box-shadow:
    0 24px 48px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.92) ;
  border-color:#D6E7FF ;
}

.cloud-teacher-card:before{
  content:"" ;
  position:absolute ;
  left:0 ;
  top:0 ;
  width:100% ;
  height:5px ;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue)) ;
}

.cloud-teacher-tags{
  display:flex ;
  align-items:center ;
  gap:8px ;
  margin-bottom:15px ;
}

.cloud-teacher-year,
.cloud-teacher-type{
  display:inline-flex ;
  align-items:center ;
  justify-content:center ;
  height:28px ;
  margin:0 ;
  padding:0 12px ;
  border-radius:999px ;
  font-size:12px ;
  line-height:1 ;
  font-weight:900 ;
  letter-spacing:-0.25px ;
  white-space:nowrap ;
}

.cloud-teacher-year{
  background:#EEF4FF ;
  color:var(--cloud-blue) ;
}

.cloud-teacher-type{
  background:rgba(126,231,224,0.13) ;
  color:var(--cloud-navy) ;
  border:1px solid rgba(126,231,224,0.34) ;
}

.cloud-teacher-type.design{
  background:#EEF4FF ;
  color:var(--cloud-blue) ;
  border-color:#D7E6FF ;
}

.cloud-teacher-type.mix{
  background:linear-gradient(90deg,rgba(126,231,224,0.16),rgba(20,84,200,0.10)) ;
  color:var(--cloud-navy) ;
  border-color:rgba(20,84,200,0.18) ;
}

.cloud-teacher-card h4{
  margin:0 ;
  color:var(--cloud-navy) ;
  font-size:28px ;
  line-height:1.25 ;
  font-weight:900 ;
  letter-spacing:-1px ;
}

.cloud-teacher-card h4 span{
  color:var(--cloud-blue) ;
}

.cloud-teacher-schools{
  margin:16px 0 0 0 ;
  padding-top:16px ;
  border-top:1px dashed #D9E2EC ;
  color:#4F5B6C ;
  font-size:14.3px ;
  line-height:1.78 ;
  font-weight:700 ;
  letter-spacing:-0.35px ;
}

.cloud-class-section{
  padding:58px 0 78px 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,0.060) 0%, rgba(20,84,200,0) 36%),
    linear-gradient(180deg,#ffffff 0%,#F7FAFF 100%) !important;
  position:relative !important;
  overflow:hidden !important;
}

.cloud-class-section:before{
  content:"CURRICULUM" !important;
  position:absolute !important;
  left:50% !important;
  top:50px ;
  transform:translateX(-50%) !important;
  color:rgba(20,84,200,0.032) ;
  font-family:Arial,"Pretendard",sans-serif !important;
  font-size:90px ;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-5px !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}

.cloud-class-section .cloud-inner{
  position:relative !important;
  z-index:2 !important;
}

.cloud-class-section .cloud-section-head{
  margin-bottom:38px ;
}

.cloud-class-section .cloud-section-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:31px !important;
  padding:0 15px !important;
  margin-bottom:18px !important;
  border-radius:999px !important;
  background:#EEF4FF !important;
  color:var(--cloud-blue) !important;
  font-size:11.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0.65px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

.cloud-class-section .cloud-section-head h2{
  font-size:39px ;
  line-height:1.27 ;
  letter-spacing:-1.8px ;
}

.cloud-class-section .cloud-section-head p{
  margin-top:17px ;
  color:#566174 !important;
  font-size:16px ;
  line-height:1.82 ;
  font-weight:650 !important;
}

.cloud-course-grid{
  gap:18px !important;
}

.cloud-course-card{
  min-height:270px ;
  padding:29px 24px 27px 24px ;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 82% 0%, rgba(126,231,224,0.13) 0%, rgba(126,231,224,0) 42%),
    #ffffff !important;
  border:1px solid rgba(229,234,241,0.96) !important;
  box-shadow:
    0 20px 48px rgba(15,23,42,0.085),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cloud-course-card:before{
  left:24px !important;
  width:64px !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue)) !important;
}

.cloud-course-card:hover{
  transform:translateY(-3px) !important;
  border-color:#D6E7FF !important;
  box-shadow:
    0 30px 64px rgba(15,23,42,0.13),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cloud-course-card strong{
  margin-bottom:18px !important;
  color:var(--cloud-blue) !important;
  font-size:36px ;
  opacity:0.95 !important;
}

.cloud-course-card h3{
  color:var(--cloud-navy) !important;
  font-size:21.5px ;
  line-height:1.35 !important;
  font-weight:900 !important;
  letter-spacing:-0.85px !important;
}

.cloud-course-card p{
  color:#5F6B7A !important;
  font-size:13.8px ;
  line-height:1.72 ;
  font-weight:650 !important;
  min-height:74px ;
}

.cloud-course-card span{
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:18px !important;
  padding:0 12px !important;
  background:#EEF4FF !important;
  color:var(--cloud-blue) !important;
  font-size:11.5px !important;
  font-weight:900 !important;
}

.course-detail-link{
  border:0 !important;
  cursor:pointer !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:13px !important;
  height:34px !important;
  padding:0 15px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#07152F 0%,#1454C8 100%) !important;
  color:#ffffff !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-0.25px !important;
  box-shadow:0 10px 20px rgba(7,21,47,0.16) !important;
  transition:all 0.2s ease ;
}

.course-detail-link:hover{
  background:var(--cloud-blue) !important;
  color:#ffffff !important;
  transform:translateY(-2px) !important;
}

.cloud-teacher-section{
  width:100% !important;
  min-width:1100px !important;
  background:
    linear-gradient(180deg,#F7FAFF 0%,#ffffff 100%) !important;
  padding:0 0 88px 0 !important;
}

.cloud-teacher-wrap{
  width:1000px !important;
  margin:0 auto !important;
  padding:44px 40px 46px 40px !important;
  border-radius:36px !important;
  background:
    radial-gradient(circle at 88% 0%, rgba(126,231,224,0.14) 0%, rgba(126,231,224,0) 42%),
    linear-gradient(180deg,#ffffff 0%,#F8FBFF 100%) !important;
  border:1px solid rgba(229,234,241,0.96) !important;
  box-shadow:
    0 28px 68px rgba(15,23,42,0.12),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  position:relative !important;
  overflow:hidden !important;
}

.cloud-teacher-wrap:before{
  content:"INSTRUCTOR" !important;
  position:absolute !important;
  right:34px !important;
  top:28px !important;
  color:rgba(20,84,200,0.040) !important;
  font-family:Arial,"Pretendard",sans-serif !important;
  font-size:54px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-3px !important;
  pointer-events:none !important;
}

.cloud-teacher-head{
  position:relative !important;
  z-index:2 !important;
}

.cloud-teacher-grid{
  position:relative !important;
  z-index:2 !important;
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:18px !important;
}

.cloud-teacher-card{
  position:relative !important;
  min-height:188px !important;
  padding:28px 26px 24px 26px !important;
  border-radius:30px !important;
  background:#ffffff !important;
  border:1px solid rgba(229,234,241,0.96) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,0.085),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  overflow:hidden !important;
  transition:all 0.22s ease !important;
}

.cloud-teacher-card:hover{
  transform:translateY(-6px) !important;
  box-shadow:
    0 28px 56px rgba(15,23,42,0.13),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
  border-color:#D6E7FF !important;
}

.cloud-teacher-card:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  width:100% !important;
  height:5px !important;
  background:linear-gradient(90deg,var(--cloud-mint),var(--cloud-blue)) !important;
}

.cloud-teacher-tags{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  margin-bottom:15px !important;
}

.cloud-teacher-year,
.cloud-teacher-type{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:28px !important;
  margin:0 !important;
  padding:0 12px !important;
  border-radius:999px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-0.25px !important;
  white-space:nowrap !important;
}

.cloud-teacher-year{
  background:#EEF4FF !important;
  color:var(--cloud-blue) !important;
}

.cloud-teacher-type{
  background:rgba(126,231,224,0.13) !important;
  color:var(--cloud-navy) !important;
  border:1px solid rgba(126,231,224,0.34) !important;
}

.cloud-teacher-type.design{
  background:#EEF4FF !important;
  color:var(--cloud-blue) !important;
  border-color:#D7E6FF !important;
}

.cloud-teacher-type.mix{
  background:linear-gradient(90deg,rgba(126,231,224,0.16),rgba(20,84,200,0.10)) !important;
  color:var(--cloud-navy) !important;
  border-color:rgba(20,84,200,0.18) !important;
}

.cloud-teacher-card h4{
  margin:0 !important;
  color:var(--cloud-navy) !important;
  font-size:28px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
  letter-spacing:-1px !important;
}

.cloud-teacher-card h4 span{
  color:var(--cloud-blue) !important;
}

.cloud-teacher-schools{
  margin:16px 0 0 0 !important;
  padding-top:16px !important;
  border-top:1px dashed #D9E2EC !important;
  color:#4F5B6C !important;
  font-size:14.3px !important;
  line-height:1.78 !important;
  font-weight:700 !important;
  letter-spacing:-0.35px !important;
}

.cloud-class-section{
  padding-top:50px ;
  padding-bottom:88px ;
}

.cloud-class-section:before{
  top:68px ;
  font-size:90px ;
  color:rgba(20,84,200,0.026) ;
}

.cloud-class-section .cloud-section-head{
  margin-bottom:48px ;
}

.cloud-course-grid{
  margin-top:0 !important;
}

.sub-class-flow{
  position:absolute !important;
  right:145px ;
  top:108px ;
  width:282px ;
  height:145px ;
  opacity:0.20 ;
  pointer-events:none !important;
  z-index:6 ;
}

.sub-class-flow .class-node{
  position:absolute !important;
  min-width:54px ;
  height:27px ;
  padding-left:19px !important;
  padding-right:11px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:rgba(255,255,255,0.50) ;
  font-size:10.3px ;
  line-height:1 ;
  font-weight:900 ;
  letter-spacing:-0.25px !important;
  white-space:nowrap !important;
  background:rgba(255,255,255,0.032) ;
  border:1px solid rgba(126,231,224,0.11) ;
  box-shadow:
    0 0 16px rgba(126,231,224,0.05),
    inset 0 1px 0 rgba(255,255,255,0.06) ;
}

.sub-class-flow .class-node:before{
  content:"" !important;
  position:absolute !important;
  left:9px ;
  top:50% !important;
  width:5px ;
  height:5px ;
  border-radius:50% !important;
  background:var(--cloud-mint) ;
  transform:translateY(-50%) !important;
  box-shadow:0 0 8px rgba(126,231,224,0.45) ;
}

.sub-class-flow .c1{left:8px ; top:66px ;}
.sub-class-flow .c2{left:74px ; top:32px ;}
.sub-class-flow .c3{left:142px ; top:66px ;}
.sub-class-flow .c4{left:208px ; top:38px ;}

.sub-class-flow .class-line{
  position:absolute !important;
  height:1px ;
  background:linear-gradient(
    90deg,
    rgba(126,231,224,0),
    rgba(126,231,224,0.20),
    rgba(255,255,255,0.055)
  ) ;
  transform-origin:left center !important;
}

.sub-class-flow .cl1{
  left:58px ;
  top:68px ;
  width:58px ;
  transform:rotate(-31deg) ;
}

.sub-class-flow .cl2{
  left:118px ;
  top:48px ;
  width:58px ;
  transform:rotate(31deg) ;
}

.sub-class-flow .cl3{
  left:188px ;
  top:68px ;
  width:56px ;
  transform:rotate(-31deg) ;
}

.cloud-sub-hero-card{
  opacity:0;
  animation:none ;
}

.sub-class-flow{
  opacity:0;
  animation:none ;
}

.cloud-sub-hero-card li{
  padding-left:34px ;
  font-size:13.5px ;
  line-height:1.62 ;
  color:#5F6B7A ;
}

.cloud-sub-hero-card li:before{
  width:22px !important;
  height:22px !important;
  left:0 !important;
  top:1px !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95) 0 2px, transparent 3px),
    linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 8px 16px rgba(20,84,200,0.18),
    0 0 0 5px rgba(126,231,224,0.08) !important;
}

.cloud-sub-hero-card li:nth-child(1):before{
  border-radius:50% !important;
}

.cloud-sub-hero-card li:nth-child(2):before{
  border-radius:7px !important;
  transform:rotate(45deg) !important;
}

.cloud-sub-hero-card li:nth-child(3):before{
  border-radius:999px !important;
}

.cloud-sub-hero-card li:nth-child(4):before{
  border-radius:7px 12px 7px 12px !important;
}

.cloud-course-card{
  min-height:286px !important;
  padding:31px 25px 28px 25px !important;
}

.cloud-course-card h3{
  font-size:22px !important;
}

.cloud-course-card p{
  font-size:14px !important;
  line-height:1.76 !important;
  min-height:82px !important;
}

.cloud-course-card strong{
  font-size:37px !important;
}

.cloud-sub-hero{
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  background:#07152F !important;
  box-shadow:0 22px 54px rgba(7,21,47,0.10) !important;
  overflow:hidden !important;
}

.cloud-sub-hero-bg{
  background:
    radial-gradient(circle at 18% 24%, rgba(126,231,224,0.18) 0%, rgba(126,231,224,0.065) 25%, rgba(126,231,224,0) 50%),
    radial-gradient(circle at 82% 18%, rgba(20,84,200,0.34) 0%, rgba(20,84,200,0.12) 30%, rgba(20,84,200,0) 60%),
    radial-gradient(circle at 73% 76%, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 24%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg,#061327 0%,#0A1F49 48%,#1454C8 100%) !important;
}

.cloud-sub-hero:before{
  background:
    linear-gradient(
      90deg,
      rgba(6,19,39,0.86) 0%,
      rgba(6,19,39,0.68) 34%,
      rgba(6,19,39,0.28) 62%,
      rgba(6,19,39,0.04) 100%
    ) !important;
}

.cloud-sub-hero-inner{
  width:1000px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  margin:0 auto !important;
  align-items:center !important;
  gap:48px !important;
  transform:translateY(16px) !important;
}

.cloud-sub-hero-card{
  width:342px !important;
  min-height:244px !important;
  padding:32px 30px 29px 30px !important;
  border-radius:34px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,0.985) 0%,rgba(246,249,253,0.965) 100%) !important;
  border:1px solid rgba(255,255,255,0.58) !important;
  box-shadow:
    0 38px 86px rgba(0,0,0,0.30),
    0 0 0 1px rgba(255,255,255,0.36),
    inset 0 1px 0 rgba(255,255,255,0.96) !important;
  transform:translateY(-2px) ;
  position:relative !important;
  z-index:20 !important;
}

.cloud-sub-hero-card:before{
  height:6px !important;
  background:linear-gradient(
    90deg,
    var(--cloud-mint) 0%,
    #B7FFF8 18%,
    var(--cloud-blue) 68%,
    rgba(255,255,255,0.7) 100%
  ) !important;
}

.cloud-sub-hero-card:after{
  content:"" !important;
  position:absolute !important;
  right:-70px !important;
  top:-70px !important;
  width:190px !important;
  height:190px !important;
  border-radius:50% !important;
  background:radial-gradient(
    circle,
    rgba(126,231,224,0.22) 0%,
    rgba(126,231,224,0.06) 48%,
    rgba(126,231,224,0) 72%
  ) !important;
  pointer-events:none !important;
}

.cloud-sub-hero-card strong{
  position:relative ;
  z-index:2 !important;
  font-size:22px !important;
  line-height:1.3 !important;
}

.cloud-sub-hero-card ul{
  position:relative !important;
  z-index:2 !important;
}

.cloud-sub-hero-card li{
  padding-left:34px !important;
  font-size:13.5px !important;
  line-height:1.62 !important;
  color:#5F6B7A !important;
}

.sub-art-word{
  right:5.5% ;
  bottom:38px ;
  font-size:106px ;
  opacity:0.18 ;
  -webkit-text-stroke:1px rgba(255,255,255,0.12) ;
}

.sub-dot-field{
  opacity:0.105 ;
}

.sub-light-line{
  top:57% ;
  opacity:0.22 ;
}

.cloud-sub-hero{
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
}

.cloud-sub-hero-inner{
  height:662px ;
  min-height:662px ;
  max-height:662px ;
  transform:translateY(0) !important;
}

.cloud-sub-hero-bg,
.cloud-sub-visual{
  height:662px !important;
}

.cloud-sub-hero-card strong{
  position:relative !important;
  padding-left:34px ;
}

.cloud-sub-hero-card strong:before{
  content:"" ;
  position:absolute ;
  left:0 ;
  top:3px ;
  width:22px ;
  height:22px ;
  border-radius:8px ;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.92) 0 2px, transparent 3px),
    linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 8px 18px rgba(20,84,200,0.18),
    0 0 0 5px rgba(126,231,224,0.08) !important;
}

.cloud-class-section{
  padding-top:62px !important;
  padding-bottom:88px !important;
}

.cloud-class-section:before{
  top:60px !important;
  font-size:86px !important;
  color:rgba(20,84,200,0.026) !important;
}

.cloud-class-section .cloud-section-head{
  margin-bottom:38px !important;
}

.cloud-class-section .cloud-section-head h2{
  font-size:38px !important;
  line-height:1.26 !important;
  letter-spacing:-1.55px !important;
}

.cloud-class-section .cloud-section-head p{
  margin-top:14px !important;
  font-size:15.5px !important;
  line-height:1.78 !important;
}

.cloud-course-card:after{
  position:absolute !important;
  right:22px !important;
  top:22px !important;
  color:rgba(20,84,200,0.075) !important;
  font-size:44px !important;
  line-height:1 !important;
  font-weight:900 !important;
  pointer-events:none !important;
}

.cloud-course-card:nth-child(1):after{content:"◎" !important;}
.cloud-course-card:nth-child(2):after{content:"↗" !important;}
.cloud-course-card:nth-child(3):after{content:"△" !important;}
.cloud-course-card:nth-child(4):after{content:"+" !important;}

.cloud-course-card strong,
.cloud-course-card h3,
.cloud-course-card p,
.cloud-course-card span,
.course-detail-link{
  position:relative !important;
  z-index:2 !important;
}

.cloud-guide-section{
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,0.040) 0%, rgba(20,84,200,0) 34%),
    linear-gradient(180deg,#F7FAFF 0%,#ffffff 100%) !important;
}

.cloud-time-item{
  border-radius:30px !important;
  border:1px solid rgba(229,234,241,0.96) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,0.075),
    inset 0 1px 0 rgba(255,255,255,0.92) !important;
}

.cloud-time-icon{
  background:linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 10px 24px rgba(20,84,200,0.22),
    0 0 0 6px rgba(126,231,224,0.08) !important;
}

.cloud-cta-buttons a{
  position:relative !important;
  padding-left:48px !important;
}

.cloud-cta-buttons a:before{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-50%) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

.cloud-cta-buttons a:first-child:before{
  content:"↘" !important;
  background:rgba(7,21,47,0.10) !important;
  color:#07152F !important;
}

.cloud-cta-buttons a.sub-result-link:before{
  content:"→" !important;
  background:rgba(255,255,255,0.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,0.20) !important;
}

.sub-class-flow{
  right:4.8% ;
  top:104px ;
  width:360px ;
  height:180px ;
  opacity:0.22 ;
  z-index:6 !important;
}

.sub-class-flow .class-node{
  min-width:64px ;
  height:30px ;
  padding:0 13px 0 24px ;
  color:rgba(255,255,255,0.54) !important;
  font-size:11px ;
  line-height:1 !important;
  font-weight:900 !important;
  background:rgba(255,255,255,0.040) !important;
  border:1px solid rgba(126,231,224,0.145) !important;
  box-shadow:
    0 0 20px rgba(126,231,224,0.060),
    inset 0 1px 0 rgba(255,255,255,0.070) !important;
}

.sub-class-flow .class-node:before{
  left:11px ;
  width:5px ;
  height:5px ;
  background:var(--cloud-mint) !important;
  box-shadow:0 0 10px rgba(126,231,224,0.58) !important;
}

.sub-class-flow .c1{
  left:0 ;
  top:78px ;
}

.sub-class-flow .c2{
  left:98px ;
  top:38px ;
}

.sub-class-flow .c3{
  left:198px ;
  top:78px ;
}

.sub-class-flow .c4{
  left:292px ;
  top:38px ;
}

.sub-class-flow .class-line{
  height:1px ;
  opacity:0.80 ;
  background:linear-gradient(
    90deg,
    rgba(126,231,224,0),
    rgba(126,231,224,0.24),
    rgba(255,255,255,0.065)
  ) !important;
}

.sub-class-flow .cl1{
  left:58px ;
  top:78px ;
  width:86px ;
  transform:rotate(-26deg) ;
}

.sub-class-flow .cl2{
  left:154px ;
  top:56px ;
  width:88px ;
  transform:rotate(26deg) ;
}

.sub-class-flow .cl3{
  left:254px ;
  top:78px ;
  width:82px ;
  transform:rotate(-25deg) ;
}

.sub-art-word{
  opacity:.19 ;
  letter-spacing:-6.5px ;
  -webkit-text-stroke:1.35px rgba(255,255,255,.18) ;
  text-shadow:0 0 18px rgba(255,255,255,.06) !important;
}
.sub-light-line{
  opacity:.20 ;
}

.sub-class-flow{
  isolation:isolate !important;
}
.sub-class-flow:before{
  content:"" !important;
  position:absolute !important;
  left:-26px ;
  top:-18px ;
  width:430px ;
  height:170px ;
  border-radius:30px !important;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) !important;
  background-size:24px 24px,24px 24px !important;
  opacity:.30 ;
  z-index:-1 !important;
  mask-image:radial-gradient(circle at 52% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.82) 68%, rgba(0,0,0,0) 100%) !important;
  -webkit-mask-image:radial-gradient(circle at 52% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.82) 68%, rgba(0,0,0,0) 100%) !important;
}
.sub-class-flow:after{
  content:"" !important;
  position:absolute !important;
  left:-8px ;
  top:10px ;
  width:390px ;
  height:126px ;
  border-radius:22px !important;
  background:radial-gradient(circle at 50% 50%, rgba(126,231,224,.10) 0%, rgba(126,231,224,.04) 48%, rgba(126,231,224,0) 100%) !important;
  z-index:-1 !important;
  opacity:.85 ;
}
.cloud-sub-hero-card{
  opacity:0 !important;
  animation:none ;
}
.sub-class-flow{
  opacity:0 ;
  animation:none ;
}
.course-detail-link{
  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    box-shadow 0.22s ease !important;
}
.course-detail-link:active{
  transform:translateY(0) scale(0.985) ;
}
.course-detail-link.is-open{
  background:linear-gradient(135deg,#7EE7E0 0%,#B9FFF7 100%) ;
  color:#07152F ;
  box-shadow:
    0 14px 28px rgba(126,231,224,0.22),
    inset 0 1px 0 rgba(255,255,255,0.80) ;
}
.course-detail-link.is-open:hover{
  background:linear-gradient(135deg,#7EE7E0 0%,#B9FFF7 100%) !important;
  color:#07152F !important;
  transform:translateY(-2px) !important;
}
.cloud-teacher-section:not(.teacher-hidden) .cloud-teacher-wrap{
  animation:teacherPanelIn 0.55s cubic-bezier(0.22,1,0.36,1) both !important;
}
@keyframes teacherPanelIn{
  0%{opacity:0; transform:translateY(18px) scale(0.992);}
  100%{opacity:1; transform:translateY(0) scale(1);}
}
.cloud-sub-hero-card{
  transform:translateY(-2px) scale(1) !important;
  animation:none !important;
}
.sub-class-flow{
  animation:none ;
}

.cloud-sub-hero-inner{height:662px !important;min-height:662px !important;max-height:662px !important;}
.cloud-sub-hero-card{transform:translateY(-2px) !important;}
.cloud-sub-hero-card strong{padding-left:34px !important;}
.cloud-sub-hero-card strong:before{content:"" !important;position:absolute !important;left:0 !important;top:3px !important;width:22px !important;height:22px !important;border-radius:8px !important;background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.92) 0 2px, transparent 3px), linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;box-shadow:0 8px 18px rgba(20,84,200,.18),0 0 0 5px rgba(126,231,224,.08) !important;}
.sub-class-flow{right:140px !important;top:100px !important;width:392px !important;height:154px !important;opacity:.22 ;}
.sub-class-flow:before{left:-26px !important;top:-18px !important;width:430px !important;height:170px !important;opacity:.30 !important;}
.sub-class-flow:after{left:-8px !important;top:10px !important;width:390px !important;height:126px !important;opacity:.85 !important;}
.sub-class-flow .class-node{min-width:62px !important;height:30px !important;padding:0 12px 0 22px !important;font-size:11px !important;}
.sub-class-flow .class-node:before{left:10px !important;width:6px !important;height:6px !important;}
.sub-class-flow .c1{left:0 !important;top:78px !important;}
.sub-class-flow .c2{left:82px !important;top:38px !important;}
.sub-class-flow .c3{left:164px !important;top:78px !important;}
.sub-class-flow .c4{left:254px !important;top:38px !important;}
.sub-class-flow .class-line{height:1px !important;opacity:.74 !important;}
.sub-class-flow .cl1{left:58px !important;top:78px !important;width:76px !important;transform:rotate(-26deg) !important;}
.sub-class-flow .cl2{left:134px !important;top:56px !important;width:78px !important;transform:rotate(26deg) !important;}
.sub-class-flow .cl3{left:220px !important;top:78px !important;width:76px !important;transform:rotate(-25deg) !important;}
.sub-dot-field{opacity:.11 ;}
.sub-art-word{right:4.2% ;bottom:30px ;font-size:112px ;opacity:.12 ;letter-spacing:-7px ;-webkit-text-stroke:1.35px rgba(255,255,255,.18) ;}
.course-detail-link{position:relative !important;padding-left:38px !important;}
.course-detail-link:before{content:"＋" !important;position:absolute !important;left:14px !important;top:50% !important;transform:translateY(-50%) !important;font-size:13px !important;line-height:1 !important;font-weight:900 !important;}
.course-detail-link.is-open{background:var(--cloud-mint) !important;color:#07152F !important;box-shadow:0 0 0 6px rgba(126,231,224,.10),0 14px 28px rgba(126,231,224,.18) !important;}
.course-detail-link.is-open:before{content:"−" !important;color:#07152F !important;}
.course-detail-link:active{transform:translateY(-1px) scale(.985) !important;}

.sub-class-flow{
  opacity:.22 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}
@media (prefers-reduced-motion:reduce){
  .sub-class-flow,
  body.hero-prep .sub-class-flow,
  body.hero-prep.hero-in .sub-class-flow{
    opacity:.22 !important;
    transform:none !important;
    transition:none !important;
  }
}

html body .cloud-sub-hero{
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  overflow:hidden ;
  background:#061327 !important;
}

html body .cloud-sub-hero-bg,
html body .cloud-sub-visual{
  height:662px !important;
}

html body .cloud-sub-hero-inner{
  width:1000px ;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  margin:0 auto ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  gap:48px ;
  transform:translateY(0) !important;
}

html body .cloud-sub-hero-bg{
  background:
    radial-gradient(circle at 18% 24%, rgba(126,231,224,.18) 0%, rgba(126,231,224,.065) 25%, rgba(126,231,224,0) 50%),
    radial-gradient(circle at 82% 18%, rgba(20,84,200,.34) 0%, rgba(20,84,200,.12) 30%, rgba(20,84,200,0) 60%),
    radial-gradient(circle at 73% 76%, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 24%, rgba(255,255,255,0) 56%),
    linear-gradient(135deg,#061327 0%,#0A1F49 48%,#1454C8 100%) !important;
}

html body .cloud-sub-hero:before{
  background:
    linear-gradient(
      90deg,
      rgba(6,19,39,.86) 0%,
      rgba(6,19,39,.68) 34%,
      rgba(6,19,39,.28) 62%,
      rgba(6,19,39,.04) 100%
    ) !important;
}

html body .cloud-sub-hero-card{
  width:342px !important;
  min-height:244px !important;
  padding:32px 30px 29px 30px !important;
  border-radius:34px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(246,249,253,.965) 100%) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 38px 86px rgba(0,0,0,.30),
    0 0 0 1px rgba(255,255,255,.36),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  transform:translateY(-2px) ;
  position:relative ;
  z-index:20 !important;
  opacity:1 !important;
  animation:none !important;
}

html body .cloud-sub-hero-card:before{
  height:6px !important;
  background:
    linear-gradient(
      90deg,
      var(--cloud-mint) 0%,
      #B7FFF8 18%,
      var(--cloud-blue) 68%,
      rgba(255,255,255,.7) 100%
    ) !important;
}

html body .cloud-sub-hero-card:after{
  content:"" !important;
  position:absolute !important;
  right:-70px !important;
  top:-70px !important;
  width:190px !important;
  height:190px !important;
  border-radius:50% !important;
  background:
    radial-gradient(
      circle,
      rgba(126,231,224,.22) 0%,
      rgba(126,231,224,.06) 48%,
      rgba(126,231,224,0) 72%
    ) !important;
  pointer-events:none !important;
}

html body .cloud-sub-hero-card strong{
  position:relative !important;
  z-index:2 !important;
  display:block !important;
  padding-left:34px !important;
  color:var(--cloud-navy) !important;
  font-size:22px !important;
  line-height:1.3 !important;
  font-weight:900 !important;
  letter-spacing:-.8px !important;
}

html body .cloud-sub-hero-card strong:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:3px !important;
  width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.92) 0 2px, transparent 3px),
    linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 8px 18px rgba(20,84,200,.18),
    0 0 0 5px rgba(126,231,224,.08) !important;
}

html body .cloud-sub-hero-card ul{
  position:relative !important;
  z-index:2 !important;
}

html body .cloud-sub-hero-card li{
  position:relative !important;
  padding-left:34px !important;
  font-size:13.5px !important;
  line-height:1.62 !important;
  color:#5F6B7A !important;
}

html body .cloud-sub-hero-card li:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:1px !important;
  width:22px !important;
  height:22px !important;
  border-radius:8px !important;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 8px 16px rgba(20,84,200,.18),
    0 0 0 5px rgba(126,231,224,.08) !important;
}

html body .cloud-sub-hero-card li:nth-child(1):before{border-radius:50% !important;}
html body .cloud-sub-hero-card li:nth-child(2):before{border-radius:7px !important;transform:rotate(45deg) !important;}
html body .cloud-sub-hero-card li:nth-child(3):before{border-radius:999px !important;}
html body .cloud-sub-hero-card li:nth-child(4):before{border-radius:7px 12px 7px 12px !important;}

html body .sub-class-flow{
  right:140px ;
  top:100px ;
  width:392px !important;
  height:154px !important;
  opacity:.22 ;
  z-index:6 !important;
  transform:none ;
  transition:none ;
  animation:none ;
}

html body .sub-class-flow:before{
  content:"" !important;
  position:absolute !important;
  left:-26px !important;
  top:-18px !important;
  width:430px !important;
  height:170px !important;
  border-radius:30px !important;
  background:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) !important;
  background-size:24px 24px,24px 24px !important;
  opacity:.30 ;
  z-index:-1 !important;
  mask-image:radial-gradient(circle at 52% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.82) 68%, rgba(0,0,0,0) 100%) !important;
  -webkit-mask-image:radial-gradient(circle at 52% 50%, rgba(0,0,0,1) 48%, rgba(0,0,0,.82) 68%, rgba(0,0,0,0) 100%) !important;
}

html body .sub-class-flow:after{
  content:"" !important;
  position:absolute !important;
  left:-8px !important;
  top:10px !important;
  width:390px !important;
  height:126px !important;
  border-radius:22px !important;
  background:radial-gradient(circle at 50% 50%, rgba(126,231,224,.10) 0%, rgba(126,231,224,.04) 48%, rgba(126,231,224,0) 100%) !important;
  z-index:-1 !important;
  opacity:.85 ;
}

html body .sub-art-word{
  right:4.2% ;
  bottom:30px ;
  font-size:112px !important;
  opacity:.16 ;
  letter-spacing:-7px ;
  -webkit-text-stroke:1.35px rgba(255,255,255,.18) ;
  text-shadow:0 0 18px rgba(255,255,255,.06) ;
}

html body .sub-dot-field{
  opacity:.11 !important;
}

html body .sub-light-line{
  top:57% ;
  opacity:.20 ;
}

html body .cloud-class-section{
  padding-top:62px ;
  padding-bottom:88px ;
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,.060) 0%, rgba(20,84,200,0) 36%),
    linear-gradient(180deg,#ffffff 0%,#F7FAFF 100%) ;
}

html body .cloud-class-section:before{
  top:60px ;
  font-size:86px ;
  color:rgba(20,84,200,.026) ;
}

html body .cloud-class-section .cloud-section-head{
  margin-bottom:38px ;
}

html body .cloud-class-section .cloud-section-head h2{
  font-size:38px ;
  line-height:1.26 ;
  letter-spacing:-1.55px ;
}

html body .cloud-class-section .cloud-section-head p{
  margin-top:14px ;
  font-size:15.5px ;
  line-height:1.78 ;
}

html body .cloud-course-card{
  min-height:286px ;
  padding:31px 25px 28px 25px ;
  border-radius:30px ;
  background:
    radial-gradient(circle at 82% 0%, rgba(126,231,224,.13) 0%, rgba(126,231,224,0) 42%),
    #ffffff ;
  border:1px solid rgba(229,234,241,.96) ;
  box-shadow:
    0 20px 48px rgba(15,23,42,.085),
    inset 0 1px 0 rgba(255,255,255,.92) ;
}

html body .cloud-course-card:hover{
  transform:translateY(-3px) ;
  border-color:#D6E7FF ;
  box-shadow:
    0 30px 64px rgba(15,23,42,.13),
    inset 0 1px 0 rgba(255,255,255,.92) ;
}

html body .cloud-course-card h3{
  font-size:22px ;
}

html body .cloud-course-card p{
  font-size:14px ;
  line-height:1.76 ;
  min-height:82px ;
}

html body .cloud-course-card strong{
  font-size:37px ;
}

html body .cloud-sub-hero-card{
  transform:translateY(-2px) ;
}

html body .sub-class-flow{
  transform:none ;
}

html body .cloud-class-cta-inner .cloud-cta-buttons{
  justify-content:center ;
  align-items:center ;
  margin:30px auto 0 ;
}

html body .course-detail-link{
  position:relative !important;
  padding-left:38px !important;
}

html body .course-detail-link:before{
  content:"＋" !important;
  position:absolute !important;
  left:14px !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  font-size:13px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

html body .course-detail-link.is-open{
  background:var(--cloud-mint) ;
  color:#07152F ;
  box-shadow:
    0 0 0 6px rgba(126,231,224,.10),
    0 14px 28px rgba(126,231,224,.18) ;
}

html body .course-detail-link.is-open:before{
  content:"−" !important;
  color:#07152F !important;
}

html body .cloud-sub-hero,
html body .cloud-sub-hero-bg,
html body .cloud-sub-visual{
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
}

html body .cloud-sub-hero-inner{
  height:662px ;
  min-height:662px ;
  max-height:662px ;
  align-items:center ;
  transform:none ;
}

html body .cloud-sub-hero-card{
  position:relative !important;
  top:-38px !important;
  transform:translateY(-2px) !important;
}

html body .sub-class-flow{
  top:116px ;
}

html body .sub-art-word{
  bottom:34px ;
}

html body .sub-light-line{
  top:57% !important;
}

html body .cloud-header{
  width:100% ;
  min-width:1100px ;
  background:rgba(255,255,255,.98) ;
  border-bottom:1px solid rgba(15,23,42,.06) ;
  box-shadow:0 10px 30px rgba(15,23,42,.04) ;
  position:relative ;
  z-index:9999 ;
  display:block ;
  height:auto ;
  overflow:visible ;
}

html body .cloud-top{
  height:26px ;
  border-bottom:1px solid #f1f3f6 ;
  background:#ffffff ;
  display:block ;
}

html body .cloud-top-inner{
  width:1000px ;
  height:26px ;
  line-height:26px ;
  margin:0 auto ;
  text-align:right ;
}

html body .cloud-top-inner a{
  display:inline-block ;
  margin-left:18px ;
  color:#A0A7B2 ;
  font-size:10px ;
  font-weight:700 ;
  letter-spacing:.8px ;
  line-height:26px ;
  height:26px ;
  padding:0 ;
  background:transparent ;
  box-shadow:none ;
  border:0 ;
  border-radius:0 ;
}

html body .cloud-top-inner a:hover{
  color:var(--cloud-blue) ;
}

html body .cloud-main-header{
  width:100% ;
  height:86px ;
  background:#ffffff ;
  border-bottom:1px solid #edf0f4 ;
  position:relative ;
  z-index:10000 ;
  display:block ;
  overflow:visible ;
}

html body .cloud-header-inner{
  width:1000px ;
  height:86px ;
  margin:0 auto ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  overflow:visible ;
}

html body .cloud-logo-imgbox{
  display:flex ;
  align-items:center ;
  flex-shrink:0 ;
}

html body .cloud-logo-imgbox a{
  display:flex ;
  align-items:center ;
  gap:14px ;
  background:transparent ;
  border:0 ;
  box-shadow:none ;
  padding:0 ;
  height:auto ;
  line-height:1 ;
}

html body .cloud-logo-imgbox img{
  width:146px ;
  max-width:146px ;
  height:auto ;
  filter:drop-shadow(0 5px 10px rgba(15,23,42,.05)) ;
}

html body .cloud-logo-imgbox span{
  display:block ;
  font-size:11px ;
  line-height:1 ;
  font-weight:800 ;
  color:#9AA2AE ;
  letter-spacing:1px ;
  white-space:nowrap ;
  transform:translateY(7px) ;
}

html body .cloud-subnav-wrap{
  width:100% !important;
  min-width:1100px !important;
  background:#ffffff !important;
  border-bottom:1px solid #edf1f6 !important;
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
  position:relative !important;
  z-index:40 !important;
}

html body .cloud-subnav{
  width:1000px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  padding:18px 0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
}

html body .cloud-subnav-title{
  display:block !important;
  flex-shrink:0 !important;
  color:var(--cloud-navy) !important;
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:-.6px !important;
  position:relative !important;
  padding-left:22px !important;
  padding-right:18px !important;
  height:auto !important;
  line-height:normal !important;
  transform:none !important;
}

html body .cloud-subnav-title:before{
  display:block !important;
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
  background:
    radial-gradient(circle at 35% 35%,#ffffff 0 2px,transparent 3px),
    linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 6px 14px rgba(20,84,200,.18),
    0 0 0 4px rgba(126,231,224,.10) !important;
}

html body .cloud-subnav-title:after{
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:1px !important;
  height:16px !important;
  background:#d8dee8 !important;
  transform:translateY(-50%) !important;
}

html body .cloud-subnav ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}

html body .cloud-subnav li{
  margin:0 !important;
  padding:0 !important;
}

html body .cloud-subnav a{
  display:block !important;
  padding:9px 16px !important;
  height:auto !important;
  line-height:normal !important;
  border-radius:999px !important;
  color:#4b5563 !important;
  background:#f5f7fb !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.35px !important;
  transition:all .2s ease !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

html body .cloud-subnav a:hover{
  background:#ecf3ff !important;
  color:var(--cloud-blue) !important;
  transform:none !important;
}

html body .cloud-subnav a.active{
  background:var(--cloud-navy) !important;
  color:#ffffff !important;
  box-shadow:0 8px 18px rgba(7,21,47,.12) !important;
}

html body .cloud-class-section{
  padding-top:68px !important;
  padding-bottom:90px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,.050) 0%, rgba(20,84,200,0) 36%),
    linear-gradient(180deg,#ffffff 0%,#F7FAFF 100%) ;
}

html body .cloud-class-section:before{
  top:62px !important;
  font-size:88px !important;
  color:rgba(20,84,200,.024) ;
}

html body .cloud-class-section .cloud-section-head{
  margin-bottom:46px !important;
}

html body .cloud-class-section .cloud-section-head h2{
  font-size:40px !important;
  line-height:1.28 !important;
  letter-spacing:-1.65px !important;
}

html body .cloud-class-section .cloud-section-head p{
  width:760px !important;
  margin-top:17px !important;
  color:#566174 !important;
  font-size:16px !important;
  line-height:1.82 !important;
  font-weight:650 !important;
}

html body .cloud-course-grid{
  gap:20px !important;
}

html body .cloud-course-card{
  min-height:292px !important;
  padding:32px 26px 29px 26px !important;
  border-radius:31px !important;
  background:
    radial-gradient(circle at 86% 0%, rgba(126,231,224,.13) 0%, rgba(126,231,224,0) 42%),
    #ffffff !important;
  border:1px solid rgba(229,234,241,.96) !important;
  box-shadow:
    0 20px 48px rgba(15,23,42,.080),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body .cloud-course-card:hover{
  transform:translateY(-6px) !important;
  border-color:#D6E7FF !important;
  box-shadow:
    0 28px 60px rgba(15,23,42,.120),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body .cloud-course-card strong{
  margin-bottom:18px !important;
  font-size:37px !important;
  color:var(--cloud-blue) !important;
  opacity:.96 !important;
}

html body .cloud-course-card h3{
  font-size:22px !important;
  line-height:1.34 !important;
  letter-spacing:-.84px !important;
}

html body .cloud-course-card p{
  color:#5F6B7A !important;
  font-size:14px !important;
  line-height:1.76 !important;
  font-weight:650 !important;
  min-height:82px !important;
}

html body .cloud-course-card span{
  height:28px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top:18px !important;
  padding:0 12px !important;
  font-size:11.5px !important;
  font-weight:900 !important;
}

html body .course-detail-link{
  margin-top:14px !important;
  height:35px !important;
  padding:0 16px 0 39px !important;
  border-radius:999px !important;
  background:linear-gradient(135deg,#07152F 0%,#1454C8 100%) !important;
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:900 !important;
  box-shadow:0 10px 20px rgba(7,21,47,.16) !important;
}

html body .course-detail-link:hover{
  transform:translateY(-2px) !important;
  background:var(--cloud-blue) !important;
  color:#ffffff !important;
}

html body .course-detail-link.is-open{
  background:linear-gradient(135deg,#7EE7E0 0%,#B9FFF7 100%) !important;
  color:#07152F !important;
  box-shadow:
    0 0 0 6px rgba(126,231,224,.10),
    0 14px 28px rgba(126,231,224,.18) !important;
}

html body .cloud-teacher-section{
  background:linear-gradient(180deg,#F7FAFF 0%,#ffffff 100%) !important;
  padding:0 0 88px 0 !important;
}

html body .cloud-teacher-wrap{
  padding:44px 40px 46px 40px !important;
  border-radius:36px !important;
  box-shadow:
    0 26px 64px rgba(15,23,42,.105),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body .cloud-teacher-head h3{
  font-size:34px !important;
  line-height:1.34 !important;
  letter-spacing:-1.2px !important;
}

html body .cloud-teacher-head p{
  width:710px !important;
  font-size:15.5px !important;
  line-height:1.82 !important;
}

html body .cloud-teacher-grid{
  gap:20px !important;
}

html body .cloud-teacher-card{
  min-height:190px !important;
  border-radius:30px !important;
  padding:28px 26px 24px 26px !important;
}

html body .cloud-teacher-card h4{
  font-size:27px !important;
  letter-spacing:-.95px !important;
}

html body .cloud-teacher-schools{
  font-size:14.3px !important;
  line-height:1.78 !important;
}

html body .cloud-guide-section{
  padding:82px 0 92px 0 !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,.038) 0%, rgba(20,84,200,0) 34%),
    linear-gradient(180deg,#F7FAFF 0%,#ffffff 100%) !important;
}

html body .cloud-time-list{
  gap:18px !important;
}

html body .cloud-time-item{
  border-radius:30px !important;
  border:1px solid rgba(229,234,241,.96) !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body .cloud-time-item summary{
  min-height:102px !important;
  padding:23px 30px !important;
}

html body .cloud-time-icon{
  background:linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:
    0 10px 24px rgba(20,84,200,.22),
    0 0 0 6px rgba(126,231,224,.08) !important;
}

html body .cloud-time-title strong{
  font-size:22px !important;
}

html body .cloud-time-table th{
  background:#EEF2F7 !important;
  font-size:13.5px !important;
}

html body .cloud-time-table td{
  font-size:13.5px !important;
  line-height:1.58 !important;
}

html body .cloud-fee-section{
  padding:82px 0 92px 0 !important;
  background:#ffffff !important;
}

html body .cloud-fee-table-wrap{
  border-radius:28px !important;
  box-shadow:
    0 18px 42px rgba(15,23,42,.075),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
}

html body .cloud-fee-table th{
  padding:16px 8px !important;
  background:#07152F !important;
  font-size:13px !important;
}

html body .cloud-fee-table td{
  padding:15px 8px !important;
  font-size:13px !important;
}

html body .cloud-fee-note{
  margin-top:18px !important;
  border-radius:20px !important;
  font-size:12.5px !important;
  line-height:1.78 !important;
}

html body .cloud-class-cta-section{
  padding:80px 0 90px 0 !important;
  background:#F6F8FB !important;
}

html body .cloud-class-cta-inner{
  padding:50px 48px 52px !important;
  border-radius:34px !important;
  background:
    radial-gradient(circle at 80% 20%, rgba(126,231,224,.13) 0%, rgba(126,231,224,0) 36%),
    linear-gradient(135deg,#07152F 0%,#0B2454 56%,#1454C8 100%) !important;
  box-shadow:0 24px 54px rgba(7,21,47,.15) !important;
}

html body .cloud-class-cta-inner h2{
  font-size:40px !important;
  line-height:1.28 !important;
  letter-spacing:-1.65px !important;
}

html body .cloud-class-cta-inner p{
  width:700px !important;
  margin-top:20px !important;
  font-size:16.3px !important;
  line-height:1.84 !important;
}

html body .cloud-class-cta-inner .cloud-cta-buttons{
  justify-content:center !important;
  align-items:center !important;
  margin:30px auto 0 !important;
  gap:16px !important;
}

html body .cloud-sub-hero{
  overflow:hidden !important;
}

html body .cloud-sub-hero:before{
  content:"" !important;
  position:absolute !important;
  right:130px !important;
  top:78px !important;
  width:340px !important;
  height:340px !important;
  border-radius:50% !important;
  background:radial-gradient(circle, rgba(126,231,224,.14) 0%, rgba(126,231,224,0) 70%) !important;
  filter:blur(4px) !important;
  pointer-events:none !important;
}

html body .sub-art-word{
  opacity:.12 ;
  letter-spacing:3px !important;
}

html body .sub-light-line{
  opacity:.42 !important;
  filter:blur(.2px) !important;
}

html body .sub-class-flow{
  opacity:.92 ;
}

html body .class-node{
  min-width:52px !important;
  height:26px !important;
  padding:0 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.10) ;
  border:1px solid rgba(126,231,224,.22) !important;
  color:#DDF7FB ;
  font-size:11px !important;
  font-weight:900 !important;
  box-shadow:
    0 10px 18px rgba(7,21,47,.20),
    inset 0 1px 0 rgba(255,255,255,.12) ;
}

html body .class-line{
  opacity:.78 ;
  background:linear-gradient(90deg, rgba(126,231,224,.10) 0%, rgba(126,231,224,.62) 50%, rgba(126,231,224,.10) 100%) ;
}

html body .cloud-sub-hero-card.class-guide-card{
  width:370px !important;
  min-height:0 !important;
  padding:26px 24px 22px 24px !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 84% 12%, rgba(179,244,239,.22) 0%, rgba(179,244,239,0) 26%),
    linear-gradient(180deg, rgba(7,21,47,.92) 0%, rgba(10,36,84,.94) 62%, rgba(20,84,200,.88) 100%) !important;
  border:1px solid rgba(126,231,224,.20) !important;
  box-shadow:
    0 24px 54px rgba(7,21,47,.26),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.03) !important;
}

html body .cloud-sub-hero-card.class-guide-card:before{
  content:"" !important;
  position:absolute !important;
  left:20px !important;
  right:20px !important;
  top:18px !important;
  height:4px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg, rgba(126,231,224,.95) 0%, rgba(135,200,255,.88) 58%, rgba(255,205,136,.70) 100%) !important;
  opacity:.96 !important;
}

html body .class-guide-card-head{
  position:relative ;
  padding-top:10px ;
  margin-bottom:18px ;
}

html body .class-guide-card-label{
  display:inline-flex !important;
  align-items:center !important;
  height:24px ;
  padding:0 10px ;
  border-radius:999px !important;
  background:rgba(255,255,255,.11) ;
  border:1px solid rgba(126,231,224,.18) !important;
  color:#BFFAF6 ;
  font-size:10.5px ;
  font-weight:900 !important;
  letter-spacing:.8px ;
}

html body .class-guide-card-head strong{
  display:block ;
  margin:12px 0 8px 0 ;
  color:#ffffff ;
  font-size:28px ;
  line-height:1.22 ;
  letter-spacing:-1px ;
}

html body .class-guide-card-head p{
  margin:0 ;
  color:rgba(232,242,255,.82) ;
  font-size:13px ;
  line-height:1.65 ;
  font-weight:700 ;
}

html body .class-guide-step-list{
  position:relative !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px ;
  margin-top:6px ;
}

html body .class-guide-step{
  display:flex !important;
  align-items:center !important;
  gap:12px ;
  padding:10px 10px 10px 8px ;
  border-radius:18px ;
  background:rgba(255,255,255,.055) ;
  border:1px solid rgba(255,255,255,.06) !important;
  backdrop-filter:blur(4px) !important;
}

html body .step-icon{
  flex:0 0 34px ;
  width:34px ;
  height:34px ;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:12px ;
  color:#07152F !important;
  font-size:11px ;
  line-height:1 !important;
  font-weight:900 !important;
  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.44) !important;
}

html body .step-icon.i1{
  background:linear-gradient(135deg,#A7FFF5 0%, #7EE7E0 100%) !important;
}
html body .step-icon.i2{
  background:linear-gradient(135deg,#D8F0FF 0%, #8FD4FF 100%) !important;
}
html body .step-icon.i3{
  background:linear-gradient(135deg,#FFF0BF 0%, #FFD97D 100%) !important;
}
html body .step-icon.i4{
  background:linear-gradient(135deg,#E6DBFF 0%, #BCA8FF 100%) !important;
}

html body .step-text{
  display:flex !important;
  flex-direction:column !important;
  gap:3px !important;
  min-width:0 !important;
}

html body .step-text b{
  color:#ffffff ;
  font-size:15px ;
  line-height:1.2 ;
  letter-spacing:-.4px ;
}

html body .step-text em{
  font-style:normal !important;
  color:rgba(235,243,255,.78) ;
  font-size:11.6px ;
  line-height:1.4 ;
  font-weight:700 ;
}

html body .class-guide-chip-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px ;
  margin-top:16px ;
  padding-top:14px ;
  border-top:1px solid rgba(255,255,255,.10) ;
}

html body .class-guide-chip-row span{
  height:26px ;
  padding:0 10px ;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.085) ;
  border:1px solid rgba(126,231,224,.14) !important;
  color:#E7F9FF ;
  font-size:11px ;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

html body .cloud-sub-hero-inner{
  align-items:center ;
}

html body .cloud-sub-hero-card.class-guide-card{
  width:340px ;
  padding:24px 24px 22px 24px ;
  border-radius:32px ;
  transform:translateY(-4px) ;
  box-shadow:
    0 34px 76px rgba(7,21,47,.30),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

html body .class-guide-card-head{
  padding-top:8px ;
  margin-bottom:14px ;
}

html body .class-guide-card-label{
  height:22px ;
  padding:0 9px ;
  font-size:9.8px ;
  letter-spacing:.75px !important;
}

html body .class-guide-card-head strong{
  margin:10px 0 7px 0 ;
  font-size:23px ;
  line-height:1.22 ;
  letter-spacing:-.85px ;
}

html body .class-guide-card-head p{
  font-size:12.2px ;
  line-height:1.55 ;
  color:rgba(232,242,255,.78) ;
}

html body .class-guide-step-list{
  gap:8px ;
}

html body .class-guide-step{
  gap:10px ;
  padding:7px 10px 7px 8px ;
  border-radius:16px ;
}

html body .step-icon{
  flex-basis:30px !important;
  width:30px ;
  height:30px ;
  border-radius:11px ;
  font-size:10px ;
}

html body .step-text b{
  font-size:13.6px ;
  line-height:1.18 ;
}

html body .step-text em{
  font-size:10.4px ;
  line-height:1.36 ;
}

html body .class-guide-chip-row{
  margin-top:13px ;
  padding-top:12px ;
  gap:7px ;
}

html body .class-guide-chip-row span{
  height:24px ;
  padding:0 9px ;
  font-size:10.5px ;
}

html body .sub-class-flow{
  opacity:.72 ;
}

html body .sub-art-word{
  opacity:.12 ;
}

html body .cloud-sub-hero-inner{
  align-items:center ;
}

html body .cloud-header{
  width:100% ;
  min-width:1100px ;
  background:rgba(255,255,255,.98) !important;
  border-bottom:1px solid rgba(15,23,42,.06) !important;
  box-shadow:0 10px 30px rgba(15,23,42,.04) !important;
  position:relative ;
  z-index:9999 ;
  display:block !important;
  height:auto !important;
  overflow:visible ;
}

html body .cloud-top{
  height:26px !important;
  border-bottom:1px solid #f1f3f6 !important;
  background:#ffffff !important;
  display:block !important;
}

html body .cloud-top-inner{
  width:1000px ;
  height:26px !important;
  line-height:26px !important;
  margin:0 auto ;
  text-align:right ;
}

html body .cloud-top-inner a{
  display:inline-block !important;
  margin-left:18px !important;
  color:#A0A7B2 !important;
  font-size:10px !important;
  font-weight:700 !important;
  letter-spacing:.8px !important;
  line-height:26px !important;
  height:26px !important;
  padding:0 !important;
  background:transparent ;
  box-shadow:none ;
  border:0 !important;
  border-radius:0 !important;
}

html body .cloud-top-inner a:hover{
  color:var(--cloud-blue) !important;
}

html body .cloud-main-header{
  width:100% ;
  height:86px !important;
  background:#ffffff !important;
  border-bottom:1px solid #edf0f4 !important;
  position:relative ;
  z-index:10000 ;
  display:block !important;
  overflow:visible !important;
}

html body .cloud-header-inner{
  width:1000px ;
  height:86px !important;
  margin:0 auto ;
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  overflow:visible ;
}

html body .cloud-logo-imgbox{
  display:flex ;
  align-items:center ;
  flex-shrink:0 ;
}

html body .cloud-logo-imgbox a{
  display:flex !important;
  align-items:center ;
  gap:14px !important;
  background:transparent ;
  border:0 !important;
  box-shadow:none ;
  padding:0 ;
  height:auto !important;
  line-height:1 !important;
}

html body .cloud-logo-imgbox img{
  width:146px !important;
  max-width:146px !important;
  height:auto ;
  filter:drop-shadow(0 5px 10px rgba(15,23,42,.05)) !important;
}

html body .cloud-logo-imgbox span{
  display:block !important;
  font-size:11px !important;
  line-height:1 ;
  font-weight:800 !important;
  color:#9AA2AE !important;
  letter-spacing:1px !important;
  white-space:nowrap ;
  transform:translateY(7px) !important;
}

html body .cloud-nav,
html body .cloud-nav ul,
html body .cloud-nav li{
  overflow:visible !important;
}

html body .cloud-nav{
  position:relative ;
  z-index:10001 !important;
  display:block !important;
}

html body .cloud-nav ul{
  margin:0 ;
  padding:0 ;
  list-style:none ;
  display:flex ;
  align-items:center ;
  gap:6px !important;
  flex-wrap:nowrap !important;
}

html body .cloud-nav li{
  position:relative ;
  margin:0 ;
  padding:0 ;
}

html body .cloud-nav > ul > li > a{
  display:block !important;
  height:40px !important;
  line-height:40px !important;
  padding:0 14px !important;
  border-radius:11px !important;
  color:#111827 !important;
  background:#ffffff !important;
  font-size:15px !important;
  font-weight:850 !important;
  letter-spacing:-.65px !important;
  transition:all .22s ease !important;
  border:0 !important;
  box-shadow:none !important;
}

html body .cloud-nav > ul > li > a:hover{
  color:var(--cloud-blue) !important;
  background:#F3F7FF !important;
}

html body .cloud-nav > ul > li > a.active{
  color:#ffffff !important;
  background:var(--cloud-navy) !important;
  border-radius:13px !important;
  box-shadow:0 10px 22px rgba(7,22,45,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}

html body .cloud-nav > ul > li > a.active:hover{
  color:#ffffff !important;
  background:var(--cloud-navy) !important;
}

html body .has-panel:after{
  content:"" ;
  position:absolute ;
  left:0 ;
  top:38px ;
  width:100% ;
  height:20px ;
  background:transparent ;
}

html body .nav-panel{
  position:absolute ;
  top:50px !important;
  left:50% ;
  width:168px ;
  padding:12px 10px !important;
  border-radius:18px ;
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(229,234,241,.95) !important;
  box-shadow:0 18px 38px rgba(7,21,47,.11),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  opacity:0 ;
  visibility:hidden ;
  transform:translateX(-50%) translateY(8px) ;
  transition:opacity .22s ease,
    visibility .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1) !important;
  z-index:10002 !important;
  display:block !important;
}

html body .nav-panel.small{
  width:138px ;
}

html body .has-panel:hover .nav-panel{
  opacity:1 ;
  visibility:visible ;
  transform:translateX(-50%) translateY(0) ;
}

html body .nav-panel:before{
  content:"" ;
  position:absolute ;
  left:50% ;
  top:-7px ;
  width:12px ;
  height:12px ;
  background:rgba(255,255,255,.96) !important;
  border-left:1px solid rgba(229,234,241,.95) !important;
  border-top:1px solid rgba(229,234,241,.95) !important;
  transform:translateX(-50%) rotate(45deg) ;
}

html body .nav-panel a{
  display:flex ;
  align-items:center ;
  justify-content:space-between ;
  height:34px ;
  line-height:34px !important;
  padding:0 11px ;
  border-radius:11px ;
  color:#4B5563 !important;
  background:transparent ;
  font-size:13px !important;
  font-weight:750 !important;
  letter-spacing:-.35px !important;
  transition:all .18s ease ;
  box-shadow:none ;
  border:0 !important;
  position:relative ;
  overflow:hidden ;
}

html body .nav-panel a:hover{
  color:var(--cloud-blue) !important;
  background:#F2F7FF !important;
  padding-left:14px ;
}

html body .nav-panel a:after{
  content:"→" ;
  opacity:0 ;
  transform:translateX(-4px) ;
  color:var(--cloud-mint) ;
  transition:all .18s ease ;
}

html body .nav-panel a:hover:after{
  opacity:1 ;
  transform:translateX(0) ;
}

html body .cloud-nav > ul > li.has-panel > a{
  position:relative !important;
  overflow:hidden !important;
}

html body .cloud-nav > ul > li.has-panel > a:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:14px !important;
  bottom:6px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(20,84,200,.88),rgba(126,231,224,.92)) !important;
  opacity:0 !important;
  transform:translateX(-50%) scaleX(.45) translateY(3px) !important;
  transform-origin:center !important;
  transition:opacity .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1) !important;
  pointer-events:none !important;
  width:34px !important;
}

html body .cloud-nav > ul > li.has-panel > a.active:before{
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(126,231,224,.82)) !important;
  width:29px !important;
  height:2px !important;
  bottom:6px !important;
  opacity:.76 !important;
  transform:translateX(-50%) scaleX(1) translateY(0) !important;
  box-shadow:0 0 7px rgba(126,231,224,.15) !important;
}

html body .cloud-nav > ul > li.has-panel:hover > a:before,
html body .cloud-nav > ul > li.has-panel > a:hover:before,
html body .cloud-nav > ul > li.has-panel > a.active:before{
  opacity:1 !important;
  transform:scaleX(1) translateY(0) !important;
}

html body .nav-panel a:before{
  content:"" ;
  position:absolute ;
  left:0 ;
  top:10px ;
  bottom:10px ;
  width:2px ;
  border-radius:999px ;
  background:linear-gradient(180deg,var(--cloud-blue),var(--cloud-mint)) ;
  opacity:0 ;
  transform:translateX(-4px) ;
  transition:opacity .18s ease,
    transform .18s cubic-bezier(.22,1,.36,1) ;
  pointer-events:none ;
}

html body .nav-panel a:hover:before{
  opacity:.88 ;
  transform:translateX(0) ;
}

html body .cloud-nav > ul > li.has-panel:hover > a:before,
html body .cloud-nav > ul > li.has-panel > a:hover:before{
  opacity:.92 !important;
  transform:translateX(-50%) scaleX(1) translateY(0) !important;
}

html body .cloud-nav > ul > li.has-panel:hover > a.active:before,
html body .cloud-nav > ul > li.has-panel > a.active:hover:before{
  opacity:.88 !important;
  width:32px !important;
  background:linear-gradient(90deg,rgba(255,255,255,.50),rgba(126,231,224,.90)) !important;
}

.cloud-sub-hero{
  background:linear-gradient(118deg,#06142E 0%,#0A2557 48%,#1454C8 100%) !important;
}

.cloud-sub-hero-bg{
  background:
    radial-gradient(circle at 15% 44%, rgba(126,231,224,0.18) 0%, rgba(126,231,224,0.09) 16%, rgba(126,231,224,0) 38%),
    radial-gradient(circle at 76% 18%, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 16%, rgba(255,255,255,0) 34%),
    radial-gradient(circle at 72% 56%, rgba(20,84,200,0.14) 0%, rgba(20,84,200,0) 32%),
    linear-gradient(135deg,#06142E 0%,#0A2557 56%,#1454C8 100%) !important;
}

.cloud-sub-hero:before{
  background:linear-gradient(90deg, rgba(7,21,47,0.34) 0%, rgba(7,21,47,0.15) 56%, rgba(7,21,47,0.03) 100%) !important;
}

.cloud-sub-hero-copy{
  position:relative;
  isolation:isolate;
}

.cloud-sub-hero-copy:before{
  content:"";
  position:absolute;
  left:-94px;
  top:18px;
  width:430px;
  height:265px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(126,231,224,0.18) 0%,
    rgba(126,231,224,0.08) 28%,
    rgba(126,231,224,0) 72%);
  filter:blur(18px);
  opacity:0.96;
  z-index:-2;
  pointer-events:none;
}

.cloud-sub-hero-copy:after{
  content:"";
  position:absolute;
  left:48px;
  top:116px;
  width:248px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(255,255,255,0.09) 0%,
    rgba(255,255,255,0.03) 34%,
    rgba(255,255,255,0) 74%);
  filter:blur(28px);
  z-index:-1;
  pointer-events:none;
}

.cloud-sub-visual:before{
  content:"";
  position:absolute;
  right:9%;
  top:86px;
  width:340px;
  height:250px;
  border-radius:28px;
  background:
    linear-gradient(rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 31px 31px,
    linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px) 0 0 / 31px 31px;
  opacity:0.12;
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.40));
  mask-image:linear-gradient(180deg, rgba(0,0,0,0.92), rgba(0,0,0,0.40));
}

.sub-dot-field{
  opacity:0.09 !important;
  background:
    radial-gradient(circle,rgba(255,255,255,0.16) 0 1px,transparent 1.85px) 0 0 / 48px 48px,
    radial-gradient(circle,rgba(126,231,224,0.09) 0 1px,transparent 1.85px) 20px 18px / 66px 66px !important;
  animation:subDotMove 26s linear infinite !important;
}

.sub-art-word{
  right:4% !important;
  bottom:24px !important;
  font-size:108px !important;
  letter-spacing:-4px !important;
  opacity:0.25 !important;
  transform:none !important;
  -webkit-text-stroke:1px rgba(255,255,255,0.10) !important;
}

.sub-light-line{
  top:56% !important;
  opacity:0.26 !important;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(126,231,224,0.22) 25%,
    rgba(255,255,255,0.18) 50%,
    rgba(126,231,224,0.12) 75%,
    rgba(255,255,255,0) 100%) !important;
}

.cloud-hero-card-motion{
  position:relative;
  isolation:isolate;
}

.cloud-hero-card-motion:before{
  content:"";
  position:absolute;
  right:-62px;
  top:-32px;
  width:300px;
  height:300px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 38%,
    rgba(126,231,224,0.34) 0%,
    rgba(126,231,224,0.12) 24%,
    rgba(126,231,224,0) 68%);
  filter:blur(24px);
  pointer-events:none;
  z-index:-2;
}

.cloud-hero-card-motion:after{
  content:"";
  position:absolute;
  left:30px;
  bottom:-52px;
  width:260px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle at center,
    rgba(76,142,255,0.30) 0%,
    rgba(76,142,255,0.11) 34%,
    rgba(76,142,255,0) 72%);
  filter:blur(20px);
  pointer-events:none;
  z-index:-1;
}

.cloud-hero-card-motion .cloud-sub-hero-card{
  position:relative;
  z-index:2;
}

.class-guide-card{
  box-shadow:
    0 30px 62px rgba(6,18,40,0.34),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(255,255,255,0.04) !important;
  border-color:rgba(126,231,224,0.18) !important;
}

.class-guide-card:after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,0.04);
  pointer-events:none;
}

.class-guide-step{
  backdrop-filter:blur(1.5px);
}

.class-guide-chip-row span{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 6px 14px rgba(0,0,0,0.18) !important;
}

html body section.cloud-sub-hero,
html body .cloud-sub-hero,
html body .cloud-sub-hero-bg,
html body .cloud-sub-visual{
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  overflow:hidden !important;
}

html body .cloud-sub-hero-inner{
  width:1000px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center ;
  justify-content:space-between !important;
  gap:48px !important;
  transform:none !important;
}

html body .cloud-sub-hero .cloud-sub-hero-copy{
  width:620px ;
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none ;
  animation:none !important;
  filter:none !important;
}

html body .cloud-sub-hero .cloud-hero-copy-motion{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
}

html body .cloud-sub-hero .cloud-sub-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:30px !important;
  padding:0 14px !important;
  margin:0 0 16px 0 !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.092),rgba(255,255,255,.048)) !important;
  border:1px solid rgba(255,255,255,.135) !important;
  color:rgba(255,255,255,.90) !important;
  font-size:11.5px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:.45px !important;
  box-shadow:0 10px 20px rgba(0,0,0,.085), inset 0 1px 0 rgba(255,255,255,.07) !important;
}

html body .cloud-sub-hero .cloud-hero-title-premium{
  margin:0 !important;
  color:#ffffff !important;
  font-size:48px !important;
  line-height:1.15 !important;
  font-weight:900 !important;
  letter-spacing:-2.62px !important;
  text-shadow:
    0 6px 18px rgba(0,0,0,.34),
    0 0 24px rgba(7,21,47,.20) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-copy p,
html body .cloud-sub-hero .cloud-hero-copy-motion p{
  width:575px !important;
  max-width:575px !important;
  margin:23px 0 0 0 !important;
  color:rgba(255,255,255,.84) !important;
  font-size:15.8px !important;
  line-height:1.86 !important;
  font-weight:700 !important;
  letter-spacing:-.36px !important;
}

html body .cloud-sub-hero .cloud-hero-title-premium span:before,
html body .cloud-sub-hero .cloud-hero-title-premium span:after,
html body .cloud-sub-hero .sub12-shine-text:before,
html body .cloud-sub-hero .sub12-shine-text:after,
html body .cloud-sub-hero .sub12-shine-base:before,
html body .cloud-sub-hero .sub12-shine-base:after,
html body .cloud-sub-hero .sub12-shine-overlay:before,
html body .cloud-sub-hero .sub12-shine-overlay:after{
  content:none !important;
  display:none !important;
  animation:none !important;
  background:none !important;
}

html body .cloud-sub-hero .sub12-shine-text{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
  line-height:inherit !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  isolation:isolate !important;
  vertical-align:baseline !important;
  padding-right:4px !important;
  z-index:5 !important;
}

html body .cloud-sub-hero .sub12-shine-base{
  position:relative !important;
  z-index:2 !important;
  display:inline-block !important;
  color:#84F3ED !important;
  -webkit-text-fill-color:#84F3ED !important;
  text-shadow:
    0 0 14px rgba(126,231,224,.22),
    0 3px 12px rgba(0,0,0,.24) !important;
}

html body .cloud-sub-hero .sub12-shine-under{
  position:absolute !important;
  left:0 !important;
  bottom:3px !important;
  width:78% !important;
  height:9px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(126,231,224,.40) 0%,rgba(126,231,224,.24) 62%,rgba(126,231,224,0) 100%) !important;
  z-index:1 !important;
  pointer-events:none !important;
}

html body .cloud-sub-hero .sub12-shine-overlay{
  position:absolute !important;
  inset:0 !important;
  z-index:3 !important;
  pointer-events:none !important;
  color:transparent !important;
  -webkit-text-fill-color:transparent !important;
  background-image:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 35%,rgba(184,255,248,.20) 43%,rgba(255,255,255,.84) 50%,rgba(184,255,248,.22) 57%,rgba(255,255,255,0) 65%,rgba(255,255,255,0) 100%) !important;
  background-size:270% 100% !important;
  background-position:var(--sub12-shine-x,-170%) 0 !important;
  -webkit-background-clip:text !important;
  background-clip:text !important;
  opacity:var(--sub12-shine-opacity,0) !important;
  filter:blur(.08px) !important;
}

html body .cloud-sub-hero .sub12-shine-sweep{
  position:absolute !important;
  top:-10% !important;
  left:var(--sub12-sweep-left,-90%) !important;
  width:22% !important;
  height:120% !important;
  z-index:4 !important;
  pointer-events:none !important;
  opacity:var(--sub12-sweep-opacity,0) !important;
  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.055) 28%,rgba(255,255,255,.54) 50%,rgba(190,255,248,.10) 67%,rgba(255,255,255,0) 100%) !important;
  transform:skewX(-18deg) !important;
  mix-blend-mode:screen !important;
  filter:blur(.42px) !important;
}

html body .cloud-sub-hero .cloud-hero-meta{
  display:flex ;
  flex-wrap:wrap ;
  gap:10px ;
  margin-top:18px ;
  margin-bottom:28px ;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
}

html body .cloud-sub-hero .cloud-hero-meta span{
  position:relative ;
  display:inline-flex ;
  align-items:center ;
  height:33px !important;
  padding:0 13px 0 32px !important;
  border-radius:999px ;
  background:linear-gradient(180deg,rgba(255,255,255,.090),rgba(255,255,255,.048)) !important;
  border:1px solid rgba(255,255,255,.130) !important;
  color:rgba(255,255,255,.91) !important;
  font-size:11.8px !important;
  line-height:1 ;
  font-weight:850 ;
  letter-spacing:-.2px ;
  box-shadow:0 10px 22px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons{
  display:flex ;
  align-items:center ;
  gap:12px ;
  margin-top:30px ;
  opacity:1 ;
  transform:none ;
  animation:none ;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a{
  position:relative ;
  display:inline-flex ;
  align-items:center ;
  justify-content:center ;
  height:52px ;
  min-width:168px ;
  padding:0 28px 0 50px ;
  border-radius:999px ;
  font-size:14.5px ;
  line-height:1 ;
  font-weight:900 ;
  letter-spacing:-.36px ;
  white-space:nowrap ;
  overflow:hidden ;
  isolation:isolate ;
  transform:translateY(0) !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, background .25s ease, border-color .25s ease !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:hover{
  transform:translateY(-3px) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:active,
html body .cloud-sub-hero .cloud-sub-hero-buttons a.is-clicked{
  transform:translateY(-1px) scale(.985) !important;
}

html body .cloud-sub-hero-card.class-guide-card{
  width:340px !important;
  padding:24px 24px 22px 24px !important;
  border-radius:32px !important;
  transform:translateY(-4px) !important;
  opacity:1 !important;
  visibility:visible !important;
  animation:none !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, border-color .28s ease !important;
}

html body .cloud-sub-hero-card.class-guide-card:hover{
  transform:translateY(-5px) !important;
}

html body .class-guide-card-head{
  position:relative !important;
  z-index:2 !important;
  padding-top:8px !important;
  margin-bottom:14px !important;
}

html body .class-guide-card-label{
  height:22px !important;
  padding:0 9px !important;
  font-size:9.8px !important;
  line-height:1 !important;
}

html body .class-guide-card-head strong{
  display:block !important;
  margin:10px 0 7px 0 !important;
  padding-left:0 !important;
  color:#ffffff !important;
  font-size:23px !important;
  line-height:1.22 !important;
  font-weight:900 !important;
  letter-spacing:-.85px !important;
  text-shadow:none !important;
}

html body .class-guide-card-head strong:before{
  content:none !important;
  display:none !important;
}

html body .class-guide-card-head p{
  margin:0 !important;
  color:rgba(232,242,255,.78) !important;
  font-size:12.2px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
}

html body .class-guide-step-list{
  gap:8px !important;
  margin-top:6px !important;
}

html body .class-guide-step{
  gap:10px !important;
  padding:7px 10px 7px 8px !important;
  border-radius:16px !important;
}

html body .step-icon{
  flex:0 0 30px !important;
  width:30px !important;
  height:30px !important;
  border-radius:11px !important;
  font-size:10px !important;
}

html body .step-text b{
  color:#ffffff !important;
  font-size:13.8px !important;
  line-height:1.18 !important;
  letter-spacing:-.4px !important;
}

html body .step-text em{
  color:rgba(235,243,255,.80) ;
  font-size:10.8px !important;
  line-height:1.36 !important;
  font-weight:700 !important;
}

html body .class-guide-chip-row{
  gap:7px ;
  margin-top:13px ;
  padding-top:12px ;
}

html body .class-guide-chip-row span{
  height:24px !important;
  padding:0 9px !important;
  font-size:10.5px !important;
}

@media (prefers-reduced-motion:reduce){
  html body .cloud-sub-hero-copy,
  html body .cloud-hero-copy-motion,
  html body .cloud-sub-hero-card{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
    animation:none !important;
    filter:none !important;
  }
}

html body .cloud-sub-hero .cloud-sub-hero-copy{
  width:620px !important;
  transform:none !important;
}

html body .cloud-sub-hero .cloud-hero-copy-motion{
  transform:translateY(-6px) !important;
}

html body .cloud-sub-hero .cloud-hero-meta{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:18px !important;
  margin-bottom:28px !important;
}

html body .cloud-sub-hero .cloud-hero-meta span{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  height:35px !important;
  padding:0 14px 0 34px !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.062)) !important;
  border:1px solid rgba(255,255,255,.155) !important;
  color:rgba(255,255,255,.92) !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:850 !important;
  letter-spacing:-.2px !important;
  box-shadow:0 12px 24px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html body .cloud-sub-hero .cloud-hero-meta span:before{
  content:"" !important;
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  width:14px !important;
  height:14px !important;
  border-radius:6px !important;
  transform:translateY(-50%) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.44),0 6px 12px rgba(0,0,0,.10) !important;
}

html body .cloud-sub-hero .cloud-hero-meta span:after{
  content:"" !important;
  position:absolute !important;
  left:16.5px !important;
  top:50% !important;
  width:5px !important;
  height:5px !important;
  margin-top:-2.5px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,.92) !important;
}

html body .cloud-sub-hero .cloud-hero-meta span:nth-child(1):before{
  background:linear-gradient(135deg,#4DB8E6,#338DCA) !important;
}
html body .cloud-sub-hero .cloud-hero-meta span:nth-child(2):before{
  background:linear-gradient(135deg,#DFA21B,#7EE7E0) !important;
}
html body .cloud-sub-hero .cloud-hero-meta span:nth-child(3):before{
  background:linear-gradient(135deg,#9178B8,#338DCA) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin-top:30px !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  animation:none !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a{
  --mx:50%;
  --my:50%;
  --tilt-x:0deg;
  --tilt-y:0deg;
  --icon-x:0px;
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:52px !important;
  min-height:52px !important;
  min-width:168px !important;
  padding:0 28px 0 50px !important;
  border-radius:999px !important;
  font-family:"Pretendard","Noto Sans KR","Malgun Gothic","맑은 고딕",Arial,sans-serif !important;
  font-size:14.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-.36px !important;
  white-space:nowrap !important;
  text-decoration:none !important;
  cursor:pointer !important;
  overflow:hidden !important;
  isolation:isolate !important;
  transform:perspective(900px) translateY(0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
  transition:transform .30s cubic-bezier(.22,1,.36,1),
    box-shadow .30s ease,
    background .30s ease,
    color .22s ease,
    border-color .24s ease,
    filter .24s ease !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:before{
  position:absolute !important;
  left:16px !important;
  top:50% !important;
  width:22px !important;
  height:22px !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  transform:translateY(-50%) !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:900 !important;
  z-index:5 !important;
  transition:transform .25s cubic-bezier(.22,1,.36,1),
    background .24s ease,
    color .24s ease,
    box-shadow .24s ease,
    border-color .24s ease !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:after{
  content:"" !important;
  position:absolute !important;
  top:-26% !important;
  left:-64% !important;
  width:38% !important;
  height:148% !important;
  border-radius:999px !important;
  background:linear-gradient(105deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.07) 28%,rgba(255,255,255,.34) 48%,rgba(126,231,224,.16) 58%,rgba(255,255,255,0) 100%) !important;
  filter:blur(.35px) !important;
  opacity:0 !important;
  transform:skewX(-18deg) !important;
  pointer-events:none !important;
  z-index:3 !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.primary{
  background:linear-gradient(180deg,#FFFFFF 0%,#F4FAFF 100%) !important;
  color:#07152F !important;
  border:1px solid rgba(255,255,255,.76) !important;
  box-shadow:0 16px 32px rgba(0,0,0,.20),
    0 0 0 1px rgba(255,255,255,.24),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.primary:before{
  content:"↘" !important;
  background:rgba(7,21,47,.10) !important;
  color:#07152F !important;
  border:0 !important;
  box-shadow:none !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.line{
  background:rgba(255,255,255,.070) !important;
  color:rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.line:before{
  content:"→" !important;
  background:rgba(255,255,255,.14) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:hover{
  transform:perspective(900px) translateY(-4px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a:hover:after{
  animation:sub12ButtonSweep 1.05s cubic-bezier(.22,1,.36,1) both !important;
  opacity:.62 !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.primary:hover{
  background:radial-gradient(circle at var(--mx) var(--my),rgba(126,231,224,.30) 0%,rgba(126,231,224,.12) 22%,rgba(126,231,224,0) 50%),
    linear-gradient(180deg,rgba(255,255,255,.99) 0%,rgba(247,255,253,.98) 48%,rgba(224,255,251,.98) 100%) !important;
  color:#07152F !important;
  border-color:rgba(126,231,224,.68) !important;
  box-shadow:0 21px 42px rgba(126,231,224,.18),
    0 12px 28px rgba(7,21,47,.12),
    0 0 0 1px rgba(126,231,224,.38),
    0 0 0 7px rgba(126,231,224,.050),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -12px 18px rgba(20,84,200,.035) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.primary:hover:before{
  background:#07152F !important;
  color:#7EE7E0 !important;
  box-shadow:0 0 0 5px rgba(126,231,224,.105),
    0 8px 18px rgba(7,21,47,.14),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.line:hover{
  background:radial-gradient(circle at var(--mx) var(--my),rgba(126,231,224,.22) 0%,rgba(126,231,224,.07) 30%,rgba(126,231,224,0) 56%),
    rgba(255,255,255,.135) !important;
  color:#ffffff !important;
  border-color:rgba(126,231,224,.46) !important;
  box-shadow:0 18px 36px rgba(7,21,47,.22),
    0 0 0 1px rgba(126,231,224,.22),
    0 0 0 6px rgba(126,231,224,.045),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -10px 18px rgba(126,231,224,.020) !important;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons a.line:hover:before{
  background:#7EE7E0 !important;
  color:#07152F !important;
  border-color:#7EE7E0 !important;
  box-shadow:0 0 0 5px rgba(126,231,224,.105),
    0 8px 18px rgba(7,21,47,.14),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

html body .cloud-sub-hero .cloud-hero-card-motion{
  transform:translateY(3px) !important;
}

html body .sub-class-flow{
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

html body .sub-art-word{
  bottom:34px ;
}

html body .cloud-sub-hero .cloud-hero-card-motion{
  transform:translateY(21px) !important;
}

html body .cloud-sub-hero-card.class-guide-card{
  transform:translateY(0) !important;
}

html body .cloud-sub-hero-card.class-guide-card:hover{
  transform:translateY(-3px) !important;
}

html body .sub-class-flow{
  top:132px ;
  opacity:.16 ;
}

html body .sub-art-word{
  bottom:32px ;
  opacity:.13 ;
}

html body .cloud-hero-card-motion:before{
  top:-10px !important;
}

html body .cloud-hero-card-motion:after{
  bottom:-42px !important;
}

html body .cloud-sub-hero .cloud-hero-card-motion{
  transform:translateY(15px) !important;
  transition:transform .26s cubic-bezier(.22,1,.36,1) !important;
}

html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translateY(11px) !important;
}

html body .cloud-sub-hero-card.class-guide-card,
html body .cloud-sub-hero-card.class-guide-card:hover{
  transform:none ;
}

html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card{
  border-color:rgba(126,231,224,.28) !important;
  box-shadow:
    0 38px 82px rgba(7,21,47,.34),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.05) ;
}

html body .cloud-hero-card-motion:before,
html body .cloud-hero-card-motion:after{
  transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .26s ease !important;
}
html body .cloud-hero-card-motion:hover:before{
  transform:translateY(-2px) !important;
  opacity:.96 !important;
}
html body .cloud-hero-card-motion:hover:after{
  transform:translateY(-2px) !important;
  opacity:.92 !important;
}

html body .sub-class-flow{
  top:126px ;
  opacity:.15 ;
}

html body .sub-art-word{
  bottom:30px ;
  opacity:.12 ;
}

html body .cloud-sub-hero .cloud-hero-card-motion{
  transform:translate(-14px, 25px) !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1) !important;
}

html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px, 21px) !important;
}

html body .cloud-sub-hero-card.class-guide-card,
html body .cloud-sub-hero-card.class-guide-card:hover{
  transform:none !important;
}

html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card{
  border-color:rgba(126,231,224,.30) !important;
  box-shadow:
    0 38px 82px rgba(7,21,47,.34),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.05) !important;
}

html body .cloud-sub-hero-card.class-guide-card{
  padding-bottom:25px !important;
}

html body .class-guide-chip-row{
  margin-top:14px ;
  padding-top:13px ;
}

html body .cloud-sub-hero .cloud-sub-hero-buttons{
  margin-top:33px !important;
}

html body .sub-class-flow{
  top:130px !important;
  right:126px !important;
  opacity:.135 ;
}

html body .sub-class-flow:before{
  opacity:.18 !important;
}

html body .sub-class-flow:after{
  opacity:.55 !important;
}

html body .sub-art-word{
  right:2.6% !important;
  bottom:22px !important;
  opacity:.095 ;
  -webkit-text-stroke:1.2px rgba(255,255,255,.15) !important;
  text-shadow:none !important;
}

html body .cloud-class-section{
  background:
    radial-gradient(circle at 50% 0%, rgba(20,84,200,.068) 0%, rgba(20,84,200,0) 38%),
    radial-gradient(circle at 50% 4%, rgba(126,231,224,.034) 0%, rgba(126,231,224,0) 26%),
    linear-gradient(180deg,#ffffff 0%,#F6FAFF 100%) !important;
}

html body .cloud-class-section:before{
  color:rgba(20,84,200,.029) !important;
}

html body .cloud-sub-hero .cloud-hero-meta{
  margin-bottom:0 !important;
}

html body .cloud-sub-hero .cloud-sub-hero-copy p{
  margin-top:22px !important;
}

@media (max-width:1280px){
  html body .cloud-sub-hero .cloud-hero-card-motion{
    transform:translate(-10px, 25px) !important;
  }

  html body .cloud-sub-hero .cloud-hero-card-motion:hover{
    transform:translate(-10px, 21px) !important;
  }
}

html body .cloud-sub-hero-card.class-guide-card{
  min-height:258px !important;
  padding-top:32px !important;
  padding-right:30px ;
  padding-bottom:37px !important;
  padding-left:30px ;
}

html body .cloud-sub-hero-card.class-guide-card ul{
  margin-top:14px !important;
}

html body .cloud-sub-hero-card.class-guide-card li{
  margin-bottom:8px !important;
}

html body .cloud-sub-hero-card.class-guide-card li:last-child{
  margin-bottom:0 !important;
}

html body .class-guide-chip-row{
  margin-top:16px ;
  padding-top:15px ;
}

html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px, 18px) !important;
}

@media (max-width:1280px){
  html body .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-ready.sub14-in .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-left-ready.sub14-left-in .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-highend-ready.sub14-highend-in .cloud-sub-hero .cloud-hero-card-motion{
    transform:translate(-10px, 22px) !important;
  }

  html body .cloud-sub-hero .cloud-hero-card-motion:hover{
    transform:translate(-10px, 18px) !important;
  }
}
html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px, 22px) !important;
}
html body .cloud-sub-hero-card.class-guide-card{
  min-height:264px !important;
  padding-top:33px !important;
  padding-right:30px !important;
  padding-bottom:40px !important;
  padding-left:30px !important;
}
html body .cloud-sub-hero-card.class-guide-card ul,
html body .class-guide-step-list{
  margin-top:15px !important;
}
html body .cloud-sub-hero-card.class-guide-card li,
html body .class-guide-step{
  margin-bottom:9px !important;
}
html body .class-guide-chip-row{
  margin-top:17px ;
  padding-top:16px ;
}
html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card{
  border-color:rgba(126,231,224,.32) !important;
  box-shadow:
    0 40px 86px rgba(7,21,47,.34),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.05) !important;
}
@media (max-width:1280px){
  html body .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-ready.sub14-in .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-left-ready.sub14-left-in .cloud-sub-hero .cloud-hero-card-motion,
  html body.sub14-highend-ready.sub14-highend-in .cloud-sub-hero .cloud-hero-card-motion{
    transform:translate(-10px, 26px) !important;
  }
  html body .cloud-sub-hero .cloud-hero-card-motion:hover{
    transform:translate(-10px, 22px) !important;
  }
}

html body .sub-class-flow,
html body .sub-location-flow,
html body .sub-location-premium-grid,
html body .sub-location-premium-flow,
html body .sub-location-orbit,
html body .sub-dot-field,
html body .sub-art-word,
html body .sub-light-line{
  animation:none !important;
}

html body .cloud-sub-hero-buttons,
html body .cloud-sub-hero-buttons a{
  animation:none !important;
}

@media (prefers-reduced-motion:reduce){
  html body .cloud-hero-copy-motion,
  html body .cloud-sub-hero-copy,
  html body .cloud-hero-card-motion,
  html body .cloud-sub-hero-card,
  html body .location-premium-card{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
    animation:none !important;
  }
}

html body .cloud-sub-hero-card.class-guide-card,
html body .cloud-hero-card-motion .cloud-sub-hero-card.class-guide-card{
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    box-shadow .28s cubic-bezier(.22,1,.36,1),
    border-color .28s cubic-bezier(.22,1,.36,1),
    filter .28s cubic-bezier(.22,1,.36,1) !important;
  will-change:transform, box-shadow !important;
  transform:translateY(6px) !important;
}
html body .cloud-sub-hero-card.class-guide-card:hover,
html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card{
  transform:translateY(3px) ;
  border-color:rgba(126,231,224,.24) !important;
  box-shadow:
    0 39px 82px rgba(7,21,47,.31),
    0 0 46px rgba(126,231,224,.085),
    0 0 0 1px rgba(255,255,255,.06),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
  filter:none !important;
}
html body .cloud-sub-hero-card.class-guide-card:before,
html body .cloud-sub-hero-card.class-guide-card:after{
  transition:opacity .28s cubic-bezier(.22,1,.36,1), box-shadow .28s cubic-bezier(.22,1,.36,1) !important;
}
html body .cloud-sub-hero-card.class-guide-card:hover:before,
html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card:before{
  opacity:.98 !important;
}
html body .cloud-sub-hero-card.class-guide-card:hover:after,
html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card:after{
  opacity:.92 !important;
}

html body .cloud-header a{letter-spacing:inherit !important}
html body .cloud-nav,html body .cloud-nav ul,html body .cloud-nav li{overflow:visible !important}
html body .cloud-nav li{position:relative !important;margin:0 !important;padding:0 !important}
html body .has-panel:after{content:"" !important;position:absolute !important;left:0 !important;top:38px !important;width:100% !important;height:20px !important;background:transparent !important}
html body .nav-panel.small{width:138px !important}
html body .has-panel:hover .nav-panel{opacity:1 !important;visibility:visible !important;transform:translateX(-50%) translateY(0) !important}
html body .cloud-header,html body .cloud-top{box-shadow:0 16px 42px rgba(7,21,47,.075),0 1px 0 rgba(255,255,255,.86) inset,0 -1px 0 rgba(126,231,224,.10) inset !important}
html body .cloud-header *,html body .cloud-top *,html body .header-inner *{position:relative;z-index:2}
html body .cloud-header:before{opacity:.58 !important;background:radial-gradient(circle at 22% 48%,rgba(126,231,224,.105) 0%,rgba(126,231,224,0) 30%),radial-gradient(circle at 76% 46%,rgba(20,84,200,.070) 0%,rgba(20,84,200,0) 34%),linear-gradient(90deg,rgba(255,255,255,.95) 0%,rgba(247,253,255,.96) 50%,rgba(255,255,255,.95) 100%) !important;content:"" !important;position:absolute !important;left:0 !important;right:0 !important;top:0 !important;height:100% !important;pointer-events:none !important;z-index:0 !important}
html body .cloud-nav ul{margin:0 !important;padding:0 !important;list-style:none !important;display:flex !important;align-items:center !important;gap:8px !important}
html body .cloud-nav>ul>li.has-panel:after{z-index:10025 !important}
html body .cloud-nav>ul>li{position:relative !important;z-index:10012 !important}
html body .cloud-top{height:24px !important;border-bottom:0 !important;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(248,252,255,.96) 100%) !important;box-shadow:inset 0 -1px 0 rgba(126,231,224,.08) !important}
html body .cloud-top:before{opacity:.32 !important;background:radial-gradient(circle at 76% 50%,rgba(126,231,224,.12) 0%,rgba(126,231,224,0) 30%),linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(247,252,255,.96) 100%) !important}
html body .cloud-top:after{height:1px !important;bottom:0 !important;opacity:.58 !important;width:min(980px,calc(100% - 420px)) !important;left:50% !important;background:linear-gradient(90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.30) 26%,rgba(20,84,200,.18) 50%,rgba(126,231,224,.30) 74%,rgba(126,231,224,0) 100%) !important;box-shadow:0 0 10px rgba(126,231,224,.08) !important}
html body .cloud-top-inner{width:1000px !important;height:24px !important;line-height:24px !important;margin:0 auto !important;text-align:right !important;display:flex !important;justify-content:flex-end !important;align-items:center !important;gap:4px !important}
html body .cloud-nav .nav-panel{top:56px !important;padding:12px 9px 13px 9px !important;border-radius:19px !important;background:radial-gradient(circle at 18% 0%,rgba(126,231,224,.075) 0%,rgba(126,231,224,0) 42%),linear-gradient(180deg,rgba(255,255,255,.982) 0%,rgba(250,253,255,.968) 100%) !important;border:1px solid rgba(217,229,241,.94) !important;box-shadow:0 18px 42px rgba(7,21,47,.125),0 6px 16px rgba(20,84,200,.035),0 0 0 1px rgba(255,255,255,.72),inset 0 1px 0 rgba(255,255,255,.98) !important;backdrop-filter:blur(16px) saturate(1.05) !important;-webkit-backdrop-filter:blur(16px) saturate(1.05) !important;z-index:10080 !important}
html body .cloud-nav .nav-panel:before{top:-7px !important;width:12px !important;height:12px !important;background:rgba(255,255,255,.982) !important;border-left:1px solid rgba(217,229,241,.94) !important;border-top:1px solid rgba(217,229,241,.94) !important;box-shadow:-2px -2px 4px rgba(7,21,47,.012) !important;z-index:1 !important}
html body .cloud-nav .nav-panel a{position:relative !important;display:flex !important;align-items:center !important;justify-content:space-between !important;height:36px !important;padding:0 12px 0 14px !important;border-radius:12px !important;color:#2E3A4B !important;background:transparent !important;font-size:13px !important;line-height:1 !important;font-weight:820 !important;letter-spacing:-.42px !important;overflow:hidden !important;transition:color .20s ease,background .20s ease,padding .20s cubic-bezier(.22,1,.36,1),transform .20s cubic-bezier(.22,1,.36,1),box-shadow .20s ease !important;z-index:2 !important}
html body .cloud-nav .nav-panel a:before{content:"" !important;position:absolute !important;left:0 !important;top:10px !important;bottom:10px !important;width:2px !important;height:auto !important;border-radius:999px !important;background:linear-gradient(180deg,#1454C8 0%,#7EE7E0 100%) !important;opacity:0 !important;transform:translateX(-3px) !important;transition:opacity .20s ease,transform .20s cubic-bezier(.22,1,.36,1) !important;pointer-events:none !important;display:block !important}
html body .cloud-nav .nav-panel a:after{content:"→" !important;display:flex !important;align-items:center !important;justify-content:center !important;width:18px !important;height:18px !important;border-radius:999px !important;color:#0B7E91 !important;background:rgba(126,231,224,.11) !important;border:1px solid rgba(126,231,224,.18) !important;font-size:10px !important;line-height:1 !important;font-weight:900 !important;opacity:0 !important;transform:translateX(-6px) scale(.92) !important;transition:opacity .20s ease,transform .20s cubic-bezier(.22,1,.36,1),background .20s ease,color .20s ease !important}
html body .cloud-nav .nav-panel a:hover{color:#0E4DB3 !important;background:radial-gradient(circle at 12% 50%,rgba(126,231,224,.115) 0%,rgba(126,231,224,0) 48%),linear-gradient(90deg,rgba(242,249,255,.96) 0%,rgba(255,255,255,.74) 100%) !important;padding-left:17px !important;transform:translateX(1px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 6px 13px rgba(20,84,200,.035) !important}
html body .cloud-nav .nav-panel a:hover:before{opacity:.86 !important;transform:translateX(0) !important}
html body .cloud-nav .nav-panel a:hover:after{opacity:1 !important;transform:translateX(0) scale(1) !important;background:#EFFFFD !important;color:#07152F !important}
html body .cloud-nav .nav-panel a + a{margin-top:1px !important}
html body .cloud-nav .nav-panel.small{width:142px !important}
html body .cloud-nav .nav-panel.small a{height:35px !important}
html body .nav-panel a{position:relative ;overflow:hidden ;display:flex !important;align-items:center !important;justify-content:space-between !important;height:34px !important;padding:0 11px !important;border-radius:11px !important;color:#344155 !important;background:transparent !important;font-size:12.8px !important;line-height:1 !important;font-weight:820 !important;letter-spacing:-.28px !important;box-shadow:none !important;transition:all .18s ease !important;}
html body .nav-panel a:before{content:"" ;position:absolute ;left:0 ;top:11px !important;bottom:11px !important;width:2px ;height:auto ;border-radius:999px ;background:linear-gradient(180deg,rgba(20,84,200,.82),rgba(126,231,224,.92)) !important;opacity:0 ;transform:translateX(-4px) ;transition:opacity .18s ease,transform .18s cubic-bezier(.22,1,.36,1) !important;pointer-events:none ;display:block ;box-shadow:0 0 7px rgba(126,231,224,.18) !important;}
html body .nav-panel a:after{content:"→" ;opacity:0 ;transform:translateX(-5px) scale(.92) !important;color:#20B8B4 !important;transition:all .18s ease ;width:16px !important;height:16px !important;border-radius:50% !important;display:flex !important;align-items:center !important;justify-content:center !important;background:rgba(126,231,224,.115) !important;font-size:10px !important;line-height:1 !important;font-weight:900 !important;box-shadow:none !important;}
html body .cloud-header:after{height:1px !important;opacity:.82 !important;background:linear-gradient(90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.34) 18%,rgba(20,84,200,.34) 50%,rgba(126,231,224,.34) 82%,rgba(126,231,224,0) 100%) !important;box-shadow:0 0 10px rgba(126,231,224,.13) !important;content:"" !important;position:absolute !important;left:50% !important;bottom:0 !important;width:min(1180px,calc(100% - 46px)) !important;transform:translateX(-50%) !important;pointer-events:none !important;z-index:1 !important}
html body .cloud-top:after,html body .header-inner:after{display:none !important;content:none !important}
html body .cloud-header:before,html body .cloud-top:before{content:"" !important;position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;pointer-events:none !important;opacity:.22 !important;background:radial-gradient(circle at 18% 48%,rgba(126,231,224,.18) 0%,rgba(126,231,224,0) 34%),radial-gradient(circle at 72% 48%,rgba(20,84,200,.13) 0%,rgba(20,84,200,0) 36%),linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(247,253,255,.94) 52%,rgba(255,255,255,.90) 100%) !important}
html body .nav-panel{position:absolute !important;top:54px !important;left:50% !important;width:168px !important;padding:13px 10px !important;border-radius:18px !important;background:radial-gradient(circle at 100% 0%,rgba(126,231,224,.070) 0%,rgba(126,231,224,0) 34%),rgba(255,255,255,.965) !important;border:1px solid rgba(222,231,242,.92) !important;box-shadow:0 22px 44px rgba(7,21,47,.105),0 0 0 1px rgba(126,231,224,.055),inset 0 1px 0 rgba(255,255,255,.96) !important;backdrop-filter:blur(18px) saturate(1.10) !important;-webkit-backdrop-filter:blur(18px) saturate(1.10) !important;opacity:0 !important;visibility:hidden !important;transform:translateX(-50%) translateY(8px) !important;transition:opacity .22s ease,visibility .22s ease,transform .22s cubic-bezier(.22,1,.36,1) !important;z-index:10080 !important;border-color:rgba(215,225,239,.98) !important;overflow:visible !important}
html body .nav-panel:before{content:"" !important;position:absolute !important;left:50% !important;top:-7px !important;width:12px !important;height:12px !important;background:rgba(255,255,255,.975) !important;border-left:1px solid rgba(219,228,240,.96) !important;border-top:1px solid rgba(219,228,240,.96) !important;transform:translateX(-50%) rotate(45deg) !important;z-index:1 !important;box-shadow:-1px -1px 0 rgba(229,234,241,.80),0 0 12px rgba(126,231,224,.045) !important}
html body #gotop{box-shadow:0 15px 32px rgba(7,21,47,.20),0 0 0 1px rgba(126,231,224,.16),inset 0 1px 0 rgba(255,255,255,.14) !important}
html body .cloud-header{width:100% !important;min-width:1100px !important;background:rgba(255,255,255,.985) !important;position:relative !important;z-index:9999 !important;border-bottom:1px solid rgba(126,231,224,.22) !important;box-shadow:0 12px 30px rgba(7,21,47,.055),0 1px 0 rgba(255,255,255,.92) inset !important;overflow:visible !important;isolation:isolate !important}
html body .cloud-main-header{width:100% !important;height:78px !important;background:radial-gradient(circle at 18% 0%,rgba(126,231,224,.075) 0%,rgba(126,231,224,0) 34%),radial-gradient(circle at 82% 0%,rgba(20,84,200,.055) 0%,rgba(20,84,200,0) 36%),rgba(255,255,255,.98) !important;border-bottom:0 !important;position:relative !important;z-index:10000 !important;border-top:0 !important;box-shadow:none !important}
html body .cloud-main-header:after{content:"" !important;position:absolute !important;left:50% !important;bottom:-1px !important;width:min(1000px,calc(100% - 120px)) !important;height:2px !important;transform:translateX(-50%) !important;background:linear-gradient(90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.72) 20%,rgba(20,84,200,.55) 50%,rgba(126,231,224,.72) 80%,rgba(126,231,224,0) 100%) !important;box-shadow:0 0 16px rgba(126,231,224,.22) !important;pointer-events:none !important}
html body .cloud-nav>ul>li>a{height:40px !important;line-height:40px !important;padding:0 16px !important;font-size:14.7px !important;font-weight:900 !important;border-radius:13px !important;color:#07152F !important;position:relative !important;overflow:hidden !important}
html body .cloud-nav>ul>li>a:before{content:"" !important;position:absolute !important;left:50% !important;bottom:5px !important;width:0 !important;height:2px !important;border-radius:999px !important;transform:translateX(-50%) !important;background:linear-gradient(90deg,#1454C8 0%,#7EE7E0 100%) !important;opacity:0 !important;transition:all .24s cubic-bezier(.22,1,.36,1) !important;box-shadow:0 0 10px rgba(126,231,224,.26) !important}
html body .cloud-nav>ul>li:hover>a:before{width:34px !important;opacity:.95 !important}
html body .cloud-nav>ul>li:hover>a{color:#104FB8 !important;background:linear-gradient(180deg,#F6FBFF 0%,#EDF8FF 100%) !important;box-shadow:0 9px 20px rgba(20,84,200,.075) !important}
html body .cloud-nav>ul>li.has-panel:hover:before{content:none !important;position:absolute !important;left:50% !important;top:38px !important;width:188px !important;height:22px !important;transform:translateX(-50%) !important;border-radius:0 0 18px 18px !important;background:none !important;z-index:10035 !important;pointer-events:none !important;box-shadow:none !important;display:none !important;opacity:0 !important}
html body .cloud-nav,html body .cloud-nav>ul,html body .cloud-nav>ul>li{position:relative !important;z-index:10020 !important;overflow:visible !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a{position:relative !important;z-index:10082 !important;height:35px !important;border-radius:12px !important;color:#435064 !important;background:transparent !important;box-shadow:none !important;font-weight:820 !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a:before{top:10px !important;bottom:10px !important;width:2px !important;opacity:0 !important;background:linear-gradient(180deg,#1454C8 0%,#7EE7E0 100%) !important;box-shadow:0 0 6px rgba(126,231,224,.16) !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a:after{color:#7EE7E0 !important;opacity:0 !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a:hover:after{opacity:.85 !important}
html body .cloud-nav>ul>li.has-panel .nav-panel{top:57px !important;z-index:10070 !important;border:1px solid rgba(222,231,242,.96) !important;box-shadow:0 24px 48px rgba(7,21,47,.125),0 0 0 1px rgba(126,231,224,.045),inset 0 1px 0 rgba(255,255,255,.98) !important;background:radial-gradient(circle at 18% 0%,rgba(126,231,224,.055) 0%,rgba(126,231,224,0) 44%),rgba(255,255,255,.982) !important;border-radius:20px !important;transform:translateX(-50%) translateY(8px) !important}
html body .cloud-nav>ul>li.has-panel:hover .nav-panel{transform:translateX(-50%) translateY(0) !important}
html body .cloud-nav>ul>li.has-panel .nav-panel:before{z-index:10071 !important;top:-6px !important;background:rgba(255,255,255,.982) !important;border-left:1px solid rgba(222,231,242,.96) !important;border-top:1px solid rgba(222,231,242,.96) !important;box-shadow:-2px -2px 7px rgba(15,23,42,.018) !important;width:11px !important;height:11px !important;opacity:.96 !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a:hover{color:#104FB8 !important;background:linear-gradient(180deg,rgba(250,253,255,.96) 0%,rgba(245,250,255,.88) 100%) !important;padding-left:15px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 5px 12px rgba(20,84,200,.028) !important}
html body .cloud-nav>ul>li.has-panel .nav-panel a:hover:before{opacity:.66 !important}
html body .cloud-top-inner a{display:inline-flex !important;margin-left:12px !important;color:rgba(96,110,128,.72) !important;font-size:9px !important;line-height:18px !important;font-weight:800 !important;letter-spacing:.82px !important;background:transparent !important;box-shadow:none !important;border-radius:999px !important;transform:none !important;height:18px !important;opacity:.78 !important;transition:color .20s ease,opacity .20s ease,transform .20s cubic-bezier(.22,1,.36,1),text-shadow .20s ease !important;position:relative !important;align-items:center !important;justify-content:center !important;padding:0 2px !important;text-transform:uppercase !important;text-shadow:none !important}
html body .cloud-top-inner a:hover{color:#1454C8 !important;background:transparent !important;opacity:1 !important;text-shadow:0 0 10px rgba(126,231,224,.16) !important;transform:translateY(-1px) !important}
html body .cloud-top-inner a:before{content:"" !important;position:absolute !important;left:50% !important;bottom:3px !important;width:12px !important;height:1px !important;border-radius:999px !important;background:linear-gradient(90deg,rgba(126,231,224,0),rgba(126,231,224,.72),rgba(20,84,200,.42),rgba(126,231,224,0)) !important;opacity:0 !important;transform:translateX(-50%) scaleX(.55) !important;transition:opacity .20s ease,transform .20s cubic-bezier(.22,1,.36,1) !important;transform-origin:center !important;pointer-events:none !important}
html body .cloud-top-inner a:hover:before{opacity:.78 !important;width:18px !important;transform:translateX(-50%) scaleX(1) !important}
html body .cloud-top-inner a:after{display:none !important;content:none !important}
html body .cloud-logo-imgbox{display:flex !important;align-items:center !important;flex-shrink:0 !important;height:78px !important}
html body .cloud-logo-imgbox a{display:inline-flex !important;align-items:center !important;gap:13px !important;background:transparent !important;box-shadow:none !important;border-radius:16px !important;padding:0 !important;height:46px !important}
html body .cloud-logo-imgbox img{width:149px !important;max-width:149px !important;height:auto !important;filter:drop-shadow(0 7px 15px rgba(7,21,47,.070))
 drop-shadow(0 0 9px rgba(126,231,224,.030)) !important;transition:transform .24s cubic-bezier(.22,1,.36,1),filter .24s ease !important;transform:translateY(0) !important}
html body .cloud-logo-imgbox span{display:inline-flex !important;font-size:9.4px !important;line-height:1 !important;font-weight:900 !important;color:#7A8494 !important;letter-spacing:1.22px !important;white-space:nowrap !important;transform:translateY(2px) !important;height:22px !important;padding:0 9px !important;align-items:center !important;border-radius:999px !important;background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(247,250,255,.88) 100%) !important;border:1px solid rgba(126,231,224,.16) !important;box-shadow:0 7px 14px rgba(15,23,42,.030),inset 0 1px 0 rgba(255,255,255,.92) !important;justify-content:center !important}
html body .cloud-logo-imgbox a:hover img{transform:translateY(-1px) !important;filter:drop-shadow(0 10px 21px rgba(7,21,47,.085))
 drop-shadow(0 0 13px rgba(126,231,224,.075)) !important}
html body .cloud-logo-imgbox a:hover span{color:#516176 !important;border-color:rgba(126,231,224,.24) !important;background:linear-gradient(180deg,rgba(255,255,255,1) 0%,rgba(242,251,255,.94) 100%) !important;box-shadow:0 8px 16px rgba(15,23,42,.040),0 0 12px rgba(126,231,224,.070),inset 0 1px 0 rgba(255,255,255,.96) !important}
html body .cloud-header-inner{width:1000px !important;height:78px !important;margin:0 auto !important;display:flex !important;align-items:center !important;justify-content:space-between !important;overflow:visible !important;position:relative !important;z-index:10004 !important}
html body .cloud-nav{position:relative !important;z-index:10010 !important;transform:translateY(0) !important}
html body #banner .quick-link:before{content:"" !important;position:absolute !important;left:0 !important;top:13px !important;bottom:13px !important;width:2px !important;border-radius:999px !important;background:linear-gradient(180deg,#7EE7E0 0%,#1454C8 100%) !important;opacity:0 !important;transform:translateX(-3px) !important;transition:opacity .20s ease,transform .20s cubic-bezier(.22,1,.36,1) !important;pointer-events:none !important}
html body #banner:hover .quick-box:before{opacity:.80 !important}
html body #banner .quick-box:before{content:"" !important;position:absolute !important;left:0 !important;top:18px !important;bottom:18px !important;width:2px !important;border-radius:999px !important;background:linear-gradient(180deg,rgba(126,231,224,.85),rgba(20,84,200,.50),rgba(126,231,224,.45)) !important;opacity:.30 !important;box-shadow:0 0 12px rgba(126,231,224,.16) !important;pointer-events:none !important;z-index:4 !important;display:block !important}
html body #banner .quick-box:before,html body #banner:hover .quick-box:before{content:none !important;display:none !important;opacity:0 !important;background:none !important;box-shadow:none !important}
html body #banner{position:fixed ;top:326px !important;right:0 ;left:auto ;margin:0 ;width:82px !important;z-index:20000 ;opacity:.23 !important;filter:saturate(.72) brightness(.94) contrast(.96) !important;transform:translateX(18px) !important;transition:opacity .26s ease,transform .26s cubic-bezier(.22,1,.36,1),filter .26s ease !important;}
html body #banner:hover{opacity:.96 ;transform:translateX(-4px) !important;filter:saturate(1.07) brightness(1.045) contrast(1.02) !important;}
html body #banner .quick-box{width:82px !important;border-radius:24px 0 0 24px !important;overflow:hidden ;background:radial-gradient(circle at 18% 0%,rgba(126,231,224,.105) 0%,rgba(126,231,224,0) 42%),linear-gradient(180deg,rgba(7,21,47,.66) 0%,rgba(6,19,39,.60) 100%) !important;border:1px solid rgba(255,255,255,.13) !important;border-right:0 ;box-shadow:0 18px 36px rgba(7,21,47,.16),0 0 0 1px rgba(126,231,224,.032),inset 0 1px 0 rgba(255,255,255,.10) !important;backdrop-filter:blur(15px) saturate(1.03) !important;-webkit-backdrop-filter:blur(15px) saturate(1.03) !important;border-color:rgba(255,255,255,.14) !important;position:relative !important;}
html body #banner:hover .quick-title{color:rgba(255,255,255,.96) !important;background:linear-gradient(90deg,rgba(126,231,224,.095) 0%,rgba(20,84,200,.14) 100%) !important;border-bottom-color:rgba(255,255,255,.11) !important}
html body #banner:hover .quick-link{color:rgba(255,255,255,.89) !important;border-top-color:rgba(255,255,255,.115) !important}
html body #banner .quick-link:hover,html body #banner .quick-link.current{color:#ffffff !important;background:radial-gradient(circle at 50% 0%,rgba(126,231,224,.115) 0%,rgba(126,231,224,0) 52%),rgba(255,255,255,.060) !important}
html body #banner .quick-link{position:relative !important;display:flex ;flex-direction:column ;align-items:center ;justify-content:center ;gap:5px !important;width:82px !important;height:60px !important;margin:0 ;padding:0 ;color:rgba(255,255,255,.60) !important;background:transparent ;border-top:1px solid rgba(255,255,255,.060) !important;border-radius:0 ;box-shadow:none ;text-align:center ;font-size:9.6px !important;line-height:1.22 !important;font-weight:820 !important;letter-spacing:-.32px !important;transform:none ;overflow:hidden !important;transition:color .20s ease,background .20s ease,transform .20s ease !important;border-top-color:rgba(255,255,255,.078) !important;text-shadow:0 1px 5px rgba(0,0,0,.14) !important;}
html body #banner .quick-title{height:34px !important;display:flex ;align-items:center ;justify-content:center ;color:rgba(255,255,255,.72) !important;font-size:8.5px !important;line-height:1 ;font-weight:900 ;letter-spacing:.80px !important;text-transform:uppercase !important;background:rgba(255,255,255,.040) !important;border-bottom:1px solid rgba(255,255,255,.070) !important;width:82px !important;}
html body #banner .quick-link i{display:flex ;align-items:center ;justify-content:center ;width:26px !important;height:26px !important;border-radius:50% ;background:radial-gradient(circle at 35% 28%,rgba(255,255,255,.12) 0 2px,transparent 3px),rgba(126,231,224,.095) !important;border:1px solid rgba(126,231,224,.15) !important;color:rgba(150,255,248,.70) !important;font-style:normal ;font-size:11px !important;line-height:1 !important;font-weight:900 ;letter-spacing:0 !important;box-shadow:0 5px 10px rgba(0,0,0,.040),inset 0 1px 0 rgba(255,255,255,.09) !important;transition:background .20s ease,color .20s ease,border-color .20s ease,box-shadow .20s ease,transform .20s ease !important;border-color:rgba(126,231,224,.135) !important;font-family:"Pretendard","Noto Sans KR","Malgun Gothic",Arial,sans-serif !important;text-transform:uppercase !important;}
html body #banner:hover .quick-link i{background:rgba(126,231,224,.19) !important;color:#A8FFF8 !important;border-color:rgba(126,231,224,.23) !important;box-shadow:0 7px 14px rgba(0,0,0,.11),inset 0 1px 0 rgba(255,255,255,.16) !important}
html body #banner .quick-link:hover i,html body #banner .quick-link.current i{background:#7EE7E0 !important;color:#07152F !important;box-shadow:0 0 0 4px rgba(126,231,224,.075),0 8px 16px rgba(7,21,47,.13),inset 0 1px 0 rgba(255,255,255,.60) !important;transform:translateY(-1px) !important;border-color:rgba(255,255,255,.42) !important}
html body #banner:hover .quick-box{background:radial-gradient(circle at 18% 0%,rgba(126,231,224,.145) 0%,rgba(126,231,224,0) 42%),linear-gradient(180deg,rgba(7,21,47,.76) 0%,rgba(6,19,39,.70) 100%) !important;border-color:rgba(255,255,255,.18) !important;box-shadow:0 22px 42px rgba(7,21,47,.245),0 0 0 1px rgba(126,231,224,.055),inset 0 1px 0 rgba(255,255,255,.13) !important}
html body .nav-panel a:hover{color:#0F4FAF !important;background:linear-gradient(90deg,rgba(126,231,224,.085) 0%,rgba(242,248,255,.72) 58%,rgba(255,255,255,.52) 100%) !important;padding-left:14px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;transform:translateX(1px) !important}
html body .nav-panel a:hover:before{opacity:.82 !important;transform:translateX(0) ;}
html body .nav-panel a:hover:after{opacity:.82 !important;transform:translateX(0) scale(1) !important}
.cloud-header{width:100%;min-width:1100px;background:#ffffff;position:relative;z-index:9999}
.cloud-main-header{width:100%;height:86px;background:#ffffff;border-bottom:1px solid #edf0f4;position:relative;z-index:10000}
.cloud-header-inner{width:1000px;height:86px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;overflow:visible}
.cloud-logo-imgbox{display:flex;align-items:center;flex-shrink:0}
.cloud-logo-imgbox a{display:flex;align-items:center;gap:14px}
.cloud-logo-imgbox img{width:146px;max-width:146px;height:auto}
.cloud-logo-imgbox span{display:block;font-size:11px;line-height:1;font-weight:800;color:#9AA2AE;letter-spacing:1px;white-space:nowrap;transform:translateY(7px)}
.cloud-nav,.cloud-nav ul,.cloud-nav li{overflow:visible}
.cloud-nav{position:relative;z-index:10001}
.cloud-nav ul{margin:0;padding:0;list-style:none;display:flex;align-items:center;gap:6px}
.cloud-nav li{position:relative;margin:0;padding:0}
.cloud-nav>ul>li>a{display:block;height:40px;line-height:40px;padding:0 14px;border-radius:11px;color:#111827;background:#ffffff;font-size:15px;font-weight:850;letter-spacing:-0.65px;transition:all 0.22s ease}
.cloud-nav>ul>li>a:hover{color:var(--cloud-blue);background:#F3F7FF}
.cloud-nav>ul>li>a.active{color:#ffffff;background:var(--cloud-navy);box-shadow:0 10px 22px rgba(7,21,47,0.14)}
.cloud-nav>ul>li>a.active:hover{color:#ffffff;background:var(--cloud-navy)}
.nav-panel{position:absolute;top:50px;left:50%;width:168px;padding:12px 10px;border-radius:18px;background:rgba(255,255,255,0.96);border:1px solid rgba(229,234,241,0.95);box-shadow:0 18px 38px rgba(7,21,47,0.11),inset 0 1px 0 rgba(255,255,255,0.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity 0.22s ease,visibility 0.22s ease,transform 0.22s cubic-bezier(0.22,1,0.36,1);z-index:10002}
.nav-panel.small{width:138px}
.has-panel:hover .nav-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.nav-panel:before{content:"";position:absolute;left:50%;top:-7px;width:12px;height:12px;background:rgba(255,255,255,0.96);border-left:1px solid rgba(229,234,241,0.95);border-top:1px solid rgba(229,234,241,0.95);transform:translateX(-50%) rotate(45deg)}
.nav-panel a{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 11px;border-radius:11px;color:#4B5563;font-size:13px;line-height:1;font-weight:750;letter-spacing:-0.35px;transition:all 0.18s ease}
.nav-panel a:hover{color:var(--cloud-blue);background:#F2F7FF;padding-left:14px}
.nav-panel a:after{content:"→";opacity:0;transform:translateX(-4px);color:var(--cloud-mint);transition:all 0.18s ease}
.nav-panel a:hover:after{opacity:1;transform:translateX(0)}
header,#header,.top-header,.cloud-header{background:rgba(255,255,255,0.96) !important;border-bottom:1px solid rgba(15,23,42,0.06) !important;box-shadow:0 8px 26px rgba(15,23,42,0.035) !important}
header img,#header img,.top-header img,.cloud-header img{vertical-align:middle !important}
header a,#header a,.top-header a,.cloud-header a{letter-spacing:-0.35px !important;transition:color 0.22s ease,background 0.22s ease,box-shadow 0.22s ease,transform 0.22s ease !important}
header a:hover,#header a:hover,.top-header a:hover,.cloud-header a:hover{color:#0F6BFF !important}
header a.active,#header a.active,.top-header a.active,.cloud-header a.active,header .on,#header .on,.top-header .on,.cloud-header .on{background:#07162D !important;color:#ffffff !important;border-radius:13px !important;box-shadow:0 10px 22px rgba(7,22,45,0.18),inset 0 1px 0 rgba(255,255,255,0.16) !important}
html body header a:hover,html body #header a:hover,html body .top-header a:hover,html body .cloud-header a:hover{color:inherit}
html body .cloud-nav>ul>li>a:before,html body .cloud-nav>ul>li.has-panel>a:before,html body .nav-panel a:before,html body .nav-panel a:after{content:"" !important}
html body .cloud-nav>ul>li>a.active:hover,html body .cloud-nav>ul>li.has-panel>a.active:hover{color:#fff !important;background:#07152F !important}
html body .cloud-nav>ul>li.has-panel:hover>a.active:before,html body .cloud-nav>ul>li>a.active:hover:before{opacity:.88 !important;width:32px !important;background:linear-gradient(90deg,rgba(255,255,255,.50),rgba(126,231,224,.90)) !important}
html body .cloud-header,html body header,html body .top,html body .topbar,html body .top-menu,html body .gnb-wrap{backdrop-filter:blur(16px) saturate(135%) !important;-webkit-backdrop-filter:blur(16px) saturate(135%) !important}
html body .cloud-header,html body .cloud-top,html body .header-inner,html body .topmenu,html body .top-menu{position:relative !important}
html body .cloud-header img:hover,html body .cloud-top img:hover,html body .header-inner img:hover{filter:drop-shadow(0 8px 18px rgba(20,84,200,.12)) !important;transform:translateY(-1px) !important}
html body .cloud-header a,html body .cloud-top a,html body .header-inner a,html body .topmenu a,html body .top-menu a,html body nav a{transition:color .22s ease,opacity .22s ease,transform .22s ease,text-shadow .22s ease !important;color:#07152F !important;font-weight:800 !important;letter-spacing:-.25px !important}
html body .cloud-header a:hover,html body .cloud-top a:hover,html body .header-inner a:hover,html body .topmenu a:hover,html body .top-menu a:hover,html body nav a:hover{color:#0B5E85 !important;text-shadow:0 0 14px rgba(126,231,224,.36),0 0 26px rgba(20,84,200,.14) !important}
html body .cloud-header img,html body .cloud-top img,html body .header-inner img{transition:filter .25s ease,transform .25s ease !important;filter:drop-shadow(0 8px 18px rgba(7,21,47,.055)) !important}
html body .cloud-header small,html body .cloud-top small,html body .header-inner small,html body .cloud-header .premium,html body .cloud-top .premium,html body .header-inner .premium{color:#5F6E82 !important;letter-spacing:1.6px !important;font-weight:800 !important}
html body .cloud-nav>ul>li:hover>a:before,html body .cloud-nav>ul>li>a:hover:before,html body .cloud-nav>ul>li.has-panel>a:hover:before{opacity:.95 !important;width:36px !important;transform:translateX(-50%) scaleX(1) !important}
html body .cloud-top,html body .cloud-main-header,html body .cloud-header-inner,html body .cloud-logo-imgbox,html body .cloud-nav{position:relative !important;z-index:3 !important}
html body .cloud-nav>ul>li>a:hover,html body .cloud-nav>ul>li.has-panel>a:hover{color:#104FB8 !important;background:rgba(255,255,255,.74) !important;transform:translateY(-1px) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 18px rgba(20,84,200,.055) !important;text-shadow:0 0 13px rgba(126,231,224,.22) !important}
html body .cloud-nav>ul>li>a,html body .cloud-nav>ul>li.has-panel>a{position:relative !important;overflow:hidden !important;display:block !important;height:38px !important;line-height:38px !important;padding:0 14px !important;border-radius:13px !important;color:#07152F !important;background:transparent !important;font-size:14.5px !important;font-weight:900 !important;letter-spacing:-.58px !important;box-shadow:none !important;transition:color .22s cubic-bezier(.22,1,.36,1),background .22s cubic-bezier(.22,1,.36,1),box-shadow .22s ease,transform .22s cubic-bezier(.22,1,.36,1) !important;transform:none !important}
html body .cloud-nav>ul>li>a.active,html body .cloud-nav>ul>li.has-panel>a.active{color:#ffffff !important;background:radial-gradient(circle at 50% 100%,rgba(126,231,224,.18) 0%,rgba(126,231,224,0) 56%),linear-gradient(135deg,#07152F 0%,#0B2454 66%,#1454C8 100%) !important;border-radius:13px !important;box-shadow:0 10px 22px rgba(7,21,47,.16),inset 0 1px 0 rgba(255,255,255,.16) !important}
html body .cloud-nav>ul>li>a.active:after,html body .cloud-nav>ul>li.has-panel>a.active:after{opacity:.86 !important;background:radial-gradient(ellipse at center,rgba(126,231,224,.20) 0%,rgba(126,231,224,0) 72%) !important;transform:translateX(-50%) scaleX(1) !important}
html body .cloud-header-inner,html body .cloud-logo-imgbox,html body .cloud-nav,html body .cloud-nav ul,html body .cloud-nav li{position:relative !important;z-index:10 !important}
html body .cloud-nav>ul>li.has-panel:hover>a:before,html body .cloud-nav>ul>li>a:hover:before{opacity:.88 !important;width:32px !important;transform:translateX(-50%) scaleX(1) translateY(0) !important}
html body .cloud-nav>ul>li>a.active:before,html body .cloud-nav>ul>li.has-panel>a.active:before{content:"" !important;display:block !important;opacity:.72 !important;width:30px !important;height:2px !important;left:50% !important;right:auto !important;bottom:4px !important;background:linear-gradient(90deg,rgba(255,255,255,.42) 0%,rgba(126,231,224,.95) 48%,rgba(255,255,255,.34) 100%) !important;transform:translateX(-50%) scaleX(1) translateY(0) !important;box-shadow:0 0 10px rgba(126,231,224,.24) !important}
html body .cloud-header:after,html body .cloud-top:after,html body .header-inner:after{content:"" !important;position:absolute !important;left:50% !important;bottom:0 !important;transform:translateX(-50%) !important;width:min(1240px,calc(100% - 36px)) !important;height:2px !important;pointer-events:none !important;background:linear-gradient(90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.62) 16%,rgba(20,84,200,.48) 46%,rgba(126,231,224,.62) 78%,rgba(126,231,224,0) 100%) !important;opacity:1 !important;box-shadow:0 0 18px rgba(126,231,224,.22),0 0 24px rgba(20,84,200,.10) !important;z-index:0 !important}
html body .cloud-main-header,html body .cloud-header-inner,html body .cloud-nav,html body .cloud-nav ul,html body .cloud-nav li{overflow:visible !important;position:relative !important;z-index:20 !important}
html body .cloud-main-header:after,html body .cloud-header:after,html body .cloud-top:after,html body .header-inner:after{z-index:0 !important;pointer-events:none !important}
html body .cloud-nav>ul>li>a:before,html body .cloud-nav>ul>li.has-panel>a:before{content:"" !important;position:absolute !important;left:50% !important;right:auto !important;bottom:4px !important;width:28px !important;height:2px !important;border-radius:999px !important;background:linear-gradient(90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.82) 24%,rgba(20,84,200,.78) 58%,rgba(126,231,224,.62) 76%,rgba(126,231,224,0) 100%) !important;opacity:0 !important;transform:translateX(-50%) scaleX(.38) translateY(4px) !important;transform-origin:center center !important;transition:opacity .24s ease,transform .26s cubic-bezier(.22,1,.36,1),width .26s cubic-bezier(.22,1,.36,1),box-shadow .24s ease !important;pointer-events:none !important;display:block !important;box-shadow:none !important;z-index:2 !important}
html body .cloud-nav>ul>li>a:after,html body .cloud-nav>ul>li.has-panel>a:after{content:"" !important;position:absolute !important;inset:0 !important;border-radius:999px !important;opacity:0 !important;background:radial-gradient(ellipse at center,rgba(126,231,224,.135) 0%,rgba(126,231,224,.060) 38%,rgba(126,231,224,0) 74%) !important;box-shadow:0 10px 22px rgba(20,84,200,.075),inset 0 1px 0 rgba(255,255,255,.96) !important;transition:opacity .24s ease,transform .26s cubic-bezier(.22,1,.36,1) !important;pointer-events:none !important;z-index:1 !important;left:50% !important;bottom:1px !important;width:46px !important;height:7px !important;transform:translateX(-50%) scaleX(.55) !important}
html body .cloud-nav>ul>li>a:hover:after,html body .cloud-nav>ul>li.has-panel:hover>a:after{opacity:.88 !important;transform:translateX(-50%) scaleX(1) !important}
html body .cloud-art-hero-copybox .cloud-hero-btn,html body .cloud-main-hero.cloud-art-photo-hero .cloud-art-result-card,html body .cloud-main-hero.cloud-art-photo-hero .cloud-art-result-card .art-result-mini-grid a,html body #banner,html body #banner .quick-link,html body #banner .quick-link i,html body .cloud-nav>ul>li>a,html body .nav-panel a{transition:transform .26s cubic-bezier(.22,1,.36,1),box-shadow .26s ease,filter .26s ease,background .24s ease,border-color .24s ease,color .22s ease,opacity .22s ease !important}
html body .cloud-nav>ul>li>a:hover,html body .cloud-nav>ul>li.has-panel:hover>a{color:#104FB8 !important;background:radial-gradient(circle at 50% 100%,rgba(126,231,224,.15) 0%,rgba(126,231,224,0) 58%),linear-gradient(180deg,rgba(246,251,255,.96) 0%,rgba(255,255,255,.74) 100%) !important;box-shadow:0 8px 18px rgba(20,84,200,.055),inset 0 1px 0 rgba(255,255,255,.96) !important;transform:translateY(-1px) !important}
html body .cloud-nav>ul>li>a:hover:before,html body .cloud-nav>ul>li.has-panel:hover>a:before{opacity:.96 !important;width:36px !important;transform:translateX(-50%) scaleX(1) translateY(0) !important;box-shadow:0 0 10px rgba(126,231,224,.22) !important;background:linear-gradient(
 90deg,rgba(126,231,224,0) 0%,rgba(126,231,224,.72) 24%,rgba(20,84,200,.76) 56%,rgba(126,231,224,.58) 76%,rgba(126,231,224,0) 100%
 ) !important}
html body .admission-rate-center ~ #banner,html body .result-report-section ~ #banner,html body .cloud-system-flow-section ~ #banner,html body .cloud-today-section ~ #banner,html body .cloud-action-route-section ~ #banner{opacity:.40 !important}
#banner{position:fixed !important;top:345px !important;right:0 !important;left:auto !important;margin:0 !important;width:72px !important;z-index:20000 !important;opacity:0.18 !important;filter:saturate(0.85) brightness(0.95) !important;transition:opacity 0.25s ease,transform 0.25s ease,filter 0.25s ease !important}
#banner:hover{opacity:0.95 !important;transform:translateX(-5px) !important;filter:saturate(1) brightness(1) !important}
#banner .quick-box{width:72px !important;border-radius:18px 0 0 18px !important;overflow:hidden !important;background:rgba(7,21,47,0.72) !important;border:1px solid rgba(255,255,255,0.13) !important;border-right:0 !important;box-shadow:0 18px 34px rgba(7,21,47,0.18) !important;backdrop-filter:blur(10px) !important;-webkit-backdrop-filter:blur(10px) !important}
#banner .quick-title{height:30px !important;display:flex !important;align-items:center !important;justify-content:center !important;color:#ffffff !important;font-size:9px !important;line-height:1 !important;font-weight:900 !important;letter-spacing:-0.1px !important;background:rgba(255,255,255,0.08) !important}
#banner .quick-link{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:4px !important;width:72px !important;height:56px !important;margin:0 !important;padding:0 !important;color:rgba(255,255,255,0.78) !important;border-top:1px solid rgba(255,255,255,0.09) !important;font-size:10px !important;line-height:1.18 !important;font-weight:800 !important;letter-spacing:-0.45px !important;text-align:center !important;background:transparent !important;border-radius:0 !important;box-shadow:none !important;transform:none !important;transition:all 0.18s ease !important}
#banner .quick-link i{display:flex !important;align-items:center !important;justify-content:center !important;width:24px !important;height:24px !important;border-radius:50% !important;background:rgba(126,231,224,0.13) !important;color:var(--cloud-mint) !important;font-style:normal !important;font-size:12px !important;font-weight:900 !important}
#banner .quick-link:hover,#banner .quick-link.current{color:#ffffff !important;background:rgba(126,231,224,0.18) !important}
#banner .quick-link:hover i,#banner .quick-link.current i{background:var(--cloud-mint) !important;color:var(--cloud-navy) !important}
html body #banner .quick-link:hover:before,html body #banner .quick-link.current:before{opacity:.88 !important;transform:translateX(0) !important}
html body #banner .quick-link:before,html body #banner .quick-link:hover:before,html body #banner .quick-link.current:before{content:none !important;display:none !important;opacity:0 !important;transform:none !important;background:none !important}
html body #banner .quick-box:before,html body #banner .quick-link:before,html body #banner:hover .quick-box:before,html body #banner .quick-link:hover:before,html body #banner .quick-link.current:before{content:none !important;display:none !important;opacity:0 !important;background:none !important;box-shadow:none !important}
@media (max-width:1400px){#banner{display:none !important}}
@media(max-width:1500px){html body #banner{opacity:.12 !important}html body #banner:hover{opacity:.88 !important}}
@media(max-width:1380px){html body #banner{display:none !important}}
@media(max-width:1500px){html body #banner{opacity:.40 !important}html body #banner:hover{opacity:.96 !important}}
@media(max-width:760px){html body .cloud-header:before,html body .cloud-top:before{opacity:.24 !important}html body .cloud-header:after,html body .cloud-top:after,html body .header-inner:after{width:calc(100% - 28px) !important}}
@media(max-width:760px){html body .cloud-header:after,html body .cloud-top:after,html body .header-inner:after{height:1px !important;width:calc(100% - 24px) !important}html body .cloud-header:before,html body .cloud-top:before{opacity:.34 !important}}
@media(max-width:760px){html body .cloud-top-inner{width:100% !important;padding:0 18px !important}html body .cloud-top:after{width:calc(100% - 36px) !important}}
@media(max-width:760px){html body .cloud-header:after{width:calc(100% - 28px) !important;opacity:.58 !important}}
@media(max-width:1500px){html body #banner{opacity:.30 !important}html body #banner:hover{opacity:.96 !important}}
@media(max-width:1500px){html body #banner{opacity:.26 !important}html body #banner:hover{opacity:.96 !important}}
@media(max-width:1400px){html body #banner{display:none !important}}
@media(max-width:1500px){html body #banner{opacity:.22 !important}html body #banner:hover{opacity:.94 !important}}
@media (prefers-reduced-motion:reduce){html body .cloud-art-hero-copybox .cloud-hero-btn,html body .cloud-main-hero.cloud-art-photo-hero .cloud-art-result-card,html body .cloud-main-hero.cloud-art-photo-hero .cloud-art-result-card .art-result-mini-grid a,html body #banner,html body #banner .quick-link,html body #banner .quick-link i,html body .cloud-nav>ul>li>a,html body .nav-panel a{transition:none !important}}
@media(max-width:1500px){html body #banner{opacity:.22 !important}html body #banner:hover{opacity:.95 !important}}
@media(max-width:1500px){html body #banner{opacity:.23 !important}html body #banner:hover{opacity:.95 !important}}
@media(max-width:1500px){html body #banner{opacity:.21 !important}html body #banner:hover{opacity:.94 !important}}
@media(max-width:1400px){html body #banner{display:none !important}}
.cloud-top{height:26px;border-bottom:1px solid #f1f3f6;background:#ffffff}
.cloud-top-inner{width:1000px;height:26px;line-height:26px;margin:0 auto;text-align:right}
.cloud-top-inner a{display:inline-block;margin-left:18px;color:#A0A7B2;font-size:10px;font-weight:700;letter-spacing:0.8px}
.cloud-top-inner a:hover{color:var(--cloud-blue)}
.has-panel:after{content:"";position:absolute;left:0;top:38px;width:100%;height:20px;background:transparent}
#gotop{display:none;position:fixed;left:24px;bottom:24px;z-index:20000}
#gotop a{display:flex;align-items:center;justify-content:center;width:58px;height:58px;border-radius:50%;background:linear-gradient(135deg,#07152F 0%,#1454C8 100%);box-shadow:0 14px 28px rgba(7,21,47,0.22);position:relative;transition:transform 0.22s ease,box-shadow 0.22s ease}
#gotop a:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(7,21,47,0.28)}
#gotop img{display:none}
#gotop a:before{content:"↑";display:block;color:var(--cloud-mint);font-size:22px;line-height:1;font-weight:900;transform:translateY(-5px)}
#gotop a:after{content:"TOP";position:absolute;left:0;right:0;bottom:12px;text-align:center;color:#ffffff;font-size:9px;line-height:1;font-weight:900;letter-spacing:0.2px}

html body .cloud-nav > ul > li > a.active,
html body .cloud-nav > ul > li > a.active:hover{
  color:#07152F !important;
  background:transparent !important;
  box-shadow:none !important;
}

html body .cloud-sub-hero{
  background:
    radial-gradient(circle at 10% 42%, rgba(126,231,224,.13) 0%, rgba(126,231,224,.05) 20%, rgba(126,231,224,0) 46%),
    radial-gradient(circle at 82% 16%, rgba(123,176,255,.14) 0%, rgba(123,176,255,0) 30%),
    linear-gradient(118deg,#061327 0%, #0A234B 47%, #1450B8 100%) !important;
}

html body .cloud-sub-hero-bg{
  background:
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px) !important;
  background-size:24px 24px,24px 24px !important;
  opacity:.24 !important;
}

html body .cloud-sub-hero:before{
  background:radial-gradient(circle at 50% 50%, rgba(126,231,224,.12) 0%, rgba(126,231,224,.045) 36%, rgba(126,231,224,0) 74%) !important;
  filter:blur(10px) !important;
  opacity:.92 !important;
}

html body .cloud-sub-hero-card.class-guide-card{
  background:
    radial-gradient(circle at 84% 12%, rgba(188,245,239,.18) 0%, rgba(188,245,239,0) 24%),
    linear-gradient(180deg, rgba(8,22,48,.96) 0%, rgba(10,31,68,.95) 58%, rgba(18,67,160,.90) 100%) !important;
  border:1px solid rgba(126,231,224,.16) !important;
  box-shadow:
    0 30px 70px rgba(7,21,47,.26),
    inset 0 1px 0 rgba(255,255,255,.10),
    0 0 0 1px rgba(255,255,255,.03) !important;
}

html body .cloud-sub-hero-card.class-guide-card:before{
  background:linear-gradient(90deg, rgba(126,231,224,.90) 0%, rgba(143,211,255,.74) 58%, rgba(255,214,148,.44) 100%) !important;
  opacity:.84 !important;
}

html body .class-guide-card-label{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(126,231,224,.16) !important;
  color:#C8FBF6 !important;
}

html body .class-guide-step{
  background:rgba(255,255,255,.048) !important;
  border-color:rgba(255,255,255,.055) !important;
}

html body .step-text em{
  color:rgba(233,242,255,.74) !important;
}

html body .class-guide-chip-row{
  border-top:1px solid rgba(255,255,255,.08) !important;
}

html body .class-guide-chip-row span{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(126,231,224,.12) !important;
  color:#DFF8FF !important;
}

html body .sub-class-flow{
  opacity:.52 !important;
}

html body .class-node{
  background:rgba(255,255,255,.085) !important;
  border-color:rgba(126,231,224,.17) !important;
  color:rgba(226,247,251,.92) !important;
  box-shadow:
    0 10px 18px rgba(7,21,47,.18),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html body .class-line{
  background:linear-gradient(90deg, rgba(126,231,224,0) 0%, rgba(126,231,224,.38) 50%, rgba(126,231,224,0) 100%) !important;
  opacity:.62 !important;
}

html body .sub-art-word{
  opacity:.10 !important;
}

html body #banner{
  position:fixed !important;
  top:330px !important;
  right:0 !important;
  left:auto !important;
  margin:0 !important;
  width:72px !important;
  z-index:20000 !important;
  opacity:.24 !important;
  filter:saturate(.92) brightness(.98) !important;
  transition:opacity .25s ease,transform .25s ease,filter .25s ease !important;
  display:block !important;
}

html body #banner:hover{
  opacity:.96 !important;
  transform:translateX(-6px) !important;
  filter:saturate(1) brightness(1) !important;
}

html body #banner .quick-box{
  width:72px !important;
  border-radius:20px 0 0 20px !important;
  overflow:hidden !important;
  background:rgba(7,21,47,.78) !important;
  border:1px solid rgba(255,255,255,0.13) !important;
  border-right:0 !important;
  box-shadow:0 18px 40px rgba(7,21,47,.23) !important;
  backdrop-filter:blur(10px) !important;
  -webkit-backdrop-filter:blur(10px) !important;
}

html body #banner .quick-title{
  height:30px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#ffffff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:-0.1px !important;
  background:rgba(255,255,255,0.08) !important;
}

html body #banner .quick-link{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:4px !important;
  width:72px !important;
  height:56px !important;
  margin:0 !important;
  padding:0 !important;
  color:rgba(255,255,255,0.78) !important;
  border-top:1px solid rgba(255,255,255,0.09) !important;
  font-size:10px !important;
  line-height:1.18 !important;
  font-weight:800 !important;
  letter-spacing:-0.45px !important;
  text-align:center !important;
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  transition:all 0.18s ease !important;
  text-decoration:none !important;
}

html body #banner .quick-link i{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:24px !important;
  height:24px !important;
  border-radius:50% !important;
  background:rgba(126,231,224,0.13) !important;
  color:var(--cloud-mint) !important;
  font-style:normal !important;
  font-size:12px !important;
  font-weight:900 !important;
}

html body #banner .quick-link:hover,
html body #banner .quick-link.current{
  color:#ffffff !important;
  background:rgba(126,231,224,0.18) !important;
}

html body #banner .quick-link:hover i,
html body #banner .quick-link.current i{
  background:var(--cloud-mint) !important;
  color:var(--cloud-navy) !important;
}

@media (max-width:1400px){
  html body #banner{
    display:none !important;
  }
}

html body .cloud-sub-hero-inner{
  align-items:center !important;
}

html body .cloud-sub-hero-card.class-guide-card,
html body .cloud-sub-hero-card.class-guide-card:hover{
  will-change:transform !important;
}

html body .cloud-sub-hero-card.class-guide-card{
  transform:translateY(6px) !important;
  box-shadow:
    0 36px 78px rgba(7,21,47,.30),
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px rgba(255,255,255,.04) !important;
}

html body .cloud-sub-hero-card.class-guide-card:hover,
html body .cloud-hero-card-motion:hover .cloud-sub-hero-card.class-guide-card{
  transform:translateY(3px) !important;
}

html body .class-guide-chip-row{
  margin-top:14px !important;
  padding-top:13px !important;
  gap:7px !important;
}

html body .class-guide-chip-row span{
  min-width:34px !important;
}

html body .cloud-nav > ul > li.has-panel > a,
html body .cloud-nav > ul > li > a{
  position:relative !important;
  overflow:hidden !important;
}

html body .cloud-nav > ul > li.has-panel > a:before,
html body .cloud-nav > ul > li > a:before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:6px !important;
  width:34px !important;
  height:2px !important;
  border-radius:999px !important;
  background:linear-gradient(90deg,rgba(20,84,200,.88),rgba(126,231,224,.92)) !important;
  opacity:0 !important;
  transform:translateX(-50%) scaleX(.45) translateY(3px) !important;
  transform-origin:center !important;
  transition:
    opacity .22s ease,
    transform .22s cubic-bezier(.22,1,.36,1) !important;
  pointer-events:none !important;
  display:block !important;
}

html body .cloud-nav > ul > li.has-panel:hover > a:before,
html body .cloud-nav > ul > li.has-panel > a:hover:before,
html body .cloud-nav > ul > li > a:hover:before{
  opacity:.92 !important;
  width:34px !important;
  transform:translateX(-50%) scaleX(1) translateY(0) !important;
}

html body .cloud-nav > ul > li.has-panel > a.active:before,
html body .cloud-nav > ul > li > a.active:before{
  content:"" !important;
  display:block !important;
  opacity:.76 !important;
  width:29px !important;
  height:2px !important;
  bottom:6px !important;
  background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(126,231,224,.82)) !important;
  transform:translateX(-50%) scaleX(1) translateY(0) !important;
  box-shadow:0 0 7px rgba(126,231,224,.15) !important;
}

html body .cloud-nav > ul > li.has-panel:hover > a.active:before,
html body .cloud-nav > ul > li.has-panel > a.active:hover:before,
html body .cloud-nav > ul > li > a.active:hover:before{
  opacity:.88 !important;
  width:32px !important;
  background:linear-gradient(90deg,rgba(255,255,255,.50),rgba(126,231,224,.90)) !important;
}

html body .nav-panel a{
  position:relative !important;
  overflow:hidden !important;
}

html body .nav-panel a:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:10px !important;
  bottom:10px !important;
  width:2px !important;
  height:auto !important;
  border-radius:999px !important;
  background:linear-gradient(180deg,var(--cloud-blue),var(--cloud-mint)) !important;
  opacity:0 !important;
  transform:translateX(-4px) !important;
  transition:
    opacity .18s ease,
    transform .18s cubic-bezier(.22,1,.36,1) !important;
  pointer-events:none !important;
  display:block !important;
}

html body .nav-panel a:hover:before{
  opacity:.88 !important;
  transform:translateX(0) !important;
}

html body .nav-panel a:after{
  content:"→" !important;
  opacity:0 !important;
  transform:translateX(-4px) !important;
  color:var(--cloud-mint) !important;
  transition:all .18s ease !important;
}

html body .nav-panel a:hover:after{
  opacity:1 !important;
  transform:translateX(0) !important;
}

html body .cloud-top-inner a[onclick]{
  cursor:pointer !important;
}

html body section.cloud-sub-hero,
html body .cloud-sub-hero{
  display:block !important;
  position:relative !important;
  width:100% !important;
  min-width:1100px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

html body .cloud-sub-hero-bg,
html body .cloud-sub-visual{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  padding:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

html body .cloud-sub-hero-inner{
  position:relative !important;
  z-index:20 !important;
  width:1000px !important;
  height:662px !important;
  min-height:662px !important;
  max-height:662px !important;
  margin:0 auto !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:52px !important;
  transform:none !important;
  box-sizing:border-box !important;
}

html body .cloud-sub-hero .cloud-hero-copy-motion{
  transform:translateY(-10px) !important;
}

html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px, 18px) !important;
}

html body .cloud-sub-hero-card.class-guide-card,
html body .cloud-sub-hero-card.class-guide-card:hover{
  transform:none !important;
}

html body .sub-class-flow{
  top:146px !important;
  right:126px !important;
  opacity:.135 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
}

html body .sub-art-word{
  right:2.8% !important;
  bottom:34px !important;
  opacity:.11 !important;
}

html body .sub-light-line{
  top:57% !important;
}

html body .cloud-subnav-wrap{
  width:100% ;
  min-width:1100px ;
  height:auto ;
  min-height:0 ;
  max-height:none ;
  margin:0 ;
  padding:0 ;
  overflow:visible ;
  position:relative ;
  z-index:40 ;
  transform:none ;
  transition:none ;
  animation:none ;
  background:#ffffff !important;
  border-bottom:1px solid #edf1f6 !important;
  box-shadow:none !important;
}

html body .cloud-subnav{
  width:1000px ;
  margin:0 auto ;
  display:flex ;
  align-items:center ;
  gap:22px ;
  padding:18px 0 ;
  height:auto ;
  min-height:0 ;
  max-height:none ;
  overflow:visible ;
  transform:none ;
  transition:none ;
  animation:none ;
  box-sizing:border-box ;
}

html body .cloud-subnav-title{
  display:block ;
  flex-shrink:0 ;
  color:var(--cloud-navy) !important;
  font-size:16px ;
  font-weight:900 ;
  letter-spacing:-.6px ;
  position:relative ;
  padding-left:22px ;
  padding-right:18px ;
  height:auto ;
  line-height:normal !important;
  transform:none ;
}

html body .cloud-subnav-title:before{
  display:block !important;
  content:"" ;
  position:absolute ;
  left:0 ;
  top:50% ;
  width:14px ;
  height:14px ;
  border-radius:50% ;
  transform:translateY(-50%) ;
  background:radial-gradient(circle at 35% 35%,#ffffff 0 2px,transparent 3px),linear-gradient(135deg,var(--cloud-blue),var(--cloud-mint)) !important;
  box-shadow:0 6px 14px rgba(20,84,200,.18),0 0 0 4px rgba(126,231,224,.10) !important;
}

html body .cloud-subnav-title:after{
  content:"" ;
  position:absolute ;
  right:0 ;
  top:50% ;
  width:1px ;
  height:16px ;
  background:#d8dee8 ;
  transform:translateY(-50%) ;
}

html body .cloud-subnav ul{
  margin:0 ;
  padding:0 ;
  list-style:none ;
  display:flex ;
  align-items:center ;
  gap:10px ;
  flex-wrap:wrap ;
}

html body .cloud-subnav li{
  margin:0 ;
  padding:0 ;
}

html body .cloud-subnav a{
  display:block !important;
  padding:9px 16px !important;
  height:auto !important;
  line-height:normal !important;
  border-radius:999px !important;
  color:#4b5563 !important;
  background:#f5f7fb !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.35px !important;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease !important;
  border:0 !important;
  box-shadow:none !important;
  transform:none !important;
}

html body .cloud-subnav a:hover{
  background:#ecf3ff !important;
  color:var(--cloud-blue) !important;
  transform:none !important;
  box-shadow:none !important;
}

html body .cloud-subnav a.active{
  background:var(--cloud-navy) !important;
  color:#ffffff !important;
  box-shadow:0 8px 18px rgba(7,21,47,.12) !important;
  transform:none !important;
}

html body .cloud-subnav-wrap{
  width:100% !important;
  min-width:1100px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
  position:relative !important;
  z-index:40 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(126,231,224,.055) 0%, rgba(126,231,224,.018) 30%, rgba(126,231,224,0) 62%),
    linear-gradient(180deg,#FBFDFF 0%,#FFFFFF 100%) !important;
  border-top:1px solid rgba(126,231,224,.075) !important;
  border-bottom:1px solid rgba(229,234,241,.92) !important;
  box-shadow:
    0 -1px 0 rgba(126,231,224,.08),
    0 16px 34px rgba(15,23,42,.035) !important;
}

html body .cloud-subnav{
  width:1000px !important;
  margin:0 auto !important;
  display:flex !important;
  align-items:center !important;
  gap:22px !important;
  padding:18px 0 !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:visible !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
  box-sizing:border-box !important;
}

html body .cloud-subnav ul{
  margin:0 !important;
  padding:0 !important;
  list-style:none !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  flex-wrap:wrap !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  box-sizing:border-box !important;
}

html body .cloud-subnav li{
  margin:0 !important;
  padding:0 !important;
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  line-height:normal !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  box-sizing:border-box !important;
}

html body .cloud-subnav-title{
  position:relative !important;
  display:block !important;
  flex-shrink:0 !important;
  padding-left:22px !important;
  padding-right:18px !important;
  color:#07152F !important;
  font-size:16px !important;
  line-height:1.2 !important;
  font-weight:900 !important;
  letter-spacing:-.6px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin:0 !important;
  transform:none !important;
  transition:none !important;
  animation:none !important;
  text-shadow:0 1px 0 rgba(255,255,255,.86) !important;
  box-sizing:border-box !important;
}

html body .cloud-subnav-title:before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:14px !important;
  height:14px !important;
  border-radius:50% !important;
  transform:translateY(-50%) !important;
  background:
    radial-gradient(circle at 35% 35%,#fff 0 2px,transparent 3px),
    linear-gradient(135deg,#1454C8,#7EE7E0) !important;
  box-shadow:
    0 6px 14px rgba(20,84,200,.18),
    0 0 0 4px rgba(126,231,224,.10) !important;
}

html body .cloud-subnav-title:after{
  content:"" !important;
  position:absolute !important;
  right:0 !important;
  top:50% !important;
  width:1px !important;
  height:16px !important;
  background:#d8dee8 !important;
  transform:translateY(-50%) !important;
}

html body .cloud-subnav a,
html body .cloud-subnav a:link,
html body .cloud-subnav a:visited,
html body .cloud-subnav a:hover,
html body .cloud-subnav a:focus,
html body .cloud-subnav a:focus-visible,
html body .cloud-subnav a:active,
html body .cloud-subnav a.active,
html body .cloud-subnav a.active:link,
html body .cloud-subnav a.active:visited,
html body .cloud-subnav a.active:hover,
html body .cloud-subnav a.active:focus,
html body .cloud-subnav a.active:focus-visible,
html body .cloud-subnav a.active:active{
  display:block !important;
  padding:9px 16px !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  line-height:1.2 !important;
  border-radius:999px !important;
  font-size:13px !important;
  font-weight:800 !important;
  letter-spacing:-.35px !important;
  white-space:nowrap !important;
  box-sizing:border-box !important;
  margin:0 !important;
  transform:none !important;
  outline:none !important;
  text-decoration:none !important;
  transition:none !important;
  animation:none !important;
  will-change:auto !important;
  border:1px solid transparent !important;
  -webkit-tap-highlight-color:transparent !important;
  -webkit-focus-ring-color:transparent !important;
}

html body .cloud-subnav a,
html body .cloud-subnav a:link,
html body .cloud-subnav a:visited{
  color:#4b5563 !important;
  background:rgba(245,247,251,.72) !important;
  box-shadow:none !important;
}

html body .cloud-subnav a:not(.active):hover,
html body .cloud-subnav a:not(.active):focus,
html body .cloud-subnav a:not(.active):focus-visible,
html body .cloud-subnav a:not(.active):active{
  color:#1454C8 !important;
  background:rgba(238,244,255,.78) !important;
  box-shadow:none !important;
}

html body .cloud-subnav a.active,
html body .cloud-subnav a.active:link,
html body .cloud-subnav a.active:visited,
html body .cloud-subnav a.active:hover,
html body .cloud-subnav a.active:focus,
html body .cloud-subnav a.active:focus-visible,
html body .cloud-subnav a.active:active{
  color:#ffffff !important;
  background:linear-gradient(135deg,#07152F 0%,#0B2454 72%,#1454C8 100%) !important;
  box-shadow:0 8px 17px rgba(7,21,47,.13) !important;
}

html body .cloud-subnav a:before,
html body .cloud-subnav a:after,
html body .cloud-subnav a:hover:before,
html body .cloud-subnav a:hover:after,
html body .cloud-subnav a:focus:before,
html body .cloud-subnav a:focus:after,
html body .cloud-subnav a:active:before,
html body .cloud-subnav a:active:after,
html body .cloud-subnav a.active:before,
html body .cloud-subnav a.active:after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  border:0 !important;
  box-shadow:none !important;
  background:none !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
  pointer-events:none !important;
}

html body .cloud-subnav a::-moz-focus-inner{
  border:0 !important;
  padding:0 !important;
}

html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-label,
html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-title-premium,
html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-copy p,
html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-meta,
html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-buttons{
  opacity:0 !important;
  transform:translateY(14px) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
  will-change:opacity,transform !important;
}

html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-copy-motion{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(-10px) !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
}

html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion{
  opacity:0 !important;
  transform:translate(2px,44px) scale(.97) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
  will-change:opacity,transform !important;
}

html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-label,
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-title-premium,
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-copy p,
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-meta,
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-buttons{
  opacity:1 !important;
  transform:translateY(0) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition-property:opacity,transform !important;
  transition-duration:.68s !important;
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
}

html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-label{transition-delay:.12s !important;}
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-title-premium{transition-delay:.22s !important;}
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-copy p{transition-delay:.34s !important;}
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-meta{transition-delay:.46s !important;}
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-sub-hero-buttons{transition-delay:.56s !important;}

html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion{
  opacity:1 !important;
  transform:translate(-14px,22px) scale(1) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition-property:opacity,transform !important;
  transition-duration:.82s !important;
  transition-delay:.18s !important;
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
  will-change:opacity,transform !important;
}

html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-sub-label,
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-title-premium,
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-sub-hero-copy p,
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-meta,
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-sub-hero-buttons{
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  transform:translateY(0) !important;
  animation:none !important;
}

html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-copy-motion{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateY(-10px) !important;
  filter:none !important;
  animation:none !important;
}

html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-card-motion:hover,
html.sub14-hero-entrance-run body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px,18px) scale(1) !important;
}

html.sub14-hero-entrance-prep body .cloud-sub-hero .sub-class-flow,
html.sub14-hero-entrance-run body .cloud-sub-hero .sub-class-flow,
html.sub14-hero-entrance-done body .cloud-sub-hero .sub-class-flow{
  animation:none !important;
  transition:none !important;
}

@media (prefers-reduced-motion:reduce){
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-sub-label,
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-hero-title-premium,
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-sub-hero-copy p,
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-hero-meta,
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-sub-hero-buttons,
  html.sub14-hero-entrance-prep body .cloud-sub-hero .cloud-hero-card-motion{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion{
  opacity:0 !important;
  transform:translate(-14px,44px) scale(.97) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition:none !important;
  will-change:opacity,transform !important;
}
html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion{
  opacity:1 !important;
  transform:translate(-14px,26px) scale(1) !important;
  visibility:visible !important;
  filter:none !important;
  animation:none !important;
  transition-property:opacity,transform !important;
  transition-duration:.82s !important;
  transition-delay:.18s !important;
  transition-timing-function:cubic-bezier(.22,1,.36,1) !important;
  will-change:opacity,transform !important;
}
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-card-motion,
html body .cloud-sub-hero .cloud-hero-card-motion{
  opacity:1 !important;
  visibility:visible !important;
  transform:translate(-14px,26px) scale(1) !important;
  filter:none !important;
  animation:none !important;
}
html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-card-motion:hover,
html.sub14-hero-entrance-run body .cloud-sub-hero .cloud-hero-card-motion:hover,
html body .cloud-sub-hero .cloud-hero-card-motion:hover{
  transform:translate(-14px,22px) scale(1) !important;
}
@media (max-width:1280px){
  html.sub14-hero-entrance-prep body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion{
    transform:translate(-10px,44px) scale(.97) !important;
  }
  html.sub14-hero-entrance-run body:not(.is-cloud-navigating) .cloud-sub-hero .cloud-hero-card-motion,
  html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-card-motion,
  html body .cloud-sub-hero .cloud-hero-card-motion{
    transform:translate(-10px,26px) scale(1) !important;
  }
  html.sub14-hero-entrance-done body .cloud-sub-hero .cloud-hero-card-motion:hover,
  html.sub14-hero-entrance-run body .cloud-sub-hero .cloud-hero-card-motion:hover,
  html body .cloud-sub-hero .cloud-hero-card-motion:hover{
    transform:translate(-10px,22px) scale(1) !important;
  }
}

html body #gotop{
  display:none;
  position:fixed !important;
  left:24px !important;
  bottom:24px !important;
  z-index:20000 !important;
  width:auto !important;
  height:auto !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
html body #gotop a{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:2px !important;
  width:58px !important;
  height:58px !important;
  border-radius:50% !important;
  background:linear-gradient(135deg,#07152F 0%,#1454C8 100%) !important;
  box-shadow:0 14px 28px rgba(7,21,47,0.22) !important;
  text-decoration:none !important;
  position:relative !important;
  transition:transform 0.22s ease,box-shadow 0.22s ease !important;
}
html body #gotop a:hover{
  transform:translateY(-3px) !important;
  box-shadow:0 18px 34px rgba(7,21,47,0.28) !important;
}
html body #gotop img{
  display:none !important;
}
html body #gotop a:before,
html body #gotop a:after{
  content:none !important;
  display:none !important;
}
html body #gotop .top-arrow{
  display:block !important;
  color:#7EE7E0 !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:900 !important;
  transform:none !important;
}
html body #gotop .top-text{
  display:block !important;
  color:#ffffff !important;
  font-size:9px !important;
  line-height:1 !important;
  font-weight:900 !important;
  letter-spacing:0.2px !important;
}