:root {  
  --color-Main : #30cacb;
    --color-BG : #F7F8FD;
    --color-secondary : #3E298C;
    --color-p40: #07b1b2;
  
    --color-gray-g10-bg: #f2f4f6;
    --color-gray-g20: #e7ebf2;
    --color-gray-g30-stroke: #d0d6e1;
    --color-gray-g40-placeholder: #c1c8d3;
    --color-gray-g50: #a4abb6;
    --color-gray-g60: #71767e;
    --color-gray-g70: #4b4b4b;
    --color-gray-g80: #303030;
    --color-gray-g90-darkfont: #1a1a1a;
    --color-gray-g100-darkbg: #11082c;
}
/* 메인페이지 관련 CSS */
/* visual 메인*/
#visual{padding-top: 80px; position: relative;}
#visual img{width: 100%; height: 540px; object-fit: cover;
  object-position: center;
  display: block;}
#visual .inner{z-index: 2;position: absolute;padding: 0;left: 50%;transform: translate(-50%, -50%);top: 48%;}
#visual .visual_text_wrap{ color: #fff;}
#visual .visual_text_wrap .visual_contents{ font-size: 36px; margin-bottom:20px;color: #fff;}
#visual .visual_text_wrap .visual_title{ font-size: 50px; font-family: 'Pretendard_B';color: #fff;}
#visual .gradient_banner{position: absolute;width: 100%; height: 100%; top: 0; z-index: 1; left: 0; background: linear-gradient(90deg, #8F969A -0.96%, rgb(143 150 154 / 94%) 32.93%, rgba(160, 145, 140, 0.60) 43.59%, rgba(160, 145, 140, 0.26) 51.37%, rgba(160, 145, 140, 0.00) 55.26%);}
/* #visual img{background: url('../img/con5.png') no-repeat center / 100%; background-size: cover;} */

/*section_1 학원 운영*/
#section_1{background-color: var(--color-BG);}
#section_1 .box_grid{display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
#section_1 .box_grid .box{width: 100%; display: flex; flex-direction: column;justify-content: center; align-items: center; text-align: center; background-color: #fff; padding: 20px; border-radius: 20px; max-width: 300px;}
/* #section_1 .box_grid .box br{display: none;} */
#section_1 .box_grid .box img{width: 60px; margin-bottom: 16px;}
#section_1 .box_grid .box p{font-family: 'Pretendard_SB'; font-size: 30px;}


/*section_2 띠배너*/
#section_2{ position: relative;}
#section_2 img{width: 100%;}
#section_2 .line_banner{ color: #fff; position: absolute;transform: translate(-10%,-20%); left: 50%; top: 50%; font-size: 40px; font-family: 'Pretendard_B'; line-height: 140%; }
#section_2 .line_banner span{color: var(--color-Main);}

/*section_3 예습부터 복습까지*/
#section_3 .focus_elea{ align-items: center; margin-bottom: 40px;}
#section_3 .focus_elea:last-child {margin-bottom: 0;}
#section_3 .focus_elea .img_wrap{width: 520px; overflow: hidden; height: 290px; border-radius: 20px;}
#section_3 .focus_elea .img_wrap img{width: 100%; object-fit: cover;}
#section_3 .focus_elea .img_wrap video{width: 100%;}

#section_3 .contents_wrap .contents_title{font-size: 36px; margin-bottom: 24px; font-family: 'Pretendard_B';}
#section_3 .contents_wrap .contents_sub{ font-size: 24px;}
#section_3 .contents_wrap .contents_sub p{ margin-bottom: 5px;}
#section_3 .contents_wrap .contents_sub p span{ font-family: 'Pretendard_SB'; }

#section_3 .inner .focus_elea:nth-child(1){width: 700px;}

/*section_4 */
#section_4{background-color: var(--color-BG);}
#section_4 .box_grid{display:grid; grid-template-columns: 1fr 1fr; gap: 40px;}
#section_4 .box_grid .box{background-color: #fff; padding-bottom:40px; border-radius: 20px; overflow: hidden; text-align: center;}
#section_4 .box_grid .box .box_title{margin-top: 40px; font-size: 36px; font-family: 'Pretendard_B'; margin-bottom: 16px;}
#section_4 .box_grid .box p{font-size: 28px;}


