.indexmain{width:100%;height:100vh;overflow-x:hidden;}
.indexmain-images {position: fixed;top: 0;width: 100%;height: 100vh;background-size: cover;background-position: center;-moz-transition: opacity 1s;-o-transition: opacity 1s;-webkit-transition: opacity 1s;transition: opacity 1s;}
.indexmain-images li {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;-moz-transition: -moz-transform 10s;-o-transition: -o-transform 10s;-webkit-transition: -webkit-transform 10s;transition: transform 10s;}
.indexmain-images li:after {content: "";position: absolute;top: 0;width: 100%;height: 100%;background: #000;opacity: 0.1;}
.indexmain-images li:nth-child(1) {height: 112%;-moz-transform: translateY(-10%);-ms-transform: translateY(-10%);-webkit-transform: translateY(-10%);transform: translateY(-10%);}
.indexmain-images li:nth-child(1).showimg {-moz-transform: translateY(0%);-ms-transform: translateY(0%);-webkit-transform: translateY(0%);transform: translateY(0%);}
.indexmain-images li:nth-child(2) {-moz-transform: scale(1.2);-ms-transform: scale(1.2);-webkit-transform: scale(1.2);transform: scale(1.2);}
.indexmain-images li:nth-child(2).showimg {-moz-transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}
.indexmain-images li:nth-child(3) {width: 110%;-moz-transform: translateX(-10%);-ms-transform: translateX(-10%);-webkit-transform: translateX(-10%);transform: translateX(-10%);}
.indexmain-images li:nth-child(3).showimg {-moz-transform: translateX(0%);-ms-transform: translateX(0%);-webkit-transform: translateX(0%);transform: translateX(0%);}
.indexmain-images li:nth-child(4) {-moz-transform: scale(1);-ms-transform: scale(1);-webkit-transform: scale(1);transform: scale(1);}
.indexmain-images li:nth-child(4).showimg {-moz-transform: scale(1.2);-ms-transform: scale(1.2);-webkit-transform: scale(1.2); transform: scale(1.2);}

.indexmain-wrap {position: relative;height: 100vh;display: -ms-flexbox;display: flex;-webkit-align-items: center;align-items: center;padding: 0 8%;}
.indexmain-text {text-align: center;margin: auto;text-shadow: 0 1px 3px #000;}
.indexmain-text li {position: absolute;width: 600px;-moz-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.indexmain-text-header {font-size: 1.75em;color: #FFF;opacity: 0;-moz-transform: translateY(-20px);-ms-transform: translateY(-20px);-webkit-transform: translateY(-20px);transform: translateY(-20px);}
.indexmain-text-inner {font-size: 0.875em;color: #FFF;opacity: 0;-moz-transform: translateY(20px);-ms-transform: translateY(20px);-webkit-transform: translateY(20px);transform: translateY(20px);}
.indexmain-text-header, .indexmain-text-inner {-moz-transition: opacity 0.6s, -moz-transform 0.6s;-o-transition: opacity 0.6s, -o-transform 0.6s;-webkit-transition: opacity 0.6s, -webkit-transform 0.6s;transition: opacity 0.6s, transform 0.6s;}
.showtext .indexmain-text-header, .showtext .indexmain-text-inner {opacity: 1;-moz-transform: translateY(0px);-ms-transform: translateY(0px);-webkit-transform: translateY(0px);transform: translateY(0px);}

.about{position:relative;width: 100%;height: 100vh; float: left; padding:160px 0 0; background-color:rgba(0,0,0,.85);margin:0;color: #ddd;overflow-x: hidden;overflow-y: hidden;}
.b-container{width:78%; margin: 0 auto;}
.about-content{width:100%; float: left; margin-bottom:0;position:relative}
.about-title{width: 100%;float: left;}
.about-title h1{font-size: 42px; margin-bottom:40px;font-family: 'Noto Sans TC', sans-serif;font-weight:300;}
.sidebar-a{width:30%; float: left; margin-right: 10%;}
.sidebar-a img{max-width:100%; height: auto;}
.sidebar-b{width:100%; float: left;margin:8% 0 0 0}
.txa{width:44%;float: left; margin: 5px 6% 0 0; }
.txa h2{font-size:18px; margin-bottom:18px;font-family: 'Noto Sans TC', sans-serif;font-weight:400;}
.txa p{line-height:1.8em; font-size: 16px;margin-bottom: 10px;font-family: 'Noto Sans TC', sans-serif;font-weight:300;}
.txb{width:50%;float: left;border-left: 1px solid #fff;padding: 0 0 50px 6%}
.righttx{width:100%; margin:0 0 13px;float: left;line-height: 2em; font-size: 15px;text-align:justify;}
.righttx h1{font-size:18px; margin-bottom:16px;font-family: 'Noto Sans TC', sans-serif;font-weight:400;}
.righttx p{line-height: 1.9em; font-size: 15px;text-align:justify;margin-bottom: 10px;}
.link{width: 100%;float: left;display: inline-block;}
.link a{font-size: 13px; font-weight: 100; line-height:28px;}
.link a:hover{color: #fff!important;}
.about-inbottom{width:94%;margin: 0 3%; float: left; text-align: center;position:absolute; left:0; bottom:0;}

@media only screen and (max-width: 1600px) {
.about{position:relative;width: 100%;height:100vh; float: left; padding:130px 0 0}
.b-container{width:85%; margin: 0 auto;}
.sidebar-b{margin:3% 0 0}
.righttx p{line-height: 1.8em; font-size: 15px}
}
@media only screen and (max-width: 1200px) {
.about{width: 100%;height:auto; padding:110px 0 0}
.b-container{width:90%}
.sidebar-b{margin:3% 0 0}
.about-inbottom{width:94%;margin: 30px 3% 0;position:static; }
}
@media only screen and (max-width: 980px) {
.about{padding:90px 0 0}
.b-container{width:90%}
.sidebar-b{margin:10% 0 0}
.righttx h1{margin-bottom:14px}
}
@media only screen and (max-width: 550px) {
.about{padding:70px 0 0}
.b-container{width:90%; margin: 0 auto;}
.sidebar-b{width:100%; margin:40px 0 0}
.about-title h1{font-size: 26px; margin-bottom:15px;}
.txa{width:94%;margin: 0 4% 30px 2%;border-left:none;}
.txa p{line-height: 1.7em; font-size: 15px;}
.txb{width:94%; margin: 0 4% 10px 2%;border-left:none;padding: 0}
.link a{font-size: 15px; line-height:22px;}
.about-inbottom{margin-bottom: 15px }
}