.project-container{width:88%; margin:240px auto 60px; }
.project-content{float:left;width:100%; margin:0; }
.top-left{width:66%; float:left;margin-left: 2%;}
.top-right{width:30%; float:left;margin-right: 2%}
.project-title{width:100%; float:left;margin:0 0 40px 0;}
.project-title h1{font-size: 46px;font-family:  "Montserrat","Noto Sans TC", sans-serif;font-weight: 600;transform: scaleY(1.04);} 
.project-title p{width:100%; float:left;margin:20px 0;font-size: 13px; line-height:2em; }
.project-toptx{width:100%; float:left;margin:0 0 30px 0;font-size: 15px; line-height:2em;text-align: justify}


.siteway{width:100%;padding-left:5px;}
.siteway h1{float:left; line-height:1.5em;margin:0;font-size:14px; font-weight:400;}
.siteway h2{float:left; line-height:1.5em;margin:0;font-size:14px; font-weight:400;}
 .siteway h3{float:left; margin:0;line-height:1.5em;font-size:14px;} 
 .siteway h4{float:left; padding:0; margin:0;line-height:1.5em;font-size:14px;} 
 .siteway a{color: #000;transition:500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;text-decoration: none;}
 .siteway a:hover {color: #633427;}
 .siteway i{font-size:11px; margin:0 5px 0 0; padding-bottom: 2px; vertical-align: middle;}
 .siteway span{ font-weight:bold; font-size: 10px; margin-top: -5px; vertical-align:top}
 .siteway span i{color: #828282;margin:0 5px}
.caseall{float:left;width:100%; margin:0;display:block;}
.caseall ul { margin:0; padding:0; list-style:none;} 
.caseall li {margin:0 16px 0 0; display: inline;font-size:14px;color: #777} 
.caseall a {ext-decoration:none;transition: 0.5s;font-weight: 500;}
.caseall a:hover {text-decoration: none;transition: 0.5s;color: #000}
.inpage a {text-decoration:none; font-weight: 700;transition: 0.5s;color: #000}
.inpage a:hover {text-decoration: none;transition: 0.5s;color: #777} 

@media screen and (max-width: 1600px) {
.project-container{margin:200px auto 50px;}
.top-left{width:58%; }
.top-right{width:38%;}
}
@media screen and (max-width: 1280px) {
.project-container{width:90%; margin:170px auto 50px;}
.project-title h1{font-size: 40px;} 
.top-left{width:46%; }
.top-right{width:50%;}
}
@media screen and (max-width: 980px) {
.project-container{margin:130px auto 30px;}
.top-left{width:100%;margin: 0 0 25px}
.top-right{width:100%;margin: 0}
.project-title{margin:0 0 20px 0;}
.project-title h1{font-size: 36px;} 
.caseall{ padding:0 0 10px;}
.project-toptx{margin:0 0 20px}
 .siteway span{margin-top: 0; vertical-align:middle;}
.project-toptx{margin:0 0 30px 0;font-size: 16px; line-height:1.8em;}
}  
@media screen and (max-width: 767px) {
.project-container{width:90%; margin:100px auto 30px;}
.project-title h1{font-size: 28px;} 
.caseall{ padding:0}
}

.container{padding:0vw 0 6vw 0 ;}.section{padding:0vw 0}.inner{max-width:88%;padding:0 2vw;margin:0 auto}

.fadeIn{opacity:0;transition:opacity 1s}.fadeIn.show{opacity:1}.fadeUp{opacity:0;transform:translateY(20px);transition:opacity 1.5s,transform 1.5s}.fadeUp.show{opacity:1;transform:translateY(0px)}.fadeDown{opacity:0;transform:translateY(-20px);transition:opacity 1.5s,transform 1.5s}.fadeDown.show{opacity:1;transform:translateY(0px)}.fadeLeft{opacity:0;transform:translateX(20px);transition:opacity 1.5s,transform 1.5s}.fadeLeft.show{opacity:1;transform:translateX(0px)}.clipLeft{clip-path:polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%)}.clipRight{clip-path:polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%)}.clipUp{clip-path:polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%)}.clipDown{clip-path:polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)}.clipLeft,.clipRight,.clipUp,.clipDown{transition:clip-path 1s}.clipLeft.show,.clipRight.show,.clipUp.show,.clipDown.show{clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)}.show.delay-1{transition-delay:.2s}.show.delay-2{transition-delay:.4s}.show.delay-3{transition-delay:.6s}

.project-list{display:grid;grid-template-columns:repeat(3, 1fr);gap:3vw}
.project-item:hover .project-img img{transform:scale(1.1)}
.project-item:hover .project-name{letter-spacing:2px}
.project-item:hover .project-name:after{opacity:1}
.project-img{overflow:hidden}
.project-img img{width:100%;height:auto;transition:transform 1s}
.project-name{font-size:1.1rem;color:#000;margin-top:15px;transition:letter-spacing .3s;font-weight: 600;}
.project-field{font-size:.875rem;color:#d80c18;margin:5px 0 0 15px;transition:letter-spacing .3s}.project-field spam:last-child{display:none}
.project-name::before{content:"";width:5px;height:5px;border-top:#666 solid 1px;border-right:#666 solid 1px;display:inline-block;vertical-align:middle;margin-right:10px;transform:rotate(45deg)}

@media screen and (max-width: 1280px){.inner{max-width:89%;padding:0 1.5vw;}.project-list{grid-template-columns:repeat(2, 1fr)}}
@media screen and (max-width: 980px){.inner{max-width:93%;padding:0 1.5vw;}.project-list{grid-template-columns:repeat(2, 1fr)}}
@media screen and (max-width: 767px){.inner{max-width:93%;padding:0 1.5vw;}.project-list{grid-template-columns:repeat(1, 1fr)}}