/***********************************************
  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%;
		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.w420 {width:420px; min-width:420px;}

	.needpopup .header {width: 100%; background: #77c8c1; min-height: 60px; padding: 15px 25px;}
	.needpopup .header h2 {color: #fff; font-size: 20px; font-weight: 500;}
    .needpopup .content {overflow: hidden; padding: 20px 20px 25px 20px; max-height: 550px; overflow-y: auto;} 
    .needpopup.other .content{border:3px solid #77c8c1; padding:32px 32px 26px;}
    .needpopup.height700 .content {height: 700px; overflow-y: auto;}
    .needpopup.noCloseBt .content {padding: 50px 20px 30px;}
    
    .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 h4 {font-size: 17px; color: #333; font-weight: 500; margin-bottom: 8px;}
    .needpopup .content h4 .line {position: relative; margin-top:10px;}
    .needpopup .content h4 .line:after {position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 1px; background: #26252b;}
    .needpopup .content h5 {font-size: 16px; color: #222222; font-weight: 300; margin-bottom: 37px; margin-top: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-wrap a.bt {cursor: pointer;}
	.needpopup .content .bt.bt-01 {background: #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 .content .spaceH65{height:65px;}
	
	.needpopup .content .coupon-list{padding:32px 0 24px; border-top:1px solid #dfdfdf; border-bottom:1px solid #dfdfdf}
	.needpopup .content .coupon-list h2{font-size:20px; margin-bottom:8px;}
	.needpopup .content .coupon-list h5{font-size:16px; color:#73c0b9; margin-bottom:26px;}
	.needpopup .content .coupon-list .dl-list{padding:21px 0 0 16px; border-top:2px solid #26252b;}
	.needpopup .content .coupon-list dl{text-align:left; display:table; color:#666; width:100%; margin-bottom:12px; line-height:1.6;}
	.needpopup .content .coupon-list dl:last-child{margin-bottom:0;}
	.needpopup .content .coupon-list dl dt{width:83px; display:table-cell; font-size:16px; font-weight:500}
	.needpopup .content .coupon-list dl dd{display:table-cell;}	
	.needpopup .content .coupon-code{margin : 9px auto 32px;}
	
	
	.needpopup .content .radio-list{border-bottom:1px solid #dfdfdf}
	.needpopup .content .radio-list ul{padding:10px 0 15px 15px; text-align:left;}
	.needpopup .content .radio-list ul li{position:relative; margin:10px 0;}
	.needpopup .content .radio-list .i_label{font-size:15px; color:666666;}
	.needpopup .content .radio-list .i_label:before{content:''; width:20px; height:20px; background:url(/UtopUblessNew_common/images/homepage/common/ico-check.png) center center no-repeat; float:left; margin-right:9px; vertical-align:middle;}
	.needpopup .content .radio-list .i_check{width:0; height:0; position:absolute; top:0; left:0;}
	.needpopup .content .radio-list input[type="radio"]:checked + label:before {background:url(/UtopUblessNew_common/images/homepage/common/ico-check-on.png) center center no-repeat;}
	
	.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: 18px; right: 25px; width: 25px; height: 25px; cursor: pointer; background: url(/UtopUblessNew_common/images/homepage/common/pop_close.png) no-repeat;}
	.needpopup.height700 .needpopup_remover {top: -38px; right: 0;}

/* 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;}
}

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

@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,
	.needpopup.other .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 {top: 13px; right: 16px; width: 22px; height: 22px; background-size: 22px 22px;}
	
	.needpopup .password-form label {margin: 0; font-size: 14px; width: 90px;}
	.needpopup .password-form input {width: calc(100% - 100px);}
	
}