@charset "utf-8";

.visualhide,.blind {border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}
.hide{display: none;}
.img{width:100%;display:block;text-align:center}

/* 컴포넌트 간격 */
.mr0{margin-right:0 !important}
.ml0{margin-left:0 !important}
.mb0{margin-bottom:0 !important}
.mt0{margin-top:0 !important}
.m0{margin:0 !important}
.ml_a{margin-left: auto}
.mr_a{margin-right: auto}
.my12{margin: 1.2rem 0}
.my16{margin: 1.6rem 0}
.my24{margin: 2.4rem 0}
.my36{margin: 3.6rem 0}
.mt1{margin-top:0.1rem}
.mt2{margin-top:0.2rem}
.mt3{margin-top:0.3rem}
.mt4{margin-top:0.4rem}
.mt5{margin-top:0.5rem}
.mt6{margin-top:0.6rem}
.mt7{margin-top:0.7rem}
.mt8{margin-top:0.8rem}
.mt10{margin-top:1rem}
.mt12{margin-top:1.2rem}
.mt13{margin-top:1.3rem}
.mt15{margin-top:1.5rem}
.mt16{margin-top:1.6rem}
.mt16_5{margin-top: 1.65rem}
.mt17{margin-top:1.7rem}
.mt18{margin-top:1.8rem}
.mt20{margin-top:2rem}
.mt20_{margin-top:-2rem}
.mt24{margin-top:2.4rem}
.mt30{margin-top:3rem}
.mt40{margin-top:4rem}
.mt50{margin-top:5rem}
.mt60{margin-top:6rem}
.mt70{margin-top:7rem}
.mt80{margin-top:8rem}
.mt90{margin-top:9rem}
.mb6{margin-bottom: 0.6rem}
.mb8{margin-bottom: 0.8rem}
.mb10{margin-bottom:1rem}
.mb12{margin-bottom:1.2rem}
.mb15{margin-bottom:1.5rem}
.mb16{margin-bottom:1.6rem}
.mb20{margin-bottom:2rem}
.mb30{margin-bottom:3rem}
.mr8{margin-right:0.8rem}
.ml4{margin-left:0.4rem}
.ml6{margin-left:0.6rem}
.ml10{margin-left:1rem}
.ml12{margin-left: 1.2rem}
.ml24{margin-left: 2.4rem}
.ml36{margin-left: 3.6rem}
.ml48{margin-left: 4.8rem}
.ml12_im{margin-left:1.2rem !important}
.mr12_im{margin-right:1.2rem !important}
.mr4{margin-right: 0.4rem}
.mr10{margin-right:1rem}
.mr12{margin-right:1.2rem}


/* padding */
.p0{padding:0 !important}
.pt0{padding-top:0 !important}
.p10{padding:1rem}
.p12{padding: 1.2rem}
.p20{padding: 2rem}
.py28{padding: 2.8rem 0}
.pt8{padding-top: 0.8rem}
.pb9{padding-bottom: 0.9rem}
.pt12{padding-top:1.2rem}
.pt20{padding-top:2rem}
.pb10{padding-bottom:1rem}
.pb12{padding-bottom:1.2rem}
.pb20{padding-bottom:2rem}
.pb30{padding-bottom:3rem}
.mh130{min-height:13rem}


/* textarea */

.textarea-wrap {
  position: relative;
  width: 100%;
}

.textarea-wrap textarea{
  width: 100%;
  height: 150px;
  padding: 10px;
  background: var(--colorF);
  font-size: 15px;
  line-height: 1.4;
  border: 1px solid #ddd;
  box-sizing: border-box;
  resize: vertical;
}

.textarea-wrap .count{
  position: absolute;
  bottom: 10px;
  right: 12px;
  font-size: 13px;
  color: #666;
  pointer-events: none;
  user-select: none;
  background: rgba(255, 255, 255, 0.7);
  padding: 0 4px;
  border-radius: 4px;
}

/* 양옆 페딩 관련 */
.padd-reset{padding-left:0 !important;padding-right:0 !important}
.padd{padding-left:var(--paddCommon);padding-right:var(--paddCommon); background: var(--colorF);}
.paddi{padding-left:var(--paddCommon) !important;padding-right:var(--paddCommon) !important}
.padd_{padding-left:var(--paddCommon_);padding-right:var(--paddCommon_)}
.paddi_{padding-left:var(--paddCommon_) !important;padding-right:var(--paddCommon_) !important}
.padd12{padding-left:1.2rem;padding-right:1.2rem}

