/********************
THEME
********************/
:root {
  --font-basic-color: #353232;
  --font-basic-light-color: #D9D9D9;
  --font-point-color: #34B9C2;
  --font-point-deep-color: #178FAC;
  --font-muted-color: #9A9A9A;
  
  --bg-basic-color: #353232;
  --bg-light-color: #D9D9D9;
  --bg-point-color: #34B9C2;

  --font-ttl-style:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  --font-txt-style:'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  --font-size-deflaut:20px;
  --font-size-xxl:2.8rem; 
  --font-size-xl:3rem;    /*60*/
  --font-size-ml: 1.5rem;  /*40*/
  --font-size-l:1.3rem;   /*30*/
  --font-size-m:1.25rem;  /*25*/
  --font-size-s:0.8rem;   /*16*/
  --font-size-xs:0.7rem;   /*14*/

  /* --warp-width:1240px;
  --warp-padding:15vw; */
}

@media screen and (max-width:1440px) {
  :root {
       --font-size-deflaut:18px;    
      /*--warp-width:1240px; */
  }
}

@media screen and (max-width:1200px) {
  :root {
      --font-size-deflaut:16px;
      --font-size-xl: 5vw;
  }
}

@media screen and (max-width:840px) {
  :root {
    --font-size-deflaut:18px;
  }
}

@media screen and (max-width:720px) {
  :root {
    --font-size-xl:2.5rem;
  }
}

@media screen and (max-width:480px) {
  :root {
      --font-size-deflaut:14px;
      --font-size-xl:2.2rem; 
  }
} 

@media screen and (max-height:500px) {
  :root {
      --font-size-deflaut:3vh;
      --font-size-xl:3rem; 
  }
} 

/********************
BASE
********************/
*{
box-sizing: border-box;
}

html{
  font-size: var(--font-size-deflaut);
  scroll-behavior: smooth;
}

body{
  width: 100%;
  overflow-x: hidden;
  font-family: var(--font-txt-style);
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  color: var(--font-basic-color);
}

abbr, article,
aside, blockquote,
body, command,
dd, details,
div, dl, dt, fieldset,
figcaption, figure, footer, form,
h1, h2, h3, h4, h5, h6, header, hgroup, html, 
input, li,
mark, meter,
nav,
ol, output,
pre, progress,
section, summary,
time,
ul {
  margin: 0;
  padding: 0;
  font-family: var(--font-ttl-style);
  font-weight: 300;
  line-height: 1;
  word-break: keep-all;
}
p{
  margin: 0;
  font-family: var(--font-txt-style);
  line-height: 1.3;
}
address, caption, cite, code,
em, figcaption, th {
  font-size: var(--font-size-deflaut);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}
fieldset,
iframe {
  border: none;
}
caption,
th {
  text-align: left;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
article, aside,
figcaption, figure, footer,
header, hgroup,
nav,
section {
  display: block;
}
.clear {
  clear: both;
}
img {
  border: 0;
}
a:active,
a:link,
a:visited {
  color: var(--font-basic-color);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  text-decoration: none;
}
a.block {
  display: block;
  cursor: pointer;
}
a.block em,
a.block span {
  cursor: pointer;
}
a.block:hover {
  text-decoration: none;
}
a.block:hover em,
a.block:hover span {
  text-decoration: underline;
}
b,
strong {
  font-weight: 600;
}
cite,
em,
i {
  font-style: italic;
}
sup,
sup a {
  color: #666;
}
sup a:hover {
  color: #08c;
  text-decoration: none;
}
abbr {
  border: 0;
}
h1, h2, h3, h4 {
  font-family: var(--font-ttl-style);
  font-weight: 700;
  margin: 0;
  color: var(--font-basic-color);
  letter-spacing: -1px;
}
h1 {
  font-size: var(--font-size-deflaut);
}
h2 {
  font-size: var(--font-size-xl);
}
h3 {
  font-size: var(--font-size-xl);
  font-weight: 700;
}
h4 {
  font-size: var(--font-size-ml);
}
h5 {
  font-size: 1rem;
}
ul {
  list-style: none outside;
}
ol {
  margin-bottom: 18px;
}
ul.circle,
ul.square {
  margin-left: 2em;
  margin-bottom: 18px;
}
ul.square {
  list-style: square outside;
}
ul.circle {
  list-style: circle outside;
}
ul ul.circle,
ul ul.square {
  margin-top: 4px;
  margin-bottom: 5px;
}
textarea {
  resize: none;
}
button{
  border: none;
  background: transparent;
  font-size: var(--font-size-deflaut);
  color: var(--font-basic-color);
  outline: none;
  cursor: pointer;
}
select{
  cursor: pointer;
}

.pc,
.pc-840,
.section.pc-840{
  display: block;
}

.mo,
.mo-840,
.section.mo-840{
  display: none;
}

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

  body{
   
  }

  body .pc{
      display: none;
  }

  body .mo{
      display: block;
  }
  .wrap {
    width: 100%;
    padding: 70px 10px 0;
  }
}

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

  body{
  
  }

  body .pc-840,
  .section.pc-840{
      display: none;
  }

  body .mo-840,
  .section.mo-840{
      display: block;
  }
  .wrap {
    width: 100%;
    padding: 70px 10px 0;
  }
}