/***********************************************
  needPopup
  - Version 1.0.0
  - Copyright 2015 Dzmitry Vasileuski
  - Licensed under MIT (http://opensource.org/licenses/MIT)
***********************************************/
/* Block page scroll
***********************************************/
	.needpopup-opened,
	.needpopup-opened body { overflow:hidden;}
    
    @media screen and (max-width: 533px){
        .needpopup-opened.needpopup-scrolled,
        .needpopup-opened.needpopup-scrolled body { /* height:100%; */}
    }
	
	.needpopup-opened.needpopup-scrolled body { position:fixed; width:100%;}

/* Popup wrapper
***********************************************/
	.needpopup_wrapper {
		visibility:hidden;
		position:fixed;
		z-index:999;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding:0;
		overflow:auto;
		background:#000;
		background:rgba(0, 0, 0, .7);
		opacity:0;
		-webkit-box-sizing:border-box;
				box-sizing:border-box;
		-webkit-transition:opacity .3s ease;
				transition:opacity .3s ease;
	}
	.needpopup-opened .needpopup_wrapper { visibility:visible; opacity:1;}
	.needpopup-overflow .needpopup_wrapper { padding:10px;}

	.needpopup > .disabled {
		content:'';
		position: absolute;
		z-index:9999;
		top:0;
		left:0;
		width:100%;
		height:100%;
		overflow:auto;
		background:rgba(0, 0, 0, .7);
		-webkit-box-sizing:border-box;
				box-sizing:border-box;
		-webkit-transition:opacity .3s ease;
				transition:opacity .3s ease;
	}
	
	/* 다중 팝업 시 레이어 처리*/
	.needpopup_wrapper .pop_wrap {
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
        z-index: 999;
		padding:40px 0;
		overflow:auto;
		background:rgba(0, 0, 0, .7);
	}

