@charset "utf-8";
@import url("https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

body,
input,
select,
textarea,
button {
  border: none;
  font-size: 14px;
  font-family: "Noto Sans KR", sans-serif;
  color: #222222;
  letter-spacing: -0.5px;
}

select {
  height: 44px;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  color: #222;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #fff url("../images/select_arrow.svg") no-repeat 95% 50%;
  /*셀렉트박스 기본화살표 삭제*/
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
}
select::-ms-expand {
  display: none;
} /*ie*/
input[type="tel"],
input[type="time"],
input[type="text"],
input[type="password"],
input[type="search"],
input[type="email"],
input[type="file"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea {
  width: 100%;
  height: 44px;
  font-size: 14px;
  color: #222;
  border: 1px solid #ddd;
  background: #fff;
  text-indent: 10px;
  transition: all 0.5s;
  vertical-align: middle;
}
input::-webkit-input-placeholder {
  color: #999;
  font-size: 14px;
  line-height: 100%;
}
textarea {
  padding: 5px 0;
}
select:focus,
textarea:focus,
input:focus {
  border: 1px solid #727272;
}

input[type="tel"][readonly],
input[type="text"][readonly],
input[type="password"][readonly],
input[type="email"][readonly],
input[type="search"][readonly],
input[type="tel"][disabled],
input[type="text"][disabled],
input[type="password"][disabled],
input[type="search"][disabled],
input[type="email"][disabled] {
  background: #eaeaea;
  border-color: #ddd;
  color: #666;
  -webkit-appearance: none;
  font-size: 14px;
}
textarea[readonly],
textarea[disabled] {
  padding: 11px;
  font-size: 14px;
  color: #666;
  font-weight: normal;
  line-height: 140%;
  height: 78px;
  background: #eaeaea;
  border: 1px solid #ddd;
}
.m_hide {
  display: none;
}
/*회원정보 메뉴*/
#util {
  z-index: 600000;
  display: none;
}
#util ul {
  float: left;
}
#util ul li:nth-child(3) {
  display: none;
}
#util ul li:nth-child(2)::after {
  display: none;
}
#util ul li a {
  font-size: 12px;
}

.m_close .xi-close-thin {
  display: block;
}

#util.active,
#gnb.active {
  display: block;
}

/************header 상단 고정************/
.GNBWrap {
  top: 0;
}

.GNBWrap .container {
  padding: 0;
}
/*로고*/
.GNBWrap h1 {
  display: block;
  background-size: 144px 30px;
  background-position: 20px 10px;
  width: 100vw;
  height: 52px;
  margin-top: 0;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/*GNB*/
#gnb {
  z-index: 50000;
  position: absolute;
  top: 40px;
  left: 0;
  display: none;
}

#gnb nav {
  background-color: #eff2f7;
  height: 100vh;
}

#gnb nav > ul {
  flex-direction: column;
  height: 312px;
  text-align: left;
  justify-content: flex-start;
  width: 140px;
}
#gnb nav > ul > li {
  position: static;
}
#gnb nav > ul > li.on {
  background-color: #fff;
}
#gnb nav > ul > li.on > a {
  color: #649dcc;
}

#gnb nav > ul > li:hover > a::after {
  display: none;
}

#gnb nav > ul > li > a {
  min-width: 140px;
  height: 52px;
  line-height: 52px;
  font-size: 15px;
  color: #222;
  font-weight: 500;
  padding-left: 20px;
}

#gnb nav + div {
  display: none;
}
.m_search .xi-search,
.m_menu .xi-bars {
  display: block;
}
.m_menu {
  display: block;
}

/*서브메뉴*/
#gnb nav > ul ul {
  display: none;
  position: absolute;
  width: calc(100vw - 140px);
  height: 100vh;
  left: 140px;
  top: 0;
  text-align: left;
  padding-top: 0;
  opacity: 0;
  z-index: 100;
  background-color: #fff;
}
#gnb nav > ul li.on ul {
  display: block;
  opacity: 1;
  transition: none;
}

#gnb nav > ul ul::after {
  display: none;
}

