@charset "utf-8";

@font-face {
	font-family:'NanumSquare';
	font-weight:400;
	src:local(※), url('../../fonts/NanumSquareR.woff2') format('woff2'), url('../../fonts/NanumSquareR.woff') format('woff'), url('../../fonts/NanumSquareR.otf') format('opentype');
}
@font-face {
	font-family:'NanumSquare';
	font-weight:500;
	src:local(※), url('../../fonts/NanumSquareB.woff2') format('woff2'), url('../../fonts/NanumSquareB.woff') format('woff'), url('../../fonts/NanumSquareB.otf') format('opentype');
}
@font-face {
	font-family:'NanumSquare';
	font-weight:600;
	src:local(※), url('../../fonts/NanumSquareB.woff2') format('woff2'), url('../../fonts/NanumSquareB.woff') format('woff'), url('../../fonts/NanumSquareB.otf') format('opentype');
}
@font-face {
	font-family:'NanumSquare';
	font-weight:700;
	src:local(※), url('../../fonts/NanumSquareEB.woff2') format('woff2'), url('../../fonts/NanumSquareEB.woff') format('woff'), url('../../fonts/NanumSquareEB.otf') format('opentype');
}
@font-face {
	font-family:'NanumSquare';
	font-weight:900;
	src:local(※), url('../../fonts/NanumSquareEB.woff2') format('woff2'), url('../../fonts/NanumSquareEB.woff') format('woff'), url('../../fonts/NanumSquareEB.otf') format('opentype');
}

