/**
 * common
 */
html, body {
	width: 100%;
	font-family: '나눔바른고딕',NanumBarunGothic,'나눔고딕',NanumGothic,'돋움',Dotum,'굴림',Gulim,Helvetica,sans-serif!important;
	font-size: 16px;
	margin: 0px;
	padding: 0px;
	color: #444;
	background-color: #F2F2F2;
	line-height: 170%;
	overflow-x: hidden;
}

.num {
	font-family: tahoma, "dotum", "돋움", sans-serif;
}

* {
	-webkit-text-size-adjust: none; /* ios - 화면 회전시 폰트확대 방지 */
	-webkit-tap-highlight-color: transparent; /* ios - 화면 터치시 색 투명 */
}

div, a, section, article, span, img, h1, h2, h3, h4, h5 ,h6, area {
	-webkit-user-select: none;
	-moz-user-select: none;
	outline: 0;
}

input, textarea, select {
	padding: 5px;
	margin: 0px;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	font-size : 13px;
	outline: 0;
}

input {
	height: 18px;
	-webkit-box-shadow: none;
	-webkit-appearance: none;
}

input[disabled] {
	-webkit-text-fill-color: #555; /* Override iOS / Android font color change */
	-webkit-opacity: 1; /* Override iOS opacity change affecting text & background color */
	color: #555;
}

select {
	height: 28px;
	padding: 0px;
	cursor: pointer;
}

button {
	outline: 0;
}

::-webkit-scrollbar {
	width: 0px;
}

::-webkit-scrollbar-thumb {
	background-color: #333;
}

/**
 * ul, li
 */
ul, li {
	padding: 0px;
	margin: 0px;
	list-style: none;
}

ul.inline li {
	display: inline-block;
}

ul.input-group {
	display: table;
}

ul.input-group li {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding-right: 8px;
}

ul.input-group li.checkbox,
ul.input-group li.radio {
	padding-top: 7px;
	padding-left: 10px;
	padding-right: 10px;
}

ul.input-group li.checkbox input[type=checkbox],
ul.input-group li.radio input[type=radio] {
	width: 15px;
	cursor: pointer;
}

/**
 * div-table
 */
div.table {
	display: table;
	width: 100%;
	height: 100%;
	max-width: 640px;
	margin: 0px auto;
}

div.table div.table-row {
	display: table-row;
	width: 100%;
	height: 100%;
}

div.table div.table-cell {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 4px;
}

/**
 * button
 */
div.btn-toggle button {
	position: relative;
	padding: 5px 10px;
	color: #444;
	cursor: pointer;
}

div.btn-toggle button.btn-1 {
	margin-right: -20px;
	padding-right: 25px;
	z-index: -1;
}

div.btn-toggle button.btn-2 {
	margin-left: -20px;
	padding-left: 25px;
	z-index: -1;
}

div.btn-toggle button.on:after {
	content: "모드";
}

div.btn-toggle button.on,
div.btn-toggle button.on:hover,
div.btn-toggle button.on:focus,
div.btn-toggle button.on:active:focus {
	margin: 0px;
	padding: 5px 15px;
	color: #30111F !important;
	background-color: #F7E20C !important;
	border-color: #F7E20C !important;
	font-weight: bold;
	z-index: 9;
}

/**
 * frame class
 */
.container {
	width: 100%;
	max-width: 640px;
	margin: auto;
}

.container-980 {
	width: 980px;
	margin: auto;
}

.container-1920 {
	width: 1920px;
	margin: auto;
}

.logo-in-the-black {
	position: absolute;
	top: 15px;
	right: 15px;
	color: #fff;
	font-size: 11px;
	text-align: right;
	line-height: 140%;
	cursor: pointer;
	z-index: 9999;
}

/* header */
/* section-menu-banner-top */
.header .bg-section-banner-top {
	background-color: #F3F3F3;
	height: 40px;
	text-align: center;
	padding-top: 10px;
}

.header .section-banner-top {
	position: relative;
}

.header .section-banner-top .btn-close-banner-top {
	position: absolute;
	top: 0px;
	right: 10px;
	font-size: 18px;
	cursor: pointer;
}

/* header */
.header {
	width: 100%;
	max-width: 640px;
	margin: auto;
	background-color: #fff;
	color: #333;
}

