/*=================================================================================================
// 처리내용 : 팝업관련 CSS
// 작 성 자 : 2016-07-06 강대인
//=================================================================================================*/
@charset "utf-8";

/*div 팝업*/
.top { text-align:right; }
.dc2_top_close {  }
.dc2_top_close img { background:#000; }

.dc2_close_st { background:#000; padding:5px; margin:0; text-align:right; box-sizing:border-box; }
.dc2_close_st a { color:#fff; font-size:14px; vertical-align:middle; }
.dc2_close_st a:hover { color:#fff;}
.dc2_close_st input { vertical-align:middle; }

.noscroll {
  height: 100vh;
  overflow: hidden;
}

.modal_main_event .modal-popup {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  height: 78rem;
  max-height: 85%;
  width: 100%;
  max-width: 133rem;
  padding: 0 2rem;
  overflow: auto;
}
.modal_main_event .modal-popup::-webkit-scrollbar-track {
  background-color: rgba(242, 242, 242, 0.4);
  border-radius: 0;
}
.modal_main_event .modal-popup::-webkit-scrollbar {
  width: 0.6rem;
}
.modal_main_event .modal-popup::-webkit-scrollbar-thumb {
  background-color: #000;
  border-radius: 0;
}
.modal_main_event .modal-popup .item_list {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem 6rem;
}
.modal_main_event .popup_close {
  position: absolute;
  right: 5rem;
  top: 13rem;
  font-size: 1.8rem;
  color: #fff;
}
.modal_main_event .popup_close i.ri-close-line {
  font-size: 2rem;
}
.modal_main_event .popup_close span, .modal_main_event .popup_close i {
  vertical-align: middle;
}
.modal_main_event .popup_close .custom-input input + label {
  line-height: 2.2rem;
}
.modal_main_event .popup_close .custom-input input + label::before, .modal_main_event .popup_close .custom-input input + label::after, .modal_main_event .popup_close .custom-input input + i::before, .modal_main_event .popup_close .custom-input input + i::after {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: transparent;
  border-color: #fff;
  color: #fff;
  font-size: 1.8rem;
}
.modal_main_event .popup_close .popup_close_btn {
  display: inline-block;
  vertical-align: middle;
}

.modal-popup-wrap .modal-popup {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    min-width: 42rem;
    background: #fff;
    border-radius: 1.5rem;
    overflow: hidden;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.1607843137);
}

.modal-popup-wrap{position: fixed;left: 0;top: 0;width:100%;height:100%; color:#333; background-color: rgba(0,0,0,.6);z-index: 30;display:none;
	.modal{
		&-popup{position: absolute;left: 50%;top:50%;transform:translate(-50%, -50%);min-width: 42rem;background: #fff;border-radius: 1.5rem;overflow:hidden;box-shadow: 0px 3px 15px #00000029;		
			.btn-close{position: absolute;right: 3rem;top: 2.5rem;
				i{font-size: 3rem;line-height: 1;}
			}            
		}
		&-title{ padding: 2.5rem 3rem;font-size: 2.2rem;font-weight: 700;}
		&-cont{padding: 1rem 3rem 3rem;background-color: #fff; text-align: center;
			.icon{width: 6rem; height: 6rem; border-radius: 50%; @include flex; font-size: 4rem;color: #fff;margin:0 auto 3rem; background: var(--color1);}
			.title{display: block;font-weight: 700;font-size: 2.2rem;}
		}
		&-foot{ background: #EEEEEE; text-align: center;display: flex;
				.btn{padding: 2rem 0rem;color: #fff;flex:1;border: 0; border-radius: 0; }
				.type1{background: var(--btn2);}
				.type2{background: var(--color1);}
		}
}
	.icon-warning{border-radius: 50%;background: #FFD500; width: 10rem;height: 10rem;margin:0 auto 3rem; @include flex;font-size: 6rem;font-weight: 700;}
}

.modal_main_event .modal-popup .item_list {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem 6rem;
}

/* ===========================================================================================
modal popup
=========================================================================================== */
.noscroll { overflow: hidden; /* padding: 0 1.7rem 0 0; */ }
.modal_main_event{
	.modal-popup{background: transparent;box-shadow:none;border-radius: 0; height:78rem;max-height:85%;width:100%;max-width:100rem; padding: 0 2rem; overflow:auto; @include scrollbar($thumb:#000, $track:#F2F2F266, $size:.6rem);
		.item_list{@include grid(auto, repeat(2, 1fr), 4rem 6rem);}
	}
	.popup_close{position: absolute;right:5rem;top:13rem;font-size: 1.3rem;color: #fff;
		i.ri-close-line{font-size:2rem;}
		span, i{vertical-align:middle;font-size: 1.3rem;color: #fff;}

		.custom-input input + label{line-height: 2.2rem;}
		.custom-input input + label::before, .custom-input input + label::after, .custom-input input + i::before, .custom-input input + i::after{width:2rem;height:2rem;border-radius: 50%;background:transparent;border-color:#fff; color: #fff;font-size: 1.8rem;}
		.popup_close_btn{display: inline-block;vertical-align: middle;}
		.btn-close{margin-left:1rem;}
	}
}


/* .modal-popup-wrap {
	position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.3); z-index: 30; display: none; overflow: auto; padding-bottom: 16rem;

	.modal-popup {
		position: relative; top: 9rem; margin: 0 auto; background: #fff; border-radius: 1.5rem; border-radius: 1.5rem; box-shadow: 0 .3rem .6rem rgba(#000, .16); padding: 4rem; max-width: var(--container); min-height: 50rem;

		.modal {
			&-head { font-size: 2.4rem; font-weight: 700; text-align: left; color: var(--txt1); border-bottom: 1px solid #707070; padding-bottom: 2rem; margin-bottom: 3rem; }
			&-cont {
				.textarea { border: 1px solid #CED6DC; border-radius: 0.5rem; width: 69rem; }
				.icon { display: block; font-size: 7rem; color: #CED6D9; margin-bottom: 3rem; }
				.major-txt { display: block; font-size: 2.8rem; color: #151515; margin-bottom: 4rem; }
				.desc-txt { display: block; font-size: 1.8rem; color: #555; margin-bottom: 6rem; }
				&.scroll { max-height: 40rem; @include scrollbar(#0055A5); overflow-y: auto; }
			}
			&-foot { display: flex; justify-content: flex-end; margin-top: 4rem; }
			&-close { font-size: 3.3rem; position: absolute; right: 2rem; top: 2rem; font-size: 2.4rem; }
		}
	}
} */

@media (max-width:1280px){
.modal_main_event .modal-popup{max-width:70rem;max-height:calc(90% - 15rem);margin-top:15rem;top:0;transform:translate(-50%, 0)}
	.modal_main_event .modal-popup .item_list{grid-template-columns:auto;}
	.modal_main_event .popup_close{right: 50%; transform:translateX(50%); top:10rem;display:flex;}	
	.visual_section {
		.slick-prev{left:-3rem;}
		.slick-next{right:-3rem;}
		.letter1{width: 100%; }
		.letter2{width: 50%; bottom: inherit;top:15rem;right:4rem;opacity:.5;}
		.control{bottom: 6rem;}
		.item_list{height:90rem}
	}
	.modal_main_event .modal-popup{max-width:70rem;max-height:calc(90% - 15rem);margin-top:15rem;top:0;transform:translate(-50%, 0)}
	.modal_main_event .modal-popup .item_list{grid-template-columns:auto; text-align:center;}
	.modal_main_event .popup_close{right: 50%; transform:translateX(50%); top:10rem;}	
		.modal_main_event {
    & .popup_close {
        span, i {
			font-size:12px;
		}
	}
}