@charset "utf-8";

/* 초기화 */
html {overflow-y:scroll}

body {
	margin:0;
	padding:0;
	/*
	font-size:0.75em;
	font-family:dotum;
	*/
}

/* 타입어헤드 css */
.typehead_co_type {
	margin: 5px 20px 5px 20px;
	padding: 3px 0;
	border-bottom: 1px solid #ccc;
}

/* 설명 http://kpollen.kr/skin/shop/basic/style.css */
.explain {
	margin:5px;
	color:#b6b6b6;
	font-size:0.75em;
	cursor:default;
	transition: all 0.2s;
}
.explain:hover {
	color:black;
}

.color_01, .color_02, .color_03, .color_04, .color_05 {
	-webkit-animation: blink 0.8s linear 4;
}

.blink {
	/* -webkit-animation: blink 0.8s linear 2; */
	-webkit-animation: blink 0.8s linear infinite;
}

@-webkit-keyframes blink {
	/*

	0% { background-color: red; }
	33% { background-color: yellow; }
	66% { background-color: blue; }
	100% { background-color: green; }
	*/

	/* from { background-color: red;}
	to {background-color: green;}  */
	from { opacity: 0.3; }
	to { opacity: 1.0; }
}

/** 블링크 텍스트 https://stackoverflow.com/questions/16344354/how-to-make-blinking-flashing-text-with-css-3 **/
.blink_me {
	animation: blinker 1s linear infinite;
}

@keyframes blinker {
	50% {
		opacity: 0.5;
	}
}


/** https://codepen.io/iPawan/pen/BKkCo **/
/* Flash class and keyframe animation */
.flashit{
	/* color:#f2f; */
	-webkit-animation: flash linear 1s infinite;
	animation: flash linear 1s infinite;
}
@-webkit-keyframes flash {
	0% { opacity: 1; }
	50% { opacity: .1; }
	100% { opacity: 1; }
}
@keyframes flash {
	0% { opacity: 1; }
	50% { opacity: .1; }
	100% { opacity: 1; }
}
/* Pulse class and keyframe animation */
.pulseit{
	-webkit-animation: pulse linear .5s infinite;
	animation: pulse linear .5s infinite;
}
@-webkit-keyframes pulse {
	0% { width:200px; }
	50% { width:340px; }
	100% { width:200px; }
}
@keyframes pulse {
	0% { width:200px; }
	50% { width:340px; }
	100% { width:200px; }
}






/* .carousel-inner > item, .carousel-inner > .item > img, .carousel-inner > .item > a > img { */
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
	width: 70%;
	margin: auto;
}
.vertical-align {
	display: flex;
	flex-direction: row;
}

.nobr {
	white-space:nowrap;
}

.nosel {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
	cursor: default; /* 커서기본 */
}

.no_margin {
	margin:0 auto;
	padding:0px;
	border:0px;
	border-collapse: collapse;
	border-spacing:0px;
}

/* http://mwultong.blogspot.com/2007/02/html-css-links-without-underline.html */
/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }
/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }

/* 이모티콘 지원 : https://blog.farrant.me/adding-emoji-support-to-any-website/ */
img.emoji {
	/* Override any img styles to ensure Emojis are displayed inline */
	margin: 0px !important;
	display: inline !important;
}

/*
툴팁 가로크기 css
http://stackoverflow.com/questions/14596743/how-do-you-change-the-width-and-height-of-twitter-bootstraps-tooltips
http://stackoverflow.com/questions/18517483/displaying-long-text-in-bootstrap-tooltip
*/
.tooltip-inner {
	/*
	min-width: 100px;
	max-width: 100%;
	max-width: none; // 100% 랑 같은 효과
	white-space: nowrap; // 개행금지
	word-break: break-all; // 글이 길면 개행
	*/
	word-break: break-all;
}


/**
업르드중 표시
**/
div.upload_progress {
	position: fixed;
	z-index: 1051; /* modal 보다 높은값 modal 은 1050 임 */
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;

	background-color: #fff;
	color: #000;

	display: table;
	opacity: 0.7;
}

div.upload_progress_text {
	color: #000;
	text-transform: uppercase;
	letter-spacing: 0.4em;
	font-size: 1.15em;
	font-weight: bold;
	text-align: center;
	display: table-cell;
	vertical-align: middle;
}


/* 입금확인 페이지 */
.mt_15 {
	margin-top: 1.5rem;
}
.mt_05 {
	margin-top: .5rem;
}
.mb_15 {
	margin-bottom: 1.5rem;
}
.mb_05 { /* sw_alert 에서 버튼 사용시 bottom 마진 */
	margin-bottom: .5rem;
}
.mb_025 {
	margin-bottom: 0.25rem;
}
.ml_025 {
	margin-left: 0.25rem;
}
.mr_025 {
	margin-right: 0.25rem;
}
.mr_05 {
	margin-right: 0.5rem;
}
.m_05 {
	margin: .5rem;
}

