@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");
/************ Reset ************/
* {
  outline: 0 !important;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
blockquote,
pre,
code,
address,
ul,
ol,
li,
menu,
nav,
section,
article,
aside,
dl,
dt,
dd,
table,
thead,
tbody,
tfoot,
label,
caption,
th,
td,
form,
fieldset,
legend,
hr,
input,
button,
textarea,
object,
figure,
figcaption {
  margin: 0;
  padding: 0;
}
html,
body {
  width: 100%;
}
html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body {
  width: 100%;
  background: #fff;
  min-width: 320px;
  -webkit-text-size-adjust: none;
  word-wrap: break-word;
  word-break: keep-all;
}
body,
input,
select,
textarea,
button {
  border: none;
  font-size: 16px;
  font-family: "Noto Sans KR", sans-serif;
  color: #222222;
  letter-spacing: -0.5px;
}

ul,
ol,
li {
  list-style: none;
}

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}
img,
fieldset {
  border: 0;
}
address,
cite,
code,
em {
  font-style: normal;
  font-weight: normal;
}
label,
img,
input,
select,
textarea,
button {
  vertical-align: middle;
}
.hide,
caption,
legend {
  line-height: 0;
  font-size: 1px;
  overflow: hidden;
}
hr {
  display: none;
}
main,
header,
section,
nav,
footer,
aside,
article,
figure {
  display: block;
}
a {
  color: #000;
  text-decoration: none;
}

textarea {
  border: 1px solid #ddd;
}
select {
  height: 50px;
  width: 100%;
  padding: 0 20px;
  font-size: 15px;
  color: #a15dce;
  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: 42px;
  font-size: 15px;
  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: 15px;
  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: 15px;
}
textarea[readonly],
textarea[disabled] {
  padding: 11px;
  font-size: 15px;
  color: #666;
  font-weight: normal;
  line-height: 140%;
  height: 78px;
  background: #eaeaea;
  border: 1px solid #ddd;
}
.clear {
  clear: both;
}
.clear:after {
  content: "";
  display: block;
  clear: both;
}

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #dddddd;
  border-radius: 50px;
  cursor: pointer;
}
input[type="checkbox"]:checked + label {
  background-color: #ffbd1e;
  position: relative;
}
input[type="checkbox"]:checked + label::before {
  content: "\e929";
  position: absolute;
  color: #fff;
  font-family: "xeicon";
  font-size: 16px;
  top: 0;
  left: 0;
}

input[type="checkbox"]#cs_ch + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50px;
  cursor: pointer;
  border: 1px solid #b3b3b3;
  margin-right: 6px;
  
}
input[type="checkbox"]#cs_ch:checked + label {
  background-color: #ffbd1e;
  position: relative;
  border: none;
  width: 22px;
  height: 22px;
}
input[type="checkbox"]#cs_ch:checked + label::before {
  content: "\e929";
  position: absolute;
  color: #fff;
  font-family: "xeicon";
  font-size: 22px;
  top: 0;
  left: 0;
}


/*회원정보 메뉴*/
#util {
  position: fixed;
  top: 0;
  height: 40px;
  width: 100%;
  background: #222;
  z-index: 1000;
  transition: all 0.5s;
}
#util ul {
  float: right;
}
#util ul li {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  line-height: 36px;
}
#util ul li a {
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.5px;
}
#util ul li::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 10px;
  top: 50%;
  transform: translateY(-40%);
  margin-left: 14px;
  background-color: #fff;
}
#util ul li:last-child {
  padding-right: 0;
}
#util ul li:last-child::after {
  content: "";
  display: none;
}
#util ul li.cart {
  padding-left: 34px;
}
#util ul li.cart::before {
  content: "\e9fb";
  position: absolute;
  font-family: "xeicon";
  font-size: 20px;
  color: #fff;
  left: 10px;
  top: 1px;
}

.m_close .xi-close-thin {
  position: fixed;
  width: 40px;
  height: 40px;
  top: 0;
  right: 20px;
  font-size: 24px;
  text-align: center;
  line-height: 40px;
  color: #fff;
  z-index: 500000;
  display: none;
}

/************header 상단 고정************/
.GNBWrap {
  position: fixed;
  width: 100%;
  top: 40px;
  z-index: 1000;
}

.GNBWrap .container {
  display: flex;
  justify-content: space-between;
}

/*로고*/
.GNBWrap h1 {
  display: block;
  position: absolute;
  width: 200px;
  height: 37px;
  margin-top: 18px;
  z-index: 1000;
  background: url("../images/logo_w.svg") no-repeat center / contain;
}

/*GNB*/
#gnb {
  flex: 1;
}
#gnb nav {
  text-align: center;
  right: 0;
  top: 0;
  width: 100%;
}
#gnb nav > ul {
  display: flex;
  height: 72px;
  float: right;
  overflow: hidden;
}
#gnb nav > ul:hover {
  overflow: visible;
}
#gnb nav > ul > li {
  flex: 1;
  display: inline-block;
  position: relative;
  z-index: 1000;
}
#gnb nav > ul > li > a {
  display: block;
  position: relative;
  min-width: 132px;
  height: 72px;
  line-height: 72px;
  font-size: 17px;
  color: #222;
  font-weight: 600;
}

#gnb nav > ul > li > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  z-index: -1000;
  background-color: #f44a51;
  transition: all 0.5s;
}
#gnb nav > ul > li:hover > a::after {
  left: 0;
  width: 100%;
  z-index: 1000;
}

/*GNB 배경색*/
#gnb nav + div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 72px;
  background-color: #fff;
  transition: all 0.5s;
  z-index: 10;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}
#gnb nav:hover + div::after {
  content: "";
  position: absolute;
  top: 72px;
  width: 100%;
  height: 220px;
  background-color: #f3f3f3;
  opacity: 1;
  transition: all 0.5s;
}

/*서브메뉴*/
#gnb nav > ul ul {
  position: absolute;
  width: 100%;
  height: 180px;
  text-align: center;
  padding-top: 15px;
  opacity: 0;
  transition: all 0.5s;
  z-index: 100;
}
#gnb nav > ul ul::after {
  content: "";
  position: absolute;
  display: block;
  width: 1px;
  height: 160px;
  top: 30px;
  background-color: rgba(0, 0, 0, 0.05);
}
#gnb nav > ul li:first-child ul::after {
  width: 0;
}
#gnb nav > ul:hover ul {
  opacity: 1;
}
#gnb nav > ul ul li {
  line-height: 36px;
}
#gnb nav > ul ul a {
  font-size: 15px;
  color: #222;
  transition: all 0.5s;
}
#gnb nav > ul ul a:hover {
  text-decoration: underline;
}

.m_search .xi-search {
  display: inline-block;
  position: fixed;
  width: 56px;
  height: 56px;
  top: 0;
  right: 56px;
  font-size: 28px;
  text-align: center;
  line-height: 56px;
  color: #222;
  z-index: 500000;
  display: none;
}

.m_menu .xi-bars {
  display: inline-block;
  position: fixed;
  width: 56px;
  height: 56px;
  top: 0;
  right: 0;
  font-size: 28px;
  text-align: center;
  line-height: 56px;
  color: #000;
  z-index: 500000;
  display: none;
}

/*******************************************************index 시작**************************************************************/
/**************************  main swiper *************************/
.swiper1 {
  height: 420px;
  margin-top: 112px;
}
.swiper1 .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-direction: column;
  text-align: center;
}
.swiper1 .swiper-slide.swiper-slide-active .swiper-group {
  animation: text 1.5s 0.2s both;
}
@keyframes text {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.swiper-slide.bg1 {
  background-color: #007CCF;
  background-size: auto 100%;
}
.swiper-slide.bg2 {
  background-color:  #f4c651;
  background-size: auto 100%;
}
.swiper-slide.bg3 {
  background-color: #361110;
  background-size: auto 100%;
}
.swiper-slide.bg4 {
  background-color: #000;
  background-size: auto 100%;
}
.swiper-slide.bg5 {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;
}

h3.bn1_title {
  font-size: 40px;
  font-weight: 500;
  position: relative;
  margin-bottom: 16px;
  letter-spacing: -3px;
}
h3.bn1_title::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  bottom: -16px;
  left: 50%;
  transform: translateX(-50%);
}
.textWrap {
  padding: 20px 30px;
  position: relative;
  width: 780px;
}
.textWrap::before {
  content: "";
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -70%);
  width: 900px;
  /*  width: 856px;*/
  height: 190px;
  background: url("../images/bracket.png") no-repeat center / contain;
}

