@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
ol,ul,dl{padding:0 0px}
#articleInfo1 *{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#articleInfo1{overflow:hidden;position:relative}
#articleInfo1 .navbox{background:-webkit-linear-gradient(270deg,#ffffff 0%,#e3e3e3 100%);padding:20px 30px;border-radius:20px;border:2px solid #e6e6e6}
#articleInfo1 .topBar{width:calc(100% - 0px);padding:10px 20px;font-size:1.4em;line-height:1.6em;transition:all 0.3s;display:flex;align-items:center;justify-content:space-between}
#articleInfo1 .topBar:after{content:"";position:absolute;left:0;width:0;border-bottom-color:transparent;border-left-color:transparent;bottom:-16px}
#articleInfo1 .topBar .box{display:flex;text-align:center;align-items:flex-start;flex-direction:column}
#articleInfo1 .topBar .box i{font-size:30px;cursor:pointer;display:flex;align-items:center;border-radius:5px;border:gainsboro 1px solid;padding:7px 12px}
#articleInfo1 .topBar .box .fa span{font-size:15px;margin-left:2px}
#articleInfo1 .topBar .box .tit h2{font-size:25px;color:#454444}
#articleInfo1 .topBar .box p{}
#articleInfo1 .topBar .box:last-child{margin-left:0;width:auto;text-align:left;display:flex;flex-direction:row;align-items:center}
#articleInfo1 .infoWrap{overflow:hidden;margin-left:0;padding:20px 0 20px;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-ms-transition:all 0.3s;-o-transition:all 0.3s}
#articleInfo1 .infoWrap.collapsed{height:0;padding:0;padding-top:0}
#articleInfo1 .infoWrap ul li{padding:10px 30px;border-bottom:1px #ccc dashed}
#articleInfo1 .infoWrap ul li a{display:flex;align-items:center;font-size:17px;color:#4e4e4e}
#articleInfo1 .infoWrap ul li a .fa{margin-right:10px;display:none}
#articleInfo1 .infoWrap ul li a:before{content:"";width:10px;height:10px;background:#a8a8a8;border-radius:50%;display:inline-block;margin:0 15px 0 0}
#articleInfo1 .infoWrap ul li:hover{background:#bcbcbc40}
#articleInfo1 .infoWrap ul li h5{font-size:22px;color:#104a65}
#articleInfo1 .infoWrap ul li h5 i{color:#25a746}
#articleInfo1 .infoWrap ul li p{padding-left:30px;font-size:16px}
#articleInfo1 .iconBtn{position:absolute;width:45px;height:45px;background:#03a9f4;right:25px;top:8px;border:2px #e6f7ff solid;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;font-size:26px;color:#e6f7ff;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center}
#articleInfo1 .iconBtn i{display:flex;flex-direction:column;align-items:center;justify-content:center}
.flexJbox{display:flex;flex-wrap: wrap;}
#articleInfo1 .infobox{}
#articleInfo1 .infobox .boxn .flexJbox >p{width: 100%;margin: 0 0 20px;}
#articleInfo1 .infobox .boxn{margin-bottom: 30px;border-bottom:#e2e2e26b 1px solid;padding-bottom: 30px;}
#articleInfo1 .infobox .boxn p{font-size: 16px;font-weight:400;letter-spacing:1.2px;line-height: 2.3;color:#1f1f1f;text-align: justify;}
#articleInfo1 .infobox .boxn .textJ2{display:grid;grid-template-columns: repeat(2, 1fr);gap: 10px 60px;}
#articleInfo1 .infobox .mlist{padding:10px 0}
#articleInfo1 .infobox .mlist h5{color: var(--secondary);font-size:22px;margin:0px 0 10px}
#articleInfo1 .infobox .mlist h4{font-size:20px}
#articleInfo1 .infobox .titleJ{position:relative}
#articleInfo1 .infobox .imgJ{margin:20px 0}
#articleInfo1 .infobox .imgJ img{height:360px;width:100%;object-fit:cover}
#articleInfo1 .infobox .titleJ h4{font-weight:700;line-height:180%;padding-left:20px;display:flex;align-items:center;color:#323232;font-size:30px;margin: 0 0 25px;}
#articleInfo1 .infobox .titleJ h4:before{content:"";position:absolute;width:3px;height:60%;background:#696969;left:0;top:11px}

