/* 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%; min-height:100vh; background: #000;}
html {height:100%; overflow-y:scroll; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; min-width: 280px;}
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:'SCoreDream', sans-serif;  font-weight:500; height:100%;  color:var(--gray900);   line-height:110%; font-size:16px;   letter-spacing:-0.5px; 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:60px; font-size:18px; padding:0;  background:var(--gray900);  border: 1px solid var(--gray800);  color: var(--white);  font-weight: 700; border-radius: 8px; padding: 10px;
 outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;  transition:border-color .3s ease; cursor:pointer; }
 @media all and (max-width:768px) {
  input[type="text"], 
  input[type="search"], 
  input[type="password"], 
  input[type="tel"], 
  input[type="email"],
  input[type="number"], 
  input[type="button"]{ height:52px;  }
}

::-webkit-input-placeholder {font-size:14px; color: var(--gray500); vertical-align:middle; letter-spacing: -1px;  }
textarea::placeholder       {font-size:14px; color: var(--gray500);  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:var(--Primary-color); background:var(--gray900);   border-radius: 8px;}

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 {  height:auto; vertical-align:middle; border-style:none;}

body::-webkit-scrollbar { width:10px; }
body::-webkit-scrollbar-thumb {height:10%;  background:var(--Primary-color);  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:#35129A;   }

.scroll::-webkit-scrollbar { width:7px;}
.scroll::-webkit-scrollbar-thumb {height:20%; background:var(--Primary-color);     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: 8px; width: 100%;  padding: 0 8px; }

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: var(--gray400); font-size:14px; }
input[type="checkbox"] + .chk-label span {display:inline-block; background:url('../images/check-box.svg')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.svg') no-repeat; background-size:100% auto; background-position:0 -20px;  }
input[type="checkbox"] + .chk-label i { color: var(--Primary-color); margin-left: 10px;}

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



/*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 */
.mt0 {margin-top:0 !important;}
.mt5 {margin-top:5px !important;}
.mt10 {margin-top:10px !important;}
.mt15 {margin-top:15px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}

.ml10{margin-left:10px !important;}
.ml20 {margin-left:20px !important;}
.mtl20{margin:20px 0 0 20px; }


.mb0 {margin-bottom:0 !important;}
.mb10 {margin-bottom:10px !important;}
.mb15 {margin-bottom:10px !important;}
.mb20 {margin-bottom:20px !important;}
.mb30 {margin-bottom:30px !important;}
.mb40 {margin-bottom:40px !important;}
.mb50 {margin-bottom:40px !important;}






:root {
    --Primary-color :#5B21FF;
  
    --blue-Light: #AAC3FF;
    --red-Light :#FFF5F5;
  
    --Second-red: #E60012;
    --Second-orange: #F95835;
    --Second-green: #238954;
    --Second-darkBlue :#204292;
    --Second-blue: #2451E3;
    --Second-skyblue: #547AF8;
    
    --white: #fff;
    --black: #000;
    --gray900: #1F1F25;
    --gray800: #33333D;
    --gray700: #5F616D;
    --gray600: #868793;
    --gray500: #979AA3;
    --gray400: #B6B7BE;
    --gray300: #D9DBE0;
    --gray200: #E7E9EB;
    --gray150: #F1F3F8;   
    --gray100: #F7F7F8;    
   
    --filter-White:invert(97%) sepia(97%) saturate(2%) hue-rotate(82deg) brightness(103%) contrast(100%);
    --filter-Black: invert(0%) sepia(7%) saturate(7470%) hue-rotate(91deg) brightness(85%) contrast(106%);
    
    --filter-PrimaryColor:invert(13%) sepia(82%) saturate(5190%) hue-rotate(256deg) brightness(110%) contrast(112%);;
    
    --filter-Second-red: invert(13%) sepia(92%) saturate(5552%) hue-rotate(350deg) brightness(86%) contrast(112%);  
    --filter-Second-orange: invert(51%) sepia(92%) saturate(3830%) hue-rotate(341deg) brightness(102%) contrast(95%);  
    --filter-Second-green: invert(24%) sepia(53%) saturate(6201%) hue-rotate(148deg) brightness(98%) contrast(73%);;
    --filter-Second-blue: invert(24%) sepia(85%) saturate(4272%) hue-rotate(226deg) brightness(92%) contrast(94%);;
    --filter-Second-skyblue:  invert(35%) sepia(79%) saturate(1359%) hue-rotate(211deg) brightness(108%) contrast(94%);;
    
    --filter-gray100: invert(95%) sepia(86%) saturate(295%) hue-rotate(263deg) brightness(110%) contrast(94%);
    --filter-gray200: invert(100%) sepia(1%) saturate(3073%) hue-rotate(175deg) brightness(95%) contrast(93%);
    --filter-gray300: invert(98%) sepia(1%) saturate(2181%) hue-rotate(185deg) brightness(89%) contrast(96%);
    --filter-gray400: invert(83%) sepia(0%) saturate(1537%) hue-rotate(271deg) brightness(90%) contrast(92%);        
    --filter-gray500: invert(68%) sepia(16%) saturate(144%) hue-rotate(187deg) brightness(88%) contrast(89%);
    --filter-gray600: invert(56%) sepia(6%) saturate(526%) hue-rotate(198deg) brightness(95%) contrast(87%);
    --filter-gray700: invert(40%) sepia(17%) saturate(285%) hue-rotate(193deg) brightness(87%) contrast(84%);
    --filter-gray800: invert(18%) sepia(8%) saturate(1034%) hue-rotate(202deg) brightness(91%) contrast(88%);
    --filter-gray900: invert(9%) sepia(9%) saturate(859%) hue-rotate(201deg) brightness(101%) contrast(93%); 
   
    --rgb-SecondColo1: 249, 88, 53;
    --rgb-SecondColo3: 77, 78, 217;
    --rgb-white: 255, 255, 255;
    --rgb-black: 0, 0, 0;
  }



