@import '../head.spe.css';
.banner { position: relative; overflow: hidden; width: 100%;user-select:none; }
.banner > img { display: block; width: 100%; }
.banner > .content { position: absolute; }
.banner > .content > h1 { font-size: 5.2vw; line-height: 1.8em; text-transform: uppercase; font-weight: normal; position: relative; }
.banner > .content > p { font-family: 'Wulkan Display Italic'; font-size: 3.1vw; line-height: 1.5em; color: #fff;text-shadow:rgba(0,0,0,0.8) 2px 2px 5px;}

.banner > .content { top: 50%; right: 4.2%; margin-top: -11.1vw; text-align: center; }
.banner > .content > h1 { color: transparent; background-image: url('/images/aboutus/history/mark-h1.jpg'); -webkit-background-clip: text; background-clip: text; }

/*history-tree*/
.history-tree { padding:5vw 0 5vw 0; }
.history-tree ul { display: block; position: relative; }
.history-tree ul li { position: relative; overflow: hidden; display: flex; padding: 50px 0; }
.history-tree ul li > .img { width: 60%; display: block;border-radius:6vw 16vw 6vw 16vw;}
.history-tree ul li .cont { width: 40%; }
.history-tree ul li .year { font-size: 72px; line-height: 1.5em; margin-bottom: 10%; margin-top: 10%; }
.history-tree ul li .cont p { font-size: 24px; line-height: 2em; }

.history-tree ul li:nth-child(2n+1) { flex-direction: row-reverse; }
.history-tree ul li:nth-child(2n+1) .cont { width: 40%; padding: 0 4% 0 0; }
.history-tree ul li:nth-child(2n) .cont { width: 40%; padding: 0 0 0 4%; }

.history-tree ul li.big-bg { background: url('/images/aboutus/history/2005.jpg') center right no-repeat; background-size:cover;background-attachment:fixed; height: 45vw; display: block;margin-top:5%;}
.history-tree ul li.big-bg .cont { color: #fff; width: 38vw; margin-top: 6vw; }
.history-tree ul li.big-bg .cont .year { font-size: 4vw; margin-bottom:5%;}
.history-tree ul li.big-bg .cont p { font-size: 1.5vw; line-height: 1.8em;}

.history-tree ul li.long { display: block; padding: 8vw 0; }
.history-tree ul li.long .cont { width: 100%; position: relative; padding-right: 30%; padding-left: 0; margin-top: 0; }
.history-tree ul li.long .cont .year { position: absolute; right: 0; font-size: 72px; line-height: 1.2em; top: 50%; margin-top: -80px; padding-left: 120px; padding-top: 60px; }
.history-tree ul li.long .cont .year::before { content: 'GROWTH'; font-size: 18px; line-height: 3em; position: absolute; font-family: Arial; left: 0; top: 0; }
.history-tree ul li.long .cont .year::after { content: ''; display: block; height: 1px; background: #ababab; overflow: hidden; position: absolute; top: 50%; margin-top: 0; left: -30px; width: 220px; transform: rotateZ(-45deg); }
.history-tree ul li.long .cont p { padding-top: 1.5em;padding-bottom:1.5em; }

.history-tree ul li.big-right { padding: 0; }
.history-tree ul li.big-right .img { width: 50vw; height: 573px; background: url('/images/aboutus/history/2014.jpg') top right no-repeat; }
.history-tree ul li.big-right .cont { width: 50%; max-width: 820px; padding: 2% 8% 2% 2%; }
.history-tree ul li.big-right .cont .year { margin-top: 5%; margin-bottom: 5%; }

.history-tree ul li.equal .img, .history-tree ul li.equal .cont { width: 50%; padding:2vw 0 0 0; }
.history-tree ul li.equal .img img { display: block; width: 90%; border-radius:6vw;}
.history-tree ul li.equal .cont .year { margin-top: 6%; margin-bottom: 5%; }

@media only screen and (max-width:1640px) {
	/*history-tree*/
	.history-tree ul li { position: relative; overflow: hidden; display: flex; padding:3vw 0; }
	.history-tree ul li > .img { width: 55%; }
	.history-tree ul li .cont { margin-left:2.5vw; }
	.history-tree ul li .year { font-size:4vw; width:20vw; }
	.history-tree ul li .cont p { font-size:1.5vw; }

	.history-tree ul li.big-bg .cont {margin-left:2.5vw;}

	.history-tree ul li.long .cont {margin-left:2.5vw;}
	.history-tree ul li.long .cont .year {font-size:4vw;padding-left:7.5vw;padding-top:3.75vw; }
	.history-tree ul li.long .cont .year::before {font-size:1.2vw;}
	.history-tree ul li.long .cont .year::after {left: -2vw;width:14vw;}

	.history-tree ul li.big-right .img {height:30vw;background-size:cover;}
	.history-tree ul li.big-right .cont {padding-left:0%;padding-right:12%;}
	.history-tree ul li .cont p { font-size:1.5vw;line-height:1.4em;}
}

@media only screen and (max-width:768px){
	.history-tree ul li { padding: 50px 0; }
	.history-tree ul li > .img { width: 45%;}
	.history-tree ul li .cont { width:52% !important; margin-left:0;padding-right:2%;}
	.history-tree ul li .cont p {font-size:14px !important;}
	.history-tree ul li.long .cont {width:100% !important;}

	.history-tree ul li.big-bg .cont .year {font-size:28px;width:unset;margin-bottom:5%;}
	.history-tree ul li.big-bg .cont {width:60% !important;}

	.history-tree ul li.long .cont p {padding-top:0.8em;}

	.history-tree ul li .year {font-size:46px;margin-top:0%;}
	.history-tree ul li.long .cont .year {width:180px;padding-left:80px;font-size:30px;}
	.history-tree ul li.long .cont .year::before {font-size:14px;}
	.history-tree ul li.long .cont .year::after {transform:rotateZ(-30deg);left:-8px;width:106px;margin-top:8px;}

	.history-tree ul li.big-right .cont .year {margin-top:0%;margin-bottom:0%;}
	.history-tree ul li.big-right .cont {padding-right:2%;padding-left:2%;}
}

@media only screen and (max-width:560px){
	.banner { height:212px; overflow:hidden;}
	.banner > img { display: block; width:545px; height:212px;position:absolute;left:50%;margin-left:-272px;}
	.banner > .content { margin-top:-60px; }
	.banner > .content > h1 {font-size:30px; }
	.banner > .content > p { font-size:18px;word-spacing:0;}


	.history-tree ul li {display:block; padding: 50px 0 0 0; }
	.history-tree ul li > .img { width:100%;}
	.history-tree ul li .cont { width:100% !important;padding:15px !important;}
	.history-tree ul li .cont p {font-size:14px !important;}
	.history-tree ul li.long .cont {width:100% !important;}

	.history-tree ul li.big-bg {padding:0;height:250px;}
	.history-tree ul li.big-bg .cont .year {font-size:28px;width:unset;margin-bottom:5%;}
	.history-tree ul li.big-bg .cont {width:95% !important;margin-top:3vw;}


	.history-tree ul li .year {font-size:46px;margin-top:0%;margin-bottom:15px;}
	.history-tree ul li.long .cont {overflow:hidden;}
	.history-tree ul li.long .cont .year {position:relative;float:right;clear:both;}
	.history-tree ul li.long .cont .year::before {font-size:14px;}
	.history-tree ul li.long .cont .year::after {transform:rotateZ(-30deg);left:-8px;width:106px;margin-top:8px;}
	.history-tree ul li.long .cont p {padding-top:0;clear:both;}

	.history-tree ul li.big-right .img {height:200px;width:100%;}

	.history-tree ul li.big-right .cont .year {margin-top:0%;margin-bottom:0%;}
	.history-tree ul li.big-right .cont {padding-right:2%;padding-left:2%;}

	.history-tree ul li.equal {padding-bottom:50px;}
	.history-tree ul li.equal .cont .year {margin-top:0;margin-bottom:15px;}
	.history-tree ul li.equal .img {width:100%;height:280px;overflow:hidden;}
	.history-tree ul li.equal .img img {width:100%;}
}