.plc60-home{
  background:#071d38;
}

.plc60-hero{
  padding:42px 0 34px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.plc60-hero-frame{
  position:relative;
  width:720px;
  height:690px;
  max-width:calc(100vw - 40px);
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 55%,rgba(62,119,181,.20),transparent 45%),
    #061f3f;
  border:0;
}

.plc60-hero-frame:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse at center,
      transparent 25%,
      rgba(0,0,0,.15)
    );
  pointer-events:none;
}


/* ========================================
   HERO TITLE
   ======================================== */

.plc60-hero-title{
  position:absolute;
  top:26px;
  left:0;
  width:100%;
  text-align:center;
  color:#ffd43f;
  font-size:38px;
  font-weight:800;
  z-index:5;
}

.plc60-hero-since{
  position:absolute;
  top:83px;
  left:0;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;
  color:#fff;
  font:italic 700 25px Georgia,serif;
  z-index:5;
}

.plc60-hero-since span{
  width:64px;
  height:3px;
  background:#ffd43f;
}


/* ========================================
   WATERMARK
   ======================================== */

.plc60-watermark{
  position:absolute;
  inset:135px 0 0;
  text-align:center;
  font:900 350px/1 Georgia,serif;
  color:rgba(85,135,187,.12);
  z-index:1;
}


/* ========================================
   CIRCLES
   ======================================== */

.plc60-node{
  position:absolute;
  width:104px;
  height:104px;
  border-radius:50%;
  background:#63b5ee;
  border:2px solid rgba(255,255,255,.85);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
  color:#fff;
  font-size:14px;
  font-weight:800;

  z-index:4;

  box-shadow:0 2px 5px rgba(0,0,0,.2);

  text-decoration:none !important;
}

.plc60-node b{
  font-size:22px;
  line-height:1;
  margin-bottom:8px;
}

.plc60-node span{
  text-decoration:none !important;
}

.plc60-node *{
  text-decoration:none !important;
}


/* ========================================
   DEFAULT CIRCLE POSITIONS
   ======================================== */

.node-tj{
  left:205px;
  top:150px;
}

.node-sat{
  left:411px;
  top:150px;
}

.node-elite{
  left:308px;
  top:300px;
}

.node-tutor{
  left:205px;
  top:500px;
}

.node-summer{
  left:411px;
  top:500px;
}


/* ========================================
   CONNECTION LINES
   ======================================== */

.plc60-lines{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}

.plc60-lines .line{
  position:absolute;
  height:3px;
  background:#fff;
  box-shadow:0 0 5px rgba(255,255,255,.65);
  transform-origin:left center;
}


/* Default lines */

.line-tl{
  width:177px;
  left:285px;
  top:249px;
  transform:rotate(58deg);
}

.line-tr{
  width:177px;
  left:419px;
  top:249px;
  transform:rotate(122deg);
}

.line-bl{
  width:180px;
  left:360px;
  top:396px;
  transform:rotate(122deg);
}

.line-br{
  width:180px;
  left:360px;
  top:396px;
  transform:rotate(58deg);
}


/* ========================================
   COURSE CARD
   ======================================== */

.plc60-course-card{
  width:370px;
  min-height:205px;
  margin-top:-55px !important;
  background:#284f88;
  border:2px solid #d5ae28;
  border-radius:12px;
  text-align:center;
  padding:24px 20px;
  box-shadow:0 12px 25px rgba(0,0,0,.3);
}

.plc60-course-button{
  display:block;
  width:170px;
  margin:0 auto 24px;
  background:#19c552;
  color:#fff;
  border-radius:20px;
  padding:10px;
  font-weight:800;
}

.plc60-course-card h2{
  margin:0 0 10px;
  color:#ffd43f;
  font-size:20px;
}

.plc60-course-card p{
  margin:5px;
  font-size:13px;
}


/* ========================================
   MIT SECTION
   ======================================== */

.plc60-mit{
  background:#214c84;
  text-align:center;
  padding:10px 20px 45px;
}

