/* 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%; min-height:100vh; overflow-y:scroll; -ms-text-size-adjust:100%; -webkit-text-size-adjust:100%; min-width: 320px; margin: 0;}
body { font-family:'NanumSquareNeo', sans-serif; font-size:14px; font-weight:700;  background: var(--color800); color: var(--color100); line-height:130%; letter-spacing:-0.7px; padding:0; margin:0;   -webkit-overflow-scrolling:touch;	 }



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;}
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;}
*, *:after, *:before {  -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}





/*placeholder*/
::-webkit-input-placeholder {font-size:14px; color: var(--color500);  vertical-align:middle; letter-spacing: -1px; font-weight: 500;  }
textarea::placeholder       {font-size:14px; color: var(--color500); vertical-align:middle; letter-spacing: -1px; font-weight: 500; }
textarea  { color:var(--color100);   font-weight: 700; line-height: 1.65rem;  font-size:15px; }
textarea { font-family:'NanumSquareNeo', sans-serif;   width:100%; height: 150px; padding:10px; border-radius:4px; border:0; background: var(--color800) !important; color:var(--color200) !important; 
             -webkit-box-sizing:border-box; box-sizing:border-box; resize:none;  -webkit-appearance:none; -moz-appearance:none; appearance:none;}
 /*input*/
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"] { font-size:16px;   background:var(--color800); color: var(--white);  border: 0;   height: 50px; padding:16px; font-weight: 600;  border-radius: 4px; 
                       outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;  transition:border-color .3s ease; cursor:pointer; }
input[type="text"]:focus, 
input[type="search"]:focus, 
input[type="password"]:focus, 
input[type="tel"]:focus, 
input[type="email"]:focus,
input[type="number"]:focus, 
input[type="number"]:focus { border:1px solid var(--color700); background:var(--color800); border-radius:4px; color: var(--white);}  /*click*/

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




input.light:focus,
input.light,
textarea {   background:var(--color200); border-radius:4px; color: var(--color900); border: 0;  }


fieldset, img, iframe {border:0 none}
img {max-width:100%; height:auto; vertical-align:middle; border-style:none;}

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

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; }
ul:after {display:block; content:''; clear:both;}
i,em,address{font-style:normal}
label {cursor:pointer}

table {width:100%; border-spacing:0; border-collapse:0; color:inherit; table-layout:fixed}
table td {word-wrap:break-word;}

/* 기본 토글 */
.toggleWrap .toggle-Switch  { width:50px; height: 26px; display: block; position: relative; border-radius: 30px; background-color:var(--color500);   cursor: pointer;  }
.toggleWrap .toggle-Switch .toggle-Button  { width: 20px; height: 20px; position: absolute; top: 50%; left: 3px; transform: translateY(-50%); border-radius: 50%; background: var(--white); }
.toggleWrap  #toggle:checked ~ .toggle-Switch { background: var(--mainColor); }
.toggleWrap  #toggle:checked ~ .toggle-Switch .toggle-Button { left: calc(100% - 25px); background: var(--white); }
.toggleWrap .toggle-Switch, .toggle-Button  { transition: all 0.2s ease-in; }


/*  check  */
input[type="checkbox"] {display:none !important;  }
input[type="checkbox"] + .chk-label {  display: flex;  align-items: center; gap: 6px;   }
input[type="checkbox"] + .chk-label span {display:inline-block;   background:url('../resource/svg/checkbox-off.svg')no-repeat; background-size:100% ; width:24px; height:24px;  filter: var(--filter700);  cursor:pointer;}
input[type="checkbox"]:checked + .chk-label span { background:url('../resource/svg/checkbox-on.svg') no-repeat; background-size:100% ;  filter: var(--filterMain);  }
input[type="checkbox"] + .chk-label .txt {display: inline-block;    }


.radio-default{    } 
.radio-default .rdo-label {   margin-bottom: 8px;    }
input[type="radio"] {display:none !important;}
input[type="radio"] + .rdo-label {  }
input[type="radio"] + .rdo-label:last-child {margin-right:0; }
input[type="radio"] + .rdo-label span {display:inline-block;     background:url('../resource/svg/btn-radio-off.svg') no-repeat center; background-size:100%; width:20px; height:20px; margin:-3px 8px 0 0; vertical-align:middle; cursor:pointer; }
input[type="radio"]:checked + .rdo-label span {background:url('../resource/svg/btn-radio-on.svg') no-repeat center; background-size:100% ;   }



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

.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: 52px;   display:flex; justify-content: center;  align-items: center;  /*margin-right:10px;*/ }
.radio-new input[type="radio"] + label{  color:var(--color300); border-radius: 6px;   border: 1px solid var(--color700); }
.radio-new input[type="radio"]:checked + label{ background: var(--white); color:var(--mainColor);  border: 0; }

