@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: 138px 40px;
  background-position: 20px 6px;
  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: 160px;
  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: 200px;
  margin-top: 52px;
  width: 100vw;
}
.swiper1 .swiper-button-next,
.swiper1 .swiper-button-prev {
  display: none;
}
#swiper-button-next,
#swiper-button-prev {
  display: none;
}
.TopTitle{
  font-size: 15px;
  margin: 10px 0;
  text-align: center;
}
/**************************강좌 리스트*******************************/
/**탭메뉴**/
nav.maintabMenu ul {
  display: flex;
  border-bottom: 2px solid #69090a;
  height: 60px;
  margin: 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: 14px;
  font-weight: 500;
  color: #222;
  display: inline-block;
  text-align: center;
  padding: 10px;
  line-height: 16px;
  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;
}

/*강좌 목록*/
/**listWrap : 썸네일 콘텐츠**/
.mainlistThumb {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.mainlistThumb .column {
  width: calc(calc(100% - 8px) / 2);
  margin: 0 8px 20px 0;
}
.mainlistThumb .column:nth-child(2n + 0) {
  margin-right: 0;
}

.mainlistThumb .column p{
  font-size: 14px;
}
.mainlistThumb .column .thumbTitle {
  line-height: 18px;
  margin-bottom: 2px;
}
/*과정 분류 아이콘*/
.CourseIcoWrap{
  display: flex;
  margin-top: 8px;
}
.CourseIcoWrap span{
  margin-left: 4px;
}
/*배경색 아이콘*/
.CourseIco{
  display: inline-block;
  font-size: 10px;
  width: 32px;
  height: 18px;
  border-radius: 2px;
  text-align: center;
  color: #fff;
}
/*기초*/
.CourseIco.Basic {
  background-color: #76BE17;
}
/*신규*/
.CourseIco.New {
  background-color: #FF8800;
}
/*실천*/
.CourseIco.Practice {
  background-color: #0099FF;
}
/*심화*/
.CourseIco.Advance {
  background-color: #CF4075;
}
/*공통*/
.CourseIco.Common {
  background-color: #1BC2C8;
}
/*심화*/
.CourseIco.Before {
  background-color: darkgrey;
}
/*라인 아이콘*/
.CourseIco_b{
  display: inline-block;
  font-size: 10px;
  width: 30px;
  height: 16px;
  border-radius: 2px;
  text-align: center;
  background-color: #FFF;
}
/*학점*/
.CourseIco_b.grade{
  border: 1px solid #FF8800;
  color: #FF8800;
}
/*유치*/
.CourseIco_b.kinder{
  border: 1px solid #76BE17;
  color: #76BE17;
}
/*초등*/
.CourseIco_b.elementary{
  border: 1px solid #0099FF;
  color:#0099FF;
}
/*중등*/
.CourseIco_b.secondary{
  border: 1px solid #CF4075;
  color:#CF4075;
}

/**************************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;
}
/*******************************************************index 끝**************************************************************/

/************서브페이지 전체레이아웃&폰트 스타일************/
/*상단 이미지&터이틀*/
.sub-visual {
  position: absolute;
  top: 52px;
  width: 100vw;
  height: 200px;
  /**background: no-repeat center / cover; 적용 안됨**/
}
.sub-visual.bg1 {/*나의 강의실*/
  background: url("../images/sub_bg01.png") no-repeat center / cover;
}
.sub-visual.bg2 {/*연수과정 신청*/
  background: url("../images/sub_bg02.png") no-repeat center / cover;
}
.sub-visual.bg3 {/*입시과제코칭*/
  background: url("../images/sub_bg03.png") no-repeat center / cover;
}
.sub-visual.bg4 {/*입시 정보*/
  background: url("../images/sub_bg04.png") no-repeat center / cover;
}
.sub-visual.bg5 {/*고객센터*/
  background: url("../images/sub_bg05.png") no-repeat center / cover;
}
.sub-visual.bg6 {/*연수원 소개*/
  background: url("../images/sub_bg06.png") no-repeat center / cover;
}
.sub-visual.bg7 {/*회원정보*/
  background: url("../images/sub_bg07.png") no-repeat center / cover;
}
.sub-visual.bg8 {
  background: url("../images/sub_bg08.png") 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: 15px;
  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;
}
/*유의사항 끝*/
/*표 하단 주석 시작*/
ul.comment {
  margin-top: 10px;
}

ul.comment li {
  position: relative;
  font-size: 12px;
  margin-left: 12px;
  margin-bottom: 2px;
}
ul.comment 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;
}
/****************************************************내용 시작**********************************************************/
/*회원가입*/
/*학교찾기 팝업*/
.JoinPopWrap{
  position: fixed;
  top:0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000000000;
  background-color: #fff;
}
.JoinPopTop{
  height: 52px;
  border-bottom: 1px solid #333;
  font-size: 15px;
  text-align: center;
  line-height: 52px;
  font-weight: 500;
}
.JoinPopTop i{
  position: absolute;
  right: 24px;
  line-height: 52px;
  font-size: 24px;
}
.JoinPopCon{
  padding: 10px 12px;
}
.inpuWrap{
  display: flex;
}
.JoinPopCon input[type="text"] {
  height: 38px;
  flex: 1;
}
.btn_searchico {
  float: right;
  width: 40px;
  height: 40px;
  background-color: #0099FF;
  text-align: center;
}
.btn_searchico::before {
  content: "\e97a";
  font-family: "xeicon";
  color: #fff;
  font-size: 20px;
  line-height: 40px;
}
/*학교찾기 팝업 끝*/
.contentWrap.join {
  margin-top: 52px;
  padding-bottom: 0;
  min-height: calc(100vh - 436px);
}
.joinTopWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #eff2f7;
  padding-top: 20px;
}
img.logo_big{
  width: 120px;
}
.btnF_Join {
  padding: 0 16px;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  background-color: #0099FF;
  color: #FFF;
  border-radius: 5px;
  text-align: center;
}
h2.join {
  font-size: 15px;
  margin-bottom: 0;
}
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: 20px;
  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% - 92px);
}