p.bn1_txt1 {
  font-size: 26px;
  font-weight: 500;
  color: #ffbd1e;
  padding: 0 20px;
}
p.bn1_txt2 {
  font-size: 20px;
  font-weight: 500;
  margin: 4px 0 20px 0;
}
/**************************강좌 리스트*******************************/
/**탭메뉴**/
nav.maintabMenu ul {
  display: flex;
  border-bottom: 2px solid #69090a;
  height: 60px;
  margin: 40px 0 20px 0;
  width: 100%;
}
nav.maintabMenu ul li {
  flex: 1;
  border: 1px solid #ddd;
  border-left: none;
  border-bottom: none;
}
nav.maintabMenu ul li:first-child {
  border-left: 1px solid #ddd;
}
nav.maintabMenu ul li a {
  font-size: 18px;
  font-weight: 500;
  color: #222;
  display: block;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
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: 20px;
  background-color: #EFF2F7;
  border-radius: 10px;
  text-align: center;
  padding: 16px 0;
  margin-bottom: 20px;
  letter-spacing: -1px;
}
/*강좌 목록*/
/**listWrap : 썸네일 콘텐츠**/
.mainlistThumb {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.mainlistThumb .column {
  width: calc(calc(100% - 60px) / 4);
  background-color: #fff;
  margin: 0 20px 20px 0;
  overflow: hidden;
}
.mainlistThumb .column:nth-child(4n + 0) {
  margin-right: 0;
}

.mainlistThumb .column img {
  position: relative;
  width: 100%;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.mainlistThumb .column p{
  font-size: 16px;
}
.mainlistThumb .column .thumb_txt {
  margin: 10px 0 0 0;
}
.mainlistThumb .column .thumbTitle {
  font-weight: 500;
  line-height: 20px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

}
.mainlistThumb .column .Lline-t{
  text-decoration: line-through;
}
.mainlistThumb .column .price{
  font-weight: 600;
  margin: 0;
  color: #0099FF;
}
.mainlistThumb .column .sale{
  font-weight: 600;
  margin: 0;
  color: #FF3030;
}
/*****************************온라인 오디션 배너 추가****************************/
.auditionbnWrap{
  height: 300px;
  background: url("../images/audition_text2.png"), url("../images/audition_text2_1.png"), url("../images/audition_bg.png");
  background-position: right center, right center, center;
  background-repeat: no-repeat;
  background-size: 40%, 40%, cover;
  background-blend-mode: overlay;
}
.auditionbnWrap .container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}
.auditionbnWrap img{
  height: 60%;
  width: auto;
  margin-bottom: 20px;
}
.auditionbnWrap p{
  display: inline-block;
  color: #fff;
  border: 1px solid #fff;
  padding: 8px 16px;
  border-radius: 50px;
  margin-left: 16px;
}
/**************************입시대비팁 추가*******************************/
.TipWrap{
  background-color: #eff2f7;
  padding: 1px 0 20px 0;
}
.TipWrap ul.tipMovWrap{
  margin: 0;
}
/**************************program 추가*******************************/
.programWrap{
  background-color: #eff2f7;
  display: flex;
  justify-content: center;
  align-items: center;

}
.program_t{
  font-size: 24px;
  color: #196B80;
  font-weight: 500;
  letter-spacing: -1px;
  margin: 40px 0 10px 0;
}
.programList{
  display: flex;
  margin-bottom: 40px;
  justify-content: center;
  align-items: center;
}
.programList li{
  width: calc(calc(100vw - 80px) / 4);
  height: calc(calc(100vw - 80px) / 4);
  max-width: 295px;
  max-height: 295px;
  color: #fff;
  position: relative;
}
.programList li p{
  background-color: rgba(0,0,0, 0.4);
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 18px;
  position: absolute;
  top: calc(100% - 60px);
  width: 100%;
}
.programList li.programTitle img{
 position: absolute;
width: 40px;
 height: 40px;
 padding: 20px;
 right: 0;
 bottom: 0;
}
.programList li.programTitle p{
  background-color: rgba(0,0,0,0);
  font-size: 18px;
  line-height: 26px;
  text-align: left;
  margin-top: 0;
  padding: 20px;
  top: 0;
  width: calc(100% - 40px);
}

.programList li:nth-child(1){
  background-color: #094F61;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-content: space-between;
}
.programList li:nth-child(2){
  background: url("../images/prgr_01.png") no-repeat center;
  background-size: contain;
}
.programList li:nth-child(3){
  background: url("../images/prgr_02.png") no-repeat center;
  background-size: contain;
}
.programList li:nth-child(4){
  background: url("../images/prgr_03.png") no-repeat center;
  background-size: contain;
}

.programList li .hover{
  opacity: 0;
  transition: .2s ease-in-out;
  position: absolute;
  top:0;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  
}
.programList li .hover p{
  margin-top: 0;
  background-color: rgba(0,0,0,0);
  color: #EEC457;
  font-size: 28px;
  font-weight: 500;
  position: relative;
}
.programList li p.hover_hide{
  opacity: 1;
}
.programList li:hover p.hover_hide{
  opacity: 0;
}
.programList li:hover .hover{
  opacity: 1;
}

/**************************  section1 *************************/
.section1 {
  display: flex;
}

.section1_bg{
  flex: 1;
  background: url("../images/section1_bg.png") no-repeat;
  background-size: cover;
  background-position: 100% 0;
}
.section1_bg img{
  width: 100%;
}
.section1_conWrap {
  flex: 1;
  padding: 40px 0;
  margin-bottom: 30px;
}
.reasonCon{
  display: flex;
  align-items: center;
}

.reasonCon p{
  padding: 30px 0 0 6px;
  font-weight: 500;
  font-size: 20px;
}

.reasonCon span{
  font-weight: 500;
  margin-right: 4px;
  font-size: 20px;
}

@media screen and (max-width: 1130px) {
  .reasonCon p{
    font-size: 18px;
  }
  .section1_conWrap {
    padding: 30px 0;
  }
}

.reasonCon:nth-child(1){
  margin-left: 90px;
}
.reasonCon:nth-child(2){
  margin-left: 60px;
}
.reasonCon:nth-child(3){
  margin-left: 30px;
}

.reasonCon:nth-child(1) span{
  color: #EEC457;
}
.reasonCon:nth-child(2) span{
  color: #95C415;
}
.reasonCon:nth-child(3) span{
  color: #15C494;
}
.reasonCon:nth-child(4) span{
  color: #15A0C4;
}

.reasonCon p span{
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -1px;
}
.reasonCon:nth-child(1) p span{
  color: #E9AC0E;
}
.reasonCon:nth-child(2) p span{
  color: #5F7E0D;
}
.reasonCon:nth-child(3) p span{
  color: #0D9873;
}
/*************************  section2 *************************/
.section2 {
  text-align: center;
  color: #fff;
  background: url("../images/section2_bg.png") no-repeat center / cover;
  position: relative;
  margin: 20px;
}
.st2_title{
  font-size: 34px;
  padding-top: 50px;
  letter-spacing: -2px;
}
.st2_title span:nth-child(1){
  font-weight: 200;
}
.st2_title span{
  color: #FFBD1E;
}

.courseWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  padding-bottom:50px;
  position: relative;
}
.courseStep {
  width: 200px;
  height: 200px;
  background-color: #7FAE20;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
  position: relative;
  padding: 10px;
}
@media screen and (min-width: 1080px) and (max-width: 1130px) {
 .courseWrap img{
  width: 40px;
  height: 74px;
 }
}
.courseStep:nth-child(3){
  background-color: #2D991C;
}
.courseStep:nth-child(5){
  background-color: #03A69C;
}
.courseStep:nth-child(7){
  background-color: #0C8FBE;
}

.courseStep:nth-child(3) span.txt{
  color: #2D991C;
}
.courseStep:nth-child(5) span.txt{
  color: #03A69C;
}
.courseStep:nth-child(7) span.txt{
  color:  #0C8FBE;
}
.courseStep p {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
  letter-spacing: -1.5px;
  margin-top: 10px;
}
.courseStep span {
  font-size: 18px;
  line-height: 1.5em;
  opacity: 0.8;
  letter-spacing: -1.5px;
}
.courseStep span.txt {
  display: inline-block;
  position: relative;
  font-size: 15px;
  font-weight: 600;
  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:5px;
}
.coursetxt {
  margin-top: 16px;
}
.coursetxt p {
  font-size: 20px;
  font-weight: 400;
  color: #fff;
}
.coursetxt p span {
  color: #FFBD1E;
  text-decoration: underline;
}
/*************************  section3 *************************/
.section3 {
  text-align: center;
  color: #fff;
  background-color: #EFF2F7;
  margin: 0 20px;
}
.st3_title{
  font-size: 34px;
  padding-top: 50px;
  letter-spacing: -2px;
  color: #222;
  font-weight: 500;
}
.st3_title span:nth-child(1){
  font-weight: 400;
}
.st3_title span{
  color: #FF3030;
  font-weight: 500;
}
.sect_title {
  font-size: 26px;
  font-weight: 500;
  margin-top: 8px;
  color:#008286;
  letter-spacing: -1px;
  text-decoration: underline;
}
.coachingWrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}
.coachingStep {
  width: 320px;
  height: 170px;
  background-color: #3265BC;
  color: #fff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.coachingStep p {
  color: #FFD546;
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 30px;
  position: relative;
}
.coachingStep p::after {
  content: "";
  position: absolute;
  width: 20px;
  border-top: 2px solid #fff;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.coachingStep span {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
}
.coachingStep:nth-child(2) {
  background-color: #194CA7;
}
.coachingStep:nth-child(3) {
  background-color: #1A3D7B;
}
.st3BtnWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:30px 0 50px 0;
}
.st3BtnWrap .st3Btn{
  font-size: 20px;
  width: 350px;
  height: 64px;
  line-height: 64px;
  border: 4px solid #03A69C;
  color:#03A69C;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: -1px;
  background-color: #fff;
  position: relative;
} 
.st3BtnWrap .st3Btn span{
  font-weight: 600;
}
.st3BtnWrap .st3Btn:nth-child(1){
  border: 4px solid #2D991C;
  color: #2D991C;
  margin-right: 40px;
}

