#articleStyle24 {}
.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:1s;-webkit-animation-duration:1s}
.delay1{animation-delay:.3s;-webkit-animation-delay:.3s}
.delay2{animation-delay:.6s;-webkit-animation-delay:.6s}

/*title*/

#articleStyle24 .bannerTitleBox{
    animation-name: fadeInUp;
}
#articleStyle24 .bannerTitleBox h3{
    display: block;
    font-size: 56px;
    font-family: "Oswald", "Noto Sans TC", sans-serif;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 100%;
    font-weight: 500;
}
#articleStyle24 .bannerTitleBox h3 span{
    position: relative;
    display: inline-block;
    padding-left: 60px;
    color: #eb9457;
    font-family: "Oswald", "Noto Sans TC", sans-serif;
    text-transform: uppercase;
    line-height: 100%;
    vertical-align: bottom;
    background-color: #f93;
    background: -webkit-gradient(linear-gradient(90deg,#f98e47 20%,#eb9457 80%));
    background: -webkit-linear-gradient(90deg,#f98e47 20%,#eb9457 80%);
    background: linear-gradient(90deg,#f98e47 20%,#eb9457 80%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
#articleStyle24 .bannerTitleBox h3 span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-image: -webkit-linear-gradient(to bottom, #5f422e 0, #5f422e 100%), linear-gradient(to bottom, #5f422e 0, #5f422e 100%);
    background-image: -o-linear-gradient(to bottom, #5f422e 0, #5f422e 100%), linear-gradient(to bottom, #5f422e 0, #5f422e 100%);
    background-image: linear-gradient(to bottom, #5f422e 0, #5f422e 100%), linear-gradient(to bottom, #5f422e 0, #5f422e 100%);
    background-size: 2px 100%, 100% 2px;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transform: rotate(
45deg
);
    -ms-transform: rotate(45deg);
    transform: rotate(
45deg
);
}
#articleStyle24 .bannerTitleBox h2{
    position: relative;
    margin-top: 20px;
    font-size: 26px;
    font-weight: bold;
    padding-left: 120px;
}
#articleStyle24 .bannerTitleBox h2:before {
    content: '';
    position: absolute;
    top: 12px;
    left: 5px;
    z-index: 1;
    width: 90px;
    height: 1px;
    background-color: #3f3f3f73;
}
#articleStyle24 .bannerTitleBox p{
    padding-left: 0;
    color: #939393;
    font-size: 14px;
    text-transform: uppercase;
    margin: 40px 0 30px;
    letter-spacing: 0.45em;
}


#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: 10px 0;}
#articleStyle24 .essay-first-set .pic{float:right;width: 43%;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: 100%;position:absolute;left:-50px;top:-50px;display:block;height:calc(100% + 100px);z-index:1;-webkit-filter: grayscale(1);}
#articleStyle24 .essay-first-set .pic img{position:relative;z-index:2}
#articleStyle24 .essay-first-set .essay-info{float:left;width: calc(50% - 80px);position:relative;z-index:2;}
#articleStyle24 .essay-first-set .essay-describe h4{position:relative;animation-name:fadeInLeft;display: block;font-size: 56px;font-family: "Oswald", "Noto Sans TC", sans-serif;color: #a4cd41;text-transform: uppercase;line-height: 100%;font-weight: 500;}
#articleStyle24 .essay-first-set .essay-describe h4 span{
    position: relative;
    display: inline-block;
    padding-left: 60px;
    color: #232323;
    font-family: "Oswald", "Noto Sans TC", sans-serif;
    text-transform: uppercase;
    line-height: 100%;
    vertical-align: bottom;
}
#articleStyle24 .essay-first-set .essay-describe h4 b{font-weight:400;display:inline-block;font-size:1.2rem}
#articleStyle24 .essay-first-set .essay-describe h4 span:before{    content: '';
    position: absolute;
    top: 50%;
    left: 14px;
    z-index: 1;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #232323), to(#232323)), -webkit-gradient(linear, left top, left bottom, color-stop(0, #232323), to(#232323));
    background-image: -webkit-linear-gradient(top, #232323 0, #232323 100%), -webkit-linear-gradient(top, #232323 0, #232323 100%);
    background-image: -o-linear-gradient(top, #232323 0, #232323 100%), -o-linear-gradient(top, #232323 0, #232323 100%);
    background-image: linear-gradient(to bottom, #232323 0, #232323 100%), linear-gradient(to bottom, #232323 0, #232323 100%);
    background-size: 2px 100%, 100% 2px;
    background-position: 50%;
    background-repeat: no-repeat;
    -webkit-transform: rotate( 
45deg
 );
    -ms-transform: rotate(45deg);
    transform: rotate( 
45deg
 );}
#articleStyle24 .essay-first-set .essay-describe h3{margin: 0px 0 0px;color:#383737;font-size:1.6rem;animation-name:fadeInLeft}
#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{font-size: 15px;line-height: 200%;text-align: justify;color: #333;margin-bottom: 30px;}
@media screen and (max-width: 1680px) {
#articleStyle24 .essay-first-set .pic{width:50%}
}
@media screen and (max-width: 1440px) {
#articleStyle24 .essay-first-set .essay-info{
    margin-top: -60px;
}
}
@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: 980px) {
#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 .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}
#articleStyle24 .essay-first-set{
    padding: 0;
}
#articleStyle24 .essay-first-set .essay-describe h3{
    margin: 35px 0 10px;
}
}
@media screen and (max-width: 640px) {
#articleStyle24 .essay-first-set .essay-describe h4{
    font-size: 33px;
}
}
@media screen and (max-width: 480px) {
#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}
}