@import url('/css/animate.css');
.wow{animation:fadeIn 1.5s both;-webkit-animation:fadeIn 1.5s both;animation-duration:2s;-webkit-animation-duration:2s}
.delay1{animation-delay:0.5s;-webkit-animation-delay:0.5s}
.delay2{animation-delay:1.0s;-webkit-animation-delay:1.0s}
.delay3{animation-delay:1.5s;-webkit-animation-delay:1.5s}
.delay4{animation-delay:2s;-webkit-animation-delay:2s}
#articleInfo11{position:relative}
#articleInfo11 .item{overflow:hidden;position:relative;background-attachment:fixed;background-size:auto 100%;display:flex;justify-content:space-between;padding:80px 0}
#articleInfo11 .item .mwtitle{position:relative;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl}
#articleInfo11 .item .mwtitle h2{font-size: 32px;letter-spacing: 0.25em;line-height: 180%;margin-bottom: 20px;line-height: 170%;}
#articleInfo11 .item .mwtitle p{position:relative;padding-right:30px}
#articleInfo11 .item .mwtitle p:before{position:absolute;content:"";width:1px;height:100%;background-color:#c0c0c0;pointer-events:none;position:absolute;top:0;right:24px;z-index:1;transition:all 0.85s 1.25s cubic-bezier(0.65,0.32,0.16,1.01)}
#articleInfo11 .item .itembg{position:relative;top:0;left:0;width:100%;height:100%;z-index:1}
#articleInfo11 .item .itembg img{width:100%;height:100%;object-fit:cover;transition:all linear .2s}
#articleInfo11 .item:nth-child(2){background-image:url(http://www.i-web.com.tw/style/images/03/img-box1Bg.jpg)}
#articleInfo11:before{position:absolute;width:50%;height:74%;top:0;right:0;content:"";z-index:0;background: -webkit-linear-gradient(3deg, #f7f7f77a 0%, #f7f7f775 100%);}
#articleInfo11 .item .row{position:relative;width:50%;z-index:2;display:flex;margin-left:0;margin-right:20px}
#articleInfo11 .item:nth-child(even) .row{float:right}
#articleInfo11 .item .left h3{margin:25% 0 20px;text-align:center;font-size:40px;color:#fff;animation-name:fadeInDown;-webkit-animation-name:fadeInDown}
#articleInfo11 .item:hover .left h3{letter-spacing:10px}
#articleInfo11 .item .left article{display:flex;width:60%;text-align:center;font-size:16px;color:#434343;animation-name:fadeInUp;-webkit-animation-name:fadeInUp;flex-direction:column;align-items:flex-start;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;padding:20px 50px;width:100%}
#articleInfo11 .item .left article .smtwmt{margin-bottom:28px;font-size: 20px;padding-top: 0px;letter-spacing: 2px;position: relative;}
#articleInfo11 .item .left article p{color:#3f3f3f;font-weight: 400;margin-top: 5px;line-height: 209%;letter-spacing: 1px;font-size: 15px;}
#articleInfo11 .item .right{overflow:hidden;padding:0 0;width:42%;display:flex;justify-content:flex-end;margin-left:0px;margin-right:0}
#articleInfo11 .item .entext{}
#articleInfo11 .item .entext h3,#articleInfo11 .item .entext h3 span{text-transform:uppercase;text-align:right;position: relative;z-index: 6;font-size: 70px;font-weight: 100;-webkit-text-stroke: 1px #b2b2b2;color: transparent;line-height: 160%;letter-spacing: 3.5px;font-family: 'Marcellus', serif;}

#articleInfo11 .item .entext h3 span{
  -webkit-text-stroke: 1px #f0667f;
}
#articleInfo11 .item .right h5{font-size:20px;color:#77a5ea;animation-name:fadeInDown;-webkit-animation-name:fadeInDown}
#articleInfo11 .item:hover .right h5{color:#f9bad1}
#articleInfo11 .item .right h4{font-size:30px;animation-name:fadeInLeft;-webkit-animation-name:fadeInLeft}
#articleInfo11 .item .right article{margin:20px 0;animation-name:fadeInRight;-webkit-animation-name:fadeInRight}
#articleInfo11 .item2{overflow:hidden;position:relative;display:flex;justify-content:space-between;padding:20px 0;flex-direction: row;flex-wrap: wrap;}
#articleInfo11 .item3{overflow:hidden;position:relative;display:flex;justify-content:space-between;padding:20px 0}
#articleInfo11 .item3 .solgonn{display:flex;flex-direction:column;align-items:center;width:100%;padding: 30px 0;margin: 30px 0;border-top:#c8c8c882 1px solid;border-bottom:#c8c8c882 1px solid}
#articleInfo11 .item3 .solgonn h4{font-size: 32px;letter-spacing: .05em;line-height: 170%;}
#articleInfo11 .item3 .solgonn p{font-size: 17px;}
#articleInfo11 .item2 .itembg{width:48%;display:flex;flex-direction:column;visibility:visible;animation-name:fadeInLeft;margin-bottom: 20px;}
#articleInfo11 .photoBox img{
    width: 100%;
    aspect-ratio: 1/ 0.7;
    object-fit: cover;
}
#articleInfo11 .item2 .infoJ{display:flex;padding:25px 0;align-items:center}
#articleInfo11 .item2 .mwtitle2{position:relative;display:flex}
#articleInfo11 .item2 .textJ{display:flex;flex-direction:column}
#articleInfo11 .item2 .textJ h3{font-size:20px}
#articleInfo11 .item2 .textJ p{font-size:15px}
#articleInfo11 .item2 .mwtitle2 h3{font-size:30px;padding-right: 10px;margin-right: 30px;font-family: 'Marcellus', serif;}
#articleInfo11 .item2 .mwtitle2 h3:before{content:"";position:absolute;width:1px;height: 30px;background: #f1748b;top: 14px;right: 20px;}

