/* -----------------------
:: Mobile Hidden
----------------------- */
@media screen and (min-width: 0px) and (max-width: 1023px) {
  #my-content { display: block; }  /* show it on small screens */
}

@media screen and (min-width: 0px) and (max-width: 1023px) {
  #my-content { display: none; }   /* hide it elsewhere */
}


@media screen and (min-width: 881px) and (max-width: 3480px) {
  #my-content2 { display: none; }   /* hide it elsewhere */
}  
/*-----------------------------------*/


/* -----------------------
:: 상단 고정
----------------------- */
body {
  padding-top: 136px;
  /* 생략 */
}
@media screen and (min-width: 0px) and (max-width: 1023px) {
body {
  padding-top: 94px;
}
 }
 
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0px;
  z-index:88888;
}

.header {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  height: 0px;
  z-index:88888;

}


/*-----------------------------------*/

.black_overlay{
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index:99999;
	-moz-opacity: 0.9;
	opacity:.90;
	filter: alpha(opacity=90);
}

.white_content {
	display: none;
	position: absolute;
	top: 30%;
	left: 40%;
	width: 15%;
	height: 10%;
	padding: 10px;
	border: 5px solid orange;
	background-color: white;
	z-index:99999;
	overflow: auto;
}

/*styling open close button*/

.button img{
 display: inline;
 position: absolute;
 left: -20px;
 top: -10px;
 bottom: 20px;
 z-index: 99999;
 width: 70px;
}

.button2 img{
 display: inline;
 position: absolute;
 left: 145px;
 top: -10px;
 bottom: 20px;
 z-index: 99999;
 width: 70px;
}

@media screen and (min-width: 1025px) and (max-width: 1099px) {
.button2 img{
 left: 60px;
 top: -10px;
}
 }

 @media screen and (min-width: 1100px) and (max-width: 1199px) {
.button2 img{
 left: 80px;
 top: -10px;
}
 }
 
 @media screen and (min-width: 1300px) and (max-width: 1399px) {
.button2 img{
 left: 130px;
 top: -10px;
}
 }
 
.button_m img{
 display: inline;
 position: fixed;
 margin-left: -10px;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}

@media screen and (min-width: 0px) and (max-width: 320px) {
.button_m2 img{
 display: inline;
 position: fixed;
 margin-left: 80%;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}
}


@media screen and (min-width: 321px) and (max-width: 666px) {
.button_m2 img{
 display: inline;
 position: fixed;
 margin-right: 0%;
 margin-left: 84%;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}
}
@media screen and (min-width: 667px) and (max-width: 736px) {
.button_m2 img{
 display: inline;
 position: fixed;
 margin-right: 0%;
 margin-left: 90%;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
.button_m2 img{
 display: inline;
 position: fixed;
 margin-right: 0%;
 margin-left: 90%;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}
}
@media screen and (min-width: 1023px) and (max-width: 1024px) {
.button_m2 img{
 display: inline;
 position: fixed;
 margin-right: 0%;
 margin-left: 80%;
 top: -15px;
 bottom: 0px;
 z-index: 99999;
 width: 70px;
}
}

/*overlay*/
.overlay{
 display: none;
 position: fixed;
 top: 135px;
 height: 100%;
 width: 100%;
 background: #ffffff;
 overflow: auto;
  z-index: 88888;
}

@media screen and (min-width: 0px) and (max-width: 880px) {
.overlay{
 display: none;
 position: fixed;
 top: 98px;
 height: 100%;
 width: 100%;
 background: #ffffff;
 overflow: auto;
  z-index: 88888;
}
 }
 
.overlay2{
 display: none;
 position: fixed;
 top: 135px;
 height: 100%;
 width: 100%;
 background: #ffffff;
 overflow: auto;
  z-index: 88888;
}

@media screen and (min-width: 0px) and (max-width: 880px) {
.overlay2{
 display: none;
 position: fixed;
 top: 98px;
 height: 100%;
 width: 100%;
 background: #ffffff;
 overflow: auto;
  z-index: 88888;
}
 }
 

.wrap{
 color: #fff;
 text-align: center;
 max-width: 1100px;
 margin: 0 auto;
}


.wrap ul.wrap-nav{
 border-top: 0px solid #575757;
 border-bottom: 1px solid #575757;
 text-transform: capitalize;
 padding: 0px 0px 0px 0px;
}
.wrap ul.wrap-nav > li{
 font-size: 20px;
 display: inline-block;
 vertical-align: top;
 width: 23%;
 position: relative; 
}
.wrap ul.wrap-nav > li a{
 color: #030326;
 display: block;
 padding: 3px 0;
 text-decoration: none;
}
.wrap ul.wrap-nav > li a:hover{
 color: #d60000;
}
.wrap ul.wrap-nav ul{
 padding: 3px 0;
}
.wrap ul.wrap-nav ul li{
 display: block;
 font-size: 13px;
 width: 100%;
 color: #000000;
}
.wrap ul.wrap-nav ul li a{
 color: #000000;
}


@media screen and (max-width: 48em) {
 .wrap ul.wrap-nav > li{
 width: 100%;
 padding: 4px 0;
 border-bottom: 1px solid #575757;
 }
 .wrap ul.wrap-nav{
 padding: 5px 0px 0px;
 }

 .button{
 top: 0;
}

 .button2{
 top: 0;
}

 .buttonm{
 top: 0;
}

 .buttonm2{
 top: 0;
}


}