@charset "utf-8";
/****************************
	관리자 초기화
****************************/
* { font-family: Noto Sans KR, '맑은 고딕', HelveticaNeue, DroidSans, Sans-serif, Helvetica; }
body{width:100%;font-size:14px;color:#333;}
input{margin:0;padding:0;box-sizing:content-box;vertical-align:middle;}
button, select{background:none;}
textarea{border:1px solid #ddd;}
body,html {height: 100%;}

/****************************
	레이아웃
****************************/
.paging{
	float:left;
	width:100%;
	text-align:center;
	margin:15px 0;
}

.paging ul{
	margin:0 auto;
}

.paging ul li{
	display:inline-block;
	margin-right:2px;
	width:25px;
	height:25px;
	font-size:13px;
	text-align:center;
	border:1px solid #ddd;
}

.paging ul li a,.paging ul li a:hover, .paging ul li a:link, .paging ul li a:focus, .paging ul li a:active{
 color:inherit;
 display:block;
 width:100%;
 height:100%;
}

.paging ul li:hover, .paging ul li.over{
	background:#999;
	color:#fff;
	cursor:pointer;
}


.paging ul li.now_page{
	background:#efefef;
	border-color:#ddd;
	color: #000;
}

#bg {
	width:100%;
	height:100%;
	background: linear-gradient(45deg, #ececec, #ececec);
	position: fixed;
	z-index: -1;
}
#wrap {
	width:100%;
	max-width:640px;
	margin:auto;
	height: 100%;
}

#admin_content {
	width:100%;
	min-height: calc(100% - 332px);
	padding:60px 0 200px;
	box-sizing: border-box;
	display:inline-table;
}

#admin_content .link_btn {
	margin: 0 auto 25px;
	width:84.375%;
	height:313px;
	display: flex;
	justify-content: center;
	align-items: center;
	color:#fff;
	font-size:54px;
	font-weight:bold;
}

#admin_content .link_btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	border-radius: 15px;
	background:#221E1F;
}

#admin_content .link_btn a img {
	display: block;
	margin: 0 auto 20px;
}

#admin_content .main_tel {
	width: 90%;
	margin: 70px auto 0;
	padding: 37px 0;
	background: #F7F7F7;
	border: 1px solid #F1F1F1;
	border-radius: 15px;
	box-sizing: border-box;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color: #707070;
}

@media screen and (max-width:640px) {
	#admin_content {
		min-height: calc(100% - 60.486vw);
		padding:9.375vw 0 31.25vw;
	}

	#admin_content .link_btn {
		margin: 0 auto 3.906vw;
		height:48.906vw;
		font-size:8.438vw;
	}

	#admin_content .link_btn a {
		border-radius: 2.344vw;
	}

	#admin_content .link_btn a img {
		width: 7.813vw;
		margin: 0 auto 3.125vw;
	}
	
	#admin_content .main_tel {
		margin: 10.938vw auto 0;
		padding: 5.781vw 0;
		border-radius: 2.344vw;
		font-size: 5vw;
	}
}

#admin_content .total_sum {
	width: 96%;
	margin: 2%;
	color:#999;
	font-size:16px;
	text-align:right;
}

#admin_content .top_title {
	width: 96%;
	margin: 2%;
	margin-top:0;
	box-sizing: border-box;
	padding: 5px;
	color:#999;
	font-size:18px;
	font-weight:bold;
}

#admin_content .print_btn {
	height: 26px;
	line-height: 26px;
	float:right;
}

#header {
	width:100%;
	height:105px;
	box-sizing: border-box;
	padding:0 7.8125%;
}

#header .logo {
	float:left;
}
#header .logo img {
	height:32px;
	margin-top:50px;
}

#header .add_btn, #header .logout {
	float:right;
	padding:7px 12px;
	border-radius: 10px;	
	margin-top: 45px;
	color:#221E1F;
	border:1px solid #221E1F;
	margin-left:7px;
	font-size: 16px;
}

@media screen and (max-width:640px) {
	#header {
		height:16.406vw;
	}

	#header .logo img {
		/* width: 13.3vw; */
		height:4.3vw;
		margin-top:7.813vw;
	}

	#header .add_btn, #header .logout {
		padding:1.094vw 1.875vw;
		border-radius: 1.563vw;	
		margin-top: 5.688vw;
		margin-left:1vw;
		font-size: 3.438vw;
	}
}

#admin_content .box {
	width:96%;
	margin:2%;
	box-sizing: border-box;
	background:#fff;
	border-radius:10px;
	box-shadow: 0px 0px 5px #A5A4A4;
	padding: 10px;
}

.box_title {
	padding:10px;
	line-height:34px;
	overflow: hidden;
}
.box_title span {
	float:left;
}