/*************************  sectio4 * *************************/
.section4 {
  margin: 20px;
  text-align: center;
  color: #fff;
  background: url("../images/section4_bg.png") no-repeat center / cover;
}
.st4_title{
  font-size: 34px;
  padding-top: 50px;
  letter-spacing: -2px;
  color: #fff;
  font-weight: 500;
}
.st4_title span:nth-child(1){
  font-weight: 200;
  letter-spacing: -0.5px;
}
.st4_title span{
  color: #FFDB1E;
  font-weight: 500;
}
.st4_txtWrap{
  padding: 24px 50px;
  background-color: rgba(0, 0, 0, 0.6);
  display: inline-block;
  border-radius: 20px;
  margin: 20px 0;
  font-size: 20px;
  line-height: 36px;
}
.st4txt2{
  font-size: 20px;
  color: #fff;
}
.st4BtnWrap{
  display: flex;
  justify-content: center;
  align-items: center;
  padding:20px 0 50px 0;
}
.st4Btn{
  font-size: 20px;
  width: 360px;
  height: 66px;
  line-height: 66px;
  color:#2E6FAF;
  border-radius: 100px;
  font-weight: 500;
  letter-spacing: -1px;
  background-color: #fff;
  position: relative;
}
.st4BtnWrap .st4Btn span{
  font-weight: 600;
}
/************************** NEWS *************************/

