@import url('https://fonts.googleapis.com/css2?family=Lato&display=swap');

#articleInfo14{position:relative}
#articleInfo14:before,#articleInfo14:after{content:"";display:block;width:100%;clear:both}
#articleInfo14:before{content:"";width:1px;height:100%;background:#dddddd;position:absolute;top:0;left:50%}
#articleInfo14 .row{width:50%;float:left;position:relative;z-index:1;}
#articleInfo14 .row:last-child:before{top:auto;bottom:0}
#articleInfo14 .row:last-child:nth-child(even):before{right:auto;left:-15px}
#articleInfo14 .info{margin: 15px 0;position:relative;transition:all 0.3s ease 0s}
#articleInfo14 .circle{width:180px;height:180px;border-radius:50%;background:#fff;border:8px solid #cca872;float:left;margin-right:25px;position:relative}
#articleInfo14 .circle:before{content:"";width:26px;height:30px;background:#cca872;margin:auto;position:absolute;top:0;right:-33px;bottom:0;z-index:-1;box-shadow:inset 7px 0 9px -7px #444}
#articleInfo14 .circle span{display:block;width:100%;height:100%;border-radius:50%;text-align:center;line-height:165px;font-size:80px;color:#454344}
#articleInfo14 .circle span:before,#articleInfo14 .circle span:after{content:"";width:28px;height:50px;background:#fff;border-radius:0 0 0 21px;margin:auto;position:absolute;top:-54px;right:-33px;bottom:0;z-index:-1}
#articleInfo14 .circle span:after{border-radius:21px 0 0 0;top:0;bottom:-56px}
#articleInfo14 .circle:hover span i{animation:flipInY 1.5s both;-webkit-animation:flipInY 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}
@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px)}}
#articleInfo14 .content{display:flex;padding-right:40px;position:relative;flex-wrap:wrap;align-items:center;justify-content: flex-end;}
#articleInfo14 .stitle{display:block;padding:10px;margin:10px 0 50px 0;background:#cca872;border-radius:7px;font-size:25px;color:#fff}
#articleInfo14 .title{font-size: 16px;font-weight: 300;color: #756d6d;margin-top:0;border:1px solid #ddd;padding:5px 20px;border-radius:10px;position:relative;display:flex;align-items:center;margin-right:30px;font-family: 'Lato', sans-serif;}
#articleInfo14 .title:after{content:'';position:absolute;right:-20px;height:1px;width:30px;background:#ddd}
#articleInfo14 .description{font-size:16px;color:#756d6d;text-align:justify}
#articleInfo14 .icon{width:8px;height:8px;border-radius:50%;background:#dddddd;position:absolute;right:-4.9px}
#articleInfo14 .icon span:before,#articleInfo14 .icon span:after{content:"";width:21px;height:25px;background:#fff;border-radius:0 0 21px 0;margin:auto;position:absolute;top:-30px;left:-15px;bottom:0;z-index:-1}
#articleInfo14 .icon span:after{border-radius:0 21px 0 0;top:0;left:-15px;bottom:-30px}
#articleInfo14 .row:nth-child(2n) .circle{margin:0 0 0 25px}
#articleInfo14 .row:nth-child(2n) .circle:before{right:auto;left:-33px;box-shadow:-7px 0 9px -7px #444 inset}
#articleInfo14 .row:nth-child(2n) .circle span:before,#articleInfo14 .row:nth-child(2n) .circle span:after{right:auto;left:-33px;border-radius:0 0 21px 0}
#articleInfo14 .row:nth-child(2n) .circle span:after{border-radius:0 21px 0 0}
#articleInfo14 .row:nth-child(2n) .content{display: flex;justify-content: flex-start;padding-left: 40px;}
#articleInfo14 .row:nth-child(2n) .icon{right:auto;left: -4px;}
#articleInfo14 .row:nth-child(2n) .icon:before,#articleInfo14 .row:nth-child(2n) .icon span:before,#articleInfo14 .row:nth-child(2n) .icon span:after{left:auto;right:-15px}
#articleInfo14 .row:nth-child(2n) .icon span:before{border-radius:0 0 0 21px}
#articleInfo14 .row:nth-child(2n) .icon span:after{border-radius:21px 0 0 0}
#articleInfo14 .row:nth-child(2n){margin-top:60px}

@media only screen and (max-width:990px){
	#articleInfo14:before{left: 0;}
	#articleInfo14 .icon, #articleInfo14 .row:nth-child(2n) .icon{right:unset;left: -3px;}
	#articleInfo14 .content{justify-content: flex-start;padding-right: 0;padding-left: 40px;}
	#articleInfo14 .row, #articleInfo14 .row:nth-child(2n){width:100%;margin: 20px 0;}
	#articleInfo14 .row:first-child:before,#articleInfo14 .row:last-child:before{left:auto !important;right:-13px !important}
	#articleInfo14 .row:nth-child(2n) .circle{float:left;margin:0 25px 0 0}
	#articleInfo14 .row:nth-child(2n) .circle:before{right:-33px;left:auto;box-shadow:7px 0 9px -7px #444 inset}
	#articleInfo14 .row:nth-child(2n) .circle span:before,#articleInfo14 .row:nth-child(2n) .circle span:after{right:-33px;left:auto;border-radius:0 0 0 21px}
	#articleInfo14 .row:nth-child(2n) .circle span:after{border-radius:21px 0 0 0}
	#articleInfo14 .row:nth-child(2n) .icon:before,#articleInfo14 .row:nth-child(2n) .icon span:before,#articleInfo14 .row:nth-child(2n) .icon span:after{left:-15px;right:auto}
	#articleInfo14 .row:nth-child(2n) .icon span:before{border-radius:0 0 21px 0}
	#articleInfo14 .row:nth-child(2n) .icon span:after{border-radius:0 21px 0 0}
}
@media only screen and (max-width:480px){
	#articleInfo14 .description{width: calc(100% - 20px);margin-top: 10px;padding: 0 10px;}
	#articleInfo14 .title{padding: 5px 10px;font-size: 15px;display: block;margin: 0;width: 100%;}
	#articleInfo14 .title:after{display:none;}
	#articleInfo14 .content, #articleInfo14 .row:nth-child(2n) .content{padding-left: 25px;}
}