/* --------------------

2번째로 호출

이 파일은 각 프로젝트에 따라 변경이 있는 유동적인 개별 css 입니다.
해당 프로젝트에만 쓰일 색상, 폰트, padding값 등 기본적인것은 이곳에 작성해 주세요.

기본값으로 설정된것은

font-family: 'Noto Sans KR', sans-serif;
color: #1c1c1c;
line-height: 100%;
font-weight: normal;
font-size: 16px;
line-height: 100%;
letter-spacing: -0.5px;

입니다.

해당 프로젝트에 관련된 변경사항이 있을때는 reset.css대신
현재 파일인 styleguide.css에 작성해주세요.

-------------------- */

/* --------------------

z-index 현황

.mypage_popup_dummy : 105 (마이페이지 팝업 모달 background)
.mypage_popup : 110 (마이페이지 팝업)

#project_header, .classroom_header : 100

.gnb_dummy, .classroom_nav_dummy : 50 (메뉴 모달 background)
.popular_search_box : 55 (PC - 인기 검색어 팝업)
.gnb : 60 (모바일 - 햄버거 메뉴)
.gnb : 53 (PC - 메뉴)
.fixed_bar : 10 (PC - 우측 퀵바)

-------------------- */

*{
    font-family: 'Noto Sans KR', sans-serif;
}
body{
    font-size: 16px;
    color: #1c1c1c;
    font-weight: 400;
}
.center{
    width: 95%;
    max-width: 1280px;
    margin: 0 auto;
}
.center500{
    width: 95%;
    max-width: 500px;
    margin: 0 auto;
}
.center1760{
    width: 95%;
    max-width: 1760px;
    margin: 0 auto;
}



/* box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); */
/* box-shadow: 2px 2px 5px rgba(#000, 0.1); */
/* box-shadow: 5px 5px 10px rgba(#000, 0.2); */
/* box-shadow: 3px 3px 10px rgba(#5959f7, 0.2); */
::placeholder{color: #999;}
select{color: #5d5d5d;}
section.test_section{height: 2000px; background-color: yellowgreen;}



/* ---------------커스텀 클래스--------------- */
/* ------------------------------------------------------------
.ctm :  small, em, i, b, strong, u 등 에디터 사용시 글자 관련
        스타일 미적용 방지를 위하여 따로 작성함.
        html, php에 위 태그들을 style 초기화해서 사용 할 경우 ctm 속성 추가해서 사용.

        ※꼭! 에디터로 작성된 내용이 안들어가는 객체에만 사용하세요.
        (ex. view 페이지 내용 출력 부분에는 사용 X)
------------------------------------------------------------ */
.ctm{
    font-weight: inherit;
    font-family: inherit;
    color: inherit;
    font-style: inherit;
    text-decoration: none;
    font-size: inherit;
}
.clearfix::after{
    content: "";
    clear: both;
    display: block;
}
.clear{
    clear: both;
}
.pe_n{
    pointer-events: none;
}
.hidden{
    position: fixed;
    left: -100000px;
}
.mbn{margin-bottom: 0 !important;}
@media screen and (max-width:600px){
    .mobile_non{display: none;}
}
/* ---------------커스텀 클래스 end--------------- */



/* ---------------폰트 관련--------------- */
.eng{font-family: 'Montserrat', sans-serif;}
.eng_all *{font-family: 'Montserrat', sans-serif;}
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw700{font-weight: 700;}
/* ---------------폰트 관련 end--------------- */



/* ---------------color 관련--------------- */
.bgc0{
    background-color: #FFF;
}
.bgc1{
    background-color: #d5d5fd;
}
.bgc2{
    background-color: #5959f7;
}
/* #5959f7 rgb : 89, 89, 247 */
/* #5959f7:hover : #4040ad */
.bgc3{
    background-color: #2d0e73;
}
.bgc4{
    background-color: #fc454c;
}
.txc0{
    color: #FFF;
}
.txc1{
    color: #d5d5fd;
}
.txc2{
    color: #5959f7;
}
.txc3{
    color: #2d0e73;
}
.txc4{
    color: #fc454c;
}
/* ---------------color 관련 end--------------- */



/* ---------------padding 관련--------------- */
.pd50{
    padding: 50px 0;
    box-sizing: border-box;
}
.pdt50{
    padding-top: 50px;
    box-sizing: border-box;
}
.pdb50{
    padding-bottom: 50px;
    box-sizing: border-box;
}
.pd100{
    padding: 100px 0;
    box-sizing: border-box;
}
.pdt100{
    padding-top: 100px;
    box-sizing: border-box;
}
.pdb100{
    padding-bottom: 100px;
    box-sizing: border-box;
}
.pd150{
    padding: 150px 0;
    box-sizing: border-box;
}
.pdt200{
    padding-top: 200px;
    box-sizing: border-box;
}
@media screen and (max-width:991px){
    .pd100{padding: 70px 0;}
    .pdt100{padding-top: 70px;}
    .pd150{padding: 120px 0;}
    .pdb100{padding-bottom: 70px;}
    .pdt200{padding-top: 120px;}
}
@media screen and (max-width:600px){
    .pd50{padding: 30px 0;}
    .pdt50{padding-top: 30px;}
    .pdb50{padding-bottom: 30px;}
    .pd100{padding: 50px 0;}
    .pdt100{padding-top: 50px;}
    .pdb100{padding-bottom: 50px;}
    .pd150{padding: 70px 0;}
    .pdt200{padding-top: 70px;}
}
.pdtn{padding-top: 0 !important;}
.pdbn{padding-bottom: 0 !important;}
.pdln{padding-left: 0 !important;}
.pdrn{padding-right: 0 !important;}
/* ---------------padding 관련 end--------------- */



/* ---------------br 관련--------------- */
@media screen and (min-width:991.1px){
    br.brs{display: none;}
}
@media screen and (max-width:991px){
    br.brl{display: none;}
}
/* ---------------br 관련 end--------------- */



/* ---------------animation--------------- */
@keyframes arrow_right{
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateX(7px);
    }
}
/* animation: arrow_right 1.2s infinite; */
@keyframes arrow_right2{
    0% {
      opacity: 1;
    }
    50% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translateX(5px);
    }
}
/* animation: arrow_right2 1.2s infinite; */
/* ---------------animation end--------------- */





