@charset "UTF-8";

html,
body {font-size: 16px;font-size: 120%;font-family: 'Noto Sans Korean';}

/************** 공통 ************ */
.box {max-width: 1280px; padding: 6rem 2%; margin: 0 auto;}
.box.pd0 {max-width: 1280px; padding: 0;}
.box.pt0 {padding-top: 6rem;padding-bottom: 0;}

/* 공통 */
.title {color: #333;font-size: 1.5rem;margin-bottom: 32px;}
.title > p {font-size: 15px;font-weight: 500;margin-top: 6px;color: #555;}

.titB {color: #333;font-size: 2rem;font-style: normal;font-weight: 600;line-height: 150%;    word-break: keep-all;}
.titM {font-size: 1.6rem;font-weight: 600;line-height: 150%;}
.titS {font-size: 1.2rem;}
.white {color: #fff;}
.tc {text-align: center;}

.flex {display:flex;}
.flex.align-items {align-items: center;}
.flex.between {justify-content: space-between;}
.flex.around {justify-content: space-around;}
.flex.flexColumn {flex-direction: column;}
.flex.flexRow {flex-direction: row;}

.flex.gap4 {gap: 4px;}
.flex.gap8 {gap: 8px;}
.flex.gap12 {gap: 12px;}
.flex.gap27 {gap: 27px;}

/************** // 공통 ************ */

/* header */
header {position: absolute;width: 100%;z-index: 50;overflow-x: clip;}
header .sticky {position: relative;height: 75px;transform: translatey(0px); margin: 0 auto;}
header .sticky {transition:all 0.25s linear 0s;-o-transition: all 0.25s linear 0s;-ms-transition: all 0.25s linear 0s;-moz-transition: all 0.25s linear 0s;}
header .sticky.fixed {position: fixed;left: 0;right: 0;top: 0px;width: 100%;z-index: 10;background: #ffffff;backdrop-filter: blur(0.3rem);transition: all 0.25s;transform: translatey(0);}


/* topHeader */
.topHeader {width: 96%;max-width: 1280px;margin: 0 auto;padding: 0 2%;height: 75px;display: flex;align-items: center;justify-content: space-between;}
.topHeader .logo {display: inline-flex;gap: 24px;}
.topHeader .logo a {display: inline-block;}
.topHeader .logo img {height: 39px;}

.topHeader .flagBox {display: inline-flex;gap: 16px;}
.topHeader .flagBox li a {display: inline-flex;gap: 4px;font-size: 13px;}
.topHeader .flagBox li img {width: 28px;display: flex; border-radius: 2px;}


/************ wrap *************/
.wrap {width:100%;height: 100%;margin: 0 auto;}
.goTop {position: fixed;right: 20px;bottom: 20px;background: #823058;border-radius: 60px;width: 60px;height: 60px;outline: 0;border: 0;text-align: center;display: inline-flex;align-items: center;justify-content: center;font-size: 14px;font-weight: 600;color: #fff;}
.goTop:hover {background: #c1538d;}


button:hover{cursor:pointer; outline:none;}
.btn{display:inline-block;zoom:1;font-size:14px;vertical-align:middle;box-sizing:border-box;border:0px;position:relative;background: transparent;}


/************ 비디오 영역 *************/

/* ===== 영상 아래 첫 섹션 간격 조정 ===== */
/* PC 기준 */
.pageVideo {width: 100%;padding-top: 75px;margin-bottom: 6rem;}
.pageVideo .video {}
/* .pageVideo #videoInfo {max-width: 1280px;margin: 0 auto;aspect-ratio: 16 / 9;border-radius: 8px;overflow: hidden;} */
/* .pageVideo #videoInfo iframe {width: 100%;height: 100%; object-fit: cover;position: relative;} */
/* .pageVideo #videoInfo iframe {
    position: absolute;
  top: 50%;
  left: 50%;
  width: 80vw;
  height: 56.25vw;
  min-height: calc(100svh - 75px);
  min-width: 177.77vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
  overflow: hidden;
} */
.pageVideo #videoInfo {max-width: 1280px;margin: 0 auto;aspect-ratio: 16 / 9;border-radius: 8px;overflow: hidden;} 
.pageVideo #videoInfo iframe {width: 100%;height: 100%;}




/************ E-Sports, 게임, K-POP, 모델, 콘텐츠 *************/
.pageInfo {text-align: center;background: #f3f3f3;}
.pageInfo .img {margin: 60px 0 0 0;padding: 0 16px;}


/************ 프로그램 소개 *************/
.pageTabBox {position: relative;}
.tabBox {overflow: hidden;}
.tabBox .tabMenu {display: flex;align-items: center;justify-content: center;overflow: hidden;border-radius: 12px 12px 0 0;}
.tabBox .tabMenu li {width: 100%;}
.tabBox .tabMenu li:nth-child(1) {background: #24A385;}
.tabBox .tabMenu li:nth-child(2) {background: #C1538D;}
.tabBox .tabMenu li:nth-child(3) {background: #3695BF;}
.tabBox .tabMenu li:nth-child(4) {background: #DD6167;}
.tabBox .tabMenu li:nth-child(5) {background: #21888D;}
.tabBox .tabMenu li:nth-child(6) {background: #174285;}
.tabBox .tabMenu li a {color: #FFF;text-align: center;font-size: 1rem;font-weight: 500;display: flex;padding: 16px 6px;align-items: center;justify-content: center;height: 26px;}

/* tab 상단에 고정 */
.tabBox.fixed {position: fixed;top: 75px;left: 0;width: 100%;z-index: 100;background: #fff;}
.tabBox.end {position: absolute;top: auto;bottom: 0;}


/* 상단 탭 배경 색 */
.tabView .listBox {padding-bottom: 6rem;}
.tabView .listBox .sportInfo {background: #24A385; }
.tabView .listBox .k-popInfo {background: #C1538D;}
.tabView .listBox .modelInfo {background: #3695BF;}
.tabView .listBox .creatorInfo {background:#DD6167 ;}
.tabView .listBox .beautyInfo {background: #21888D;}
.tabView .listBox .foodInfo {background: #174285;}


/* 제목 배경 색 */
.tabView .e-Sports .badge {background: #24A385;}
.tabView .k-pop .badge {background: #C1538D;}
.tabView .model .badge {background: #3695BF;}
.tabView .creator .badge {background:#DD6167 ;}
.tabView .beauty .badge {background: #21888D;}
.tabView .food .badge {background: #174285;}

.tabView .listBox .bgBox { max-width: 1280px;margin: 0 auto;padding: 40px 2%;display: flex;align-items: center;justify-content: space-between;}
.tabView .listBox .bgBox .img {width: 320px;}

.tabView .listBox .textBox {display: flex;justify-content: space-between;max-width: 1280px;margin: 0 auto;padding: 40px 2%;gap: 50px;}
.tabView .listBox .textBox ul {width: 50%;}
.tabView .listBox .textBox ul li {margin-bottom: 16px;}
.tabView .listBox .textBox ul li:last-child {margin-bottom: 0;}
.tabView .listBox .textBox .badge {color: #FFF;font-size: 15px;font-weight: 700;border-radius: 30px;display: inline-block;padding: 8px 16px;line-height: 100%;}

.tabView .listBox .textBox .text {color: #333;font-size: 14px;font-weight: 500;line-height: 140%;margin-top: 8px;}
.tabView .listBox .textBox .text dl.lineBox { display: flex;flex-direction: column;margin-bottom: 12px;padding-bottom: 12px;border-bottom: 1px solid #eaeaea;}
.tabView .listBox .textBox .text dl.lineBox:last-child {margin-bottom: 0;}



/* arrow 아이콘 */
.tabView .listBox .textBox .text dl.lineBox dt {font-size: 15px;display: flex;align-items: center;}
.tabView .listBox.e-Sports .textBox .text dl.lineBox dt {background: url('../images/icon_arrow.png') no-repeat ;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;color: #24a385;}
.tabView .listBox.k-pop .textBox .text dl.lineBox dt {background: url('../images/icon_arrow2.png') no-repeat ; color: #C1538D;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;}
.tabView .listBox.model .textBox .text dl.lineBox dt {background: url('../images/icon_arrow3.png') no-repeat ;color: #3695BF;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;}
.tabView .listBox.creator .textBox .text dl.lineBox dt {background: url('../images/icon_arrow4.png') no-repeat ;color: #DD6167;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;}
.tabView .listBox.beauty .textBox .text dl.lineBox dt {background: url('../images/icon_arrow5.png') no-repeat ;color: #21888D;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;}
.tabView .listBox.food .textBox .text dl.lineBox dt {background: url('../images/icon_arrow6.png') no-repeat ;color: #174285;background-size: 24px;padding-left: 26px;flex: none;min-height: 24px; font-weight: 500;}


.tabView .listBox .textBox .text dl.lineBox dd { padding-left: 26px;font-size: 14px;color: #333;margin-bottom: 3px;}
.tabView .listBox .textBox .text dl.lineBox dd > strong {position: relative;padding-right: 10px;}
.tabView .listBox .textBox .text dl.lineBox dd > strong::after {content:'';width: 1px;height: 16px;border-right: 1px solid #cfcfcf;position: absolute;right: 4px;top: 4px;}
.tabView .listBox .textBox .text dl.lineBox.row {flex-direction: row; }
.tabView .listBox .textBox .text dl.lineBox.row dd {padding-left: 8px;}


.tabView .listBox .textBox .text dl.column {display: flex;gap: 6px;}
.tabView .listBox .textBox .text dl.column:last-child {margin-bottom: 0;}
.tabView .listBox .textBox .text dl.column dt {flex: none;line-height: 24px;}
.tabView .listBox .textBox .text dl.column dd {line-height: 24px;}

.mgt8 {margin-top: 8px;}

.tabView .listBox .imgBox {padding: 0 2%;display: flex;gap: 24px;max-width: 1280px;margin: 0 auto;}
.tabView .listBox .imgBox .img {display: grid;grid-template-columns: 1fr 1fr; width: 100%;gap: 24px;}
.tabView .listBox .imgBox .img p {display:flex;justify-content: center;flex: 1;}
.tabView .listBox .imgBox .img p img {width: 100%;}
.tabView .listBox .imgBox .img .flexColumn { display: flex;flex-direction: column;justify-content: space-between;}


/* 입학안내 */
.pageInformation {background: #f3f7fb;}
.pageInformation .box {max-width: 1280px;margin: 0 auto;}
.pageInformation .infoBox {/* padding: 0 2%; */display: flex;justify-content: space-between;gap: 50px;}
.pageInformation .img {margin-top: 29px;display: flex;}
.pageInformation .img img {width: 100%;}
.pageInformation .left {width: 100%;}
.pageInformation .left .stit {font-size: 20px;}

.pageInformation .right {width: 100%;}
.pageInformation .right .stit {display: inline-flex;align-items: center;gap: 6px;font-size:18px;font-weight: 600;color: #0F4C81;}
.pageInformation .right .text {font-size: 15px;font-weight: 500;}
.pageInformation .right ul {display: flex; flex-direction: column;gap: 12px;}
.pageInformation .right li {border-radius: 12px;background: #fff;padding: 24px;border: 2px solid #0f4c81;}

.titleTextBox {display: flex;align-items: center;justify-content: center;flex-wrap: wrap;}
.titleTextBox span {font-size: 24px;font-weight: 500; line-height: 132%;color: #24a385;}
.titleTextBox span.box1 {background: #24a3854f;color: #24a385;}
.titleTextBox span.box2 {background: #108e6d36;color: #108e6d;}
.titleTextBox span.box3 {background: #c1548d54;color: #c1548d;}
.titleTextBox span.box4 {background: #3b95bf52;color: #3b95bf;}
.titleTextBox span.box5 {background: #dd606640;color: #dd6066;}
.titleTextBox span.box6 {background: #12888d38;color: #12888d;}
.titleTextBox span.box7 {background: #15428430;color: #154284;}


/* 입학허가 절차 */
.pageStep {max-width: 1280px;margin: 0 auto;padding: 6rem 2%;}
.pageStep ul {display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;gap: 24px;}
.pageStep ul li {border-radius: 16px;background: #eaf0f5;padding: 32px 24px;}
.pageStep ul li .img {text-align: center;margin-bottom: 8px;}
.pageStep ul li .stitS {color: #333;text-align: center;font-size: 15px;font-weight: 700;line-height: 24px;}
.pageStep ul li .stitM {margin-top: 8px;color: #555;text-align: center;font-size: 16px;font-weight: 600;line-height: 22px;}


.pageGuide {padding: 0 2% 6rem 2%;max-width: 1280px;margin: 0 auto;}
.pageGuide .textBox {display: flex;justify-content: space-between;max-width: 1280px;margin: 0 auto;gap: 50px;}
.pageGuide .textBox ul {width: 100%;}
.pageGuide .textBox ul > li {font-size: 15px;margin-bottom: 16px;}
.pageGuide .textBox ul > li:last-child {margin-bottom: 0;}
.pageGuide .textBox .badge {color: #FFF;font-size: 15px;font-weight: 700;border-radius: 30px;display: inline-block;padding: 8px 16px;line-height: 100%;background: #C1538D;margin-bottom: 6px;}
.pageGuide .textBox .text {font-size: 14px;line-height: 24px;margin-bottom: 12px;}
.pageGuide .textBox .text:last-child {margin-bottom: 0;}
.fileBox {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 12px;}
.fileBox > li {margin-bottom: 0 !important;}
.fileBox > li a {text-align: center;border: 1px solid #ddd;display: flex;align-items: center;justify-content: center;border-radius: 4px;    min-height: 50px;width: 100%;height: 100%;font-size: 14px;font-weight: 600;}

.flexBox {margin-top: 6px;flex-wrap: wrap;}
.flexBox dd {border: 1px solid #ddd;padding: 4px 20px;border-radius: 4px;}
.flex.gap24 {gap: 8px;padding-left: 12px;}


.pageContact {padding: 0 2% 6rem 2%;max-width: 1280px;margin: 0 auto;}
.tableInfo {border-top: 1px solid #ddd;border-left: 1px solid #ddd;border-right: 1px solid #ddd;}
.tableInfo .row {display: flex;border-bottom: 1px solid #ddd;}
.tableInfo .th {background: #eaf0f5;display: flex;align-items: center;justify-content: center;padding: 0 24px;min-height: 60px;flex: 1;font-size: 15px;}
.tableInfo .td {flex: 3;min-height: 60px;display: flex;align-items: center;padding: 0 24px;font-size: 15px;}

.downloadBtn {display: flex;align-items: center;justify-content: center;margin-top: 20px;}
.downloadBtn a {font-size: 16px;font-weight: 600;padding: 16px 32px;border-radius: 4px;background: #C1538D;color: #fff;} 


@media screen and (max-width: 1280px) {
    html, body {font-size: 14px;}
    .pageInformation .left .stit > br {display: none;}
}


@media screen and (max-width: 1080px) {
    .pageInformation .infoBox {flex-direction: column; gap: 24px; }
    .pageStep ul {display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 24px;}

    .pageGuide .textBox {flex-direction: column;gap: 16px;}
    .pageVideo { margin-bottom: 50px;}
}

@media screen and (max-width: 767px) {
    html, body {font-size: 13px;}

    .box {padding: 60px 4%;}
    .box.pt0 {padding: 60px 0 0;}

    .pageVideo { margin-bottom: 0;}
    .pageVideo #videoInfo {border-radius: 0;}

    .pageInfo .titB  br {display: none;}
    .pageInfo .img {margin-top: 32px;}

    .titleTextBox {flex-wrap: wrap;margin: 6px 0 0 0;gap: 4px; }
    .titleTextBox span {font-size: 16px;}
    
    .tabBox .tabMenu {display: grid;grid-template-columns: 1fr 1fr 1fr;}
    .tabBox.fixed .tabMenu {border-radius: 0;}
    .tabBox .tabMenu li.active a {font-weight: 800;}
    
    .tabView .listBox {padding-bottom: 60px;}
    .tabView .listBox .bgBox {flex-direction: column;padding: 32px 2%;gap: 16px;}
    .tabView .listBox .bgBox > div {max-width: 320px; width: 100%;}
    .tabView .listBox .bgBox > div .titS {font-size: 16px;}
    .tabView .listBox .bgBox > div .titM {margin-top: 8px !important;}
    .tabView .listBox .textBox {flex-direction: column;gap: 16px;padding: 24px 2%;}
    .tabView .listBox .textBox ul {width: 100%;}
    .tabView .listBox .imgBox {flex-direction: column;gap: 12px;}
    .tabView .listBox .imgBox .img {gap: 12px;}
    .tabView .listBox .imgBox .img .flexColumn{gap: 12px;}

    .pageStep ul {grid-template-columns: 1fr 1fr;gap: 16px;}

    .tableInfo .row {flex-direction: column;}
    .tableInfo .th {justify-content: flex-start;font-weight: 600;font-size:14px;color: #0f4c81;min-height: 40px;padding: 0 16px;}
    .tableInfo .td {justify-content: flex-start;font-weight: 500;font-size:16px;padding: 0 16px;}

    .pageStep {padding: 60px 2%;}
    .pageGuide {padding-bottom: 60px;}
    .pageContact {padding-bottom: 60px;}
    .downloadBtn a {width: 100%;text-align: center;}
}

@media screen and (max-width: 580px) {
    .box {padding: 32px 4%;}
    .box.pt0 {padding: 32px 0 0 0;}
    .pageVideo #videoInfo {border-radius: 0;}
    
    .topHeader {flex-direction: column;justify-content: center;gap: 4px;}
    .topHeader .logo {gap: 16px;}
    .topHeader .logo img {height: 34px;}
    .topHeader .flagBox {gap: 8px;}
    .topHeader .flagBox li a {font-size: 10px;}
    .topHeader .flagBox li img {width: 20px;height: 16px;}
    
    .titleTextBox {justify-content: flex-start; word-break: keep-all;margin: 6px 0;}
    .pageInfo .titM  div {text-align: left;word-break: keep-all;}
    .pageInfo .img {margin-top: 24px;}

    .pageStep ul li {padding: 24px 16px;}    
    .pageStep ul li .stitM {font-size: 15px;}
    
    .fileBox {grid-template-columns: 1fr 1fr;}

    .tabBox .tabMenu li a {padding: 8px 0px;height: 22px;}
    .tabView .listBox .bgBox > div .titM br {display: none;}
}