.search_box {
	text-align:right;
	float: right;
}
.search_box button.search_input {
	background:#009AC7;
	color:#fff;
	height:34px;
	padding: 0 12px;
	border-radius: 4px;
}

.search_box input {
	vertical-align: top;
	width:160px;
	border-radius: 4px;
}

.o_list li {
	overflow:hidden;
	min-height: 60px;
	position:relative;
}
.o_list li div.subject {
	display: inline-block;
	font-size:18px;
	font-weight:bold;
	margin-top:5px;
	width: calc(100% - 56px);
}

.o_list li div.subject img {
	margin-right: 8px;
}

.o_list li div.view {
	position: absolute;
	right: 10px;
	top:7px;
}

.o_list li div.view button {
	height:40px;
	padding: 0px 10px;
}

.o_list .no-data {
	text-align: center;
	line-height: 40px;
}

.img_list {
	text-align: center;
}
.img_list .box {
	position:relative;
}
.img_list .num {
	background:#4E4E4E;
	width:34px;
	height:34px;
	line-height:34px;
	border-radius:4px;
	text-align:center;
	color:#fff;
	vertical-align: top;
	position: absolute;
    top: 10px;
    left: 10px;
	z-index:10;
}

.img_list label {
    display: inline-block;
    width: 160px;
    height: 53px;
    background: url(../images/ico_img_plus.png) no-repeat center;
    z-index: 0;
    border: 1px dashed #D6D6D6;
    cursor: pointer;
    text-align: center;
    padding-top: 107px;
    background-position-y: 53px;
    color: #B5B5C0;
    margin-right: 10px;
    margin-bottom: 10px;
}

.img_list .preview_div {
    display: inline-block;
    /*
	width: 160px;
    height: 160px;
	*/
	
	width: 100%;
	padding-bottom: 75%;
	
    text-align: center;
	margin-bottom: 10px;
    display: none;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
}

.img_list .preview_div span.del {
    width: 36px;
    height: 36px;
    top: 0;
    right: 0;
    position: absolute;
    background: url(../images/ico_close_big.png) no-repeat center;
    background-size: contain;
    cursor: pointer;
}

.img_list input[type=file] {
    display: none;
}

.img_list .img_del_btn {
    padding: 0 10px;
    background: #4E4E4E;
    color: #fff;
    border-radius: 4px;
    position:absolute;
	top:10px;
	right:10px;
	height: 34px;
    line-height: 34px;
}

.img_add {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 54px;
    width: 96%;
    border-radius: 10px;
    background: #112451;
	margin:auto;
	color:#fff;
	cursor:pointer;
}

.file_preview {
	display:none;
}

.del_file {
	height: 34px;
    background: #4E4E4E;
    border: 0;
    color: #fff;
    font-size: 13px;
    padding: 0 20px;
    border-radius: 4px;
	margin-left:10px;
	padding: 0 10px !important;
	line-height: 34px;
	display: inline-block;
	cursor:pointer;
}

.default_label {font-size:14px;}

.top_btn_box {
	text-align: center;
	margin-bottom: 13px;
}

#admin_content .top_btn_box .top_btn {
	float:none;
	display: inline-block;
	width: 30%;
	margin: 0 1%;
	padding:0;
	height: 35px;
    line-height: 35px;
}

.top_btn_box2 {
	text-align: center;
	margin-bottom: 13px;
	display:none;
}

#admin_content .top_btn_box2 .top_btn {
	float:none;
	display: inline-block;
	width: 29.2%;
	margin: 0 1%;
	padding:0;
	height: 35px;
    line-height: 35px;
}

.o_list li .change {
	display:none;
	position: absolute;
	right: 10px;
	top: 10px;
}

.o_list li .change button {
	height:34px;
	margin-top: 3px;
	padding: 0 14px;
}

.o_list li .view .chk {
	display:none;
	width: 34px;
	height: 34px;
	line-height: 34px;
	background: #495a95;
	text-align: center;
	color: #fff;
	border-radius: 4px;
	margin-top: 7px;
	font-size: 18px;
}

.o_list li.print_select {
	background: #112451 !important;
	color: #fff;
}

.img_list .box .change {
	display:none;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 50px;
}

.img_list .box .change button {
	height:34px;
	margin-top: 3px;
	padding: 0 14px;
}


/* 마이페이지 */
.mypage_sector {
	width: 90%;
	margin: 0 auto;
}

.sub_title {
	padding: 30px 0 60px;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color: #333333;
}

.subscribe_box {
	margin-bottom: 300px;
}

.subscribe_box2 {
	margin-bottom: 200px;
}

