html {
	-webkit-user-select: none;
	min-height:100%;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
	-webkit-focus-ring-color: rgba(0, 0, 0, 0) !important;
	outline: none !important;
}
:before, :after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	min-height:100%;
	max-height:100%;
	margin:0;
	padding-left:0;
	padding-right:0;
	padding-bottom:;
	padding-top:110px;   /* header.header.height + header.toolbar.height */
	line-height: 150%;
	font-size:16px;
	font-family:San-Serif;
	background-color:#fff;
	overflow:hidden;
	position:relative;
	color:black;
}

a, a:link, a:visited, a:hover, a:active {
	color:black;
	text-decoration:none;
}

body.no-header {
	padding-top:0;
}

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #aaa;
  font-size:90%;
}

img {
	vertical-align:middle;
	height:auto;
}

table {
	width:100%;
	border-collapse: collapse;
	padding:0;
	border-spacing:0;
	table-layout:fixed;
}

.clearfix { clear:both }
.clearfix:before,
.clearfix:after {
	display: table;
	content: " ";
}
.clearfix:after{ clear: both; }

.hide, .hidden {
	display:none;
}


.show-only-debug { display:none; }


main.content {
	overflow:hidden;
}

.content-page {
	padding: 7px 14px;
	display:block;
	background-color:white;

	transition-property: display, opacity, background-color;
    transition-duration: 0.2s;
}

.content-wrapper {
	min-height: calc(100% - 125px);
	max-height: calc(100% - 125px);
	height: calc(100% - 125px);
	min-height: calc(100vh - 125px);
	max-height: calc(100vh - 125px);
	height: calc(100vh - 125px);
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

body header.header {
	display:none;
}
body main.has-header header.header {
	display:block;
}
body header.toolbar {
	display:none;
}
body main.has-toolbar header.toolbar {
	display:block;
}
body nav {
	display:none;
}
body main.has-nav nav.active {
	display:block;
}


.content-page.end-shadow {
	border-top:1px solid #aaa;
	height:8px;
	padding:0!important;
	background-color:#f0f0f0;
}
.no-padding {
	padding:0!important;
}
.no-top-padding {
	padding-top:0!important;
}
.no-bottom-padding {
	padding-bottom:0!important;
}
.no-border {
	border:none!important;
}

.text-right {
	text-align: right;
}
.text-left {
	text-align: left;
}
.text-center {
	text-align: center;
}




nav {
	position:fixed;
	bottom:0;
	width:100%;
	height:70px;
	background-color: white;
	border-top:1px solid #ccc;
}

nav * {
	transition-property: all;
    transition-duration: 0.5s;
}

nav > table {
	width:100%;
	height:100%;
}

nav .nav-item {
	width:25%;
	text-align:center;
	vertical-align:middle;
}

nav .nav-item img.tab-on,
nav .nav-item img.tab-off {
	width:28px;
	height:28px;
}

nav .nav-item img.tab-on {
	display:none;
}
nav .nav-item img.tab-off {
	display:inline-block;
}
nav .nav-item.active img.tab-off {
	display:none;
}
nav .nav-item.active img.tab-on {
	display:inline-block;
}

nav .nav-item .tab-title {
	color:#aaa;
	display:block;
	margin-top:3px;
	font-size:85%;
}
nav .nav-item.active .tab-title {
	color:#000;
}




@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}
@keyframes spin-r {
    from {transform:rotate(0deg);}
    to {transform:rotate(-360deg);}
}
.spin {
	animation:spin 1.5s infinite linear;
}
.spin-r {
	animation:spin-r 1.5s infinite linear;
}

.transition {
	transition-property: all;
	transition-duration: 1s;
}



/**************** 타이틀바 관련 *****************************/
header.header {
	color:black;
	height:55px;    /* body 의 padding-top과 동일해야 함 */
	font-size:18px;
	position:fixed;
	top:0; left:0;
	width:100%;
	display:table;
	border-bottom: 1px solid #eee;
}
header.header table {
	background-color:white;
	width:100%;
	height:54px;
	table-layout:fixed;
}
header.header table tbody tr td {
	text-align:center;
	vertical-align:middle;
}

