.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
.delay1{animation-delay:.5s;-webkit-animation-delay:.5s}
.delay2{animation-delay:1s;-webkit-animation-delay:1s}
#articleStyle24{width:100%;margin:0 auto}
#articleStyle24 img{width:100%}
#articleStyle24 .essay-first-set,#articleStyle24 .essay-second-set{overflow:hidden;position:relative}
#articleStyle24 .essay-first-set{padding:60px 0}
#articleStyle24 .essay-first-set .pic{float:right;width:60%;position:relative;z-index:2}
#articleStyle24 .essay-first-set .pic:after{content:'';background:url(https://www.i-web.com.tw/style/images/24/bg_dot.gif);width:80%;position:absolute;left:-50px;top:-50px;display:block;height:calc(100% + 100px);z-index:1}
#articleStyle24 .essay-first-set .pic img{position:relative;z-index:2}
#articleStyle24 .essay-first-set .essay-info{float:left;width:calc(40% - 150px);position:relative;z-index:2}
#articleStyle24 .essay-first-set .essay-describe h4{position:relative;animation-name:fadeInLeft}
#articleStyle24 .essay-first-set .essay-describe h4 b{font-weight:400;display:inline-block;font-size:18px;text-align:justify}
#articleStyle24 .essay-first-set .essay-describe h4:after{content:'';display:block;width:80px;height:1px;background-color:#687693;position:absolute;bottom:-15px;left:0}
#articleStyle24 .essay-first-set .essay-describe h3{margin:40px 0 15px;color:#f08225;animation-name:fadeInLeft;letter-spacing:7px;font-size: 32px;font-weight:500}
#articleStyle24 .essay-second-set{margin-top:80px}
#articleStyle24 .essay-second-set .pic{float:left;width:calc(100% - 600px)}
#articleStyle24 .essay-second-set .pic ul{list-style:none;overflow:hidden;text-align:center}
#articleStyle24 .essay-second-set .pic ul li{width:calc(50% - 10px);float:left;margin:0 5px 10px;animation-name:fadeInLeft}
#articleStyle24 .essay-second-set .essay-info{float:right;width:500px;border-left:4px solid #fa723d;padding-left:50px;animation-name:fadeInUp}
#articleStyle24 .essay-second-set .essay-describe{margin:10px 0}
#articleStyle24 .essay-second-set .essay-describe h3{font-size:1.5rem;margin-bottom:20px;color:#383737}
#articleStyle24 .txtF{margin-bottom:80px;line-height:210%;letter-spacing:2px;font-weight:400;margin-top:40px;color:var(--info);text-align:justify;width:100%;font-size:16px}
#articleStyle24 ul{overflow:hidden;position:relative;z-index:1;display:flex;flex-wrap:wrap}
#articleStyle24 ul li{width:calc(100%/4);animation-name:fadeInUp;-webkit-animation-name:fadeInUp}
#articleStyle24 ul li .item{padding:20px 30px}
#articleStyle24 ul li .item .circle{width:100%;height:230px}
#articleStyle24 ul li .item .circle img{\:100%;width:100%;height:100%;object-position:50% 0;object-fit: contain;}
#articleStyle24 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)}
}#articleStyle24 ul li .item p{text-align:center;font-size:18px;font-weight:500;margin:20px 0 20px;letter-spacing:4px}

@media screen and (max-width:1680px){#articleStyle24 .essay-first-set .pic{width:50%}
    #articleStyle24 .essay-first-set .essay-info{width:calc(50% - 100px);margin-top:50px}
}

@media screen and (max-width:1280px){#articleStyle24 .essay-second-set .essay-info{width:350px;padding-left:45px}
    #articleStyle24 .essay-second-set .pic{width:calc(100% - 450px)}
    #articleStyle24 .essay-second-set .pic ul li{width:100%}
}

@media screen and (max-width:1024px){#articleStyle24 ul li .item{padding:20px 10px}
    #articleStyle24 .essay-first-set .pic{width:100%}
    #articleStyle24 .essay-first-set .essay-info{width:100%;margin-top:50px}
    #articleStyle24 .essay-first-set .pic:after{display:none}
}

@media screen and (max-width:768px){#articleStyle24 ul li{width:calc(100%/2)}
    #articleStyle24 .essay-second-set .essay-info{width:100%;padding:0;border:0}
    #articleStyle24 .essay-second-set .pic{width:100%}
    #articleStyle24 .essay-second-set{margin-top:0}
}

@media screen and (max-width:480px){
    #articleStyle24 ul li{
    width: 100%;
}
    #articleStyle24 ul li .item article{margin:0}
    #articleStyle24 .essay-first-set .essay-describe h4 b{font-size:1rem}
    #articleStyle24 .essay-first-set .essay-describe h3{margin:50px 0 20px}
    #articleStyle24 .essay-first-set .essay-describe h4:after{bottom:-10px}
}