.subscribe_title {
	margin-top: 60px;
	font-size: 32px;
	font-weight: bold;
	text-align: center;
	color: #333333;
	margin-bottom: 30px;
}

.mypage_btn {
	width: 100%;
	height: 120px;
	border-radius: 15px;
	font-size: 32px;
	box-sizing: border-box;
}

.mypage_btn01 {
	padding: 0 28px;
	background: #fff url('../images/arrow_ico.png') no-repeat center right 28px / 10px;
	font-weight: bold;
	text-align: left;
}

.mypage_btn02 {
	display: flex;
	align-items: center; 
	justify-content: space-between;
	margin-bottom: 20px;
	padding: 0 28px;
	background: #fff url('../images/arrow_ico.png') no-repeat center right 28px / 10px;
	text-align: left;
}

.mypage_btn02 .name {}

.mypage_btn02 .name .dc_flag {	
	display: inline-block;
	padding: 5px 15px;
	margin-left: 15px;
	font-size: 20px;
	font-weight: bold;
	background: #FCB412;
	border-radius: 15px;
}

.mypage_btn02 .price_box {
	margin-right: 40px;
	text-align: right;
}

.mypage_btn02 .price_box .dc_info {
	font-size: 20px;
	text-decoration: line-through;
	color: #959595;
}

.mypage_btn02 .price_box .price {
	display: block;
	font-weight: bold;
}

.mypage_btn03 {
	margin-bottom: 250px;
	background: #D2D2D2;
	border: 1px solid #F1F1F1;
	font-weight: bold;
	color: #707070;
}

.subscribe_info {}

.subscribe_info .subscribe_state {
	display: inline-block;
	padding: 0 28px;
	background: #fff;
	line-height: 120px;
	text-align: left;
}

.subscribe_info .subscribe_detail {
	width: 100%;
	margin-top: 22px;
}

.subscribe_info .subscribe_detail th,
.subscribe_info .subscribe_detail td {
	padding-bottom: 15px;
	font-size: 22px;
	text-align: left;
}

.subscribe_info .subscribe_detail th {}

.subscribe_info .subscribe_detail td {
	font-weight: bold;
}

.subscribe_info .subscribe_detail td.subscribe_notice {
	padding-top: 15px;
	font-weight: normal;
}

.subscribe_cancel {
	display: inline-block;
	margin-bottom: 18px;
	background: #F7F7F7;
	border: 1px solid #F1F1F1;
	line-height: 120px;
	font-weight: bold;
	text-align: center;
	color: #707070;
}

@media screen and (max-width:640px) {
	.sub_title {
		padding: 4.688vw 0 9.375vw;
		font-size: 5vw;
	}

	.subscribe_box {
		margin-bottom: 46.875vw;
	}

	.subscribe_box2 {
		margin-bottom: 31.25vw;
	}

	.subscribe_title {
		margin-top: 9.375vw;
		font-size: 5vw;
		margin-bottom: 4.688vw;
	}

	.mypage_btn {
		height: 18.75vw;
		border-radius: 2.344vw;
		font-size: 5vw;
	}

	.mypage_btn01 {
		padding: 0 4.375vw;
		background: #fff url('../images/arrow_ico.png') no-repeat center right 4.375vw / 1.563vw;
	}

	.mypage_btn02 {
		margin-bottom: 3.125vw;
		padding: 0 4.375vw;
		background: #fff url('../images/arrow_ico.png') no-repeat center right 4.375vw / 1.563vw;
	}

	.mypage_btn02 .name .dc_flag {	
		padding: 0.781vw 2.344vw;
		margin-left: 2.344vw;
		font-size: 3.125vw;
		border-radius: 2.344vw;
	}

	.mypage_btn02 .price_box {
		margin-right: 6.25vw;
	}

	.mypage_btn02 .price_box .dc_info {
		font-size: 3.125vw;
	}

	.mypage_btn03 {
		margin-bottom: 39.063vw;
	}

	.subscribe_info .subscribe_state {
		padding: 0 4.375vw;
		line-height: 18.75vw;
	}

	.subscribe_info .subscribe_detail {
		margin-top: 3.438vw;
	}

	.subscribe_info .subscribe_detail th,
	.subscribe_info .subscribe_detail td {
		padding-bottom: 2.344vw;
		font-size: 3.438vw;
	}

	.subscribe_info .subscribe_detail td.subscribe_notice {
		padding-top: 2.344vw;
	}

	.subscribe_cancel {
		margin-bottom: 2.813vw;
		line-height: 18.75vw;
	}
}


/* 회원정보 수정 */
.mypage_box {
	width: 74.53%;
	margin: 0 auto;
}

.input_box {
	margin-bottom: 10px;
}

.input_box::after {
	display: block;
	clear: both;
	content: "";
}