/* ---------------개발관련--------------- */
.ta-left {text-align:left;}
.ta-right {text-align:right;} 
.ta-center {text-align:center;}

.contblock{margin:0 auto;} 
.contblock:before, .contblock:after{display: table; content: " ";clear: both;} 

.contblock1000{width:1000px;text-align:center;margin: 0 auto;} 
.contblock900{width:900px;text-align:center;margin: 0 auto;} 
.contblock800{width:800px;text-align:center;margin: 0 auto;}  
.contblock700{width:700px;text-align:center;margin: 0 auto;}  
.contblock1000left{width:1000px;margin: 0 auto;} 
.contblock900left{width:900px;margin: 0 auto;} 
.contblock800left{width:800px;margin: 0 auto;}  
.contblock700left{width:700px;margin: 0 auto;}  

/* 부트스트랩 기본 갭 15px 를 초기화하여 사용자 필요에 따라 갭넓이 조절 = 합이 15가 되어야 함. */
.lsh-col-gap-1{padding:0 1px;}.lsh-row-gap-14{padding:0 14px;}
.lsh-col-gap-2{padding:0 2px;}.lsh-row-gap-13{padding:0 13px;}
.lsh-col-gap-3{padding:0 3px;}.lsh-row-gap-12{padding:0 12px;}
.lsh-col-gap-4{padding:0 4px;}.lsh-row-gap-11{padding:0 11px;}
.lsh-col-gap-5{padding:0 5px;}.lsh-row-gap-10{padding:0 10px;}
.lsh-col-gap-6{padding:0 6px;}.lsh-row-gap-9{padding:0 9px;}

/* 부트스트랩 기본 갭 15px 를 초기화하여 사용자 필요에 따라 갭넓이 조절 = 합이 15가 되어야 함. */
.gallery-col-gap-1{padding:1px 1px;}.gallery-row-gap-14{padding:0 14px;}
.gallery-col-gap-2{padding:2px 2px;}.gallery-row-gap-13{padding:0 13px;}
.gallery-col-gap-3{padding:3px 3px;}.gallery-row-gap-12{padding:0 12px;}
.gallery-col-gap-4{padding:4px 4px;}.gallery-row-gap-11{padding:0 11px;}
.gallery-col-gap-5{padding:5px 5px;}.gallery-row-gap-10{padding:0 10px;}
.gallery-col-gap-6{padding:6px 6px;}.gallery-row-gap-9{padding:0 9px;}

