/* ====================================================
pc
==================================================== */
/* common */
* {word-break:keep-all;}
img {display:inline;max-width: initial;}
table td, table th {vertical-align: middle;}
#wrapper {min-width:initial}
.ta-hide {display:inline-block;}
.mo-hide {display:inline-block;}
.pc-hide {display:none;}
.visually-hidden {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
#footer {padding:100px 0;}
.high-school-wrap {overflow:hidden;}
.high-school-wrap .inner {width:1200px;margin:0 auto;box-sizing: border-box;}

/* visual */
.visual-wrap {background:url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/high_school/bg.jpg') repeat-x center top;}
.visual-wrap .inner {padding:95px 0 120px;margin:0 auto;padding:auto 0!important;}
.visual-wrap .tit {margin-left:-50px;}
.visual-wrap .visual .v-tit {animation:fadeIn 1s .5s both;}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* contents */
.high-school-wrap .top-box {padding-bottom:clamp(60px, 10vw, 120px);background:#000540;text-align: center;}
.high-school-wrap .top-box * {color:#fff}
.high-school-wrap .top-box .tit {padding-top:clamp(60px, 10vw, 120px);padding-bottom:clamp(60px, 6vw, 80px);line-height: 140%;font-size:clamp(16px, 2.6vw, 32px)}
.high-school-wrap .top-box .tit strong {display:block;padding-top:clamp(5px, 1vw, 10px);font-weight: 900;line-height: 130%;font-size:clamp(22px, 4vw, 48px)}

/* top-box */
.high-school-wrap .top-box .curri-box {display: flex;flex-wrap: wrap;gap: 24px;justify-content:center}
.high-school-wrap .top-box .curri-box li {flex: 0 0 calc(25% - 18px);padding:clamp(30px, 4vw, 50px) 1.7%;border-radius: 10px;
background: linear-gradient(180deg, rgba(0, 101, 216, 0.40) 0%, rgba(0, 5, 64, 0.40) 100%);box-sizing: border-box;color:#859FF3;font-size:clamp(12px, 2.1.5vw, 18px);font-weight: 400;line-height: 140%;}
.high-school-wrap .top-box .curri-box li span {display: inline-flex;margin-bottom:clamp(12px, 1.5vw, 18px);padding: 2px 18px;justify-content: center;align-items: center;border-radius: 30px;border: 2px solid #FF7234;font-size: clamp(14px, 1.5vw, 18px);font-style: normal;font-weight: 700;line-height: 140%;color:#FF7234}
.high-school-wrap .top-box .curri-box li strong {display: block;margin-bottom:clamp(12px, 1.5vw, 18px);font-size:clamp(18px, 2.6vw, 32px);font-weight: 800;line-height: 140%;}

/* high_scroe common */
.high-score {padding:clamp(60px, 10vw, 120px) 0;}
.high-score:nth-child(2n) {background:#F6F8F9}
.high-score .inner {display: flex;justify-content:space-around;}
.high-score .info {width:64%}
.high-score .tit {margin-bottom:clamp(40px, 5vw, 60px);color: #000;font-size:clamp(16px, 2vw, 26px);font-weight: 400;line-height: 140%;letter-spacing: -0.52px;}
.high-score .tit span {display:block;font-size:clamp(16px, 2vw, 26px);font-style: normal;font-weight: 900;line-height: 130%;letter-spacing: -0.52px;color:#FF7234;padding-bottom:clamp(10px, 1vw, 16px);}
.high-score .tit strong {display:block;color: #000;font-size:clamp(26px, 3.7vw, 46px);font-weight: 800;line-height: 120%;}

.high-score ol.list-dot li {position:relative;padding-left:10px;color: #555;font-weight: 400;word-break:keep-all;line-height: 150%;}
.high-score ol.list-dot li::before {content:"กค";position:absolute;top:0;left:0}

.high-score .info .s-txt {margin-top:10px;text-align: center;color: rgba(0, 0, 0, 0.40);font-size: clamp(11px, 1vw, 15px);font-weight: 400;line-height: 140%;letter-spacing: -0.15px;}
.high-score .list-step {display:flex;flex-wrap:wrap;align-items: center;margin-bottom: 10px;border-radius: 10px;padding:30px clamp(5%, 5.5vw, 70px);border: 1px solid #FF7234;box-sizing: border-box;}
.high-score .list-step:last-of-type {margin-bottom: 0;}
.high-score .list-step dt {width:40%;color: #000; font-size:clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 140%; letter-spacing: -0.44px;}
.high-score .list-step ul li {display: flex;margin-bottom:clamp(10px, 1.2vw ,16px);align-items: center;}
.high-score .list-step ul li:last-child {margin-bottom:0;}
.high-score .list-step ul li strong {padding:4px 0;margin-right:20px;width:110px;color: #FFF;font-size: clamp(12px, 1.2vw, 16px);font-weight: 700;line-height: 140%;background:#8082A0;border-radius:999px;text-align: center;}
.high-score .list-step:nth-child(2) li strong {background:#4D507A}
.high-score .list-step:nth-child(3) li strong {background:#000540}
.high-score .stit {margin:50px 0 20px;color: #000;font-size:clamp(20px, 2.1vw, 26px);font-weight: 700;line-height: 90%;letter-spacing: -0.52px;}
.high-score .info .stit:first-child {margin-top:0}
.high-score table {border-top: 2px solid #555;border-bottom: 1px solid #555;background: #FFF;}
.high-score table th {padding:clamp(12px, 1.5vw, 16px) clamp(10px, 2.1vw, 26px);color: #111;font-size:clamp(15px, 1.7vw, 18px);font-weight: 600;line-height: 140%;letter-spacing: -0.18px;border-top: 1px solid #DBDBDB;border-right: 1px solid #E3E3E3;background: #FFF7F3;}
.high-score table th:last-child {border-right: none;}
.high-score table td {border-top: 1px solid #DBDBDB;border-left: 1px solid #E3E3E3;padding:clamp(12px, 1.5vw, 16px) clamp(10px, 2.1vw, 26px);color: #555;font-size:clamp(14px, 1.5vw, 16px);font-weight: 400;line-height: 150%;letter-spacing: -0.32px;}
.high-score table td:first-child {border-left: none;}
.high-score table strong {font-weight: 600;color:#111;}

/* high_scroe02 */
.high-score table .col-1 { width: 40%; }
.high-score table .col-2 { width: 60%; }

/* high_scroe03 */
.full-care-box {display: flex;flex-wrap: wrap;justify-content: space-around;gap: 16px;}
.full-care-box > li {display: flex;width:calc(50% - 8px);padding: clamp(26px, 3.3vw, 40px) clamp(14px, 2vw, 24px);align-items: center;border-radius: 10px;border: 1px solid #FF7234;background: #FFF;}
.full-care-box > li .img {width:60px;margin-right:20px}
.full-care-box > li strong {display:block;margin-bottom: clamp(8px, 1.6vw, 20px);color: #000;font-size: clamp(14px, 1.8vw, 22px);font-weight: 600;line-height: 120%;}
.full-care-box ol li {font-size: clamp(13px, 1.4vw, 16px);letter-spacing: -0.32px;}

/* high_scroe04 */
.pic-list > li {display: flex;margin-bottom:clamp(10px, 1.6vw, 20px);padding: clamp(20px, 2.5vw, 30px) clamp(7%, 3.3vw, 40px);align-items: center;gap: 30px;align-self: stretch;border-radius: 10px;background: #FFF;}
.pic-list > li strong {display:block;margin-bottom:clamp(8px, 1.6vw, 20px);color:#FF7234;font-size: clamp(16px, 2.3vw, 26px);font-weight: 800;line-height: 130%;letter-spacing: -0.52px;}
.pic-list ol li {font-size: clamp(13px, 1.5vw, 18px);letter-spacing: -0.36px;}


/* high_scroe05 */
.tab-loadmap {display: flex;flex-wrap: wrap;gap:1px}
.tab-loadmap li {width:calc(33.3% - 1px);text-align: center;padding: clamp(10px, 1.4vw, 16px) 0;border-radius: 10px 10px 0 0;
background: #DFDFDF;color: #B8B8B8;font-size: clamp(15px, 1.55vw, 18px);font-weight: 700;line-height: 130%;letter-spacing: -0.18px;cursor: pointer;}
.tab-loadmap li.is-active {background: #000540;color:#fff}
.slide-loadmap .swiper-slide {width:100%;} 
.slide-loadmap .swiper-slide .list-load {padding:clamp(20px, 2.5vw, 30px); border-radius: 0 0 10px 10px;
background: #F6F8F9;}
.slide-loadmap .swiper-slide .list-load > li {margin-bottom:10px;padding:clamp(20px, 2.5vw, 30px);border-radius: 10px;background: #FFF;}
.slide-loadmap .swiper-slide .list-load .date {display:inline-block;margin-bottom:clamp(10px, 1.6vw, 20px);;font-weight: 700;color:#FF7234;line-height: 140%;padding:2px 18px 1px;border-radius: 30px;border: 1.5px solid #FF7234;}
.slide-loadmap .swiper-slide .list-load div {display: flex;flex-wrap: wrap;justify-content: space-around;}
.slide-loadmap .swiper-slide .list-load div ol {flex: 1;}
.slide-loadmap .swiper-slide .list-load div ol li {font-size: clamp(13px, 1.45vw, 16px);}

/* high_scroe06 */
.list-plan {max-width:715px;margin:0 auto;}
.list-plan li {display: flex;flex-wrap: nowrap;width:100%;position: relative;text-align: center;line-height: 130%;}
.list-plan li::after {display: block;content:"";width:108px;height:12px;position:absolute;top:75px;left:180px;background:url("https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/high_school/line_01.png") no-repeat left top;}
.list-plan li:nth-child(2n) {justify-content: end;}
.list-plan li:nth-child(2n)::after {left:auto;right:180px;background:url("https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/high_school/line_02.png") no-repeat left top;}
.list-plan li span {position:absolute;width:112px;top:63px;left:50%;display: inline-block;padding: clamp(1px, 0.5vw, 6px) clamp(18px, 2vw, 24px);border-radius: 30px;border: 2px solid #FF7234;transform: translateX(-50%);box-sizing: border-box;text-align: center;color:#FF7234;font-size: clamp(14px, 1.5vw, 18px);}
.list-plan li svg {position:absolute;top:135px;left:50%;transform: translateX(-50%);}
.list-plan li div {display: flex;flex-wrap: wrap;justify-content: center;flex-direction: column;align-items: center;gap:clamp(10px, 1.3vw, 16px);margin-bottom:-100px;width: 220px;height: 220px;text-align: center;border-radius: 999px;background: #FFF;font-size: clamp(13px, 1.3vw, 16px);}
.list-plan li div strong {color: #000;font-size: clamp(14px, 2vw, 22px);font-weight: 600;line-height: 120%;}
.list-plan li:last-child div {margin-bottom:0;}


/* bottom */
.bottom {padding: clamp(40px, 6.6vw, 80px) 0;text-align: center;color: #FFF;font-size: clamp(15px, 2.8vw, 34px);font-weight: 500;line-height: 130%;background:url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/high_school/bg_bottom.jpg') no-repeat center top #001651;}
.bottom strong {display: block;color:#FF7234;font-size: clamp(22px, 4.1vw, 50px);font-weight: 800;line-height: 130%;} 

/* ====================================================
TABLET
==================================================== */
@media (max-width: 1199px) and (min-width: 768px) {
  /* common */
  .pc-hide {display:inline-block;}
  .ta-hide {display:none;}
  .mo-hide {display:inline-block;}
  .high-school-wrap .inner {width:96%;padding:0 1.5%}

  /* visual */
  .visual-wrap {background-size: cover;}
  .visual-wrap .inner {padding:clamp(60px, 10vw, 125px) 0 clamp(45px, 7vw, 95px)} 
  .visual-wrap .tit {margin-left:-2%}
  .visual-wrap .tit img {width:56%}
  .visual-wrap .txt {padding-right:2%}
  .visual-wrap .txt img {width:100%;}
  .visual-wrap .inner {width:100%}

  /* top-box */
  .high-school-wrap .top-box img {width:100%}

  /* high-score */
  .high-score .inner {flex-wrap: wrap;}
  .high-score .tit {width:100%;}
  .high-score .info {width:100%}
  
  /* high scroe02 */
  .img-score02 img {width:100%;max-width: 600px;}

  /* bottom */
  .bottom {background-size: cover;}
}

/* ====================================================
MO
==================================================== */
@media (max-width: 767px) {
  /* common */  
  .pc-hide {display:inline-block;}
  .ta-hide {display:inline-block;}
  .mo-hide {display:none;}
  .high-school-wrap .inner {width:96%;padding:0 1.5%}
  picture img {width:100%}

  /* visual */
  .high-school-wrap {overflow: hidden;}
  .visual-wrap .inner {padding:0;width:100%!important;} 
  .visual-wrap .tit {margin-left:0}

  /* top-box */
  .high-school-wrap .top-box .curri-box {justify-content: left;gap:12px}
  .high-school-wrap .top-box .curri-box li {flex: 0 0 calc(50% - 6px);}

  /* high-score */
  .high-score .inner {flex-wrap: wrap;}
  .high-score .tit {width:100%}
  .high-score .info {width:100%}
  .high-score .list-step dt {width:100%;margin-bottom:20px;}
  .high-score .list-step dd {width:100%}
  .high-score table .col-1 { width: 50%; }
  .high-score table .col-2 { width: 50%; }

  /* high scroe02 */
  .img-score02 img {width:100%;max-width: 500px;}

  /* high scroe03 */
  .full-care-box > li {flex-wrap:wrap;}
  .full-care-box > li .img {width:100%;margin-right:0;margin-bottom:15px;text-align: center;}
  .full-care-box > li .img img {width:auto;height:55px;}
  .full-care-box > li div {width:100%}
  .full-care-box > li strong {text-align: center;}

  /* high scroe04 */
  .pic-list > li {flex-wrap: wrap;}
  .pic-list .img {width:100%;text-align: center;}
  .pic-list .img img {width: auto;height:100%;}
  .pic-list div {width: 100%;}
  .pic-list > li strong {text-align: center;}

  /* high scroe05 */
  .slide-loadmap .swiper-slide .list-load div {display: block;}

  /* high scroe06 */
  .list-plan {display: flex;flex-wrap: wrap;justify-content:space-around;gap:3%;justify-content: left;}
  .list-plan li {flex-direction: column;align-items: center;justify-content: flex-start;padding:20px 0;background:#fff;width:calc(50% - 3%);margin-bottom:3%;border-radius: 10px;border: 1px solid #FF7234;background: #FFF;}
  .list-plan li::after {display: none;}
  .list-plan li:nth-child(2n) {justify-content: flex-start;}
  .list-plan li span {position: relative;margin-bottom:10px;width:fit-content;height: fit-content;top:unset;left: unset;transform:translateX(0);border-width:1px}
  .list-plan li div {width:fit-content;height: fit-content;margin-bottom:0;background: none;}
  .list-plan li svg {display: none}

  .bottom {background-size: cover;background:url('https://img.megastudy.net/campus/library/v2015/library/campus_common/2025/high_school/bg_bottom_mo.png') no-repeat center bottom #001651;}
}