/* sweet alert 커스텀 */
.sweet-alert .lead {
	white-space: pre-wrap;
}
.sweet-alert {
	/* width:auto; 상품닉네임(장준)이 긴 경우에 개행이 되서 이쁘게 안나오는 문제 */
	min-width:478px;
	max-width:50vw; /* sweet-alert 자체가 전체를 덮고 있으므로 50% 해도 무방하다 */
}
@media all and (max-width: 767px) {
	.sweet-alert {
		min-width:100px;
		max-width:100vw;
	}
}

/* 좌측 메뉴 상품 별명 */
button.p_nick {
	position: absolute;
	top: 1rem;
	right: 2rem;
}





.note-editor.note-frame.panel {
	display: -ms-grid;
	display: inline-grid;
	max-width:815px;
	width:100%;
}

.img-upload-section > #preview_wrap {
	position: absolute;
	top: 5px;
	/* left: 6px; */
	background-color: #E5E5E5;
	padding: 5px;
	outline: 1px solid rgba(000, 000, 000, 0.25);
	width: calc(400px - 4px);
	max-height: calc(400px - 4px);
	min-height: calc(90px - 4px);
	display: flex;
	align-items: center;
	justify-content: center;
}

.img-upload-section img {
	max-width: calc(400px - 3px);
	max-height: calc(400px - 3px);
}

.img-upload-section {
	padding: 5px;
	box-sizing: border-box;
	border: 1px;
	position: relative;
	/* display: flex; */
	display: flow-root;
	align-items: center;
	justify-content: center;
}

i.fa.fa-close {
	position: absolute;
	top: -9px;
	right: -8px;
	background-color: white;
	border-radius: 50%;
	padding: 1px 2px 1px 2px;
	border: 2px solid;
	font-size: 0.75rem;
}








/**
	swal close 버튼 추가
	https://stackoverflow.com/questions/46447402/how-to-add-close-button-in-sweetalert-pop-up
**/
.swal-button--confirm {
	background-color: #dd6b55; /* confirmButtonColor: "#DD6B55", */
}

.sweet-alert .swal2-close {
	position: absolute;
	top: 0;
	right: 0;
	width: 1.2em;
	height: 1.2em;
	transition: color 0.1s ease-out;
	border: none;
	background: transparent;
	/* color: #cccccc; */
	/* color:deepskyblue; */
	/* font-family: serif; */
	color:black;
	font-size: 2.2em;
	cursor: pointer;
	font-weight: 900;
	text-shadow: 0 1px 0 #fff;
}

.sweet-alert .swal2-close:hover {
	color: #f27474;
}

/**
스크롤 되게 추가
**/
.sweet-alert {
	overflow-y:auto;
	max-height:96vh;
	margin-top:-48vh;
}

/*
가로사이트 큰게 customClass 추가
*/
.swal-wide {
	width:44vw !important;
	left:36vw;
	text-align: left;
}
.swal-medium {
	width:920px !important;
	left:42vw;
}


/**
중간 취소선
**/
.middle_line, .middle-line {
	text-decoration: line-through;
	color: #888;
}

.crimson {
	color:crimson;
}
.lime {
	color:lime;
}
.red {
	color:crimson;
}
.blue {
	color:cornflowerblue;
}

/*
https://stackoverflow.com/questions/36460538/scrolling-issues-with-multiple-bootstrap-modals
모달 2개 띄울때 처음꺼 모달의 스크롤 안되는 현상 방지 자스에서 해결해본다

.modal {
	overflow: auto !important;
}
*/

.innerTable {
	border-radius: 4px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border: 1px solid #ccc;
	margin:0 auto !important;
	width:100%;
	float:left;
	max-height:300px;
	max-width:78.3rem;
	min-height: 25rem;
	overflow: auto;
}

.innerTable > table {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	border-top:none;
	border-left:none;
	border-right:none;
}

.innerTable > table > thead > tr > th:last-child, .innerTable > table > tbody > tr > td:last-child {
	border-right: none;
}

/*
https://codepen.io/nxworld/pen/ZYNOBZ
https://webdir.tistory.com/406
*/
.img-thumbnail:hover:not([alt]):not([title]), .img-rounded:hover:not([alt]):not([title]) {
	transition: all .2s ease-in-out;
	transform: scale(1.2);
	background-color: rgba(3, 3, 3, 0.3);
	/* opacity:.3; */
}

/*
세로 말줄임 : https://favprw.tistory.com/18
*/
.ellipsis_vertical {
	overflow: hidden;
	width:100%;
	text-overflow: ellipsis;
	word-wrap: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 5; /* ellipsis line */
	-webkit-box-orient: vertical;

	/* webkit 엔진을 사용하지 않는 브라우저를 위한 속성. */
	/* height = line-height * line = 1.2em * 3 = 3.6em  */
	line-height: 1.2em;
	/*
	webkit-line-clamp x line-height 값
	webkit-line-clamp 3 일때 3.6
	webkit-line-clamp 5 일때 6.0
	height: 3.6em; */
	max-height: 6.0em;
	height:100%;
}

.ellipsis_horizontal {
	/*
	최대가로크기가 정해져 있어야 제대로 됨
	max-width:400px;
	padding:0 1rem 1rem 1rem;
	*/
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}


/*
@import "deviers.scss"
*/