﻿#brand-history-list{padding-bottom:160px}
#brand-history-list:after{content:'';display:block;width:0;height:0;clear:both}
#brand-history-list li{position:relative;height:150px;width:50.6%;background-size:auto 80%!important}
#brand-history-list li h2{color:var(--fontcolor);font-size:40px;white-space:nowrap;-webkit-transition:.3s;-moz-transition:.3s;transition:.3s}
#brand-history-list li:hover h2{color:var(--color)}
#brand-history-list li .img{position:absolute;bottom:0;left:0;max-width:200px;height:auto}
#brand-history-list li .img .img-sig{display:flex;justify-content: space-between;flex-wrap:wrap;position: relative;}
#brand-history-list li .img .img-sig:after{content:'';width:90%;height:1px;position: absolute;top:50%;left:50%;background: var(--color);display:block;transform: translate(-50%,-50%);}
#brand-history-list li .img .img-sig:before{content:'';width:1px;height:90%;position: absolute;top:50%;left:50%;background: var(--color);display:block;transform: translate(-50%,-50%);}
#brand-history-list li .img .img-sig img{width:50%;display:block;padding:2px;}
#brand-history-list li .img img{transition:all .3s ease}
#brand-history-list li:hover .img img{transform:scale(1.03)}
#brand-history-list li p{color:var(--introcolor);-webkit-transition:.3s;-moz-transition:.3s;transition:.3s;max-height:170px;overflow:hidden;line-height:1.5}
#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/m407/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/m407/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%}
#brand-history-list li:nth-of-type(2n) .img{left:auto;right:0} */
#brand-history-list li.left,#brand-history-list li:nth-of-type(2n){float:left;background:url(https://css02.v15cdn.com/m407/history_01.webp) 100% 100% no-repeat}
#brand-history-list li.left h2,#brand-history-list li:nth-of-type(2n) h2{position:absolute;bottom:10%;right:10%;left:auto;}
#brand-history-list li.left p,#brand-history-list li:nth-of-type(2n) 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+1){float:right;background:url(https://css02.v15cdn.com/m407/history_02.webp) 0 100% no-repeat}
#brand-history-list li.right h2,#brand-history-list li:nth-of-type(2n+1) h2{position:absolute;bottom:10%;left:10%}
#brand-history-list li.right p,#brand-history-list li:nth-of-type(2n+1) p{position:absolute;top:105%;left:7%;width:84%;text-align: left;}
#brand-history-list li:nth-of-type(2n+1) .img{left:auto;right:0}
@media (max-width:640px){#brand-history-list li h2{font-size:32px}
#brand-history-list li .img{max-width:80px}}
@media (max-width:500px){#brand-history-list li{height:170px;}
#brand-history-list li p{font-size:13px;line-height: 1.3;max-height: 200px;}}

#brand-history-list li p.p2{padding-top:8%;width:calc(100% - 210px)}
#brand-history-list li .img2{position: absolute;bottom:-110%;}
@media (max-width:1440px){#brand-history-list li p.p2{padding-top:10%;}}
@media (max-width:768px){#brand-history-list li p.p2{max-height:250px;min-height:250px;padding-top:12%;}}
@media (max-width:550px){#brand-history-list{padding-bottom:240px;}
#brand-history-list li p.p2{max-height:260px;min-height:260px;padding-top:75px;width:50%;}}