.header .row-logo {
	position: relative;
	font-size: 14px;
}

.header .row-logo i.fa-user-circle {
	font-size: 18px;
}

.header .row-logo .logo {
	font-size: 20px;
	padding: 10px;
}

.header .row-logo .logo img {
	width: 186.5px;
}


.header .row-logo .right {
	position: absolute;
	top: 10px;
	right: 10px;
}

.header .row-search {
	position: relative;
	padding: 10px;
	padding-top: 0px;
}

.header .row-search input {
	width: calc(100% - 10px);
	height: 32px;
	border: 1px solid #333;
	border-radius: 0px;
	font-size: 18px;
}

.header .row-search .btn-search {
	position: absolute;
	color: #333;
	top: 10px;
	right: 20px;
}

/* body */
.body {
	width: 100%;
	max-width: 640px;
	margin: auto;
}

.welcome-on-loading {
	font-size: 15px;
	padding: 50px;
	text-align: center;
}

.welcome-on-loading .logo {
	font-size: 17px;
	padding-bottom: 20px;
}

.welcome-on-loading .logo img {
	width: 236px;
}

/* footer */
.footer {
	width: 100%;
	max-width: 640px;
	margin: auto;
	background-color: #F2F2F2;
	text-align: center;
	border-top: 1px solid #E2E2E2;
	padding: 20px 0px;
	font-size: 13px;
}

.footer li {
	margin-left: 7px;
	margin-right: 7px;
	color: #555;
}

.footer li span {
	text-decoration: underline;
	cursor: pointer;
}

.footer img {
	padding-top: 10px;
	padding-bottom: 5px;
}

.footer .link-policy {
	padding-top: 10px;
}

.footer-sns {
	border: 0px;
}

/**
 * partial class
 */
[move-link],
[open-link],
.cursor-pointer {
	cursor: pointer !important;
}

.hidden {
	display: none !important;
}

.hidden-deving {
	display: none;
}

.paging {
	width: 100%;
	text-align: center;
	margin-top: 40px;
	margin-bottom: 50px;
}

/**
 * default search & table
 */
.table-row .table-cell {
	height: auto;
}

.table-row-header .table-cell {
	height: auto;
}

.table-row.row-not-read .table-cell {
	color: #EA3564;
	font-weight: bold;
}

.row-search {
	padding-bottom: 40px;
	text-align: center;
}

.row-search .search-input .title {
	padding-right: 10px;
}

.row-search .search-input input {
	width: 250px;
	height: 24px;
}

.row-search .search-input .btn {
	margin-top: -2px;
	margin-left: -50px;
	border: 0px;
	border-radius: 0px;
	box-shadow: 0px 0px 0px;
	color: #888;
}

.row-search .search-input .btn:hover {
	color: #1059FF;
	font-weight: bold;
}

.row-search .search-radio,
.row-search .search-checkbox {
	padding-top: 20px;
}

.row-search .search-radio li input {
	width: 15px;
	height: 13px;
	margin-left: 10px;
}

.row-search .search-checkbox li input {
	width: 15px;
	height: 12px;
	margin-left: 10px;
}

.row-list .notice {
	position: relative;
	padding-bottom: 10px;
}

.row-list .notice .right {
	position: absolute;
	right: 0px;
	bottom: 10px;
}

.row-list .wrap-paging {
	position: relative;
}

.row-list .wrap-paging .left {
	position: absolute;
	top: 0px;
	left: 0px;
}

.row-list .wrap-paging .right {
	position: absolute;
	top: 0px;
	right: 0px;
}

@media (max-width: 767px) { /* (mobile) */
}

@media (max-width: 1119px) { /* (mobile & tablet) */
}

@media (min-width: 768px) AND (max-width: 1119px) { /* (tablet & pc - small screen) */
}

/********************************************************************************
 * div-tooltip
 ********************************************************************************/
.div-tooltip {
	display: none;
	position: absolute;
	border: 1px solid #333;
	background-color: #161616;
	border-radius: 5px;
	padding: 5px 10px;
	color: #fff;
	font-size: 13px;
}

/********************************************************************************
 * div-modal (DM) 공통부분
 ********************************************************************************/
