@charset "utf-8";


/* ===================================
	메인 팝업클래스
 =================================== */
/* 메인 팝업 */
.popup {max-width: calc(100% - 30px);  min-width: 290px; position: absolute; top: 100px; left: 100px; z-index: 10001; box-shadow: 10px 10px 10px rgb(0, 0, 0, 20%);}
.popup .popup__content{margin: 0 auto; position: relative; background: #fff; }

.popup .popup__footer{ height: 40px; background: #000;}
.popup .popup__footer a{color: #e3e3e3; font-size: 14px; font-weight: 300; display: block;}

.popup .close1day{float: left; line-height: 40px; margin-left: 44px; position: relative;}
.popup .close1day::before{content: ""; width: 18px; height: 16px; position: absolute; top:50%; left: -16px; transform:translate(-50%, -50%); background: url(../images/contents/popupcheckbox-check.png) center no-repeat; background-size: 100%;}
.popup .close{ float: right; text-align: center; line-height: 30px; margin: 5px; width: 80px; height: 30px; vertical-align: baseline; background: #666 url(../images/contents/popup-del.png) center left 10px no-repeat;}
.popup .close span{margin-left: 20px;}


/* 텍스트 타이틀 */
.popup .text_popup { padding: 0; }

.popup .text_popup .popup__content-header .title,
.popup .text_popup .popup__content-wrap .title { text-align:center; font-weight: 600; color: #222; font-size: 30px; line-height: 1.3; padding: 30px 10px 20px; border-top: 2px solid #050505; border-bottom: 1px solid #ccc; position: relative;}

.popup .text_popup .popup__content-header .title::after,
.popup .text_popup .popup__content-wrap .title::after{ content: "NOTICE"; font-size: 14px; color: #fff; display:inline-block; background-color:#000; border-radius:25px;  height: 34px; line-height:34px; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding:0 40px; letter-spacing: 1px;}

.popup .text_popup .popup__content-wrap .text{ max-height: 400px; overflow-y: auto;  line-height: 1.4; background-color: #f5f5f5; padding:20px;}

.popup .text_popup .popup__content-wrap {padding:30px 30px;}



/* 팝업 슬릭 버튼 */
.popup.type-slide .popup__content-button a{ border: none; outline: none; width: 40px; height: 40px; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 999;}
.popup.type-slide .prev{left: 0; border-top-right-radius: 50%; border-bottom-right-radius: 50%; background: rgba(0,0,0,0.2) url(../images/contents/popup-arrow.png) center no-repeat;}
.popup.type-slide .next{right: 0; border-top-left-radius: 50%; border-bottom-left-radius: 50%; background: rgba(0,0,0,0.2) url(../images/contents/popup-arrow2.png) center no-repeat;}
.popup.type-slide:hover .prev{background: rgba(0,0,0,1) url(../images/contents/popup-arrow.png) center no-repeat; transition: background-color 1s;}
.popup.type-slide:hover .next{background: rgba(0,0,0,1) url(../images/contents/popup-arrow2.png) center no-repeat; transition: background-color 1s;}



/* 슬라이드 팝업 */
.popup.type-slide .popup__content-wrap { position:relative; overflow: hidden; }

@media(max-width:768px){
	.popup {top:50% !important; left:50% !important; transform: translate(-50%, -50%); max-height:calc(100% - 30px);}

	.popup .text_popup .popup__content-header .title,
	.popup .text_popup .popup__content-wrap .title { font-size: 20px; padding: 30px 10px 20px;}

	.popup .text_popup .popup__content-header .title::after,
	.popup .text_popup .popup__content-wrap .title::after{ content: "NOTICE"; font-size: 12px; height: 28px; line-height:28px; padding:0 30px;}

	.popup .text_popup .popup__content-wrap .text{ max-height: 300px; padding:20px;}
	.popup .text_popup .popup__content-wrap {padding:20px 20px;}
}



/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff; }

/***** Align *****/
.alignL {text-align:left !important;}
.alignR {text-align:right !important;}
.alignC {text-align:center !important;}
.valignM {vertical-align:middle !important;}
.valignT {vertical-align:top !important;}
.valignB {vertical-align:bottom !important;}

.floatL {float:left !important;}
.floatR {float:right !important;}


/***** width *****/
.wdAuto {width:auto !important;}

.wdP10 {width:10% !important;}
.wdP20 {width:20% !important;}
.wdP30 {width:30% !important;}
.wdP40 {width:40% !important;}
.wdP50 {width:50% !important;}
.wdP60 {width:60% !important;}
.wdP70 {width:70% !important;}
.wdP80 {width:80% !important;}
.wdP90 {width:90% !important;}
.wdP95 {width:95% !important;}
.wdP100 {width:100% !important;}

/*Border*/
.BD {border:1px solid #dfdfdf !important;}
.BDT {border-top:1px solid #dfdfdf !important;}
.BDR {border-right:1px solid #dfdfdf !important;}
.BDB {border-bottom:1px solid #dfdfdf !important;}
.BDL {border-left:1px solid #dfdfdf !important;}

/*Margin*/
.MAT_1 {margin-top:-1px !important;}
.MAT0 {margin-top:0 !important;}
.MAT-XXL {margin-top:160px !important;}
.MAT-XL {margin-top:120px !important;}
.MAT-L {margin-top:80px !important;}
.MAT-M {margin-top:60px !important;}
.MAT-S {margin-top:40px !important;}
.MAT-XS {margin-top:20px !important;}
.MAT-XXS {margin-top:10px !important;}


@media all and (max-width:1024px){
	/*Margin*/
	.MAT-XXL {margin-top:140px !important;}
	.MAT-XL {margin-top:100px !important;}
	.MAT-L {margin-top:60px !important;}
	.MAT-M {margin-top:40px !important;}
	.MAT-S {margin-top:30px !important;}
	.MAT-XS {margin-top:15px !important;}
	.MAT-XXS {margin-top:5px !important;}
}


@media all and (max-width:768px){
	/*Margin*/
	.MAT-XXL {margin-top:100px !important;}
	.MAT-XL {margin-top:80px !important;}
	.MAT-L {margin-top:50px !important;}
	.MAT-M {margin-top:30px !important;}
	.MAT-S {margin-top:20px !important;}
	.MAT-XS {margin-top:5px !important;}
}


@media only screen and (min-width: 769px) {
	.pc {display:block !important;}
	.mo {display:none !important;}
}

@media only screen and (max-width: 768px) {
	.pc {display:none !important;}
	.mo {display:block !important;}
}

.color1 {color:#28b0e5 !important;}
.color2 {color:#8ec54a !important;}