/* xl - Extra large devices (large desktops, 1200px and up) */


@media (min-width: 1800px)and (max-width:2000px) {

	#datetop{transform: translate(75px,25px) rotate(10deg)}
	#banner{width: 65%}
	#listdate{transform: translate(59vw,0px)}
	
}



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


#datetop{
	
	transform: translate(40px,-5px) rotate(10deg);
	font-size:11px;

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

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

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

#logo{
	height:60px;
}
#datetop{
	font-size:10px;
	transform: translate(40px,5px) rotate(10deg);


}
	
}
@media (min-width: 768px) and (max-width: 992px){

#header {
	
	    background: url(../images/topbg2.jpg);

  
    background-repeat: no-repeat;
    background-size: cover;
	height:240px;

	
}
#logo{
	height:50px;
}	
#datetop{
	font-size:7px;
	display:block;
	width:30%;
	text-align:center;
	margin:0 auto;
	transform:inherit;
	margin-bottom:-35px;
	background:#404e91;
}
#period{
  margin-top: -100px;
}
#banner{
	
	height:200px;
	transform: translateY(40px);
}

#listdate {
    width: 30%;
    transform: translate(55vw,20px);
}
#information{
	padding-top:50px;
}

}
@media (max-width: 767px){
#header {
	
	width:100%;
	height:200px;
	background: url(../images/topbg2.jpg);

    background-repeat: no-repeat;
    
	background-size:100% auto;
	
}
#logo{
	
	height:40px;

}
#datetop{
	display:block;
	width:30%;
	text-align:center;
	margin:0 auto;
	height:20px;
	transform:inherit;
	background:#404e91;
}
#period{
    position:absolute;
    top:10px;
    right:10px;
    margin:inherit;
    float:none;
}
#banner{
	
	height:140px;
	transform: translateY(5px);
}


#content{
	width:100%;
}
#post{
	    padding-top: 70px;
}
#listdate{
	width: 100%;
    height: 50px;
    text-align: center;
    transform:inherit;
    background:inherit;
}
#listdate ul {
   
    padding: 32px 0 0 0;
    display: inline;
}

#listdate ul >li {
    text-align: center;
    line-height: 24px;
    display: inline-block;
    background: #52e1f1;
    padding-left: 1px;
    padding-right: 1px;
    width: 31%;
}

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


#footer{
width:100%;	
}

#information{
	padding-top: 0px;
   
}


}