.div-modal-detail-blocker,
.div-modal-usual-blocker,
.div-modal-top-blocker {
	position: fixed;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	overflow: auto;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.94);
	-ms-background-color: transparent;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E6000000, endColorstr=#E6000000);
	text-align: center;
	overflow-x: hidden !important; /* overlay scrolling issue fixed on IOS */
	overflow-y: scroll !important; /* overlay scrolling issue fixed on IOS */
	-webkit-overflow-scrolling: touch !important; /* overlay scrolling issue fixed on IOS */
}

.div-modal-detail-blocker {
	padding: 0px;
	padding-top: 20px;
	background-color: rgba(0, 0, 0, 1.0);
}

.div-modal-usual-blocker {
	padding: 60px;
	background-color: rgba(0, 0, 0, 0.8);
}

.div-modal-top-blocker {
	padding: 60px;
	background-color: rgba(0, 0, 0, 0.8);
}

.div-modal-detail-blocker:before,
.div-modal-usual-blocker:before,
.div-modal-top-blocker:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}

.div-modal-detail,
.div-modal-usual,
.div-modal-top {
	display: inline-block;
	vertical-align: middle;
	text-align: left;
	position: relative;
	width: 400px;
	background: #fff;
	padding: 0px;
	border-radius: 0px;
	-webkit-transform: translateZ(0) !important; /* overlay scrolling issue fixed on IOS */
	-moz-box-shadow: 0 0 10px #000;
	-o-box-shadow: 0 0 10px #000;
	-ms-box-shadow: 0 0 10px #000;
	box-shadow: 0px 0px 0px !important;
	cursor: default;
}

.div-modal-detail-blocker { z-index: 9999; }
.div-modal-usual-blocker { z-index: 19999; }
.div-modal-top-blocker { z-index: 19999; }

.div-modal-detail { z-index: 10000; }
.div-modal-usual { z-index: 20000; }
.div-modal-top { z-index: 30000; }

#loading {
 width: 100%;
 height: 100%;
 top: 0px;
 left: 0px;
 position: fixed;
 display: block;
 opacity: 0.7;
 background-color: #fff;
 z-index: 99;
 text-align: center; }

#loading-image {
 position: absolute;
 top: 50%;
 left: 35%;
 z-index: 100; }


/**
 * (responsive)
 */
@media (min-width: 1px) { /* (only for not IE8) */
}

@media (max-width: 991px) { /* (mobile & tablet) */
	.div-modal-detail {
		position: absolute !important;
		top: 0px;
		left: 0px;
	}
}

@media (min-width: 768px) AND (max-width: 991px) { /* (tablet) */
}

@media (max-width: 767px) { /* (mobile) */
	.div-modal-usual-blocker,
	.div-modal-top-blocker {
		padding: 50px 10px;
	}
}

/********************************************************************************
 * div-sly
 ********************************************************************************/
.div-sly-wrap {
	margin: 0px;
	padding: 0px;
}

.div-sly-frame {
	overflow: hidden;
}

.div-sly-frame ul {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 50px;
}

.div-sly-frame ul li {
	float: left;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	text-align: center;
	cursor: pointer;
}

/********************************************************************************
 * photoswipe
 ********************************************************************************/
.pswp {
	z-index: 40000 !important;
}

.pswp-gallery {
	width: 100%;
	float: left;
}

.pswp-gallery img {
	width: 100%;
	height: auto;
}

.pswp-gallery div.wrap-item {
	display: block;
	float: left;
	margin: 0 5px 5px 0;
	width: 150px;
}

.pswp-gallery div.caption {
	/*display: none;*/
}

/**
 * partial class
 */
[move-link], .cursor-pointer {
	cursor: pointer !important;
}

.hidden {
	display: none !important;
}

.btn-init {
	padding-top: 40px;
}

button.btn-init {
	font-size: 16px;
	margin-top: 40px;
	padding: 10px 20px;
}

.paging,
.paging-loading,
.paging-empty,
.product-empty {
 	width: 100%;
 	text-align: center;
	margin-top: 40px;
	margin-bottom: 50px;
 }

.paging,
.paging-empty,
.product-empty {
	display: none;
}

.paging-loading img {
	position: absolute;
	margin-top: -5px;
	margin-left: 10px;
}