header.header table tbody tr td.title {
	font-weight:bold;
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
header.header table tbody tr td.title img {
	max-height:30px;
	height:30px;
}

header.header table tbody tr td.left,
header.header table tbody tr td.right {
	width:40px;
}

header.header .fa {
	font-size:23px;
}
header.header .fa-angle-left {
	font-size:32px;
}


/* S-MEDIUM SCREEN :: width > 480px */
@media only screen and (min-device-width: 481px) {
    .main__post__list .main__post {
        font-size: .72rem;
    }
    .main__post__list li {
        width: 33.3%;
    }
}

/**************** 상단 툴바 *********************************/
header.toolbar {
	color:white;
	height:55px;    /* body 의 padding-top과 동일해야 함 */
	position:fixed;
	top:55px; left:0;
	width:100%;
	background-color:#ffc4c4;
	border-bottom: 1px solid #e2acac;
	font-size:105%;
}

header.toolbar .toolbar-btn.active {
	color:#da5a73;
}

:root {
  --swiper-navigation-size: 12px;
  --swiper-navigation-color: #da5a73;
}
header.toolbar.swiper-container .swiper-slide {
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	width:auto;
	position:relative;
}
header.toolbar.swiper-container .swiper-slide:first-child {
	padding-left:30px;
}
header.toolbar.swiper-container .swiper-slide:last-child {
	padding-right:30px;
}

header.toolbar.swiper-container .swiper-slide .badge {
	position: absolute;
	right: -13px;
	font-size: 11px;
	background-color: #ff0000a6;
	border-radius: 10px;
	top: 12px;
	padding: 0 3px;
	height: 20px;
	width: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color:white;
}

.menu2_badge .badge {

	font-size: 11px;
	background-color: #ff0000a6;
	border-radius: 10px;
	top: 12px;
	padding: 3 3px;
	height: 20px;
	width: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color:white;
}

/*********************** 공통 *******************************/
.list_container .list_items table:hover {
	/* background-color:#f9f9f9; renew2 */
}

.list_container .template {
	display:none;
}

.no-items {
	text-align: center;
	padding-top:20px;
	padding-bottom:20px;
	color:#999;
	display:none;
}
.loading {
    text-align:center;
    color:#999;
	padding-top:20px;
	padding-bottom:20px;
    display:none;
}
.more-items {
    text-align:center;
    color:#999;
	padding-top:20px;
	padding-bottom:20px;
    display:none;
}

/******************** 모양관련 (버튼)   **************************/
button.btn {
	border:none;
	border-radius:50px;
	padding:7px 20px;
	color:white;
	font-size:16px;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffbaa9+0,f38494+100 */
	background: #ffbaa9; /* Old browsers */
	background: -moz-linear-gradient(left,  #ffbaa9 0%, #f38494 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #ffbaa9 0%,#f38494 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #ffbaa9 0%,#f38494 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbaa9', endColorstr='#f38494',GradientType=1 ); /* IE6-9 */
}
button.btn.disabled,
button.btn:disabled {
	background-color: #d2d4d6;
	border:none;
}

/***************** 해상도별 스타일 ****************************/
@media screen and (min-resolution: 1dppx) {   /* MDPI */
}

@media screen and (min-resolution: 1.5dppx) {   /* HDPI */
}

@media screen and (min-resolution: 2dppx) {     /* XHDPI */
}

@media screen and (min-resolution: 2.6dppx) {     /* XXHDPI */
}

@media screen and (min-resolution: 3.5dppx) {     /* XXXHDPI */
}


.content-page.end-shadow {
	padding:0!important;
}

.content-page > h3 {
	margin-top:10px;
	font-size:140%;
}

.content-page .content-title {
	margin:8px 0;
}
.content-page .content-title img {
	height: 20px;
}
.content-page.float-bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
}

.popup-page {
    z-index: 9999;
    background: white;
    width: 80%;
    height: auto;
    margin-left: 10%;
    margin-right: 10%;
    position: fixed;
	display:none;
}
.popup-page .popup-close {
    float: right;
    color: gray;
    font-size: 200%;
    width: 30px;
    height: 30px;
    top: 15px;
    right: 15px;
    position: relative;
    background-image:url("../images/close.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.popup-page .popup-title{
    padding: 0;
    font-weight: bold;
    margin-top: 10px;
    text-align: center;
    font-size: 130%;
    display: inline-block;
    width: 100%;
}
.popup-page .popup-content{
	padding:10px 10px 20px 10px;
	text-align:center;
}
.popup-page .popup-content .popup-description {
	display:block;
	margin-bottom:15px;
	color:#666;
}
.popup-page .popup-content .popup-description p {
    margin:0;
    margin-bottom:3px;
}
.popup-page .popup-content .popup-description p:last-child {
    margin-bottom:0;
}

.popup-page .popup-bottom {
	text-align:center;
	height:50px;
}

.popup-page button{
    padding: 0 20px;
    font-size:100%;
    height:50px;
}

.popup-shade-mask {
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
    opacity: 0.5;
    z-index: 9998;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: #000;
}
.popup-page .preference-fields .preference-field-label { margin-bottom:5px; }
.popup-page .preference-fields .preference-field-input { margin-bottom:20px; }
.popup-page .preference-fields .preference-field-input:last-child { margin-bottom:0; }
.popup-page .preference-fields .preference-field-input input { width:100%; border:0px; border-bottom:1px solid #aaa}



/* https://developers.google.com/web/fundamentals/native-hardware/fullscreen?hl=ko */
@media (display-mode: fullscreen) {
}

/*사용자가 독립 모드로 애플리케이션을 실행하면 display-mode 미디어 쿼리는 standalone이 됩니다.*/
@media (display-mode: standalone) {
}