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

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 현황



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

*{
    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;}



/* ---------------커스텀 클래스--------------- */
/* ------------------------------------------------------------
.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;
}
.hidden{
    position: fixed;
    left: -100000px;
}
.clear{clear: both;}
.pe-none{pointer-events: none;}
.tal{text-align: left;}
.tar{text-align: right;}
.tac{text-align: center;}
.test-section{height: 2000px; background-color: yellowgreen;}
@media screen and (max-width:600px){
    .mobile-none{display: none;}
}
/* ---------------커스텀 클래스 end--------------- */



/* ---------------폰트 관련--------------- */
.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw700{font-weight: 700;}
/* ---------------폰트 관련 end--------------- */



/* ---------------color 관련--------------- */
.bgcb{background-color: #1c1c1c;}
.bgcw{background-color: #FFF;}
.bgc1{background-color: #d5d5fd;}
.bgc2{background-color: #5959f7;}
.bgc3{background-color: #2d0e73;}
.bgc4{background-color: #fc454c;}

.txcb{color: #1c1c1c;}
.txcw{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;
}
.dft_mt{margin-top: 120px;}
@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;}
    .dft_mt{margin-top: 80px;}
}
@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;}
}
@media screen and (max-width:425px){
    .dft_mt{margin-top: 60px;}
}
.pdn{padding: 0 !important;}
.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:inline-block;}

/*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--------------- */