.indexTitle {
  font-family: "Roboto", sans-serif;
  font-size: 40px;
  font-weight: 500;
  position: relative;
  text-align: center;
  margin-top: 60px;
}
.indexTitle::after {
  content: "";
  position: absolute;
  background-color: #f44a51;
  width: 6px;
  height: 20px;
  border-radius: 10px;
  transform: rotate(45deg);
  top: -24px;
  left: 50%;
}
.indexTitle span{
  font-family: "Noto Sans KR", sans-serif;
  letter-spacing: -2.5px;
}
.indexTitleSub {
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #88817b;
  margin-bottom: 30px;
  letter-spacing: -1px;
}
.indexTitleSub span{
  color: #0099FF;
  font-weight: 500;
}
.news {
  display: flex;
  justify-content: space-between;
  margin-bottom: 60px;
}
.m_menu {
  display: none;
}
.newsWrap {
  width: calc(75% - 10px);
  height: 296px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.newsMenu {
  display: flex;
  justify-content: space-between;
  height: 46px;
}
.news_menu {
  display: none;
}
.newsMenu ul {
  display: flex;
}
.newsMenu ul li {
  width: 180px;
  margin-right: 2px;
  text-align: center;
  line-height: 46px;
  background-color: #ddd;
}
.newsMenu ul li.on {
  background-color: #f44a51;
  color: #fff;
  font-weight: 500;
}
.more {
  font-size: 16px;
  line-height: 46px;
}
.newslist {
  display: flex;
  justify-content: space-between;
}
.newsitems {
  width: calc(100% / 3);
  border: 1px solid #b3b3b3;
  height: 198px;
  padding: 20px;
  margin-right: 10px;
}
.newsitems:nth-child(3) {
  margin-right: 0;
}
.newsitems p.title {
  font-size: 20px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

.newsitems p.newsCon {
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.helfWrap {
  width: calc(calc(calc(100% - 40px) / 4) - 40px);
  min-width: 225px;
  background-color: #8CBB1E;
  padding: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.helfWrap p {
  font-size: 24px;
  color: #fff;
}
.helfWrap p.num {
  font-size: 30px;
  font-weight: 500;
}
.helfWrap span {
  font-size: 15px;
  color: #fff;
  font-weight: 300;
  display: block;
}
.btn_flex {
  display: flex;
}
.btn_flex div {
  position: relative;
  color: #fff;
  font-size: 15px;
  margin-right: 40px;
}

.btn_flex div:last-child {
  margin-right: 0;
}

.btn_flex div::after {
  content: "";
  position: absolute;
  background: url(../images/icon_arrow.png) no-repeat;
  width: 17px;
  height: 17px;
  top: 3px;
  right: -24px;
}
/*******************************************************index 끝**************************************************************/
/************서브페이지 전체레이아웃&폰트 스타일************/
/*상단 이미지&터이틀*/
.sub-visual {
  position: absolute;
  top: 110px;
  width: 100%;
  height: 260px;
  z-index: 100;
}
.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 {
  display: flex;
  justify-content: space-between;
}
.titleWrap {
  border-left: 1px solid rgba(225, 225, 225, 0.5);
}
.titleWrap h2 {
  padding-top: 40px;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  font-family: "Roboto", sans-serif;
  letter-spacing: -1;
}
.titleWrap span {
  color: #eac668;
  font-size: 18px;
  font-family: "Noto Serif KR", serif;
  padding-left: 24px;
}
/*서브페이지 메뉴 셀렉트박스*/
.select-navWrap {
  border-left: 1px solid rgba(225, 225, 225, 0.5);
  border-right: 1px solid rgba(225, 225, 225, 0.5);
  width: 460px;
  height: 100%;
  position: relative;
}

.select-nav {
  position: absolute;
  bottom: 0;
  display: flex;
  background: rgba(136, 129, 123, 0.3);
  height: 48px;
  line-height: 48px;
  width: 100%;
}

.select-nav div.home {
  width: 48px;
  text-align: center;
  line-height: 48px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 20px;
  color: #fff;
}
.select-nav .depth1 {
  flex: 0.8;
  color: #fff;
  font-size: 15px;
  padding-left: 20px;
  box-sizing: border-box;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.select_wrap {
  flex: 1.2;
  position: relative;
  user-select: none;
}
.select_wrap ul {
  position: relative;
  overflow: hidden;
}
.select_wrap .default_option:before {
  content: "";
  position: absolute;
  top: 16px;
  right: 20px;
  width: 8px;
  height: 8px;
  border: 1px solid;
  border-color: transparent transparent #fff #fff;
  transform: rotate(-45deg);
}
.select_wrap ul li {
  color: #fff;
  font-size: 15px;
  padding-left: 20px;
  height: 48px;
  box-sizing: border-box;
}
.select_wrap .default_option:hover {
  background-color: #f3f3f3;
  border: 1px solid #222;
  overflow: visible;
}
.select_wrap .default_option:hover li {
  color: #222;
}
.select_wrap .default_option:hover .select_ul {
  opacity: 1;
}
.select_wrap .default_option:hover:before {
  top: 22px;
  transform: rotate(-225deg);
  border-color: transparent transparent #222 #222;
}

.select_wrap .select_ul {
  position: absolute;
  top: 48px;
  left: -1px;
  width: 100%;
  opacity: 0;
  border-left: 1px solid #222;
  border-right: 1px solid #222;
}
.select_wrap .select_ul li {
  position: relative;
  padding-left: 32px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #dddddd;
  font-size: 15px;
  font-weight: 400;
  color: #222;
  transition: all 0.5s;
}
.select_wrap .select_ul li:last-child {
  border-bottom: 1px solid #222;
}
.select_wrap .select_ul li::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 10px;
  background-color: #222;
  top: 26px;
  left: 20px;
  transition: all 0.5s;
}
.select_wrap .select_ul li:hover {
  background: #88817b;
  color: #fff;
}
.select_wrap .select_ul li:hover::before {
  content: "";
  background-color: #fff;
}

/*버튼&폰트 스타일*/
.btnF_S {
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background-color: #0099FF;
  border-radius: 5px;
  display: inline-block;
}

.btnF_S_W {
  padding: 0;
  height: 40px;
  width: 95px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  color: #fff;
  background-color: #0099FF;
  border-radius: 5px;
  display: inline-block;
}

.btnO_S_W {
  padding: 0;
  height: 38px;
  width: 93px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
  display: inline-block;
}
.btnO_SF{
  padding: 0 12px;
  height: 38px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
  display: inline-block;
}
.btn_reply {
  padding: 0;
  height: 38px;
  width: 76px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
  display: inline-block;
}
.btn_noreply{
  padding: 0;
  height: 38px;
  width: 76px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #999;
  border-radius: 5px;
  border: 1px solid #999;
  display: inline-block;
}
.btnF_M {
  /*기본 버튼 / 회원가입에 하나*/
  padding: 0 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #0099FF;
  border-radius: 5px;
  display: inline-block;
}
.btnO_M {
  padding: 0 20px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
  display: inline-block;
}
.btnF_L {
  /*회원가입*/
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #0099FF;
  border-radius: 5px;
}
.btnO_L {
  width: calc(100% - 2px);
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
}
.btnF_L.inline {
  /*회원가입*/
  padding: 0 20px;
  width: fit-content;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #0099FF;
  border-radius: 5px;
}
.btnO_L.inline {
  width: fit-content;
  padding: 0 20px;
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  color: #0099FF;
  border-radius: 5px;
  border: 1px solid #0099FF;
}
.btn_log {
  margin: 20px 0;
}
/*버튼 정렬 오른쪽정렬&위로 10px 띄움*/
.btnWrap {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}
.btnCenter {
  display: flex;
  justify-content: center;
}
.btnCenter div:last-child{
  margin-left: 10px;
}
.btnWrap div {
  margin-right: 10px;
}
.btnWrap div:last-child {
  margin-right: 0;
}

.btn_play {
  width: 28px;
  height: 28px;
  background: url("../images/btn_play.svg") no-repeat center / contain;
  margin: 0 auto;
}
.btn_file {
  width: 28px;
  height: 28px;
  background: url("../images/btn_file.svg") no-repeat center / contain;
  margin: 0 auto;
}

.underline {
  text-decoration: underline;
}
.red {
  color: #f44a51;
}
.blue {
  color: #0099FF;
}
.center {
  text-align: center;
  margin: 0 auto;
}
span.b {
  font-weight: 500;
}
/**********************************표 스타일****************************************/
/*기본표 스타일*/
.Board tr {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.Board th {
  font-size: 16px;
  font-weight: 500;
  background-color: #eff2f7;
  padding: 15px;
  height: 29px;
  border-top: 1px solid #222;
  line-height: 22px;
}
.Board tr.bold {
  border-bottom: 1px solid #222;
}
.Board td {
  font-size: 16px;
  text-align: center;
  padding: 10px;
  height: 39px;
}
.Board td.alignLeft {
  text-align: left;
}
.Board tr.reply {
  background-color: #eff2f7;
}

.Board tr.reply td {
  padding: 12px 20px 20px 20px;
}
td.best::before {
  content: "BEST";
  color: #ff5447;
  font-size: 12px;
  border: 1px solid #ff5447;
  border-radius: 5px;
  padding: 0 6px 2px 6px;
  margin-right: 8px;
}

.Board.pay tr td:nth-child(1),
.Board.pay tr td:nth-child(3) {
  width: 130px;
}
/*게시판 하단 페이지목록*/
.boardPager {
  text-align: center;
  margin: 10px 0 0 0;
}
.boardPager li {
  display: inline-block;
}
.boardPagerWrap {
  position: relative;
}
.boardPager li a {
  display: inline-block;
  width: 24px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  color: #999999;
}
.boardPager li.pagerFirst a {
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background: url(../images/ico_pagerFirst.png);
}
.boardPager li.pagerPrev a {
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background: url(../images/ico_pagerPrev.png);
  margin-right: 16px;
}
.boardPager li.pagerNext a {
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background: url(../images/ico_pagerNext.png);
  margin-left: 16px;
}
.boardPager li.pagerLast a {
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  background: url(../images/ico_pagerLast.png);
}
.boardPager li.on a {
  color: #ff5447;
  text-decoration: underline;
}
/*th이 세로로 있는 표스타일*/
.Board.vtcl tr td:first-child {
  font-size: 16px;
  font-weight: 500;
  background-color: #f3f3f3;
}

/*tr이 홀수열에 있는 표*/
.Board.odd tr td:nth-child(odd) {
  font-size: 16px;
  font-weight: 500;
  background-color: #f3f3f3;
}

.Board.odd tr:first-child {
  border-top: 1px solid #222;
}

/*라인 없는 표*/
table.Board_border0 {
  border: none;
}
.attach {
  text-decoration: underline;
  color: #0099FF;
}
.BoardCon {
  padding: 20px;
  border-bottom: 1px solid #222;
}

.Board.color th{
  background-color: #0099FF;
  color: #fff;
  font-size: 17px;
  border-top: 2px solid #222;
}
.Board.color tr{
  border: none;
}
.Board.color tr:nth-child(2n){
  background-color:#EFF2F7;
}
.Board.color tbody tr:last-child{
  border-bottom: 1px solid #222;
}
.Board tr.border_b{
  border-bottom: 1px solid #222;
}
.Board.vcolor tr:first-child{
  border-top: 2px solid #222;
}
.Board.vcolor td.bg_blue{
  background-color: #eff2f7;
  color: #222;
  font-size: 17px;
  font-weight: 500;
}
.Board.vcolor td.bg_blue2{
  background-color: #4E83DC;
  color: #fff;
  font-size: 17px;
  font-weight: 500;
}

.Board.vcolor td.bg_blue2.left_wl{
  border-right: 1px solid #fff;
}
p.CurriTitle{
  font-size: 60px;
  font-family: 'Roboto', sans-serif;
  position: relative;
  color: #0099FF;
  letter-spacing: -2px;
}
p.CurriTitle::after{
  position: absolute;
  content: "";
  width: calc(100% - 6em) ;
  height: 1px;
  background-color: #0099FF;
  bottom: 30px;
  right: 0;
}
/*****************이메일수집, 개인정보, 이용약관*************************/
.contentWrap.siteinfo{
  margin-top: 140px;
  text-align: justify;
  font-size: 15px;
}
ul.indent li{
  display: flex;
}
ul.indent li span:first-child{
  margin-right: 8px;
}
h5.etcinfo{
  font-size: 16px;
  font-weight: 500;
  margin: 30px 0 10px 0;
  color: #0099FF;
}
ul.indent.dd{
  margin: 10px 0 10px 20px;
}
ul.indent.dd2{
  margin: 0 0 10px 12px;
}
h4.etcinfo{
  font-size: 17px;
  font-weight: 500;
  margin: 30px 0 0 0;
  color:#2C5CAE;
  text-decoration: underline;
}
/*****************************레이아웃 박스********************************/
.contentWrap {
  position: relative;
  margin: 0 auto;
  margin-top: 402px;
  padding-bottom: 100px;
  min-height: calc(100vh - 590px);
  /*border: 1px solid red;*/
  /*컨텐츠 상하 마진*/
}

section article {
  margin-bottom: 30px;
}
section article:last-child {
  margin-bottom: 0;
}

/*중앙정렬 컨테이너*/
.container {
  max-width: 1140px;
  padding: 0 20px;
  margin: 0 auto;
  height: inherit;
}

/*서브페이지 제목*/
.mytitleWrap{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
section h3.atc_title {
  position: relative;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 10px 24px;
  letter-spacing: -1px;
}
section h3.atc_title::before {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  background: url("../images/ico_h3.svg");
  top: 6px;
  left: -24px;
}
.standard{
  font-size: 15px;
  border: 1px solid #0099FF;
  color: #0099FF;
  padding: 4px 8px;
  border-radius: 5px;
  margin-bottom: 10px;
}
/*알럿박스*/
.alertbox {
  font-size: 16px;
  border: 6px solid #eff2f7;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  margin: 30px 0 20px 0;
}
.alertbox p {
  display: inline-block;
  position: relative;
  margin-left: 70px;
}
.alertbox p::after {
  content: "!";
  position: absolute;
  text-align: center;
  line-height: 60px;
  font-size: 28px;
  color: #fff;
  width: 60px;
  height: 60px;
  background-color: #eec457;
  border-radius: 100%;
  top: 50%;
  left: -70px;
  transform: translateY(-50%);
}
/*유의사항*/
.noteWrap {
  background-color: #eff2f7;
  font-size: 15px;
  padding: 30px;
}
.noteWrap p.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 6px;
}
.noteWrap > div {
  margin-bottom: 26px;
}
.noteWrap > div:last-child {
  margin-bottom: 0;
}
ul.notecon {
  margin-left: 20px;
}

ul.notecon li {
  position: relative;
  margin-left: 16px;
  margin-bottom: 16px;
}
ul.notecon li::before {
  content: "*";
  position: absolute;
  left: -12px;
}
ul.notecon li.mb0 {
  margin-bottom: 0;
}
/*************************팝업창 스타일**********************************/
.popupWrap{
  position: fixed;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
  z-index: 1000000000;
}
.popwin{
  position: fixed;
  background-color: #fff;
  width: 740px;
  max-height: 800px;
  padding: 30px;
  color: #222;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: auto;
}
.popTitle{
  font-size: 20px;
  border-bottom: 1px solid #222;
  text-align: center;
  font-weight: 600;
  padding-bottom: 10px;
}
.popCon{
  margin-top: 20px;
}
.popPara{
  margin-bottom: 20px;
}
.popPara:last-child{
  margin-bottom: 0;
}
p.ParaCon{
  font-size: 15px;
}
.popMdTitle{
  font-size: 16px;
  font-weight: 500;
  color: #69090a;
  text-align: center;
  background-color:#eff2f7;
  padding: 4px 0;
}
.popSubTitle{
  font-size: 16px;
  font-weight: 500;
  color: #105C6F;
}
ol.pop{
  margin-left: 20px;
}
ol.pop li{
  font-size: 15px;
  list-style: decimal;
}
i.popclose{
  position: absolute;
  color: #222;
  font-size: 30px;
  top:30px;
  right: 30px;
}
/****************************************************내용 시작**********************************************************/
/**********************************회원가입**********************************/
h2.join {
  margin-bottom: 40px;
  padding-top: 10px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
h2.join p {
  display: inline-block;
}
.join_container {
  margin: 0 auto;
  width: 630px;
  padding: 40px 75px;
  border-radius: 10px;
  border: 1px solid #ddd;
  background-color: #eff2f7;
}
.joinWrap input[type="text"],
.joinWrap input[type="password"],
.joinWrap input[type="email"],
.joinWrap input[type="file"],
.joinWrap input[type="url"],
.joinWrap textarea {
  height: 48px;
  text-indent: 16px;
  border-radius: 6px;
}
.join_h3 {
  font-size: 16px;
  margin: 10px 0 6px 0;
  font-weight: 500;
  display: inline-block;
}
#join_form .join_h3:first-child {
  margin-top: 0;
}
.join_h3.star label {
  position: relative;
}
.join_h3.star label::after {
  content: "*";
  position: absolute;
  top: 0;
  right: -10px;
  color: red;
}

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

#join_form .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
select#gender {
  width: 200px;
  margin-left: 10px;
  background: #fff url("../images/select_arrow.svg") no-repeat 85% 50%;
}

.flex_bl {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex_bl h3,
select#area,
select#grade {
  flex: 1;
}
.flex_bl h3:first-child,
select#area{
  margin-right: 10px;
}

.agreeWrap {
  padding: 16px;
  background-color: #fff;
  margin: 10px 0;
  border-radius: 5px;
  border: 1px solid #dddddd;
  font-size: 14px;
}
.agreeWrap p {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.agreeWrap p label {
  margin-right: 10px;
}
.agreeWrap > div {
  margin-top: 10px;
  padding-left: 5px;
}
p.agreeAll {
  font-size: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
}

p.agreeAll input[type="checkbox"] + label,
.loginfoWrap input[type="checkbox"] + label {
  width: 24px;
  height: 24px;
}
p.agreeAll input[type="checkbox"]:checked + label::before,
.loginfoWrap input[type="checkbox"]:checked + label::before {
  content: "\e929";
  position: absolute;
  color: #fff;
  font-family: "xeicon";
  font-size: 24px;
  top: 0;
  left: 0;
}
.loginfoWrap {
  display: flex;
  justify-content: space-between;
}

.loginfoWrap span {
  margin-left: 6px;
}
.join_text {
  text-align: center;
  margin-top: 30px;
}
.ans_text {
  text-align: center;
  font-size: 16px;
}
.ans_text span {
  color: #0099FF;
}

.csTitleWrap{
  margin: 0 auto;
  width: 732px;
  margin-bottom: 20px;
}
.csTitle{
display: flex;
align-items: flex-end;
margin-bottom: 10px;
}
.csTitle h2{
  font-size: 24px;
  font-family: "Noto Serif KR", serif;
  font-weight: 400;
  color: #0099FF;
  margin-left: 10px;
  border-bottom: 1px solid #0099FF;
}

.csdateWrap{
  display: flex;
  margin-right: 10px;
}
i.xi-calendar{
  width: 56px;
  height: 50px;
  border-radius: 0 5px 5px 0;
  text-align: center;
  line-height: 48px;
  font-size: 24px;
  color: #fff;
  background-color: #0099FF;
}

#join_form input[type="text"]#csdate{
  border-radius: 5px 0 0 5px;
  border-right: none;
}

.flex_bl.cs div{
  flex:1;
}
.mt10{
  margin-top: 10px;
}
.mt20{
  margin-top: 20px;
}
select#period{
  width: calc(50% - 6px);
  display: block;
}
/**********************************MyPage**********************************/
select#result {
  width: 140px;
  height: 40px;
  background: #fff url("../images/select_arrow.svg") no-repeat 85% 50%;
}

/**탭메뉴**/
nav.tabMenu ul {
  display: flex;
  background-color: #0099FF;
  height: 58px;
  margin-bottom: 12px;
  width: 100%;
}
nav.tabMenu ul li {
  flex: 1;
  text-align: center;
  position: relative;
}
nav.tabMenu ul li a {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  height: 58px;
  line-height: 58px;
}
nav.tabMenu ul li.on a {
  color: #fff;
}
nav.tabMenu ul li.on a::after {
  content: "\e92f";
  position: absolute;
  font-family: "xeicon";
  font-size: 14px;
  color: #fff;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
}
/**listWrap : 강좌 썸네일 콘텐츠**/
.listThumb {
  position: relative;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.listThumb .column {
  width: calc(calc(100% - 50px) / 5);
  background-color: #fff;
  border: 1px solid #ddd;
  margin: 0 10px 10px 0;
  overflow: hidden;
}
.listThumb .column:nth-child(5n + 0) {
  margin-right: 0;
}
.listThumb .column .thumb_txt {
  margin: 12px 10px 12px 10px;
}
.thumb_txt span {
  margin-left: 8px;
}
.CourseIcoWrap span:first-child {
  margin-left: 0;
}
.thumb_txt .ico_course {
  color: #ff892f;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid #ff892f;
  border-radius: 5px;
}
.thumb_txt .ico_step {
  color: #598c1f;
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid #598c1f;
  border-radius: 5px;
}
.listThumb .column img {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  left: 50%;
  transform: translateX(-50%);
}
.listThumb .column .thumbTitle {
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/*강좌 목록 추가 끝*/
.lessonWrap {
  display: flex;
  justify-content: space-between;
  align-content: flex-start;
}
.lessonWrap img {
  width: calc(100% - 400px);
  margin-right: 20px;
  object-fit: cover;
}
.lessoninfo {
  border: 1px solid #ddd;
  width: 380px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.lessoninfo_top {
  border-bottom: 1px solid #ddd;
  padding: 20px;
}
.lessoninfo h5 {
  font-size: 18px;
  font-weight: 500;
}
.acterName {
  font-size: 16px;
  color: #b3b3b3;
  margin-top: 4px;
}
.lessoninfo_botm {
  padding: 20px;
}
.lessoninfo_botm table tr td {
  padding: 2px 0;
  vertical-align: top;
}
.lessoninfo_botm table tr td:first-child {
  width: 4.5em;
}
.lessoninfo_botm table tr td:nth-child(3) {
  padding-left: 8px;
}
.lessoninfo_botm td.tuition {
  font-size: 14px;
}
.priceInfo{
  font-size: 18px;
}
.priceInfo .saleinfo{
  font-size: 16px;
  color: #B3B3B3;
}

.lessoninfo_botm td.tuition span.price {
  font-size: 20px;
  font-weight: 600;
  color: #f44a51;
}
.paybtnWrap {
  padding: 20px;
}
.paybtnWrap div:first-child {
  margin-bottom: 10px;
}
.tabConWrap {
  padding: 0;
}
.courseTileWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.courseTileWrap p.courseSubTtile{
  font-family: "Noto Serif KR", serif;
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  margin-bottom: 32px;
  text-align: center;
}
.courseinfoList{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  width: 906px;
}

.courseinfoList.items3{
  width: 720px;
}
.courseinfoList li.infoCon{
  width: 160px;
  height: 160px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  position: relative;
}

.courseinfoList li.infoCon:nth-child(1){
  background-color: #EEC457;
}
.courseinfoList li.infoCon:nth-child(3){
  background-color: #689850;
}
.courseinfoList li.infoCon:nth-child(5){
  background-color: #44A49D;
}
.courseinfoList li.infoCon:nth-child(7){
  background-color: #5A7BB3;
}

.tabConBox1{
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}
.tabConBox1 div{
  flex: 1;
}
.tabConBox1 div:first-child{
  margin-right: 20px;
}
ol.list li{
  margin-left: 16px;
  list-style: decimal;
  letter-spacing: -1px;
}
ul.ulList li{
  list-style: disc;
}
.referImg{
  margin: 20px 0;
  display: flex;
  justify-content: center;
}
.referImg img{
  width: 100%;
}
.tabConWrap.all {
  padding: 10px;
}
.tabConWrap.all p {
  padding: 0;
  margin-top: 10px;
}
.tabConWrap img {
  max-width: 100%;
}
.tabConWrap p {
  padding: 20px 0;
}
.tabConWrap p.title {
  padding: 0;
  font-size: 20px;
  color: #105C6F;
  font-weight: 500;
}
.tabConFlex{
  display: flex;
}
.tabConFlex p{
  padding: 0;
}
p.ConFlexTitle{
  font-size: 30px;
  font-weight: 600;
  padding-right: 20px;
  width: 280px;
}
.ConFlex_r p:nth-child(1){
  color: #0099FF;
  font-size: 17px;
  font-weight: 500;
  text-decoration: underline;
  margin-bottom: 20px;
}
ul.checkList li{
  position: relative;
  margin-left: 24px;
  margin-bottom: 6px;
}
ul.checkList li::after{
  position: absolute;
  content: "";
  background: url("../images/check-mark.png");
  width: 16px;
  height: 16px;
  left: -24px;
  top:6px;
}
.courseImg img{
margin-top: 20px;
max-width: 100%;
}
.courseImg img:last-of-type{
  margin-bottom: 20px;
  }
.otherCourse{
  margin-top: 40px;
}
.otherCourse .ConFlexTitle{
  margin-bottom: 10px;
}
.indexWrap {
  display: flex;
  margin-bottom: 20px;
}
.indexWrap img {
  width: 460px;
  margin-right: 20px;
  object-fit: cover;
}
.indexWrap .stepinfo {
  width: calc(100% - 440px);
}
.stepTitle {
  color: #0099FF;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
}
.stepNum {
  font-size: 15px;
  font-weight: 300;
  padding-right: 10px;
  position: relative;
  border-bottom: 1px solid #0099FF;
}
.stepNum::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  background-color: #0099FF;
  bottom: 0;
  right: 0;
}
.stepNum span {
  font-size: 33px;
}
.stepName {
  font-size: 15px;
  margin-left: 10px;
  border-bottom: 1px solid #0099FF;
  position: relative;
}
.stepName::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #0099FF;
  bottom: -1px;
  left: -10px;
}
ol.indexlist{
  margin-top: 12px;
}
ol.indexlist li{
  margin-left: 16px;
  list-style: decimal;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
ol.indexlist li div{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
ol.indexlist li p{
  padding:0;
  padding-right: 12px;
}
.playbtn{
  background-color: #0099FF;
  font-size: 14px;
  color: #fff;
  padding: 4px 20px 4px 8px;
  border-radius: 5px;
  position: relative;
}
.playbtn::after{
  position: absolute;
  content: "\e93f";
  font-family: "xeicon";
  top:8px;
  right: 6px;
}

/**탭메뉴2**/
nav.tabMenu2 ul {
  display: flex;
  height: 60px;
  margin: 20px 0;
  width: 100%;
  background-color: #eff2f7;
}
nav.tabMenu2 ul li {
  flex: 1;
  border: 1px solid #ddd;
  border-left: none;
}
nav.tabMenu2 ul li:first-child {
  border-left: 1px solid #ddd;
}
nav.tabMenu2 ul li a {
  font-size: 16px;
  font-weight: 500;
  color: #b3b3b3;
  display: block;
  height: 60px;
  text-align: center;
  line-height: 60px;
}
nav.tabMenu2 ul li.on {
  position: relative;
  height: 58px;
  background-color: #fff;
  border-top: 2px solid #f44a51;
  border-bottom: 1px solid #fff;
}
nav.tabMenu2 ul li.on a {
  color: #222;
}

.Board.index td p {
  font-weight: 600;
  color: #0099FF;
}
.BoardCon textarea {
  padding: 20px;
  height: 280px;
  box-sizing: border-box;
}
/*레슨 과제*/
.fileatcWrap {
  display: flex;
}
.fileatcWrap div {
  height: 46px;
  flex: 1;
  margin-right: 10px;
  background-color: #eff2f7;
  border: 1px solid #ddd;
  border-radius: 5px;
}

/*나의 입시 과제 코칭*/
.contentWrap.coaching {
  background-color: #eff2f7;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 312px;
}
.coachWrap {
  background-color: #fff;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}
.coachStepWrap {
  /*코칭 스텝 표시*/
  background-color: #3a5973;
  display: flex;
  border-radius: 20px 20px 0 0;
  padding: 20px 40px;
  justify-content: space-between;
}
.coachStepWrap li {
  color: rgba(255, 255, 255, 0.2);
  font-size: 18px;
  position: relative;
}
.coachStepWrap li.stepline {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.2);
  flex: 0.2;
  bottom: 0;
  top: 20px;
}
.coachStepWrap li p {
  display: inline-block;
}
.coachStepWrap li.on span {
  color: #73bfff;
}
.coachStepWrap li.on p {
  color: #fff;
}

.coachConWrap {
  padding: 20px 30px;
}
.coachCon {
  margin-bottom: 20px;
}
.coachConWrap p.coachTitle {
  font-weight: 500;
  margin-bottom: 8px;
}
.coachCon select {
  width: 50%;
}
.coachCon textarea {
  padding: 20px 10px;
  height: 180px;
  width: 100%;
  box-sizing: border-box;
}
.coachCon .inputtext {
  padding: 20px 10px;
  border: 1px solid #ddd;
}
.coachCon .coachresult {
  padding: 20px 10px;
  background-color: #eff2f7;
}

.coachCon .fileatcWrap div {
  background-color: #eff2f7;
  border: 1px solid #ddd;
  line-height: 46px;
  padding: 0 10px;
  font-size: 15px;
}

.note {
  background-color: #eff2f7;
  padding: 20px;
}
.note p {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 4px;
}
.note p.note_bold {
  font-size: 16px;
  font-weight: 500;
}
ul.annot{
  margin-top: 10px;
  font-size: 15px;
  color: #222;
}
ul.annot li {
  position: relative;
  margin-left: 16px;

}
ul.annot li::before {
  content: "-";
  position: absolute;
  left: -12px;
}



.conBox {
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 20px;
  min-height: 80px;
}
.conBox.center{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.conBox table {
  margin-top: 10px;
}
.conBox p.conTitle {
  font-size: 18px;
  font-weight: 500;
  color: #0099FF;
  text-align: center;
}
.conBox span {
  font-size: 16px;
}

select#pay {
  width: 280px;
  margin-right: 10px;
  background: #fff url("../images/select_arrow.svg") no-repeat 92% 50%;
}
select#card {
  width: 180px;
  background: #fff url("../images/select_arrow.svg") no-repeat 90% 50%;
}

/***********************************입시 과제 컨설팅****************************************/
.contentWrap.consultingWrap {
  margin-top: 370px;
}
.constTop {
  background: url("../images/section3_bg.png") no-repeat center / cover;
  background-color: #d9b451;
  height: 600px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.constTop div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border: 10px solid #fff;
  padding: 20px;
  width: 400px;
  height: 360px;
}
.constTop div p {
  font-size: 18px;
  color: #fff;
  text-align: center;
}
.constTop div p.title {
  font-size: 30px;
  font-weight: 500;
}
.constTop div span {
  font-size: 22px;
  color: #fff;
  margin-bottom: 70px;
  position: relative;
  text-align: center;
}
.constTop div span::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: #f44a51;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.constmid {
  padding: 40px 0;
  text-align: center;
}
.constmid h2 {
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -2px;
  margin-bottom: 20px;
}
.constmid h2 span.act {
  color: #ff3030;
  position: relative;
}
.constmid h2 span.act::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ff3030;
  bottom: 0;
  left: 0;
}
.constmid p {
  font-size: 18px;
}
.const_courseWrap {
  background: url("../images/constcs_bg.png") no-repeat center / cover;
  height: 200px;
}
.const_course {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  text-align: center;
  position: relative;
}
.const_course::before {
  content: "";
  position: absolute;
  width: calc(100% - 28%);
  border-bottom: 2px dotted #fff;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
}
.const_course.item3::before {
  content: "";
  position: absolute;
  width: calc(100% - 36%);
  border-bottom: 2px dotted #fff;
  bottom: 54px;
  left: 50%;
  transform: translateX(-50%);
}
.const_course li {
  position: relative;
  margin-bottom: 60px;
  font-size: 18px;
  z-index: 10;
  flex: 1;
}
.const_course li::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 100%;
  background-color: #ffd056;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
}
.const_course li span {
  display: block;
}
.college_select p.title {
  font-size: 16px;
}
.college_select nav.tabMenu2 ul {
  margin-top: 10px;
}
.area_title{
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #0099FF;
}
.collegeWrap {
  display: flex;
  flex-wrap: wrap;
}
.collegeWrap li {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin: 0 12px 20px 0;
  width: calc(calc(100% - 60px) / 6);
}
.collegeWrap li:nth-child(6n + 0) {
  margin-right: 0;
}
.collegeWrap li img {
  height: 120px;
  background-color: #eff2f7;
  border: 1px solid #ddd;
  box-sizing: border-box;
  object-fit: none;
}
.collegeWrap li.on img {
  background-color: #fff;
  border: 2px solid#FF3030;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
}
select#collegelist,
.select_col {
  display: none;
}

