/* ÇÏ´Ü ¸Þ´º°¡ ³»¿ë °¡¸®Áö ¾Ê°Ô: (ÇÊ¿ä ½Ã) body¿¡ ¿©¹é */
html, body { 
	padding-bottom: 0px; 
	font-family: "Noto Sans KR";
	font-weight: 400;
	font-style: normal;
	letter-spacing:-1px;
}


/* ÇÏ´Ü °íÁ¤ ¹Ù */
.bottom-nav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: 62px;
  background: #fff;
  border-top: 1px solid #e6e6e6;
  z-index: 9999;

  display: -webkit-box;      /* ±¸Çü ¾Èµå·ÎÀÌµå ´ëºñ */
  display: -ms-flexbox;
  display: flex;

  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;

  /* ±âº»Àº º¸ÀÓ */
  -webkit-transform: translateY(0);
  transform: translateY(0);
  transition: transform .25s ease;
}

/* ¼û±è »óÅÂ(¾Æ·¡·Î ³»·Á°¡¸ç »ç¶óÁü) */
.bottom-nav.is-hidden{
  -webkit-transform: translateY(100%);
  transform: translateY(100%);
}

.bottom-nav__item{
  -webkit-box-flex: 1;
  -ms-flex: 1 1 25%;
  flex: 1 1 25%;
  text-align: center;
  text-decoration: none !important;

  color: #8a8a8a;
  padding: 6px 0;
  line-height: 1.1;
}

.bottom-nav__icon{
  display: block;
  font-size: 20px;
  margin: 0 auto 4px;
  color: #8a8a8a;
}

.bottom-nav__label{
  display: block;
  font-size: 11px;
  color: #8a8a8a;
}

/* È°¼º »óÅÂ(¿øÇÏ¸é »ö¸¸ »ì¦ ÁøÇÏ°Ô) */
.bottom-nav__item.is-active .bottom-nav__icon,
.bottom-nav__item.is-active .bottom-nav__label{
  color: #FF5340;
  font-weight: 600;
}

