@charset "utf-8";
@import url(font.awesome.css);
@import url(fonts/Montserrat.css);


/* 공통 */
*{
    box-sizing: border-box; /* 오페라(Opera) */
    -moz-box-sizing: border-box; /* 파이어폭스(Firefox)*/
    -webkit-box-sizing: border-box; /* 웹킷(Webkit) & 크롬(Chrome)*/
}
html {  font-size: 62.5%;}
input[type="submit"] { font-family:'Font Awesome 5 Pro'}
body {margin:0;padding:0;background-color:#fff; font-family: 'Montserrat', sans-serif !important; letter-spacing: 0.05em; font-weight: 400; font-size: 62.5%; position: relative;}
hr {display:none;clear:both;}
img {border:0 none;}
h1,h2,h3,h4,h5,dl,dt,dd,ul,li,ol,th,td,p,blockquote,form {margin:0;padding:0;}
table {border-collapse:collapse;border:0 none; }
table th, table td {vertical-align: middle !important; text-align: center;}
form, p {margin: 0px;}
button {margin:0;padding:0;border:0 none;background:transparent;*overflow:visible;cursor:pointer;}
button::-moz-focus-inner {padding:0;border:0;}
ul, li, ol, dt, dd { list-style: none;}
body,table,th,td,input,select,textarea,div {
    font-size: 1.2rem;
    font-style: normal;
    line-height:18px;
    margin:0;
    word-spacing:-1pt;
    word-break:break-all;
}


a{text-decoration:none; color:#333;}
a:hover{text-decoration:none}


#header {
    width: 100%;
    height: 100vh;
    position: relative;
}

.bg-video { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: -1; }
.bg-video__content { height: 100%; width: 100%; object-fit: cover}


.header-box { width: 100%; max-width: 1680px; margin: 0 auto; justify-content: space-between;  display: flex; align-items: center;  padding-top: 25px;}
.header-box h1 { width: 200px;}
.header-box .menu { width:calc(100% - 200px); display: flex; justify-content: center; position: relative;}
.header-box .menu > ul { display: flex; align-items: center; justify-content: space-between; width: 100%;}
.header-box .menu > ul li.has-sub {position: relative; width: calc(100% / 6); text-align: center; display: flex; align-items: center; justify-content: center;}
.header-box .menu > ul > li > a { color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.03em; width: 100%; word-break: keep-all; padding: 3px 0px;}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 0px 0px;
  background: #a62052;
  border-radius: 3px;
  display: none;
  z-index: 100;
  flex-direction: column;
}
/*
.has-sub > a::after {
  content: '▾';
  margin-left: 6px;
  font-size: 12px;
}*/

.submenu li a { display: block; padding: 12px 10px; font-size: 1.5rem; color: #fff; text-decoration: none; word-break: keep-all;}
.submenu li a:hover {background-color: rgba(255, 255, 255, 0.1);}

.part_btn a{
  display: inline-block;
  padding: 15px 18px;
  border-radius: 10px;

  /* 글자 */
  color: #ffffff;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  text-decoration: none;

  /* Glass 효과 핵심 */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  /* 테두리 & 그림자 */
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 0 0 rgba(255, 255, 255, 0.2);

  transition: all 0.3s ease;
}
.part_btn a i { margin-left: 10px;}
.part_btn a:hover {
  background: rgba(255, 255, 255, 0.25);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35);

}
.part_btn a:active {
  transform: translateY(0);
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3);
}

#nav-icon4 { display: none;} 
#nav-icon4 span {
    display: block;
    position: absolute;
    height: 2px;
    width: 30px;
    background: #fff;
    border-radius: 0px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }



#nav-icon4 span:nth-child(1) {
  top: 0px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(2) {
  top: 7px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4 span:nth-child(3) {
  top: 14px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#nav-icon4.open span:nth-child(1) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 0px;
  left: 0px;
}

#nav-icon4.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
}

#nav-icon4.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
  left: 0px;
}

