@charset "UTF-8";

#mpopup *{ font-family:Dolbomche_B;}
#mpopup {position:absolute; left:0; top:0; z-index:100; width:100%; height:0}
#mpopup.active {display:flex; flex-wrap:wrap; align-items:center; position:fixed; left:0; top:0; width:100%; height:100%; z-index:100}

#mpopup .tt {position:relative; top:-10px; height:5rem; width: 60%; line-height:5rem; display: flex; justify-content: flex-end;}
#mpopup .control.open span {display:inline-block}
#mpopup .control.open strong {color:#fff; display:inline-block; font-size: 17px; position:relative; margin:0 1rem}
#mpopup .control.open strong:after {content:''; background:#0c70f2; border-radius:5px; width:2rem; height:25px; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:-1}
#mpopup .control.open:hover::after, #popup .control.open:focus::after {-webkit-animation:spread 1.25s infinite; animation:spread 1.25s infinite}

#mpopup .group {position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); visibility:hidden; margin-top:-1%; text-align:center; opacity:0}
#mpopup.active .group::before {position:absolute; left:50%; top:0; z-index:-1; width:1000%; height:100%; margin-left:-500%; content:''; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); height:1000%; margin:0; background-color:rgba(0, 0, 0, 0.7)}

#mpopup .title {font-size:4.5rem; display:block; color:#fff; font-family:Dolbomche_B;}

#mpopup .list li {display:inline}
#mpopup .list li a {display:block; width:100%; height:100%; position:relative}
#mpopup .list li a:focus:before {content:''; width:100%; height:100%; border:3px solid #000; position:absolute; left:0; top:0}

#mpopup .label .count {font-weight:900; color:chartreuse;}
#mpopup .label, #mpopup .control.close {font-size: large; display:inline-block; height:3rem; padding:0 2rem; background-color:#0062AD; color:#fff; line-height:3rem}

#mpopup .control.close::after {-webkit-transform:rotate(0); transform:rotate(0); -webkit-transition:all 0.2s; transition:all 0.2s}
#mpopup .control.close:hover::after, #mpopup .control.close:focus::after {-webkit-transform:rotate(180deg) translateY(2px); transform:rotate(180deg) translateY(2px)}
#mpopup .control.close::after {display:inline-block; position:relative; top:1px; vertical-align:top; margin-left:0.5rem;}

#mpopup .pop-wrapper .pop-viewport {-webkit-box-shadow:inherit; margin:2rem 0}
#mpopup .pop-wrapper .pop-pager {float:none; padding:2rem 0}  
#mpopup .pop-wrapper .pop-pager a.active {background-color:#0c7cf2}
#mpopup .pop-controls-direction a {position:absolute; top:250px; left:-50px; -webkit-transform:translateY(-50%); transform:translateY(-50%); font-size:3rem; overflow:hidden; width:3rem; height:3rem; color:#fff; text-align:center; line-height:3rem; -webkit-transition:all 0.2s; transition:all 0.2s}
#mpopup .pop-controls-direction a::before {display:block; width:100%; height:100%; font-family:"xeicon"; text-align:center; line-height:inherit; content:''}
#mpopup .pop-controls-direction a.pop-next {left:auto; right:-20px; margin:0; top:250px;}
#mpopup .pop-controls-direction a.pop-next::before {content:''}
#mpopup .pop-controls-direction a:hover, #mpopup .pop-controls-direction a:focus {opacity:1}

#mpopup.active {height:100%; z-index:100}
#mpopup.active .group {width:150rem; max-width:calc(100% - 2rem); margin-left:auto !important; margin-right:auto !important; visibility:visible; margin-top:0; opacity:1; -webkit-transition:all 0.2s; transition:all 0.2s}

.pop-pager.pop-default-pager a.active{}

@media screen and (max-width:560px){
	
	 #mpopup .tt {line-height: 6rem !important; width:85%;} 
	
}

@media screen and (max-width:768px){
	
	#mpopup .pop-controls-direction a.pop-next{left: auto; right: -65px;top: 235px;}
	#mpopup .tt {line-height: 8rem; width:80%;}
	#mpopup .control.open:before {font-size:2.2rem; padding-right:1.5rem}
	#mpopup .control.open em {display:none}
	#mpopup .control.open span.count {display:inline-block; position:initial; right:0; top:0; z-index:1}
	/* #mpopup .control.open span.count > span {display:none} */
	#mpopup .control.open strong:after {margin-top:-1px}
	#mpopup .pop-wrapper .pop-pager {float:none; padding:0; top: -15px;position: absolute;} 
	#mpopup .title {font-size: 3.0rem;}
	#mpopup .control.open span {display:none;}
	#mpopup .pop-wrapper .pop-viewport {-webkit-box-shadow:inherit; margin:0;}
	
	
}
@media screen and (min-width:1680px){
	
	 #mpopup .tt {width:66%;} 
	
}

@-webkit-keyframes spread 
{
	0% {width:120%; height:120%; opacity:0.1}
  	100% {width:150%; height:150%; opacity:0} 
}

@keyframes spread 
{
	0% {width:120%; height:120%; opacity:0.1}
  	100% {width:150%; height:150%; opacity:0} 
}