﻿@charset "utf-8";
/********************************
layout
*********************************/
html, body{height:100%;margin:0;padding:0;font:13px 'Nanum Gothic','돋음',Dotum,Arial,sans-serif; color:#000;background-color:#fff;}
a{color:black;}
a:hover{color:#2085db;}
#wrapper{margin:0 auto;max-width:960px;min-width:320px;}
#login_wrapper{margin:0 auto;max-width:960px;min-width:320px;min-height:100%;background-color:#eee;}
#header{height:47px;background-color:#2085db;position:relative;}
.logo{position:absolute;top:5px;left:20px;}
.logoimg{margin-top:8px;}

#loader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url('../Images/loading.gif') 50% 50% no-repeat rgba(249,249,249,0.5);
}

	/*search_list*/
	#search_list{padding:10px 15px;overflow:hidden;zoom:1;}
	#search_list li{border-bottom:1px solid #e1e1e1;}
	#search_list li.detail{padding:0;}

	#search_list .item{margin:10px 15px;height:100px;clear: both;}
	#search_list .thumb_area{position:relative;}
	#search_list .thumb_area > i{font-style:normal;font-size:13px;display:none;padding:3px 6px;background:#f65555;color:#fff;position:absolute;top:0;left:0;}
	#search_list .thumb_arrow{position:absolute;top:95px;left:62px;color:#383e4d;font-size:2em;display:none;}
	#search_list .active .thumb_area > i{display:block}
	#search_list .active .thumb_area > .thumb_arrow{display:block}
	#search_list img.item_thumb{margin-right:10px;vertical-align:middle;max-width:147px}
	#search_list .item h1{font-size:20px;color:black;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
	#search_list small.time{font-size:15px;color:#7d7d7d;line-height:30px;}
	#search_list .resultEnd { width:100%; height:75px; padding:30px 0 0px 0px; font-size:16px; text-align:center; background:#f3f2f7;}
	#search_list .resultMore { width:100%; margin-top:10px; padding:30px 0 30px 20px; border:1px solid gray; text-align:center; font-size:20px; font-weight:bold; cursor:pointer; }

@media screen and (max-width: 400px){

	/*search_list*/
	#search_list{padding:10px 15px;overflow:hidden;zoom:1;}
	#search_list li{border-bottom:1px solid #e1e1e1;}
	#search_list li.detail{padding:0;}

	#search_list .item{margin:5px 15px;height:60px;clear: both;}
	#search_list .thumb_area{position:relative;}
	#search_list .thumb_area > i{font-style:normal;font-size:13px;display:none;padding:3px 6px;background:#f65555;color:#fff;position:absolute;top:0;left:0;}
	#search_list .thumb_arrow{position:absolute;top:95px;left:62px;color:#383e4d;font-size:2em;display:none;}
	#search_list .active .thumb_area > i{display:block}
	#search_list .active .thumb_area > .thumb_arrow{display:block}
	#search_list img.item_thumb{margin-right:10px;vertical-align:middle;max-width:100px;}
	#search_list .item h1{font-size:12px;color:black;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
	#search_list small.time{font-size:11px;color:#7d7d7d;line-height:30px;}
	#search_list .resultEnd { width:100%; margin:30px 0 30px 20px; font-size:16px; text-align:center;}
	#search_list .resultMore { width:100%; margin-top:10px; padding:30px 0 30px 20px; border:1px solid gray; text-align:center; font-size:20px; font-weight:bold; cursor:pointer; }
}

@media screen and (max-width: 500px){
	/*gnb*/
	#gnb{position:absolute;top:47px;left:0;z-index:999;background:#fff;width:100%;display:none}
	#gnb > ul > li > a{display:block;padding:10px 20px;border-bottom:1px solid #e1e1e1;margin:0 10px;font-weight:bold;}
	#gnb > ul > li > a.active,
	#gnb > ul > li > a:hover{color:#2085db;background:#fff;}
	#gnb > ul > li:last-child > a{border-bottom:none;}

	#gnb_bar{position:absolute;top:10px;right:20px;font-size:22px;color:#fff;}
	#icon_search{display:none;position:relative;}

	/*#banner*/
	#banner > li{position:relative;}
	#banner > li > img{width:100%;display:block;}
	#banner > li > article{position:absolute; top:20px; left:40px;}
	#banner > li > article > h1, #banner > li > article > p{font-size: 23px;font-weight:bold; color:#fff;text-shadow:1px 1px 10px rgba(0,0,0,0.6), 3px 1px 1px rgba(0,0,0,0.7);-webkit-text-shadow:1px 1px 10px rgba(0,0,0,0.6), 3px 1px 1px rgba(0,0,0,0.7);}
	#banner > li > article > p{font-size: 12px;width:90%;margin:15px 0;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;height:30px;}

	.comment .media h1{font-size:20px;color:white;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:10px 0;}
	.comment .cont{font-size:15px;color:#a9acb2;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;margin-bottom:20px;}

	.addr span{display:block;}

	/*#lnb*/
	#lnb{background:#464d5d;width:100%;text-align:center;}
	#lnb ul{overflow:hidden;display:inline-block;}
	#lnb ul > li{float:left;}
	#lnb ul > li > a{display:inline-block;padding:15px 10px;font-size:16px;color:#a9acb2;}
	#lnb ul > li > a.active,
	#lnb ul > li > a:hover{font-weight:bold;color:#fff;}
}

@media screen and (min-width: 501px){

	/*gnb*/
	#gnb{padding:0;line-height:47px;margin-right:10px;float:right;}
	#gnb > ul{overflow:hidden;}
	#gnb > ul > li{float:left;}
	#gnb a{color:#fff;}
	#gnb li{margin:0 10px;}
	#gnb li .active,
	#gnb li a:hover{color:#ffe400;}
	#gnb img{vertical-align:middle;margin-top:-10px;}
	#gnb_bar{display:none;}
	#txt_search{display:none;padding:10px;}

	/*#banner*/
	#banner > li{position:relative;}
	#banner > li > img{width:100%;display:block;}
	#banner > li > article{position:absolute; top:50px; left:50px; z-index:2; width:80%;}
	#banner > li > article > h1, #banner > li > article > p{font-size: 33px;font-weight:bold; color:#fff;text-shadow:1px 1px 10px rgba(0,0,0,0.6), 3px 1px 1px rgba(0,0,0,0.7);-webkit-text-shadow:1px 1px 10px rgba(0,0,0,0.6), 3px 1px 1px rgba(0,0,0,0.7);}
	#banner > li > article > p{font-size: 14px;width:60%;margin:20px 0;}

	.comment .media h1{font-size:25px;color:white;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:10px 0;}
	.comment .cont{font-size:18px;color:#a9acb2;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;margin-bottom:30px;}

	/*#lnb*/
	#lnb{background:#464d5d;width:100%;padding-left:20px;}
	#lnb ul{overflow:hidden;display:inline-block;}
	#lnb ul > li{float:left;}
	#lnb ul > li > a{display:inline-block;padding:15px 20px;font-size:16px;color:#a9acb2;}
	#lnb ul > li > a.active,
	#lnb ul > li > a:hover{font-weight:bold;color:#fff;}
}

/*검색창*/
#serach_area{background:url('../Images/bg_search.png') no-repeat;height:57px;width:371px;position:absolute;top:35px;right:0;z-index:999;display:none;}
#serach_area input{border:none;width:300px;height:36px;margin-left:20px;margin-top:5px;outline:none;}
#serach_area button{color:#2085db;border:none;outline:none; background:#fff;height:50px;background-color:transparent;}


/*login*/
#loginModal label{font-size:14px; font-weight:bold;color:black;padding-right:10px;}
#loginModal input[type=radio]{visibility:hidden;}



/*vod*/
#vod{background:#fff;display:none;}
#player{width:100%;}
#vod header{display:block;padding:10px 20px;background:#2a303f;}
#vod_title{position:relative; font-size:17px;color:#fff;font-weight:bold;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;background:url('../Images/icon_playing.png') no-repeat;text-indent:110px;padding-right:10px;}
#comm_chevron{position:absolute;top:2px;right:0px;}

/*vod comment*/
#comment{display:none;margin:2px 0;}
#comment_close{position:absolute;top:20px;right:20px;color:#fff;}

.comment{background:url('../Images/bg_middle.png');padding:40px 10px;position:relative;}
.comment .media{margin:10px 15px;}
.comment img.media_thumb{margin-right:10px;vertical-align:middle;width:270px}
.comment .cate{font-size:15px;color:#efbf00;font-weight:bold; display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;margin:10px 0;}
.comment .time{font-size:17px;color:#01a2ff;font-weight:bold; width:100%;}
.comment .time > span{font-size:14px;}
.comment_close{position:absolute;top:20px;right:20px;color:#fff;}

.kakao {display:none;}
@media screen and (max-width: 580px)
{
	.kakao {display:block; padding-top:0px; padding-right:5px; cursor:pointer;}
}
.sms{display:none;}
@media screen and (max-width: 580px)
{
	.sms {display:block; padding-top:0px; padding-right:5px; cursor:pointer;}
}
.down{display:none;}
@media screen and (min-width: 580px)
{
	.down {display:block; padding-top:0px; padding-right:5px; cursor:pointer;}
}


/*top_list*/
.top_list{background:url('../Images/bg_middle.png');padding-bottom:10px;}
.top_list ul{text-align:center;}
.top_list ul > li{height:122px;}
.top_list h1{font-size:18px;font-weight:bold; color:#fff;padding:15px 25px;}
.top_list strong{font-size:16px;font-weight:bold; color:#fff;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;width:147px;margin:0 auto;}
.top_list img{max-width:147px;border:none;display:inline-block;max-width:147px}
.top_list a.active > img{border:3px solid #fff;}
.top_list a{color:#fff;}
.top_list a.active > *,
.top_list a:hover > *,
.top_list a:focus > *{color:#ffd800;}

.top_list.live ul > li{height:80px;}
.top_list.live a{color:#c9cacd;}
.top_list.live a.active > *{color:#ffd800;font-size:16px;}
.top_list.live strong{color:#c9cacd;font-size:16px;}

.top_list.best a{color:#c9cacd;}
.top_list.best a.active > *,
.top_list.best a:hover > *,
.top_list.best a:focus > *{color:#ffe400;font-size:14px;}
.top_list.best strong{color:#c9cacd;font-size:14px;}

.top_list.sub{background:#fff;}
.top_list.sub a{color:#838383;}
.top_list.sub a.active > *,
.top_list.sub a:hover > *,
.top_list.sub a:focus > *{color:#2d8cdd;font-size:14px;}
.top_list.sub h1{color:#000;padding:15px 25px;}
.top_list.sub strong{color:#838383;font-size:14px;}
.top_list.sub a.active > img{border:none;}



/*live_list*/
.live_list{background:url('../Images/bg_middle.png');padding-bottom:10px;}
.live_list ul{text-align:center;}
.live_list ul > li{height:100%;}
.live_list h1{font-size:18px;font-weight:bold; color:#fff;padding:15px 25px;}
.live_list strong{font-weight:bold; color:#fff;display:block;margin:0 auto;}

@media screen and (max-width: 580px)
{
	.live_list strong{width:85px;}
	.live_list a > *{color:#c9cacd;font-size:.9em;}
	.live_list a.active > *{color:#ffd800;font-size:.9em;}
}

@media screen and (min-width: 581px)
{
	.live_list strong{width:110px;}
	.live_list a > *{color:#c9cacd;font-size:1.2em;}
	.live_list a.active > *{color:#ffd800;font-size:1.2em;}
}


.icon{width:84px;height:53px;display:inline-block;}
.menu1{background:url('../Images/icon_category_mike.png') no-repeat;}
.menu2{background:url('../Images/icon_category_building.png') no-repeat;}
.menu3{background:url('../Images/icon_category_news.png') no-repeat;}
.menu4{background:url('../Images/icon_category_oaep.png') no-repeat;}
.menu5{background:url('../Images/icon_category_movie.png') no-repeat;}
.menu6{background:url('../Images/icon_category_lecture.png') no-repeat;}
.menu7{background:url('../Images/icon_category_book.png') no-repeat;}
.menu8{background:url('../Images/icon_category_special.png') no-repeat;}
.menu9{background:url('../Images/icon_category_lecture.png') no-repeat;}

.active > .menu1{background:url('../Images/icon_category_mike_selected.png') no-repeat;}
.active > .menu2{background:url('../Images/icon_category_building_selected.png') no-repeat;}
.active > .menu3{background:url('../Images/icon_category_news_selected.png') no-repeat;}
.active > .menu4{background:url('../Images/icon_category_oaep_selected.png') no-repeat;}
.active > .menu5{background:url('../Images/icon_category_movie_selected.png') no-repeat;}
.active > .menu6{background:url('../Images/icon_category_lecture_selected.png') no-repeat;}
.active > .menu7{background:url('../Images/icon_category_book_selected.png') no-repeat;}
.active > .menu8{background:url('../Images/icon_category_special_selected.png') no-repeat;}
.active > .menu9{background:url('../Images/icon_category_lecture_selected.png') no-repeat;}



/*media_list*/
#media_list{padding:10px 15px;overflow:hidden;zoom:1;}


#media_list .media{margin:10px 15px;height:100px;clear: both;border-bottom:1px solid #e1e1e1;}
#media_list .thumb_area{position:relative;}
#media_list .thumb_area > i{font-style:normal;font-size:13px;display:none;padding:3px 6px;background:#f65555;color:#fff;position:absolute;top:0;left:0;}
#media_list .thumb_arrow{position:absolute;top:102px;left:62px;color:#383e4d;font-size:2em;display:none;}
#media_list .active .thumb_area > i{display:block}
#media_list .active .thumb_area > .thumb_arrow{display:block}
#media_list img.media_thumb{margin-right:10px;vertical-align:middle;max-width:147px}
#media_list .media h1{font-size:20px;color:black;display:block;line-height:1.2em;text-overflow:ellipsis;overflow:hidden;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#media_list .media .active h1{color:#2085db;}
#media_list .cont{color:gray;font-size:15px;margin:5px 0;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
#media_list small.time{font-size:15px;color:#7d7d7d;line-height:30px;}
#media_list .resultEnd { width:100%; margin:30px 0 30px 20px; font-size:16px; text-align:center;}
#media_list .resultMore { width:100%; padding:30px 0 30px 20px; border:1px solid gray; text-align:center; font-size:20px; font-weight:bold; cursor:pointer; }
.live_time{font-size:17px;color:#2085db;font-weight:bold;}

@media screen and (min-width: 960px){
	#media_list li:nth-last-child(-n+2){border-bottom:none;}
}


/*footer*/
#footer{border-top:2px solid #2085db;padding:10px 15px;}
#footer > ul{overflow:hidden;zoom:1;margin:0;}
#footer > ul > li{margin:10px;float:left;}
#footer .notice{border-bottom:1px solid #e1e1e1;padding-bottom:10px;min-width:320px;}
#footer .notice h1{font-size:14px;color:#2085db;font-weight:bold;margin-right:5px;display:inline-block;}
#footer p{line-height:1.5em;}
#footer strong{font-size:12px; color:#2085db;}
#footer .notice img{vertical-align:middle;}

.addr{font-size:12px; color:gray;margin:10px;}
.addr dl{overflow:hidden;}
.addr dt{font-size:12px; color:#2085db;padding-top:5px; margin-left:5px;float:left;}
.addr dd{font-size:12px; color:gray;padding-top:5px;float:left;}


/*search*/
.cont_title{min-height:60px;background:#f3f2f7;padding:10px 20px;}
.cont_title h1{font-size:17px;color:black;font-weight:bold;padding:10px 20px;text-indent:5px;}
.cont_title h1 span{font-size:14px;color:gray;}
.cont_title h1 strong{font-size:14px;color:#2085db;}
.cont_title .search{padding:10px;background:#fff;border:1px solid #e2e2e2;margin:0 10px;}
.cont_title input{border:none;outline:none; font-size:16px;width:80%;}
.cont_title button{color:#2085db;border:none;outline:none; background:#fff;background-color:transparent;font-size:14px;}



/*notice*/
section.notice{margin:20px;}
.notice_list {font-size:14px; width:100%;height:100%; border-spacing:0;}
.notice_list th,
.notice_list td{padding:10px;text-align:center;}
.notice_list thead th{color:#005eb6;} 
.notice_list thead tr{border-bottom:2px solid #006eb6;}
.notice_list tbody tr{border-bottom:1px solid #e9e9e9;}

/*notice_detail*/
aside.file{margin:10px;text-align:right;}
aside.file a{color:gray; display:block;margin-bottom:10px;}
.notice_cont{margin:20px 10px;min-height:200px;}
.notice_list.detail th{padding:10px 5px; text-align:right;}
.notice_list.detail thead th{color:#000;}
.notice_list.detail tbody tr{border-bottom:2px solid #006eb6;}

.notice_list.pager tbody tr:last-child{border:none;}
.notice_list.pager tbody tr > td:first-child{white-space:nowrap;}

@media only screen and (max-width: 500px) {
	.notice_list col:nth-child(1), 
	.notice_list tbody td:nth-child(1), 
	.notice_list th:nth-child(1) {display: none;}

	.notice_list.detail col:nth-child(1), 
	.notice_list.detail tbody td:nth-child(1), 
	.notice_list.detail th:nth-child(1) {display: table-cell;}

	.notice_list.pager col:nth-child(1), 
	.notice_list.pager tbody td:nth-child(1), 
	.notice_list.pager th:nth-child(1) {display: table-cell;}

	.notice_list.pager col:nth-child(3), 
	.notice_list.pager tbody td:nth-child(3), 
	.notice_list.pager th:nth-child(3),
	.notice_list.pager col:nth-child(4), 
	.notice_list.pager tbody td:nth-child(4), 
	.notice_list.pager th:nth-child(4) {display: none;}
}

@media only screen and (max-width: 380px) {
	.notice_list col:nth-child(1), 
	.notice_list tbody td:nth-child(1), 
	.notice_list th:nth-child(1),
	.notice_list col:nth-child(3), 
	.notice_list tbody td:nth-child(3), 
	.notice_list th:nth-child(3) {display: none;}
}

@media only screen and (max-width: 600px){
	.notice_list.detail col:nth-child(2), 
	.notice_list.detail tbody td:nth-child(2), 
	.notice_list.detail th:nth-child(2),
	.notice_list.detail col:nth-child(3), 
	.notice_list.detail tbody td:nth-child(3), 
	.notice_list.detail th:nth-child(3),
	.notice_list.pager col:nth-child(3), 
	.notice_list.pager tbody td:nth-child(3), 
	.notice_list.pager th:nth-child(3) {display: none;}
}

/*404 error*/
.error{margin:100px;border:1px solid #e1e1e1; border-radius:10px;padding:50px;overflow:hidden;}
.error table{width:99.9%;}
.error table td{padding-right:5px;}
.error h1{font-weight:bold;color:#3a3a3a;font-size:2em;margin:10px 0;}
.error h2{font-weight:bold;color:#aaaaaa;font-size:1.5em;margin-bottom:20px;}
.error p{color:#2085db;font-size:14px;line-height:1.2em;}
.error a{margin-top:20px;}

@media only screen and (max-width: 700px){
	.error{margin:50px;padding:25px;}
}

@media only screen and (max-width: 500px){
	.error{margin:25px;padding:15px;}
	.error h1{font-size:1.5em;}
	.error h2{font-size:1.2em;}
	.error p{font-size:1em;}
}

@media only screen and (min-width: 501px){
	.bggra {
		background-image:-webkit-linear-gradient(to left, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
		background-image:linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
		z-index:1;
		position:absolute;
		top:0px;
		left:0px;
		width:100%;
		height:100%;
	}
}

.bggray { background-color:#eee }

.play {z-index:2;}

.form-signin {
    width: 80%;
    max-width: 440px;
    margin: 0 auto;
    margin-top: 50px;
}

.form-signin .form-signin-heading,
.form-signin .checkbox {
  margin-bottom: 10px;
}
.form-signin .checkbox {
  font-weight: normal;
}
.form-signin .form-control {
  position: relative;
  height: auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
}
.form-signin .form-control:focus {
  z-index: 2;
}
.form-signin input[type="UserID"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.SigninErr {
  margin:10px 0 10px 0;
  color:red;
}
#url-link-btn{
    cursor:pointer; float:right;
}


.cate_menu {position:relative;display:inline-block;}
.cate_menu i{font-style:normal;font-size:13px;padding:3px 6px;background:#f65555;color:#fff;position:absolute;top:0;right:0;display:block;}

.lnb_menu{position:relative;}
.badge2 {
  position:absolute;
  top:5px;
  right:2px;
  display: block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #F65555;
  border-radius: 11px;
}

.badge3 {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #F65555;
  border-radius: 11px;
}

.open_gb_n{filter: alpha(opacity=20);opacity: .2;}
.open_gb_n strong{filter: alpha(opacity=20);opacity: .2;}

.live_list ul > li > a.active > *{color:#ffd800;font-size:1.2em;}

.cont > a{display:block;margin-top:10px;color:#fff;font-weight:bold}
.cont > a:hover{color:#ffd800}


/*2024.11.25 whd 추가 - 배속기능 추가*/
#player {position: relative;}

/* 팝업 스타일 */
#speed-popup {
	position: absolute;
	background: white;
	border: 1px solid #ccc;
	padding: 10px;
	border-radius: 5px;
	z-index: 9999;
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	width: 120px;
	text-align: center;
	display: none;
	top: 0;
	right: 0;
}

#speed-popup ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#speed-popup li {
	padding: 5px 10px;
	cursor: pointer;
	border-bottom: 1px solid #eee;
}

#speed-popup li:last-child {
	border-bottom: none;
}

#speed-popup li:hover {
	background: #f5f5f5;
}

/* 둥근 버튼 스타일 */
.jw-icon-speedButton {
	background-color: #007BFF !important;
	color: white !important;
	font-size: 14px !important;
	font-weight: bold !important;
	padding: 8px 12px !important;
	border-radius: 20px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	border: none !important;
	width: auto !important;
	height: auto !important;
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2) !important;
}


#player [button='speedButton'] {
	display: flex;
	justify-content: center;
	align-items: center;
}

#player [button='speedButton']:after {
	content: var(--after-content, '배속');
	color: #fff;
	position: absolute;
}

@media screen and (max-width: 800px) {
	#speed-popup{
		top:50%;
		right:auto;
		left:50%;
		transform : translate(-50%, -50%);
	}
}