/******************************컨설팅 탑 이미지 추가 *************************************/
.constTopWrap{
  position: relative;
  background: url("../images/choachin_bg_main.png") no-repeat center;
  background-color: #eff2f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
}
.constTopWrap::after{
  content: "";
  position: absolute;
  background: url("../images/choachin_bg_right.png") no-repeat;
  background-size: contain;
  background-position: 0 100%;
  bottom:0;
  right: 0;
  max-height: 500px;
  max-width: 705px;
  z-index: 1;
  width: 30vw;
  height: 50vh;

}
.constTopWrap::before{
  content: "";
  position: absolute;
  background: url("../images/choachin_bg_left.png") no-repeat;
  background-size: contain;
  top:0;
  left: 0;
  max-height: 500px;
  max-width: 404px;
  z-index: 1;
  width: 20vw;
  height: 50vh;
}
.constTopWrap .subTile{
  z-index: 10;
}
.constTopWrap .mainTitle{
  z-index: 10;
}
.constTopWrap p{
  z-index: 10;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}
.constTopWrap p.check_txt{
  font-size: 36px;
  letter-spacing: -3px;
  margin-bottom: 10px;
}
.constTopWrap p.check_txt span{
  font-size: 36px;
  color: #F44A51;
}
ul.blueBox{
  padding: 24px 34px;
  background-color: #3C62A4;
  color: #fff;
  border-radius: 20px;
  font-size: 20px;
  line-height: 36px;
  margin-bottom: 20px;
  z-index: 10;
}
ul.blueBox.info{
  padding: 20px 34px;
margin-top: 10px;
}
ul.blueBox li{
  position: relative;
  margin-left: 28px;
}
ul.blueBox li::before{
  content: "";
  position: absolute;
  background: url("../images/check.png");
  top:10px;
  left: -28px;
  width: 20px;
  height: 20px;
}
ul.blueBox li span{
  position: relative;
}
ul.blueBox li span::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #fff;
  left: 0;
  bottom: 0;
}
.constTopWrap p.underTxt{
  font-size: 22px;
}
/******************************입시연기 팁**************************************/
.tipTopWrap{
  background: url("../images/SECRET.png"),url("../images/SECRET.png"),  url("../images/tip_bg.png");
  background-position: center 30px, center 30px, center;
  background-repeat: no-repeat;
  background-size: auto, auto, cover ;
  background-blend-mode: overlay;
  margin-top: -32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tiptext{
  color: #fff;
  font-size: 32px;
  font-weight: 500;
  padding-top: 210px;
  text-align: center;
}
.tipPointWrap{
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  padding: 32px 0;
  margin-top: 30px;
  width: 80%;
  max-width: 1140px;
  justify-content: space-between;
}
.tipPointWrap li.tipCon{
  width: 33%;
}
.tipPointWrap li span{
  font-size: 20px;
}
.tipPointWrap li span.yl{
  color: #FFD813;
}
.tipPointWrap li p{
  color: #24DCFF;
  font-size: 22px;
  margin-bottom: 10px;
}
.r_line{
  width: 1px;
  background-color: rgba(255,255,255,0.2);
}
.tipudTxt{
  font-size: 24px;
  color: #fff;
  text-align: center;
  margin: 20px 0 30px 0;
}
.tiph5{
  font-size: 20px;
  text-align: center;
  font-weight: 500;
  margin-top: 30px;
}
.tiph5 span{
  color: #0099FF;
  text-decoration: underline;
  letter-spacing: -1.5px;
}
.alltipbtn{
  font-size: 16px;
  color: #fff;
  background-color: #FF892F;
  padding: 12px 28px;
  border-radius: 100px;
  margin: 10px 0 20px 0; 
}
.tipMovWrap{
  display: flex;
  justify-content: first baseline;
  align-items: stretch;
  margin: 10px 0 100px 0;
  flex-wrap: wrap;
}
.tipMovWrap li{
  width: calc(calc(100% - 68px) / 4);
  margin-right: 20px;
  margin-bottom: 20px;
}
.tipMovWrap li:nth-child(4n){
  margin-right:0;
}
.tipMovWrap li img{
  width: 100%;
}
.tipMovWrap li p{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 24px;
height: 48px;
}
.tipMovInfo{
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fff;
}
.tipPay{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
/*****************************온라인 오디션****************************************/
.auditTopImg{
  margin-top: -30px;
  height: 420px;
  background: url("../images/audition_text2.png"), url("../images/audition_text2_1.png"), url("../images/audition_bg.png");
  background-position: right center, right center, center;
  background-repeat: no-repeat;
  background-size: 40%, 40%, cover;
  background-blend-mode: overlay;
}
.auditTopImg .container{
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.auditTopWrap{
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 0;
}
.auditTopWrap p{
  text-align: center;
  font-size: 18px;
  font-weight: 500;
}
.auditionupload{
  display: inline-block;
  background-color: #FF892F;
  padding: 12px 40px;
  border-radius: 50px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
  font-size: 17px;
}
.searchWrap.audit{
  display: flex;
  justify-content: flex-end;
}
.searchWrap.audit select{
  width: 200px;
}
.auditListWrap{
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
}
.auditListWrap > li{
  width: calc(calc(100% - 60px) / 4);
  margin-right: 20px;
  margin-bottom: 20px;
  height: 270px;
  position: relative;
}
.auditListWrap > li:nth-child(4n){
  margin-right:0;
}
.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;
}
.auditListWrap li img{
  position: absolute;
  width: 100%;
  border-radius: 10px 10px 0 0;
  height: 200px;
  object-fit:cover;
}
.auditInfo{
  position: absolute;
  bottom: 0;
  width:calc(100% - 22px);
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  height: 70px;
}
.auditid{
  font-size: 14px;
  color: #B3B3B3;
}
.auditTitle {
  font-size: 16px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.auditGrade{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.starWrap{
  display: flex;
  align-items: center;
}
.starWrap span{
  font-size: 16px;
  font-weight: 600;
}
ul.star{
  display: flex;
  margin: 0 4px;
}
ul.star li{
  margin: 0;
  width: 14px;
  height: 14px;
  background: url("../images/star_gray.svg") no-repeat center / cover;
}
ul.star li.full{
  background: url("../images/star_red.svg") no-repeat center / cover;
}
ul.star li.half{
  background: url("../images/star_half.svg") no-repeat center / cover;
}

.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;
}
.auditMov{
  width: 100%;
}
.auditConText {
  margin-top: 10px;
}
.auditGradeWrap{
  display: flex;
  margin: 30px 0;
  align-items: center;
}
.auditGradeLeft{
  width: 50%;
}
.auditGradeLeft p{
  font-size: 26px;
  font-weight: 600;
  margin-left: 8px;
}
.auditGradeLeft div{
  display: flex;
  align-items: center;
}
.auditGradeLeft ul.star{
  display: flex;
  margin: 0 4px;
}
.auditGradeLeft ul.star li{
  margin: 0;
  width: 40px;
  height: 40px;
}
.auditGradeLeft span{
  font-size: 40px;
  font-weight: 600;
  margin-left: 10px;
}
.auditGradeRight{
  width: 50%;
  display: flex;
  border-left:1px solid #ddd ;
  padding: 10px;
  flex-wrap: wrap;
}
.auditGradeRight > li{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 50%;
  height: 30px;
}
.auditGradeRight > li div{
  display: flex;
  align-items: center;
}
.reviewTitle{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.reviewTitle p {
  font-size: 26px;
  font-weight: 600;
  margin-left: 8px;
}
.writeWrap.review{
  display: none;
}
.fileatcWrap + p{
  font-size: 14px;
  margin-top: 4px;
}
/**************************액팅스쿨 소개*******************************/
.introCon:first-child,
.introCon:last-child{
  display: flex;
  justify-content: space-between;
}
.introCon:first-child img{
  margin-right:20px;
  object-fit: cover;
}
.introCon:last-child img{
  margin-left: 20px;
  object-fit: cover;
}
.introCon{
  margin-bottom: 30px;
}
.introCon h5{
  font-size: 26px;
  font-family: "Noto Serif KR", serif;
  color: #0099FF;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
.introCon h5::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #0099FF;
  bottom: 6px;
  left: 0;
}
.introCon h5 span{
  font-size: 42px;
}
.currImg{
  width: 100%;
}
/********************************게시판 형식*****************************************/
/*게시판 상단 검색박스*/
.BoardTopWrap {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 44px;
}
.pageNum{
  font-size: 15px;
}
.BoardTop,
.BoardTop div{
  display: flex;
}
.BoardTop select {
  width: 200px;
  background: #fff url("../images/select_arrow.svg") no-repeat 90% 50%;
  margin-right: 10px;
  height: 44px;
  border-radius: 0;
}
.BoardTop input[type="text"] {
  display: inline-block;
  height: 42px;
  width: 360px;
}
.btn_searchico {
  float: right;
  width: 44px;
  height: 44px;
  background-color: #6197C3;
  text-align: center;
  line-height: 44px;
}
.btn_searchico::before {
  content: "\e97a";
  font-family: "xeicon";
  color: #fff;
  font-size: 24px;
  line-height: 44px;
}


/*대학별 입시요강 게시판 스타일*/
.Board.quest.adinfo ul li:nth-child(1){
  width: calc(100% - 240px);
}
.Board.quest.adinfo ul li:nth-child(2){
  width: 120px;
}
.Board.quest.adinfo ul li:nth-child(3){
  width: 120px;
}

/*묻고답하기 게시판 스타일*/
.Board.quest th{
  padding: 15px 10px;
}
.Board.quest ul{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.Board.quest ul li.alignLeft{
  text-align: left;
}
.Board.quest ul li{
  padding: 0 10px;
}
.Board.quest ul li:nth-child(1){
  width: calc(100% - 200px);
}
.Board.quest ul li:nth-child(2){
  width: 80px;
}
.Board.quest ul li:nth-child(3){
  width: 120px;
}
.filedown p{
  color: #0099FF;
  border: 1px solid #0099FF;
  padding: 7px;
  border-radius: 5px;
  text-align: center;
}
.faqTop{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.faqTop h3{
  font-family: "Noto Serif KR", serif;
  font-size: 60px;
  font-weight: 500;
  letter-spacing: -3px;
  display: inline-block;
}
.faqTop p{
  display: inline-block;
  background-color: #0099FF;
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  margin-left: 20px;
  position: relative;
}
.faqTop p::after{
  content: "\e935";
  position: absolute;
  color: #0099FF;
  font-family: "xeicon";
  font-size: 20px;
  transform: rotate(0.25turn);
  left: -14px;
}
.Board.faq{
  border-top: 2px solid #222;
}
.Board.faq tr td:first-child{
  width: 40px;
}
.questicon{
  width: 32px;
  height: 45px;
  background: url("../images/questicon.svg");
}
tr.questOn{
  background-color: #0099FF;
  color: #fff;
}
tr.questOn .questicon{
  background: url("../images/questicon_w.svg");
}

.Board.faq td.questcon{
  background-color: #EFF2F7;
  text-align: left;
  padding: 15px 20px;
}
/***************************레슨후기 댓글 형식*******************************/
.writeWrap{
  padding: 0;
}
/*
.writeWrap{
  background-color: #eff2f7;
  border: 1px solid #ddd;
  padding: 20px;
}*/
.writeWrap.reply{
  margin-top: 20px;
}
.writeWrap.reply div{
  display: flex;
  color: #b3b3b3;
}
.xi-subdirectory-arrow{
  font-size: 20px;
}
.writeWrap.reply textarea{
  display: inline-block;
  width: calc(calc(100% - 40px) - 30px);
}
textarea.reviewBox{
  padding: 20px;
  width: calc(100% - 42px);
  height: 3em;
}
.reviewWrap{
  padding: 40px 0;
  border-bottom: 1px solid #ddd;
}
.reviewWrap:last-child{
  border-bottom: none;
}
.profileWrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.profileInfo{
  display: flex;
  align-items: center;
}
.ico_stud{
  background: url("../images/ico_stud.png") no-repeat;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.ico_teach{
  background: url("../images/ico_teach.png") no-repeat;
  width: 32px;
  height: 32px;
  margin-right: 10px;
}
.replyCon{
  margin: 30px 0 0 30px;
}
.writerInfo p{
  padding: 0;
  color: #0099FF;
  font-weight: 600;
  line-height: 12px;
}
.writerInfo span{
  font-size: 12px;
  color: #B3B3B3;
}
div.xi-ellipsis-v{
  font-size: 20px;
  position: relative;
}
.reviewMenu{
  display: none;
  font-size: 15px;
  letter-spacing: -1px;
  position: absolute;
  width: 6em;
  border: 1px solid #ddd;
  text-align: center;
  top:26px;
  right: 0;
  background-color: #fff;
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
}
.reviewMenu.active{
  display: block;
}
.reviewMenu li{
  margin: 0 10px;
  padding: 16px 0;
}
.reviewMenu li:hover{
  color: #0099FF;
}
.reviewMenu li:first-child{
  border-bottom: 1px solid #ddd;
}
.reveiwCon{
  margin-bottom: 10px;
}

.writerInfo.reply p,
.writerInfo.reply span{
  display: inline-block;
}
.writerInfo.reply p{
  margin-right: 6px;
}
.listMore{
  color: #fff;
  background-color: #0099FF;
  padding: 16px;
  border-radius: 50px;
  text-align: center;
}
/************************강사진**************************/
.tutor_info{
  text-align: center;
}
.tutor_info h3{
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 12px;
  letter-spacing: -2px;
}
.tutor_info p{
  font-size: 16px;
  color: #888;
  line-height: 26px;
}
.swiper_thumbWrap{
  display: flex;
  justify-content: baseline;
  align-items: stretch;
  flex-wrap: wrap;
}
.swiper_thumbWrap li{
  width: calc(100% / 12);
  background-color: #000;
  cursor: pointer;
}
.swiper_thumbWrap li img{
  width: 100%;
  object-fit: cover;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: .5s ease-in-out;
}
.swiper_thumbWrap li img:hover{
  opacity: 1;
}
.swiper_thumbWrap li.noimg{
  cursor: default;
}
.swiper_thumbWrap li.noimg p{
  font-size: 10px;
  font-weight: 200;
  font-family: 'Roboto', sans-serif;
  color: rgba(255,255,255,0.5);
  border-left: 4px solid #F44A51;
  margin-top: 10px;
  padding-left: 6px;
  line-height: 20px;
  letter-spacing: 1px;
}
.swiper_thumbWrap li.noimg p span{
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.5px;
}

.tutorswiper .swiper-slide{
  width: 100%;
  height: 520px;
}
.tutorBox{
  position: absolute;
  top:40px;
  text-align: left;
  width: 70%;
}
.tutorBox .boxWrap{
  display: flex;
  justify-content: flex-start;
  margin: 0;
}
.tutorBox .boxWrap ul{
  flex:1;
}
.tutorBox ul:first-child{
  margin-right: 20px;
}
.tutorBox ul li{
  font-size: 13px;
  color: #222;
}
.tutor_tit{
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 500;
}
.tutorBox.dark .tutor_tit{
  color: #fff;
}
.tutorBox.dark ul li{
  color: rgba(255, 255, 255, 0.7);
  font-weight: 200;
}
.tutor_tit span{
  font-size: 24px;
  font-weight: 200;
}
.tutor_more{
  position: absolute;
  bottom: 30px;
}
.tutor_more img.tutor_img{
  height: 100px;
  width: auto;
  float: left;
}
.tutor_more span{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #222;
  color: #fff;
  font-size: 15px;
  text-align: center;
  line-height: 100px;
  margin-left: 10px;
}
.swiper-button-next.tutor,
.swiper-button-prev.tutor{
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 16px;
}
.swiper-button-next.tutor{
  right: 0;
}
.swiper-button-prev.tutor{
  left:0;
}

.tutorswiper .swiper-slide:nth-child(1){
  background: url("http://www.sooactors.com/images/soofarm/tutor02_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(2){
  background: url("http://www.sooactors.com/images/soofarm/tutor24_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(3){
  background: url("http://www.sooactors.com/images/soofarm/tutor22_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(4){
  background: url("http://www.sooactors.com/images/soofarm/tutor10_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(5){
  background: url("http://www.sooactors.com/images/soofarm/tutor13_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(6){
  background: url("http://www.sooactors.com/images/soofarm/tutor19_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(7){
  background: url("http://www.sooactors.com/images/soofarm/tutor20_01.png") no-repeat center / cover;
}
.tutorswiper .swiper-slide:nth-child(8){
  background: url("http://www.sooactors.com/images/soofarm/tutor21_01.png") no-repeat center / cover;
}


/************footer************/
.footerWrap {
  padding: 32px 20px;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerWrap .biglogo_col {
  display: inline-block;
  width: 145px;
  height: 114px;
  margin-right: 28px;
  background: url("../images/logo_h.svg") no-repeat;
  background-size: contain;
}

.footerWrap div ul li {
  position: relative;
  float: left;
  margin-right: 48px;
  margin-bottom: 20px;
}
.footerWrap div ul li a {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 0;
}
.footerWrap div ul .bold a {
  color: #ffbd1e;
}
.footerWrap div ul li::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: #fff;
  top: 10px;
  right: -24px;
}
.footerWrap div ul li:last-child::after {
  display: none;
}
.footerWrap div p {
  clear: both;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0;
  font-weight: 300;
  font-size: 15px;
}
.footerWrap div p span {
  display: inline-block;
  margin-right: 24px;
  line-height: 26px;
}
.footerWrap div p span a{
  color: rgba(255, 255, 255, 0.5);
}
.footerWrap div p span:last-child {
  margin-right: 0;
}