@charset "UTF-8";
/* font 
============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root {
    --font-poppins: 'Poppins', sans-serif;	
    --font-noto-sans: 'Noto Sans KR', sans-serif;
    --body-font-size: 13px;
    --body-font-weight: 400;
    --body-line-height: 1.4; 
    --body-letter-spacing: -.025em; 
    --body-font-e: var(--font-poppins);
    --body-font-k: var(--font-noto-sans);
	--sprite-icon: url(/resources/images/sprite/sprite_icon.svg?v=2);
}



/* common style
============================================================================= */

html, body { 
    width: 100%; 
    height: 100%; 
    -webkit-text-size-adjust: none; 
    -moz-text-size-adjust: none; 
    -ms-text-size-adjust: none;
}

body {
    margin: 0;
	font-family: var(--body-font-k)!important;
	font-size: var(--body-font-size)!important;
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    color: #111;
}

/* visible */
.hide { 
    display: none!important;
}
.hide.on { 
    display: block!important;
}
.hidden { 
    display: none;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
}

.hands {cursor:pointer;}

/* width */
.box{width:100%;}

/* display */
.ds-in{ display:inline;}
.ds-inb{ display:inline-block;}
.ds-b { display:block;}


/* text style
============================================================================= */

/* heading group */
h6, h5, h4, h3, h2, h1 {
    margin: 0;
    font-weight: 600;
}

h1.maincate-reset {
    margin: 0;
	font-weight: 500;
}

/* txt align */
.txt-left { text-align: left!important; }
.txt-center { text-align: center!important; }
.txt-right { text-align: right!important; }

/* text hidden */
.ellipsis {
	width:100%;
    word-break: break-all;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
	display: block;
}

.ellipsis_line2 {
	width:100%;
	word-wrap: break-word;
	display: block;
	display: -webkit-box;
	-webkit-box-orient : vertical;
	-webkit-line-clamp: 2;
	overflow:hidden;
	text-overflow: ellipsis;
}

b, strong {
    font-weight: 700;
}  

/* input style
============================================================================= */
/* text-input*/

.input-txt {
    width:100%;
    margin: 0;
    outline: 0;
    line-height: 1em;
    padding: 0.8em 1em;
    font-size: 1em;
    background: #fff;
    border: 1px solid rgba(34,36,38,.15);
    color: rgba(0,0,0,.87);
    border-radius: 0.4em;
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    box-shadow: 0 0 0 0 transparent inset;
    -webkit-transition: color .1s ease,border-color .1s ease;
    transition: color .1s ease,border-color .1s ease;
}

/* checkbox-input*/

.toggle-checkbox{
  display:inline-block;
  width:auto;
  height: 26px;
  position:relative;
}
.toggle-checkbox input[type="checkbox"]{
  position: absolute;
  width: 0px;
  height: 0px;
  overflow: hidden;
}
.toggle-checkbox label{
  padding-left: 60px;
  line-height: 26px;
}
.toggle-checkbox label::after{  
  position:absolute;
  top:3px;
  left:3px;
  content:'';
  width: 20px;
  height: 20px;
  background: #d1d1d1;
  border-radius: 100%;
  transition: all 0.3s
    
}
.toggle-checkbox label::before{
  position:absolute;
  top:0;
  left:0;
  content:'';
  width: 50px;
  height: 26px;
  border:1px solid #f1f1f1;
  border-radius: 13px;
  background: #f1f1f1;
  box-sizing: border-box;
}
.toggle-checkbox input[type="checkbox"]:checked + label::after {
  transform: translateX(24px);
  background: #fff;
}
.toggle-checkbox input[type="checkbox"]:checked + label::before {
  background: #feaf30;
  border:1px solid #feaf30;
}

.toggle-checkbox.blue input[type="checkbox"]:checked + label::before {
  background: #8790fd;
  border:1px solid #8790fd;
}
/* select style
============================================================================= */
/* basic-select*/
.basic_select {
    position: relative;
    width:100%;
    border: 1px solid rgba(34,36,38,.15);
    border-radius: 0.4em;
    background: #fff;
    -webkit-box-shadow: 0 0 0 0 transparent inset;
    box-shadow: 0 0 0 0 transparent inset;
    -webkit-transition: color .1s ease,border-color .1s ease;
    transition: color .1s ease,border-color .1s ease;
}

.basic_select .select-ico {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 20px;
    height: 100%;
    border-left: solid 1px #ddd !important;
    z-index: 1;
    display: flex;
    display: -webkit-flex; 
	justify-content: center;
	align-items: center;
}

.basic_select .select-ico i {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-image: var(--sprite-black-icon);
    background-repeat: no-repeat;
    background-size: 50px 50px; 
    background-position: 0px -10px;
}

.basic_select select {
    position: relative;
    width:100%;
    margin: 0;
    outline: 0;
    line-height: 1em;
    padding: 0.8em 2.3em 0.8em 1em;
    font-size: 1em;
    color: rgba(0,0,0,.87);
    border: none;
    background: none;
    z-index: 2;
}

/* button style
============================================================================= */


/* popup style 
============================================================================= */

