@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:34px;line-height:110%}
#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%,#ffffff75 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{font-size:14px;margin-bottom:28px}
#articleInfo11 .item .left article p{font-size:19px;color:#3f3f3f;line-height:200%}
#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{font-size:39px;text-transform:uppercase;color:#d6d6d6;text-align:right}
#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}
#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:60px 0;margin:50px 0;border-top:#c8c8c882 1px solid;border-bottom:#c8c8c882 1px solid}
#articleInfo11 .item3 .solgonn h4{font-size:30px}
#articleInfo11 .item3 .solgonn p{font-size:15px}
#articleInfo11 .item2 .itembg{width:48%;display:flex;flex-direction:column;visibility:visible;animation-name:fadeInLeft}
#articleInfo11 .item2 .infoJ{display:flex;padding:25px 0;align-items:center}
#articleInfo11 .item2 .itembg:nth-child(2) .infoJ{display:flex;justify-content:flex-end}
#articleInfo11 .item2 .itembg:nth-child(2){visibility:visible;animation-name:fadeInRight}
#articleInfo11 .item2 .itembg:nth-child(2) .infoJ .mwtitle2{order:2}
#articleInfo11 .item2 .itembg:nth-child(2) .infoJ .mwtitle2 h3:before{left:0}
#articleInfo11 .item2 .itembg:nth-child(2) .textJ{display:flex;align-items:flex-end;margin-right:20px}
#articleInfo11 .item2 .mwtitle2{position:relative;-webkit-writing-mode:vertical-rl;-ms-writing-mode:tb-rl;writing-mode:vertical-rl;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:5px;margin-right:15px}
#articleInfo11 .item2 .mwtitle2 h3:before{content:"";position:absolute;width:1px;height:200px;background:#c39a75c2;top:-80px}
@media screen and (max-width: 1460px){
	#articleInfo11 .item .entext h3{
	    font-size: 36px;
	}
	#articleInfo11 .item .left article{
	    padding: 20px;
	}
	#articleInfo11 .item .left article .smtwmt{
	    margin-bottom: 12px;
	}
	#articleInfo11 .item{
	    padding: 40px 0;
	}
}
@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{
    font-size: 21px;
}
}
@media screen and (max-width: 870px){
	#articleInfo11 .item{
	    display: flex;
	    flex-direction: column;
	    padding: 5px 0;
	}
	#articleInfo11 .item .row{
	    width: 100%;
	}
	#articleInfo11 .item .entext h3{
    font-size: 12px;
}
}
@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: 17px;
}
}

@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;
}
}