#gnb nav > ul ul li {
  height: 48px;
  line-height: 48px;
  border-bottom: 1px solid #ddd;
  margin: 0 20px;
}
#gnb nav > ul ul a {
  font-size: 15px;
  color: #222;
  transition: all 0.5s;
}
#gnb nav > ul ul a:hover {
  text-decoration: none;
}
/*******************************************************index 시작**************************************************************/
/**************************  main swiper *************************/
.swiper1 {
  height: 280px;
  margin-top: 52px;
  width: 100vw;
}
.swiper1 .swiper-button-next,
.swiper1 .swiper-button-prev {
  display: none;
}
/** 우진추가 **/
#swiper-button-next,
#swiper-button-prev {
  display: none;
}
/** 우진추가 끝 **/
.swiper-slide.bg1 {
  background: url("../images/mainbn01_m.png") no-repeat center / cover;
  background-color: #007CCF;
  background-size: auto 100%;
}
.swiper-slide.bg2 {
  background: url("../images/mainbn02_m.png") no-repeat center / cover;
  background-color:  #f4c651;
  background-size: auto 100%;
}
.swiper-slide.bg3 {
  background: url("../images/mainbn03_m.png") no-repeat center / cover;
  background-color: #361110;
  background-size: auto 100%;
}
.swiper-slide.bg4 {
  background: url("../images/mainbn04_m.png") no-repeat center / cover;
  background-color: #000;
  background-size: auto 100%;
}
.swiper-slide.bg5 {
  background-image: url("../images/mainbn05_m.png"), linear-gradient(90deg, #00A5B0 50%, #AC3273 50%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}
h3.bn1_title {
  font-size: 24px;
  margin-bottom: 8px;
}
h3.bn1_title::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background-color: #fff;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}
.textWrap {
  padding: 12px 20px;
  position: relative;
  width: calc(100vw - 30px);
}
.textWrap::before {
  display: none;
}

p.bn1_txt1 {
  font-size: 15px;
  letter-spacing: -1;
}
p.bn1_txt2 {
  font-size: 13px;
  margin: 2px 0 12px 0;
  padding: 0 60px;
}

/**************************강좌 리스트*******************************/
/**탭메뉴**/
nav.maintabMenu ul {
  display: flex;
  border-bottom: 2px solid #69090a;
  height: 60px;
  margin: 20px 0 10px 0;
  width: 100%;
}
nav.maintabMenu ul li {
  flex: 1;
  border: 1px solid #ddd;
  border-left: none;
  border-bottom: none;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav.maintabMenu ul li:first-child {
  border-left: 1px solid #ddd;
}
nav.maintabMenu ul li a {
  position: absolute;
  font-size: 15px;
  font-weight: 500;
  color: #222;
  display: inline-block;
  text-align: center;
  padding: 0 10px;
  line-height: 20px;
  height: auto;
  top: 50%;
  transform: translateY(-50%);
}
nav.maintabMenu ul li.on {
  position: relative;
  height: 58px;
  border-color: #69090a;
  border-bottom: 2px solid #69090a;
  background-color: #69090a;
}
nav.maintabMenu ul li.on a {
  color: #fff;
}
.maintabTxt{
  font-size: 15px;
  background-color: #EFF2F7;
  border-radius: 10px;
  text-align: center;
  padding: 12px 0;
  margin-bottom: 10px;
  letter-spacing: -1px;
}
/*강좌 목록*/
/**listWrap : 썸네일 콘텐츠**/
.mainlistThumb {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.mainlistThumb .column {
  width: calc(calc(100% - 24px) / 2);
}
.mainlistThumb .column:nth-child(2n + 0) {
  margin-right: 0;
}

.mainlistThumb .column p{
  font-size: 14px;
}
.mainlistThumb .column .thumbTitle {
  line-height: 18px;
  margin-bottom: 2px;
}
/*****************************온라인 오디션 배너 추가****************************/
.auditionbnWrap{
  height: 180px;
}
.auditionbnWrap img{
  height: 50%;
  width: auto;
  margin-bottom: 14px;
}
.auditionbnWrap p{
  margin-left: 12px;
  font-size: 12px;
}
/**************************program 추가*******************************/
.programWrap{
  padding: 0 16px;
}
.program_t{
  font-size: 16px;
  margin: 20px 16px 8px 16px;
}
.programList{
  flex-wrap: wrap;
  margin: 0 0 20px 0;
}
.programList li{
  width: calc(calc(100vw - 32px) / 2);
  height: calc(calc(100vw - 32px) / 2);
}
@media screen and (min-width: 500px) and (max-width: 768px) {
  .programList li{
    width: calc(calc(100vw - 56px) / 2);
    height: calc(calc(100vw - 56px) / 2);
  }
}


.programList li p{
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  position: absolute;
  top: calc(100% - 40px);
}
.programList li.programTitle p{
  font-size: 13px;
  line-height: 20px;
  padding: 12px;
  width: calc(100% - 24px);
}
.programList li.programTitle p span{
  font-size: 13px;
}
.programList li.programTitle img{
  position: absolute;
  width: 32px;
  height: 32px;
  padding: 12px;
  right: 0;
  bottom: 0;
}
.programList li .hover{
  line-height: 18px;
}
.programList li .hover p{
  font-size: 18px;
}
.programList li .hover span{
  font-size: 13px;
}



/**************************  section1 *************************/
.section1 {
  display: flex;
  flex-direction: column;
}
.section1_bg{
  height: 160px;
  width: 100vw;
  flex:auto;
  background-position: 120% 0;
}
.reasonCon:nth-child(1),
.reasonCon:nth-child(2),
.reasonCon:nth-child(3),
.reasonCon:nth-child(4)
{
  margin-left: 0;
}
.reasonCon img{
  width: 28px;
  height: auto;
  margin-top: 6px;
}
.section1_conWrap{
  margin: 0 auto;
  padding: 20px 0;
  margin-bottom: 10px;
}
.reasonCon p{
  font-size: 13px;
  padding: 16px 0 0 6px;
}

.reasonCon p span{
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -1px;
}
/*************************  section2 *************************/
.section2 {
  margin: 0 16px;
}
.st2_title{
  font-size: 20px;
  padding-top: 20px;
  letter-spacing: -1px;
}
.st2_title span{
  display: block;
}
.coursetxt {
  margin-top: 12px;
  padding-bottom: 20px;
}
.coursetxt p {
  font-size: 14px;
  padding: 0 20px;
}
.courseWrap {
  flex-direction: column;
  margin-top: 0;
  padding: 0 20px 30px 20px;
}
.courseWrap img{
  transform: rotate(90deg);
  width: 30px;
  height: 56px;
}
.courseStep {
  width: 160px;
  height: 160px;
}
.courseStep p {
  font-size: 18px;
}
.courseStep span {
  font-size: 16px;
  line-height: 22px;
}
.courseStep span.lineover{
  display: block;
}
.courseStep span.txt {
  font-size: 14px;
  margin-top: 12px;
  padding: 4px 22px 4px 12px;
  border-radius: 20px;
  background-color: rgba(255, 255, 255, 0.7);
  color: #7FAE20;
}
.courseStep span.txt::after{
  content: "\e93f";
  font-family: "xeicon";
  position: absolute;
  top:4.5px;
}
/*************************  section3 *************************/
.section3 {
  margin: 16px;
}
.sect_title {
  font-size: 17px;
  margin-top: 12px;
}
.st3_title{
  font-size: 20px;
  padding-top: 20px;
  letter-spacing: -1px;
}
.st3_title span{
  display: block;
}

.coachingWrap {
  flex-direction: column;
  margin-top: 20px;
  position: relative;
}
.coachingStep {
  width: 200px;
  height: 120px;
}
.coachingWrap img{
  transform: rotate(90deg);
  width: 30px;
  height: 60px;
}
.coachingStep p {
  color: #ffd546;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 20px;
  position: relative;
}
.coachingStep p::after {
  content: "";
  position: absolute;
  width: 10px;
  border-top: 2px solid #fff;
  top: 36px;
  left: 50%;
  transform: translateX(-50%);
}
.coachingStep span {
  font-size: 15px;
}
.st3BtnWrap{
  flex-direction: column;
  padding:20px 0 30px 0;
}
.st3BtnWrap .st3Btn{
  font-size: 17px;
  width: 240px;
  height: 50px;
  line-height: 50px;
  border: 2px solid #03A69C;
  color:#03A69C;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: -1px;
  background-color: #fff;
  position: relative;
}
.st3BtnWrap .st3Btn:nth-child(1){
  margin-right: 0;
  margin-bottom: 10px;
  border: 2px solid #2D991C;
}

.btnCenter {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btnCenter div:last-child{
  margin-top: 10px;
  margin-left: 0;
}
.btnF_L.inline,
.btnO_L.inline  {
  width: calc(100vw - 32px);
  padding: 0;
  margin: 0;
}

/*************************  sectio4 * *************************/
.section4 {
  margin: 16px;
}
.st4_title span{
  color: #FFDB1E;
  font-weight: 500;
}
.st4_title{
  font-size: 20px;
  padding-top: 20px;
  letter-spacing: -1px;
}
.st4_title span{
  display: block;
}
.st4_txtWrap{
  padding: 16px 20px;
  display: inline-block;
  border-radius: 20px;
  margin: 16px 0;
  font-size: 15px;
  line-height: 20px;
}
.st4_txtWrap p{
  margin-bottom: 16px;
}
.st4_txtWrap p span{
  display: block;
}
.st4_txtWrap p img{
  width: 12px;
  height: auto;
}
.st4txt2{
  font-size: 15px;
}
.st4txt2 p span{
  display: block;
}
.st4BtnWrap{
  padding:20px 0 30px 0;
}
.st4Btn{
  font-size: 17px;
  width: 240px;
  height: 50px;
  line-height: 50px;
}
/************************* NEWS *************************/
.indexTitle {
  font-size: 20px;
  font-weight: 500;
  margin-top: 40px;
}
.indexTitle::after {
  content: "";
  position: absolute;
  background-color: #f44a51;
  width: 4px;
  height: 12px;
  border-radius: 10px;
  transform: rotate(45deg);
  top: -24px;
  left: 50%;
}
.indexTitleSub {
  font-size: 15px;
  padding: 0 20px;
  margin-bottom: 20px;
}
.news {
  display: block;
  position: relative;
}
select.news_menu {
  display: block;
  width: calc(100% - 78px);
  margin-left: 10px;
  background: #fff url("../images/select_arrow.svg") no-repeat 95% 50%;
  /*셀렉트박스 기본화살표 삭제*/
  appearance: none;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
}
.newsWrap {
  width: 100%;
  height: 320px;
}

.newsMenu ul {
  display: none;
}

.more {
  font-size: 14px;
  line-height: 50px;
}
.newslist {
  flex-wrap: wrap;
  margin-top: 12px;
}
.newsitems {
  width: calc(calc(100% - 62px) / 2);
  height: 118px;
  padding: 10px 12px;
}
.newsitems:nth-child(2) {
  margin-right: 0;
}
.newsitems:nth-child(3) {
  margin-top: 10px;
}
.newsitems p.title {
  font-size: 13px;
  margin-bottom: 6px;
}

.newsitems p.newsCon {
  font-size: 12px;
  -webkit-line-clamp: 4;
}

.helfWrap {
  width: calc(50% - 28px);
  min-width: 0;
  padding: 12px;
  margin-left: 0;
  position: absolute;
  top: 208px;
  right: 0;
  height: 118px;
}
.helfWrap img {
  width: 100px;
  height: auto;
}
.inline_t {
  display: flex;
  align-items: center;
}
.inline_t p {
  margin-right: 4px;
}
.inline_t p:last-child {
  margin-right: 0;
}

.helfWrap p {
  font-size: 16px;
}
.helfWrap p.num {
  font-size: 16px;
}
.helfWrap span {
  font-size: 10px;
}
.btn_flex {
  margin-top: 10px;
}
.btn_flex div {
  position: relative;
  color: #fff;
  font-size: 11px;
  margin-right: 16px;
}
.btn_flex div:last-child {
  margin-right: 0;
}
.btn_flex div::after{
  display: none;
}
/*
.btn_flex div::after {
  content: "";
  position: absolute;
  background: url("../images/icon_arrow.png") no-repeat center / cover;
  width: 13px;
  height: 13px;
  top: 2px;
  right: -16px;
}
*/
/*******************************************************index 끝**************************************************************/

/************서브페이지 전체레이아웃&폰트 스타일************/
/*상단 이미지&터이틀*/
.sub-visual {
  position: absolute;
  top: 52px;
  width: 100vw;
  height: 200px;
  /**background: no-repeat center / cover; 적용 안됨**/
}
.sub-visual .container {
  flex-direction: column;
  padding: 0;
}
.titleWrap {
  border-left: none;
}
.titleWrap h2 {
  padding-top: 26px;
  font-size: 26px;
}
.titleWrap span {
  font-size: 15px;
  padding-left: 12px;
}

/*서브페이지 메뉴 셀렉트박스*/
.select-navWrap {
  border: none;
  height: 48px;
  width: 100vw;
}
.select-nav div.home {
  display: none;
}

.select-nav .depth1,
.select_wrap ul li {
  font-size: 14px;
}
.select_wrap .default_option:before {
  content: "";
  position: absolute;
  top: 16px;
  right: 24px;
  width: 8px;
  height: 8px;
  border: 1px solid;
  border-color: transparent transparent #fff #fff;
  transform: rotate(-45deg);
}

/*버튼&폰트 스타일*/
.btnF_S {
  padding: 0 10px;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
}
.btnF_S_W {
  padding: 0;
  height: 36px;
  width: 76px;
  line-height: 36px;
  font-size: 13px;
}
.btnO_S_W {
  padding: 0;
  height: 34px;
  width: 76px;
  line-height: 34px;
  font-size: 13px;
}
.btn_reply,
.btn_noreply {
  height: 34px;
  width: 64px;
  line-height: 34px;
  font-size: 13px;
}
.btnF_M {
  /*기본 버튼 / 회원가입에 하나*/
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
.btnO_M {
  padding: 0 16px;
  height: 38px;
  line-height: 38px;
  font-size: 14px;
}
.btnF_L {
  height: 44px;
  line-height: 44px;
  font-size: 14px;
}
.btnO_L {
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}
.btn_play {
  width: 24px;
  height: 24px;
  background: url("../images/btn_play.svg") no-repeat center / contain;
  margin: 0 auto;
}
.btn_file {
  width: 24px;
  height: 24px;
  background: url("../images/btn_file.svg") no-repeat center / contain;
  margin: 0 auto;
}
/******************************표 스타일****************************************/
/*기본표 스타일*/
.Board th {
  font-size: 13px;
  height: 24px;
  line-height: 16px;
  padding: 8px;
}
.Board td {
  font-size: 13px;
  height: 24px;
  line-height: 16px;
  padding: 8px;
}
/*th이 세로로 있는 표스타일*/
.Board.vtcl tr td:first-child {
  font-size: 13px;
}

/*tr이 홀수열에 있는 표*/
.Board.odd tr td:nth-child(odd) {
  font-size: 13px;
}
.BoardCon {
  padding: 10px;
}
.boardPager li.m_hide {
  display: none;
}
.Board.pay tr td:nth-child(1),
.Board.pay tr td:nth-child(3) {
  width: 52px;
}

.Board.pay select#pay {
  font-size: 13px;
  width: 100%;
  margin-right: 0;
  margin-bottom: 10px;
  height: 44px;
  background: #fff url("../images/select_arrow.svg") no-repeat 92% 50%;
}
.Board.pay select#card {
  font-size: 13px;
  width: 100%;
  height: 44px;
  background: #fff url("../images/select_arrow.svg") no-repeat 92% 50%;
}
.Board.color th{
  font-size: 13px;
}

.Board.vcolor td.bg_blue,
.Board.vcolor td.bg_blue2{
  font-size: 13px;
}
.tabConWrap p.CurriTitle{
  font-size: 40px;
}
.tabConFlex{
  flex-direction: column;
}
p.ConFlexTitle{
  font-size: 18px;
  font-weight: 600;
  padding-right: 0;
  width: 100%;
  margin-bottom: 10px;
}
.ConFlex_r p:nth-child(1){
  font-size: 14px;
  margin-bottom: 20px;
}
.courseImg img {
  margin-top: 10px;
  max-width: 100%;
}

.courseImg img:last-of-type {
  margin-bottom: 10px;
}

.otherCourse {
  margin-top: 20px;
}
/*****************이메일수집, 개인정보, 이용약관*************************/
.contentWrap.siteinfo{
  margin-top: 70px;
  font-size: 12px;
}
ul.indent li span:first-child{
  margin-right: 4px;
}
h5.etcinfo{
  font-size: 13px;
  margin: 20px 0 10px 0;
}
ul.indent.dd{
  margin: 10px 0 10px 10px;
}
h4.etcinfo{
  font-size: 14px;
}
/*****************************레이아웃 박스********************************/
.contentWrap {
  margin-top: 270px;
  padding-bottom: 30px;
  min-height: calc(100vh - 436px);
}
section article {
  margin-bottom: 20px;
}
/*중앙정렬 컨테이너*/
.container {
  min-width: 320px;
  padding: 0 16px;
}
/*서브페이지 제목*/
section h3.atc_title {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  margin: 0 0 8px 20px;
  letter-spacing: -1px;
}
section h3.atc_title::before {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: url("../images/ico_h3.svg") no-repeat center / contain;
  top: 4px;
  left: -20px;
}
.standard{
  display: inline-block;
  float: right;
  font-size: 12px;
  border: 1px solid #649dcc;
  color: #649dcc;
  padding: 4px 8px;
  border-radius: 5px;
}
/*알럿박스*/
.alertbox {
  font-size: 12px;
  border: 2px solid #eff2f7;
  padding: 20px;
  min-height: 60px;
  margin: 20px 0 10px 0;
}
.alertbox p {
  display: inline-block;
  position: relative;
  margin-left: 0;
  margin-top: 40px;
}
.alertbox p::after {
  content: "!";
  position: absolute;
  line-height: 40px;
  font-size: 24px;
  width: 40px;
  height: 40px;
  top: -48px;
  left: 50%;
  transform: translateX(-50%);
}
/*유의사항*/
.noteWrap {
  font-size: 12px;
  padding: 16px;
}
.noteWrap p.title {
  font-size: 13px;
  margin-bottom: 4px;
}
.noteWrap > div {
  margin-bottom: 16px;
}
ul.notecon {
  margin-left: 8px;
}

ul.notecon li {
  position: relative;
  margin-left: 12px;
  margin-bottom: 12px;
}
ul.notecon li::before {
  content: "*";
  position: absolute;
  left: -8px;
}
.popwin{
  width: calc(100vw - 100px);
  max-height: 560px;
  padding: 16px;
  overflow-x: hidden;
}
.popTitle{
  font-size: 16px;
}
.popCon{
  margin-top: 10px;
}
.popPara{
  margin-bottom: 10px;
}
p.ParaCon{
  font-size: 12px;
}
.popMdTitle{
  font-size: 14px;
  padding: 2px 0;
}
.popSubTitle{
  font-size: 14px;
}
ol.pop{
  margin-left: 16px;
}
ol.pop li{
  font-size: 12px;
}
i.popclose{
  position: absolute;
  color: #222;
  font-size: 24px;
  top:16px;
  right: 20px;
}
/****************************************************내용 시작**********************************************************/
/*회원가입*/
h2.join {
  font-size: 15px;
  margin-bottom: 30px;
}
h2.join p {
  display: block;
}
.joinWrap {
  width: 100vw;
  background-color: #eff2f7;
  margin: 0 auto;
}
.join_container {
  width: calc(100vw - 40px);
  min-width: 320px;
  max-width: 480px;
  border: none;
  border-radius: 0;
  padding: 0;
  padding-top: 30px;
  padding-bottom: 30px;
}

.joinWrap input[type="text"],
.joinWrap input[type="password"],
.joinWrap input[type="email"],
.joinWrap input[type="file"],
.joinWrap input[type="url"],
.joinWrap textarea {
  font-size: 14px;
  height: 44px;
  text-indent: 10px;
  border-radius: 5px;
}
.joinWrap h3 {
  font-size: 14px;
  margin: 10px 0 6px 0;
  font-weight: 500;
}

#join_form input[type="text"]#id {
  width: calc(100% - 134px);
}

#join_form .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
select#gender {
  width: 100px;
}

.agreeWrap {
  padding: 14px;
  font-size: 13px;
}

.agreeWrap p label {
  margin-right: 4px;
}
.agreeWrap > div {
  margin-top: 8px;
  padding-left: 2px;
}
p.agreeAll {
  font-size: 14px;
  padding-bottom: 8px;
}

p.agreeAll input[type="checkbox"] + label {
  width: 16px;
  height: 16px;
}
p.agreeAll input[type="checkbox"]:checked + label::before {
  content: "\e929";
  position: absolute;
  font-family: "xeicon";
  font-size: 16px;
}

.ans_text {
  text-align: center;
  font-size: 13px;
}
.csTitleWrap{
  width: calc(100vw - 40px);
  min-width: 320px;

}
.csTitle img{
  width: 40px;
  height: auto;
}
.csTitle h2{
  font-size: 20px;
  font-family: "Noto Serif KR", serif;
  font-weight: 400;
  color: #649DCC;
  margin-left: 6px;
  border-bottom: 1px solid #649DCC;
}
.flex_bl.cs{
  flex-direction: column;
}
.flex_bl.cs div{
  width: 100%;
}
.flex_bl.cs div:nth-child(2){
  margin-top: 10px;
}
i.xi-calendar{
  width: 56px;
  height: 46px;
  line-height: 46px;
  font-size: 24px;
}

/*MyPage*/
select#result {
  width: 84px;
  height: 36px;
  font-size: 13px;
  background: #fff url("../images/select_arrow.svg") no-repeat 85% 50%;
}
.block {
  display: block;
}
/**탭메뉴**/
nav.tabMenu ul {
  height: 44px;
}
nav.tabMenu ul li a {
  font-size: 13px;
  height: 44px;
  line-height: 44px;
}
nav.tabMenu ul li.on a::after {
  content: "\e92f";
  position: absolute;
  font-family: "xeicon";
  font-size: 10px;
  bottom: -20px;
}

/**listWrap : 강좌 썸네일 콘텐츠**/
.listThumb .column {
  width: calc(calc(100% - 14px) / 2);
  margin: 0 10px 10px 0;
}
.listThumb .column:nth-child(5n + 0) {
  margin-right: 10px;
}
.listThumb .column:nth-child(4n + 0) {
  margin-right: 10px;
}
.listThumb .column:nth-child(2n + 0) {
  margin-right: 0;
}
.thumb_txt .ico_course {
  color: #ff892f;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid #ff892f;
  border-radius: 5px;
}
.thumb_txt .ico_step {
  color: #598c1f;
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid #598c1f;
  border-radius: 5px;
}

.listThumb .column .thumbTitle {
  font-size: 13px;
}
/*강좌 목록 추가 끝*/
.lessonWrap {
  flex-direction: column;
}
.lessonWrap img {
  width: 100%;
  margin-bottom: 10px;
}
.lessoninfo {
  width: 100%;
}
.lessoninfo h5 {
  font-size: 15px;
}

.acterName {
  font-size: 13px;
}
.lessoninfo_top {
  padding: 10px;
}
.lessoninfo_botm {
  font-size: 13px;
  padding: 10px;
}
.lessoninfo_botm td.tuition span.price {
  font-size: 15px;
}
.priceInfo{
  font-size: 15px;
}
.priceInfo .saleinfo{
  font-size: 13px;
  color: #B3B3B3;
}
.tabConWrap {
  padding: 12px 0;
}
.tabConBox1{
  flex-direction: column;
}
.courseTileWrap img{
  width: 80%;
}
.courseTileWrap p.courseSubTtile{
  font-size: 14px;
  margin-bottom: 20px;
}

.courseinfoList{
  width: 100%;
  max-width: 620px;
  margin-bottom: 20px;
  overflow: scroll;
}
.courseinfoList.items3{
  width: 100%;
  max-width: 620px;
}
.courseinfoList li.infoCon{
  width:calc(calc(100vw - 113px) / 4);
  height:calc(calc(100vw - 113px) / 4);
  min-width: 120px;
  min-height: 120px;
}
.courseinfoList li img{
  min-width: 27px;
  min-height: 40px;
}
.courseinfoList li p{
  font-size: 12px;
}




.tabConBox1 div:first-child{
  margin-right: 0;
  margin-bottom: 20px;
}
.referImg img{
  width: 100%;
}
.tabConWrap p.title {
  font-size: 14px;
}
.tabConWrap span {
  font-size: 13px;
}
.paybtnWrap {
  padding: 10px;
}
.indexWrap {
  flex-direction: column;
  margin-bottom: 20px;
}
.indexWrap img {
  width: 100%;
  margin-right: 0;
  margin-bottom: 0;
}
.indexWrap .stepinfo {
  width: 100%;
  margin-top: 10px;
}
.stepinfo p {
  font-size: 12px;
  line-height: 20px;
}
.stepName {
  font-size: 14px;
}
ol.indexlist li p{
  font-size: 13px;
}
.playbtn{
  font-size: 12px;
  padding: 4px 16px 4px 8px;
  border-radius: 5px;
  position: relative;
}
.playbtn::after{
  position: absolute;
  content: "\e93f";
  font-family: "xeicon";
  top:8px;
  right: 5px;
}
/**탭메뉴2**/
nav.tabMenu2 ul {
  height: 44px;
  margin: 10px 0;
}
nav.tabMenu2 ul li a {
  font-size: 13px;
  height: 44px;
  line-height: 44px;
}
nav.tabMenu2 ul li.on {
  height: 42px;
}
.Board.index td span {
  display: none;
}
.BoardCon textarea {
  padding: 10px;
  height: 200px;
}
.Board tr.reply td {
  padding: 4px 16px 16px 16px;
}
/*레슨 과제*/
.fileatcWrap div {
  height: 42px;
}

/*나의 입시 과제 코칭*/
.coaching .container {
  padding: 0;
  margin: 0;
  width: 100%;
  min-width: none;
}

.coaching .container h3.atc_title {
  margin-left: 30px;
}
.coachWrap {
  box-shadow: none;
  border-radius: 0;
}
.contentWrap.coaching {
  padding-top: 274px;
  padding-bottom: 20px;
  background-color: #fff;
}
.coachStepWrap {
  /*코칭 스텝 표시*/
  border-radius: 0;
  padding: 10px 12px;
}
.coachStepWrap li {
  font-size: 13px;
  flex: 1;
}
.coachStepWrap li.stepline {
  display: none;
}

.coachConWrap {
  padding: 20px 16px;
}
.coachCon {
  margin-bottom: 20px;
}

.coachCon select {
  width: 100%;
  height: 44px;
}
.coachCon textarea {
  padding: 12px;
}

.coachCon .fileatcWrap div {
  line-height: 44px;
  padding-left: 10px;
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note p {
  font-size: 12px;
}
.note p.note_bold {
  font-size: 13px;
}
ul.annot{
  font-size: 12px;
}
.conBox {
  min-height: 60px;
  border-radius: 10px;
}
.conBox table {
  margin-top: 10px;
}
.conBox p.conTitle {
  font-size: 14px;
  color: #649dcc;
}
.conBox span {
  font-size: 13px;
}
/***********************************입시 과제 컨설팅****************************************/
.contentWrap.consultingWrap {
  margin-top: 252px;
}
.constTop {
  height: 260px;
}
.constTop div {
  border: 4px solid #fff;
  padding: 10px;
  width: 220px;
  height: 160px;
}
.constTop div p {
  font-size: 12px;
  color: #fff;
  text-align: center;
}
.constTop div p.title {
  font-size: 15px;
}
.constTop div span {
  font-size: 13px;
  color: #fff;
  margin-bottom: 30px;
  position: relative;
}
.constTop div span::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background-color: #f44a51;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.constmid {
  padding: 20px 0;
}
.constmid h2 {
  font-size: 15px;
  margin-bottom: 8px;
}
.constmid p {
  font-size: 12px;
  padding: 0 80px;
}

.const_courseWrap {
  height: 220px;
  padding: 0;
}
.const_course::before {
  content: "";
  position: absolute;
  height: 160px;
  width: 1px;
  border-left: 2px dotted #fff;
  top: 26px;
  left: 29px;
}
.const_course.item3::before {
  content: "";
  position: absolute;
  height: 150px;
  width: 1px;
  border-left: 2px dotted #fff;
  top: 36px;
  left: 29px;
}
.const_course.item3 li {
  margin-left: 32px;
  margin-top: 14px;
  font-size: 14px;
}
.const_course.item3 li::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #ffd056;
  bottom: 26px;
  left: -20px;
}
.const_course {
  flex-direction: column;
  align-items: baseline;
  justify-content: center;
}
.const_course li {
  margin-left: 32px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 50px;
}
.const_course li::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background-color: #ffd056;
  bottom: 22px;
  left: -20px;
}
.const_course li span {
  display: inline-block;
}
.college_select p.title {
  font-size: 12px;
}
select#collegelist {
  display: block;
  margin: 10px 0;
}
.select_col{
  display: block;
  margin-bottom: 20px;
}
.select_col div{
  display: inline-block;
  border: 1px solid #649DCC;
  padding: 4px 8px;
  border-radius: 5px;
  color: #649DCC;
  margin: 0 8px 10px 0;
}
.select_col div i{
  margin-left: 8px;
}