#articleInfo1 .historyList {position: relative;max-width: 100%;margin-left: auto;margin-right: auto;padding-top: 40px;margin-bottom: 50px;}
#articleInfo1 .historyList::before {content: '';position: absolute;top: 20px;left: 120px;width: 1px;height: 100%;background: linear-gradient(to bottom, #e5e5e5 0, #e5e5e5 100%) 0 0 no-repeat;}
#articleInfo1 .historyList li.show{display:flex;margin:0 0 30px 0;align-items:center;position:relative;overflow:hidden;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo1 .historyList .historyItemList li{padding: 40px 0;}
#articleInfo1 .historyList .show::before {content: "";position: absolute;top: 0;left: 4%;width: 100%;height: 100%;background-color: #f5f5f5;-webkit-transform: translateX(0%);transform: translateX(0%);z-index: -1;}
#articleInfo1 .historyList li .tit{color: #898f97;text-align: center;position: relative;display: flex;align-items: center;justify-content: space-between;width: 170px;z-index: 10;}
#articleInfo1 .historyList li .tit:after{content:'';position: absolute;right: 0;width: 50px;height: 1px;background: #e3e3e3;}
#articleInfo1 .historyList li .tit h3 i{color: #d5d5d5;text-align: center;font-size: 34px;margin: 10px;}
#articleInfo1 .yearLine {position: relative;display: flex;text-align: center;font-size: 25px;align-items: baseline;font-weight: 600;color: #535353;}
#articleInfo1 .yearLine span {color: #818181;font-size: 17px;font-weight: 400;line-height: 1;letter-spacing: 1px;display: inline-block;text-align: center;margin-left: 5px;}
#articleInfo1 .yearLine::before {position: absolute;top: 50%;left: 136px;width: 9px;height: 9px;margin-top: -4.5px;display: none;}
#articleInfo1 .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;}
#articleInfo1 .monthRound::after {content: '.';display: none;}
#articleInfo1 .historyList li.show p {padding-top: 30px;padding-bottom: 30px;padding-left: 20px;padding-right: 20px;width: calc(100% - 0px);}
#articleInfo1 .historyItemList li {position: relative;}
#articleInfo1 .historyItemList li{color: #333;position: relative;}
#articleInfo1 .historyItemList li + li {margin-top: 10px;}
#articleInfo1 .historyItemList li .textEditor.clearfix {overflow: hidden;color: #535353;position: relative;font-weight: 600;display: flex;flex-direction: column;}
#articleInfo1 .historyItemList li .textEditor.clearfix p{padding: 10px 0;margin: 0;line-height: 160%;display: inline-block;font-size: 16px;letter-spacing: 0;}
#articleInfo1 .historyItemList li .textEditor.clearfix .leftBox {overflow: hidden;float: left;width: 57%;}
#articleInfo1 .historyItemList li .textEditor.clearfix .leftBox h2{font-size: 22px;padding-bottom: 10px;color: #000;}
#articleInfo1 .historyItemList li .textEditor.clearfix .leftBox article{color: #4b4b4b;font-weight: 500;font-size: 15px;}
#articleInfo1 .historyItemList li .textEditor.clearfix .rightBox  {overflow: hidden;float: right;width: 40%;}
#articleInfo1 .historyItemList .textEditor {font-size: 18px;}
#articleInfo1 .historyQuickLinkBox {display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;margin-bottom: 75px;}
#articleInfo1 .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;}
#articleInfo1 .historyLinkItem::before {content: '';margin-right: 20px;font-size: 16px;color: #373737;}
#articleInfo1 .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;}
#articleInfo1 .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 screen and (max-width:768px){
	#articleInfo1 .infobox .boxn .textJ2{display:block;}
}


@media screen and (max-width:640px){
	#articleInfo1 .historyList::before, #articleInfo1 .historyList li .tit:after{display:none;}
	#articleInfo1 .infobox .imgJ img{height:199px;object-fit:cover;object-position:50%}
	#articleInfo1 .topBar .box:last-child{flex-direction:column;align-items:flex-start}
	#articleInfo1 .topBar .box .tit h2{font-size:24px}
	#articleInfo1 .topBar .box p{margin-left:0;font-size:15px}
	#articleInfo1 .topBar .box i{font-size:24px}
	#articleInfo1 .iconBtn{width:38px;height:38px;top:18px}
	#articleInfo1 .iconBtn i{font-size:20px}
	#articleInfo1 .infoWrap{padding:0px 0 30px}
	#articleInfo1 .infoWrap ul li a{font-size:18px}
}
@media screen and (max-width:500px){
	#articleInfo1 .navbox{padding:15px 10px}
}