@import url('/css/animate.css'); 
@import url('/css/fontawesome-all.css');
@import url('/css/font-awesome.min.css');
@import url('/css/fontawesome.min.css');
.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}
#articleInfo15 .tit{position:relative;text-align:center;z-index:2}
#articleInfo15 .tit h3{text-align:center;font-size:33px}
#articleInfo15 .tit font{padding:0 20px;background:#fff;display:inline-block;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;-ms-transition:all 0.5s ease;-o-transition:all 0.5s ease;transition:all 0.5s ease}
#articleInfo15 ul{overflow:hidden;position:relative;padding: 50px 100px 35px;border:1px #cfcfcfb5 solid;z-index:1;display: grid;grid-template-columns: repeat(6, 1fr);}
#articleInfo15 ul li{animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleInfo15 ul li .item{padding:20px 30px}
#articleInfo15 ul li .item .circle{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;width: 60%;margin: 0 auto 30px;}
#articleInfo15 ul li .item .circle .fa{font-size:42px}
#articleInfo15 ul li .item:hover .circle{animation:flipInX 1.5s both;-webkit-animation:flipInX 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);animation-timing-function:ease-in;opacity:0}
40%{transform:perspective(400px) rotateX(-20deg);animation-timing-function:ease-in}
60%{transform:perspective(400px) rotateX(10deg);opacity:1}
80%{transform:perspective(400px) rotateX(-5deg)}
to{transform:perspective(400px)}
}
@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;opacity:0}
40%{-webkit-transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in}
60%{-webkit-transform:perspective(400px) rotateX(10deg);opacity:1}
80%{-webkit-transform:perspective(400px) rotateX(-5deg)}
to{-webkit-transform:perspective(400px)}
}
#articleInfo15 ul li .item p{text-align:center;font-size: 20px;color: #603813;}
#articleInfo15 .imgBox{overflow:hidden}
#articleInfo15 .imgBox p{margin:25px 0 50px;overflow:hidden;width:100%;animation-name:fadeInLeft;-webkit-animation-name:fadeInUp;border-radius:15px}
#articleInfo15 .imgBox p:nth-child(2){margin:0 0 0 1%;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo15 .secBox > div{margin-bottom:30px}
#articleInfo15 .secBox h3, #articleInfo15 .bbox h3, #articleInfo15 .size h3{text-align:center;font-size: 35px;margin: 40px 0 30px;color: #84ad71;}
#articleInfo15 .secBox .item h5{font-weight:500;font-size:22px;color:var(--black)}
#articleInfo15 .secBox .item article{float:left;width:calc(100% - 220px)}
#articleInfo15 .secBox .photoBox{display: grid;flex-wrap:wrap;justify-content:space-between;margin-bottom:25px;grid-template-columns: repeat(4, 1fr);}
#articleInfo15 .secBox .photoBox > div{animation-name:fadeInDown;-webkit-animation-name:fadeInDown;margin:10px;padding: 0 30px;display:flex;flex-wrap:wrap;position:relative;justify-content:center;flex-direction:column;align-items:center;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
#articleInfo15 .secBox .photoBox .photo{width:80px;margin-bottom:23px;display:flex;flex-direction:column;align-items:center}
#articleInfo15 .secBox .photoBox h3{font-size: 26px;line-height:140%;overflow:hidden;margin: 0 0 20px;color: #603813;}
#articleInfo15 .secBox .photoBox .photo{width:100%}
#articleInfo15 .secBox .photoBox p{font-size: 20px;text-align: center;color: #603813;}
#articleInfo15 .secBox .five{display:flex;flex-wrap:wrap;margin:30px 0 20px}
#articleInfo15 .secBox .five >div{width:calc((100%/5) - 100px);background:#efefef;padding:50px}
#articleInfo15 .secBox .five >div:nth-child(2){background:#dae3ea}
#articleInfo15 .secBox .five >div:nth-child(3){background:#81a3bf}
#articleInfo15 .secBox .five >div:nth-child(4){background:#005081}
#articleInfo15 .secBox .five >div:nth-child(5){background:#ed7b25}
#articleInfo15 .secBox .five .photo{width:80px;margin-bottom:20px}
#articleInfo15 .secBox .five p{font-size:15px;text-align:justify;letter-spacing:1px}
#articleInfo15 .secBox .five >div:nth-child(3) p,#articleInfo15 .secBox .five >div:nth-child(4) p,#articleInfo15 .secBox .five >div:nth-child(5) p{color:#fff}
#articleInfo15 .secBox .three{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;margin-top:20px;position:relative;overflow:hidden}
#articleInfo15 .secBox .three .photo{width:85%;position:absolute;left:0}
#articleInfo15 .secBox .three .photo img{width:100%}
#articleInfo15 .secBox .three article{width:40%;z-index:2;background:#fff;padding:100px 60px;border-radius:10px;margin:60px 0;font-size:20px}
#articleInfo15 .box h3{display:flex;align-items: center;justify-content: center;margin: 30px 0 30px;font-size: 35px;color: #84ad71;}
#articleInfo15 .box h3.tag{color: #fff;background: var(--primary);width: fit-content;margin: 0 auto;padding: 10px 20px;border-radius: 25px;margin-top: 20px;}
#articleInfo15 .box h3 img{width:50px;margin-right: 10px;}
#articleInfo15 .box p{font-size: 20px;color: #603813;}
#articleInfo15 .box .photo{display:grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin: 40px 0;}
#articleInfo15 .box .photo img{width:100%;}
#articleInfo15 .box .nn{width: 60%;margin: 50px auto;}
#articleInfo15 .box .nn b{display:block;text-align: center;margin-top: 40px;background: #d6ddc9;padding: 15px 0;border-radius: 25px;font-size: 20px;color: var(--complement);}
#articleInfo15 .box .nn b font{display:block;text-align: center;font-size: 20px;color: var(--complement);}
#articleInfo15 .bbox ul{overflow:hidden;position:relative;z-index:1;display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;padding: 0;border: 0;}
#articleInfo15 .bbox ul li{animation-name:fadeInUp;-webkit-animation-name:fadeInUp;background: #f1f1f1;border-radius: 10px;}
#articleInfo15 .bbox ul li .item{padding:20px 30px}
#articleInfo15 .bbox ul li .item .circle{width:40%;}
#articleInfo15 .bbox ul li .item p{color: var(--primary);font-size: 26px;font-weight: bold;}
#articleInfo15 .bbox ul li .item article{text-align:center;color: #603813;font-size: 19px;}
#articleInfo15 .ttinfo{display: grid;grid-template-columns: 15% 1fr;background: #f1f1f1;margin: 20px 0;padding: 20px 40px;border-radius: 10px;align-items: center;}
#articleInfo15 .ttinfo h5{color: #603813;font-size: 20px;}
#articleInfo15 .ttinfo p{color: #603813;font-size: 19px;}
#articleInfo15 .youtube-embed-wrapper{margin: 30px 0;}
@media screen and (max-width:1366px){
	
}
@media screen and (max-width:1024px){
	#articleInfo15 ul{padding: 0;grid-template-columns: repeat(4, 1fr);}
	
}
@media screen and (max-width:768px){
	
	#articleInfo15 .bbox ul{grid-template-columns:1fr}
	#articleInfo15 .secBox .photoBox{    grid-template-columns: repeat(2, 1fr);}
	#articleInfo15 ul li .item{padding:15px}
	#articleInfo15 .secBox .three article{width:60%}
	#articleInfo15 .secBox .five >div{width:calc((100%/3) - 100px)}
	#articleInfo15 .secBox .five >div:nth-child(4),#articleInfo15 .secBox .five >div:nth-child(5){width:calc((100%/2) - 100px)}
	#articleInfo15 .topBox{position:relative}
	#articleInfo15 .topBox:before{position:absolute;width:100%;height:100%;background:rgba(255,255,255,0.35);top:0;left:0;z-index:1;content:""}
	#articleInfo15 .topBox .text{position:relative;width:50%;z-index:2}
}
@media screen and (max-width:640px){
	#articleInfo15 ul{grid-template-columns: repeat(2, 1fr);}
	#articleInfo15 .secBox .photoBox > div{padding:0;}
	#articleInfo15 .box h3{font-size:22px}
	#articleInfo15 .box .nn{width:100%;}
	#articleInfo15 .ttinfo{padding:20px;grid-template-columns: 25% 1fr;}
}