/* xl - Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)and (max-width:1600px){


#datetop{
	transform: translate(37vw,0px);
	font-size:11px;

}
#banner{
	
	height:260px;
	transform: translateY(30px);
}
#listdate ul{
	
	width: 50%;
}

}
@media (min-width: 993px) and (max-width: 1200px){

	
#banner{
	
	height:260px;
	transform: translateY(60px);
}

#logo{
	height:60px;
}
#datetop{
	font-size:10px;
	transform: translate(39vw,10px);


}
#listdate{
	width:90%;
}	
}
@media (min-width: 768px) and (max-width: 992px){

#header {
	
	
	height:300px;

	
}
#logo{
	height:50px;
}	
#datetop{
	
	display:block;
	
	text-align:center;
	margin:0 auto;
	transform:inherit;
	margin-bottom:-35px;
	transform: translate(0px,-70px);
}
#datetop p{
	line-height:95px;
}
#period{
  margin-top: -50px;
}
#banner{
	
	height:200px;
	transform: translateY(-20px);
}

#listdate {
    width: 100%;
    
}
#post{
	margin-top:40px;
}
#information{
	padding-top:50px;
}

}
@media (max-width: 767px){
#header {
	
	width:100%;
	height:220px;
	background-size:100% 100%;
	
}
#logo{
	
	height:40px;

}
#datetop{
	display:block;
	text-align:center;
	margin:0 auto;
	transform:inherit;
	transform: translate(0px,-70px);
}

#datetop p{
	line-height:95px;
	font-size:9px;
	transform:translateX(-5px) rotate(-10deg);
}
#banner{
	width:85%;
	height:150px;
	transform: translateY(-65px);
}
#period{
    position:absolute;
    top:50px;
    right:10px;
    margin:inherit;
    float:none;
}

#content{
	margin:10px auto 0 auto;
	width:100%;
}

#listdate{
	width: 100%;
    height: 30px;
    text-align: center;
    margin-top:inherit;
}

#listdate ul{
	width:55%;
}

#listdate ul >li {
    text-align: center;
    line-height: 30px;
  
    
}

#listdate ul >li >a {
    font-size: 13px;
    color:#404040;
    text-decoration: none;
}

.mobilehidden{
	display: none !important;
}

#post{
	margin-top:40px;
}
#footer{
width:100%;	
}

#information{
	padding-top: 20px;
	padding-bottom:10px;
    
}


}