/* 전역 공통 */
* {-webkit-text-size-adjust:none; -webkit-tap-highlight-color:transparent;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,button,th,td {margin:0; font-family:'NanumSquare','Arial','sans-serif'; font-size:13px; font-weight:400; line-height:20px; color:#333;}
div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,select,button,p,blockquote,table,embed,object {margin:0; padding:0;}
ul,ol,li,dl,dt,dd {list-style:none;}
img {border:0;}
a {color:#333; text-decoration:none;}
a:hover {color:#333;}
caption,legend {display:none;}
fieldset,legend {width:100%; border-style:none;}
table {border-spacing:0; border-collapse:collapse;}
strong {font-weight:600;}
em {font-style:normal;}
input,select,textarea,button,label {vertical-align:middle; background:transparent; box-sizing:border-box;}
button {border-style:none; cursor:pointer; -webkit-appearance:none;}
input[type="text"], input[type="password"],
input[type="email"], input[type="number"] {width:100%; height:40px; padding:0 14px; line-height:40px; border:1px solid #dcdee0; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; overflow-y:hidden; -webkit-appearance:none;}
input[type="checkbox"], input[type="radio"] {width:20px; height:20px; border-style:none; background:transparent;}
input[type="submit"], input[type="button"] {border-style:none; cursor:pointer; -webkit-appearance:none;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[disabled="disabled"],
input[readonly="readonly"] {background-color:#f0f2f4;}
input::placeholder, textarea::placeholder {color:#bbb;}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#bbb;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#bbb;}
input::-ms-clear, input::-ms-reveal {display:none; width:0; height:0;}
input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {display:none;}
select {
	width:100%;
	height:40px;
	padding:0 14px;
	padding-right:12px;
	line-height:40px;
	font-size:15px;
	border:1px solid #dcdee0;
	background:url(../images/icon-select-dropdown.png) no-repeat right center;
	background-position:calc(100% - 14px) center;
	background-position:-moz-calc(100% - 14px) center;
	background-position:-webkit-calc(100% - 14px) center;
	border-radius:3px;
	appearance:none;
	-webkit-appearance:none;
	-moz-appearance:none;
}
select::-ms-expand {display:none;}
select.placeholder {color:#bbb;}
select[disabled="disabled"] {background-color:#f0f2f4;}
select option {color:#222;}
select option[value=""] {color:#bbb;}
textarea {width:100%; height:120px; padding:14px; line-height:20px; font-size:15px; border:1px solid #dcdee0; border-radius:3px; overflow:auto; -webkit-appearance:none;}
textarea[disabled="disabled"],
textarea[readonly="readonly"] {background-color:#f0f2f4;}
input:focus, select:focus, textarea:focus {outline:none;}
input.datepicker {background:url(../images/icon-calendar.png) no-repeat; background-position:calc(100% - 12px) center;}

/* 라디오 */
.radio {position:relative; display:inline-block; vertical-align:middle;}
.radio input[type="radio"] {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.radio input[type="radio"] + label {
	display:inline-block;
	position:relative;
	padding-left:25px;
	letter-spacing:-0.5px;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}
.radio input[type="radio"] + label:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:20px;
	height:20px;
	background:#fff url(../images/icon-radio-n.svg) no-repeat center center;
	background-size:100%;
	border-radius:10px;
}
.radio input[type="radio"]:checked + label:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	background:url(../images/icon-radio-s.svg) no-repeat center center;
	background-size:100%;
}
.radio input[type="radio"]:disabled + label:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	background:url(../images/icon-radio-dim.svg) no-repeat center center;
	background-size:100%;
}
.radio input[type="radio"] + label em {font-style:normal; color:#a0a0a0;}

/* 체크 */
.checkbox {position:relative; display:inline-block; vertical-align:middle;}
.checkbox input[type="checkbox"] {
	position:absolute;
	width:1px;
	height:1px;
	padding:0;
	margin:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	border:0;
}
.checkbox input[type="checkbox"] + label {
	display:inline-block;
	position:relative;
	padding-left:25px;
	letter-spacing:-0.5px;
	cursor:pointer;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
}
.checkbox input[type="checkbox"] + label:before {
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:20px;
	height:20px;
	background:url(../images/icon-checkbox-n.svg) no-repeat center center;
	background-size:100%;
}
.checkbox input[type="checkbox"]:checked + label:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	background:url(../images/icon-checkbox-s.svg) no-repeat center center;
	background-size:100%;
}
.checkbox input[type="checkbox"]:disabled + label:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	width:20px;
	height:20px;
	background:url(../images/icon-checkbox-dim.svg) no-repeat center center;
	background-size:100%;
}

/* 로딩 */
.common-loading {position:fixed; left:0; top:0; width:100%; height:100%; background-color:#333; background-color:rgba(255, 255, 255, 0.5); z-index:999;}
.common-loading em {
	position:relative;
	display:block;
	width:64px;
	height:64px;
	margin:0 auto;
	margin-top:calc((100vh - 64px) / 2);
	margin-top:-moz-calc((100vh - 64px) / 2);
	margin-top:-webkit-calc((100vh - 64px) / 2);
	font-size:0;
	line-height:0;
	background:url(../../cmmn/images/common-loading.gif) no-repeat center center;
	background-size:32px 32px;
	border-radius:3px;
}

/* 레이어 */
.common-layer {position:fixed; left:0; top:0; width:100%; height:100%; background-color:#fff; background-color:rgba(0, 0, 0, 0.5); z-index:999;}
.common-layer.hide {display:none;}
.common-layer iframe {
	display:block;
	width:100%;
	height:100%;
	padding:0;
	border-style:none;
	background-color:#fff;
	box-sizing:border-box;
}

/* 메시지 */
.common-message {position:fixed; left:0; top:0; width:100%; height:100%; background-color:#fff; background-color:rgba(0, 0, 0, 0.5); z-index:999;}
.common-message dl {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:calc(100% - 32px);
	width:-moz-calc(100% - 32px);
	width:-webkit-calc(100% - 32px);
	max-width:350px;
	background-color:#fff;
	box-sizing:border-box;
	border-radius:3px;
}
.common-message dl dt {display:none;}
.common-message dl dd {padding:16px; padding-top:32px; font-size:16px; line-height:24px; text-align:center; margin-inline-start:0; word-break:keep-all;}
.common-message dl dd strong {display:block; margin-bottom:10px; font-size:18px; line-height:25px;}
.common-message dl dd .input {width:100%; height:26px; padding:3px; box-sizing:border-box; border-radius:2px;}
.common-message dl dd .button {display:flex; margin-top:32px; text-align:center;}
.common-message dl dd .button button {flex:auto; height:50px; margin-left:8px; font-size:16px; font-weight:500; color:#fff; border:1px solid #e60012; background-color:#e60012; border-radius:3px; cursor:pointer;}
.common-message dl dd .button button:first-child {margin-left:0;}
.common-message dl dd .button button.cancel:not(.same) {color:#333; border-color:#c8cacc; background-color:#fff;}

/* 공유 */
.share-layer {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#333; background-color:rgba(0, 0, 0, 0.5); z-index:999;}
.share-layer.on {display:block;}
.share-layer dl {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:calc(100% - 32px);
	width:-moz-calc(100% - 32px);
	width:-webkit-calc(100% - 32px);
	max-width:350px;
	background-color:#fff;
	box-sizing:border-box;
	border-radius:3px;
}
.share-layer dl dt {padding:16px 0; margin-bottom:16px; font-size:18px; font-weight:600; line-height:24px; text-align:center;}
.share-layer dl dd {padding:0 16px; padding-bottom:32px; font-size:15px; line-height:20px; text-align:center; border-top-style:none; border-radius:4px;}
.share-layer dl dd ul {display:flex; justify-content:center; margin:0 auto;}
.share-layer dl dd ul li {display:inline-flex; align-items:center; width:50px; height:50px; margin-left:16px;}
.share-layer dl dd ul li:first-child {margin-left:0;}
.share-layer dl dd ul li a {display:block; width:100%; height:100%; font-size:0; line-height:0; background-repeat:no-repeat; background-position:center center; background-size:contain; border-radius:10px;}
.share-layer dl dd ul li a.kakao {background-image:url(../images/addon/sns-kakao.png);}
.share-layer dl dd ul li a.facebook {background-image:url(../images/addon/sns-facebook.png);}
.share-layer dl dd ul li a.twitter {background-image:url(../images/addon/sns-twitter.png);}
.share-layer dl dd .copy {width:182px; margin:0 auto; margin-top:14px; box-sizing:border-box;}
.share-layer dl dd .copy button {width:100%; height:46px; font-size:15px; font-weight:600; color:#fff; border-style:none; background-color:#e60012; border-radius:3px;}
.share-layer dl dd .close {position:absolute; right:8px; top:16px; width:24px; height:24px; font-size:0; line-height:0; border-style:none; background:url(../images/icon-popup-close.svg) no-repeat center center;}
.share-layer dl dd.toast {display:none;}
.share-layer.complete dl {background-color:rgba(255, 255, 255, 0.9);}
.share-layer.complete dl dt,
.share-layer.complete dl dd {display:none;}
.share-layer.complete dl dd.toast {display:block; padding:16px 0;}

/* 이미지 첨부 */
.image-list {margin-top:16px;}
.image-list > ul:after {clear:both; display:block; content:'';}
.image-list > ul > li {position:relative; float:left; width:76px; height:76px; margin-left:8px;}
.image-list > ul > li:first-child {margin-left:0;}
.image-list > ul > li > img,
.image-list > ul > li > video {width:100%; height:100%; object-fit:cover;}
.image-list > ul > li > a {display:block; width:100%; height:100%;}
.image-list > ul > li > a.insert {font-size:0; line-height:0; background:#333 url(../images/add.png) no-repeat center center; background-color:rgba(0, 0, 0, 0.7);}
.image-list > ul > li > a.delete {position:absolute; right:0; top:0; width:24px; height:24px; font-size:0; line-height:0; background:#333 url(../images/x.png) no-repeat center center; background-color:rgba(0, 0, 0, 0.9);}

/* 알림 */
.alarm-list {margin-top:16px; font-size:13px; line-height:15px; color:#a0a0a0;}
.alarm-list > ul > li {position:relative; padding-left:8px; margin-top:6px;}
.alarm-list > ul > li:first-child {margin-top:0;}
.alarm-list > ul > li:before {position:absolute; left:0; top:0; content:'·';}

/* PC */
@media all and (min-width:1180px) {
	/*.common-loading,*/
	.common-layer,
	.common-message:not(.full),
	.share-layer {width:580px; left:calc((100% - 1180px) / 2 + 600px);}
}

/* 외부연계 */
.sync-layer {display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#333; background-color:rgba(0, 0, 0, 0.5); z-index:999;}
.sync-layer.on {display:block;}
.sync-layer > dl {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%, -50%);
	width:calc(100% - 32px);
	width:-moz-calc(100% - 32px);
	width:-webkit-calc(100% - 32px);
	max-width:450px;
	max-height:500px;
	background-color:#fff;
	box-sizing:border-box;
	border-radius:3px;
	padding:16px;
}
.sync-layer > dl > dt {margin-bottom:16px; font-size:18px; font-weight:600; line-height:24px;}
.sync-layer > dl > dd.detail {max-height:300px; overflow-y:auto;}
.sync-layer > dl > dd.detail > div {padding:16px; margin:8px 0; background-color:#fbf2fa;}
.sync-layer > dl > dd.detail > div > ul > li {letter-spacing:-1px; word-break:keep-all;}
.sync-layer > dl > dd.detail .close {position:absolute; right:8px; top:16px; width:24px; height:24px; font-size:0; line-height:0; border-style:none; background:url(../images/icon-popup-close.svg) no-repeat center center;}
.sync-layer > dl > dd.button {margin-top:16px;}
.sync-layer > dl > dd.button > button {width:100%; height:46px; font-size:15px; font-weight:600; color:#fff; border-style:none; background-color:#e60012; border-radius:3px;}

@media all and (min-width:1180px) {
	.sync-layer {width:580px; left:calc((100% - 1180px) / 2 + 600px);}
	.sync-layer > dl > dd.detail::-webkit-scrollbar {width:4px; height:4px;}
	.sync-layer > dl > dd.detail::-webkit-scrollbar-track {background-color:#ccc;}
	.sync-layer > dl > dd.detail::-webkit-scrollbar-thumb {background:#666;}
	.sync-layer > dl > dd.detail::-webkit-scrollbar-thumb:hover {background:#333;}
	.sync-layer > dl > dd.detail::-webkit-scrollbar-thumb:active {background:#000;}
	.sync-layer > dl > dd.detail::-webkit-scrollbar-button {display:none;}
}