html { font-size:62.5%; -webkit-text-size-adjust:none; }
/* html, body {  margin:0; padding:0; width:100%; height: calc(var(--vh, 1vh) * 100);  } */
html, body {  margin:0; padding:0; width:100%; height: 100dvh;  }
html, body {  background-color: #f2f2f2;  }

/* bgcolor 040919 0E1323 262628 0E1323*/
/* botcolor  424254 3a3a3c 1f273f 3a3c56 1c1e36 12182B*/
/* :root {
  --bgcolor: #000; 
  --botcolor:#12182B; 
  --usercolor:#f9e54d;
  --bfcolor:#9b9b9c;
  --logocolor:#F6EFC8;

  --rebgcolor:#12182B;
  --rfcolor:#95E1D3;
  --btncolor:#03A687;
  --linecolor:#787878;
  --afcolor:#6FBFE6;
  --qcolor:#2FA599;

  --tagcolor:#7ACDCB;

  --selcolor:#DFD334;
  --mntfgcolor:#00747A;
} */
:root {
  --BGcolor : #fff;
  --bgcolor: #000; 
  --botcolor:#12182B; 
  --usercolor:#f9e54d;
  --bfcolor:#9b9b9c;
  --logocolor:#F6EFC8;

  --rebgcolor:#12182B;
  --reBGcolor:#eee;
  --rfcolor:#0030FF;  /* 0030FF 95E1D3 */
  --btncolor:#03A687;
  --linecolor:#787878;
  --afcolor:#00abff; /* 6FBFE6 00abff */
  --qcolor:#2FA599;

  --tagcolor:#7ACDCB;

  --selcolor:#DFD334;
  --mntfgcolor:#00747A;
}

@font-face {
  font-family: 'GmarketSansBold';
  src: url('/fonts/GmarketSansTTFBold.ttf') format('truetype');
}
@font-face {
  font-family: 'GmarketSansLight';
  src: url('/fonts/GmarketSansTTFLight.ttf') format('truetype');
}
@font-face {
  font-family: 'GmarketSans';
  src: url('/fonts/GmarketSansTTFMedium.ttf') format('truetype');
}

button { cursor: pointer; }
button { font-family: Arial,"Apple SD Gothic Neo","Noto Sans Regular","맑은 고딕","malgun gothic","돋움","dotum",sans-serif;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: 0;
  cursor: pointer;
  background: none;
}
ul { list-style-type: none; padding-left: 0px; }
li { list-style:none; }

#container { font-family: 'Noto Sans KR'; font-weight: 500;}
#container { max-width:450px; margin:0 auto; font-size:1.3rem; letter-spacing: 0.05rem; }
#header { max-width:450px; margin:0 auto; }
#footer { max-width:450px; margin:0 auto; }

/* 공통 */
.flex { display:flex; }
.flex_column { display:flex; flex-direction: column; }
.flex_wrap { display:flex; flex-wrap: wrap; }
.flex_xcenter { display:flex; justify-content: center; }
.flex_center { display:flex; justify-content: center; align-items: center; }
.fixed_center { position: fixed; left: 50%; transform: translateX(-50%) translateY(0%) translateZ(0px); }
.fixed { position:fixed; }
.relative { position:relative; }
.absolute { position:absolute; }
.bottom { bottom:0; }
.displaynone { display:none !important; }
.visible_hidden { visibility: hidden !important; }
.common_img { width:100%; vertical-align: bottom;}
.rounded-full { border-radius: 9999px; }
.accent { color: #FFCD4A; font-weight:500; }
/* .accent { color: #F6EFC8; font-weight:bold; } */
.f_accent { color:var(--afcolor); font-weight: 900; }
.f_green { color:var(--mntfgcolor); }
.color_B { color:var(--rfcolor); }
.fw_900 { font-weight: 900;}
.f_bold { font-weight:500; }
.fw_300 { font-weight:300; }
.fw_100 { font-weight:100; }
.w100p { width:100%; }
.w80p-20 { width:calc(80% - 20rem); }
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}
.shadow { --tw-shadow: 0 .6rem 1.2rem 0 rgba(0,0,0,0.16); --tw-shadow-colored: 0 .6rem 1.2rem 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow); }


a { text-decoration: none; color:white; }
.scale1 {
  -webkit-transform: scale(1.1,1);
  -moz-transform: scale(1.1,1);
  -ms-transform: scale(1.1,1);
  -o-transform: scale(1.1,1);
  transform: scale(1.1,1);
}
.scale2 {
  -webkit-transform: scale(1.2,1);
  -moz-transform: scale(1.2,1);
  -ms-transform: scale(1.2,1);
  -o-transform: scale(1.2,1);
  transform: scale(1.2,1);
}

@media all and ( max-device-width: 420px) {
  html { font-size:60%; }
}

@media all and ( max-device-width: 400px) {
  html { font-size:58%; }
}

@media all and ( max-device-width: 380px) {
  html { font-size:56%; }
}

@media all and ( max-device-width: 360px) {
  html { font-size:54%; }
}

@media all and ( max-device-width: 340px) {
  html { font-size:52%; }
}

@media all and ( max-device-width: 320px) {
  html { font-size:50%; }
}

@media all and ( max-device-width: 280px) {
  html { font-size:44%; }
}