﻿.brand-history-list{padding-bottom:160px}
.brand-history-list:after{content:'';display:block;width:0px;height:0px;clear:both}
.brand-history-list li{position:relative;height:130px;width:50.6%;background-size:auto 80%!important}
.brand-history-list li h2{color:var(--fontcolor);font-size:30px;white-space:nowrap;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s}
.brand-history-list li:hover h2{color:var(--color)}
.brand-history-list li p{color:var(--introcolor);-webkit-transition:.3s;-moz-transition:.3s;transition:.3s;max-height:170px;overflow:hidden}
.brand-history-list li:hover p{color:var(--fontcolor)}
.brand-history-list li.left,.brand-history-list li:nth-of-type(2n+1){float:left;background:url(https://css02.v15cdn.com/m408/history_01.webp) 100% 100% no-repeat}
.brand-history-list li.left h2,.brand-history-list li:nth-of-type(2n+1) h2{position:absolute;bottom:10%;right:10%}
.brand-history-list li.left p,.brand-history-list li:nth-of-type(2n+1) p{position:absolute;top:105%;right:10%;width:84%;text-align:right}
.brand-history-list li.right,.brand-history-list li:nth-of-type(2n){float:right;background:url(https://css02.v15cdn.com/m408/history_02.webp) 0 100% no-repeat}
.brand-history-list li.right h2,.brand-history-list li:nth-of-type(2n) h2{position:absolute;bottom:10%;left:10%}
.brand-history-list li.right p,.brand-history-list li:nth-of-type(2n) p{position:absolute;top:105%;left:10%;width:84%}
@media (max-width:500px){.brand-history-list li h2{font-size: 18px;white-space: normal;line-height: 1.1;}
.brand-history-list li p{max-height:2.5rem}}