/* section_5*/
#section_5 .inner{padding-bottom: 0;}
#section_5 .marquee {overflow: hidden;width: 100%;margin: 70px 0;}
#section_5 .row {display: flex; overflow: hidden; }
#section_5 .track {gap: 20px; display: flex;animation: scroll-left 40s linear infinite;margin: 15px 0;}
#section_5 .track img {width: 70px; height: 70px;margin-right: 10px;}
#section_5 .track .review_box {width: 410px; border-radius: 20px; background-color: var(--color-BG); padding: 30px;}
#section_5 .track .review_title {display: flex; align-items: center; margin-bottom: 14px;}
#section_5 .track .review_title p{font-size: 26px; font-family: 'Pretendard_M';}
#section_5 .track .review_contents{font-size: 24px; font-family: 'Pretendard_M';}


/*section_6 상담신청*/
#section_6{ min-height: 935px; background: url('../img/con5.png') no-repeat center / 100%; background-size: cover;}
#section_6 .inner .title_wrap .title_main{color: var(--color-secondary);}
#section_6 .form{background: #9cf7f8; border-radius: 20px; padding: 60px 48px; max-width: 450px;}
#section_6 .form_title{font-size: 21px; font-family: 'Pretendard_B'; line-height: 150%; color: var(--color-secondary); margin-bottom: 10px;}
#section_6 .etc{color: #fe2a74; text-align: right; margin-bottom: 10px;}
#section_6 .form_input_wrap{display: flex; flex-direction: column; gap: 16px;}
#section_6 .form_input_wrap .input_wrap{position: relative;}
#section_6 .form_input_wrap .input_wrap input,
#section_6 .form_input_wrap .input_wrap select{ font-size: 16px; font-family: 'Pretendard_M';  border: none; width: 100%; border-radius: 6px; padding: 14px 18px;}
#section_6 .form_input_wrap .input_wrap select option{padding: 10px;font-size: 15px;border: none; background: #fff;color: #333;}
#section_6 .form_input_wrap .radio_wrap{display: flex; gap: 12px; flex-wrap: wrap;}
#section_6 .form_input_wrap .personal{ display: flex; justify-content: space-between;}
#section_6 .form_input_wrap .personal input {width: 17px; height: 17px; margin-right: 4px;}
#section_6 .form_input_wrap .personal i{margin-right: 4px;}
#section_6 .form_input_wrap .personal p{color: var(--color-gray-g60); text-decoration: underline; cursor: pointer; font-size: 0.9em;}
#section_6 .form_input_wrap button{ margin-top: 40px; font-size: 16px; border: none; cursor: pointer; background-color: var(--color-secondary); text-align: center; padding: 16px 34px; border-radius: 50px; color: #fff;  font-family: 'Pretendard_B';}
#section_6 .nice-select{font-size: 16px; border: none;}
#section_6 .nice-select .current{color: var(--color-gray-g60);}
#section_6 .form_input_wrap .input_wrap .placeholder{font-size: 16px; position: absolute; z-index: 1; left: 19px; top: 14px;}
#section_6 .form_input_wrap .input_wrap .placeholder .red,
#section_6 .form_input_wrap .personal i.red{color: #fe2a74;}
#section_6 .form_input_wrap .input_wrap .placeholder .gray{color: var(--color-gray-g70);}


