@charset "utf-8";
/* CSS Document */

#main { background:url(../images/bg01.jpg) center top no-repeat; background-size:cover;background-attachment: fixed; position: relative; z-index: 0;}

#main #box {display:flex; padding:10%;}

#about { flex:1;}
#about .title { margin-bottom:50px;}
#about .title dt { font-size:50px; font-weight:bold; margin-bottom:20px;}
#about .title dd { font-size:20px; font-weight:bold; margin-bottom:20px;}

#hot {
	width: 535px;
    height: 409px;
    background: url(../images/p01.png) center top no-repeat;
    background-size: contain;
    padding: 53px 118px;
	margin-left: 20px;
}
#hot > div { height: 302px;  width: 300px; overflow: hidden;}

#news { background:url(../images/icon01.png) left top repeat-x, url(../images/bg02.png) center bottom no-repeat;display:flex; padding-bottom:120px;}
#news .title { padding:4% 2% 3%; background-color:#FFC; margin:20px auto 0; font-size:large; font-weight:bold; width:calc(100%/4); position:relative;}
#news .title dt { font-style:italic; margin-bottom:20px;}
#news .title dd { }
#news .title:before {
	content: "";
    width: 100%;
    height: 40px;
    position: absolute;
    top: -26px;
    left: 0;
    background: url(../images/icon02.png) 10% top no-repeat, url(../images/icon02.png) 90% top no-repeat;
}
#news .title:hover { box-shadow:0 20px 50px #ddd;}

@media screen and (max-width:968px) {
	#main #box { display:block;}
	#hot { margin:20px auto;}
}
@media screen and (max-width:768px) {
	#main { background-size:contain;}
	#about { margin-bottom:50px;}
	#about .title dt { font-size: 35px;}
	#about .title dd { font-size: 18px;}
}
@media screen and (max-width:568px) {
	#hot {width: 300px; height: 260px;    padding: 30px 67px;}
	#hot > div { height: 168px; width: 166px;}
	
	#news { display:block;background: url(../images/bg02.png) center bottom no-repeat; background-size: contain;    padding-bottom: 30px;}
	#news .title { width:80%;    margin: 80px auto;padding: 10% 5%; position:relative;}
	#news .title:after { content:""; width:200%; height:100%; position:absolute; top:-20px; left:-50%; z-index:-1;background:url(../images/icon01.png) left top repeat-x;}
}
@media screen and (max-width:368px) {
	
}