#join_form .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.join_note{
  font-size: 13px;
  color: #707070;
  padding-top: 8px;
}
.join_note span{
  color: #105C6F;
  text-decoration: underline;
  font-weight: 500;
}
select#gender {
  width: 100px;
  height: 46px;
}
.sc_title{
  font-size: 15px;
  font-weight: 500;
  text-decoration: underline;
}
.agreeWrap {
  padding: 14px;
  font-size: 13px;
  margin-top: 20px;
}

.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-right: 0;
  margin-bottom: 10px;
}
.lessonTitle{
  margin-bottom: 20px;
}
.lessonTitle p{
  font-size: 15px;
  font-weight: 600;
  color: #1A62BB;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lessoninfo {
  width: 100%;
}
.lessoninfo_top {
  padding: 10px;
  font-size: 13px;
}
.lessoninfo_top .price {
  font-size: 15px;
  font-weight: 500;
}
.lessoninfo_botm {
  font-size: 13px;
  padding: 10px;
  line-height: 22px;
}
.lessoninfo_botm p{
  font-size: 15px;
  color: #105C6F;
  font-weight: 500;
}

.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;
}

/*나의 연수과정 시작*/
.myClassList{
  background-color: #EFF2F7;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 4px;
}

.myClassTitleWrap{
  display: flex;
}
.btn_enter{
  color: #fff;
  background-color: #0099FF;
  width: 64px;
  height: 64px;
  border-radius: 5px;
  text-align: center;
  line-height: 64px;
  font-size: 13px;
  margin-left: 4px;
}
.myClassInfo{
  font-size: 13px;
}
.rateBarWrap{
  display: flex;
  align-items: center;
}
.myClassInfo .title{
  font-weight: 500;
  margin-right: 4px;
}
.rateBar{
  flex: 1;
  background-color: #fff;
  height: 8px;
  border-radius: 20px;
  margin: 0 8px 0 4px;
  position: relative;
}
.rateBar::after{
  content: "";
  position: absolute;
  background-color: #FF7C33;
  width: 0%;
  height: 8px;
  border-radius: 20px;
}
.rateNum{
  font-size: 15px;
  color: #FF8000;
  font-weight: 600;
}
.myClassInfo.detail span.title{
  display: inline-block;
  width: 5em;
}
.myClassInfo.detail li{
  display: flex;
}
.myClassInfo.detail .rateBar{
  margin: 0 8px 0 0;
} 
/*나의 연수과정 끝*/