.plc60-mit-card{
  max-width:560px;
  margin:auto;
  background:#2b5793;
  border-radius:12px;
  padding:26px;
  box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.plc60-mit-card h2{
  color:#ffd43f;
  margin:0 0 8px;
  font-size:25px;
}

.plc60-mit-card p{
  font-size:13px;
}

.plc60-mit-card a{
  display:inline-block;
  margin-top:10px;
  background:#ffd43f;
  color:#153b68;
  padding:10px 28px;
  border-radius:22px;
  font-weight:800;
  font-size:12px;
}


/* ========================================
   PILLS
   ======================================== */

.plc60-pills{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin:18px auto 32px;
}

.plc60-pills a{
  border:1px solid #9ec1e8;
  border-radius:18px;
  padding:7px 14px;
  font-size:10px;
}


/* ========================================
   BRANCHES
   ======================================== */

.plc60-branches-title{
  font-size:15px;
  margin:18px;
}

.plc60-branches{
  max-width:600px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

.plc60-branches>div+div{
  border-left:1px solid rgba(255,255,255,.25);
}

.plc60-branches strong{
  color:#ffd43f;
}

.plc60-branches p{
  font-size:11px;
  line-height:1.6;
}

.plc60-branches a{
  color:#ffd43f;
  font-size:10px;
}

.plc60-contact{
  border-top:1px solid rgba(255,255,255,.2);
  max-width:500px;
  margin:24px auto 0;
  padding-top:18px;
  color:#ffd43f;
  font-weight:700;
}


/* ========================================
   MOBILE HERO SCALING
   ------------------------------------------------
   Mobile switching is handled at the bottom of
   this file so there is only ONE mobile breakpoint.
   ======================================== */


/* ========================================
   PLC60 RESPONSIVE DESKTOP / TABLET
   769px 이상
   5 CIRCLES + LINES + TITLE
   하나의 반응형 시스템으로 통합
   ======================================== */

@media (min-width:1101px){

.plc60-hero-frame{
    width:min(720px,75vw) !important;
    height:auto !important;
    aspect-ratio:720 / 690 !important;
    max-width:none !important;
    overflow:hidden !important;

    container-type:inline-size !important;
}

.plc60-hero-title{
    top:-1px !important;
    transform:none !important;

    font-size:clamp(28px, 3.3vw, 50px) !important;
    line-height:1.1 !important;

    white-space:nowrap !important;
}

  .plc60-hero-since{
    top:65px !important;
    transform:none !important;

    font-size:clamp(16px, 2.78cqw, 20px) !important;
}

  .plc60-node{
    width:18% !important;
    height:auto !important;
    aspect-ratio:1 / 1 !important;
    padding:8px !important;
    box-sizing:border-box !important;
    font-size:16px !important;
    line-height:1.05 !important;
    transform:none !important;
    overflow:hidden !important;
    text-align:center !important;
  }

  .plc60-node b{
    font-size:24px !important;
    line-height:1 !important;
    margin-bottom:8px !important;
    flex-shrink:0 !important;
  }

  .plc60-node span{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.30 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    word-break:normal !important;
    text-align:center !important;
  }

  .plc60-node *{
    max-width:100% !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
  }

  .node-tj{
    left:28.47% !important;
    top:16.67% !important;
  }

  .node-sat{
    left:57.08% !important;
    top:16.67% !important;
  }

  .node-elite{
    left:42.78% !important;
    top:38.41% !important;
  }

  .node-tutor{
    left:28.47% !important;
    top:57.97% !important;
  }

  .node-summer{
    left:57.08% !important;
    top:57.97% !important;
  }

  .plc60-lines{
    position:absolute !important;
    inset:0 !important;
    transform:none !important;
    z-index:3 !important;
    pointer-events:none !important;
  }

  .plc60-lines .line{
    position:absolute !important;
    height:3px !important;
    background:#fff !important;
    box-shadow:0 0 5px rgba(255,255,255,.65) !important;
    transform-origin:left center !important;
  }

  .line-tl{
    width:10.83% !important;
    left:39.72% !important;
    top:30.43% !important;
    transform:rotate(55.5deg) !important;
  }

  .line-tr{
    width:10.83% !important;
    left:60.28% !important;
    top:30.43% !important;
    transform:rotate(124.5deg) !important;
  }

  .line-bl{
    width:14.31% !important;
    left:45.69% !important;
    top:51.88% !important;
    transform:rotate(127.3deg) !important;
  }

  .line-br{
    width:14.31% !important;
    left:54.31% !important;
    top:51.88% !important;
    transform:rotate(52.7deg) !important;
  }

  .plc60-node.node-tj span{
    white-space:nowrap !important;
    width:100% !important;
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.30 !important;
    letter-spacing:.5px !important;
    text-align:center !important;
  }

  .plc60-node.node-sat span{
    width:100% !important;
    max-width:100% !important;
    font-size:15px !important;
    line-height:1.30 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  .course-register{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:170px !important;
    height:44px !important;
    margin:0 auto 24px !important;
    padding:0 !important;
    background:#19c552 !important;
    color:#fff !important;
    border-radius:22px !important;
    border:none !important;
    font-family:Arial,sans-serif !important;
    font-size:17px !important;
    font-weight:700 !important;
    text-decoration:none !important;
    box-sizing:border-box !important;
    position:relative !important;
    z-index:20 !important;
  }

  .course-register:hover{
    color:#fff !important;
    text-decoration:none !important;
    transform:translateY(-3px) !important;
    box-shadow:0 6px 14px rgba(0,0,0,.25) !important;
  }
}







/* =========================================================
   PLC60 — RESPONSIVE DESKTOP SCALE
   769px 이상 ~ Desktop

   100% 기준: 현재 정상적으로 보이는 Desktop 디자인
   화면이 작아질수록 전체 Desktop을 함께 축소
   1100px 이하에서는 기존 Mobile CSS 사용
   ========================================================= */


/* ---------------------------------------------------------
   1500px 이상
   정상 100%
   --------------------------------------------------------- */

@media (min-width:1500px){

    .plc60-header,
    .plc60-topnav,
    .plc60-hero{
        zoom:1 !important;
    }

}


/* ---------------------------------------------------------
   1300px ~ 1499px
   약 95%
   --------------------------------------------------------- */

@media (min-width:1300px) and (max-width:1499px){

    .plc60-header,
    .plc60-topnav,
    .plc60-hero{
        zoom:95% !important;
    }

}


/* ---------------------------------------------------------
   1150px ~ 1299px
   약 90%
   --------------------------------------------------------- */

@media (min-width:1150px) and (max-width:1299px){

    .plc60-header,
    .plc60-topnav,
    .plc60-hero{
        zoom:90% !important;
    }

}


/* ---------------------------------------------------------
   1000px ~ 1149px
   약 85%
   --------------------------------------------------------- */

@media (min-width:1101px) and (max-width:1149px){

    .plc60-header,
    .plc60-topnav,
    .plc60-hero{
        zoom:85% !important;
    }

}


/* ==========================================================
   PLC60 — MOBILE / DESKTOP SWITCH
   1100px 이하 → 현재 운영 중인 모바일
   1101px 이상 → 현재 PLC60 데스크톱
   ========================================================== */

/* 기본: 데스크톱 */
.hero-mobile {
    display: none !important;
}

.plc60-hero {
    display: block !important;
}


/* ==========================================================
   MOBILE — 1100px 이하
   ========================================================== */

@media (max-width: 1100px) {

    /* PLC60 데스크톱 Hero 숨김 */
    .plc60-hero {
        display: none !important;
    }

    /* 현재 운영 중인 모바일 Hero 표시 */
    .hero-mobile {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
}


/* ==========================================================
   HORIZONTAL OVERFLOW 방지
   ========================================================== */

html,
body {
    overflow-x: hidden !important;
}

.plc60-home {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* =========================================================
   PLC60 — FINAL TOP MENU ONE-LINE OVERRIDE
   Desktop only. Do not affect <=1100px mobile.
   ========================================================= */
@media (min-width:1101px){

  .plc60-topnav{
    white-space:nowrap !important;
    overflow:visible !important;
    text-align:center !important;
  }

  .plc60-topnav ul{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    width:max-content !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding:0 !important;
    justify-content:center !important;
    align-items:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
  }

  .plc60-topnav li{
    display:block !important;
    float:none !important;
    flex:0 0 auto !important;
    flex-shrink:0 !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
  }

  .plc60-topnav li a{
    display:block !important;
    width:auto !important;
    max-width:none !important;
    white-space:nowrap !important;
    word-break:normal !important;
    overflow:visible !important;
  }
}


/* =========================================================
   PLC60 — ACTUAL VIEWPORT FIX
   IMPORTANT:
   CSS cannot detect "15-inch" vs "21-inch" monitors.
   It detects the browser viewport width in CSS pixels.
   The current 15-inch test is reporting a viewport wider
   than 1500px, so the old 1500px rule was incorrectly
   treating it as the full-size 21-inch layout.
   ========================================================= */

/* 1500–1799 CSS px: treat as narrow desktop / 15-inch class */
@media (min-width:1500px) and (max-width:1799px){

    .plc60-header{
        zoom:82% !important;
        position:relative !important;
        overflow:visible !important;
    }

    .plc60-topnav{
        zoom:68% !important;
        width:100% !important;
        max-width:none !important;
        height:50px !important;
        min-height:50px !important;
        margin:0 !important;
        padding:0 !important;
        white-space:nowrap !important;
        overflow:visible !important;
        text-align:center !important;
    }

    .plc60-topnav ul{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        width:max-content !important;
        max-width:none !important;
        margin:0 auto !important;
        padding:0 !important;
        justify-content:center !important;
        align-items:center !important;
        white-space:nowrap !important;
        overflow:visible !important;
    }

    .plc60-topnav li{
        display:block !important;
        float:none !important;
        flex:0 0 auto !important;
        flex-shrink:0 !important;
        width:auto !important;
        max-width:none !important;
        margin:0 4px !important;
        padding:0 !important;
        white-space:nowrap !important;
    }

    .plc60-topnav li a{
        display:block !important;
        width:auto !important;
        max-width:none !important;
        font-size:17px !important;
        line-height:1 !important;
        white-space:nowrap !important;
        word-break:normal !important;
        overflow:visible !important;
    }

    .plc60-hero{
        zoom:82% !important;
        overflow:visible !important;
    }

    .hero-wrap{
        overflow:visible !important;
    }

    .hero-main-title{
        top:35px !important;
    }

    .hero2-tj,
    .hero2-sat{
        top:225px !important;
    }

    .hero2-elite{
        top:330px !important;
    }

    .hero2-math,
    .hero2-summer{
        top:435px !important;
    }

    .hero2-lines{
        top:35px !important;
    }

    .hero2-lines svg{
        overflow:visible !important;
    }

    .plc-float-register{
        position:absolute !important;
        top:540px !important;
        right:0 !important;
        left:auto !important;
        bottom:auto !important;
        transform:none !important;
        z-index:100 !important;
    }
}

/* 1800px+ = true large desktop / 21-inch class */
@media (min-width:1800px){

    .plc60-header,
    .plc60-topnav,
    .plc60-hero{
        zoom:1 !important;
    }

    .plc60-topnav{
        white-space:nowrap !important;
        overflow:visible !important;
    }

    .plc60-topnav ul{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        width:max-content !important;
        max-width:none !important;
        margin:0 auto !important;
        padding:0 !important;
        justify-content:center !important;
        align-items:center !important;
        white-space:nowrap !important;
    }

    .plc60-topnav li{
        flex:0 0 auto !important;
        white-space:nowrap !important;
    }
}

/* ========================================
   PLC60 - FLOATING REGISTER BUTTON REMOVE
   ======================================== */

.plc-float-register,
.plc-float-register:hover,
.plc-float-register::before {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ========================================
   PLC60 - FINAL HARD REMOVE
   Remove floating Register button even if
   an older stylesheet is loaded later.
   ======================================== */
.plc-float-register,
.floating-register {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    position:absolute !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}