.dropdown-menu{position: relative;  }
.dropdown-menu::before { content:""; position: absolute; top:14px; right:14px;  background:url('../resource/svg/arrow-down.svg') no-repeat; background-size:100% auto; width:20px; height:20px;}
.dropdown-menu .flag img{ position: absolute; top:15px; left:16px;  width:30px; }
.dropdown-menu.country input {padding-left:62px;}


.sel-subject { position: absolute; top: 0; right: 0; bottom: 0; left: 0;   border: 1px solid #ddd;  border-radius: 6px;  padding: 18px 15px 0; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.sel-subject:after { content: "";  position: absolute; top: 16px; right: 10px; background: url('../resource/svg/arrow-down.svg')   center no-repeat;  background-size:100%; width:22px; height: 20px;  border:none;  -webkit-appearance:none;  -moz-appearance:none; appearance:none;  }
.sel-subject:hover { border: 1px solid #ddd;  }
.sel-subject:active, .sel-subject.active  {  border: 1px solid var(--color500);  }
.sel-subject:active:after, .sel-subject.active:after { top: 13px; -webkit-transform: rotate(180deg);  }


.whiteMode { color:var(--color900) !important; background: var(--white) !important;}
.f-Size16 { font-size:16px !important; }
:root {
        --mainColor : #E60012;
        --pointColor1: #F95835;
        --pointColor2: #32D4AE;
        --pointColor3: #4D4ED9;
        --white: #fff;
        --black: #000;
        --color900: #1F1F25;
        --color800: #33333D;
        --color700: #5F616D;
        --color600: #868793;
        --color500: #979AA3;
        --color400: #B6B7BE;
        --color300: #D9DBE0;
        --color200: #E7E9EB;
        --color100: #F7F7F8;    
        --lightRed: #FFEEEE;  

        --filterWhite:invert(97%) sepia(97%) saturate(2%) hue-rotate(82deg) brightness(103%) contrast(100%);
        --filterMain: invert(12%) sepia(100%) saturate(6398%) hue-rotate(351deg) brightness(87%) contrast(108%);
        --filterPoint1:  invert(51%) sepia(92%) saturate(3830%) hue-rotate(341deg) brightness(102%) contrast(95%);        

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

      }

.varblack   { color:var(--color900) !important;   }      
.varPoint1  { color:var(--pointColor1);  font-weight: 600;}
.varPoint2  { color:var(--pointColor2);  font-weight: 600;}
.varRed     { color:var(--mainColor);   font-weight: 800;}
.varLightRed{ background:var(--lightRed); }

/*** margin/padding *********************************/
.mrl16 {margin-right:16px !important; margin-left:16px !important; }
.ml-auto{  margin-left: auto !important;}

.m0{margin: 0 !important;}
.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;}
.mt25 {margin-top:25px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mt60 {margin-top:60px !important;}
.mt80 {margin-top:80px !important;}

.mt100 {margin-top:100px !important;}

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

.mb0  {margin-bottom:0 !important;}
.mb5  {margin-bottom:10px !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:50px !important;}
.mb60 {margin-bottom:60px !important;}
.mb100 {margin-bottom:100px !important;}
.mlr16{margin:0 16px !important; }


/* padding */
.pt5{padding-top:5px !important;}
.pt10{padding-top:10px !important;}
.pt15{padding-top:15px !important;}
.pt20{padding-top:20px !important;}
.pt30{padding-top:30px !important;}
.pt50{padding-top:50px !important;}
.pt55{padding-top: 55px !important;}
.pt56{padding-top: 56px !important;}

.pb80 {padding-bottom:80px !important;}
.pb90 {padding-bottom:90px !important;}
.pb100 {padding-bottom:100px !important;}

.plr0{padding:0 0 !important; }
.mr5{ margin-right:5px;}
.mr20{ margin-right:20px;}

.plr16{padding:0 16px !important; }
.pb16{padding-bottom:16px !important;}




.white {color: var(--white) !important; }
/******************* 타이틀 *******************/
.modalpop-title  {font-size:20px; font-weight:800;  text-align: center; letter-spacing:-1px; clear:both;  color:var(--color900);   margin: 0 16px 26px;}
.modalpop-title.left{ text-align: left;}

.medium-title {font-size:18px;  font-weight:600;  margin: 0 0 14px; }
.medium-title .right-pos{float: right; font-size:14px; font-weight: normal; }
.medium-title .btn-allDel{ color: var(--color300); }
.small-title  {font-size:14px;    margin-bottom:10px; font-weight: 700;}

.alignCenter{ text-align: center; }

.h1-title {position: relative; font-size:18px;   font-weight: 700;  margin: 20px 16px 14px;  display: flex; align-items: center;    font-family: 'SBAggro'; clear: both; }
.h1-title a {display: inline-block; width:100%;   }
.h1-title::after{ content: ""; position: absolute; top:0px; right:0;  background:url('../resource/svg/arrow-right.svg') no-repeat; background-size:100%;  width:18px; height: 18px;  
  filter: invert(66%) sepia(9%) saturate(235%) hue-rotate(187deg) brightness(91%) contrast(90%);}
.h1-title a i {margin-right: 6px;}
.h1-title a i img {width:28px; }
.h1-title.arrow-none::after {  background:none;  }

.pageTopWrap { display: flex;  position: fixed; bottom: 80px; width: 100%;  max-width: 500px;  z-index: 2; }
.pageTopWrap .btn-top{position: relative; border-radius: 100px; background:var(--color800);  width: 60px; height: 60px;   border-radius: 100px;  margin-left:auto;  margin-right: 16px;  display: flex; justify-content: center;  align-items: center; font-size:0;  }
.pageTopWrap .btn-top::after { content: "";  background:url('../resource/svg/arrow-longTop.svg') no-repeat; background-size:100%;  width:18px; height: 18px; filter: var(--filterWhite); }

.tbLine{display: block; width: 100%; height: 8px;  background: var(--color200); border: 0; margin: 10px 0;}


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

.pop-bwRow { margin: 0 auto;  }
.pop-bwCol { display:flex; flex-flow:row nowrap; justify-content: space-between;  gap:10px; flex-grow: 1;  margin: 0 auto;} 
.pop-bwCol button:nth-child(1) {  width: 40%;}
.pop-bwCol button:nth-child(2) {  width: 60%;}



.footer-fix { position: fixed; width: 100%; bottom:0;  left:0;  right:0; background: var(--black);  z-index:300;  padding:16px;  min-width: 320px;  max-width: 500px;  margin:   0px 0px 0px calc(45vw + 100px);    }
.bwRow {  padding:16px 16px;  min-width: 320px;  max-width: 500px;  margin: 0px 0px 0px 0px calc(45vw + 100px);       }


@media all and (max-width:1201px) {
  .footer-fix, .bwCol, .bwhalf , .bwRow{ margin:0 auto !important; }

}



.bwCol {  display:flex; flex-flow:row nowrap; justify-content: space-between; padding:16px 16px;  gap:10px; flex-grow: 1; min-width: 320px;  max-width: 500px;  margin: 0px 0px 0px 0px calc(45vw + 100px); } 
.bwCol button:nth-child(1) {  width: 40%;}
.bwCol button:nth-child(2) {  width: 60%;}



.bwhalf{ display:flex; flex-flow:row nowrap; justify-content: space-between;  padding:16px 16px;  gap:10px; flex-grow: 1;  min-width: 320px;  max-width: 500px; margin: 0px 0px 0px 0px calc(45vw + 100px) } 
.bwhalf button:nth-child(1) {  width:50%;}
.bwhalf button:nth-child(2) {  width:50%;}

button  {width:100%;  display: inline-block; position: relative;  font-weight: 600; text-align: center;  transition: all 0.2s ;  }

/* color */
.btnMainColor { background: var(--mainColor);  color: var(--white);  }
.btnMainLine  { background: transparent; border:1px solid var(--mainColor); color: var(--mainColor); font-weight: 800;}      
.btnGray900   { background: var(--color900);  color: var(--white);}
.btnGray700   { background: var(--color700);  color: var(--white);}
.btnGray100   { background: var(--color100);  color: var(--color800); }
.btnGray100Line {background: transparent;  border:1px solid var(--color200);  color: var(--color100); }
.btnGray300Line {background: transparent;  border:1px solid var(--color200);  color: var(--color700); }
.btnGray500Line {background: transparent;  border:1px solid var(--color500);  color: var(--color800); }
.btnGray700Line {background: transparent;  border:1px solid var(--color700);  color: var(--color400); }

.btnPoint2   { background: var(--pointColor2);  color: var(--black);  ; }
.btnLightRed   {background: var(--lightRed); border: 1px solid #FFCFCF;}

/* hover */
.btnMainColor:hover { background: #730009; } 
.btnMainLine:hover  { background: var(--mainColor); color: var(--white); }
.btnGray:hover      { background: var(--color800); }

/* size */
button.Large , a.Large  { height: 56px; font-size:16px; display:flex; justify-content:center; align-items:center; border-radius: 4px; }
button.Medium, a.Medium { height: 48px; font-size:15px; display:flex; justify-content:center; align-items:center; border-radius: 4px;}
button.Small, a.Small   { height: 36px; font-size:14px; display:flex; justify-content:center; align-items:center; border-radius: 4px;}
button.XSmall, a.XSmall { height: 28px; font-size:12px; display:flex; justify-content:center; align-items:center; padding:0 8px;  border-radius: 4px;}



.labelBox { width:65px; height: 28px; font-size:12px; display:flex; justify-content:center; align-items:center; padding:0 4px; }