/* 모달 */
.paper{max-height: 80%; overflow-y: auto; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 20px; padding: 35px;}
.w800{width: 800px;}
.height_auto{height: auto !important;}
.paper .close_btn{background-color: var(--color-BG); border-radius: 5px; position: absolute; right: 30px; top: 30px; padding: 5px 8px; font-size: 20px; cursor: pointer;}
.paper .paper_title{padding-bottom: 20px; border-bottom: 1px solid #ededed; font-size: 20px; font-family: 'Pretendard_M'; }
.paper_contents{resize: none; min-height: 250px; padding: 10px; border-radius: 6px; border: none}
.paper_contents:focus{background-color: inherit; border: none;}
.modal_common{display: none;}

.scrollbar { 
  /* width: 100%; */
  height: 100%;
  overflow-y: scroll;
}
.scrollbar::-webkit-scrollbar {
    width: 6px;  
}
.scrollbar::-webkit-scrollbar-thumb {
    background: rgba(48, 202, 203); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}
.scrollbar::-webkit-scrollbar-track {
    background: rgba(48, 202, 203, .1);  /*스크롤바 뒷 배경 색상*/
}
.scrollbar::-webkit-scrollbar-button:vertical:start:decrement,
.scrollbar::-webkit-scrollbar-button:vertical:start:increment {
    display: block;
    height: 10px;
}
.scrollbar::-webkit-scrollbar-button:vertical:end:decrement {
    display: block;
    width: 5px;
}

#personal_title{font-family: 'Pretendard_SB'; margin-bottom: 5px; margin-left: 6px;}
#personal_sub{font-family: 'Pretendard_M'; margin: 6px auto 20px;}
#personal_text{margin-bottom: 15px; line-height: 150%; margin-left: 14px; color: var(--color-gray-g60);}
#personal_text:last-child{margin-bottom: 0px; }

@keyframes scroll-left {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}
@keyframes scroll-right {0% {transform: translateX(-50%);} 100% {transform: translateX(0);}}


@media screen and (max-width:1200px){
  .inner{width: 100%; padding: 0px 30px;}
  main > section .inner{padding: 110px 30px;}
  #visual .inner{ width: max-content;left: 30px; top: 33%; transform: translate(0);}
  #section_1 .grid{flex-direction: column;}
  #section_1 .grid{flex-direction: column;}
  #section_1.grid > div:first-child, #section_1.grid > div:last-child{width: 100%;}
  #section_1 .box_grid .box{width: 100%;height: 100%; padding: 40px; max-width: 100%;}
  /* #section_1 .box_grid .box br{display: block;} */
  #section_1 .title_wrap{display: flex;width: 100%; justify-content: space-between;}
  .grid > div:first-child, .grid > div:last-child{width: 100%;}
  #section_3 .focus_elea .img_wrap{width: 100%;}
    #section_4 .box_grid .box p{padding: 0px 30px;}
    /* #section_4 .box_grid .box p br{display: none;} */
  #section_6{background-position: -270px 0px ;}
    .elea_gird{flex-direction: row-reverse;}
}

@media screen and (max-width:1024px){
  .inner .title_wrap .title_sub{font-size: 28px;}
  .inner .title_wrap .title_main{font-size: 40px;}

  .info_full_wrap {flex-flow: column;}

  .grid{flex-direction: column;}

  .paper{max-width: 600px;}
}




@media screen and (max-width:768px){
  .inner .title_wrap img{display: none;}
  main > section .inner{padding: 110px 40px;}
  .inner{padding: 0px 20px;}
  .gradient_banner{display: none;}
  .inner .title_wrap{margin-bottom: 40px;}
  .inner .title_wrap .title_sub{font-size: 24px;}
  .inner .title_wrap .title_main{font-size: 36px;}
  
  
  #visual .inner{top: 150px;}
  #visual img{height: 800px;}
  #visual .visual_text_wrap .visual_title{font-size: 2.5rem;}
  #visual .visual_text_wrap .visual_contents{font-size: 2rem;}

  #section_1 .box_grid{gap: 10px;}
  #section_1 .box_grid .box p{font-size: 24px;}
  /* #section_1 .box_grid .box p br{display: none;} */

  #section_3 .contents_wrap .contents_title{font-size: 30px;}
  #section_3 .contents_wrap .contents_sub p {font-size: 20px;}
  #section_3 .contents_wrap .contents_sub p span{font-size: 18px;}
  #section_3 .focus_elea .img_wrap{width: 100%; height: 100%;}
  .elea_gird{flex-direction: column-reverse;}

  #section_4 .box_grid{gap: 20px; grid-template-columns: 1fr;}
  #section_4 .box_grid .box{}
  #section_4 .box_grid .box img{width: 100%;}
  #section_4 .box_grid .box .box_title{font-size: 30px; margin-top: 30px;}
  #section_4 .box_grid .box p{font-size: 22px;}
  .info_full_wrap{flex-direction: column;gap: 30px;}
  .footer_info .info_wrap .info .flex_box ul{gap: 5px;flex-wrap: wrap;}

  #section_6{background: url('../img/con5_768.png') no-repeat center / 100%; background-size: cover;}
  #section_6 .form{max-width: 100%;}
  #section_6 .form_input_wrap button{font-size: 20px;}

  .modal_common .paper{width: 90%; max-width: 560px; padding:35px 16px;}
  .paper .paper_title{width: 80%;}
}

@media screen and (max-width:580px){
  main > section .inner{padding: 60px 20px;}
  #visual .inner{ position: absolute; width: 300px; top: 120px; left:20px;}
  #visual img {height: 640px;}
  #visual .visual_text_wrap .visual_contents{font-size: 1.8rem;}
  #section_1 .box_grid {grid-template-columns: none; gap: 16px;}
  .inner .title_wrap {margin-bottom: 20px;}
  .inner .title_wrap .title_main{font-size: 30px; margin-bottom: 40px;}
  .inner .title_wrap .title_sub{font-size: 22px;}

  .grid {gap: 15px;}
  .margin-bottom0{margin-bottom: 0 !important;}

  #section_3 .contents_wrap .contents_title{margin-bottom: 12px; font-size: 26px;}
  #section_3 .contents_wrap .contents_sub p {font-size: 18px;}

  #section_4 .box_grid .box p{font-size: 20px;}

  #section_5 .marquee{margin: 30px 0 60px;}
  #section_5 .track .review_box{width: 340px; padding: 24px;}
  #section_5 .track .review_title p{font-size: 24px;}
  #section_5 .track .review_contents{font-size: 20px;}

  #section_6 .form{padding: 30px 24px;}
  #section_6 .form_title{font-size: 18px;}
  #section_6 .form_input_wrap .personal{flex-flow: column;}
  #section_6 .form_input_wrap .personal p{text-align: right;}

  .paper .close_btn{right: 20px; top: 20px;}
  .paper .paper_title{padding: 0px 10px 20px;}
  .paper_contents{padding: 20px 10px 10px;}
}





/* 공지사항,faq */
main{min-height: 700px;}
.SubPage_title{margin-bottom: 50px;}
.SubPage_title .title_main{font-family: 'Pretendard_B'; font-size: 45px; color: var(--color-gray-g100-darkbg); margin-bottom: 18px;}
.SubPage_title .title_sub{ font-size: 20px; color: #555;}

.notice_list{display: flex; gap: 14px; flex-direction: column;}
.notice_list .notice_box{transition: 0.3s; display: flex; width: 100%; align-items: center; justify-content: space-between; background-color: var(--color-BG); padding: 23px 30px; }
.notice_list .notice_box:hover{ transform: translateY(-3px);}
.notice_list .notice_box .notice_text_wrap .notice_title{font-family: 'Pretendard_SB'; font-size: 18px; margin-bottom: 10px;}
.notice_list .notice_box .notice_text_wrap .notice_date{font-family: 'Pretendard_SB'; font-size: 14px; color: var(--color-gray-g60);}

/* 프로모션 */
.promotion_list{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px;}
.promotion_list .promotion_box{ transition: 0.3s; width: 100%; overflow: hidden; justify-content: space-between; display: flex;height: 470px;flex-direction: column;align-items: flex-start;
flex: 1 0 0;border-radius: 20px;background: #FFF;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);}
.promotion_list .promotion_box:hover{ transform: translateY(-3px);}
.promotion_list .promotion_box .promotion_text_wrap{width: 100%;height: 100%;padding: 30px;display: flex;padding-bottom: 15px;flex-direction: column;justify-content: space-between;}
.promotion_list .promotion_box .promotion_text_wrap .status{display: inline-block; font-family: 'Pretendard_SB'; border-radius: 500px; margin-bottom: 10px; padding: 4px 18px; justify-content: center; align-items: center;}
.promotion_list .promotion_box .promotion_text_wrap .status.ing{background-color: var(--color-secondary); color: #fff;}
.promotion_list .promotion_box .promotion_text_wrap .status.fin{background-color: #eee; color: var(--color-gray-g90-darkfont);}
.promotion_list .promotion_box .promotion_text_wrap .promotion_title{ font-family: 'Pretendard_SB'; font-size: 22px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 최대 3줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;}
.promotion_list .promotion_box .promotion_text_wrap .promotion_date{font-family: 'Pretendard_M'; color:var(--color-gray-g60);}
.promotion_list .promotion_box .img_promotion{min-height: 235px; background-color: var(--color-secondary); overflow: hidden; width: 100%; height: 50%;}
.promotion_list .promotion_box .img_promotion img{width: 100%; object-fit: cover;}

@media screen and (max-width:1024px){
  .promotion_list{grid-template-columns:  1fr 1fr;}
}

@media screen and (max-width:580px){
  .promotion_list{grid-template-columns: 1fr;}
}


/* 개인정보취급방침, 이용약관 모달 */
#personal .fm_con > ul {
    padding: 10px;
    overflow: auto;
}

#personal .fm_con::-webkit-scrollbar {
    width: 8px;  
}
#personal .fm_con::-webkit-scrollbar-thumb {
    background: var(--gray-color);
    border-radius: 12px 12px 12px 12px;
}

#personal .fm_con::-webkit-scrollbar-track {
	background: #dfdfdf;
}

#personal .fm_con > ul > li {
    margin-bottom: 30px;
    text-align: left;
}

#personal .fm_con > ul > li:last-child {
    margin-bottom: 0px;
}

#personal .fm_list {
    margin: 0 5px;
}

#personal .fm_list li {
    margin-bottom: 10px;
    color: #656565;
}

#personal .mix_list .fm_list {
    margin: 20px 0;
}

#personal h4 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

#personal p {
    margin-left: 5px;
    margin-bottom: 30px;
}

/* 이용약관 */
.tos_modal p {
    margin-bottom: 16px;
    color: #232323;
    font-weight: 600;
}

.tos_modal .fm_list {
    margin: 35px 0;
}

.tos_modal .fm_con > ul > li {
    margin-bottom: 60px;
}