/*************** 버튼 ***************/

.footer-fix { position: fixed;  bottom: 0; left: 0; right: 0;  z-index: 300;    }
.bwRow { padding-top: 30px;   }
.bwhalf { padding-top: 30px; display: flex; flex-flow: row nowrap; justify-content: space-between; gap: 10px; flex-grow: 1; }
.bwhalf button:nth-child(1) { width: 40%; }
.bwhalf button:nth-child(2) { width: 60%; }

.bwSmall { display: flex; justify-content: center; gap: 10px; }ㄴ
.w-half { width:auto !important;  padding:0 20px;   }

/* size */

button.XLarge , a.XLarge { height: 64px; font-size: 18px; display: flex; justify-content: center; align-items: center;     font-family: 'JalnanGothic'; }
button.Large , a.Large  { height: 56px; font-size:16px; display:flex; justify-content:center; align-items:center;  }
button.Medium, a.Medium { height: 48px; font-size:15px; display:flex; justify-content:center; align-items:center; }
button.Small, a.Small   { height: 36px; font-size:14px; display:flex; justify-content:center; align-items:center; }
button.XSmall, a.XSmall   { height: 32px; font-size:14px; display:flex; justify-content:center; align-items:center; padding:0 8px; border-radius: 6px !important;}
button.XXSmall, a.XXSmall { height: 26px; font-size:12px; display:flex; justify-content:center; align-items:center; padding:0 8px; border-radius: 4px !important; letter-spacing: -0.5px;  }

@media all and (max-width:768px) { 
  button.XLarge , a.XLarge { height:52px; font-size:16px;   }
  button.Large , a.Large { height: 48px;  }
}

/* color */
.btn-PrimaryColor { background: var(--Primary-color);  color: var(--white);  }
.btn-PrimaryLine  { background: var(--white); border:1px solid var(--Primary-color); color: var(--Primary-color);  }     
.btn-BlackLine  { background: var(--white); border:1px solid var(--black); color: var(--black);  }      
.btn-Gray900   { background: var(--gray900);  color: var(--white);}
.btn-Gray800   { background: var(--gray800);  color: var(--white);}
.btn-Gray700   { background: var(--gray700);  color: var(--white);}
.btn-Gray500   { background: var(--gray500);  color: var(--white);}
.btn-Gray300   { background: var(--gray300);  color: var(--black);}
.btn-Gray100   { background: var(--gray100);  color: var(--gray800); }
.btn-Gray100Line {background: transparent;  border:1px solid var(--gray200);  color: var(--gray100); }
.btn-Gray300Line {background: transparent;  border:1px solid var(--gray200);  color: var(--gray700); }
.btn-Gray500Line {background: transparent;  border:1px solid var(--gray500);  color: var(--gray800); }
.btn-Gray700Line {background: transparent;  border:1px solid var(--gray700);  color: var(--gray900); }
.btn-Second-orange   { background: var(--Second-orange);  color: var(--black);   }
 
.btn-PrimaryColor-Light  {background: var(--lightRed); border: 1px solid #FFCFCF;}
.btn-Disabled   { background: var(--gray200);  color: var(--gray400);}