/*table
*----------------------------------------------------------------------------*/
.table-container {width: 100%;margin: 20px 0 30px;}
.table_brand {width: 80%;border-spacing: 0px;background-color: #fff;margin: auto;}
.table_brand .gray_bg:nth-child(2n){background-color: #f8f8f8;color: #282828;}
.top-column .table_brand .gray_bg:nth-child(2n){background-color: #ffffff;}
.table_brand th, .table_brand td{padding: 10px 0px;width: auto;font-size: 16px;line-height: 1.2em;font-weight: 300;text-align: center;}
.table_brand td i{color: #D3BA39;margin-right: 10px;vertical-align: baseline;}
.table_brand tbody{text-align: left;}
.table_brand td:nth-child(1)
.table_brand th:nth-child(1){font-size: 16px;font-weight:400;line-height: 160%;}
.table_brand td p{text-align: center;border: none;display: flex;align-items: center;justify-content: center;padding: 0px 15px;font-size: 15px;}
.table_brand tr{background-color:#fff;border-bottom:1px solid rgb(57 60 65 / 77%)}
.table_brand tr:nth-child(1),tr.gray_bg.cell-inner{color:#fff}
.table_brand tr:nth-child(1) td{background-color: #f0667f;font-weight:400;text-align:center;min-height:95px;padding: 9px;position:relative;flex-direction:row;color:#fff}
.table_brand tr:nth-child(1) td::before{content:"";width:1px;height:100%;display:block;background-color:rgba(255,255,255,0.2);position:absolute;top:0;right:0}
.table_brand tr:nth-child(1) td p{text-align:center;COLOR: #fff;}
.table_brand td.alt{ text-align:left;}
.table_brand td span{vertical-align: baseline;}
.table_brand td span i{margin-right: 10px;font-size: 12px;}
.table_brand td .red i{color: #D33992;}
.table_brand td .green i{color: #59b0a6;}
.table_brand td .yellow i{color: #f9d4ab;}


@media screen and (max-width: 1460px){
	#articleInfo11 .item .entext h3, #articleInfo11 .item .entext h3 span{ font-size: 36px; }
	#articleInfo11 .item .left article{ padding: 20px; }
	#articleInfo11 .item .left article .smtwmt{ margin-bottom: 12px; font-size: 18px; }
	#articleInfo11 .item{ padding: 40px 0; }
	.table_brand tbody{height: 40px;overflow: overlay;}
	.table_brand {width: 768px;}
	.table-container {width: 100%;overflow-x: scroll;margin: 0 0 .5em;-webkit-overflow-scrolling: touch;}
}
@media screen and (max-width: 1280px){
	#articleInfo11 .item .row{ width: 60%; margin-left: 0; margin-right: 0; }
	#articleInfo11 .item .right{ width: 35%; }
	#articleInfo11 .item .entext h3, #articleInfo11 .item .entext h3 span{font-size: 22px;}
}
@media screen and (max-width: 870px){
	#articleInfo11 .item{ display: flex; flex-direction: column; padding: 5px 0; }
	#articleInfo11 .item .row{ width: 100%; }
}
@media screen and (max-width: 768px) {
	#articleInfo11 .item .row ,
	#articleInfo11 .item:nth-child(even) .row { float: none; width: 100%; }
	#articleInfo11 .item .left h3 { margin-top: 20px; }
	#articleInfo11 .item .right ,
	#articleInfo11 .item:nth-child(even) .right { margin: 20px auto; width: 85%; }
}
@media screen and (max-width: 640px){
	#articleInfo11 .item2{ display: flex; flex-direction: column; }
	#articleInfo11 .item2 .itembg{ width: 100%; margin-bottom: 20px; }
	#articleInfo11 .item2 .itembg:nth-child(2) .infoJ{ order: 2; }
	#articleInfo11 .item3 .solgonn{ padding: 20px 0; margin: 10px 0; }
	#articleInfo11 .item3{ padding: 5px 0; }
	#articleInfo11 .item .mwtitle h2, #articleInfo11 .item2 .mwtitle2 h3 ,#articleInfo11 .item3 .solgonn h4{ font-size: 28px; }
	#articleInfo11 .item .left article p{ font-size: 15px; }
}

@media screen and (max-width: 480px) {
	#articleInfo11 .item ,
	#articleInfo11 .item:hover { background-attachment: inherit; background-size: cover; }
	#articleInfo11 .item .left article { width: 80%; padding: 10px; }
	#articleInfo11 .item .mwtitle p{ padding-right: 20px; }
	#articleInfo11 .item .mwtitle p:before{ right: 10px; }
	#articleInfo11 .item2 .textJ h3{ font-size: 18px; }
}