/* 색 */
.c_theme{font-size:inherit;font-family:inherit; color:var(--theme)}
.c_pink{font-size:inherit;font-family:inherit; color:var(--colorPoint)}
.c_0{font-size:inherit;font-family:inherit;color:#000}
.c_9{font-size:inherit;font-family:inherit;color:var(--color999); font-weight:500;}
.fc999{color: var(--color999)}
.fc9{color: var(--color999)}
.fcf{color: var(--colorF)}
.c_yellow {color:#FDBD01}
.c_lightgray {color: var(--colorE5)}
.c_gray {color: var(--color6);}
.c_blue{ color:var(--color10)}
.c_red{color:var(--theme2);}
.c_orange{color:#e2511c}

.bg_theme{background-color:var(--theme)}
.bg_pink{background-color:var(--colorPoint)}
.bg_9{background-color:var(--color999)}

/* 노출, 숨김 용 */
.disp_b{display:block}
.disp_b_im{display:block !important}
.disp_n{display:none}
.disp_n_im{display:none !important}
.cut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 필수 */
.essen{
  
}
.essen::after{
    content: '*';
    display: inline-block;
    color: #ef3745;
    margin-left: 4px;
}


/* 텍스트 크기 */
.f10 {font-size:1rem}
.f11 {font-size:1.1rem}
.f12 {font-size:1.2rem !important}
.f13 {font-size:1.3rem !important}
.f14 {font-size:1.4rem !important}
.f16 {font-size:1.6rem !important}
.f17 {font-size:1.7rem !important}
.f18 {font-size:1.8rem !important}
.f20 {font-size:2rem !important}
.f22 {font-size:2.2rem !important}
.f24 {font-size:2.4rem !important}
.fontl{font-family: var(--fontL)}
.fontf {font-family:var(--fontF)}
.fontfm {font-family:var(--fontFM)}
.fontfb {font-family:var(--fontFB)}

.fw-n{font-weight: normal !important;}
.fw-b{font-weight: bold !important;}

.tdeco1{text-decoration: underline;text-underline-position: under}

/*word break*/
.w_keep{word-break: keep-all}
.w_break{word-break: break-all}

/* 라인 */
.b0{border:0 !important}
.bdt0{border-top:0 !important}
.bdb0{border-bottom:0 !important}
.bdl0{border-left:0 !important}
.bdr0{border-right:0 !important}
.b1{border:0.1rem solid var(--colorE5)}
.bb1_e5{border-bottom:0.1rem solid var(--colorE5)}
.bb1_f5{border-bottom:0.1rem solid var(--colorF5)}
.bb1_dash_f5{border-bottom:0.1rem dashed var(--colorF5)}
.b_radi0{border-radius:0rem}
.b_radi5{border-radius:0.5rem}
/* 높이 */
.lineH12{line-height:1.2rem}
.lineH14{line-height:1.4rem}
.lineH15{line-height:1.5rem}
.lineH16{line-height:1.6rem}
.lineH17{line-height:1.7rem}
.lineH18{line-height:1.8rem}
.lineH19{line-height:1.9rem}
.lineH20{line-height:2rem}
.lineH21{line-height:2.1rem}
.lineH22{line-height:2.2rem}
.lineH23{line-height:2.3rem}
.lineH24{line-height:2.4rem}
.lineH25{line-height:2.5rem}
.lineH28{line-height:2.8rem}
.lineH30{line-height:3rem}
.lineH36{line-height:3.6rem}

.h100vh{height:100vh}

/* 너비 */
.wd100{width:100%}

/* 배경컬러 */
.bgc_f{background-color:#fff}
.bgc_f5{background-color:var(--colorF5);}

/* 정렬 */
.al{text-align:left}
.ac{text-align:center}
.ar{text-align:right}
.al_im{text-align:left !important}
.ac_im{text-align:center !important}
.ar_im{text-align:right !important}
.align_between{display:flex;justify-content:space-between;align-items:center}
.align_between_wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap: wrap}
.flex{display:flex}
.flex.column{flex-direction: column;}
.flex.between{justify-content:space-between;align-items:center}
.inflex{display:inline-flex}
.flex_start{justify-content:flex-start !important}
.flex_center{justify-content:center !important}
.flex_end{justify-content:flex-end !important}
.flex_align_start{align-items:flex-start !important}
.flex_align_center{align-items:center}
.flex_align_end { align-items: end}
.flex_justify_between{justify-content: space-between}
.flex_between{display:flex;justify-content:space-between;align-items:center}
.flex_between>*{flex:1 auto}
.flex_between_top{display:flex;justify-content:space-between;align-items:flex-start}
.flex_wrap{display: flex;flex-wrap: wrap}
.flex_dc{display: flex;flex-direction: column}
.flex_center_center{display:flex;justify-content:center;align-items:center}
.align_self_start{align-self: flex-start}
.align_self_center{align-self:center}
.align_self_end{align-self: flex-end}

.gap1{gap:0.25rem;}
.gap2{gap:0.5rem;}
.gap3{gap:1rem;}
.gap4{gap:1.25rem;}
.gap5{gap:1.5rem;}
.gap6{gap:1.75rem;}
.gap7{gap:2rem;}
.gap8{gap:2.25rem;}

.r_txt{position:absolute;top:0;right:0}
.p_r{position: relative}
.p_a_c{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%)}
.z1{z-index:1}
.z2{z-index:2}
.z3{z-index:3} 
.z4{z-index:4}
.z5{z-index:5}

/*자간*/
.lsp05{letter-spacing:-0.05rem}

/* Flex Unit */
.flex_1{flex:1 !important}
.flex_2{flex:2 !important}
.flex_3{flex:3 !important}

/*text-decoratoin*/
.tdeco{text-decoration:underline}
.tdeco_t{text-decoration:line-through}

/* float 관련 */
.fl{float: left}
.fr{float: right}
.fl_box>*{float: left}
.fr_box>*{float: right}
.fl_box:after{content:'';display: block;clear: both}
.fr_box:after{content:'';display: block;clear: both}
.cb:after{content:'';display: block;clear: both}

.pc_v{display: block !important;}
.mo_v{display: none !important;}

@media screen and (max-width: 1024px) {
  .pc_v{display: none !important; }
  .mo_v{display: block !important;}
}

@media screen and (max-width: 767px) {
  
}

@media screen and (max-width: 520px) {
  
}