/* base */
* {margin: 0;  padding: 0; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; outline:none;  }
html, body {  width:100%; }

html {height:100%;   -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; min-width: 360px; margin: 0; height: 100%;} 
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,a  {margin:0; padding:0; box-sizing: border-box;}
body { font-family:'Pretendard', sans-serif;  font-weight:500; height:100%;  color:#2C2D32;   line-height:110%; font-size:16px;   letter-spacing:-0.7px; padding:0; margin:0;
     	-webkit-font-smoothing:antialiased; -webkit-overflow-scrolling:touch;	 }
*, *::before, *::after { box-sizing: inherit; }
h1,h2,h3,h4,h5,h6 {font-weight:normal; font-size:100%}
strong {font-weight:800;}
input, select, textarea, button, label {font-size:100%; vertical-align:middle; cursor: pointer;}
select {width:100%; height:42px; padding:0 25px 0 15px; font-size:16px; color:#2C2D32; border:none;  -webkit-appearance:none;  -moz-appearance:none; appearance:none; 
	    border:1px solid #ddd; background:#fff url(../images/ico-select-arrow.png) right 14px center no-repeat;  background-size:20px 20px; transition:border-color .3s ease;}
select::-ms-expand {display:none;}
input {border:1px solid #ddd; font-size:16px;}
input:disabled {opacity:1; -webkit-text-fill-color:inherit}
input[type="text"], 
input[type="search"], 
input[type="password"], 
input[type="tel"], 
input[type="email"],
input[type="number"], 
input[type="button"] {height:36px; font-size:16px; padding:0;  background:#fff;  border: 0; border-bottom:1px solid #E9E9EC; 
 outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;  transition:border-color .3s ease; cursor:pointer; }

::-webkit-input-placeholder {font-size:14px; color:#7F8090;  vertical-align:middle; letter-spacing: -1px;  }
textarea::placeholder       {font-size:14px; color:#7F8090;  vertical-align:middle; letter-spacing: -1px;}

input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="tel"]:focus, 
input[type="email"]:focus, 
input[type="number"]:focus {border-color:#6F3CFF; background:#fff; border-radius:0;}
textarea {	font-family:'Pretendard, sans-serif'; width:100%; height: 150px; padding:10px; border-radius: 4px; border:1px solid #E9E9EC;  -webkit-box-sizing:border-box; box-sizing:border-box; resize:none;  -webkit-appearance:none; -moz-appearance:none; appearance:none;}
fieldset, img, iframe {border:0 none}
img { max-width:100%; height:auto; vertical-align:middle; border-style:none;}

body::-webkit-scrollbar { width:10px; }
body::-webkit-scrollbar-thumb {height:10%;  background:#4e83ff;  border-radius:10px;  -webkit-border-radius:10px; -moz-border-radius:10px; box-sizing:border-box;  -webkit-transition:border .1s linear; -moz-transition:border .1s linear; transition:border .1s linear; }
body::-webkit-scrollbar-track {background:rgba(33, 122, 244, .1); }

body::-webkit-scrollbar-thumb:hover { background:#0132ae;   }

.scroll::-webkit-scrollbar { width:7px;}
.scroll::-webkit-scrollbar-thumb {height:20%; background:#4e83ff;     border-radius:10px;  -webkit-border-radius:10px; -moz-border-radius:10px; }
.scroll::-webkit-scrollbar-track {background:rgba(33, 122, 244, .1); }


em, address {font-style:normal}
a {text-decoration:none; background-color:transparent; vertical-align:middle; -webkit-text-decoration-skip:objects; color:#000; word-break:break-word;  cursor: pointer;}
a:hover, a:active, a:focus {text-decoration:none;}
menu,li {list-style:none}
button {-webkit-appearance: none; -moz-appearance: none; appearance: none;background: var(--button-bg-color);  color: var(--button-color); 
margin: 0;  padding:0;  text-align: center;  text-decoration: none; border: none;  border-radius: 4px;  width: auto; font-family:'Pretendard', sans-serif; }

button, input {overflow:visible;}

caption {width:0; height:0; font-size:0; line-height:0; overflow:hidden; visibility:hidden}
hr {display:none; padding:0; margin:0; }
i,em,address{font-style:normal}
label {cursor:pointer}
table {width:100%; border-spacing:0; border-collapse:0; color:#000; table-layout:fixed}
table td {word-wrap:break-word;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}

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

/* basic check,radio */
input[type="checkbox"] {display:none !important;}
input[type="checkbox"] + .chk-label {color:#222;}
input[type="checkbox"] + .chk-label span {display:inline-block; background:url('../images/check-box.png')no-repeat; background-size:100% auto; width:20px; height:20px; background-position:0 0; margin:-3px 5px 0 0; vertical-align:middle; cursor:pointer;}
input[type="checkbox"]:checked + .chk-label span {background:url('../images/check-box.png') no-repeat; background-size:100% auto; background-position:0 -20px;  }

input[type="radio"] {display:none !important;}
input[type="radio"] + .rdo-label { color:#222;margin-right:20px; }
input[type="radio"] + .rdo-label:last-child {margin-right:0; }
input[type="radio"] + .rdo-label span {display:inline-block; background:url('../images/radio-box.png') no-repeat; background-size:100% auto; width:20px; height:20px;  background-position:0 0; margin:-3px 5px 0 0; vertical-align:middle; cursor:pointer;}
input[type="radio"]:checked + .rdo-label span {background:url('../images/radio-box.png') no-repeat; background-size:100% auto; background-position:0 -20px;  }

/*응용*/
.radio-new { }
.radio-new:after {content: ""; display: table;  clear: both;}
.radio-new input[type="radio"]{ display: none;}
.radio-new input[type="radio"] + label{ display: inline-block; cursor: pointer; height: 45px;   display:flex; justify-content: center;  align-items: center; margin-right:10px;  }
.radio-new input[type="radio"] + label{ background: #F6F6F6; color: #333; border-radius: 4px;}
.radio-new input[type="radio"]:checked + label{ background-color: #fff; color: #6F3CFF; border: 1px solid #6F3CFF;}


.checkbox-new{}
.checkbox-new:after {content: ""; display: table;  clear: both;}
.checkbox-new li{ margin:0 10px 10px 0 ; float: left;  width:calc(100% / 4 - 7.9px);  height:45px;  }
.checkbox-new li:after {content: ""; display: table;  clear: both;}
.checkbox-new li:nth-child(4n){ margin-right:0 !important; }
.checkbox-new  input[type="checkbox"] {display:none !important;}
.checkbox-new  input[type="checkbox"] + label {color:#222;  position: relative;}
.checkbox-new  input[type="checkbox"] + label span {display:inline-block;  background: #F6F6F6; color:#333; height:100%; border-radius: 4px; display:flex; justify-content: center;  align-items: center;  cursor:pointer; }
.checkbox-new  input[type="checkbox"]:checked + label span { background-color: #fff; color: #6F3CFF; border: 1px solid #6F3CFF; }
.checkbox-new  input[type="checkbox"] + label span.last{margin-right:0 !important; }
 



:root {

    --darkRed : #6A0000;
    --white: #fff;
    --black: #000;
    --color900: #1F1F25;
    --color800: #33333D;
    --color700: #5F616D;
    --color600: #868793;
    --color500: #979AA3;
    --color400: #B6B7BE;
    --color300: #D9DBE0;
    --color200: #E7E9EB;
    --color100: #F7F7F8;    
    --lightRed: #FFEEEE;  

    --filter100: invert(95%) sepia(86%) saturate(295%) hue-rotate(263deg) brightness(110%) contrast(94%);
    --filter200: invert(100%) sepia(1%) saturate(3073%) hue-rotate(175deg) brightness(95%) contrast(93%);
    --filter300: invert(98%) sepia(1%) saturate(2181%) hue-rotate(185deg) brightness(89%) contrast(96%);
    --filter400: invert(83%) sepia(0%) saturate(1537%) hue-rotate(271deg) brightness(90%) contrast(92%);        
    --filter500: invert(68%) sepia(16%) saturate(144%) hue-rotate(187deg) brightness(88%) contrast(89%);
    --filter600: invert(56%) sepia(6%) saturate(526%) hue-rotate(198deg) brightness(95%) contrast(87%);
    --filter700: invert(40%) sepia(17%) saturate(285%) hue-rotate(193deg) brightness(87%) contrast(84%);
    --filter800: invert(18%) sepia(8%) saturate(1034%) hue-rotate(202deg) brightness(91%) contrast(88%);
    --filter900: invert(9%) sepia(9%) saturate(859%) hue-rotate(201deg) brightness(101%) contrast(93%); 
      
    --rgb-point1: 249, 88, 53;
    --rgb-point3: 77, 78, 217;
    --rgb-white: 255, 255, 255;
    --rgb-black: 0, 0, 0;

  }

/*selectBox*/
.select-area{ position: relative;}
.select-area .arrow-down{position: absolute; top:4px; right:0;   width:26px; height:26px;   background:url('../images/arrow-down.png') no-repeat center center; background-size:100%;}

/* 타이틀 */
.title-large {font-size:20px; font-weight:bold; margin-bottom:25px;  letter-spacing:-2px; clear:both;  color:#222; }
.title-blue  {font-size:18px;  color:#4e83ff; margin-bottom:20px; font-weight: 700;}


/* margin */
.mt-0 {margin-top:0 !important;}
.mt-5 {margin-top:5px !important;}
.mt-10 {margin-top:10px !important;}
.mt-15 {margin-top:15px !important;}
.mt-20 {margin-top:20px !important;}
.mt-30 {margin-top:30px !important;}
.mt-40 {margin-top:40px !important;}
.mt-50 {margin-top:50px !important;}
.mt-60 {margin-top:60px !important;}

.ml-10{margin-left:10px !important;}
.ml-20 {margin-left:20px !important;}
.mtl-20{margin:20px 0 0 20px; }


.mb-0 {margin-bottom:0 !important;}
.mb-10 {margin-bottom:10px !important;}
.mb-15 {margin-bottom:10px !important;}
.mb-20 {margin-bottom:20px !important;}
.mb-30 {margin-bottom:30px !important;}
.mb-40 {margin-bottom:40px !important;}
.mb-50 {margin-bottom:40px !important;}





.color-white {color:var(--white)}