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

	SUPERBOARD :: HISTORY SKIN :: basic

**************************************************/
.his-wrap{position: relative;border-top: 1px solid #000;padding-top: 20px; min-height: 1000px;}
.his-wrap:after {display:block; content:''; clear:both;}
.imgbox {width:300px;  margin-top:20px; }
.imgbox .his_img {width:100%;}
.imgbox .his_img .img{width:100%; height:0; padding-bottom:100%; position:relative; box-shadow: 0 0 10px rgba(0,0,0,0.3); margin-bottom:40px;}
.imgbox .his_img .img img {position:absolute; top:0; left:0; width:100%; height:100%;}

.his-wrap .his_info {position: absolute; transform:translateY(-50%); top:50%; left:450px;width:calc(100% - 450px); }
.his-wrap .box{padding-left: 150px; width:100%; box-sizing:border-box; position:relative; }
.his-wrap .box .year{position: absolute;top: 60px;left: 0;font-size: 32px;color: #000000;letter-spacing: -1px;font-weight: 300;}
.his-wrap .box ul{border-bottom: 1px solid #ddd;padding:60px 0;}
.his-wrap .box ul li{position: relative;padding: 10px 0 10px 45px;}
.his-wrap .box ul li .month{position: absolute;top: 8px;left: 0;font-size: 16px;color: #2e76bc;letter-spacing: -1px;font-weight: 300;}
.his-wrap .box ul li p{font-size: 16px;color: #000000;letter-spacing: -1px;line-height: 20px;}

.his-wrap .box:last-child ul{border-bottom: none;}




@media screen and (max-width: 1400px){

    .his-wrap{padding-top: 15px;padding-left: 0;min-height: 0;}
	.imgbox  {width:100%; float:none; margin:30px 0;}
	.imgbox:after {display:block; content:''; clear:both;}
	.imgbox .his_img {width:calc(25% - 12px); float:left; margin-right:16px; margin-top:16px;}
	
    .his-wrap .his_info { position:relative; top:auto; left:auto; transform:translate(0); width:100%;}
    .his-wrap .box{padding-left: 70px; float:none; width:100%;}
    .his-wrap .box .year{top: 15px;left: 5px;font-size: 18px;}
    .his-wrap .box ul{padding: 15px 0;}
    .his-wrap .box ul li{padding: 5px 0 5px 40px;}
    .his-wrap .box ul li .month{top: 4px;font-size: 13px;}
    .his-wrap .box ul li p{font-size: 13px;line-height: 17px;}
    .his-wrap .imgs{font-family: empty;font-size: 0;white-space: nowrap;margin-bottom: 20px;}

}

@media screen and (max-width: 1400px){

	.imgbox  .his_img {width:calc(50% - 10px); margin-right:20px; margin-top:20px;}
	.imgbox  .his_img:nth-child(2n) {margin-right:0;}

}