.header-content { width: 100%; max-width: 1680px; margin: 0 auto; display: flex; flex-direction: column; margin-top: 100px;}
.school_info { color: #fff; width: 100%; display: flex; flex-direction: column; align-items: flex-end;}
.school_info dl:first-child { border-top: 1px solid rgba(255, 255, 255, 0.6); padding-top: 12px;}
.school_info dl { width: 100%; max-width: 455px; border-bottom: 1px solid rgba(255, 255, 255, 0.6); padding-top: 12px; padding-bottom: 20px;} 
.school_info dt { font-size: 1.6rem; opacity: .5; font-weight: 600; margin-bottom: 27px;}
.school_info dd { font-size: 4.8rem; font-weight: 700; color: #fff; line-height: 1.0em;}
.slogun {
  position: absolute;
  bottom: 40px;
  left: 0;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  right: 0;
}

.slogun h3 {font-size: 6.0rem; color: #fff; font-weight: 500; line-height: 1.1em;}
.slogun h4 {font-size: 3.0rem; color: #fff; font-weight: 500; line-height: 1.1em; margin-top: 40px;}


.section01 { background-color: #f4f5f9; width: 100%; height: 982px;}
.section_title {font-size: 4.8rem; color: #000; font-weight: 700; text-align: center; line-height: 1.1em;  text-transform: uppercase; padding-top: 80px; word-break: keep-all;}

.accordion { display: flex; width: 100%; max-width: 1210px; height: 657px; margin: 50px auto;;  gap: 20px; }
.item {
  flex: 1;
  background: #fff;
  border: 1px solid #dfdfdf;
  border-radius: 20px;
  writing-mode: vertical-rl;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: flex 0.4s ease, background 0.4s ease,  width 0.4s ease;
  box-sizing: border-box;
  padding: 40px 0;
  overflow: hidden;
  position: relative;
}
.acco_title { font-size: 2.5rem; color: #000; font-weight: 600; text-transform: uppercase;}

.item .acco_content { opacity: 0; visibility: hidden; position: absolute; top: 0; left: 0; z-index: 1; height: 100%;}
.item.active .acco_content {opacity: 1; visibility:visible; position: absolute; top: 0; left: 0;}

.item .acco_content img { width: 100%; height: 100%; opacity: 0; transition: opacity 0.4s ease;}
.item.active .acco_content img { opacity: 1; }

.item.active { flex: 2; padding: 0; box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.05);}


.item .acco_arr { width: 60px; height: 60px; display: flex; flex-direction: row; align-items: center; justify-content: center; font-size: 3.0rem; color: #000; border-radius: 100%; position: relative; z-index: 2;} 
.item .acco_arr h4 { opacity: 0; visibility: hidden; width: 0; height: 0;}
.item:nth-child(1) .acco_arr{ background-color: #e76f51;}
.item:nth-child(2) .acco_arr{ background-color: #d4ed98;}
.item:nth-child(3) .acco_arr{ background-color: #9081e4;}
.item:nth-child(4) .acco_arr{ background-color: #d45087;}
.item:nth-child(5) .acco_arr{ background-color: #28d2d1;}
.item:nth-child(6) .acco_arr{ background-color: #c8d8fb;}

.item.active .acco_arr {width: 100%; border-radius: 0; height: 100px; justify-content: space-between; flex-direction: column-reverse; box-sizing: border-box; padding: 0px 10px;} 
.item.active .acco_arr h4 {opacity: 1; visibility:visible; width: 230px; height: auto; font-size: 2.1rem; text-transform: uppercase; writing-mode: horizontal-tb; word-break: keep-all; font-weight: 600; line-height: 1.1em;}
.item.active .acco_title { visibility: hidden;}

.section02 {max-width: 1680px; margin: 0 auto;}
.section_title02 {font-size: 4.8rem; color: #000; font-weight: 700; text-align: left; line-height: 1.1em;  text-transform: uppercase; padding-top: 80px;}

.section02 .board {  display: flex; flex-direction: column; width: 100%;}
.section02 .board ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
.section02 .board ul li {width: calc(50% - 45px); display: flex; flex-direction: column; margin-top: 80px;}
.section02 .board ul li a { width: 100%; display: flex; flex-direction: column;}
.section02 .board ul li a .board_text { width: 100%; display: flex; flex-direction: column; text-transform: uppercase;}
.section02 .board ul li a .board_text h5 {font-size: 1.8rem; color: #888888; font-weight: 500; line-height: 1.1em; word-break: keep-all; margin-bottom: 30px;}
.section02 .board ul li a .board_text span {font-size: 2.6rem; color: #404040; font-weight: 500; line-height: 1.1em; word-break: keep-all; margin-bottom: 5px;}
.section02 .board ul li a .board_text h4 {
  font-size: 3.2rem;
  color: #000000;
  font-weight: 600;
  line-height: 1.1em;
  word-break: keep-all; 
  transition: ease-in-out .3s;
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;

  /* 여러 줄 자르기 추가 스타일 */
  white-space: normal;
  line-height: 1.2;
  height: 2.4em;
  text-align: left;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.section02 .board ul li a:hover .board_text h4 { text-decoration: underline;}
.section02 .board ul li a .board_image { margin-top: 50px; box-shadow: 0px 0px 13px 0px rgba(0, 0, 0, 0.19); overflow: hidden; width: 100%; height: 500px;}
.section02 .board ul li a .board_image img { width: 100%; height: 100%; object-fit: cover;}

.section03 { background-color: #f4f5f9; margin-top: 80px; width: 100%; position: relative;}
.section03 .section03_wrap {width:100%; max-width: 1680px; margin: 0 auto; padding-bottom: 100px;}
.section03 .mySwiper {height: 535px; margin-top: 80px;}
.pract_room_wrap { display: flex; width: 100%; max-width: 1355px; margin: 0 auto; position: relative; height: 100%;}
.pract_room_img {width: 885px; height: 497px; display: flex; align-items: flex-start; justify-content: flex-start; overflow: hidden; border-radius: 15px; box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);}
.pract_room_img img { height: 100%; width: 100%; object-fit: cover;}
.pract_room_text {background-color: #d45087; width: 530px; height: 460px; border-radius: 15px; box-sizing: border-box; padding: 50px 30px; position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;}
.pract_room_text h4 {font-size: 3.0rem; color: #000000; font-weight: 700; line-height: 1.1em; word-break: keep-all; text-transform: uppercase;}
.pract_room_text span {font-size: 2.0rem; color: #000000; font-weight: 300; line-height: 1.2em; word-break: keep-all; text-transform: uppercase; margin-top: 10px;}
.pract_room_text a {font-size: 2.0rem; color: #000000; font-weight: 300; line-height: 1.0em; border-radius: 30px; padding: 10px 20px; border: 1px solid #000; margin-top: 10px;}
.pract_room_text a i { margin-left: 20px;}

.pract-button-wrap div{ position: absolute; top: 50%; z-index: 2; cursor: pointer;}
.swiper-pract-button-next { font-size: 2.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%; margin-left: 10px; right:150px; background-color: #f4f5f9;}
.swiper-pract-button-prev { font-size: 2.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%; left: 150px;  background-color: #f4f5f9;}


.footer { background-color: #282828;}
.footer_wrap { width: 100%; max-width: 1680px; margin: 0 auto; padding: 80px 0px; display: flex;}
.footer-left { width: 50%; display: flex; flex-direction: column; align-items: flex-start;}
.footer_wrap .footer-left img {height: 69px; object-fit: contain;}
.footer_wrap .footer-left ul { display: flex; margin-top: 60px;}
.footer_wrap .footer-left ul li a { font-size: 4.0rem; color: #949494;}
.footer_wrap .footer-left ul li:first-child { margin-right: 20px;}
.footer_wrap .footer-left span {font-size: 1.6rem; color: #949494; text-transform: uppercase; margin-top: 30px;}

.footer-right { width: 50%; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; padding-right: 60px;}
.footer-right .footer_addr { display: flex; width: 100%; flex-direction: column;}
.footer-right .footer_addr h3 {font-size: 1.8rem; color: #fff; font-weight: 600;}
.footer-right .footer_addr > div { width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-top: 20px;}
.footer-right .footer_addr > div span {font-size: 1.8rem; color: #949494; word-break: keep-all; width:calc(100% - 130px)}
.footer-right .footer_addr > div a { border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 50px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; margin-left: 10px;}
.footer-right .footer_addr > div a p { display: flex; align-items: center; color: #fff; font-size: 1.2rem; margin-right: 30px;}
.footer-right .footer_addr > div a p i { font-size: 1.5rem; margin-right: 5px;}
.footer-right .footer_addr > div a i { font-size: 2.0rem; color: #fff;}

.footer-right ul { display: flex; flex-direction: column; margin-top: 40px;}
.footer-right ul li { display: flex; margin-top: 20px;}
.footer-right ul li div { display: flex; align-items: center;}
.footer-right ul li div.footer-fax { margin-left: 30px;}
.footer-right ul li div > i { font-size: 1.0rem; color: #fff; width: 30px; height: 30px; border-radius: 100%; border: 1px solid #fff; display: flex; align-items: center; justify-content: center;}
.footer-right ul li div h5 a {font-size: 1.7rem; color: #fff; font-weight: 500; text-transform: uppercase;}
.footer-right ul li div h5 {font-size: 1.7rem; color: #fff; font-weight: 500; text-transform: uppercase; margin-left: 15px;}

/* all menu */
.all_menu { width: 50%; right: 0;  height: 100%;  align-items: flex-start; position: absolute; background-color: #a62052; z-index:9; display: none;}
.all_menu.menu_open { display: flex;}
.all_menu > ul { flex-direction: column; padding-left: 0; margin-top: 100px; border-top: 1px solid rgba(255, 255, 255, 0.5); display: flex; width: 100%;}
.all_menu > ul li { text-align: left; margin-top: 20px; padding:5px 0px; }
.all_menu > ul > li > a { padding-left: 20px; padding-right: 20px; color: #fff; font-size: 1.5rem;  font-weight: 700; width: 100%; display: flex; align-items: center; justify-content: space-between;}
.all_menu > ul > li:nth-child(3) > a::after, .all_menu > ul > li:nth-child(5) > a::after {content: '\f107'; font-family:'Font Awesome 5 Pro'; font-weight: 300; transition: transform 0.2s ease;}

.all_menu > ul > li:nth-child(1) > a::after,
.all_menu > ul > li:nth-child(2) > a::after,
.all_menu > ul > li:nth-child(4) > a::after,
.all_menu > ul > li:nth-child(6) > a::after {content: '\f08e'; font-family:'Font Awesome 5 Pro'; font-weight: 300; }

.all_menu > ul > li.open > a::after {transform: rotate(180deg);}
.all_menu > ul li .submenu { position: relative; top: 0; background-color: #202020; margin-top: 10px;}
.all_menu > ul li .submenu li { margin-top: 0; }
.all_menu > ul li .submenu li a { padding: 13px 20px;}

/* sub header */
.subpage-container { background-color: #000;}
#sub-header { width: 100%; background-color: #000; position: relative;}
#sub-header #header-wrap {width: 100%; display: flex; padding-bottom: 40px;}

.sub-title-bg {background: url(../img/sub_bg.png) center center no-repeat; background-size: cover; width: 100%; height: 580px;}
.sub-title-bg .menu_title { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: column; padding-top: 120px;}
.sub-title-bg .menu_title h3 {font-size: 7.2rem; color: #fff; font-weight: 800; text-transform: uppercase; line-height: 1.0em;}
.sub-title-bg .menu_title h5 {font-size: 3.6rem; color: #fff; font-weight: 600; line-height: 1.0em;}
.subPage-wrap { width: 100%; max-width: 1680px; margin: 0 auto; background-color: #fff; min-height: 500px; box-sizing: border-box; padding: 50px 120px; margin-top: -220px; border-radius: 30px 30px 0px 0px;  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.10);}

.breadcrumbs { width: 100%; display: flex;}
.breadcrumbs > ul { display: flex; width: 100%; align-items: center;}
.breadcrumbs > ul > li {color: #000; font-size: 1.5rem; font-weight: 500; margin:0px 5px}
.breadcrumbs > ul > li:first-child { margin-left: 0;}
.breadcrumbs > ul > li a { color: #000; font-size: 1.5rem; font-weight: 500; display: flex; align-items: center; word-break: keep-all;}
.breadcrumbs > ul > li a i { font-size: 2.0rem; margin-left: 10px;}

.breadcrumbs_submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-width: 200px;
  margin-top: 5px;
  z-index: 100;
}

.breadcrumbs_submenu li a { display: block; padding: 10px 15px; color: #333; text-decoration: none; transition: background 0.2s;}
.breadcrumbs_submenu li a:hover {background: #f5f5f5;}

/* 화살표 아이콘 회전 */
.breadcrumbs > ul > li > a.active i { transform: rotate(180deg); transition: transform 0.2s;}
.breadcrumbs > ul > li > a i {transition: transform 0.2s;}

/* breadcrumbs 위치 */
.breadcrumbs > ul > li { position: relative;}


.page_title { width: 100%; display: flex; flex-direction: column; margin-top: 30px;  word-break: keep-all;}
.page_title h3 {font-size: 4.5rem; color: #000; font-weight: 700; line-height: 1.0em; font-style: italic; }

.part_quick_btn { display: none;}

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

.page .hanbom_page_se01 { display: flex; flex-wrap: wrap; width: 100%; margin-top: 80px;}
.page .hanbom_page_se02 { display: flex; flex-wrap: wrap; width: 100%; margin-top: -40px;} 
.page .hanbom_page_se03 { display: flex; flex-direction: column; width: 100%; margin-top: 50px;}


.page .hanbom_page_se01 h5 {font-size: 6.8rem; color: #a62052; font-weight: 300; font-style: italic; line-height: 1.0em; word-break: keep-all;}
.page .hanbom_page_se02 h5 {font-size: 6.8rem; color: #a62052; font-weight: 300; font-style: italic; line-height: 1.0em; word-break: keep-all; text-align: left;}
.page .hanbom_page_se03 h5 {font-size: 6.8rem; color: #a62052; font-weight: 300; font-style: italic; line-height: 1.0em; word-break: keep-all; text-align: left;}

.page .hanbom_page_se01 div { display: flex; justify-content: space-between;}
.page .hanbom_page_se01 div span { width: 40%; margin-top: 45px; font-size: 2.4rem; color: #000; font-weight: 300; line-height: 1.4em; word-break: keep-all;}
.page .hanbom_page_se01 div img { margin-top: 120px;}

.page .hanbom_page_se02 div { display: flex;flex-direction: column;}
.page .hanbom_page_se02 div span { width: 100%; margin-top: 45px; font-size: 2.4rem; color: #000; font-weight: 300; line-height: 1.4em; word-break: keep-all;}
.page .hanbom_page_se02 div div.parallax-image {
  height: 580px; /* 화면 높이 */
  background-image: url('../img/page01_img03.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}
.page .hanbom_page_se03 div { font-size: 2.4rem; color: #000; font-weight: 300; line-height: 1.4em; word-break: keep-all; text-align: left; margin-top: 30px;}


/* history */
.history_page { position: relative; overflow: hidden;}
.history_page > span {font-size: 2.4rem; color: #000; font-weight: 300; line-height: 1.4em; word-break: keep-all; margin-top: 30px; border-bottom: 1px solid #dfdfdf; padding-bottom: 30px;}
/* Hide radio buttons */
.cards-container {
  --base-rotation: 0deg;
  --full-circle: 360deg;
  --radius: 40vw;
  --duration: 200ms;
  --cards-container-size: calc(var(--radius) * 2);
  --cards-container-padding: 5rem;
  --border-color: transparent;
  --label-offset: calc(var(--radius) * -1 - 1rem);
  --label-size: 30px;
  --label-color: #000;
  --label-color-hover: #a62052;
  --label-line-h: 0;
  --label-line-h-current: 3rem;
  --label-dot-size: 10px;

  box-sizing: content-box;
  position: relative;
  margin: 3rem auto 0; /* 상단 여백 줄임 */
  width: var(--cards-container-size);
  height: var(--cards-container-size);
  padding: var(--cards-container-padding);
  cursor: grab;
  
  /* 상단 30%만 보이도록 클립 */
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
}

.cards-container:active {
    cursor: grabbing;
}

@media (max-width: 1440px) {
    .cards-container {
        --radius: 28vw;
    }
}

@media (min-width: 800px) {
  .cards-container {
      --radius: 300px;
      --label-size: 40px;
      --label-dot-size: 10px;
      --label-line-h-current: 4rem;
      margin: 4rem auto 0;
  }
}

@media (min-width: 1200px) {
    .cards-container {
        --radius: 350px;
        --label-size: 50px;
        --border-color: rgba(0, 0, 0, 0.3);
        height: 400px;
    }
}

.cards {
  --index: 0;
  position: absolute;
  inset: var(--cards-container-padding);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  transition: transform 0.3s ease-in-out var(--duration);
  list-style: none;
  transform: rotate(calc(var(--base-rotation) - (var(--index) * var(--full-circle) / var(--items))));
}

.cards li {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    transform-origin: center;
    display: grid;
    place-content: center;
    transform: rotate(calc(var(--i) * 360deg / var(--items)));
    pointer-events: none;
}

.cards li > label {
    position: absolute;
    inset: 0;
    margin: auto;
    transform: translateY(var(--label-offset));
    width: var(--label-size);
    height: var(--label-size);
    cursor: pointer;
    pointer-events: initial;
    text-align: center;
    color: var(--label-color);
    font-size: clamp(.8rem, 2.5vw + .04rem, 1rem);
    transition: var(--duration) ease-in-out;
    font-weight: 600;
    font-size: 2.0rem;
	letter-spacing: -0.03em;
}

.cards li > label::before {
    content: '';
    position: absolute;
    top: 3rem;
    left: 50%;
    translate: -50% 0;
    width: var(--label-dot-size);
    height: var(--label-dot-size);
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: var(--label-color);
    transition: background-color var(--duration) ease-in-out;
}

.cards li > label::after {
    content: '';
    position: absolute;
    top: 70%;
    left: 50%;
    translate: -50% 5px;
    width: 2px;
    height: var(--label-line-h);
    background-color: #a62052;
    transition: height 300ms ease-in-out var(--label-line-delay, 0ms);
}

.cards li > label:hover {
    --label-color: var(--label-color-hover);
}

/* h2, p를 숨김 (JavaScript로 읽어서 사용) */
.cards li > h2,
.cards li > p {
    display: none;
}

/* Active state for labels */
li.active {
    --label-opacity: 1;
    --label-color: var(--label-color-hover);
    --label-line-h: var(--label-line-h-current);
    --label-line-delay: calc(var(--duration) * 2);
}

/* Content Display Area */
.content-display {
    max-width: 1440px;
    margin-top: -100px;
}

.content-item {
    display: none;
    animation: fadeIn 0.5s ease-in-out;
}

.content-item.active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-item h2 {
    color: #a62052;
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: bold;
    padding:15px 10px;
    border-radius: 5px;
    width: 160px;
}

.content-item h2:first-child {
    margin-top: 0;
}

.content-item p::before {content: ''; width: 5px; height:5px; background-color: #282828; display: flex; border-radius: 100%; margin-right: 20px;}
.content-item p::after {content:''; width: 1px; height: 100%; background-color: #282828; position: absolute; left: 17px;}
.content-item p {
    color: #000;
    font-size: clamp(1rem, 2vw, 1.1rem);
    line-height: 1.8;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    font-size: 1.6rem;
    width: calc(100% - 160px);
    display: flex;
    align-items: center;
    position: relative;
}

@media (min-width: 768px) {
    .content-display {
    }
}



/*  */
.acad_title_01 {  color: #a62052; text-transform: uppercase; font-size: 7.2rem; font-weight: 900; line-height: 1.0em; word-break: keep-all; margin-top: 50px;}
.acad_title_02 {  color: #404040; text-transform: uppercase; font-size: 2.4rem; font-weight: 900; line-height: 1.0em; word-break: keep-all; margin-top: 30px; letter-spacing: 0.1em;}
.acad_title_03 {  color: #000; text-transform: uppercase; font-size: 6.4rem; font-weight: 900; line-height: 1.0em; word-break: keep-all; margin-top: 50px; position: relative; z-index: 2;}
.acad_title_03::before {content: '\f10d'; opacity: .5; font-size: 7.2rem; color: #a62052;  font-family:'Font Awesome 5 Pro'; font-weight: 900; position: relative; z-index: -1; top:-20px; left: 10px;}
.acad_title_03::after {content: '\f10e';  opacity: .5; font-size: 7.2rem; color: #a62052;  font-family:'Font Awesome 5 Pro'; font-weight: 900; position: relative; z-index: -1; bottom: -20px;  right: 10px;} 
.acad_title_04 {  color: #404040;  font-size: 2.4rem; font-weight: 600; line-height: 1.2em; word-break: keep-all; margin-top: 30px; letter-spacing: -0.01em;}


.acad_img_area { width: 100%; height: 400px; background-image: url('../img/acad_img01.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; margin-top: 60px; }
.acad_img_area.character_img {background-image: url('../img/acad_img03.jpg');}
.acad_img_area.visual_comm { background-image: url('../img/acad_img07.jpg');}
.acad_img_area.sound_img{ background-image: url('../img/acad_img11.jpg');}
.acad_img_area.data_img { background-image: url('../img/acad_img16.jpg');}
.acad_img_area.smart_img { background-image: url('../img/acad_img19.jpg');}
.curriculum { width: 100%; display: flex; flex-direction: column; margin-top: 60px;}
.curriculum ul { width: 100%; display: flex; height: 100%;}
.curriculum ul li { width: calc(100% / 3); display: flex; flex-direction: column;}
.curriculum ul li div{ display: flex; flex-direction: column; width: 97%; margin: 0 auto; border-radius: 10px 10px 0px 0px; border: 1px solid #dfdfdf; overflow: hidden; height: 100%;}
.curriculum ul li div h3 { width: 100%; text-align: center; padding: 18px 0px; font-size: 2.5rem;}
.curriculum ul li:nth-child(1) div h3 {background: linear-gradient(270deg, #d1e000, #14aa6e);}
.curriculum ul li:nth-child(2) div h3 {background: linear-gradient(270deg,#fa8690,#d5406a);}
.curriculum ul li:nth-child(3) div h3 {background: linear-gradient(270deg,#bc9bde,#639);}
.curriculum ul li div span { padding:20px 10px; font-weight: 500; font-size: 2.0rem; line-height: 1.2em; text-align: center; display: flex; align-items: center; justify-content: center; word-break: keep-all; height: 100%;}


.curriculum02 { width: 100%; display: flex; flex-direction: column; margin-top: 60px;}
.curriculum02 > h3 {font-size: 3.2rem; line-height: 1.3em;  margin-bottom: 20px;} 
.curriculum02 > h3::before { content: ''; width: 30px; height: 8px; background-color: #4b58a3; display: flex;}

.curriculum02 ul { width: 100%; display: flex; flex-direction: column; height: 100%;}
.curriculum02 ul li { width: 100%; display: flex; flex-direction: column; margin-bottom: 10px;}
.curriculum02 ul li div{ display: flex; flex-direction: row; border-radius: 10px 10px 10px 10px; border: 1px solid #dfdfdf; overflow: hidden; height: 100%;}
.curriculum02 ul li div h3 { width: 100%; text-align: center; padding: 18px 0px; font-size: 2.5rem; width: 200px; display: flex; text-align: center; justify-content: center; align-items: center;}
.curriculum02 ul li:nth-child(1) div h3 {background: linear-gradient(270deg, #d1e000, #14aa6e);}
.curriculum02 ul li:nth-child(2) div h3 {background: linear-gradient(270deg,#fa8690,#d5406a);}
.curriculum02 ul li:nth-child(3) div h3 {background: linear-gradient(270deg,#bc9bde,#639);}
.curriculum02 ul li div span { padding:20px 10px; font-weight: 500; font-size: 2.0rem; line-height: 1.4em; display: flex; align-items: center; justify-content: flex-start; word-break: keep-all; width: calc(100% - 200px); height: 100%;}



.certifications {width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: 60px;}
.certifications > h3 {font-size: 3.2rem; line-height: 1.3em; text-transform: uppercase; font-style: italic;}
.certifications ul { width: 100%; display: flex; flex-direction: column;  border-top: 2px solid #000; margin-top:20px;}
.certifications ul li { border-bottom: 2px solid #000;}
.certifications ul li div { display: flex;}
.certifications ul li div h3 { width: 250px; text-align: center; padding: 10px 10px; font-size: 2.5rem; line-height: 1.3em; border-right: 2px solid #000; word-break: keep-all;}
.certifications ul li div span { padding:20px 10px; font-weight: 500; width: calc(100% - 250px); font-size: 2.0rem; line-height: 1.2em; text-align: center; display: flex; align-items: center; justify-content: center; word-break: keep-all; }

.certifications02 {width: 100%; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin-top: 60px;}
.certifications02 > h3 {font-size: 3.2rem; line-height: 1.3em;}
.certifications02 > h3::before { content: ''; width: 30px; height: 8px; background-color: #afd685; display: flex;}


.certifications02 ul { width: 100%; display: flex; flex-direction: column;   margin-top:20px;}
.certifications02 ul li { border-bottom: 1px solid #dfdfdf; margin-bottom: 20px; padding-bottom: 40px;}
.certifications02 ul li:last-child { margin-bottom: 0; border-bottom: none;}
.certifications02 ul li div { display: flex; flex-direction: column;}
.certifications02 ul li div h3 { width: 100%; text-align: left; padding: 10px 10px; font-size: 2.5rem; line-height: 1.3em;  word-break: keep-all;}
.certifications02 ul li div span { background-color: #f4f5f9; padding:20px 10px; font-weight: 500; width:100%; font-size: 2.0rem; line-height: 1.2em; border-radius: 5px; display: flex; align-items: center;  word-break: keep-all; }



.club { width: 100%; flex-direction: column; margin-top: 60px;}
.club > h3 {font-size: 3.2rem; line-height: 1.3em; text-transform: uppercase; font-style: italic;}
.club .club_title02 {font-size: 3.2rem; line-height: 1.3em; text-transform:none; font-style:normal;}
.club .club_title02::before { content: ''; width: 30px; height: 8px; background-color: #ffe044; display: flex;}

.club .swiper-slide { display: flex; align-items: center; margin-top: 20px; position: relative;}
.club .swiper-slide .club_image { width: 810px; border-radius: 30px; overflow: hidden; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); height: 450px;}
.club .swiper-slide .club_image img {object-fit: cover; width: 100%; height: 100%;}
.club .swiper-slide .club_info { width: calc(100% - 810px); background-color: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, .1); position: absolute; right: 40px; padding: 20px; border-radius: 10px; height:160px}
.club .swiper-slide .club_info h3 {font-size: 2.5rem; line-height: 1.3em; text-transform: uppercase;}
.club .swiper-slide .club_info span {font-weight: 400; color: #404040; font-size: 2.0rem; line-height: 1.2em; margin-top: 10px; display: flex; word-break: keep-all;}
.slide-club-btn {position: absolute; display: flex; flex-direction: row-reverse; z-index: 999; font-size: 2.0rem; right: 50px; bottom: 10%;}
.slide-club-btn div { cursor: pointer;}
.slide-club-btn .swiper-club-button-prev { margin-right: 10px;}
.slide-club-btn .swiper-club-button-next i { font-size: 2.0rem; color: #000; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%;}
.slide-club-btn .swiper-club-button-prev i {font-size: 2.0rem;  color: #000; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%;}

.strengths {width: 100%; flex-direction: column; margin-top: 60px;}
.strengths > h3 {font-size: 3.2rem; line-height: 1.3em; text-transform: uppercase; font-style: italic;}
.strengths ul {width: 100%; display: flex; height: 100%;}
.strengths ul li { width: calc(100% / 3); display: flex; flex-direction: column;}
.strengths ul li div{
  display: flex;
  flex-direction: column;
  width: 97%;
  min-height: 100px;
  margin: 0 auto;
  border-radius: 10px;
  border: 1px solid #dfdfdf;
  overflow: hidden;
  height: 100%;
  position: relative;
  background: linear-gradient(0deg, #000, #0f2a15);
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.strengths ul li:nth-child(1) div{
  background-image: linear-gradient(#fff, #fff), linear-gradient( to right, #d1e000, #14aa6e);
  border: 2px solid transparent; border-radius: 10px; background-origin: border-box; background-clip: content-box, border-box; border-image-slice: 1;}
.strengths ul li:nth-child(2) div{
  background-image: linear-gradient(#fff, #fff), linear-gradient( to right,#fa8690,#d5406a);
  border: 2px solid transparent; border-radius: 10px; background-origin: border-box; background-clip: content-box, border-box; border-image-slice: 1;}
.strengths ul li:nth-child(3) div{
  background-image: linear-gradient(#fff, #fff), linear-gradient( to right,#bc9bde,#639);
  border: 2px solid transparent; border-radius: 10px; background-origin: border-box; background-clip: content-box, border-box; border-image-slice: 1;}

.strengths ul li div p {font-weight: 400; color: #000; font-size: 2.0rem; line-height: 1.2em; word-break: keep-all; text-align: center; padding: 10px 20px; height: 100%; display: flex;  align-items: center;  justify-content: center;}

.career {width: 100%; flex-direction: column; margin-top: 60px;}
.career > h3 {font-size: 3.2rem; line-height: 1.3em; text-transform: uppercase; font-style: italic; margin-bottom: 20px;}
.career > div {font-size: 2.6rem; line-height: 1.3em; word-break: keep-all; border-bottom: 2px solid #000; padding-bottom: 20px; border-top: 2px solid #000; padding-top: 20px;}
.career > div strong {font-weight: 800;  text-transform: uppercase;}


.career02 {width: 100%; flex-direction: column; margin-top: 60px;}
.career02 > h3 {font-size: 3.2rem; line-height: 1.3em; margin-bottom: 20px;}
.career02 > h3::before { content: ''; width: 30px; height: 8px; background-color: #eb91a1; display: flex;}

.career02 > div {font-size: 2.6rem; line-height: 1.3em; word-break: keep-all; display: flex; flex-direction: column; background-color: #f4f5f9; padding: 20px; border-radius: 5px;}
.career02 > div strong {font-weight: 800;  text-transform: uppercase;}


.highlight { position: relative; display: inline-block; z-index: 1; /* 중요 */}
.highlight::before { content: ''; position: absolute; left: -4px; right: -4px; bottom: 0; height: 0.6em; background: #ffdae1; z-index: -1;}

.highlight.yellow::before { background-color: #fff2b4;}
.highlight.lime::before { background-color: #e0ffbd;}
.highlight.mint::before { background-color: #afffe4;}
.highlight.pink::before { background-color: #ffdae1;}

/* show case */
.show_tab {width: 100%;}

/* 탭 메뉴 */
.show_tab .tab_menu { display: flex; gap: 10px; margin-bottom: 20px; margin-top: 50px; flex-wrap: wrap;}
.show_tab .tab_menu li { padding: 10px 15px; cursor: pointer; font-weight: 600; letter-spacing: -0.05em; position: relative; border-radius: 30px; font-size: 1.6rem;  transition: ease-in-out .3s;}
.show_tab .tab_menu li:nth-child(1) { border: 1px solid #e76f51; color: #e76f51;}
.show_tab .tab_menu li:nth-child(2) { border: 1px solid #afcd66; color: #afcd66;}
.show_tab .tab_menu li:nth-child(3) { border: 1px solid #9081e4; color: #9081e4;}
.show_tab .tab_menu li:nth-child(4) { border: 1px solid #d45087; color: #d45087;}
.show_tab .tab_menu li:nth-child(5) { border: 1px solid #28d2d1; color: #28d2d1;}
.show_tab .tab_menu li:nth-child(6) { border: 1px solid #8c9bbb; color: #8c9bbb;}

.show_tab .tab_menu li.active { color: #fff;}
.show_tab .tab_menu li:nth-child(1).active { background-color: #e76f51;}
.show_tab .tab_menu li:nth-child(2).active { background-color: #afcd66;}
.show_tab .tab_menu li:nth-child(3).active { background-color: #9081e4;}
.show_tab .tab_menu li:nth-child(4).active { background-color: #d45087;}
.show_tab .tab_menu li:nth-child(5).active { background-color: #28d2d1;}
.show_tab .tab_menu li:nth-child(6).active { background-color: #8c9bbb;}

.show_tab .tab_menu li:hover { color: #fff;}
.show_tab .tab_menu li:nth-child(1):hover { background-color: #e76f51;}
.show_tab .tab_menu li:nth-child(2):hover { background-color: #afcd66;}
.show_tab .tab_menu li:nth-child(3):hover { background-color: #9081e4;}
.show_tab .tab_menu li:nth-child(4):hover { background-color: #d45087;}
.show_tab .tab_menu li:nth-child(5):hover { background-color: #28d2d1;}
.show_tab .tab_menu li:nth-child(6):hover { background-color: #8c9bbb;}


/* 탭 콘텐츠 */
.show_tab .tab_panel { display: none; animation: fadeIn 0.3s ease;}
.show_tab .tab_panel.active {display: block;}
.show_tab .tab_contents ul { width: 100%; display: flex;  flex-wrap: wrap; gap: 20px;}
.show_tab .tab_contents ul li { width: 49%; border: 1px solid #000; padding: 10px;}
.show_tab .tab_contents ul li div { width: 100%; position: relative; height: 300px;  overflow: hidden;}
.show_tab .tab_contents ul li img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.0); transition: ease-in-out .3s;}
.show_tab .tab_contents ul li span { background-color: rgba(0, 0, 0, .8); color: #fff; position: absolute; width: 100%; bottom: -60px; transition: ease-in-out .3s; left: 0; padding:0px 10px; height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.8rem;}
.show_tab .tab_contents ul li:hover span { bottom: 0px;} 
.show_tab .tab_contents ul li:hover img { transform: scale(1.1);}

/* Masonry 그리드 레이아웃 */
.gallery { column-count: 4; column-gap: 1rem; margin-top: 40px;}
.gallery-item { break-inside: avoid; margin-bottom: 1rem;}

.gallery-item a { display: block; position: relative; overflow: hidden; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; background: #fff;}
.gallery-item a:hover { transform: translateY(-5px); box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);}

.gallery-item img { width: 100%; height: auto; display: block; transition: transform 0.3s ease;}
.gallery-item a:hover img {transform: scale(1.05);}

/* 이미지 설명 오버레이 */
.image-caption { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: white; padding: 1rem; opacity: 0; transition: opacity 0.3s ease;}
.gallery-item a:hover .image-caption {opacity: 1;}
.image-caption h4 { font-size: 1.6rem; margin-bottom: 0.25rem;}
.image-caption p { font-size: 1.4rem; color: #ddd;}
.glightbox-clean .gslide-description { background-color: transparent !important;}
.glightbox-clean .gslide-title { font-size: 1.6rem !important; font-weight: 600 !important; letter-spacing: 0.01em; margin-bottom: 10px !important; color: #fff !important;}
.glightbox-clean .gslide-desc { font-size: 1.4rem !important; font-weight: 500 !important; letter-spacing: 0.01em; color: #fff !important;}
.glightbox-clean .gdesc-inner {padding: 22px 0px !important;}
/* 반응형 */
@media (max-width: 1200px) {
  .gallery {column-count: 3;}
}

@media (max-width: 768px) {
  .gallery { column-count: 2; column-gap: 0.5rem;}
  .gallery-item {margin-bottom: 0.5rem;}
}

@media (max-width: 480px) {
  .gallery {column-count: 1;}
}

/* 부드러운 전환 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.partnership_page { display: flex; flex-direction: column; width: 100%; margin-top: 40px;}
.page .partnership_page h5 {font-size: 6.8rem; color: #a62052; font-weight: 300; font-style: italic; line-height: 1.0em; word-break: keep-all; text-transform: uppercase;}
.page .partnership_page div { display: flex;flex-direction: column;}
.page .partnership_page > div > span { width: 100%; margin-top: 20px; font-size: 2.2rem; color: #000; font-weight: 300; line-height: 1.4em; word-break: keep-all; text-align: left;}


.inquiry { padding:50px 20px; border: 1px solid #000; margin-top: 50px;}
.inquiry h3 {font-size: 3.0rem; color: #000; font-weight: 700;  line-height: 1.0em; word-break: keep-all; width: 100%; text-align: center;}
.page .partnership_page .inquiry > span {width: 100%; background-color: #fff; margin-top: 20px; text-align: left; padding: 0px; font-size: 1.8rem; color: #000; font-weight: 400; line-height: 1.4em; word-break: keep-all; margin-bottom: 10px;}

.inquiry_box01 { display: flex; flex-direction: column; width: 100%; margin-bottom: 40px;}
.page .partnership_page .inquiry_box01 h5 {font-size: 2.0rem; color: #000; font-weight: 700;  line-height: 1.0em; word-break: keep-all; width: 100%;}
.inquiry_box01 ul { display: flex; flex-direction: column;}
.inquiry_box01 ul li::before{ content: ''; width: 5px; height: 5px; background-color: #000; border-radius: 100%; display: flex; margin-right: 10px;}
.inquiry_box01 ul li { font-size: 1.8rem; color: #000; font-weight: 500;  line-height: 1.0em; margin-top: 30px; display: flex; align-items: center; }


.inquiry_box02 { display: flex; flex-direction: column; width: 100%; margin-bottom: 40px;}
.page .partnership_page .inquiry_box02 h5 {font-size: 2.0rem; color: #000; font-weight: 700;  line-height: 1.0em; word-break: keep-all; width: 100%;}
.inquiry_box02 ul { display: flex; flex-direction: column;}
.inquiry_box02 ul li::before{ content: ''; width: 15px; height:15px; background-color: #fff; border: 1px solid #000; display: flex; margin-right: 10px;}
.inquiry_box02 ul li { font-size: 1.8rem; color: #000; font-weight: 500;  line-height: 1.0em; margin-top: 30px; display: flex; align-items: center; }

.inquiry_box03 { display: flex; flex-direction: column; width: 100%; margin-bottom: 40px;}
.page .partnership_page .inquiry_box03 h5 {font-size: 2.0rem; color: #000; font-weight: 700;  line-height: 1.0em; word-break: keep-all; width: 100%;}
.page .partnership_page .inquiry_box03 span { width: 100%; text-align: left; font-size: 1.6rem; font-weight: 400; background-color: #fff; padding: 0; margin-top:5px; margin-bottom: 0; padding-left: 20px; letter-spacing: 0.01em;}
.inquiry_box03 div { display: flex; flex-direction: column; width: 100%; height: 150px;  border: 1px dotted #000; margin-top: 20px;}



.contact_wrap { width: 100%; display: flex; flex-direction: column; align-items: flex-start; box-sizing: border-box; margin-top: 50px;}
.contact_wrap iframe { width: 100%; height: 300px;}
.contact_wrap .contact_addr { display: flex; width: 100%; flex-direction: column; margin-top: 40px;}
.contact_wrap .contact_addr h3 {font-size: 1.8rem; color: #000; font-weight: 600;}
.contact_wrap .contact_addr > div { width: 100%; display: flex; align-items: center; justify-content: flex-start; margin-top: 10px; border-bottom: 1px solid #dfdfdf; padding-bottom: 20px;}
.contact_wrap .contact_addr > div span {font-size: 1.8rem; color: #000; }
.contact_wrap .contact_addr > div a { border: 1px solid rgba(0, 0, 0, 0.6); border-radius: 50px; padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; margin-left: 10px;}
.contact_wrap .contact_addr > div a p { display: flex; align-items: center; color: #000; font-size: 1.2rem; margin-right: 30px;}
.contact_wrap .contact_addr > div a p i { font-size: 1.5rem; margin-right: 5px;}
.contact_wrap .contact_addr > div a i { font-size: 2.0rem; color: #000;}

.contact_wrap ul { display: flex; flex-direction: column; margin-top: 10px;}
.contact_wrap ul li { display: flex; margin-top: 20px;}
.contact_wrap ul li div { display: flex; align-items: center;}
.contact_wrap ul li div.contact-email { margin-left: 30px;}
.contact_wrap ul li div > i { font-size: 1.0rem; color: #000; width: 30px; height: 30px; border-radius: 100%; border: 1px solid #000; display: flex; align-items: center; justify-content: center;}
.contact_wrap ul li div h5 {font-size: 1.7rem; color: #000; font-weight: 500;  margin-left: 15px;}


/* * */
.mt50 { margin-top: 50px !important;}
.mb50 { margin-bottom: 50px !important;}

.mt80 { margin-top: 80px !important;}
.mb80 { margin-bottom: 80px !important;}

.mt100 { margin-top: 100px !important;}
.mb100 { margin-bottom: 100px !important;}

.mt150 { margin-top: 150px !important;}
.mb150 { margin-bottom: 150px !important;}

.mt190 { margin-top: 190px !important;}
.mb190 { margin-bottom: 190px !important;}

.mt200 { margin-top: 200px !important;}
.mb200 { margin-bottom: 200px !important;}

.pt50  { padding-top: 50px !important;}
.pb50  { padding-bottom: 50px !important;}
.pt80  { padding-top: 80px !important;}
.pb80  { padding-bottom: 80px !important;}
.pt100 { padding-top: 100px !important;}
.pb100 { padding-bottom: 100px !important;}
.pt150 { padding-top: 150px !important;}
.pb150 { padding-bottom: 150px !important;}
.pt190 { padding-top: 190px !important;}
.pb190 { padding-bottom: 190px !important;}
.pt200 { padding-top: 200px !important;}
.pb200 { padding-bottom: 200px !important;}


@media(max-width:1680px){
  .header-box {max-width: 100%; padding: 25px 20px;}
  .section_title02 { padding: 80px 20px 0px 20px; word-break: keep-all;}
  .section02 .board {padding: 0px 20px;}
  .section03 .section03_wrap {padding: 0px 20px 100px 20px;}

  .swiper-pract-button-prev {left: 20px;}
  .swiper-pract-button-next {right: 20px;}
  .footer_wrap { max-width: 100%;     padding: 80px 20px;}
  .footer-right .footer_addr > div span { width: calc(100% - 130px); word-break: keep-all;}

  #sub-header #header-wrap { padding-bottom: 0;}
  .subPage-wrap { width: 100%; max-width: 100%; padding: 50px 20px;}
}

@media(max-width:1440px){
  .part_btn a { padding: 15px 10px; font-size: 1.4rem;}
  .header-box .menu { position: absolute; right: 20px; margin: 0 auto;}
  .header-box .menu > ul > li { margin-left: 20px;}
  .header-box .menu > ul > li:first-child { margin-left: 0;}
  .header-box .menu > ul > li a { font-size: 1.5rem;}
  .slogun {padding-left: 20px;}
  .school_info {padding-right: 20px;}

  .section_title { font-size: 4.0rem;}
  .section_title02 { font-size: 4.0rem;}

  .swiper-pract-button-prev {left: 10px;}
  .swiper-pract-button-next {right: 10px;}
}

@media(max-width:1320px){
  .header-box .menu { position: absolute; right: 20px;  margin: inherit; left: inherit;}
  .part_btn { display: none;}
  .footer-right { padding-right: 0;}

  .part_quick_btn {
    display: flex;
    position: fixed;
    bottom: 50px;
    right: 10px;
    z-index: 5;
    color: #fff; 
    align-items: center;
    justify-self: unset;color: #000;
  }
  .part_quick_btn a {
    color: #fff;
    text-align: center;
    font-size: 2.0rem;
    display: flex;
    background-color: #a62052;
    border-radius: 3px;
    padding: 10px 8px;

    /* 글자 */
    color: #ffffff;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-size: 1.5rem;
    text-decoration: none;

    /* Glass 효과 핵심 */
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    /* 테두리 & 그림자 */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 0 0 rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }
  .part_quick_btn a i { margin-left: 10px;}
}

@media(max-width:1280px){
  /*
  .header-box .menu { width: auto;}
  .header-box .menu ul li { margin-left: 12px;}
  */
  .header-box .menu {width: calc(100% - 200px);}
  .header-content { margin-top: 60px;}
  .school_info dd { font-size: 3.2rem;}
  .slogun h3 { font-size: 4.8rem; text-shadow: 4px 4px 0px rgba(0,0,0,0.2);}
  .slogun h4 { font-size: 2.8rem; text-shadow: 2px 2px 0px rgba(0,0,0,0.2);}
  .accordion {max-width: 100%; padding: 0px 20px;}
  .item.active {flex: 2;}
  .item.active .acco_content { width: 100%; max-width: 295px; display: flex;}
  .item.active .acco_content img {object-fit: cover; }

  /* sub */
  .page .hanbom_page_se01 div { flex-direction: column;}
  .page .hanbom_page_se01 div span { width: 100%;}
  .page .hanbom_page_se01 div img {max-width: 1000px; margin: 30px auto; width: 100%;}
  .page .hanbom_page_se02 { margin-top: 40px;}

  .club .swiper-slide .club_image { width: 700px;}
  .club .swiper-slide .club_info {width: calc(100% - 700px); height:200px}
  .club .swiper-slide .club_info h3 {font-size:2.3rem}
  .club .swiper-slide .club_info span {font-size:1.7rem}
}



@media(max-width:1024px){
#header {height:60vh;}
.header-content {margin-top:0;}
  .header-box .menu { display: none;}
  #nav-icon4 { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-direction: column; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: .5s ease-in-out; 
    -moz-transition: .5s ease-in-out; 
    -o-transition: .5s ease-in-out; 
    transition: .5s ease-in-out; 
    cursor: pointer; 
    width: 30px; 
    height: 23px;
    position: relative;
    z-index: 10;
  }
	.slogun { bottom:20px;}
  .slogun h4 { margin-top:10px;}

  .school_info { position: relative;} 
  .school_info_dl { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.5s ease-in-out; right: 20px; border-top: 1px solid rgba(255, 255, 255, 0.6);}
  .school_info_dl.active { opacity: 1; pointer-events: auto;}

  .school_info dl {right: 0;  max-width: 90%;  margin: 0 auto; left: 0;}
  .slogun {padding-right: 20px;}
  .slogun h3 {font-weight: 600;}
  .item.active {flex: 3;}

  .section_title {font-size: 3.6rem;}
  .section_title02 { font-size: 3.6rem;}
  .acco_title {font-size: 2.2rem;}
  .item.active .acco_arr { padding: 0px 20px;}

  .section02 .board ul li a .board_image {height: 400px;}
  .section02 .board ul li {width: calc(50% - 15px);}
  .section02 .board ul li a .board_text h4 {font-size: 2.8rem;}
  .section02 .board ul li a .board_text span {font-size: 2.2rem;}
  .section02 .board ul li {margin-top: 50px;}
  .section02 .board ul li a .board_image {margin-top: 30px;}

  .pract_room_wrap {flex-direction: column;}
  .pract_room_text { width: 100%; height: auto; position: relative; border-radius: 0px 0px 15px 15px;}
  .pract_room_img { width: 100%; border-radius: 15px 15px 0px 0px; height: 400px;}
  .section03 .mySwiper { height: auto;}

  .pract-button-wrap { width: 100%; display: flex; align-items: center; justify-content: center; flex-direction: row-reverse; margin-top: 20px;}
  .pract-button-wrap div { position: relative; top: 0;}
  .swiper-pract-button-next { font-size: 2.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%; margin-left: 10px; right: 0;}
  .swiper-pract-button-prev { font-size: 2.5rem; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid #000; border-radius: 100%; left: 0;}
  .section03 { padding-bottom: 100px;}
  .section03 .section03_wrap {padding: 0px 20px 0px 20px;}

  .footer_wrap { flex-direction: column-reverse;}
  .footer-left { width: 100%; padding-top: 40px; margin-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.1);}
  .footer-right { width: 100%;}
  .footer-right ul { margin-top: 0;}
  .footer_wrap .footer-left ul { margin-top: 20px;}
  .footer_wrap .footer-left ul li a { font-size: 3.0rem;}


  /* sub */
  .sub-title-bg .menu_title { padding: 120px 20px 0px 20px; text-align: center;}
  .sub-title-bg .menu_title h3 { font-size: 6.4rem; word-break: keep-all;}
  .sub-title-bg .menu_title h5 {font-size: 3.2rem;}
  .page_title h3 {font-size: 3.8rem;}
  .breadcrumbs ul li a { font-size: 1.4rem;}

  .page .hanbom_page_se01 { margin-top: 40px;}
  .page .hanbom_page_se01 div span { margin-top: 20px;}
  .page .hanbom_page_se01 h5 {font-size: 5.2rem;}
  .page .hanbom_page_se02 h5 { font-size: 5.2rem;}
  .page .hanbom_page_se03 h5 { font-size: 5.2rem; text-align: center;}
  .page .hanbom_page_se02 { margin-top: 30px;}
  .page .hanbom_page_se02 div span { margin-top: 20px; font-size: 1.8rem;}
  .page .hanbom_page_se01 div span { font-size: 1.8rem;}
  .page .hanbom_page_se03 div { font-size: 1.8rem;}
  .history_page > span { font-size: 1.8rem;}

  .acad_title_01, .acad_title_03 { font-size: 5.2rem;}

  .club .swiper-slide { flex-direction: column; position: relative;}
  .club .swiper-slide .club_image { width: 100%;}
  .club .swiper-slide .club_info { bottom: 0; width: 100%; right: 0; background-color: rgba(0, 0, 0, .5); height:auto; border-radius:0px 0px 30px 30px;}
  .club .swiper-slide .club_info h3 { color: #fff; font-size: 2.0rem;}
  .club .swiper-slide .club_info span { color: #fff; font-size: 1.7rem;}
  .slide-club-btn {  position: relative; margin-top:30px;right: 0; bottom: 0; margin-top: 30px; align-items: center; justify-content: center;}
  .curriculum ul { flex-direction: column;}
  .curriculum ul li { width: 100%; margin-bottom: 10px;}

  .certifications > h3, .club > h3, .strengths > h3, .career > h3 { font-size: 2.6rem; word-break: keep-all;}
  .certifications02 > h3, .club .club_title02, .strengths02 > h3, .career02 > h3, .curriculum02 > h3  { font-size: 2.6rem; word-break: keep-all;}


  .curriculum ul li div h3, .curriculum02 ul li div h3 { font-size: 2.0rem;}
  .curriculum ul li div span, .curriculum02 ul li div span { font-size: 1.6rem;}
  .certifications ul li div h3  { font-size: 2.0rem; display: flex; align-items: center; justify-content: center;}
  .certifications ul li div span, .certifications02 ul li div span { font-size: 1.6rem;}

	.certifications02 ul li div h3 {font-size: 2.0rem; }

  .page .partnership_page h5 { font-size: 5.2rem;}
  .page .partnership_page > div > span { font-size: 2.0rem;}

  .contact_wrap .contact_addr > div {flex-direction: column;align-items: flex-start;}
  .contact_wrap .contact_addr > div a { margin-left: 0; margin-top: 10px;}
  .contact_wrap .contact_addr > div span {line-height:1.3em}
}

@media(max-width:1199px){
  .cards {border: 1px solid rgba(0, 0, 0, .5);}
  .cards li > label { width: 50px; height: 50px; font-size: 1.8rem;}
  .cards li input[type="radio"] { display:none;}
  .content-item.active {flex-direction: column;  align-items: flex-start; justify-content: flex-start; border-top: 1px solid #dfdfdf; padding: 10px 0px;}
  .content-item p { width: 100%; background-color: #f4f5f9; border-radius: 10px; word-break: keep-all; ; margin-bottom: 20px;}
  .content-item h2 { padding: 0px 0px; margin-bottom: 10px;}
  .content-item p::before { display: none;}
  .content-item p::after { display: none;}
  
}

@media(max-width:768px){
  .accordion {flex-direction: column; height: auto;}
  .activeHeight { height: 1000px;}
  .item {writing-mode: horizontal-tb; padding: 0px 20px; flex-wrap: wrap; flex: none; height: 80px;}
  .item.active .acco_content {max-width: 100%;}
  .section01 { height: auto; padding-bottom: 80px;}
  .item.active .acco_arr { flex-direction: row; position: absolute; bottom: 0; height: 75px;}
  .item.active { height: 500px;}
  .accordion .item:nth-child(6).active .acco_content img {object-position: 100% 90%;}

  .section02 .board ul li {width: 100%;}

  .acco_title {font-size: 2.0rem; width: calc(100% - 60px); word-break: keep-all;}
  .item.active .acco_arr h4 { width: calc(100% - 100px);}

  /* sub */
  .subPage-wrap {padding: 20px 20px;}
  .all_menu { width: 80%;}
  .page_title { margin-top: 20px;}

  .acad_title_01, .acad_title_03 { font-size: 3.0rem;}
  .acad_title_02, .acad_title_04 { font-size: 1.7rem;}

  .certifications ul li div h3 { width: 160px;}

  .strengths ul { flex-direction: column;}
  .strengths ul li { width: 100%; margin-bottom: 10px;}

  .career > div { font-size: 2.0rem;}
  .career02 > div { font-size: 2.0rem;}
  .page .hanbom_page_se01 h5 { font-size: 4.0rem;}
  .page .hanbom_page_se02 h5 { font-size: 4.0rem;}
  .page .hanbom_page_se03 h5 {font-size: 4.0rem;}

  .page .partnership_page h5 {font-size:4.0rem}
  .page .partnership_page > div > span { font-size:1.8rem}


}

@media(max-width:640px){
  .slogun h3 {font-size: 3.4rem; word-break: keep-all;}
  .slogun h4 {font-size: 2.4rem; word-break: keep-all;}
  .footer-right .footer_addr > div { flex-direction: column; align-items: flex-start;}
  .footer-right .footer_addr > div a { margin-top:10px; margin-left: 0px;}
  .footer-right .footer_addr > div span { width: 100%;}

  .footer-right ul li {flex-direction: column;}
  .footer-right ul li div.footer-fax {margin-left:0; margin-top:10px}
  .footer-right ul { width:100%;}
  .footer-right ul li div h5 { width: calc(100% - 30px);}
  .footer-right ul li div.footer-fax {margin-top: 10px;}
  .footer-right ul li { margin-top: 10px;}
  .footer_wrap .footer-left img { height: 40px;}

  .section02 .board ul li a .board_text h5 { font-size: 1.6rem; margin-bottom: 10px;}
  .section02 .board ul li a .board_text span { font-size: 1.8rem;}
  .section02 .board ul li a .board_text h4 { font-size: 2.4rem;}
  .pract_room_text h4 { font-size: 2.5rem;}
  .pract_room_text { padding: 30px 20px;}
  .pract_room_text span { margin-top: 20px; font-size: 1.6rem;}
  .pract_room_text a { width: 100%; font-size: 1.6rem; display: flex; align-items: center; justify-content: space-between; margin-top: 30px;}

  .footer-right ul li div h5 { font-size: 1.5rem;}
  .footer-right .footer_addr > div span { font-size: 1.6rem; line-height: 1.2em;}
  .footer_wrap .footer-left span { font-size: 1.5rem;}
  .section_title { font-size: 3.2rem; padding: 0px 20px; padding-top: 40px;}
  .section_title02 { font-size: 3.2rem; padding: 60px 20px 0px 20px;}
  .section03 { padding-bottom: 60px;}
  .section03 .mySwiper { margin-top: 40px;}
  .section01 { padding-bottom: 20px;}

  .footer_wrap { padding: 40px 20px;}

  .footer-right ul { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 20px; padding-top: 10px;}
  .footer-left { padding-top: 20px; margin-top: 20px;}

  .item .acco_arr { width: 50px; height: 50px; font-size: 2.5rem;}
  .item.active .acco_arr h4 { font-size: 1.8rem;}

  /* sub */
  .sub-title-bg .menu_title h3 { font-size: 5.0rem;}
  .sub-title-bg .menu_title h5 {font-size: 2.8rem;}
  .page_title h3 {font-size: 3.2rem;}
  .breadcrumbs ul li a { font-size: 1.4rem;}
  
  .curriculum02 ul li div h3 { border-radius:30px;}
  .curriculum02 ul li div {flex-direction: column; border:none; border-radius:0 0 0 0;}
  .curriculum02 ul li div span {width:100%;}
}


@media(max-width:420px){
  .footer-right ul li {flex-direction: column;}
  .footer-right ul li div.footer-fax { margin-left: 0;}
  .footer-right .footer_addr > div a { width: 100%; margin-top:20px;}
  
  .contact_wrap ul { width: 100%;}
  .contact_wrap ul li { flex-direction: column; width: 100%;}
  .contact_wrap ul li div.contact-email { margin-left: 0; margin-top: 10px; border-top: 1px solid #dfdfdf; padding-top: 10px;}
  .breadcrumbs > ul > li:first-child { display: none;}
  .breadcrumbs > ul > li:nth-child(2) { display: none;}

  .sub-title-bg .menu_title h3 { font-size:4.8rem}

  .career02 > div, .career > div {font-size:1.7rem}
}

@media(max-width:380px){
  .slogun h3 {font-size: 3.3rem;}
  .slogun h4 {font-size: 1.6rem;}

  .all_menu { width: 100%;}
  .sub-title-bg .menu_title h3 { font-size:4.0rem} 

  .school_info dt {margin-bottom:15px;}
}