@charset "utf-8";

/**
 * --------------------------------
 * COMMON CSS
 * --------------------------------
*/

/* fonts */
@font-face {
	font-family: 'GmarketSans';
	font-weight: 300;
	src: local('GmarketSans-Light'),
	url('../fonts/GmarketSans-Light.woff2') format('woff2'),
	url('../fonts/GmarketSans-Light.woff') format('woff');
}
@font-face {
	font-family: 'GmarketSans';
	font-weight: 500;
	src: local('GmarketSans-Medium')
	url('../fonts/GmarketSans-Medium.woff2') format('woff2'),
	url('../fonts/GmarketSans-Medium.woff') format('woff');
}
@font-face {
	font-family: 'GmarketSans';
	font-weight: 700;
	src: local('GmarketSans-Bold')
	url('../fonts/GmarketSans-Bold.woff2') format('woff2'),
	url('../fonts/GmarketSans-Bold.woff') format('woff');
}
/*
@font-face {
	font-family: 'GmarketSans';
  font-weight: 700;
	src: local('GmarketSans-Bold'),
	url('../fonts/GmarketSans-Bold.woff2') format('woff2'),
	url('../fonts/GmarketSans-Bold.woff') format('woff');
}
*/
@font-face {
	font-family: 'NotoSansKR';
	font-weight: 400;
	src: local('NotoSansKR-Regular'),
	url('../fonts/NotoSansKR-Regular.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Regular.woff') format('woff'),
	url('../fonts/NotoSansKR-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'NotoSansKR';
	font-weight: 700;
	src: local('NotoSansKRBold'),
	url('../fonts/NotoSansKR-Bold.woff2') format('woff2'),
	url('../fonts/NotoSansKR-Bold.woff') format('woff'),
	url('../fonts/NotoSansKR-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'AppleSDGothicNeo';
	font-weight: 700;
	src: local('AppleSDGothicNeoBold'),
	url('../fonts/AppleSDGothicNeo-Bold.woff2') format('woff2'),
	url('../fonts/AppleSDGothicNeo-Bold.woff') format('woff'),
	url('../fonts/AppleSDGothicNeo-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'WorkSans';
	font-weight: 400;
	src: local('WorkSansRegular'),
	url('../fonts/WorkSans-Regular.woff2') format('woff2'),
	url('../fonts/WorkSans-Regular.woff') format('woff'),
	url('../fonts/WorkSans-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'WorkSans';
	font-weight: 600;
	src: local('WorkSansSemiBold'),
	url('../fonts/WorkSans-SemiBold.woff2') format('woff2'),
	url('../fonts/WorkSans-SemiBold.woff') format('woff'),
	url('../fonts/WorkSans-SemiBold.ttf') format('truetype');
}
@font-face {
	font-family: 'WorkSans';
	font-weight: 700;
	src: local('WorkSansBold'),
	url('../fonts/WorkSans-Bold.woff') format('woff2'),
	url('../fonts/WorkSans-Bold.woff') format('woff'),
	url('../fonts/WorkSans-Bold.ttf') format('truetype');
}

/* base */
html {height: 100%;}
body {position: relative;height: 100%;font-family: "NotoSansKR", sans-serif, Malgungothic, "맑은고딕", Dotum, "돋움";font-weight: 400;font-size: 14px;line-height: 1;background-color: #EFF5FA;color: #444;letter-spacing:-0.025em;word-break: keep-all;word-wrap: break-word;-webkit-text-size-adjust: none;-webkit-overflow-scrolling: touch;}
h1,h2,h3,h4,h5,h6 {margin: 0;font-weight: 400;}
ul, ol {list-style: none;margin: 0;padding: 0;}
fieldset {margin: 0;padding: 0;border: none;}
textarea {resize: none;}
input, select, textarea {padding: 0;-webkit-border-radius: 0;}
button, input, textarea, select, tt, code, kbd, samp, pre {font-family: "SpoqaHanSans", sans-serif, Malgungothic, "맑은고딕", Dotum, "돋움";}
button {border: 0;cursor: pointer;background-color: transparent;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: transparent;}
a {text-decoration: none;color: #111;}
i, p, div, span, li {margin: 0;}
em {display: inline-block;font-style: normal;}
strong {font-weight: 700;}
table {table-layout: fixed;width: 100%;border-collapse: collapse;border-spacing: 0;}
th, td {padding: 0;}
dl, dd {margin: 0;}
figure {margin: 0;}
img {max-width: 100%;vertical-align: top;}
img[usemap], map area {outline: 0;}
caption, hr {display: none;}
address {font-style: normal;}
button:disabled {color: #aaa !important;border: 1px solid #e7e7e7 !important;background-color: #e7e7e7 !important;}
button:focus {outline: 0;}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="search"]:focus, input[type="email"]:focus, textarea:focus, select:focus {outline: 0;}
.hide {position: absolute !important;left:-9999px !important;text-align: left !important;}
* {box-sizing: border-box;}

/* skip */
.skip a {display: flex;position: absolute;z-index: 9999;top:-35px;padding: 10px;width: 100%;text-align: center;text-decoration: none;background: #fff;opacity: 0.9;}
.skip a:focus {top: 0;}

/* input&textarea */
input[type="text"], input[type="number"], input[type="password"], input[type="date"], input[type="search"], input[type="email"] {padding: 14px 12px 12px;width: 100%;height: 44px;font-size: 14px;color: #111;border: 1px solid #ccc;-webkit-appearance: none;}
input[type="text"]::-ms-clear, input[type="password"]::-ms-clear, input[type="password"]::-ms-reveal {display: none;}
input[type="number"] {-moz-appearance: textfield;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance: none;}
input[readonly], input:disabled, input:disabled::placeholder {color: #767676;-webkit-text-fill-color: #aaa;background: #f4f4f4;border-color: #ccc;font-size: 14px;font-weight: 400;}
input:required {background: #f4f4f4;}
input[type="text"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="search"]:focus, input[type="email"]:focus, textarea:focus {border-color: #111;}
input[type="text"]:read-only:focus, input[type="number"]:read-only:focus, input[type="password"]:read-only:focus, input[type="date"]:read-only:focus, input[type="search"]:read-only:focus, input[type="email"]:read-only:focus, textarea:read-only:focus {border-color: #ccc;}
input[type=file] {cursor: pointer;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 1000px #fff inset;}
input::placeholder {color: #aaa;font-size: 14px;font-weight: 400;}

textarea {padding: 11px;width: 100%;line-height: 1.5;font-size: 14px;border: 1px solid #D8E1E8;overflow-y: auto;-webkit-appearance: none;}
textarea::placeholder {color: #aaa;font-size: 14px;font-weight: 400;}
textarea:-ms-input-placeholder, input:-ms-input-placeholder {font-size: 14px;color: #aaa !important;}

/* checkbox & radio */
label {position: relative;margin: 0;padding: 0;}
input[type="radio"],
input[type="checkbox"] {position: absolute;top: 1px;left: 1px;width: 18px;height: 18px;opacity: 0;}
input[type="radio"] + span,
input[type="checkbox"] + span {position: relative;display: inline-block;padding-left: 27px;min-height: 20px;line-height: 20px;color: #5d5d5d;font-size: 14px;user-select: none;cursor: pointer;vertical-align: top;}
input[type="radio"] + span:before,
input[type="checkbox"] + span:before {content: "";position: absolute;top: 0;left: 0;display: inline-block;width: 20px;height: 20px;background: #fff url("../images/common/form.png") no-repeat 0 0;background-size: 150px;}

input[type="checkbox"] + span:before {background-position: 0 0;}
input[type="checkbox"]:checked + span {color: #111;}
input[type="checkbox"]:checked + span:before {background-position:-25px 0;}
input[type="checkbox"]:disabled + span {color: #aaa;}
input[type="checkbox"]:disabled + span:before {background-position:-50px 0;}
input[type="checkbox"]:disabled:checked + span:before {background-position:-75px 0;}

input[type="checkbox"].type2 + span {padding-left: 0;padding-right: 27px;min-height: 38px;line-height: 38px;font-size: 18px;}
input[type="checkbox"].type2 + span:before {top: 16px;left: auto;right: 0;background-position: 0 -50px;}
input[type="checkbox"].type2:checked + span:before {background-position:-25px -50px;}
input[type="checkbox"].type2:disabled + span:before {background-position:-50px -50px;}
input[type="checkbox"].type2:disabled:checked + span:before {background-position:-75px -50px;}

input[type="checkbox"].type3 {position: absolute;top: 0;left: -9999px;}
input[type="checkbox"].type3 + span {padding-left: 0;padding-right: 45px;line-height: 24px;font-size: 14px;}
input[type="checkbox"].type3 + span:before {top: 2px;left: auto;right: 0;width: 44px;height: 24px;background-color: #ccc;border-radius: 12px;background-image: none;transition: all .2s ease-in-out;}
input[type="checkbox"].type3 + span:after {content: "";position: absolute;top: 4px;right: 22px;width: 20px;height: 20px;background-color: #fff;border-radius: 10px;box-shadow: 0 0 3px rgba(0, 0, 0, .16);transition: all .2s ease-in-out;}
input[type="checkbox"].type3:checked + span:before {background-color: #311DCC;}
input[type="checkbox"].type3:checked + span:after {right: 2px;}

/* radio */
input[type="radio"] + span:before {background-position: 0 -25px;}
input[type="radio"]:checked + span {color: #111;}
input[type="radio"]:checked + span:before {background-position:-25px -25px;}
input[type="radio"]:disabled + span {color: #aaa;}
input[type="radio"]:disabled + span:before {background-position:-50px -25px;}
input[type="radio"]:disabled:checked + span:before {background-position:-75px -25px;}

input[type="radio"].btn {position: absolute;top: 0;left: -9999px;}
input[type="radio"].btn + span {display: block;padding: 13px 0 13px;line-height: 20px; color: #151515;font-size: 16px;font-weight: 700;border-left: 1px solid #D8E1E8;background-color: #fff;}
input[type="radio"].btn + span:before {display: none;}
input[type="radio"].btn:checked + span {color: #fff;border-color: #311DCC;background-color: #311DCC;}

/* select */
select {position: relative;padding: 9px 36px 9px 11px;width: 100%;height: 40px;color: #aaa;font-size: 14px;font-weight: 400;text-align: left;user-select: none;background: #fff url("../images/common/form_select.png") no-repeat 100% 0;background-size: 40px;-webkit-appearance: none;border: solid 1px #D8E1E8;}
select.active {color: #111;}
select:focus {border-color: #111;}
select:disabled {color: #aaa;background-color: #f4f4f4;border-color: #ccc;background-position: 100% -44px;}
select.active:disabled {color: #aaa;}

.select.type2 {position: relative;display: inline-block;width: auto;max-width: 100%;height: 18px;}
.select.type2 select {display: block;position: absolute;opacity: 0;width: 100%;height: 100%;z-index: 1;}
.select.type2 .sel_button {position: relative;display: inline-block;padding-right: 19px;max-width: 100%;height: auto;line-height: 18px;color: #151515;font-size: 16px;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.select.type2 .sel_button:after {content: '';position: absolute;top: 50%;right: 0;margin-top:-3px;width: 12px;height: 7px;background: url("../images/common/form.png") no-repeat -25px -75px;background-size: 150px;}
.select.type2.disabled .sel_button {color: #aaa;background-color: #f4f4f4;}

/* button */
.btns {position: relative;margin-top: 20px;display: flex;justify-content: center;text-align: center;font-size: 0;}
.btns > .btn {margin: 0 2px;width: 114px;}
.btns > .btn:first-child {margin-left: 0;}
.btns > .btn:last-child {margin-right: 0;}
.btnarea {margin-top: 30px;}
.btnarea > .btn {width: 100%;}

.btn {display: inline-block;position: relative;padding: 0 10px;height: 48px;line-height: 46px;text-align: center;color: #565656;font-size: 18px;font-weight: 400;background-color: #fff;border: 1px solid #111;vertical-align: top;}
.btn:active {box-shadow: inset 0 2px 3px rgba(0, 0, 0, .15);}
.btn.smaller {padding: 0 5px;height: 28px;line-height: 28px;font-size: 11px;}
.btn.small {padding: 0 5px;height: 40px;line-height: 38px;font-size: 15px;}
.btn.medium {padding: 0 20px;height: 56px;line-height: 54px;font-size: 19px;font-weight: 700;}
.btn.big {padding: 0 20px;height: 72px;line-height: 70px;font-size: 21px;font-weight: 700;}

.btn.blue {color: #311dcc;border-color: #311dcc;}
.btn.lightblue {color: #565656;border-color: #D8E1E8;}
.btn.lightgray {color: #565656;border-color: #A9A9A9;}
.btn.gray {color: #6e696a;border-color: #6e696a;}

.btn.fill {color: #fff;background-color: #111;}
.btn.blue.fill {color: #fff;background-color: #311dcc;}
.btn.lightblue.fill {color: #565656;background-color: #D8E1E8;}
.btn.lightgray.fill {color: #fff;background-color: #151515;border-color: #151515;}
.btn.gray.fill {color: #fff;background-color: #6e696a;border-color: #6e696a;}

.btn.radius {border-radius: 6px;}

.btn-more {display: block;width: 100%;line-height: 50px;color: #565656;font-size: 16px;letter-spacing: -.08em;}
.btn-more .icon-more {margin-top: 10px;background-position: -120px -90px;}

/* form */
.form-entry {position: relative;display: block;margin-top: 10px;font-size: 0;}
.form-entry > strong {display: block;padding: 0 5px;line-height: 33px;color: #767676;font-size: 14px;font-weight: 400;}
.form-entry > strong .need {color: #da291c;}
.form-entry .txt-placeholder {position: absolute;top: 47px;left: 11px;display: inline-block;padding: 0 5px;line-height: 20px;color: #aaa;font-size: 14px;transition: all .3s;}
.form-entry input:focus + .txt-placeholder, .form-entry .txt-placeholder.active {top: 23px;color: #444;font-size: 11px;background-color: #fff;}
.form-entry.delbtn input {padding-right: 44px;}
.form-entry .btn-del {display: none;position: absolute;bottom: 0;right: 0;width: 44px;height: 44px;text-align: left;text-indent:-9999px;}
.form-entry .btn-del:after {content: "";display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: url("../images/common/btn.png") no-repeat -30px -120px;background-size: 300px;}
.form-entry .btn-preview {position: absolute;bottom: 0;right: 0;width: 44px;height: 44px;text-align: left;text-indent:-9999px;}
.form-entry .btn-preview:after {content: "";display: block;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 30px;height: 30px;background: url("../images/common/btn.png") no-repeat -180px -60px;background-size: 300px;}
.form-entry .btn-preview.active:after {;background-position: -180px -30px;}

.form-inputbtn {background-color: #fff;border: 1px solid #D8E1E8;border-radius: 6px;overflow: hidden;font-size: 0;}
.form-inputbtn label {display: inline-block;width: 25%;text-align: center;}
.form-inputbtn label:first-of-type input[type="radio"].btn + span {border-left: 0;}

.form-period {}
.form-period input {width: calc(50% - 20px);border-color: #D8E1E8;border-radius: 6px;}
.form-period .bar {display: inline-block;width: 40px;font-size: 16px;text-align: center;}

.form-search .btn-del {bottom: 9px;right: 35px;}

/* popup */
.popup {position: fixed;top: 100%;left: 0;width: 100vw;height: 100%;background: rgba(0, 0, 0, .5);opacity: 0;z-index: 100;}
.popup > .inner {position: absolute;top: 80%;left: 50%;transform: translate(-50%, 0);padding: 0;min-width: 320px;max-width: 100vw;background: #fff;overflow: hidden;border-radius: 10px;transition: all .3s ease-in-out;}
.popup > .inner .btn-close {position: absolute;top: 0;left: 0;padding: 0 18px;width: 100%;height: 50px;line-height: 50px;color: #c9c9c9;font-size: 14px;text-align: right;background-color: transparent;z-index: 3;}
.popup .contents {padding: 0 10px 20px;max-height: 90vh;overflow: auto;}
.popup header {position: relative;padding: 0 20px;text-align: center;z-index: 1;}
.popup header h2 {line-height: 50px;color: #111;font-size: 20px;font-weight: 700;text-align: left;}
.popup main {position: relative;padding: 19px 0 0;max-width: 100%;text-align: center;z-index: 0;}
.popup main > p {line-height: 20px;color: #111;font-size: 14px;}
.popup main > p > small {display: block;margin-top: 5px;color: #767676;font-size: 12px;}
.popup main > p > small > em {display: block;font-size: 12px;}
.popup main .btnarea {margin-top: 25px;}
.popup main .btns .btn {width: calc(50% - 5px);}
.popup footer {position: absolute;bottom: 0;margin-top: 0;width: 100%;z-index: 2;}
.popup footer > .btn {padding: 0;width: 100%;border-radius: 0;}
.popup footer .btns {margin-top: 0;}
.popup footer .btns .btn {margin: 0;padding: 0;width: 50%;border-radius: 0;border-bottom: none;}
.popup footer .btns .btn:nth-of-type(1) {border-left: 0;border-right: 0;}
.popup footer .btns .btn:disabled {border-top-color: #a9a9a9 !important;border-left: 0 !important;border-right: 0 !important;}

.popup.active {top: 0;opacity: 1;}
.popup.active > .inner {top: 50%;left: 50%;transform: translate(-50%, -50%);}

.popup.bottom > .inner {top: auto;bottom: -100%;transform: translate(-50%, 0);width: 100%;border-bottom-left-radius: 0;border-bottom-right-radius: 0;}
.popup.bottom > .inner .btn-close {position: absolute;top: 0;left: auto;right: 10px;padding: 0;width: 74px;height: 74px;line-height: 74px;text-align: center;}
.popup.bottom header {position: relative;padding: 0 32px;}
.popup.bottom header h2 {line-height: 78px;}
.popup.bottom main {padding-top: 0;}

.popup.bottom.active > .inner {top: auto;bottom: 0;}

.popinline {position: absolute;bottom: 0;left: 30px;right: 30px;opacity: 1;z-index: 101;}
.popinline > .txt-alert {padding: 14px 7px;min-width: 260px;min-height: 50px;line-height: 24px;color: #fff;font-size: 16px;text-align: center;background-color: rgba(255, 122, 106, .95);border-radius: 10px;box-shadow: 4px 4px 6px rgba(0, 0, 0, .08);}
.popinline > .txt-alert:after {content: '';position: absolute;bottom: -8px;left: 50px;border-top: 8px solid rgba(255, 122, 106, .95);border-bottom: 8px solid none;border-right: 6px solid transparent;border-left: 6px solid  transparent;}

.popup.full {opacity: 0;}
.popup.full > .inner {left: 0;min-width: 100%;height: 100%;border-radius: 0; transform: none;background-color: #eff5fa;}
.popup.full > .inner > header {position: fixed;padding: 28px 52px 0 20px;width: 100%;background-color: #eff5fa;}
.popup.full > .inner > header h2 {line-height: 59px;color: #151515;font-size: 16px;font-weight: 400;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.popup.full > .inner > .btn-close {top: 33px;padding: 0 20px;color: #A9A9A9;font-size: 16px;letter-spacing: -0.08em;}
.popup.full .contents {padding: 80px 20px 20px;height: 100%;max-height: 100%;overflow: auto;text-align: left;}
.popup.full .contents main {text-align: left;}

/* icon */
.icon {display: inline-block;text-align: left;text-indent: -9999px;background: url("../images/common/icon.png") no-repeat 0 0;background-size: 300px;vertical-align: top;}

/* tabmenu */
.tab-menu {padding: 0 5px;height: 39px;border-bottom: 1px solid #e7e7e7;font-size: 0;}
.tab-menu a {position: relative;display: inline-block;margin: 0 15px;padding: 0;line-height: 37px;color: #767676;font-size: 14px;text-align: center;background-color: #fff;z-index: 0;}
.tab-menu a.active {color: #111;border-bottom: 2px solid #111;z-index: 1;}

.tab-menu.full {padding: 0;height: 50px;border-bottom: 2px solid #e7e7e7;}
.tab-menu.full a {margin: 0;width: 50%;line-height: 48px;font-size: 17px;}

.tab-contents {display: none;}
.tab-contents.active {display: block;}

/* list-accordion */
.list-accordion li {position: relative;}
.list-accordion li .accordion-ti {position: relative;display: block;padding: 15px 18px 15px 0;width: 100%;line-height: 22px;color: #111;font-size: 14px;text-align: left;border-bottom: 1px solid #eee;cursor: pointer;}
.list-accordion li .accordion-ti:after {content: '';position: absolute;top: 50%;right: 0;margin-top:-3px;width: 11px;height: 6px;background: url("../images/common/btn.png") no-repeat 0 -25px;background-size: 250px;transform: rotate(0);}
.list-accordion .active > .accordion-ti {font-weight: 700;}
.list-accordion .active > .accordion-ti:after {transform: rotate(-180deg);}
.list-accordion li > .accordion-ti.nonactive {cursor: default;}
.list-accordion li > .accordion-ti.nonactive:after {display: none;}
.list-accordion li .cont {display: none;position: relative;padding: 18px 0;line-height: 20px;color: #444;border-bottom: 1px solid #eee;}

/* table */
table th {padding: 5px;line-height: 20px;color: #444;font-size: 12px;font-weight: 400;background-color: #f4f4f4}
table td {padding: 5px;line-height: 20px;color: #767676;font-size: 12px;font-weight: 400;border: 1px solid #f4f4f4;}

.table table {border-top: 1px solid #ccc;}
.table thead th {padding: 10px 0;line-height: 20px;color: #444;font-size: 14px;font-weight: 400;background-color: #f4f4f4;text-align: center;vertical-align: top;}
.table tbody th {padding: 12px 10px;line-height: 20px;color: #444;font-size: 13px;font-weight: 400;text-align: center;border: 0;border-bottom: 1px solid #eee;}
.table tbody td {position: relative;padding: 12px 20px;line-height: 20px;color: #111;font-size: 14px;text-align: center;vertical-align: top;border: 0;border-bottom: 1px solid #eee;}
.table tbody td.txt-left {padding-left: 20px;text-align: left;}
.table tbody td.txt-right {padding-right: 20px;text-align: right;}

.table.list table thead th {color: #111;font-size: 14px;background-color: #fff;border-bottom: 1px solid #ddd;}
.table.list table tbody td {color: #767676;font-size: 13px;background-color: #fff;}

/* txt */
.infotxt strong {display: inline-block;color: #565656;font-size: 16px;font-weight: 700;}
.infotxt strong + ul {margin-top: 4px;margin-left: 11px;}
.infotxt ul {margin-top: 2px;margin-left: 15px;}
.infotxt li {padding-top: 3px;line-height: 20px;color: #565656;font-size: 15px;text-indent:-10px;}
.infotxt li:before {content: "";display: inline-block;margin: 9px 5px 0 0;width: 4px;height: 1px;background-color: #7c7e7f;border-radius: 3px;vertical-align: top;}
.infotxt li strong, .infotxt li em {text-indent: 0;}
.infotxt > small {display: block;margin-top: 10px;padding-left: 10px;line-height: 20px;color: #A9A9A9;font-size: 14px;text-indent: -10px;}
.inputmsg + .infotxt ul {margin-top: 0;}

.infotxt > .txt-need {position: relative;line-height: 30px;color: #565656;font-size: 16px;font-weight: 700;}
.infotxt > .txt-need:before {content: "";display: inline-block;width: 30px;height: 30px;background: url("../images/common/icon.png") no-repeat -270px 0;background-size: 300px;vertical-align: top;}

.inputmsg {display: block;margin: 8px 0 0 0;line-height: 18px;color: #ff2f20;font-size: 14px;font-weight: 400;text-align: left;}
div.positive + .inputmsg, label.positive + .inputmsg {color: #767676;}
div.error input, label.error input, div.error select, label.error select, div.error textarea, label.error textarea {border-color: #ff2f20;}

.nodata {padding: 60px 0;}
.nodata:before {content: "";margin: 0 auto;display: block;width: 60px;height: 60px;background: url("../images/common/icon.png") no-repeat 0 -180px;background-size: 300px;}
.nodata p {padding-top: 16px;line-height: 20px;text-align: center;color: #767676;font-size: 16px;font-weight: 400;}
.nodata p strong {display: inline-block;line-height: 26px;color: #111;font-size: 16px;font-weight: 700;}

/* loading */
.loading-area {display: none;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.15);z-index: 900;}
.loading-area .loading {position: fixed;left: 50%;top: 50%;margin: -19px 0 0 -24px;width: 48px;height: 38px;z-index: 999;}
.loading-area.cont {position: relative;margin: 50px auto;background-color: transparent;}
.loading-area.cont .loading {position: relative;}
.loading-area .loading .line {position: absolute;display: block;width: 6px;height: 38px;top: 50%;bottom: 50%;transform: translateY(-50%);opacity: 1;background-color: #4d5050;}
.loading-area .loading .line:first-child {left: 0;background-color: #5b85fe;animation: loading1 0.9s ease-in infinite;}
.loading-area .loading .line:nth-child(2) {left: 44%;background-color: #111f78;animation: loading2 0.9s ease-in infinite;}
.loading-area .loading .line:last-child {right: 0;background-color: #3e9439;animation: loading1 0.9s ease-out infinite;}
@keyframes loading1 {0% {height: 30%;opacity: 0.2;} 50% {height: 100%;opacity: 1;} 100% {height: 30%;opacity: 0.2;}}
@keyframes loading2 {0% {height: 100%;opacity: 1} 50% {height: 30%;opacity: 0.2;} 100% {height: 100%;opacity: 1;}}

/* box-type1 */
.box-type1 {position: relative;margin: 0 -20px;padding: 0 20px 24px;}
.box-type1:after {content: "";position: absolute;bottom: 0;left: 0;width: 100%;height: 7px;border-top: 1px solid #eee;background-color: #f4f4f4;}

/* layout */
body {position: relative;width: 100%;}
body.fixed {position: fixed;overscroll-behavior: contain;}

#wrap {position: relative;width: 100%;height: 100%;}

/* header */
#header {position: absolute;top: 0;margin: 0;padding: 0;width: 100%;min-height: 80px;z-index: 30;}
#header > button, #header > a {position: absolute;width: 80px;height: 80px;text-align: left;text-indent:-9999px;z-index: 1;}
#header > button:after, #header > a:after {content: "";position: absolute;top: 50%;left: 50%;width: 30px;height: 30px;transform: translate(-50%, -50%);background: url("../images/common/btn.png") no-repeat 0 0;background-size: 300px;}
#header > .btn-prev {top: 23px;left: 0;padding: 0;width: 50px;height: 70px;}
#header > .btn-prev:after {width: 30px;height: 30px;background-position: 0 -90px;}
#header > .btn-filter {top: 0;right: 0;}
#header > .btn-filter:after {background-position:-30px 0;}
#header > .btn-notice {top: 0;left: 0;}
#header > .btn-notice:after {width: 60px;height: 60px;background-position: 0 -30px;}
#header > .btn-notice em {position: absolute;top: 15px;left: 42px;display: block;padding: 0 5px;min-width: 18px;height: 18px;line-height: 18px;color: #fff;font-size: 10px;text-align: center;text-indent: 0;background-color: #e62108;border-radius: 18px;z-index: 1;}
#header > .btn-setting {top: 23px;right: 20px;width: 50px;height: 70px;}
#header > .btn-setting:after {width: 30px;height: 30px;background-position: -210px -30px;}
#header h2 {margin-top: 23px;padding: 0 42px;line-height: 70px;color: #151515;font-size: 16px;}

/* contents */
#contents {position: relative;margin: 0 20px;padding: 93px 0 20px;min-height: 100%;background-color: #EFF5FA;z-index: 10;}
#contents .bottom-btn {position: fixed;bottom: 0;left: 0;width: 100%;background-color: #EFF5FA;}
#contents .bottom-btn .btn-line {padding: 0 20px;color: #A9A9A9;font-size: 16px;}

.box {position: relative;margin-top: 20px;padding: 25px 20px;border: 1px solid #d8e1e8;background-color: #fff;border-radius: 10px;}

/* footer */
#footer {position: fixed;bottom: 0;left: 0;margin: 0;width: 100%;height: 68px;background-color: #eff5fa;z-index: 30;}
#footer nav {font-size: 0;box-shadow: 0 0 15px rgba(0, 0, 0, .1);}
#footer nav a {position: relative;display: inline-block;width: 33.3333%;height: 68px;text-align: left;text-indent: -9999px;}
#footer nav a:after {content: '';position: absolute;top: 50%;left: 50%;width:30px;height: 30px;transform: translate(-50%, -50%);background: url("../images/common/btn.png") no-repeat -150px 0;background-size: 300px;}
#footer nav a.btn-like:after {background-position: -210px 0;}
#footer nav a.btn-mypage:after {background-position: -270px 0;}
#footer nav a.active:after {background-position: -120px 0;}
#footer nav a.btn-like.active:after {background-position: -180px 0;}
#footer nav a.btn-mypage.active:after {background-position: -240px 0;}

/* width: 320 */
@media screen and (max-width: 320px){
}