/* ±âº»(¸ð¹ÙÀÏ Æ÷ÇÔ): 100% */
.app-shell { width: 100%; }
.app-screen { width: 100%; min-height: 100vh; background: #fff; }

/* PC¿¡¼­¸¸: Áß¾Ó Æø, À§/¾Æ·¡ µü ºÙ°Ô */
@media (min-width: 768px) {

  html, body { height: 100%; }
  body {
    background: #f3f3f3;  /* ¹Ù±ù ¹è°æ */
    margin: 0;
    overflow: hidden;     /* ¹Ù±ù(body) ½ºÅ©·Ñ Á¦°Å */
  }

  .app-shell {
    height: 100vh;        /* È­¸é ³ôÀÌ ²Ë */
    display: flex;
    justify-content: center; /* °¡·Î Áß¾Ó */
    align-items: stretch;    /* ¼¼·Î´Â ´Ã·Á¼­ À§/¾Æ·¡ µü ºÙ°Ô */
    padding: 0;              /* À§¾Æ·¡ ¿©¹é Á¦°Å */
    overflow: hidden;
  }

  .app-screen {
    position: relative;
    width: 450px;        /* ¿øÇÏ´Â Æø */
    height: 100vh;       /* À§/¾Æ·¡ µü ºÙÀ½ */
    overflow-y: auto;    /* ¾È¿¡¼­¸¸ ½ºÅ©·Ñ */
    background: #fff;

    /* Æù ´À³¦ Á¦°Å */
    border: 0;
    border-radius: 0;
    box-shadow: none;

    /* Çϴܹ٠°ø°£ */
    padding-bottom: 62px;

    -webkit-overflow-scrolling: touch;
  }

  /* ÇÏ´Ü ¸Þ´º´Â app-screen ¾È ¹Ù´Ú¿¡ ºÙÀÓ */
  .bottom-nav {
    position: fixed;          /* absolute -> fixed */
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;

    width: 430px;             /* app-screen Æø°ú µ¿ÀÏ */
    height: 62px;

    background: #fff;
    border-top: 1px solid #e6e6e6;
    z-index: 9999;
  }
}

.card_box {
	font-size:9pt;
	padding:5px 10px 5px 10px;
	font-weight:normal;
	background-color:#00AA69; /*#019E93*/
	text-align:left;
	border-radius:6px;
	margin:10px;
	overflow: hidden;
	letter-spacing:-0.5px;
}

.navbar-tight { margin-bottom: 0 !important; }

.box_outline {
	position: relative;
	margin:10px;
	border-radius:6px;
	height: 120px;
	overflow: hidden;
}

.img_banner {
	height:120px;
	text-align:right;
}

.box_text {
	position: absolute;
	top:54%;
	left:10px;
	transform: translate(0%, -45%);   
	letter-spacing:-1px;
	color: black;
	z-index: 2;
	text-align: left;
}

.box_smile_text {
	position: absolute;
	top:45%;
	left:10px;
	transform: translate(0%, -45%);   
	letter-spacing:-1px;
	color: black;
	z-index: 2;
	text-align: left;
}

.text_valid {
	position: absolute;
	top:5%;
	left:10px;
	transform: translate(0%, -25%);   
	color: black;
	z-index: 2;
	text-align: left;
	font-size:7pt;
	line-height:40px;
	font-weight:normal;
}

.text_title {
	font-size:14pt;
	font-weight:bold;
	line-height:35px;
}

.text_smile_title {
	width:65%;
	font-size:12pt;
	font-weight:bold;
	line-height:20px;
}

.text_sub {
	font-size:10pt;
	margin-left:2px;
	margin-top: 5px;
	line-height:18px;
	font-weight:normal;
}

.text_sub_smile {
	font-size:9pt;
	margin-left:2px;
	line-height:20px;
	font-weight:normal;
}

.text_smile_button {
	position: absolute;
	top: 79%;
	left: 10px;
	transform: translate(0%, -25%);   
	z-index: 2;
	font-weight: normal;
}

.ad_sub_text {
	padding:5 10 5 10px;
	letter-spacing:-1px;
	font-weight:normal;
	line-height:15px;
	font-size:9pt;
	color: gray;
	text-align:center;
	background-color:#EDEEF0;
	font-family: "Noto Sans KR";
}

.ad_box {
	background-color:#EDEEF0;
	padding:15px;
	text-align:center;
	color:#666;
	font-weight:bold;
}


.title-bar{
  position: relative;
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 10px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;

  font-family: "Noto Sans KR", sans-serif;
}

.title-bar__logo img {
  width: 95px;
  display: block;
}

.title-bar__text{
  margin-left: 8px;
  margin-top: 9px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  letter-spacing: -0.5px;
  white-space: nowrap;
}


a.card {color:white; text-decoration:none;}
a.card:link{color:white; text-decoration:none;}
a.card:visited{color:white; text-decoration:none;}
a.card:hover{color:white; text-decoration:none;}
a.card:active{color:white; text-decoration:none;}


/* ½º¸¶ÀÏ Å×½ºÅÍ ¹öÆ°*/
.smile-button {
    width: 170px;
    height: 20px;
    font-size: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
    border-radius: 10px;
    border: 0;
    padding: 0;

}

/* dim background */
#popup-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* popup layer */
.popup-layer {
    position: relative;
    width: 75%;
    max-width: 480px;
	transform: translateY(-6%);
}

/* PC ÀÌ»ó (ÅÂºí¸´ Æ÷ÇÔ) */
@media (min-width: 768px) {
    .popup-layer {
        width: 360px;          /* ¡ç ÇÙ½É */
        max-width: 360px;
        transform: translateY(0);  /* PC¿¡¼­´Â À§·Î ¾È ¶ç¿öµµ ¾ÈÁ¤Àû */
    }
}

/* close button */
.popup-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #000;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
}

/* image & button */
.image-container {
    position: relative;
}

.image-container img {
    width: 100%;
    display: block;
}

.btn-area {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 22px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 6px;
}

.no-scroll {
    overflow: hidden;
    height: 100%;
}