@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 9999; width: 100%; height: 100%;}
.layer-bg {position:relative; padding:30px 10px; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.7); overflow-y: auto;}

.layer-bg::-webkit-scrollbar {width:0; height:0; background:transparent;}
.layer-bg::-webkit-scrollbar-track {background:transparent;}
.layer-bg::-webkit-scrollbar-thumb {background:transparent;}

.layer-wrap {position: relative; animation: popup_style 0.4s ease;}
@keyframes popup_style {
	0% {transform: translateY(-500%);}			
	100% {transform: translateY(0%);}		
}

/* layer-close */
.layer-close {position: absolute; right: 12px; top: 12px; z-index: 1; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; border: none; cursor: pointer;}
.layer-close:before, 
.layer-close:after {content: ''; position: absolute; left: 0; right: 0; top: 10px; bottom: 0; margin:0 auto; width: 2px; height: calc(100% - 20px); background:#ffd989; transform: rotate(45deg); transition: 0.5s;}
.layer-close:after {transform: rotate(-45deg);}

/* layer-con */
.layer-con {position: relative;}

@media (hover: hover) and (pointer: fine) {
	/* layer-close */
	.layer-close:hover:before {transform: rotate(135deg); background: #dc431f;}
	.layer-close:hover:after {transform: rotate(-135deg); background: #dc431f;}
}

/****************************************************************************************************************************************
팝업 공통
*****************************************************************************************************************************************/
.popup-wrap {position: relative; display: flex; flex-direction: column; align-items: center; min-width: 980px; width: 100%;}

/* popup-hd */
.popup-hd {position:relative; margin:0; padding: 0; width: 100%; height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(#ae9c48, #251b0d, #251b0d); border-radius: 15px;}
.popup-tit {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center;}
.popup-tit > h3 {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center; font-size: 24px; color:#fff;}
.popup-tit > p {position:relative; margin:0 auto; padding: 0; width: 100%; text-align: center; font-size: 10px; letter-spacing: 5px; color:#ffd989;}

/* popup-body */
.popup-body {position:relative; margin: 5px 0 0 0; padding:30px 40px; width: 100%; background: #251b0d; border-radius: 10px;}

/* popup-list */
ul.popup-list {position: relative; margin:0 auto 40px auto; padding:0; width: 100%; text-align: center;}
ul.popup-list > li {position: relative; margin:20px auto;}
ul.popup-list > li > label {display:block; position: relative; margin: 0 auto 6px auto; padding: 0 0 0 5px; width: 100%; text-align: left; font-size: 12px; font-weight: 500; color: #ebdec3;}
ul.popup-list > li > input {position: relative; margin:0; padding: 0 15px; width: 100%; height: 44px; color: #000; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); border: none; border-radius: 8px;}
ul.popup-list > li > input::placeholder {color:#3d3d3d;}

/* btns-money */
.btns-money {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; justify-content: center; align-items: center; gap: 5px;}
.btns-money > button {position: relative; margin: 0 auto; padding: 0; width: calc(100% / 6 - 5px); height: 38px; font-size: 12px; color: #fff; background: #625747; border: none; border-radius: 5px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);}
.btns-money > button.btn-edit {background: #a34141;}

/* popup-btns */
.popup-btns {position: relative; margin:0; padding:0 30px; width: 100%; display: flex; justify-content: center; align-items: center; gap:15px;}
.popup-btns > button {margin:0 auto; padding:15px 0; width: 170px; text-align: center;}

/* tb-wrap */
.tb-wrap {position: relative; margin:0; padding:0; width: 100%;}
.tb-list {position: relative; margin:0; padding:0; width: 100%;}
.tb-list th {margin:0 auto; padding:15px 5px; text-align: center; font-size: 12px; color:#fff; background: rgba(0, 0, 0, 0.25);}
.tb-list td {margin:0 auto; padding:5px 5px; text-align: center; font-size: 12px; color:#fff; background: rgba(255, 255, 255, 0.08); border-bottom: solid 1px rgba(0, 0, 0, 0.25); border-top: solid 1px rgba(255, 255, 255, 0.05);}
.tb-list td.list-number {width:15%; text-align: center;}
.tb-list td.list-con {text-align: left;}
.tb-list td.list-con > a {display: block; line-height: 38px; text-align: left; font-weight: 500; color: #ccccf0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.tb-list td.list-date {width:15%; text-align: center;}

.view-list {display: none;}
.view-list td {margin:0; padding:20px 20px 20px 50px; width: 100%; text-align: left;}
.view-list td > p {margin:0 auto; padding:0; width: 100%; text-align: left; font-size: 20px; color:#fff;}

@media (hover: hover) and (pointer: fine) {
	/* btns-money */
	.btns-money > button:hover {background: #917853;}
	.btns-money > button.btn-edit:hover {background: #ff4d4d;}

	/* tb-wrap */
	.tb-list tbody tr:hover td {background: rgba(255, 255, 255, 0.05);}
	.tb-list tbody tr.view-list:hover td {background: rgba(255, 255, 255, 0.08);}
}

/****************************************************************************************************************************************
intro 시작
*****************************************************************************************************************************************/
.intro-wrap {min-width: 600px;}
ul.intro-list {position: relative; margin:0 auto; padding:0; width: 100%; text-align: center;}
ul.intro-list > li {position: relative; margin:20px 0;}
ul.intro-list > li > input {position: relative; margin:0; padding: 0 15px; width: 100%; height: 44px; color: #000; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); border: none; border-radius: 8px;}
ul.intro-list > li > input::placeholder {color:#3d3d3d;}

/* 회원가입 */
ul.intro-list > li > select {position: relative; margin: 0; padding:0 15px; width:100%; height:44px; line-height: 40px; font-size:14px; font-weight: 500; color:#000; background:#fff; border:none; border-radius: 8px; transition: 0.3s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);}
ul.intro-list > li > select:invalid {color:#3d3d3d;}

ul.intro-list > li.check-list {display: flex; justify-content: space-between;}
ul.intro-list > li.check-list > .input-2 {width:70%;}
ul.intro-list > li.check-list > .btn_check {margin:0 auto; padding:0; width:28%; height:44px; line-height: 40px; font-size:14px; font-weight: 500; color:#fff; background: #976f37; border: none; border-radius: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.5);}

/* intro-btns */
.intro-btns {position: relative; margin:0; padding:0 30px; width: 100%; display: flex; justify-content: center; align-items: center; gap:15px;}
.intro-btns > button {margin:0 auto; padding:15px 0; width: calc(100% / 2 - 15px); text-align: center;}

@media (hover: hover) and (pointer: fine) { 
    ul.intro-list > li.check-list > .btn_check:hover {background:#917853}
}

/****************************************************************************************************************************************
미디어쿼리문 시작
*****************************************************************************************************************************************/
@media (max-width: 1040px) {
	/* popup-wrap */
	.layer-wrap {width: 100%;}
	.popup-wrap {min-width: 100%;}
}/* 미디어쿼리문 끝 */

@media (max-width: 767px) {
	/* popup-hd */
	.popup-hd {height: 85px;}

	/* tb-wrap */
	.tb-list td.list-con > a {width: 200px;}
	.tb-list td.list-number {width: 10%;}
	.tb-list td.list-date {min-width: 75px; font-size: 12px;}
}/* 미디어쿼리문 끝 */

@media (max-width: 639px) {
	/* 팝업공통*/	
	.popup-body {padding:20px 15px 40px 20px;}

	.btns-money {flex-wrap: wrap;}
	.btns-money > button {width: calc(100% / 3 - 5px);}

	/* tb-wrap */
	.tb-wrap {padding-bottom:20px; overflow-x: auto; overflow-y: hidden;}
	.tb-list {width: 640px;}

	/* .intro-wrap  */
	.intro-wrap {min-width: 100%;}
	.intro-btns {padding:0; flex-wrap: wrap;}
	.intro-btns > button {padding: 11px 0; width:100%;}
}/* 미디어쿼리문 끝 */