@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: #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: 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;
}

.btnF_Join {
  padding: 0 16px;
  height: 46px;
  line-height: 46px;
  font-size: 14px;
  background-color: #0099FF;
  color: #FFF;
  border-radius: 5px;
  text-align: center;
}


/*회원정보 메뉴*/
#util {
  position: fixed;
  top: 0;
  height: 40px;
  width: 100%;
  background: #225b91;
  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: 245px;
  height: 47px;
  margin-top: 18px;
  z-index: 1000;
  background: url("../images/logo.png") 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: url("../images/mainbn00.png") no-repeat center / cover;
  background-color: #007CCF;
  background-size: auto 100%;
}
.swiper-slide.bg2 {
  background: url("../images/mainbn01.png") no-repeat center / cover;
  background-color: #007CCF;
  background-size: auto 100%;
}
.swiper-slide.bg3 {
  background: url("../images/mainbn02.png") no-repeat center / cover;
  background-color:  #f4c651;
  background-size: auto 100%;
}
.swiper-slide.bg4 {
  background: url("../images/mainbn03.png") no-repeat center / cover;
  background-color: #361110;
  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: #649DCC;
}
.mainlistThumb .column .sale{
  font-weight: 600;
  margin: 0;
  color: #FF3030;
}
/**************************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: 30px;
  font-weight: 500;
  position: relative;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
}
.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: #649dcc;
  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: #649dcc;
  padding: 20px;
  margin-left: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.helfWrap p {
  font-size: 24px;
  color: #fff;
}
.helfWrap p.num a{
  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.jpg") 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.jpg") no-repeat center / cover;
}
.sub-visual.bg5 {/*커뮤니티*/
  background: url("../images/sub_bg05.jpg") 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: #649dcc;
  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: #649dcc;
  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: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
  display: inline-block;
}
.btnO_SF{
  padding: 0 12px;
  height: 38px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
  display: inline-block;
}
.btn_reply {
  padding: 0;
  height: 38px;
  width: 76px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  background-color: #fff;
  color: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
  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: #649dcc;
  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: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
  display: inline-block;
}
.btnF_L {
  /*회원가입*/
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #649dcc;
  border-radius: 5px;
}
.btnO_L {
  width: calc(100% - 2px);
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  color: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
}
.btnO_L_W {
  width: calc(100% - 2px);
  height: 46px;
  line-height: 46px;
  text-align: center;
  font-size: 16px;
  background-color: #fff;
  color: #f1f1e5;
  border-radius: 5px;
  border: 1px solid #649dcc;
}
.btnF_L.inline {
  /*회원가입*/
  padding: 0 20px;
  width: fit-content;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 16px;
  color: #fff;
  background-color: #649dcc;
  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: #649dcc;
  border-radius: 5px;
  border: 1px solid #649dcc;
}
.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: #649dcc;
}
.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: #649dcc;
}
.BoardCon {
  padding: 20px;
  border-bottom: 1px solid #222;
}

.Board.color th{
  background-color: #649DCC;
  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: #649DCC;
  letter-spacing: -2px;
}
p.CurriTitle::after{
  position: absolute;
  content: "";
  width: calc(100% - 6em) ;
  height: 1px;
  background-color: #649DCC;
  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: #649DCC;
}
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 #649dcc;
  color: #649dcc;
  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: #649dcc;
}

.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: #649DCC;
  margin-left: 10px;
  border-bottom: 1px solid #649DCC;
}

.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: #649DCC;
}

#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: #649dcc;
  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;
}
.thumb_txt 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: #649dcc;
  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: #649dcc;
  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 #649dcc;
}
.stepNum::after {
  content: "";
  position: absolute;
  width: 1px;
  height: 16px;
  background-color: #649dcc;
  bottom: 0;
  right: 0;
}
.stepNum span {
  font-size: 33px;
}
.stepName {
  font-size: 15px;
  margin-left: 10px;
  border-bottom: 1px solid #649dcc;
  position: relative;
}
.stepName::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 1px;
  background-color: #649dcc;
  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: #649dcc;
  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: #649dcc;
}
.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: #649dcc;
  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%;
}

/**************************액팅스쿨 소개*******************************/
.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: #649DCC;
  font-weight: 500;
  display: inline-block;
  position: relative;
}
.introCon h5::after{
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background-color: #649DCC;
  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: #649dcc;
  border: 1px solid #649dcc;
  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: #649DCC;
  color: #fff;
  padding: 10px 16px;
  border-radius: 20px;
  margin-left: 20px;
  position: relative;
}
.faqTop p::after{
  content: "\e935";
  position: absolute;
  color: #649DCC;
  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: #649DCC;
  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: #649dcc;
  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: #649dcc;
}
.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: #649dcc;
  padding: 16px;
  border-radius: 50px;
  text-align: center;
}

/************ 메인 레슨 아이콘 ************/
/*과정 분류 아이콘*/
.CourseIcoWrap{
  display: flex;
  margin-top: 8px;
}
.CourseIcoWrap span{
  margin-left: 4px;
}
/*배경색 아이콘*/
.CourseIco{
  display: inline-block;
  width: 52px;
  height: 23px;
  font-size: 0.9em;
  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;
  width: 62px;
  height: 25px;
  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;
}



/************footer************/
.footerWrap {
  padding: 32px 20px;
  background-color: #225b91;
  display: flex;
  align-items: center;
  justify-content: center;
}
.footerWrap .biglogo_col {
  display: inline-block;
  width: 145px;
  height: 114px;
  margin-right: 28px;
  background: url("../images/ddd.png") 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;
}