/******************************컨설팅 탑 이미지 추가 *************************************/
.constTopWrap{
  padding: 20px 0;
}
.constTopWrap .subTile{
  width: 90%;
  height: auto;
}
.constTopWrap .mainTitle{
  width: 80%;
  height: auto;
}
.constTopWrap p{
  font-size: 13px;
}
.constTopWrap p.check_txt{
  font-size: 18px;
  letter-spacing: -1px;
}
.constTopWrap p.check_txt span{
  font-size: 18px;
}
@media screen and (min-width: 520px) and (max-width: 1080px) {
  .constTopWrap{
    height: 420px;
  }
}
ul.blueBox{
  width: calc(100vw - 32px);
  padding: 16px;
  font-size: 14px;
  line-height: 22px;
  border-radius: 0;
}
ul.blueBox.info{
  width: calc(100vw - 100px);
  padding: 16px;
  border-radius: 20px;
}
ul.blueBox.info li{
  margin-left: 24px;
}
ul.blueBox li{
  position: relative;
  margin-left: 32px;
  margin-bottom: 6px;
}
ul.blueBox li:last-child{
  margin-bottom: 0;
}
ul.blueBox li::before{
  content: "";
  position: absolute;
  background: url("../images/check.png") no-repeat;
  background-size: contain;
  top:10px;
  left: -20px;
  width: 16px;
  height: 16px;
}
.constTopWrap p.underTxt{
  font-size: 14px;
  padding: 0 16px;
}
.constTopWrap p.underTxt span{
  display: block;
}