/* Popup appearence
***********************************************/
	.needpopup {
		display:none;
		position:absolute;
		z-index:9999;
		top:50%;
		left:50%;
		min-width:520px;
		max-width:100%;
		/* max-height: 80%; */
		margin-left:-275px;
        padding:0;
		background:#fff;
		opacity:0;
		-webkit-box-sizing:border-box;
				box-sizing:border-box;
		-webkit-transform:scale(1, 1);
			-ms-transform:scale(1, 1);
				transform:scale(1, 1);
	}
	.needpopup.opened {
		opacity:1;
		-webkit-transition:opacity .5s ease, -webkit-transform .5s ease;
				transition:opacity .5s ease, transform .5s ease;
		-webkit-transform:scale(1, 1);
			-ms-transform:scale(1, 1);
				transform:scale(1, 1);
	}

	.needpopup.stacked {top:0 !important; margin-top:0 !important;}
	/* .needpopup-overflow .needpopup {left:0; width:auto; margin-left:0 !important;} */

	.needpopup.w1600 {width:1600px; min-width:1600px;}
	.needpopup.w1240 {width:1240px; min-width:1240px;}
	.needpopup.w1100 {width:1100px; min-width:1100px;}
	.needpopup.w1000 {width:1000px; min-width:1000px;}
	.needpopup.w800 {width:800px; min-width:800px;}
	.needpopup.w600 {width:580px; min-width:600px;}
	.needpopup.w580 {width:580px; min-width:580px;}
	.needpopup.w550 {width:550px; min-width:550px;}
	.needpopup.w470 {width:470px; min-width:470px;}
    .needpopup.w435 {width:435px; min-width:435px;}

	.needpopup .header {width: 100%; background: #404040; min-height: 60px; padding: 15px 25px;height:0;}
	.needpopup .header h2 {color: #fff; font-size: 20px; font-weight: 500;}
    .needpopup .content {width: 100%; max-height: 700px; overflow-y: auto; padding: 20px 20px 25px 20px;} 
    .needpopup.height700 {height: 100%; max-height: 700px;}
    .needpopup.height700 .content {height: 100%; overflow-y: auto;}
    .needpopup.noCloseBt .content {padding: 50px 20px 30px;}
    
    .needpopup .content .scrollWrap {height: 80%; max-height: 700px; overflow-y: auto;}
    
    .needpopup .content .text-wrap {text-align: center;}
    .needpopup .content .text-wrap.alert {margin: 30px 0 50px;}
    .needpopup .content .text-wrap.bdt {border-top: 1px solid #ccc; padding-top: 40px;}
    .needpopup .content h2 {font-size: 28px; color: #333; font-weight: 500; margin-bottom: 12px;}
    .needpopup .content h3 {font-size: 19px; color: #333; font-weight: 500; margin-bottom: 8px;}
    .needpopup .content h3 .line {position: relative;}
    .needpopup .content h3 .line:after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background: #333;}
    .needpopup .content h3 em {color: #c69400;}
    .needpopup .content p {font-size: 18px; color: #666; margin-bottom: 3px;}
    .needpopup .content p.s {font-size: 15px; line-height: 1.7em;}
    .needpopup .content p .line {position: relative; font-weight: 500; color: #333;}
    .needpopup .content p .line:after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background: #333;}
    
	.needpopup .content .rsvn-contents {padding: 0;}
	.needpopup .content .bt-wrap {margin-top: 25px; text-align: center;}
	.needpopup .content .bt-wrap .bt {width: 140px; height: 50px; line-height: 50px; margin: 0 5px; font-size: 16px; font-weight: 500; vertical-align: middle;}
	.needpopup .content .bt.bt-01 {background: #404040/*#69bbb4*/; color: #fff;}
	.needpopup .content .bt.bt-02 {background: #7d7d7d; color: #fff;}
	.needpopup.noCloseBt .content .bt-wrap {margin-top: 40px;}

	.needpopup .content .table-notice {margin: 15px 0 30px;}
	.needpopup .content .table-notice p {font-size: 15px; margin-bottom: 5px;}
	
	.needpopup .password-form {text-align: center; padding-top: 20px;}
	.needpopup .password-form li {margin-bottom: 10px;}
	.needpopup .password-form label {width: 100px; font-size: 15px; color: #333; display: inline-block; margin-right: 15px; text-align: left;}
	.needpopup .password-form input {width: 266px; font-size: 17px; height: 40px; color: #333; background: #fbfbfb; border: 1px solid #d3d3d3; padding: 0 10px;}
	
	.needpopup .form-wrap {overflow: hidden;}
	.needpopup .form-wrap.mgb {margin-bottom: 10px;}
	.needpopup .form-wrap ul li {display: table; margin: 0 auto; font-size: 15px;}
	.needpopup .form-wrap ul li .tit {display: table-cell; vertical-align: middle;}
	.needpopup .form-wrap ul li .con {/* display: inline-block; */display: table-cell; vertical-align: middle;}
	.needpopup .form-wrap ul li .con input {font-size: 15px; border: 1px solid #cccccc; height: 40px; padding: 0 10px; vertical-align: middle;}
	.needpopup .form-wrap ul li .con .bt {min-width: 70px; text-align: center; line-height: 38px; height: 40px; font-size: 15px; vertical-align: middle;}
	.needpopup .form-wrap ul li .con .mgl {margin-left: 8px;}
	.needpopup .form-wrap.form1 ul li .tit {width: 100px;}
	.needpopup .form-wrap.form1 ul li .con input {width: 210px;}
	
	.needpopup .subTitle {margin: 40px 0 60px;}
	.needpopup .subTitle h2 {font-size: 40px; font-weight: 700;}
	.needpopup .menuSlide .slider li {height: inherit;}
	.needpopup .menuSlide .slider li {opacity: 1; height: inherit;}
	.needpopup .menuSlide .bx-wrapper {margin-left: 0!important; left:0; width:inherit!important; max-width: inherit!important;}

/* Calendar
***********************************************/
	.needpopup.calendar .content {padding: 30px 40px;}
	.needpopup.calendar .content table.listTable th {background: #fff;}
	.needpopup.calendar .content table.listTable td {padding: 15px; font-size: 13px;}
	.needpopup.calendar .content table.listTable td.selected {background: #d55508;}
	.needpopup.calendar .content .selectDate {margin-bottom: 15px;}
	.needpopup.calendar .content .selectDate .date {font-size: 23px; margin: 0 18px;}
	.needpopup.calendar .content .selectDate .prev, .needpopup.calendar .selectDate .next {width: 26px; height: 26px; background-size: 26px 26px; margin-top: 3px;}
	.needpopup.calendar .content .bt-wrap {margin-top: 20px;}
	.needpopup.calendar .content .bt-wrap a {width: 100%;}

/* Popup remover
***********************************************/

    .noCloseBt .needpopup_remover {display: none;}

	.needpopup_remover {position:absolute; z-index:9999; top: 0; right: -61px; width: 61px; height: 61px; cursor: pointer; background: url(/CenterMark_common/images/homepage/common/popClose.jpg) no-repeat;}


/* Device
***********************************************/
@media screen and (max-width: 1200px){
.needpopup.w1240 {width:90%; min-width:90%;}
}

@media screen and (max-width: 1024px){
	.needpopup .header {min-height: 54px; padding: 13px 22px;}
	.needpopup .header h2 {font-size: 18px;}
	
	.needpopup .content h2 {font-size: 26px;}
	.needpopup .content p {font-size: 16px;}
	
	.needpopup_remover {/* top: 15px; right: 20px; */ top: 0; right: 0; width: 54px; height: 54px; background-size: 54px 54px;}
}

@media screen and (max-width: 800px){
	.needpopup.w800 {width: 95%!important; min-width: 95%!important;}
}

@media screen and (max-width: 768px){
	.needpopup {width: 94%!important; left: 3%!important; margin-left: 0!important;}
	.needpopup {max-height: 94%!important;}
	
	/* .needpopup_remover {top: 0; right: 0; width: 40px; height: 40px; background-size: 40px 40px;} */
}

@media screen and (max-width: 640px){
	
	.needpopup .content .table-notice p {font-size: 13px;}
	
	.needpopup .content .bt-wrap .bt {width: 120px; height: 40px; line-height: 40px; font-size: 14px;}
	
	.needpopup .content .text-wrap.bdt {padding-top: 25px;}
	.needpopup .form-wrap ul li {font-size: 14px;}
	.needpopup .form-wrap.form1 ul li .tit {width: 70px;}
	.needpopup .form-wrap ul li .con input {height: 35px;}
	.needpopup .form-wrap.form1 ul li .con input {width: 130px;}
	.needpopup .form-wrap ul li .con .bt {min-width: 55px; height: 35px; line-height: 35px; font-size: 13px;}
}
	
@media screen and (max-width: 470px){
	.needpopup {width: 95%!important; min-width: 95%!important;}
	
	.needpopup .header {min-height: 50px; padding: 10px 60px 10px 20px;}
	.needpopup .header h2 {font-size: 16px;}
	
	.needpopup .content {padding: 15px 15px 20px 15px;}
	.needpopup .content h2 {font-size: 21px;}
	.needpopup .content h3 {font-size: 15px; margin-bottom: 5px;}
	.needpopup .content p {font-size: 14px;}
	.needpopup .content p.s {font-size: 13.5px;}
	.needpopup .content .bt-wrap {margin-top: 15px;}
	
	.needpopup.noCloseBt .content {padding: 25px 15px 15px;}
	.needpopup.noCloseBt .content .bt-wrap {margin-top: 25px;}
	
	.needpopup .content .text-wrap.alert {margin: 15px 0 30px;}
	
	.needpopup.calendar .content {padding: 15px 20px;}
	.needpopup.calendar .content .selectDate .date {font-size: 18px;}
	.needpopup.calendar .content table.listTable td {padding: 10px;}
	
	.needpopup_remover {width: 50px; height: 50px; background-size: 50px 50px;}
	
	.needpopup .password-form label {margin: 0; font-size: 14px; width: 90px;}
	.needpopup .password-form input {width: calc(100% - 100px);}
	
}