.input_box .join_input {
	float: left;
	width: 100%;
	height: 73px;
	margin-bottom: 10px;
	border-radius: 15px;
	font-size: 22px;
}

.input_box .join_text {
	padding: 0 20px;
	background: #F7F7F7;
	border: 1px solid #F1F1F1;
}

.input_box .join_text:disabled {
	background: #D2D2D2;
}

.input_box .join_text.join_pwd::placeholder {
	/* color: #000; */
}

.input_box .join_text.with_btn {
	width: calc(100% - 136px);
}

.input_box .join_sbtn  {
	width: 126px;
	margin-left: 10px;
	background: #221E1F;
	border: 0;
	color: #fff;
}

.join_submit {
	width: 100%;
	height: 73px;
	margin-top: 30px;
	margin-bottom: 80px;
	background: #FCB412;
	border-radius: 15px;
	font-size: 26px;
	font-weight: bold;
	color: #371D1D;
}

@media screen and (max-width:640px) {
	.input_box {
		margin-bottom: 1.563vw;
	}

	.input_box .join_input {
		height: 11.406vw;
		margin-bottom: 1.563vw;
		border-radius: 2.344vw;
		font-size: 3.438vw;
	}

	.input_box .join_text {
		padding: 0 3.125vw;
	}

	.input_box .join_text.with_btn {
		width: calc(100% - 21.25vw);
	}

	.input_box .join_sbtn  {
		width: 19.688vw;
		margin-left: 1.563vw;
	}

	.join_submit {
		height: 11.406vw;
		margin-top: 4.688vw;
		margin-bottom: 12.5vw;
		border-radius: 2.344vw;
		font-size: 4.063vw;
	}
}


@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
	animation-name: fade-in;
}

span.ajax_msg {
	display: inline-block;
	/* margin-bottom: 10px; */
	/* font-size: 18px; */
	color: #E20001;
	animation-name: fade-in;
	animation-duration: .3s;
}


.subscribe_btn {
	display: inline-block;
	margin-top: 1em;
	padding: 5px 15px;
	border-radius: 0.3em;
	font-size: 0.7em;
	color: #707070;
	background: #F7F7F7;
}

.subscribe_btn:hover {
	color: #000;
}

/* 메인 타이틀 추가 */
.main_title {
	margin-bottom: 50px;
    font-size: 28px;
    font-weight: 600;
    text-align: center;
}

@media screen and (max-width:640px) {
	.main_title {
		margin-bottom: 7.813vw;
		font-size: 4.375vw;
	}
}


/* 푸터 영역 추가 */
#ft {
	padding: 40px 0;
	background: #444;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
	color: #fff;
}

#ft a {
	text-decoration: underline;
}

@media screen and (max-width:640px) {
	#ft {
		padding: 6.25vw 0;
		font-size: 3vw;
	}
}


.notice_content img {
	max-width: 100%;
}

.main_qico {
	position: relative;
	top: -3px;
	margin-left: 7px;
}

.cancel_subscribe {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	font-size: 22px;
	text-align: center;
}

.cancel_subscribe button {
	display: block;
	margin: 30px auto 0;
	padding: 10px 15px;
	background: #009AC7;
	font-size: 18px;
	font-weight: 500;
	color: #fff;
}

@media screen and (max-width:640px) {
	.main_qico {
		width: 6vw;
		top: -0.5vw;
		margin-left: 1.4vw;
	}
	
	.cancel_subscribe {
		top: 50%;
		transform: translateY(0);
		font-size: 4.4vw;
	}

	.cancel_subscribe button {
		margin: 6vw auto 0;
		padding: 2vw 3vw;
		font-size: 4vw;
	}
}



/* 모달 팝업창 css */
.modal__container {
	padding: 30px 40px 20px;
	left: calc(50% - 250px);
	width: 500px;
	font-size: 22px;
}

.modal__content {
	margin-bottom: 20px;
	justify-content: center;
	line-height: 1.45;
	text-align: center;
}

.modal__footer button {
	padding: 10px 0;
	font-size: 18px;
	font-weight: 400;
	color: #fff;
}

.modal__footer {
	height: auto;
	padding-top: 0;
}

.modal__footer button:focus {
	outline: none;
}

.modal__footer button:first-child {
	background: #777;
}

.modal__footer button:last-child {
	background: #009AC7;
}

@media screen and (max-width:640px) {
	.modal__container {
		padding: 5vw 4vw;
		left: 10%;
		width: 80%;
		font-size: 4.4vw;
	}

	.modal__content {
		margin-bottom: 2.5vw;
	}

	.modal__footer button {
		padding: 1.563vw 0;
		font-size: 4vw;
	}
}