/* 넓이 */
.w5pct {width:5%}
.w10pct {width:10%}
.w15pct {width:15%}
.w20pct {width:20%}
.w25pct {width:25%}
.w30pct {width:30%}
.w35pct {width:35%}
.w40pct {width:40%}
.w45pct {width:45%}
.w50pct {width:50%}
.w55pct {width:55%}
.w60pct {width:60%}
.w65pct {width:65%}
.w70pct {width:70%}
.w75pct {width:75%}
.w80pct {width:80%}
.w85pct {width:85%}
.w90pct {width:90%}
.w95pct {width:95%}
.w99pct {width:99%}
.w100pct {width:100%}

.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w110{width:110px;}
.w120{width:120px;}
.w130{width:130px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w170{width:170px;}
.w180{width:180px;}
.w190{width:190px;}
.w200{width:200px;}
.w210{width:210px;}
.w220{width:220px;}
.w230{width:230px;}
.w240{width:240px;}
.w250{width:250px;}
.w260{width:260px;}
.w270{width:270px;}
.w280{width:280px;}
.w290{width:290px;}
.w300{width:300px;}
.w350{width:350px;}
.w400{width:400px;}
.w450{width:450px;}
.w500{width:500px;}
.w550{width:550px;}
.w600{width:600px;}
.w650{width:650px;}
.w700{width:700px;}
.w750{width:750px;}
.w800{width:800px;}
.w850{width:850px;}
.w900{width:900px;}
.w950{width:950px;}
.w1000{width:1000px;}
.w1100{width:1100px;}
.w1200{width:1200px;}

.img-responsive{display:block; max-width: 100%;}
#hiddeniframe{width:0;height:0;border:none;outline:none;font-size:0;visibility:hidden;}

/*Preloading*/
#preloader {position: fixed;top: 0;left: 0;right: 0;width: 100%;height: 100%;bottom: 0;background-color: #fff;z-index: 999999;}
.sk-spinner-wave.sk-spinner {margin: -15px 0 0 -25px;position: absolute;left: 50%;top: 50%;width: 50px;height: 30px;text-align: center;font-size: 10px;}
.ie8 .sk-spinner-wave.sk-spinner {display: none;}
.sk-spinner-wave div {background-color: #ccc;height: 100%;width: 6px;display: inline-block;-webkit-animation: sk-waveStretchDelay 1.2s infinite ease-in-out;animation: sk-waveStretchDelay 1.2s infinite ease-in-out;}
.sk-spinner-wave .sk-rect2 {-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}
.sk-spinner-wave .sk-rect3 {-webkit-animation-delay: -1s;animation-delay: -1s;}
.sk-spinner-wave .sk-rect4 {-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}
.sk-spinner-wave .sk-rect5 {-webkit-animation-delay: -0.8s;animation-delay: -0.8s;}
@-webkit-keyframes sk-waveStretchDelay {
	0%, 40%, 100% {-webkit-transform: scaleY(0.4);	transform: scaleY(0.4);}
	20% {	-webkit-transform: scaleY(1);transform: scaleY(1);}
}
@keyframes sk-waveStretchDelay {
	0%, 40%, 100% {-webkit-transform: scaleY(0.4);	transform: scaleY(0.4);}
	20% {	-webkit-transform: scaleY(1);transform: scaleY(1);}
}

/* toast and loading */ 
div.loadimgWrap {display:none;position: absolute;top:0;left:0;width: 100%;height: 100%;z-index: 10000;background-color: #fff;opacity: 0.5;} 
img.loadimg{display:none;width:60px;position: fixed;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%,-50%);} 
.lsh-toast{ 
	display:none;z-index:10000; width:200px;height:20px;height:auto;position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%,-50%); 
	background-color: rgba(56, 56, 56, .9);color: #F0F0F0;padding:10px;text-align:center;border-radius: 2px; 
	-webkit-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);-moz-box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1);box-shadow: 0px 0px 24px -1px rgba(56, 56, 56, 1); 
} 
/* ---------------개발관련 end--------------- */