/******************************입시연기 팁**************************************/
.tipTopWrap{
  background: url("../images/SECRET.png"),url("../images/SECRET.png"),  url("../images/tip_bg.png");
  background-position: center 20px, center 20px, center;
  background-repeat: no-repeat;
  background-size: 50%, 50%, cover ;
  background-blend-mode: overlay;
  margin-top: -18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tiptext{
  font-size: 20px;
  padding-top: 100px;
}
.tiptext span{
  display: block;
}

.tipPointWrap{
  flex-direction: column;
  align-items: center;
  padding: 0;
  width: calc(100vw - 60px);
  margin-top: 20px;
}
.tipPointWrap li.tipCon{
  width: 80%;
  padding: 24px 20px;
}
.r_line{
  width: 80%;
  height: 1px;
  background-color: rgba(255,255,255,0.2);
}
.tipPointWrap li p{
  font-size: 18px;
  margin-bottom: 6px;
}
.tipPointWrap li span{
  font-size: 16px;
}
.tipudTxt{
  font-size: 15px;
  margin: 16px 0 24px 0;
  padding: 0 40px;
}
.tiph5{
  font-size: 16px;
  margin-top: 20px;
}
.alltipbtn{
  font-size: 16px;
  color: #fff;
  background-color: #FF892F;
  padding: 12px 0;
  text-align: center;
  border-radius: 100px;
  margin: 10px 0 20px 0;
  width: 100%;
}
.tipMovWrap{
  display: flex;
  justify-content: first baseline;
  align-items: stretch;
  margin: 8px 0 0 0;
  flex-wrap: wrap;
}
.tipMovWrap li{
  width: calc(calc(100% - 24px) / 2);
  margin-right: 20px;
  margin-bottom: 20px;
}
.tipMovWrap li:nth-child(2n){
  margin-right:0;
}
.tipMovWrap li p{
  line-height: 20px;
  height: 40px;
}
/*****************************온라인 오디션****************************************/
.auditTopImg {
  height: 280px;
}
@media screen and (min-width: 500px) and (max-width: 630px) {
  .auditTopImg {
    height: 240px;
  }
}
@media screen and (max-width: 500px) {
  .auditTopImg {
    height: 180px;
  }
}
.auditTopImg img {
  width: 80%;
}
.auditTopWrap{
  margin-top: 10px;
}
.auditTopWrap p{
  font-size: 15px;
}
.auditionupload{
  margin-top: 10px;
}
.searchWrap.audit{
  margin-top: 10px;
}
.searchWrap.audit select{
  width: calc(calc(100% - 20px) / 2);
  height: 40px;
}
.auditListWrap{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
}
.auditListWrap > li{
  width: calc(calc(100% - 20px) / 2);
  margin-right: 20px;
  margin-bottom: 20px;
  height:200px;
  position: relative;
}
.auditListWrap > li:nth-child(2n){
  margin-right:0;
}
.auditListWrap > li:nth-child(3n){
  margin-right:20px;
}
.auditListWrap > li:nth-child(6n){
  margin-right:0;
}
.auditListWrap li img{
  position: absolute;
  width: 100%;
  border-radius: 10px 10px 0 0;
  height: 120px;
  object-fit:cover;
}
.likebtn{
  width: 24px;
  height: 24px;
  position: absolute;
  top:12px;
  right: 12px;
  z-index: 100;
}
.likebtn::after{
  position: absolute;
  content: "\ea11";
  font-family: "xeicon";
  font-size: 24px;
  color: #fff;
  left:0;
  top:0;
}
.likebtn.click::after{
  position: absolute;
  content: "\ea10";
  font-family: "xeicon";
  font-size: 24px;
  color: #FF3030;
  left:0;
  top:0;
}
.auditInfo{
  position: absolute;
  bottom: 0;
  width:calc(100% - 18px);
  border: 1px solid #ddd;
  padding: 8px;
  background-color: #fff;
  border-radius: 10px;
  height: 76px;
}
.auditid{
  font-size: 12px;
  color: #B3B3B3;
}
.auditTitle {
  font-size: 14px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.auditGrade{
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  font-size: 12px;
  font-weight: 500;
}
.starWrap{
  display: flex;
  align-items: center;
}
.starWrap span{
  font-size: 14px;
  font-weight: 600;
}

.auditGrade div:nth-child(2) {
  margin-left: 20px;
}
ul.star{
  display: flex;
  margin: 0 4px;
}
ul.star li{
  width: 12px;
  height: 12px;
}

.auditGrade .like{
  margin-right: 30px;
  position: relative;
}
.auditGrade .like::before{
  position: absolute;
  content: "\ea11";
  font-family: "xeicon";
  font-size: 20px;
  color: #FF3030;
  left:-20px;
  top:1px;
}
.auditGrade .talk{
  margin-right: 8px;
  position: relative;
}
.auditGrade .talk::before{
  position: absolute;
  content: "\ea15";
  font-family: "xeicon";
  font-size: 20px;
  color: #7A7A7A;
  left:-22px;
  top:1px;
}

.auditGradeWrap{
  flex-direction: column;
}
.auditGradeLeft,
.auditGradeRight{
  width: 100%;
}
.auditGradeRight{
  border-left: 0;
  border-top: 1px solid #ddd;
}
.auditGradeRight > li{
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  height: 24px;

}
.auditGradeRight > li > p{
  width: 50%;
}
.auditGradeLeft{
  display: flex;
  justify-content: space-between;
}
.auditGradeLeft ul.star li{
  margin: 0;
  width: 24px;
  height: 24px;
}
.auditGradeLeft span{
  font-size: 28px;
  font-weight: 600;
  margin-left: 10px;
}
.auditGradeLeft p{
  font-size: 24px;
  margin-left: 0;
  margin-right: 8px;
}
.fileatcWrap + p{
  font-size: 12px;
}
/**************************액팅스쿨 소개*******************************/
.introCon:first-child{
  display: flex;
  flex-direction: column;
}
.introCon:first-child img{
  width:100%;
  height: 200px;
  margin-right:0;
  margin-bottom: 10px;
  object-fit: cover;
}
.introCon:last-child{
  flex-direction: column-reverse;
}
.introCon:last-child img{
  margin-left: 0;
  margin-bottom: 10px;
}
.introCon{
  margin-bottom: 20px;
}
.introCon h5{
  font-size: 18px;
}
.introCon h5::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #649DCC;
  bottom: 4px;
  left: 0;
}

.introCon h5 span{
  font-size: 26px;
}
.currImg{
  width: 100%;
}



/*게시판 상단 검색박스*/
.BoardTopWrap {
  margin-bottom: 10px;
  display: flex;
  flex-direction: column-reverse;
  align-items: baseline;
  height: auto;
}
.pageNum{
  font-size: 12px;
  margin-top: 16px;
}
.BoardTop{
  flex-direction: column;
  width: calc(100vw - 32px);
}
.BoardTop div{
  width: calc(100vw - 32px);
  display: flex;
  flex-wrap: nowrap;
}
.BoardTop select {
  width:calc(calc(100vw - 32px) / 2);
  background: #fff url("../images/select_arrow.svg") no-repeat 95% 50%;
  margin-bottom: 8px;
  height: 40px;
  border-radius: 0;
}
.BoardTop select.search.bod{
  width:calc(100vw - 32px);
}
.BoardTop select:first-child{
  margin-right: 10px;
}
.BoardTop select:last-child{
  margin-right: 0;
}
.BoardTop input[type="text"] {
  display: block;
  height: 38px;
  width: calc(100% - 40px);
}
.btn_searchico {
  float: right;
  width: 40px;
  height: 40px;
  background-color: #6197C3;
  text-align: center;
}
.btn_searchico::before {
  content: "\e97a";
  font-family: "xeicon";
  color: #fff;
  font-size: 20px;
  line-height: 40px;
}
/*대학별 입시요강 게시판 스타일*/
.Board.quest.adinfo thead,
.Board.quest.adinfo ul li:nth-child(3){
  display: none;
}
.Board.quest.adinfo ul li:nth-child(1){
  margin: 0;
  width: calc(100% - 108px);
}
.Board.quest.adinfo ul li:nth-child(2){
  margin: 0;
  width: 90px;
}
.Board.quest.adinfo ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100vw - 48px);
  height: 36px;
}
.Board.quest.adinfo ul li:nth-child(2){
  text-align: right;
}
.Board.quest.adinfo tr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px;
  height: 36px;
}
.Board.quest.adinfo tr:first-child{
  border-top: 1px solid #222;
}
.Board.quest.adinfo td{
  padding: 0;
  height: 36px;
  font-size: 14px;
}
.Board.quest.adinfo td:nth-child(2){
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

/*묻고답하기 게시판 스타일*/
.Board.quest thead,
.Board.quest td:nth-child(1),
.Board.quest ul li:nth-child(3){
  display: none;
}
.Board.quest tr:first-child{
  border-top: 1px solid #222;
}
.Board.quest tr{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Board.quest td{
  height: 40px;
  padding: 10px;
}
.Board.quest td ul{
  display: inline-block;
}
.Board.quest td ul li:nth-child(1){
  width: calc(100vw - 138px);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0;
}

.Board.quest td ul li:nth-child(2),
.Board.quest td ul li:nth-child(4){
  display: inline-block;
  float: left;
  padding-left: 0;
  text-align: left;
  margin: 6px 10px 0 0;
  width: auto;
  position: relative;
}

.faqTop h3{
  font-size: 40px;
  letter-spacing: -3px;
}

/***************************레슨후기 댓글 형식*******************************/
/*
.writeWrap{
  padding: 10px;
}
*/
.tabConWrap {
  padding: 0;
}
textarea.reviewBox{
  padding: 8px;
  width: calc(100% - 18px);
  height: 3em;
}
.reviewWrap{
  padding: 20px 0;
}
.writeWrap.reply textarea{
  display: inline-block;
  width: calc(calc(100% - 16px) - 24px);
}
.replyCon{
  margin: 20px 0 0 30px;
}
/**********footer************/
.footerWrap {
  padding: 20px;
}
.footerWrap .biglogo_col {
  display: none;
}

.footerWrap div ul li {
  position: relative;
  float: left;
  margin-right: 24px;
  margin-bottom: 12px;
}
.footerWrap div ul li a {
  font-size: 12px;
}

.footerWrap div ul li::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: #fff;
  top: 12px;
  right: -14px;
}
.footerWrap div p {
  font-size: 11px;
}
.footerWrap div p span {
  display: inline-block;
  margin-right: 20px;
  line-height: 20px;
}