@charset "UTF-8";

@import url(reset.css);
@import url(font.css);

html {font-size: 10px; }
::selection {background: var(--mainColor); color: #fff;}

body.dark {
    --bg1: #1e1e1e;
    --bg2: #000;
    --bg3: #e9e9e9;
    --bg4: #1e1e1e;
    --mainColor:#C8733E;
    --subColor1:#fff;
    --subColor2:#996240;
    --subColor3:#d9d9d9;
    --subColor4:#fff;
    --subColor5:#d9d9d9;
    --pointColor1:#FF7017;
    --svgColor1:#FF7017;
    --menuColor1:#d9d9d9;

    --textColor1:#bbb;
    --textColor2:#888;
	--textColor3:#c8733e;

    
    --illust :#FC9551;
    --photoshop :#37ABFF;
    --figma :#874FFF;
    --design :#EED183;
    --design_feedback :#B5DE72;
    --html :#E5552D;
    --script :#4366ff;

	--bodybg:url('/images/bg_dark.jpg');

    
    --reply1 :#c8733e;
    --reply2 :#757cff;
    --reply3 :#af8815;
    --reply4 :#37abff;
    --reply5 :#c83e40;
    --reply6 :#915eff;
    --reply7 :#3e70c8;
    --reply8 :#cc980a;
    --reply9 :#75a823;
    --reply10 :#e5552d;
}
body.light {
    --bg1: #f1f1f1;
    --bg2: #1e1e1e;
    --bg3: #1e1e1e;
    --bg4: #1e1e1e;
    --mainColor:#C8733E;
    --subColor1:#1e1e1e;
    --subColor2:#996240;
    --subColor3:#1e1e1e;
    --subColor4:#fff;
    --subColor5:#fff;
    --pointColor1:#FF7017;
    --svgColor1:#FF7017;
    --menuColor1:#d9d9d9;

    --textColor1:#333;
    --textColor2:#666;
	--textColor3:#c8733e;
    
    --illust :#af5315;
    --photoshop :#37ABFF;
    --figma :#874FFF;
    --design :#cc980a;
    --design_feedback :#75a823;
    --html :#E5552D;
    --script :#6d88ff;

	--bodybg:url('/images/bg_light.jpg');
    
    
    --reply1 :#c8733e;
    --reply2 :#757cff;
    --reply3 :#af8815;
    --reply4 :#37abff;
    --reply5 :#c83e40;
    --reply6 :#915eff;
    --reply7 :#3e70c8;
    --reply8 :#cc980a;
    --reply9 :#75a823;
    --reply10 :#e5552d;
}



body {background: var(--bg1) var(--bodybg) repeat; transition: 0.2s linear;}
/* .bright_mode {position: fixed; width: 100%; height: 100vh; background: var(--bg3); border-radius:50%; transform:scale(.1); z-index: -1;} */

.pc {display: block;}
.mo {display: none;}

#wrap {padding: 0 10rem; }
header {padding-top: 3vw; position: relative;}
header .bt {position: fixed; left: 0; top: 0px; width: 10px; height: 10px;}
header .bt:hover {background: #fff;}

header .topset{display: flex; justify-content: center; padding-top: 3vw; align-items: flex-end;}

header .student {position: absolute; z-index: 3; left: 0; text-align: left;}
header .student li {margin-bottom: 1rem; position: relative;}
header .student li .icon_bul {position: absolute; width: 25px; right: 14px; top: 20px;}
header .student .tit {font-size: 1.4rem; color: var(--subColor3);font-family: 'Pretendard-Light'; display: block; margin-bottom: -0.5rem; letter-spacing: 0;}
header .student li:nth-child(2) .tit {margin-bottom: 0.3rem;}
header .student .text {color: var(--subColor1); font-weight: 400; font-size: 2rem;}
header .student span.text {font-family: "Pretendard-Light", serif; font-weight: 400; }
header .student .text span {font-size: 3rem; color: var(--mainColor);}



/* body.light header h1 .logo {display: none;} */
header h1 {position: relative; z-index: 3; }
header h1 .logo {width: 123px; height: 93px;background: url('../images/logo4.png');  background-position: 0px 0; }
header h1 .logo:hover {animation:logo1Ani .8s infinite steps(8)}

header h1.on .logo { background-position: -984px 0;}

@keyframes logo1Ani {
	0% {background-position: 0px 0;}
	100% {background-position: -984px 0;}
}



header h1 strong {
    font-family: "Monomaniac One", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.4rem;
    color: var(--mainColor);
    letter-spacing: 0.8rem;
  }
header h1 a {color: var(--subColor1); display: flex; flex-direction: column; align-items: center;}

header h1 a strong {margin-top: 1rem;}
header h1 a strong span {position: relative; }
header h1 a strong span:nth-child(1)::before {content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background:var(--pointColor1); left: 50%; transform: translateX(-6px);}
header h1 a strong span:nth-child(2)::before {content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background:var(--subColor1); left: 50%; transform: translateX(-6px);}

header h1 a em {font-size: 1.4rem; color: var(--subColor2); font-style: normal;font-family: 'Pretendard-Light'; letter-spacing: 0.2rem; margin-top: 0.2rem; }


header .menu_pc {}
header .menu_pc .gnb {display: flex;}
header .menu_pc .gnb li {}
header .menu_pc .gnb li a {color: var(--subColor3); font-size: 1.9rem; font-family: 'Paperlogy-3Light', sans-serif; display: flex; align-items: center; padding:  1rem 1vw; gap: 0.5rem;}
header .menu_pc .gnb li a img {}
header .menu_pc .gnb li.on a {color: var(--mainColor)}


header .btn_box {height: 40px; display: flex; gap: 3rem; position: absolute; z-index: 7; right: 0; ;}
.bright_mode {right: 0; }



.hamburger { transition: 0.2s; cursor: pointer; position: relative; transition: 0.5s;/*  background: rgba(0,0,0,0); */ padding: 3px; transform-origin: center;}

.hamburger .ham_piece {display: flex;flex-wrap: wrap; gap: 3px; width: 21px; align-items: flex-start;height: 21px;}
.hamburger .ham_piece span {background: var(--subColor3); width: 5px; height: 5px; transition: 0.3s;}
.hamburger .ham_piece span:nth-child(3) {background: var(--pointColor1);}
.hamburger .ham_piece span:nth-child(4) {background: var(--pointColor1);}
.hamburger .ham_piece span:nth-child(8) {background: var(--pointColor1);}

/* 스크롤바 */
.hamburger nav.menu::-webkit-scrollbar {width: 5px;  }
.hamburger nav.menu::-webkit-scrollbar-thumb {background: rgba(255, 255, 255); border-radius: 5px; }
.hamburger nav.menu::-webkit-scrollbar-track {background: rgba(220, 20, 60, .1);}

/* 메뉴 */
.hamburger nav.menu {position: absolute; top: 16px; right: 16px; width: 0; height: 0; background: var(--bg1); transition: .4s; overflow: hidden; overflow: auto; z-index: 7; }

.hamburger.on nav.menu {width: 200px; height: 70vh; transition: .8s cubic-bezier(.53,.48,0,1.01); background:var(--bg2);}
.hamburger.on nav.menu .gnb { animation: naveOn 1s forwards; animation-delay: 0.5s; opacity: 0;}
@keyframes naveOn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}


.hamburger.pc nav.menu {position: fixed; right: 2rem; top: 3rem;}



.hamburger nav.menu .gnb {padding: 2rem; box-sizing: border-box;}
.hamburger nav.menu .gnb li {line-height: 4; font-size: 1.8rem;font-family: 'Pretendard-Light';  text-align: center; border-bottom: 1px solid #d84141;}
.hamburger nav.menu .gnb li a {display: flex; align-items: center; gap: 1rem;color: var(--menuColor1);}
.hamburger nav.menu .gnb li a i {display: flex; align-items: center; gap: 1rem; }
.hamburger nav.menu .gnb li a svg {fill:var(--svgColor1)}

.menuwrap {position: fixed; width: 100%; height: 100vh; background:  var(--menuColor1); opacity: 0.5; backdrop-filter: blur(10px); top: 0; left: 0; display: none; z-index: 4;} 

/* header .btn_box .hamburger:hover {transform: scale(1.4);} */
header .btn_box .hamburger.on .ham_piece span
 {animation:hamburger 0.2s infinite alternate linear; }

header .btn_box .hamburger .ham_piece span:nth-child(1) {animation-delay: 0.1s;}
header .btn_box .hamburger .ham_piece span:nth-child(2) {animation-delay: 0.2s;}
header .btn_box .hamburger .ham_piece span:nth-child(3) {animation-delay: 0.3s;}
header .btn_box .hamburger .ham_piece span:nth-child(4) {animation-delay: 0.4s;}
header .btn_box .hamburger .ham_piece span:nth-child(5) {animation-delay: 0.5s;}
header .btn_box .hamburger .ham_piece span:nth-child(6) {animation-delay: 0.6s;}
header .btn_box .hamburger .ham_piece span:nth-child(7) {animation-delay: 0.7s;}
header .btn_box .hamburger .ham_piece span:nth-child(8) {animation-delay: 0.8s;}
header .btn_box .hamburger .ham_piece span:nth-child(9) {animation-delay: 0.9s;}
@keyframes hamburger {
    0% {background: var(--subColor3);}
    100% {background: var(--pointColor1)}
}
header .btn_box .bright {display: flex; align-items: start; padding-top: 1px;  }



.bg_span {
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-rows: repeat(30, 1fr);
    gap: 3px;
    z-index: -1;
}

/* span 요소 기본 스타일 */
.bg_span span {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    /* opacity: 0; */
    /* transition: opacity 0.3s; */
}

/* span이 반짝이는 효과 */
@keyframes blink {
    0% { opacity: 0; background:var(--mainColor); transform: scale(1);}
    30% { opacity: 1; background:var(--mainColor); transform: scale(1);}
    100% { opacity: 0; background:var(--mainColor); transform: scale(1);}
}

/* 애니메이션이 활성화될 때 */
.bg_span span.active {
    animation: blink 0.5s linear;
}


.main #section1 ul li:before {content:""; position: absolute; width: 6px; height: 6px; border-radius:50%; border: 1px solid #fff; background: #000; right: 7px; top: 7px; z-index: 2; box-shadow:3px 3px 6px rgba(0,0,0,0.24); transition:.15s; opacity: 0; pointer-events: none}
.main #section1 ul li:hover:before {opacity: 1;}
.main .bd_tmb_lst {display: flex; flex-wrap:wrap; gap:5rem}
.main .bd_tmb_lst li {width: 18%; height: auto; flex-grow:1}
.main .tmb_wrp img.tmb{width:100%}
.main .bd_tmb_lst .tmb_wrp, .bd_tmb_lst.gall_style2 .tmb_wrp {box-shadow:0 0 0;     border: 1px solid rgba(255, 255, 255, 0.1) }
.main .rd_hd .board .top_area {background: none;}
.main .rd_hd .board.clear {background: #222;}
.main .rd_body article > div > p:first-child {display: none;}
.main .bd a[rel="noopener"] {font-weight: bold; text-decoration: underline; color: var(--pointColor1);}
.main .bd_zine {display: flex;    flex-wrap: wrap;    gap: 5rem;    justify-content: space-between;}
.main .bd_zine li {width: 22%; overflow: hidden; flex-grow:1}
.main .bd_zine li .tmb_wrp img.tmb {width: 100%; position: relative; left: 50%; transform:translateX(-50%)}

#section1 {/* margin-top: 7.3vw; */}
#section1 ul {display: flex; flex-wrap: wrap; gap: 5rem; justify-content:  space-between; }
#section1 ul li {width: 20%; padding-top: 23%; /* background: var(--bg3); */ flex-grow: 1; position: relative;border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
#section1 ul li a {}
#section1 ul li a img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}

#section1 ul li .name {position: absolute; font-size: 1.2rem; color: #fff; background: #000; display: flex; justify-content: center; align-items: center; padding:2px 8px; z-index: 3; right: 0; bottom: 0; display: none; }
#section1 ul li .name span {margin-left: .5rem; }
#section1 ul li:nth-last-child(-n+3) {  flex-grow: 0;}






.major {position: absolute; font-size: 1.2rem; color: aquamarine; display: flex; justify-content: center; align-items: center; padding:2px 8px; z-index: 3; left: 0; bottom: -40px; text-align: left;;}
.major.non {color: var(--pointColor1)}

li:hover .major .animated-major {animation: major .5s forwards ease-in-out; opacity: 0; position: relative;}


@keyframes major {
    0% {bottom: 0px;}
    10% {bottom: 50px; opacity: 1;}
    100% {bottom: 40px; opacity: 1;}
}






.animated-text {display: inline-block; animation: nameAni .4s forwards ease-in-out; opacity: 0; letter-spacing: -0.3em;}
@keyframes nameAni {
    0% { opacity: 0;}
    20% { opacity: 1;}
    40% { opacity: 0.3;}
    60% { opacity: 1;}
    80% { opacity: 0.5;}
    100% { opacity: 1;}
}


/* 애니메이션이 사라지는 상태 */
.animated-reset .animated-text,
.animated-reset .animated-major {
    opacity: 0 !important;
    animation: none !important;
}








.hamma1,.hamma2,.hamma3,.hamma4 {transition: .2s ease-in;}


footer {margin-top: 15vw; padding:2rem 2rem 10rem 2rem; font-size: 1.8rem; color: var(--subColor3); text-align: center; font-family: 'Monomaniac'; word-break: keep-all; border-top: 1px dashed #353535; }

footer .info .academy a {color: #555; transition: 0.2s;}
footer .info .academy:hover a {color: #aaa; }
footer .info .time span {display: block; }
footer .info .time span img {width: 30px;}
footer .info .mail span {display: block;}
footer .info .tel span {display: block;}

footer .info {}
footer .info h1 {font-size: 2rem; color: var(--subColor3); line-height: 1.2; margin-bottom: 1rem;}
footer .info h1 span { color: var(--pointColor1); font-size: 4rem; margin-right: 0.3rem;}
footer .info address {font-style: normal; color: var(--mainColor); }
footer .info .academy {display: flex; gap: 1rem; justify-content: center; margin-top: 3rem;}
footer .info a {color: var(--subColor3); padding: 2rem; border: 1px solid #333; background: rgba(255,255,255,0.02);}



/* 관리자접속 */
.admin_connecting {position:fixed; left:0; top:0; z-index:777; width:100px; height: 120px; line-height: 30px; padding-top:10px; color:#FFF; text-align: center; font-size:24px; font-weight:bold; font-family: 'Pretendard';
    background: linear-gradient(top,  #56629d, #2f3345);
 }
.admin_connecting a {display: block; background:#FFF; width:80px; margin:0 auto; margin-top:4px; font-size: 20px;}

#footer .bt_admin {position:absolute; top:20px; left:900px; display: block; width:50px; height:50px; line-height:50px; 
					text-align: center; color:#d0d0d0; border:1px solid #e1e1e1}



.today_count_sm {width:94px; height:150px; position:fixed; top:130px; left:0; background-color:#FFF; color:#FFF !important; 
				border:3px solid #454b68; font-weight:bold; z-index: 777; font-family: 'Pretendard'; }
.today_count_sm .widgetCounter {font-size: 16px !important;}
.today_count_sm a {font-size: 16px !important;}



















/************************************ subpage ****************************************/

.pageTitle {text-align: center; font-weight: 400; margin-bottom: 5rem; color: var(--html); font-size: 1.4rem; position: absolute; left: -9999px;}

/* 수업안내 */
.class_info .tab_info {font-size: 1.8rem; display: flex; justify-content: center; gap: 1rem; margin-bottom: 5rem;}
.class_info .tab_info a {color: #fff; width: 60px; height: 60px; display: flex; background: var(--subColor5);justify-content: center; align-items: center; word-break: keep-all; border-radius:  0%;color: var(--bg2); text-align: center; line-height: 1.1; animation: tabAni 0.5s forwards; border-radius:2px; opacity: 0;}
@keyframes tabAni {
    0% {transform: rotate(180deg) scale(1.3);; opacity: 0;}
    100% {transform: rotate(0deg) scale(1);opacity: 1;}
}
.class_info .tab_info a:nth-child(2) {animation-delay:0.1s; animation-duration:1s}
.class_info .tab_info a:nth-child(3) {animation-delay:0.2s; animation-duration:1s}
.class_info .tab_info a:hover {background: var(--subColor4);}
.class_info .tab_info a.on {background: var(--pointColor1); color:var(--subColor4) }
.class_info .tab_info a.on::before {content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; left: 50%; bottom: 0; transform: translate(-50%, 50%);}


/* 커리큘럼 */

.class_info .info_wrap h3 {font-size: 3rem; font-weight: normal; margin-bottom: 1rem;border-top: 1px solid #353535; color: var(--subColor1);}
.class_info .info_wrap h4 {font-size: 1.6rem; color: var(--textColor1); padding: 1rem 0;}
.class_info .info_wrap p {font-size: 1.6rem; color: var(--textColor2); margin-bottom: 2rem; padding-left: 2rem;  font-family: 'Pretendard-Light'; font-weight: 300;}

.class_info .info_wrap #info01 .class_text {color: #fff; font-family: 'Pretendard-Light'; margin: 5rem auto;line-height: 1.6; text-align: center; padding: 0; display: flex; align-items: center;  gap: 3rem;}
.class_info .info_wrap #info01 .class_text .curr01,
.class_info .info_wrap #info01 .class_text .curr02 {width: 40%; text-align: left; flex-grow: 1;}


/* Skill */

.class_info .info_wrap #info02 {color: #fff; font-family: 'Pretendard-Light'; margin: 0 auto;line-height: 1.6; text-align: center; padding: 0 0; display: flex; flex-direction: column; align-items: center; display: none; text-align: left;}
/* .class_info .info_wrap #info02 h3 {font-size: 3rem; font-weight: normal; margin-bottom: 1rem;border-top: 1px solid #353535; color: var(--subColor1);} */
.class_info .info_wrap #info02 .text {font-size: 1.6rem; color: #777; display: inline-block; text-align: left;}


/* 안내 */
.class_info .info_wrap #info03 {color: #fff; font-family: 'Pretendard-Light'; margin: 0 auto;line-height: 1.6; text-align: center; padding: 0 0; display: flex; flex-direction: column; align-items: center; display: none; text-align: left;}




.class_info .graph_wrap {position: relative;}
.class_info .graph_wrap .tabmenu {display: flex; font-size: 2rem; font-family: 'Pretendard-Light'; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 5vw}
.class_info .graph_wrap .tabmenu a {color: #fff; padding: 1rem 2.5rem; border-radius: 4px; position: relative; transition: .1s; flex-grow:1; 
word-break: keep-all;}
.class_info .graph_wrap .tabmenu a:hover::before {content: ""; ;position: absolute; width: 4px; height: 4px;border-radius: 50%;background: var(--pointColor1);left: 50%;transform: translateX(-6px); left: 50%; top: 0; transform: translateX(-50%);}
.class_info .graph_wrap .tabmenu a.on:hover::before {display: none;}



.class_info .graph_wrap .tabmenu a.on {background: #000;}
.class_info .graph_wrap .tabmenu a.illust {color:var(--illust)}
.class_info .graph_wrap .tabmenu a.photoshop {color:var(--photoshop)}
.class_info .graph_wrap .tabmenu a.figma {color:var(--figma)}
.class_info .graph_wrap .tabmenu a.design {color:var(--design)}
.class_info .graph_wrap .tabmenu a.design_feedback {color:var(--design_feedback)}
.class_info .graph_wrap .tabmenu a.html {color:var(--html)}
.class_info .graph_wrap .tabmenu a.script {color:var(--script)}
.class_info .graph_wrap .tabmenu a.portfolio_word {letter-spacing: -0.1em;}
.class_info .graph_wrap .tabmenu a.portfolio_word span {}
.class_info .graph_wrap .tabmenu a.portfolio_word span:nth-child(1) {color: #FC9551;}
.class_info .graph_wrap .tabmenu a.portfolio_word span:nth-child(2) {color: #37ABFF;}
.class_info .graph_wrap .tabmenu a.portfolio_word span:nth-child(3) {color: #874FFF;}
.class_info .graph_wrap .tabmenu a.portfolio_word span:nth-child(4) {color: #EED183;}
.class_info .graph_wrap .tabmenu a.portfolio_word span:nth-child(5) {color: #E5552D;}
.class_info .graph_wrap .tabmenu a.reset {color: #777;}


.graph_box {max-width: 1400px; margin: 0 auto; position: relative; border-bottom: 1px solid #A9A9A9; padding: 0.2rem 0; background:var(--bg4);}


.graph_box .graph_line {position: relative;}
.graph_box .graph_line div {position: relative; width: 100%; height: 1px; background: #555;margin: 20px 0;}
.graph_box .graph_line div span {position: absolute; width: 0%; height: 100%; left: 0; top: 0; z-index: 2; transition: 1s; background: #fff; /* 
    box-shadow: 0 0 1px rgba(255,255,255,1),
                0 0 2px rgba(255,255,255,1),
                0 0 3px rgba(255,255,255,1),
                0 0 4px rgba(255,255,255,1),
                0 0 5px rgba(255,255,255,1); */}

.graph_box .graph_line div.portfolio_word {width: 75%; left: 25%; }
.graph_box .graph_line div.portfolio_word span {}
.graph_box .graph_line div.portfolio_word.on span {background: linear-gradient(90deg,#FC9551, #3399E3, #7A48E3, #EED183,#E5552D); width: 100%;height: 2px; box-shadow: 0 0 10px rgba(255,255,255,0);}
.graph_box .graph_line div span::before {content: ""; position: absolute; width: 4px; height: 4px; background: #fff; transform: translateY(-1px); right: 0; opacity: 0; transition: 1s;}
.graph_box .graph_line div.on span::before {opacity: 1; background: inherit;}

.graph_box .graph_line div.script {width: 50%; left: 50%;}
.graph_box .graph_line div.script.on span {background: #2E4DDD; width: 100%; box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.html {width: 75%; left: 25%;}
.graph_box .graph_line div.html.on span {background: #E5552D; width: 100%;  box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.design_feedback {width: 75%; left: 25%;}
.graph_box .graph_line div.design_feedback.on span {background: #B5DE72; width: 100%;  box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.design {width: 75%; left: 25%;}
.graph_box .graph_line div.design.on span {background: #EED183; width: 100%; box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.figma {width: 80%; left: 20%; }
.graph_box .graph_line div.figma.on span {background: #874FFF; width: 100%; box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.photoshop {width: 40%; left: 10%;}
.graph_box .graph_line div.photoshop.on span {background: #37ABFF; width: 100%; box-shadow: 0 0 10px rgba(255,255,255,0);}

.graph_box .graph_line div.illust {width: 10%;}
.graph_box .graph_line div.illust.on span {background: #FC9551; width: 100%; box-shadow: 0 0 10px rgba(255,255,255,0);}


.graph_box .vertical_line {position: absolute; bottom: 0; width: 100%; height: 100%; }
.graph_box .vertical_line span {width: 1px; height: 100%; border: none;
    background:
      linear-gradient(to right, #6b6b6b 50%, transparent 50%) repeat-x,
      linear-gradient(to bottom, #6b6b6b 50%, transparent 50%) repeat-y;
    background-size: 10px 2px, 2px 10px;  position: absolute; color: var(--subColor3); font-size: 1.5rem; transform: translateX(-50%);}
.graph_box .vertical_line span::before {content: ""; position: absolute; width: 100%; height: 10px; background: var(--subColor3); bottom: -11px; }
.graph_box .vertical_line span i {position: absolute; width: 40px; font-style: normal; bottom:-35px; transform: translateX(-50%); }
.graph_box .vertical_line span:nth-child(1) {left: 0;}
.graph_box .vertical_line span:nth-child(2) {left: 20%;}
.graph_box .vertical_line span:nth-child(3) {left: 40%;}
.graph_box .vertical_line span:nth-child(4) {left: 60%;}
.graph_box .vertical_line span:nth-child(5) {left: 80%;}
.graph_box .vertical_line span:nth-child(6) {left: 100%;}



.login #section_sub {padding-top: 0vw;margin: 0 auto;max-width: 1200px;}
.class_info #section_sub {padding-top: 0vw;margin: 0 auto;max-width: 1200px;}
.target #section_sub {padding-top: 3vw;margin: 0 auto;max-width: 1200px;}
.ban #section_sub {padding-top: 3vw;margin: 0 auto;max-width: 1200px;}
.review #section_sub {padding-top: 3vw;margin: 0 auto;max-width: 1200px;}
.faq_merong #section_sub {padding-top: 3vw;margin: 0 auto;max-width: 1200px;}
.contact_merong #section_sub {padding-top: 3vw;margin: 0 auto;max-width: 1200px;}
.contact_merong #section_sub #contact_table th {padding: 18px 8px;}


/* 우리반 */

#section_box {  margin-top:10rem; }
.ban {max-width: 1000px; margin:0 auto 0 auto;}
.ban .major {font-size: 1.8rem; position: absolute; bottom: 0; z-index: 3; background: #000;}
.ban .major .period {font-family: 'Pretendard-Light';}

.ban #section_sub ol {}
.ban #section_sub ol li.clear {position: relative; height: 350px; margin-bottom: 8vw; border-radius: 5px; overflow: hidden;;}
.ban #section_sub ol li.clear .className {font-size: 2rem; color: #fff; padding:0.7rem 1.5rem; position: absolute; z-index: 2; background: rgba(0,0,0,0.9); border-radius: 0 7px 0 0; bottom: 2rem;}
.ban #section_sub ol li.clear .className .animated-text {letter-spacing: 0em;}
/* .ban #section_sub ol li.clear a {display: block; height: 100%; position: relative;} */
/* .ban #section_sub ol li.clear a > img {width: 100%; height: 100%; object-fit: cover;} */
.ban #section_sub ol li.clear a img audio {}
.ban #section_sub ol li.clear a .btn_play {position: absolute; width: 40px; height: 40px; background: #fff; top: 1rem; right: 1rem; border-radius:  50%; padding: 10px; box-shadow: 10px 10px 30px rgba(0,0,0,0.6); animation: tong 0.3s infinite alternate; cursor: pointer;}
@keyframes tong {
    0% {transform: scale(1);}
    100% {transform: scale(1.1);}
}
.ban #section_sub ol li.clear a .btn_play svg {width: 80%; padding: 2px; }
.ban #section_sub ol li.clear a .btn_play svg path {stroke: #999;}
.ban #section_sub ol li.clear a .btn_play svg.playing {}
.ban #section_sub ol li.clear a .btn_play svg.playing path {stroke: var(--svgColor1);}

.ban .bd_zine.zine li:first-child, .bd_tb_lst.common_notice tr:first-child td {border: 0;}
.ban .bd_tb_lst td, .bd_zine li, .bd_zine.zine .info span {border: 0;}
.ban .bd_zine>li>a {border: 0;}
.ban .bd_zine.zine .tmb_wrp img, .bd_zine .no_img {border: 0;}
.ban .tmb_wrp img.tmb {background: none;}
/* .ban .et_vars tr.bg1 {display: none;} */


.playing {
    animation: shake 0.4s infinite;
}

@keyframes shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(20deg); }
    75% { transform: rotate(-20deg); }
    100% { transform: rotate(0deg); }
}






/* 우리반 이퀄라이져 효과 */
.equalizer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100px;
    height: 30px;
    opacity: 0;
    transition: opacity 0.1s;
    position: absolute; top: 20px; right: 100px;
    z-index: 3;
}

.equalizer span {
    display: inline-block;
    width: 3px;
    background: #fff;
    animation: none;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.active.equalizer {
    opacity: 1;
}

.active.equalizer span {
    animation: equalizerAnimation 0.5s infinite ease-in-out;
}

.active.equalizer span:nth-child(1) { animation-delay: 0s; }
.active.equalizer span:nth-child(2) { animation-delay: 0.2s; }
.active.equalizer span:nth-child(3) { animation-delay: 0.4s; }
.active.equalizer span:nth-child(4) { animation-delay: 0.6s; }
.active.equalizer span:nth-child(5) { animation-delay: 0.8s; }
.active.equalizer span:nth-child(6) { animation-delay: 0.2s; }
.active.equalizer span:nth-child(7) { animation-delay: 0.3s; }
.active.equalizer span:nth-child(8) { animation-delay: 0.1s; }
.active.equalizer span:nth-child(10) { animation-delay: 0.5s; }
.active.equalizer span:nth-child(11) { animation-delay: 0.7s; }
.active.equalizer span:nth-child(12) { animation-delay: 0.3s; }
.active.equalizer span:nth-child(13) { animation-delay: 0.6s; }
.active.equalizer span:nth-child(14) { animation-delay: 0.2s; }
.active.equalizer span:nth-child(15) { animation-delay: 0.7s; }

@keyframes equalizerAnimation {
    0%, 100% { height: 5px; }
    50% { height: 20px; }
}












/* xe 우리반 */
.ban .bd_lst_wrp .bd_lst .clear {margin-bottom: 150px;margin-bottom: 8vw; border-radius: 5px;}
.ban .bd_zine.zine .rt_area {height: 100%; border-radius:10px;}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp {position: relative; height: 100%;}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .className {font-size: 2.5rem; color: #fff; padding:0.7rem 1.5rem; position: absolute; z-index: 2; background: rgba(0,0,0,0.9); border-radius: 0 7px 0 0; bottom: 2rem;}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .className .animated-text {letter-spacing: 0em;}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .btn_play {position: absolute; width: 40px; height: 40px; background: #fff; top: 1rem; right: 1rem; border-radius:  50%; padding: 10px; box-shadow: 10px 10px 30px rgba(0,0,0,0.6); animation: tong 0.3s infinite alternate; cursor: pointer; z-index: 3;}
@keyframes tong {
    0% {transform: scale(1);}
    100% {transform: scale(1.1);}
}

.ban .bd_lst_wrp .bd_lst .clear img.tmb {width: 100%; height: 100%; object-fit:cover}


.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .btn_play svg {width: 80%; padding: 2px; }
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .btn_play svg path {stroke: #999;}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .btn_play svg.playing {}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .btn_play svg.playing path {stroke: var(--svgColor1);}
.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp img.tmb {width: 100%; height: 100%; object-fit:cover;}
.ban .bd_lst_wrp .bd_lst .clear .ngeb {display: none;}
.ban .bd_lst_wrp .bd_lst .clear .info {display: none;}

.ban .fdb_lst_wrp .fdb_lst_ul li .xe_content {font-size: 1.8rem; display: inline-block; padding: 0 1rem;}
.ban .fdb_lst_wrp .fdb_lst_ul li:nth-child(n) .xe_content {background: var(--reply1);}
.ban .fdb_lst_wrp .fdb_lst_ul li:nth-child(2n) .xe_content {background: var(--reply2);}
.ban .xe_content {color: #fff;}

.ban .bd_lst_wrp .bd_zine.zine>li {padding: 0;}
.ban .bd_lst_wrp .bd_zine>li>a {width: 100.5%;}

.fdb_itm .meta a, .fdb_lst .meta b {color: var(--bg3);}

.ban .rd_body .et_vars td {color: var(--bg3); font-size: 1.7rem; background: var(--bg1);}

.rd_hd .board .nick {font-size: 1.4rem; color: #999;}
.ban .rd_hd .btm_area span, .rd_hd .board .cate {font-size: 1.2rem	;}
.ban .rd_hd .top_area, .rd_hd .btm_area, .rd_hd h1, .rd_hd .blog .btm_area b {text-shadow:0 0 0 transparent !important}
article p {color: var(--bg3);}

.bd_tb_lst td {line-height: 2rem; padding: 1rem 0;}
.rd_hd .board h1 {font-size: 1.6rem;}
.bd_tb_lst td.title {font-size: 1.5rem; font-family: 'Pretendard-ExtraLight'; font-weight: 200; letter-spacing:.1em;}
.bd_tb_lst td.title a {}
.bd_zine h3 {font-size: 1.7rem;font-family: 'Pretendard-ExtraLight'; font-weight: 200; letter-spacing:.1em; text-shadow:0 0 0; color: var(--bg3);}
.bd_zine .big_date .yy, .bd_zine .info * {color: var(--bg3) !important;}
.bd_tb_lst td, .bd_zine li, .bd_zine.zine .info span {border-color:#ddd !important;}
.bd_zine.zine .info {font-size: 1.3rem;}



/* 후기 */
.review .rd_body article .xe_content p span {color: var(--bg3) !important; font-size: 1.7rem !important;}
.review .rd_hd .board {background: #222;}
.review .rd_hd .board .top_area {background: none;}
.review .bd_zine .cnt {font-size:1.8rem; color:var(--bg3)}
.review .xe_content {color:var(--textColor3)}


/* 선배의한줄 */
.review #bd_717_0 .bd_lst_wrp ol li {border-bottom: 1px solid #aaa !important; }
.review #bd_717_0 .bd_lst_wrp ol li a:hover {border: 1px solid var(--bg3) !important; background: rgba(0,0,0,0.1); }
.review #bd_717_808 .bd_lst_wrp ol li {border-bottom: 1px solid #aaa !important; }
.review #bd_717_808 .bd_lst_wrp ol li a:hover {border: 1px solid var(--bg3) !important; background: rgba(0,0,0,0.1); }



/* faq */
.faq_merong #section_sub .bd_faq>li {border: 1px solid #333; padding: 0;margin-bottom: -1px;}
.faq_merong #section_sub .bd_faq>li:hover, .bd_faq .open, .bd_faq .notice {background: rgba(255,255,255,0.1);}
.faq_merong #section_sub .bd_faq>li >a{padding: 14px 14px 14px 50px; box-sizing:border-box; }
.faq_merong #section_sub .bd_faq>li a{color: #fff;}
.faq_merong #section_sub .bd_faq .editArea {display: none;}
.faq_merong #section_sub .bd_faq>li a .tl, .bd_faq .open a, .bd_faq .notice a {display: inline-block; height: 100%; color: var(--bg3);}
.faq_merong #section_sub .bd_faq .q {font-size: 1.5rem; width: 100%;}
.faq_merong #section_sub .bd_faq .a {padding: 14px 14px 40px 52px; background: var(--bg2);}
.faq_merong #section_sub .xe_content {font-size: 1.5rem; color: var(--bg3);}
.faq_merong #section_sub .xe_content p{color:#ffcf85;}
.faq_merong #section_sub .bd_faq .fr .nick,
.faq_merong #section_sub .bd_faq .fr .date {display: none;}
.faq_merong #section_sub .bd_faq .mrk {top: 12px;left: 12px;}
.faq_merong #section_sub .tag {display: none;}
.faq_merong #section_sub .itx_wrp:nth-child(3),
.faq_merong #section_sub .itx_wrp:nth-child(4){display: none;}


/* 문의 contact */
.contact_merong #contact_table {background: rgba(255, 255, 255, 0.15); border-radius: 20px; overflow: hidden;}
.contact_merong #contact_table td {border-bottom: 1px solid rgba(255,255,255,0.1);}
.contact_merong #contact_table td input.text, #contact_table td input.date, #contact_table td input.tel {}
.contact_merong #mail_content ul {color: #fff;}
.contact_merong .contact_submit, .contact_merong .contact_confirm {border-radius:0;-webkit-border-radius:0; background: #000; border: 0; -webkit-box-shadow: none; box-shadow: none; background:var(--bg3); color: var(--bg1);}

.contact_merong #section_sub #contact_table td input {width: 50%; min-width: 200px;}
.contact_merong #section_sub #contact_table td input.text, 
.contact_merong #section_sub #contact_table td input.date, 
.contact_merong #section_sub #contact_table td input.tel {border-radius:1rem}
.contact_merong #section_sub #contact_table td textarea {border-radius:1rem; box-sizing:border-box}
.contact_merong #section_sub .message {font-size: 1.5rem;}
.contact_merong #section_sub #contact_table th {width:auto; max-width: 100px;}
.contact_merong #section_sub .send {display:flex; justify-content:center;}
.contact_merong #section_sub .contactTitleText {font-size: 0; color: transparent;}
.contact_merong #section_sub .contactTitleText:after {content:""; font-size: 1.8rem; color: var(--bg3);}

/* ============================반응형============================== */


















@media screen and (max-width: 1600px) {
    #wrap {padding: 0 8rem;}
    #section1 ul li {width: 30%; padding-top: 30%; }
	/* xe우리반 */
	.ban .bd_lst_wrp .bd_lst .clear { margin-bottom: 8vw; border-radius: 5px; overflow: hidden;}
	.ban .bd_zine.zine .rt_area {width: 100%; height: 100%; border-radius:10px;}
	.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp {width: 100%; height: 100%;}
	.ban .bd_lst_wrp .bd_lst .clear img.tmb {width: 100%; height: 100%; object-fit:cover}
}

@media screen and (max-width: 1200px) {
	html {font-size: 9px;}
    #wrap {padding: 0 5rem;}
    header h1 {top: 0; }
    #section1 ul {gap: 3rem;}
    #section1 ul li {width: 25%; padding-top: 25%; }


	/* sub */
	.main .bd_tmb_lst {gap:2rem}
	.main .bd_tmb_lst li {width: 27%; }

    /* 수업안내 */
    .class_info .class_text {margin:8rem auto 5rem auto;}
    .class_info .graph_wrap .tabmenu a {padding: 0.5rem 2rem;}
	

    footer {margin-top: 15rem; }
}

@media screen and (max-width: 900px) {
    
    .pc {display: none !important;}
    .mo {display: block !important;}

    #wrap {padding: 0 3rem;}
    header nav.menu_pc {display: none;}
    #section1 {margin-top: 8rem;}
    #section1 ul {gap: 3rem;}

        
    .hamburger.lefthand {position: fixed; left: 3rem; bottom: 3rem; box-shadow: 0 0 10px rgba(0,0,0,0.3); background: var(--bg1); animation: hamAni 0.5s forwards;transform: rotate(-360deg);}
    .hamburger.lefthand nav.menu  {bottom: 16px; left: 16px; top: auto;}
    .hamburger.righthand {position: fixed; left: calc(100vw - 6rem); /* 27=hamburger size */bottom: 3rem; box-shadow: 0 0 10px rgba(0,0,0,0.3); background: var(--bg1); animation: hamAni 0.5s forwards; transform: rotate(360deg);}
    .hamburger.righthand nav.menu  {bottom: 16px; right: 16px; top: auto;}

    @keyframes hamAni {
        0% {bottom: -30rem;}
        100% {bottom: 3rem;}
    }

	.pageTitle {display: block; position: relative; left: 0px; }
	.pageTitle .breadcrumb {display: flex; justify-content:center; }
	.pageTitle .breadcrumb a {display: flex; justify-content:center; color: var(--html); }

	/* 커리큘럼 */
	.class_info .graph_wrap .tabmenu a {width: 20%; text-align: center; border: 1px solid #555;}

    /* 우리반 */
    .ban #section_sub ul li {margin-bottom: 50px;}

}

@media screen and (max-width: 768px) {
    #wrap {padding: 0 2rem;}
    header {justify-content: center; height: 230px;}
    header .student {position: absolute; top: 20px; left: 0vw;}
    header h1 {margin-top: 110px;  /* position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); */ width: 100%;}
    header h1 strong {letter-spacing: 1.3vw;}
    header .topset {margin-top: 100px;}
    header .btn_box {position: absolute; top: 20px; right: 0vw; gap: 4vw;}
	.bright_mode {top: 20px; right: 0vw; gap: 4vw;}
	
	header .bt {right: auto; left: -20px;}

    #section1 ul {gap: 2rem;}
    #section1 ul li {width: 45%; padding-top: 35%; }
    
    footer .info a {padding:4rem 3vw;}


	/* xe우리반 */
	.ban .bd_lst_wrp .bd_lst .clear .rt_area .tmb_wrp .className {font-size: 1.8rem;}
	.ban .major {font-size: 1.4rem;}
	.ban .bd_lst_wrp .bd_lst .clear {height: 200px;}

	.faq_merong .bd .itx_wrp label {top: auto; left: auto;}
}



@media screen and (max-width: 640px) {
	/* sub */
	.main .bd_tmb_lst {gap:1rem}
	.main .bd_tmb_lst li {width: 45%; }
	.main .bd_tmb_lst .tmb_wrp {width: 95%;}
}


@media screen and (max-width: 470px) {
    #section1 ul li {width: 40%; padding-top: 40%; }

	/* 커리큘럼 */
	.class_info .graph_wrap .tabmenu a {width: 22%; }
}

@media screen and (max-width: 350px) {
    header h1 strong {letter-spacing: 0.4rem;}
    #section1 ul li {width: 80%; padding-top: 60%; }

}

/* @media (hover: hover) {
    *:hover {
        background-color: blue;
        color: white;
    }
} */


/* 가로 모드 적용을 위한 클래스 추가 */
.hamburger.on nav.menu.horizontal {
    width: calc(100vw - (2 * (80px + 36px + 30px + 13px + 28px))); /* 가로로 확장 */
    min-width: 450px;
    height: 200px; /* 높이 조절 */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 1rem;
}

.hamburger.on nav.menu.horizontal .gnb {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0rem;
    padding: 1rem;
}

.hamburger.on nav.menu.horizontal .gnb li {
    display: inline-block;
    line-height: 1;
    border-bottom: none;
    border-right: 1px solid #d84141;
}
.hamburger.on nav.menu.horizontal .gnb li:last-child {
    border-right: 0px solid #d84141;
}

.hamburger.on nav.menu.horizontal .gnb li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 3rem;
}