@charset "utf-8";

@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:400;
	src:local(※), url('../../fonts/SFProDisplayRegular.woff') format('woff'), url('../../fonts/SFProDisplayRegular.otf') format('opentype');
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:500;
	src:local(※), url('../../fonts/SFProDisplayMedium.woff') format('woff'), url('../../fonts/SFProDisplayMedium.otf') format('opentype');
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:600;
	src:local(※), url('../../fonts/SFProDisplayBold.woff') format('woff'), url('../../fonts/SFProDisplayBold.otf') format('opentype');
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:700;
	src:local(※), url('../../fonts/SFProDisplayHeavy.woff') format('woff'), url('../../fonts/SFProDisplayHeavy.otf') format('opentype');
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:900;
	src:local(※), url('../../fonts/SFProDisplayBlack.woff') format('woff'), url('../../fonts/SFProDisplayHeavy.otf') format('opentype');
}

/* 국문 폰트 */
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:400;
	src:local(※), url('../../fonts/AppleSDGothicNeoR.woff') format('woff'), url('../../fonts/AppleSDGothicNeoR.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:500;
	src:local(※), url('../../fonts/AppleSDGothicNeoB.woff') format('woff'), url('../../fonts/AppleSDGothicNeoB.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:600;
	src:local(※), url('../../fonts/AppleSDGothicNeoEB.woff') format('woff'), url('../../fonts/AppleSDGothicNeoEB.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}
@font-face {
	font-family:'AppleSDGothicNeo';
	font-weight:700;
	src:local(※), url('../../fonts/AppleSDGothicNeoH.woff') format('woff'), url('../../fonts/AppleSDGothicNeoH.otf') format('opentype');
	unicode-range: U+AC00-D7A3;
}

/* 전역 공통 */
* {-webkit-text-size-adjust:none;}
body,h1,h2,h3,h4,h5,h6,input,textarea,select,button,th,td {margin:0; font-family:'AppleSDGothicNeo','Arial','sans-serif'; font-size:14px; 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 #333; background-color:#333; 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;}
.share-layer dl dd ul li a.kakao {background-image:url(../images/sns-kakao.png);}
.share-layer dl dd ul li a.facebook {background-image:url(../images/sns-facebook.png);}
.share-layer dl dd ul li a.twitter {background-image:url(../images/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:#333; 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:'·';}

/* MO/PC */
.pc:not(body) {display:none !important;}

@media all and (min-width:760px) {
	.pc:not(body) {display:block !important;}
	.mo:not(body) {display:none !important;}
	
	.common-layer iframe {
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%, -50%);
		width:600px;
		height:800px;
		border-radius:5px;
	}
	.common-layer.upload iframe {width:300px; height:200px;}
	.common-layer.addr iframe,
	.common-layer.change-delivery iframe {width:450px; height:520px;}
}