.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;}
#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;display: flex;flex-direction: row-reverse;align-items: center;justify-content: center;}
#articleStyle24 .essay-first-set .pic{float: right;width: 50%;position: relative;z-index: 2;animation-name: fadeInRight;-webkit-animation-name: fadeInRight;}
#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;;right: -50px;;top: -50px;display:block;height: calc(100% + -140px);z-index: 1;}
#articleStyle24 .essay-first-set .pic img{position: relative;z-index: 2;border-radius: 20px;}
#articleStyle24 .essay-first-set .essay-info{width: calc(50% - 150px);margin-right: 70px;position: relative;z-index: 2;animation-name: fadeInLeft;-webkit-animation-name: fadeInLeft;}
#articleStyle24 .essay-first-set .essay-describe h4{position: relative; animation-name:fadeInLeft;}
#articleStyle24 .essay-first-set .essay-describe h4 b{font-weight: normal;display: inline-block;font-size: 1.2rem;}
#articleStyle24 .essay-first-set .essay-describe h4:after{content:'';display:block;width: 80px;height:1px;background-color: #d9d9d9;position:absolute;bottom: -10px;left:0;}
#articleStyle24 .essay-first-set .essay-describe h3{margin: 10px 0 30px;font-weight: 600;text-align: left;font-size: 1.5rem;color: var(--primary);padding-left: 30px;margin-bottom: 20px;border-left: 3px solid var(--primary);}
#articleStyle24 .essay-second-set{margin-top: 0px;}
#articleStyle24 .essay-second-set .pic{}
#articleStyle24 .essay-second-set .pic ul{overflow: hidden;animation-name: fadeInUp;}
#articleStyle24 .essay-second-set .pic ul li img{width: 100%;height: 460px;object-position: 50% 10%;object-fit: cover;border-radius: 20px;}
#articleStyle24 .essay-second-set .essay-info{animation-name:fadeInUp;z-index: 4;position: relative;width: 94%;padding: 50px 20px;margin: auto;background-color: #ffffff;}
#articleStyle24 .essay-second-set .essay-describe{margin: 10px 0;background-color: #fff;}
#articleStyle24 .essay-second-set .essay-describe h3{font-size: 1.5rem;color: var(--primary);padding-left: 30px;margin-bottom: 20px;border-left: 3px solid var(--primary);}
#articleStyle24 .txtF{font-size: 1rem;line-height: 190%;padding: 20px 0;font-size: 16px;font-weight: 500;}
#articleStyle24 .txtF strong{font-size: 1.2rem;font-weight: 500;margin-top: 20px;display: inline-block;letter-spacing: 0.5px;}
#articleStyle24 .topBox{display: flex;flex-wrap: wrap;margin-top: 20px;}
#articleStyle24 .topBox li {width: calc((100% / 4) - 30px);display: inline-block;animation-name: fadeInDown;-webkit-animation-name: fadeInDown;transition:all linear 0.3s;margin: 10px 10px;line-height: 20px;}
#articleStyle24 .topBox li:nth-child(1){}
#articleStyle24 .topBox li .txtx {margin: 8px 0;font-family: 'Noto Sans TC';}

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

}
@media screen and (min-width: 1281px) {
	#articleStyle24 .essay-first-set .pic:before {content: "";position: absolute;top: 20px;left: -20px;width: calc(100% - 20px);height: calc(100% - 0px);border: 2px solid var(--secondary);-webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);transform: rotate(0deg);z-index: -1;border-radius: 20px;}
	#articleStyle24 .essay-first-set:after{background-color: #f3f3f3;height: 82%;bottom: 0px;right: 0;width: 100%;z-index: -10;pointer-events: none;content: '';position: absolute;border-radius: 20px;}
}
@media screen and (max-width: 1280px) {
	#articleStyle24 .essay-second-set .essay-info{width: 100%;padding: 50px 0px;}
	#articleStyle24 .essay-second-set .pic{}
	#articleStyle24 .essay-second-set .pic ul li{width:100%;}
}
@media screen and (max-width: 980px) {
	#articleStyle24 .essay-first-set{display: flex;flex-wrap: wrap;}
	#articleStyle24 .essay-first-set .pic{width: 100%;}
	#articleStyle24 .essay-first-set .essay-info{width: 100%;margin-right: 0;margin-top: 20px;}
	#articleStyle24 .essay-first-set .pic:after{ display:none;}
	#articleStyle24 .essay-first-set{padding: 0px 0 0px 0;}
	#articleStyle24 .essay-second-set{margin-top: 0px;display: flex;flex-direction: column;}
	#articleStyle24 .essay-second-set .pic{width: -webkit-fill-available;}
	#articleStyle24 .essay-second-set .essay-info{margin-top: 0px;padding: 30px 0;}
	#articleStyle24 .essay-second-set .essay-describe h3,#articleStyle24 .essay-first-set .essay-describe h3{font-size: 1.3rem;line-height: 150%;margin: 0;}
	#articleStyle24 .essay-second-set .essay-describe h3{
    margin-top: 20px;
    padding-left: 20px;
}
	#articleStyle24 .topBox{
    margin-top: 10px;
}
	#articleStyle24 .txtF strong{font-size: 1.1rem;}
	#articleStyle24 .topBox li{width: calc((100% / 2) - 30px);}
	#articleStyle24 .essay-second-set .pic ul li img{width: 100%;height: 230px;object-position: 50% 10%;object-fit: cover;}
	#articleStyle24 .essay-first-set .essay-describe h3{padding-left: 20px;}
@media screen and (max-width: 768px) {
	#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 .essay-first-set .essay-describe h4 b{font-size: 1rem;}
    padding-left: 20px;
}
	#articleStyle24 .essay-first-set .essay-describe h4:after{bottom: -10px;}
	#articleStyle24 .topBox li{width: calc((100% / 1) - 0px);margin: 5px 0;}
	#articleStyle24 .essay-second-set .pic ul li img{height: 180px;object-position: 50% 10%;}
}