/*
		#tpn03 .wrap{
			width: 1200px;
			display: flex;
			margin: auto;
        }
        
        body{
			display: flex;
			align-items: center;
			background-color: #003;
		}

*/
#tpn03 .bgcolor{
    /* background-color: rgb(207, 223, 118);  */
    background-color: #404041; 
}


		#tpn03 .item{
			width: 286px; /*A 每欄控制寬度（原來368） 三角形B要配合*0.5＝184*/
			margin: 0px;
			text-align: left;
			background-color: #fff;
			border: 1px solid #ccc;
			transform: translateY(0px);
			transition: .5s;
		}
		#tpn03 .item img{
			width: 100%;
			vertical-align: middle;
		}
		#tpn03 .item h2,h3,h4{
			border-bottom: 1px solid #888;
			padding-bottom: .3em;
			margin-bottom: .4em;
			font-weight: 900;
			transition: .25s;
		}


		#tpn03 .item p{
			line-height: 1.6;
			font-weight: 300;
			transition: .25s;
		}
		#tpn03 .item .txt{
			padding: 20px;
			position: relative;
		}
		#tpn03 .item .txt:before{
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			left: 0;
			top: 0;
			border-top: 50px solid transparent;
			border-left: 142px solid #fff; /*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
			border-right: 142px solid #fff;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
			transform: translateY(-100%);
		}
		#tpn03 .item:hover{
			transform: translateY(-10px);
		}
		#tpn03 .item:hover .txt{
			/* background-image: linear-gradient(0deg,#FB8076, #FEB85D);B觸碰漸層色 */
			background-image: linear-gradient(0deg,#333333, #FEB85D)
		}
		#tpn03 .item:hover .txt:before{/*觸碰底色*/
			border-left: 142px solid #FEB85D;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
			border-right: 142px solid #FEB85D;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
		}
		#tpn03 .item:hover h2{
			color: #fff;
			border-bottom-color: #fff;
		}
		#tpn03 .item:hover p{
			color: #fff;
        }

        #tpn03 .fontclass{
           font-family: "Microsoft JhengHei";
		}


		
@media only screen and (min-width: 768px) {/*當桌時*/
		#tpn03 .item{
			width: 368px; /*A 每欄控制寬度（原來368） 三角形B要配合*0.5＝184*/
		}
		
		#tpn03 .item .txt:before{
			border-left: 183px solid #fff; /*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
			border-right: 183px solid #fff;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
		}

		#tpn03 .item:hover .txt:before{/*觸碰底色*/
			border-left: 183px solid #FEB85D;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
			border-right: 183px solid #FEB85D;/*B三角形中間點 每欄控制寬度A（原來368） 要配合*0.5＝184*/
		}

  }