.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;
}

/**************************액팅스쿨 소개*******************************/
.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: #0099FF;
  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: 12px 20px;
}
.footerWrap .biglogo_col {
  display: none;
}

.footerWrap div ul li {
  position: relative;
  float: left;
  margin-right: 8px;
  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: -5px;
}
.footerWrap div p {
  font-size: 11px;
}
.footerWrap div p span {
  display: inline-block;
  margin-right: 20px;
  line-height: 20px;
}
/*경인교대 연수원소개 시작*/
.introductWrap{
  font-size: 13px;
}
.introduct_top{
  font-size: 18px;
}
.introduct_top img{
  margin-bottom: 10px;
}
.introduct_top .accent{
  color: #184570;
  font-weight: 500;
}
.lineDot{
  width: 100%;
  height: 1px;
  background-color: #333;
  margin: 10px 0;
}

.introductWrap ul.noteWrap {
  margin: 10px 0;
  font-size: 13px;
  border-radius: 5px;
  padding: 12px;
}

.introductWrap ul.noteWrap li {
  position: relative;
  margin-left: 16px;
  margin-bottom: 6px;
}
.introductWrap ul.noteWrap li::before {
  content: "\e92b";
  font-family: "xeicon";
  position: absolute;
  left: -16px;
  top:4px;
  color: #777;
}
.introductWrap .charc{
  font-size: 13px;
}
.introductTitle{
  font-size: 15px;
  color: #184570;
  font-weight: 500;
}
.introductWrap .charc p{
  position: relative;
  margin-left: 16px;
  margin-bottom: 6px;
}
.introductWrap .charc p::before{
  content: "\e929";
  font-family: "xeicon";
  position: absolute;
  left: -12px;
  top:4px;
  color: #777;
}
.introductWrap .charc img{
  margin: 10px 0;
  width: 100%;
}

/*
* 우진 추가
*/
/*경인교대 연수원소개 끝*/
.loading{
  display:none;
  position: absolute;
  z-index: 9999;
  display: block;
  background: url("/cyber/img/loading_img.gif") no-repeat;
  background-size: 100%;
  width: 110px;
  height: 110px;
  top: 50%;
  left: 50%;
  margin-left: -55px;
  bottom: -22px;
}

ul.flexContainer{width: 100%; height: 52px; display: flex; align-items: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
ul.flexContainer li{flex:1; text-align: center; position: relative;}
ul.flexContainer li a{font-size: 15px; color:#222; transition: all 0.5s;}
ul.flexContainer li:hover a{color:#0097FC;}
ul.flexContainer li a::after{content: ""; position: absolute; left:50%; bottom: -18px; width:0; height: 4px; background-color:#0097FC; transition: all 0.5s;}
ul.flexContainer li:hover a::after{left:0; width:100%}

/**클릭한 메뉴**/
ul.flexContainer li.on a{color:#0097FC;}
ul.flexContainer li.on a::after{content: ""; position: absolute; left:0; bottom: -18px; width: 100%; height: 4px; background-color:#0097FC; transition: all 0.5s;}

#progressBar {
  width: 100%; height: 8.4px;
  cursor: pointer;
  background: coral;
  border-radius: 1.3px;
}