/* ÇÏ´Ü ¸Þ´º°¡ ³»¿ë °¡¸®Áö ¾Ê°Ô: (ÇÊ¿ä ½Ã) 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: #4a4a4a;
  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:#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;
	overflow: hidden;
}

.img_banner{
	position: relative;
	height: calc(380*100vw/935);
	background-size: 100%;
	margin:5 0 8 0;
}

.img-cover {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index:1;
}

.box_text {
	position: absolute;
	top:52%;
	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:60%;
	font-size:13pt;
	font-weight:bold;
	line-height:20px;
}

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

.text_smile_button {
	position: absolute;
	top: 78%;
	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: 22px;
	font-size: 13px;
	line-height: 1;
	border-radius: 10px;
	border: 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}