.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
.delay1{animation-delay:0.5s;-webkit-animation-delay:0.5s}
.delay2{animation-delay:1.0s;-webkit-animation-delay:1.0s}
#articleInfo20 ul.topBox{display:grid;grid-template-columns:repeat(3,1fr);width:min(90%,900px);margin:0 auto}
#articleInfo20 ul.topBox li{animation-name:fadeInDown;-webkit-animation-name:fadeInDown;margin:10px}
#articleInfo20 ul.topBox li.focus{padding:55px 25px;background:#caa34b;border-color:#775e27;color:#242425}
#articleInfo20 ul.topBox li h3 a{font-size:17px;background:#CC81A9;display:block;text-align:center;padding:17px 0;font-weight:400;letter-spacing:1px;border-radius:90px;color:#fff}
#articleInfo20 ul.topBox li h5{font-size:16px;color:#caa34b}
#articleInfo20 ul.topBox li.focus h5{color:#fff}
#articleInfo20 ul.topBox li p.photo{margin:15px 0}
#articleInfo20 .bottomBox h3{text-align:center;font-size:30px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .bottomBox p{margin:40px 0;padding:0 10%;text-align:center;font-size:18px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;line-height:2.2}
#articleInfo20 .bottomBox article{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}

.historyContentBox .TTTxt{width:100%;padding:10px 30px;border-left:4px solid #e7e7e7;padding-left:40px;margin:40px 0 0px 0}
.historyContentBox .TTTxt p{font-size:20px;color:#000;margin-bottom:10px;font-weight:600}
.historyMainArea>.wrap{width:1200px;padding-left:20px;padding-right:20px}
.historyContentBox{padding: 40px 0;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;margin-bottom: 60px;}
.historyContentBox >p{text-align:center;margin: 30px 0;}
.historyContentBox h3{font-size:25px;margin-bottom:0px;font-weight:600}
.historyContentBox .yearLine{font-size:34px;padding-right:40px;font-family: "Cormorant Garamond", serif;color: #53545e;font-weight: 500;line-height: 1.5;}
.historyList{position:relative;max-width:100%;margin-left:auto;margin-right:auto;padding: 40px 0;}
.historyList::before{content:'';position:absolute;top:0;left:120px;width:1px;height:100%;background:linear-gradient(to bottom,#e5e5e5 0,#e5e5e5 100%) 0 0 no-repeat}
.historyContentBox ul li.show{display:flex;margin: 0 0 10px 0;align-items:center;position:relative;overflow:hidden;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
.historyContentBox ul li.show::after{content:"";position:absolute;top:-10px;left:120px;width:1px;height:calc(100% + 10px * 2);background-color:#e5e5e5}
.historyContentBox .historyItemList li{padding: 20px 0;}
.historyContentBox ul li .tit{color:#898f97;text-align:center;position:relative;display:flex;align-items:center;justify-content:space-between;width:170px;z-index:10}
.historyContentBox ul li .tit h3 i{color:#d5d5d5;text-align:center;font-size:34px;margin:10px}
.yearLine{position:relative;display:flex;text-align:center;font-size:25px;align-items:baseline;font-weight:600;color:#535353}
.yearLine span{color:#e3e3e3;font-size:17px;font-weight:400;line-height:1;letter-spacing:1px;display:inline-block;text-align:center;display:none}
.historyContentBox ul li .tit::before{content:"";position:absolute;top: calc(50% - 6px);z-index:3;width:14px;height:14px;border-radius:50%;border: 1px solid var(--secondary);right: 21px;}
.historyContentBox ul li .tit::after{content:"";position:absolute;top:calc(50% - 1px);width:4px;height:4px;border-radius:50%;background-color: var(--secondary);-webkit-box-shadow: 0 0 0 10px #fbfbfb;right: 26px;}
.yearLine::before{position:absolute;top:50%;left:136px;width:9px;height:9px;margin-top:-4.5px;display:none}
.monthRound{position:absolute;top:16px;left:-30px;z-index:1;display:flex;justify-content:center;align-items:center;width:0px;height:0px;font-size:15px;font-family:Arial,Helvetica,"Noto Sans TC",sans-serif;font-weight:bold;color:#494949;background-color:#ffffff;border-radius:5%;border:1px solid #dddddd;box-shadow:0 0 0 4px #dddddd,0 0 0 9px #fff}
.monthRound::after{content:'.';display:none}
.historyItemList{padding-top:0px;padding-bottom:0px;padding-left:20px;padding-right:20px;width:calc(100% - 0px)}
.historyItemList li{position:relative}
.historyItemList li{color:#333;position:relative}
.historyItemList li+li{margin-top:10px}
.historyItemList li .textEditor.clearfix{overflow:hidden;color:#535353;position:relative;font-weight:600;display:flex;flex-direction:column}
.historyItemList li .textEditor.clearfix h5{color: var(--secondary);font-size: 20px;}
.historyItemList li .textEditor.clearfix p{padding:10px 0;margin:0;line-height:160%;display:inline-block;font-size:16px;color: #444;font-weight: 400;}
.historyItemList li .textEditor.clearfix .leftBox{overflow:hidden;float:left;width:57%}
.historyItemList li .textEditor.clearfix .leftBox h2{font-size:22px;padding-bottom:10px;color:#000}
.historyItemList li .textEditor.clearfix .leftBox article{color:#4b4b4b;font-weight:500;font-size:15px}
.historyItemList li .textEditor.clearfix .rightBox{overflow:hidden;float:right;width:40%}
.historyItemList .textEditor{font-size:18px}
.historyQuickLinkBox{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin-bottom:75px}
.historyLinkItem{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center;padding:5px 20px;border-radius:30px;border:1px solid #1884c4}
.historyLinkItem::before{content:'';margin-right:20px;font-size:16px;color:#373737}
.historyLinkItem a{position:relative;z-index:1;padding:10px 20px;border-radius:30px;font-family:Arial,Helvetica,"Noto Sans TC",sans-serif;color:#777;overflow:hidden}
.historyLinkItem a+a{margin-left:10px}
.historyLinkItem a::before{content:'';position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;background:linear-gradient(to right,#2d77bc 0,#29bc9f 100%) 0 0 no-repeat;opacity:0}


@media (max-width:1240px){
	.historyMainArea>.wrap{width:100%}
}
@media (max-width:1280px){
	.historyContentBox{padding-left:0px}
	.historyContentBox ul li .tit{width:175px}
}
@media (max-width:1180px){
	.historyQuickLinkBox{display:none}
}
@media (max-width:1024px){
	.historyList::before,.historyContentBox ul li.show::after{left:117px}
}
@media (max-width:960px){
	.historyList::before,.historyContentBox ul li.show::after{left:114px}
}
@media screen and (max-width: 768px) {
	#articleInfo20 .bottomBox p{padding:0}
	#articleInfo20 ul.topBox{grid-template-columns:repeat(2,1fr)}
	#articleInfo20 ul.topBox li{margin:10px}
	.historyList::before,.historyContentBox ul li.show::after{left:108px}
	.historyContentBox .historyItemList li{padding:20px 0}
	.historyContentBox ul .show::before{left:10%}
}
@media (max-width:767px){
	.historyList{padding-top:30px;margin-top:20px}
	.historyList::before,.historyContentBox ul li.show::after{left: 66px;}
	.yearLine{font-size:17px}
	.historyContentBox ul li .tit{width:117px}
	.yearLine span{font-size:15px}
	.yearLine::before{left:21.5px}
	.yearLine::after{display:none}
	.monthRound{left:-18px;box-shadow:0 0 0 3px #dddddd,0 0 0 9px #fff}
	.historyItemList{width:calc(100% - 30px);padding-left:0}
	.historyItemList li .textEditor.clearfix .leftBox,.historyItemList li .textEditor.clearfix .rightBox{overflow:hidden;float:none;width:100%}
	.historyItemList li+li{margin-top:12px}
	.historyItemList .textEditor{padding-top:0px;font-size:14px}
	.historyItemList li .textEditor.clearfix p{}
	.historyContentBox .yearLine{font-size:23px}
}
@media screen and (max-width: 480px) {
	#articleInfo20 ul.topBox{grid-template-columns:repeat(1,1fr)}
}
@media (max-width:425px){.historyContentBox ul li .tit{width:134px}
}