@charset "utf-8";

/* font */
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy.css');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://webfontworld.github.io/gmarket/GmarketSans.css');
@import url('https://webfontworld.github.io/goodchoice/Jalnan.css'); */

/* === RESET CSS === */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}


/* 일본어 */
:lang(ja) {
  font-family: 'Noto Sans JP', sans-serif;
}
/* 중국어 (간체) */
:lang(zh-Hans) {
  font-family: 'Noto Sans SC', sans-serif;
}




:root {
  font-size: 16px; /* 1rem = 16px 기준 */
  --main-color: #e85255;
  --text-color: #ffffff;
  --highlight-color: #fff300;
  --font: 'Pretendard';
  --fontF: 'Pretendard';
  --fontFM: 'PretendardM';
  --fontFB: 'PretendardB';
  --fontG: 'GmarketSans';
  --fontJ: 'Jalnan';
  --paddCommon: 1.35rem;
  --paddCommon_: -2rem;
  --shadowStyle: 0px -3px 6px #0000001a;
  --shadowStyleh: 0px 3px 6px #00000029;
  --theme: #FF9600;
  --theme2: #F33939;
  --theme3: #FFAC36;
  --theme4: #FF6767;
  --color0: #000;
  --colorD: #ddd;
  --colorF: #fff;
  --colorF1: #f1f1f1;
  --color1: #303030;
  --color2: #464646;
  --color3: #4B4B4B;
  --color4: #686868;
  --color5: #606060;
  --color6: #717171;
  --color7: #ACACAC;
  --color8: #FF473E;
  --color9: #5f54eb;
  --colorF3: #f3f3f3;
  --colorF5: #f5f5f5;
  --colorF9: #f9f9f9;
  --colorE3: #e3e3e3;
  --colorE5: #e5e5e5;
  --appfooterPc: 6rem;
  --conWdPc: 40rem;
  --header: 5.2rem;
  --mheader: 5.2rem;
  --swiper-navigation-size: 44px;
  color:#333;
}

/* 기본 태그 초기화 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI",Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  vertical-align: baseline;
}



article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
  transition: all ease 0.5s;
  -webkit-transition: all ease 0.5s;
}



html {
    color: #333;

    font-size: 16px;
    line-height: 1;
    font-weight: normal;
}





body {
    line-height: 1;
  }
  
  ol, ul, li {
    list-style: none;
  }
  
  blockquote, q {
    quotes: none;
  }
  
  blockquote::before,
  blockquote::after,
  q::before,
  q::after {
    content: "";
    content: none;
  }
  
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  
  
  



textarea {
    resize: none;
}

fieldset,
img {
    border: 0;
}

img {
    width: auto;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}



li,
ol,
ul {
  list-style: none;
}

address,
em,
i {
  font-style: normal;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

th,
em {
  font-style: normal;
  font-weight: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

input,
select,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font-family: inherit;
  background: transparent;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

legend,
caption {
  visibility: hidden;
  overflow: hidden;
  width: 0 !important;
  height: 0 !important;
  font-size: 0;
  line-height: 0;
}

a:focus,
button:focus {
  outline: 1px solid #333;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  outline: 0;
}

button:disabled {
  cursor: default;
}

button:disabled:hover {
  background-color: #a1a1a1 !important;
  border-color: #a1a1a1 !important;
}

button {
  border: none;
  cursor: pointer;
}


.visualhide {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;}

.blind {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
  }
  
  

/* 컴포넌트 간격 */
.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}




/* 양옆 페딩 관련 */
.padd-reset{padding-left:0 !important;padding-right:0 !important}
.padd{padding-left:var(--paddCommon);padding-right:var(--paddCommon); background: #fff;}
.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: #E5E5E5}
.c_gray {color: #7e7e7e;}
.c_blue{ color:#076FA8}
.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}

/* 텍스트 크기 */
.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:#f5f5f5}

/* 정렬 */
.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;}
}
