header { text-align: center; }
header img { margin: 70px 0; }

.orderNow { margin: 0 auto 40px auto; width: 132px; height: 133px; text-align: center; }
.orderNowAnimation { background:url(../images/orderNowAnimation.png);-webkit-animation: orderNowAnimation 0.6s steps(3) infinite; }
@-webkit-keyframes orderNowAnimation {
  from { background-position:0 0px; }
  to { background-position: -396px 0px; }
}


.contentBase { margin: 0 auto 50px auto; width: 1100px; height: auto; background: rgba(255,255,255,0.9); box-shadow: 0px 0px 3px rgba(0,0,0,0.5) }
.contentBase .acherBase {position: relative; top:0; left: 0; width: 100%; min-height: 55px; text-align: center; background: rgba(0,0,0,0.05) ; z-index: 10}
body .contentBase .fix {position: fixed;background: rgba(0,0,0,0.5)}
.contentBase .acherBase a { display: inline-block; margin: 6px 5px 0 5px; width:24%; height:40px; font: 16px/40px "Arial","微軟正黑體"; text-align: center;  color:#fff; letter-spacing: normal; border-radius: 6px; background: #ffa11b; cursor: pointer;}
.contentBase .acherBase a:after { content: "▶" }

.fixBackground { position: fixed; top:0;left: 0; width: 100vw; height: 100vh; text-align: center; z-index: -1;  }
.fixBackground .photoBase { position: relative; }
.fixBackground .photoBase img {  position: absolute; top:0; left: 0; width: 100vw;height: auto; display: none; }



/*C23 use*/
.contentBase .carrier {  width:100%; margin: 0; padding: 0 0 20px 0; height: auto;background:url(../images/ulBgRight.jpg) bottom right no-repeat; }
.contentBase .carrier .box-head { display: none; }
.contentBase .carrier h4  { text-align: center; margin: 20px 0 0 0; width: 100% ;height:auto; font:bold 34px/34px "arial","微軟正黑體"; color: #ffa11b;}
.contentBase .carrier ul {margin: 0 auto; width: 1050px;  }
.contentBase .carrier ul li { position: relative; padding: 20px 0; width: 100%; height: auto;border-bottom: 1px dashed #555; }
.contentBase .carrier ul li:before { content: ""; position: absolute; top:0; left: -25px; display: inline-block; width: 7px; height: 100%; background: #a468d6 }
.contentBase .carrier ul li:nth-child(3n+2):before {  background: #6872d6 }
.contentBase .carrier ul li:nth-child(3n+3):before {  background: #68aed6 }

.contentBase .carrier ul li a {font:20px/28px "arial","微軟正黑體"; color: #000;}
.contentBase .carrier ul li a strong {font: bold 36px/42px "arial","微軟正黑體"; display: block; }
.contentBase .carrier ul li em { position: absolute;bottom: 10px; right: 0;font: bold 40px/28px "arial","微軟正黑體";color:#ffa11b; }
.contentBase .carrier ul li em span {font: bold 50px/34px "arial","微軟正黑體";}
.contentBase .carrier ul li em span small {font: bold 20px/60px "arial","微軟正黑體";}
.intro-anchors { display: none; }



@media only screen and (max-width: 1115px) {

body { background: #eee }	
header img { margin: 5% 0; width: 80%; }
.orderNow { margin:  0 auto 5% auto; text-align: center; }


.contentBase { margin: 0 auto; width: 90%;  }


/*C23 use*/
.contentBase .carrier {  width:100%; margin: 0; padding: 0 0 20px 0; height: auto;background:url(../images/ulBgRight.jpg) bottom right no-repeat; }

.contentBase .carrier ul {margin: 0 auto; width:90%;  }

.contentBase .carrier ul li:before { content: "."; position: absolute; top:0; left:-5.5%; display: inline-block; width: 7px; height: 100%; background: #a468d6 }
.contentBase .carrier ul li:nth-child(3n+2):before {  background: #6872d6 }
.contentBase .carrier ul li:nth-child(3n+3):before {  background: #68aed6 }

.contentBase .acherBase { margin: 0 0 5% 0 ; min-height: auto; }
.contentBase .acherBase a { display: inline-block; margin: 1%; padding: 0 2%; width:30%; height:auto; font: 14px/24px "Arial","微軟正黑體"; }

}
@media only screen and (max-width: 700px) {
.contentBase .carrier ul li {  padding: 14% 0; }
}

@media only screen and (max-width: 600px) {


.contentBase .carrier ul li {  padding: 10% 0; }

.contentBase .carrier ul li a {font:20px/28px "arial","微軟正黑體"; color: #000;}
.contentBase .carrier ul li a strong {font: bold 30px/30px "arial","微軟正黑體"; display: block; }
.contentBase .carrier ul li em { position: absolute;bottom: 10px; right: 0;font: bold 20px/30px "arial","微軟正黑體";color:#ffa11b; }
.contentBase .carrier ul li em span {font: bold 40px/40px "arial","微軟正黑體";}
.contentBase .carrier ul li em span small {font: bold 14px/20px "arial","微軟正黑體"; vertical-align: bottom;}
}


/*animation*/
.toMov1 {
animation-name: toMov1;animation-duration: 0.5s;animation-fill-mode: both;}


@keyframes toMov1 {
  
  0% {
	 
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    ;
  }
 
 
	
100% {
	
	 -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    
    
  }	
}


.toOrg {
animation-name: toOrg;animation-duration: 0.5s;animation-fill-mode: both;
}


@keyframes toOrg {
  
  0% {
	 
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform:scale(1.05);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
 
 
	
100% {
	
	 -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform:scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    
  }	
}