@charset "utf-8";

#viewpoint {max-width:640px; margin: 0 auto; display:block;  position:relative;  height:auto; padding-bottom:200px; }
#main_title {margin: 0; padding:60px;}

#foot_menu {position:fixed;  bottom:0; max-width:640px; width: 100%;bottom:-100%;}
#foot_menu.appear{

-webkit-transition: bottom 0.5s; 
  -moz-transition: bottom 0.5s; 
  -ms-transition: bottom 0.5s; 
  -o-transition: bottom 0.5s; 
  transition: bottom 0.5s;  
  bottom:0;
  z-index:99;
} /* custom: active시 보여지게*/


#foot_menu > ul{
	display:flex;  
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	justify-content: center;
	align-items: flex-end;
}
#foot_menu > ul > li {max-width:170px; width: 20%;}
#foot_menu > ul > li:nth-child(3){margin-bottom: 15px;}
#foot_menu > ul > li > a > span{
	-webkit-mask-size: 90%;
	mask-size: 90%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}


#foot_menu > ul > li:hover > a > span.img_menu{
	background: rgb(62,47,91);
	background: linear-gradient(0deg, rgba(62,47,91,1) -50%, rgba(255,200,87,1) 100%);
	
}
#foot_menu > ul > li > a.active > span.img_menu{
	background: rgb(193,191,191);
background: linear-gradient(0deg, rgba(193,191,191,1) 0%, rgba(175,130,49,1) 100%);
/*	#3E2F5B   #FFC857  */
}


#foot_menu > ul > li:nth-child(1) > a > span.img_menu{-webkit-mask-image: url("/theme/starstream/img/bottom_menu1.png");
	mask-image: url("/theme/starstream/img/bottom_menu1.png");}
#foot_menu > ul > li:nth-child(2) > a > span.img_menu{-webkit-mask-image: url("/theme/starstream/img/bottom_menu2.png");
	mask-image: url("/theme/starstream/img/bottom_menu2.png");}
#foot_menu > ul > li:nth-child(3) > a > span.img_menu{-webkit-mask-image: url("/theme/starstream/img/bottom_menu3.png");
	mask-image: url("/theme/starstream/img/bottom_menu3.png");}
#foot_menu > ul > li:nth-child(4) > a > span.img_menu{-webkit-mask-image: url("/theme/starstream/img/bottom_menu4.png");
	mask-image: url("/theme/starstream/img/bottom_menu4.png");}
#foot_menu > ul > li:nth-child(5) > a > span.img_menu{-webkit-mask-image: url("/theme/starstream/img/bottom_menu5.png");
	mask-image: url("/theme/starstream/img/bottom_menu5.png");}

#foot_menu > ul > li > a {display:block; width:100%; height:auto; position:relative; padding:10px;}
#foot_menu > ul > li > a > span {}
#foot_menu > ul > li > a.waiting > span.img_menu{background: grey;}
#foot_menu > ul > li > a > span.img_menu {	display: inline-block;    width: 100%;    padding-bottom: 110%;	

/*background:white; */

background: rgb(250,188,60);
	background: linear-gradient(0deg, rgba(250,188,60,1) 0%, rgba(250,204,107,1) 100%);


}
#foot_menu > ul > li > a > span.menu_title {position:absolute; left:0; bottom:0; width:100%; text-align:center; padding:10px; font-weight:700; display:none;}
#foot_menu > ul > li:hover > a > span.menu_title{display:block;}

/*소메뉴 준비*/
#broad_cast_menu {
	display: flex;
    /*position: absolute;*/
    
    height: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: stretch;
    justify-content: space-evenly;
    align-items: stretch;
	display:none;
	font-size: 1.2rem;
	
	position:fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);


}

#broad_cast_menu > li{
	padding:1px; margin: 0 0 10px 0;
	border: 1px solid transparent;
    border-radius: 7px;
    background-image: linear-gradient(#111, #111), linear-gradient(to top, #AF8231, #C1BFBF, #AF8231);
    background-origin: border-box;
    background-clip: content-box, border-box;
}

#broad_cast_menu > li > a {width:100%; display:block; padding: 8px 10px; }
#broad_cast_menu > li:hover > a{ background:black;}
#broad_cast_menu > li.noair:hover > a {background:#ff0000; border-radius:5px;}
#broad_cast_menu > li.onair:hover > a {
	border-radius:5px;
	background: linear-gradient(to right, black 50%, pink 50%);
	background-size: 200% 100%;
	background-position: right bottom;
	transition: all .5s ease-out;
}

@media (max-width:640px) {
	#viewpoint { width: 100%; padding-bottom:150px;}
	#main_title {font-size: 3rem; padding:30px 0 20px 0;}


	#broad_cast_menu {position:absolute;right: 20px;
    bottom: 80%;
	top: unset;
    left: unset;
    transform: translate(0, 0);
	font-size: 1rem;
	padding:1px;
	background: #C1BFBF;
	

	border: 1px solid transparent;
    border-radius: 7px;
    background-image: linear-gradient(#111, #111), linear-gradient(to top, #AF8231, #C1BFBF, #AF8231);
    background-origin: border-box;
    background-clip: content-box, border-box;
	
	}
	#broad_cast_menu > li{
		margin: 0 10px 10px 10px;
	}
	#broad_cast_menu > li:first-child{
		margin-top: 20px;
	}
	#broad_cast_menu > li:last-child{
		margin-bottom: 20px;
	}
}