@charset "UTF-8";

.main_layer_popup {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:320px;
    display:inline-flex;
    align-items:center;
    justify-content:center; /* 팝업 위치 조정 좌측 - left, 가운데 - center, 우측 - right */
    padding:20px;
    background-color:rgba(0,0,0,0.6);
    font-size:0;
    text-align:center;
    box-sizing:border-box;
    z-index:9000;
}
.main_layer_popup:before {
    content:"";
    display:inline-block;
    height:100%;
    vertical-align:middle;
}
.main_layer_popup .popup_layer {
    position:relative;
    display:inline-flex;
    flex-direction:column;
    overflow:hidden;
    width:100%;
    max-width:768px;
    min-height:100px;
    max-height:100%;
    border-radius:12px;
    background:#ffffff;
    vertical-align:middle;
    animation:popSlideUp 0.8s ease 0s forwards;
}
.main_layer_popup .popup_header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    width:100%;
    /*padding:19px 20px;*/
    padding:0 20px;
    height: auto;
    box-sizing:border-box;
    /*
    position: absolute;
    top:0;
    left:0;
    right:0;
    z-index:1;
    */
}
.main_layer_popup .main_layer_control {
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:5px;
    margin-left: auto;
    position:absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
}
.main_layer_popup .main_layer_control .btnbox {
	display: flex;
	align-items: center;
	gap: 0.3rem;
	background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius:150px;
}
.main_layer_popup .main_layer_control .numcount {
	display: flex;
	align-items: center;
}
.main_layer_popup .main_layer_control .numcount span {
	font-size: 14px;
}
.main_layer_popup .main_layer_control .numcount span.line {
	margin: 0 5px;
	color: #999;
}

.main_layer_popup .main_layer_control .numcount span.total {
	color: #999;
}

