@charset "utf-8";
/* CSS Document */

/*-------------------------------*/
/*           Common              */
/*-------------------------------*/
*, *:after, *:before { box-sizing: border-box; }
/* body { overflow: hidden; position: fixed; left: 0; top: 0; width: 100%; height: 100%; } */
#wrap { min-width: 320px; min-height: 100vh; background-color: #f1f1f1; }
/*
a, 
button {
	-webkit-tap-highlight-color: rgba(0, 139, 235, 0.3); 
} */
/* 부트스트랩 터치 이벤트 활성화 */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:active {text-decoration:none;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;}
html {height:100vh; }
[type=text], [type=password], [type=file], [type=email], [type=number], [type=tel] { height: 25px; line-height: 25px; padding-left: 10px; vertical-align: middle; background-color: #fff;  border: solid 1px #acacac; box-sizing: border-box; }
input[type="file"] { width: 100%; height: 36px; padding: 5px; font-size: 14px; border: solid 1px #ddd; background-color: #fff; }
body, a, [type=text], [type=password], [type=file], [type=email], [type=number], [type=tel], select, h1, h2, h3, h4, h5, h6, pre, textarea { font-size: 16px; line-height: 1.5; color: #2d2d2d; letter-spacing: -0.05em; }
li {list-style: none;}
label { margin: 0;}
input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
	outline:none !important;	
}

textarea::placeholder {
    font-size: 12px;
    color: #b0b0b0;
}
input::placeholder {
    font-size: 12px;
    color: #b0b0b0;
}

input,
textarea {
	outline:none !important;
	background-color: #fff;
}

input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
	outline:none !important;	
}

input:focus,
textarea:focus {
	border: 1px solid #00baeb;
	box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
}

.textInput {
    position: relative;
    padding: 0 7px;
    height: 32px;
	font-size: 14px;
    border-radius: 3px;
}

.textareaInput {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 48px;
    line-height: 1.5;
    padding: 10px;
    border: 1px solid #dedede;
    border-radius: 5px;
    box-sizing: border-box;
}

/*-------------------------------*/
/*            Loading            */
/*-------------------------------*/
.loadingBg {
	position:fixed;
	z-index: 999;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: rgba(0, 0, 0, .6);
}
.loadingBox {
	position: fixed;
	z-index: 20;
	top: 50%;
	left: 50%;
	width: 50px;
	min-height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	border-top: 5px solid transparent;
	border-right: 5px solid #fff;
	border-bottom: 5px solid #fff;
	border-left: 5px solid #fff;
	border-radius: 50%;
	-webkit-animation: linear 0.8s infinite 0s loadingBox;
	-moz-animation: linear 0.8s infinite 0s loadingBox;
	animation: linear 0.8s infinite 0s loadingBox;
}
@-webkit-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@-moz-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@-o-keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
@keyframes loadingBox {
 0%   { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
.loadingBox span {
	display: block;
	text-indent: -9999px;
}
.loadingTextBox {
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    font-size: 1rem;
    font-weight: bold;
    color: #fff;
    transform: translate(-50%, 50px);
}



/*-------------------------------*/
/*             popup             */
/*-------------------------------*/
.fixedOn {
	position: relative;
	overflow: hidden;
}
.bgLayer {
	position: fixed;
	z-index: 99;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 100vh;
	background-color: rgba(0,0,0,0.6);
	overflow: hidden;
}

/*-------------------------------*/
/*         radio button          */
/*-------------------------------*/

/* 라디오버튼 버튼 교체 */
ul.checkList {
	display: inline-flex;
	align-items: center;
    margin: 0 5px;	
}
ul.checkList li:first-child input[type="radio"] + label {
	border-top-left-radius: 42px;
	border-bottom-left-radius: 42px;
}

ul.checkList li:last-child input[type="radio"] + label {
	border-top-right-radius: 42px;
	border-bottom-right-radius: 42px;
}
ul.checkList input[type="radio"] { 
	position: absolute; 
	width: 1px; 
	height: 1px; 
	padding: 0; 
	margin: -1px; 
	overflow: hidden; 
	clip:rect(0,0,0,0); 
	border: 0; 
} 
ul.checkList input[type="radio"] + label {
	position: relative;
	z-index: 20;
	display: inline-flex;
	flex-shrink: 0;
	justify-content: center;
	align-items: center;
	min-width: 45px; 
	height: 42px;
	margin-right: -1px;
	padding: 0 10px; 
	text-align: center;
	font-size: 12px;
	color: #2d2d2d;
	background: #fafafa; 
	border: 1px solid #929292;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: radio; /* 아이폰 iOS/사파리 배경 문제 해결 */ 
	-webkit-user-select: none; 
	-moz-user-select: none; 
	-ms-user-select: none; 
}
ul.checkList input[type="radio"] + label:first-child {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}
ul.checkList input[type="radio"]:checked + label {
	color: #fff;
	background-color: #5f6270;
    border: 1px solid #5f6271;
}
ul.checkList input[type="radio"]:checked + label .Lblue {
	color: #79e1ff !important;
}
ul.checkList input[type="radio"]:checked + label .red {
	color: #ffa8a8 !important;
}
ul.checkList input[type="radio"] + label.checksWide {
	width: 183px;
}
ul.checkList input[type="radio"] + label span {
	display: flex;
	flex-shrink: 0;
}

/*-------------------------------*/
/*       checkbox button         */
/*-------------------------------*/
.checks input[type="checkbox"] {  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip:rect(0,0,0,0);
   border: 0;
}
.checks input[type="checkbox"] + label {
    position: relative;
    display: inline-flex;
	flex: 1 auto;
	justify-content: flex-start;
	align-items: center;
	min-width: 45px; 
	height: 42px;
	margin: 0 3px;
	padding: 0 10px 0 38px; 
	text-align: center;
	font-size: 14px;
	color: #2d2d2d;
	background: #fafafa; 
	border: 1px solid #aaa;
	border-radius: 5px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.checksDark input[type="checkbox"] + label {
    color: #fff;
    background-color: #484848;
	border: 1px solid #acacac; 
} 
.checks input[type="checkbox"] + label:before {  /* 가짜 체크박스 */
	position: absolute;
	top: 0;
	left: 0;
    content: ' ';
	display: inline-flex;
	justify-content: center;
	width: 30px; /* 체크박스의 너비를 지정 */
	height: 40px; /* 체크박스의 높이를 지정 */
	line-height: 40px; /* 세로정렬을 위해 높이값과 일치 */
	/* margin: -2px 5px 0 0; */
	text-align: center;
	/* vertical-align: middle; */
	background: #fafafa;
	/* border: 1px solid #cacece; */
	border-right: 1px solid #aaa;
	border-radius : 5px 0 0 5px;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
	inset 0px -15px 10px -12px rgba(0,0,0,0.05);
    -webkit-appearance: checkbox; /* 아이폰 iOS/사파리 배경 문제 해결 */
}
.checksDark input[type="checkbox"] + label:before {
    background-color: #484848;
} 
.checks input[type="checkbox"] + label:active:before,
.checks input[type="checkbox"]:checked + label:active:before {
  box-shadow: 0 1px 2px rgba(0,0,0,0.05),
  inset 0px 1px 3px rgba(0,0,0,0.1);
}

.checks input[type="checkbox"]:checked + label {
	border-color: #1d82d0;	
}
.checks input[type="checkbox"]:checked + label span {
	color: #1273d7; 	
}

.checks input[type="checkbox"]:checked + label:before {  /* 체크박스를 체크했을때 */
  /* content: '\2714';*/  /* 체크표시 유니코드 사용 */
  content: '\e907'; /* 체크표시 icomoon 사용 */
  font-size: 18px;
  color: #1d82d0;
  /* text-shadow: 1px 1px #fff; */
  background: #fff;
  border-color: #1d82d0;
  box-shadow: 0px 1px 2px rgba(0,0,0,0.05),
  inset 0px -15px 10px -12px rgba(0,0,0,0.05),
  inset 15px 10px -12px rgba(255,255,255,0.1);
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
}
.checksDark input[type="checkbox"]:checked + label:before {
    background: #484848;    
} 
.checks input[type="checkbox"] + label span {
	display: flex;
	flex-shrink: 0;
}


ul.checkList {
	display: inline-flex;
	margin: 0 5px;
}
ul.checkList li {
	position: relative;
	display: inline-flex;
	align-items: center;
}

ul.checkList li:first-child input[type="radio"] + label {
	border-top-left-radius: 32px;
	border-bottom-left-radius: 32px;
}

ul.checkList li:last-child input[type="radio"] + label {
	border-top-right-radius: 32px;
	border-bottom-right-radius: 32px;
}


/*-------------------------------*/
/*           selectBox           */
/*-------------------------------*/
.selectBox {
  position: relative;
  display: inline-flex;
  min-width: 40px;
  height: 32px;
  border-radius: 4px;
  background-color: #fff;
  border: 1px solid #aaa;
}
.selectBox .select {
  	position: relative;
  	z-index: 3; /* select가 위로 올라와야 함 */
  	width: inherit;
  	height: inherit;
  	padding: 0 30px 0 5px;
	font-size: 13px;
  	background: transparent;
  	box-shadow: 0px 1px 2px rgb(0,0,0,0.15), 
                inset 0px -15px 10px -12px rgb(0,0,0,0.15);
  	border: 0 none;
  	outline: 0 none;
  	-webkit-appearance: none;  /* 네이티브 외형 감추기 */
  	-moz-appearance: none;
  	appearance: none;
}
.selectBox .select option {
  	color: #2d2d2d;
  	padding: 3px 0;
  	font-size: 13px;
}
.selectBox .icoArrow {
  	position: absolute; 
	z-index: 1;
  	top: 8px; 
  	right: 0; 
	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 25px; 
  	height: 15px;
  	font-size: 10px;
  	border-left: 1px solid #aaa;
}
.selectBox .icoArrow span {
	display: block;
	text-indent: -9999px;
}
.selectBox .icoArrow:before {
    position: absolute;
    z-index: 1;
    top: -1px;
    left: 0;
    display: flex;
	justify-content: center;
	align-items: center;
    width: 23px;
    height: 19px;
    font-size: 10px;
    color: #2d2d2d;
    content: "\e916";
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    transition: .3s; /* 부드럽게 회전 */
}

.selectBox .icoArrow.on:before {
	top: -2px;
	transform: rotate(180deg);	
}

/*-------------------------------*/
/*              btn              */
/*-------------------------------*/
.mobileBtn {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 42px;
	padding: 0 20px;
	background-color: transparent;
	border: none;
	box-sizing: border-box;
}

/*-------------------------------*/
/*             color             */
/*-------------------------------*/

/* text */
.blue { color:#004c99 !important;}
.Lblue { color:#269bff !important; }
.red { color:#ff3000 !important;}
.Lyellow { color:#ffeb00 !important; }
.yellow { color:#fed030 !important; }
.Dyellow { color:#997300 !important; }
.green { color:#14972d !important; }
.Lgreen { color:#f2fff4 !important; }
.black { color:#000 !important; }
.perple { color: #b10be1 !important; }
.Lpink { color:#ffd0dc !important; }
.orange { color:#ff7614 !important; }
.Lorange { color: #d28500 !important; }
.white { color:#fff !important; }
.Lgrey { color:#9d9d9d !important; }
.grey { color:#7a7a7a !important; }
.Dgrey { color:#575757 !important; }


.newIcon {
	position: relative;
	display: flex;
	align-items: center;
	height: 16px;
	margin-left: 5px;
	padding: 0 10px;
	font-size: 9px;
	color: #fff;
	background-color: #639df3;
	border-radius: 32px;
}

/*-------------------------------*/
/*              text             */
/*-------------------------------*/
.FS11 { font-size:11px !important; }
.FS12 { font-size:12px !important; }
.FS14 { font-size:14px !important; }
.FS16 { font-size:16px !important; }
.FS18 { font-size:18px !important; }
.FS20 { font-size:20px !important; }
.FS24 { font-size:24px !important; }
.FS28 { font-size:28px !important; }
.FS32 { font-size:32px !important; }
.FS42 { font-size:42px !important; }
.FS52 { font-size:52px !important; }
.B { font-weight:bold; }
.FWN { font-weight:normal; }
.TDUL { text-decoration:underline; text-underline-position: under; }
.FFNS { font-family: 'Noto Sans KR'; }

/*-------------------------------*/
/*             layout            */
/*-------------------------------*/
.TAL { text-align:left !important; }
.TAC { text-align:center !important; }
.TAR { text-align:right !important; }
.VAT { vertical-align:top !important; }
.VAM { vertical-align:middle !important; }
.DF { display:flex !important; }
.DIF { display:inline-flex !important; }
.JCFS {justify-content: flex-start !important; }
.JCFC {justify-content: center !important; }
.JCFE {justify-content: flex-end !important; }
.AIFS {align-items: flex-start !important; }
.AIC {align-items: center !important; }
.AIB {align-items: baseline !important; }
.AIFE {align-items: flex-end !important; }
.FDC {flex-direction: column !important; }
.FDR {flex-direction: row !important; }
.FWW {flex-wrap: wrap !important; }
.FG1 {flex-grow: 1 !important; }
.FG0 {flex-grow: 0 !important; }
.FS1 {flex-shrink: 1 !important; }
.FS0 {flex-shrink: 0 !important; }
.MLA {margin-left: auto !important; }
.MTA {margin-top: auto !important; }
.DB { display:block !important; }
.DIB { display:inline-block !important; }
.FL { float:left !important; }
.FR { float:right !important; }
.PR {position: relative; }

/*-------------------------------*/
/*              size             */
/*-------------------------------*/
.W10 { width:10% !important; }
.W15 { width:15% !important; }
.W20 { width:20% !important; }
.W25 { width:25% !important; }
.W30 { width:30% !important; }
.W35 { width:35% !important; }
.W40 { width:40% !important; }
.W45 { width:45% !important; }
.W50 { width:50% !important; }
.W60 { width:60% !important; }
.W70 { width:70% !important; }
.W80 { width:80% !important; }
.W90 { width:90% !important; }
.W100 { width:100% !important; }
.W40P { width:  40px !important; }
.W50P { width:  50px !important; }
.W60P { width:  60px !important; }
.W80P { width:  80px !important; }
.W100P { width:  100px !important; }
.W110P { width:  110px !important; }
.W120P { width:  120px !important; }
.W130P { width:  130px !important; }
.W140P { width:  140px !important; }
.W150P { width:  150px !important; }
.W200P { width:  200px !important; }
.W250P { width:  250px !important; }
.W300P { width:  300px !important; }
.W400P { width:  400px !important; }
.W500P { width:  500px !important; }
.W680P { width:  680px !important; }

/*-------------------------------*/
/*           margin              */
/*-------------------------------*/
.MT0 { margin-top:0 !important; }
.MT2 { margin-top:2px !important; }
.MT5 { margin-top:5px !important; }
.MT8 { margin-top:8px !important; }
.MT10 { margin-top:10px !important; }
.MT20 { margin-top:20px !important; }
.MT30  { margin-top:30px !important; }
.MT40  { margin-top:40px !important; }
.MT50 { margin-top:50px !important; }
.MTB5 { margin-top:5px !important; margin-bottom: 5px !important; }
.MTB10 { margin-top:10px !important; margin-bottom: 10px !important; }
.MR5 { margin-right:5px !important; }
.MR8 { margin-right:8px !important; }
.MR10 { margin-right:10px !important; }
.MR15 { margin-right:15px !important; }
.MR20 { margin-right:20px !important; }
.MR30  { margin-right:30px !important; }
.MB-5 { margin-bottom:-5px !important; }
.MB2 { margin-bottom:2px !important; }
.MB5 { margin-bottom:5px !important; }
.MB10 { margin-bottom: 10px !important; }
.MB20 { margin-bottom: 20px !important; }
.MB30 { margin-bottom: 30px !important; }
.MB40 { margin-bottom: 40px !important; }
.MB50 { margin-bottom: 50px !important; }
.MB70 { margin-bottom: 70px !important; }
.MB80 { margin-bottom: 80px !important; }
.MB100 { margin-bottom: 100px !important; }
.ML5 { margin-left:5px !important; }
.ML10 { margin-left:10px !important; }
.ML15 { margin-left:15px !important; }
.ML20 { margin-left:20px !important; }
.ML30  { margin-left:30px !important; }
.MRL5 { margin-right:5px !important; margin-left:5px !important; }
.MRL10 { margin-right:10px !important; margin-left:10px !important; }
.MRL20 { margin-right:20px !important; margin-left:20px !important; }
.MRL30 { margin-right:30px !important; margin-left:30px !important; }
.MRL40 { margin-right:40px !important; margin-left:40px !important; }
.M5 { margin:5px !important; }
.M10 { margin:10px !important; }
.M20 { margin:20px !important; }
.M30 { margin:30px !important; }
.M40 { margin:40px !important; }
.M50 { margin:50px !important; }

/*-------------------------------*/
/*           padding             */
/*-------------------------------*/
.PT5 { padding-top:5px !important; }
.PT10 { padding-top:10px !important; }
.PT20 { padding-top:20px !important; }
.PT30  { padding-top:30px !important; }
.PT40  { padding-top:40px !important; }
.PT50 { padding-top:50px !important; }
.PR5 { padding-right:5px !important; }
.PR10 { padding-right:10px !important; }
.PR20 { padding-right:20px !important; }
.PR30  { padding-right:30px !important; }
.PB5 { padding-bottom:5px !important; }
.PB10 { padding-bottom: 10px !important; }
.PB20 { padding-bottom: 20px !important; }
.PB30 { padding-bottom: 30px !important; }
.PB40 { padding-bottom: 40px !important; }
.PB50 { padding-bottom: 50px !important; }
.PL5 { padding-left:5px !important; }
.PL10 { padding-left:10px !important; }
.PL20 { padding-left:20px !important; }
.PL30  { padding-left:30px !important; }
.PRL5 { padding-right:5px !important; padding-left:5px !important; }
.PRL10 { padding-right:10px !important; padding-left:10px !important; }
.PRL20 { padding-right:20px !important; padding-left:20px !important; }
.PRL30 { padding-right:30px !important; padding-left:30px !important; }
.P5 { padding:5px !important; }
.P10 { padding:10px !important; }
.P20 { padding:20px !important; }
.P30 { padding:30px !important; }
.P40 { padding:40px !important; }
.P50 { padding:50px !important; }

/*-------------------------------*/
/*    bootstrap paging 수정       */
/*-------------------------------*/

.pageBox {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
    margin-top: auto;
}

/*
.pageBox select {
	margin-left: 10px;
	height: 47px !important;
	border: 1px solid #ddd !important;
}
*/
.pagination {
  display: inline-flex;
  padding-left: 0;
  margin: 30px 0;
  border-radius: 4px;
}

.pagination>li>a, 
.pagination>li>span {
	display: inline-block;
	line-height: 1.5;
	text-align: center;
}

.pagination a {
  position: relative;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 35px;
  height: 34px;
  /* padding: 13px 18px 0 !important; */
  margin-left: -1px;
  line-height: 1.5;
  font-size: 14px;
  text-decoration: none;
  color:#2d2d2d;
  background-color: #ffffff;
  border: 1px solid #dedede;
  font-family: 'Roboto', sans-serif;
}

.pagination li:first-child a {
  
  margin-left: 0;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.pagination li:last-child a {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.pagination a:hover,
.pagination span:hover,
.pagination a:focus {
  background-color: #eeeeee;
}
.page-link:hover {
    z-index: 2;
    color: #000;
    background-color: #e9ecef;
    border-color: #dee2e6;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #252d40;
    border-color: #252d40;
}