html,body,div,h1,h2,h3,h4,h5,h6,p,ul,li,div,header,article,figure{  margin: 0;  padding: 0;}
ul,ol {  list-style-type: none;}
*,*:before,*:after {  box-sizing: border-box;}
.clearfix:after{ content: ''; display: block; clear: both;}
.text-center{ text-align: center;}
.img-resp{ vertical-align: bottom; max-width: 100%;}
.mx-auto { margin-left: auto; margin-right: auto;}

body { font-family: Arial, Helvetica, "儷黑 Pro", "微軟正黑體", "新細明體", sans-serif; font-size: 15px;}
.container { width: 1200px;}

.header{ background-color: #EEE; box-shadow: 0 0 10px #CCC inset; border-bottom: solid 1px #FFF;}
.header__title{ font-size: 5em; color: #666; text-align: center; line-height: 3; text-shadow: 1px 1px #FFF;}

.base { padding-top: 10rem; padding-bottom: 10rem;}
.base-striped { background-color: #eee;}
.base-flip {}

.base__body .img__inner { text-align: center;}

.base-flip .base__intro { order: 2;}
.base-flip .img__inner { order: 1;}
.base__head { margin-bottom: 5rem; text-align: center;}
.base__body { display: flex; align-items: center;}
.base__title { font-size: 2.5rem;}
.base__desc { font-size: 1.5em; line-height: 1.7; margin-bottom: 1rem;}
.base__intro, .base__body .img__inner { padding: 20px;}
.base__intro{ width: 50%;}
.base__body .img__inner{ width: 50%;}

.footer{ background-color: #666;}
.footer__title { font-size: 2rem; text-align: center; line-height: 2; color: #fff;}

.ani-fadeIn-up,
.ani-fadeIn-down,
.ani-fadeIn-left,
.ani-fadeIn-right{ opacity: 0; transition: all .5s ease;}
.ani-fadeIn-up{ transform: translateY(-50px);}
.ani-fadeIn-bottom{ transform: translateY(50px);}
.ani-fadeIn-left{ transform: translateX(-50px);}
.ani-fadeIn-right{ transform: translateX(50px);}

/* for JS */
.js-ani-fadeIn-up,
.js-ani-fadeIn-down,
.js-ani-fadeIn-left,
.js-ani-fadeIn-right{ transform: translate(0); opacity: 1;}