.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    padding: 0 !important;
    width: 1px !important;
    height: 1px !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc{display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc !important;background:#fafafa !important;color:#000 !important;text-decoration:none !important;line-height:1.9em;vertical-align:middle}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl{margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}





/* ---------------페이지네이션--------------- */
.pagination_btns {
  width: 100%;
  text-align: center;
  margin-top: 10px;
}

.pagination_btns .pg_wrap {
  clear: unset;
  float: none;
  display: inline-block;
}

.pagination_btns .pg_wrap .pg {
  display: block;
  text-align: center;
}

.pagination_btns .pg_wrap .pg::after {
  content: '';
  display: block;
  clear: both;
}

.pagination_btns .pg_wrap .pg .sound_only {
  position: fixed;
  left: -100000px;
}

.pagination_btns .pg_wrap .pg .pg_current, .pagination_btns .pg_wrap .pg .pg_page,
.pagination_btns .pg_wrap .pg .pg_start::after, .pagination_btns .pg_wrap .pg .pg_end::after,
.pagination_btns .pg_wrap .pg .pg_prev::after, .pagination_btns .pg_wrap .pg .pg_next::after {
  min-width: unset;
  padding: unset;
  float: left;
  display: block;
  margin: 0 2px;
  position: relative;
  width: 22px;
  height: 22px;
  line-height: 20px;
  border: 1px solid #CCC;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #555;
  font-size: 13px;
  border-radius: 3px;
}

.pagination_btns .pg_wrap .pg .pg_page:hover {
  background-color: #f2ecff;
  color: #5959f7;
}

.pagination_btns .pg_wrap .pg .pg_start, .pagination_btns .pg_wrap .pg .pg_end,
.pagination_btns .pg_wrap .pg .pg_prev, .pagination_btns .pg_wrap .pg .pg_next {
  text-indent: unset;
  background: none;
  font-size: 0;
  border: 0;
  line-height: 0;
}

.pagination_btns .pg_wrap .pg .pg_start:hover, .pagination_btns .pg_wrap .pg .pg_end:hover,
.pagination_btns .pg_wrap .pg .pg_prev:hover, .pagination_btns .pg_wrap .pg .pg_next:hover {
  background: none;
  color: unset;
}

.pagination_btns .pg_wrap .pg .pg_start:hover::after, .pagination_btns .pg_wrap .pg .pg_end:hover::after,
.pagination_btns .pg_wrap .pg .pg_prev:hover::after, .pagination_btns .pg_wrap .pg .pg_next:hover::after {
  background-color: #f2ecff;
  color: #5959f7;
}

.pagination_btns .pg_wrap .pg .pg_start::after, .pagination_btns .pg_wrap .pg .pg_end::after,
.pagination_btns .pg_wrap .pg .pg_prev::after, .pagination_btns .pg_wrap .pg .pg_next::after {
  position: absolute;
  left: 0;
  top: 0;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  margin: 0;
  padding-left: 1px;
  line-height: 22px;
}

.pagination_btns .pg_wrap .pg .pg_start::after {
  content: '\f100';
}

.pagination_btns .pg_wrap .pg .pg_end::after {
  content: '\f101';
}

.pagination_btns .pg_wrap .pg .pg_prev::after {
  content: '\f104';
}

.pagination_btns .pg_wrap .pg .pg_next::after {
  content: '\f105';
}

.pagination_btns .pg_wrap .pg .pg_current {
  font-weight: 700;
  background-color: #f2ecff;
  color: #5959f7;
}

.pagination_btns ul {
  display: inline-block;
}

.pagination_btns ul::after {
  content: '';
  display: block;
  clear: both;
}

.pagination_btns ul li {
  float: left;
  display: block;
  margin: 0 2px;
}

.pagination_btns ul li .pagi_btn {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  line-height: 20px;
  border: 1px solid #CCC;
  text-align: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: #555;
  font-size: 13px;
  border-radius: 3px;
}

.pagination_btns ul li .pagi_btn.active {
  font-weight: 700;
  background-color: #f2ecff;
  color: #5959f7;
}

.pagination_btns ul li .pagi_btn:hover {
  background-color: #f2ecff;
  color: #5959f7;
}

/* ---------------페이지네이션 end--------------- */