.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);}

.contact-right{width:80px;color: #fff;position:absolute; right:14%; top:40%;}
.contact-title{width:100%;font-size:16px; font-family: 'Noto Sans TC', sans-serif;font-weight:300;color: #ffffff;position:relative;}
.contact-title{opacity: 0;-moz-transform: translateX(20px);-ms-transform: translateX(20px);-webkit-transform: translateX(20px);transform: translateX(20px);-moz-transition: opacity 1s 1s, -moz-transform 1s 1s;-o-transition: opacity 2s 2s, -o-transform 2s 2s;-webkit-transition: opacity 2s 2s, -webkit-transform 2s 2s;transition: opacity 2s 2s, transform 2s 2s;}
.contact-title.show {opacity: 1;-moz-transform: translateY(0);-ms-transform: translateY(0);-webkit-transform: translateY(0);transform: translateY(0);}
.contact-title:after{content: ''; position: absolute;top: 60%;left:-65px; background: #555555;width:55px;height: 1px;}
.cnmid{position:relative;width:80%;margin: 0 10% 0; padding:100px;background-color:rgba(0,0,0,.7);font-weight:200;color: #fff;position: absolute;top:50%;right: 0;transform: translate(0, -50%);}
.cntitle{width:16%;float: left; margin:-4px 0 0 10%;}
.cninfo{width:74%;height:142px; float: left; margin:0; padding-left: 30px}
  .cninfo ul{list-style-type:none; padding: 0;margin: 0;}
  .cninfo li{margin:-4px 0 19px 0; padding:0;text-decoration: none!important;font-size:16px;font-weight: 400;}
  .cninfo span{width: 15px;display:inline-block;font-family: 'Noto Sans TC', sans-serif;font-weight:500; font-size: 14px;margin-right: 15px;text-align: center;}
  .cninfo a{font-size:16px; color: #fff;text-decoration:none;}
  .cninfo a:hover {color: #abaaaa;text-decoration: none;}
.sidebar_a{width: 50%;float: left}
.sidebar_b{width: 50%;float: right; margin-top: 120px}
.cnsocial{width:30%;float: right; margin:0}
.cnsocial a {display: inline-block;margin:0 16px 0 0;font-size:13px; transition: 500ms;-moz-transition: 500ms;-webkit-transition: 500ms;-o-transition: 500ms;}
 .cnsocial  a:hover {opacity: .5}
 .cnsocial img{max-width:20px;height: auto; margin:0;display: block;}

@media only screen and (max-width: 1600px) {
.cnmid{width:85%;margin: 0 7.5% 0; padding:90px 60px}
.cntitle{width:20%;margin:0 0 0 10%;}
.cninfo{width:70%;}
.cnsocial{width:65%;}
}
@media only screen and (max-width: 1200px) {
.cnmid{width:90%;margin: 0 5%; padding:60px 20px}
.cntitle{width:24%;margin:0 0 0 10%}
.cninfo{width:66%}
.cnsocial{width:60%}
.sidebar_a{width:55%}
.sidebar_b{width:45%}
}
@media only screen and (max-width: 980px) {
.cnmid{padding:40px 50px}
.cntitle{width:90%;margin:0 0 20px 10%;}
.cninfo{width:100%;}
.cnsocial{width:100%;}
.sidebar_a{width:65%}
.sidebar_b{width:35%;margin-top: 158px}
}
@media only screen and (max-width: 550px) {
.cnmid{padding:25px 20px;position: absolute;top:46%;right: 0;transform: translate(0, -50%);}
.sidebar_a{width:100%}
.sidebar_b{width:100%}	
.cntitle{width:90%;margin:0 0 20px 10%;}
.cninfo{width:100%;padding-left: 30px}
.cnsocial{width:80%; margin-right:-35%}
.sidebar_b{margin-top: 40px}
}
/* iPhone X and Xs Max */
@media only screen 
    and (min-device-width: 375px) 
    and (min-device-height: 812px) 
    and (-webkit-device-pixel-ratio: 3)
    and (orientation: portrait) { 
.contact-content{position:absolute; left:10%;top:45%;}	
}