.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 h2.titleBox{text-align:center;font-size:24px;letter-spacing:2px;margin-bottom:20px;margin-top:40px;font-weight:700;color:#343434}
#articleInfo20 ul.topBox{display:grid;grid-template-columns:repeat(3,1fr)}
#articleInfo20 ul.topBox li{margin:45px;animation-name:fadeInDown;-webkit-animation-name:fadeInDown;transition:all linear 0.3s;position:relative;display:flex;flex-direction:column;align-items:stretch}
#articleInfo20 ul.topBox li .rightbox{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center}
#articleInfo20 ul.topBox li .rightbox .fontbox{display:flex;flex-direction:column;align-items:flex-start;margin-left:20px}
#articleInfo20 ul.topBox li:after{content:'';width:0;height:0;border-style:solid;border-width:10px 0 10px 10px;border-color:transparent transparent transparent #ece9e9;position:absolute;right:-30px;animation-name:fish;animation-direction:alternate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.5s;top:70px}
#articleInfo20 ul.topBox li:last-child:after{display:none}
@keyframes fish{0%{right:0px;opacity:0}
100%{right:-10px;opacity:1}
}
#articleInfo20 ul.topBox li.focus{padding:55px 25px;background:#caa34b;border-color:#775e27;color:#242425}
#articleInfo20 ul.topBox li h3{font-size:20px}
#articleInfo20 ul.topBox li h5{font-size:16px;color:#957c5a;margin:0}
#articleInfo20 ul.topBox li.focus h5{color:#fff}
#articleInfo20 ul.topBox li p.photo{width:20%}
#articleInfo20 article{margin-top:20px;margin-bottom:20px;text-align:justify}
#articleInfo20 .bottomBox p{margin:10px 0 20px;text-align:center;font-size:18px;animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .bottomBox article{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo20 .more_btn{position:relative;display:flex;flex-direction:column;align-items:center;margin-top:20px}
#articleInfo20 .more_btn p{margin-bottom:40px;margin-top:20px;font-size: 18px;color:#202020;font-weight: 600;line-height:1.73;letter-spacing:0.8px;text-align: center;}
#articleInfo20 .more_btn a{padding:5px 0 10px;width:150px;background:#000;display:block;text-align:center;position:relative}
#articleInfo20 .more_btn a font{position:relative;font-size:14px;letter-spacing:0.5px;color:#ffffff;z-index:2;-webkit-transition-duration:.3s;transition-duration:.3s}
#articleInfo20 .more_btn a span{position:absolute;width:60px;height:1px;background:#000;display:block;right:-40px;top:calc((100% - 1px) / 2);z-index:3;-webkit-transition-duration:.2s;transition-duration:.2s;font-size:0}
#articleInfo20 .more_btn a span:before{position:absolute;width:0;height:0;border-style:solid;border-width:0 9px 4px 0;border-color:transparent transparent #0c0b19 transparent;right:-1px;bottom:50%;content:""}
#articleInfo20 .more_btn a:after{position:absolute;width:0;height:100%;background:var(--primary);display:block;top:0;left:0;content:"";z-index:1;-webkit-transition-duration:.2s;transition-duration:.2s}
#articleInfo20 .more_btn a:hover font{color:#fff}
#articleInfo20 .more_btn a:hover span{right:-30px}
#articleInfo20 .more_btn a:hover:after{width:150px}
.video-container{margin-bottom:1.3em;font-size:18px;color:#484848}
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}
.more_btn .Txt{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;padding-bottom:40px;flex-direction:row;width:100%}
.more_btn .Txt .titleBox2{width:100%;max-width:390px;margin-bottom:0;padding-right:50px;position:relative}

@media (max-width:1180px){
    .more_btn .Txt .titleBox2{max-width:100%;padding-right:0}
    .more_btn .Txt .titleBox2::before{content:"";background:#004589;background:linear-gradient(to bottom,#004589 0%,#0094de 100%);display:block;width:2px;height:100%;position:absolute;top:0;right:0}
}
@media (max-width:1180px){
    #articleInfo20 ul.topBox li{margin:30px}
    #articleInfo20 ul.topBox li:after{display:none}
    .more_btn .Txt .titleBox2::before{display:none}
    .more_btn .Txt .titleBox2 .titleEn{line-height:1}
    .more_btn .Txt .expStyle{width:100%;max-width:calc(100% - 390px);padding-left:75px;color:#202020;font-size:15px;font-weight:400;line-height:1.73;letter-spacing:0.8px}
    .more_btn .Txt .expStyle{max-width:100%;padding-left:0;padding-top:20px}
    .textEditor ul{counter-reset:numli;margin-bottom:30px}
    .textEditor li{margin:0px 0px 10px 20px;list-style-type:decimal;list-style-position:inherit;color:#202020;font-size:15px;font-weight:400;line-height:1.73;letter-spacing:0.8px;padding-left:20px;position:relative}
    .titleBox2{position:relative;margin-bottom:30px;text-align:left;padding:0 0 0 0px;z-index:2}
    h2.titleTw{font-weight:700;font-size:24px;color:#343434;text-align:unset}
}
@media (max-width:980px){
    #articleInfo20 ul.topBox{grid-template-columns:repeat(2,1fr)}
    #articleInfo20 .more_btn{
    margin-top: 0;
}
    #articleInfo20 .more_btn p{
    margin: 15px 0;
}
}
@media (max-width:640px){
    .titleBox2 .titleTw{font-size:25px}
}.titleBox2 .titleEn{font-weight:700;font-size:36px;text-transform:uppercase;color:var(--primary);font-family:'Roboto',sans-serif}
@media (max-width:640px){
    .titleBox2 .titleEn{font-size:35px}
}
@media (max-width:480px){
    .titleBox2 .titleEn{font-size:25px}
    #articleInfo20 ul.topBox{grid-template-columns:repeat(1,1fr)}
    .textEditor2{display:flex;flex-direction:row;flex-wrap:wrap}
    .textEditor2 li{display:flex;width:calc((100% / 2) - 20px);margin:10px}
    .textEditor2 li b{width:110px;text-align-last:justify;margin-right:20px}
    .textEditor2 li span{width:calc(100% - 140px)}
}
@media screen and (max-width:1280px){
    .textEditor2 li{width:calc((100% / 1) - 20px)}
}
@media screen and (max-width:768px){
    #articleInfo20 ul.topBox li p.photo{width:22%}
    .more_btn .Txt{display:flex;flex-direction:column}
    #articleInfo20 .more_btn{
    margin-bottom: 50px;
}
}
@media screen and (max-width:480px){
    #articleInfo20 ul.topBox li:after{display:block;right:50%;animation-name:fish2;border-width:10px 10px 0 10px;border-color:#cfcfcf transparent transparent transparent;top:unset;bottom:0px}
@keyframes fish2{0%{bottom:-15px;opacity:0}
100%{bottom:-25px;opacity:1}
}
}