.main_layer_popup .main_layer_control button {
    display:block;
    width:32px;
    height:32px;
    padding:0;
    margin:0;
    /*border:1px solid #d0d0d0;*/
    border-radius:150px;
    text-indent:-9999px;
    cursor:pointer;
    box-sizing:border-box;
}
.main_layer_popup .main_layer_control button.mainPopup_prev {
    background:url(../img/popup/icon_arrow_l.png)center center no-repeat;
    background-size:30px auto;
}
.main_layer_popup .main_layer_control button.mainPopup_next {
    background:url(../img/popup/icon_arrow_r.png)center center no-repeat;
    background-size:30px auto;
}
.main_layer_popup .main_layer_control button.mainPopup_auto {
    background:url(../img/popup/icon_stop.png)center center no-repeat;
    background-size:30px auto;
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.main_layer_popup .main_layer_control button.mainPopup_auto.stop {
    background:url(../img/popup/icon_play.png)center center no-repeat;
    background-size:30px auto;
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.main_layer_popup .main_layer_pager {
    position:absolute;
    top:20px;
    right:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:70px;
    height:32px;
    border-radius:150px;
    background:#fafafa;
    text-align:center;
    box-sizing:border-box;
}
.main_layer_popup .main_layer_pager span {
    font-size:14px;
    font-weight:bold;
    line-height:32px;
    color:#000000;
}
.main_layer_popup .main_dots_control {
    position:relative;
    display: none;
}
.main_layer_popup .main_dots_control .main_layer_dots {
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    margin:0;
    gap:5px;
    position:relative;
}
.main_layer_popup .main_dots_control .main_layer_dots li { 
	display: inline-block;
}
.main_layer_popup .main_dots_control .main_layer_dots li + li {
	margin-left: 5px;
}
.main_layer_popup .main_dots_control .main_layer_dots button {
    display:block;
    width:8px;
    height:8px;
    border:0;
    margin:0;
    padding:0;
    border-radius:150px;
    text-indent:-9999px;
    background:#d0d0d0;
    cursor:pointer;
    box-sizing:border-box;
}
.main_layer_popup .main_dots_control .main_layer_dots .slick-active button {
    background:#000000;
}
.main_layer_popup .popup_container {
    position:relative;
    width:100%;
    height:100%;
    min-height: 70px;
    overflow:hidden;
    box-sizing:border-box;
}
.main_layer_popup .popup_container .popup_contents {
    height:auto;
    /*padding:10px 20px 20px 20px;*/
    margin:0;
}
.main_layer_popup .popup_container .popup_contents .txtbox {
	padding:80px 0 20px;
}

.main_layer_popup .popup_container .popup_contents .scr {
	overflow:auto !important;
	max-height:480px;
	padding: 0 20px;
}

.main_layer_popup .popup_container .popup_contents p {
    font-size:14px;
    text-align:left;
    font-family:'Nanum sqaure';
}
.main_layer_popup .popup_container .popup_contents div {
    font-size:14px;
    text-align:left;
    font-family:'Nanum sqaure';
}
.main_layer_popup .popup_container .popup_contents img {
    display:block;
    max-width:100%;
    max-height:100%;
}
.main_layer_popup .popup_footer {
    position:relative;
    width:100%;
    height:70px;
    flex-shrink:0;
}
.main_layer_popup .popup_footer .popup_btn_wrap {
    display:flex;
    align-items:center;
    width:100%;
    height:100%;
    background:#f2f2f2;
}
.popup_btn_wrap .popup_chkbox {
    display:inline-block;
    position:relative;
    padding:0;
    margin:0;
    min-height:24px;
    font-size:0;
    vertical-align:top;
}
.popup_btn_wrap .popup_chkbox input[type="checkbox"] {
    position:absolute;
    top:50%;
    left:20px;
    transform:translateY(-50%);
    width:18px;
    height:18px;
    border:none;
    padding:0;
    margin:0;
    appearance:none;
    background-color:transparent;
    background:url(../img/popup/check_box_outline_blank.svg)center center no-repeat;
    background-size:18px auto;
}
.popup_btn_wrap .popup_chkbox input[type="checkbox"]:checked {
    background:url(../img/popup/check_box_outline_green.svg)center center no-repeat;
    background-size:18px auto;
}
.popup_btn_wrap .popup_chkbox input[type="checkbox"] + label {
    color:rgba(33, 33, 33, 0.8);
}
.popup_btn_wrap .popup_chkbox input[type="checkbox"]:checked + label {
    color:rgba(0, 0, 0, 1);
}
.popup_btn_wrap .popup_chkbox label {
    display:inline-block;
    height:100%;
    padding:26px 30px 26px 50px;
    margin:0;
    cursor:pointer;
    font-size:14px;
    font-weight:bold;
    color:#000000;
    vertical-align:top;
    box-sizing:border-box;
}
.popup_btn_wrap .popup_close {
    display:inline-block;
    margin-left:auto;
    flex-shrink:0;
    padding:20px 25px;
    height:100%;
    border:0;
    cursor:pointer;
    background:#000000;
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
    box-sizing:border-box;
}
.popup_btn_wrap .popup_close span {
    font-size:14px;
    font-weight:bold;
    color:#ffffff;
}

.popup_layer .imgbox img {
	margin: 0 auto;
}

.popup_layer:has(.imgbox) .main_layer_dots {
	display: none;
}

.popup_layer:has(.imgbox) .main_layer_control {
	display: none;
}

.popup_layer:has(.imgbox) .main_dots_control:not(:has(li:first-child:last-child)) ~ .main_layer_control {
	display: flex;
}

.popup_layer:has(.txtbox) .numcount {
	display: none;
}

.popup_layer:has(.txtbox) .main_dots_control {
	display: block;
}

.popup_layer:has(.txtbox) .main_layer_control button {
	border: 1px solid #d0d0d0;
	box-shadow: none;
}

.popup_layer:has(.txtbox) .main_layer_control {
	position:static;
	height: 70px;
}

.popup_layer:has(.txtbox) .btnbox {
	box-shadow: none;
}

.popup_layer:has(.txtbox) .popup_container .popup_contents .txtbox
{
	padding-top: 0;
}

/* keyframes */
@keyframes popDimShow {
    0% {
        background-color: rgba(0, 0, 0, 0);
    }
    100% {
        background-color: rgba(0, 0, 0, 0.6);
    }
}
@keyframes popDimHide {
    0% {
        background-color: rgba(0, 0, 0, 0.6);
    }
    100% {
        background-color: rgba(0, 0, 0, 0);
    }
}
@keyframes popSlideUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
                transform: translateY(40px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}
@keyframes popSlideDown {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(80px);
                transform: translateY(80px);
    }
}