@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,700");
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-style: inherit; }

fieldset, img {
  border: 0; }

address, caption, cite, code, dfn, em, strong, th, var, optgroup {
  font-style: inherit;
  font-weight: inherit; }

del, ins {
  text-decoration: none; }

li {
  font-style: inherit; }

caption, th {
  text-align: left; }

h1, h2, h3, h4, h5, h6, th {
  font-weight: normal; }

q:before, q:after {
  content: ''; }

abbr, acronym {
  border: 0;
  font-variant: normal; }

sup {
  vertical-align: baseline; }

sub {
  vertical-align: baseline; }

legend {
  color: #000; }

input, button, textarea, select, optgroup, option {
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-weight: inherit; }

input, button, textarea, select {
  *font-size: 100%; }

/* width */
::-webkit-scrollbar {
  width: 4px; }

/* Track */
::-webkit-scrollbar-track {
  background: #fffae6; }

/* Handle */
::-webkit-scrollbar-thumb {
  background: #fff; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #ccc; }

html {
  height: 100%;
  max-height: 50000em;
  background: #fff; }

body {
  height: 100%;
  font-size: 16px;
  line-height: 1.8;
  font-family: 'Open Sans',Arial,Helvetica,sans-serif,'微軟正黑體','Microsoft JhengHei','STHeiti Light','儷黑 Pro','LiHei Pro','Microsoft Yahei','Microsoft JhengHei','新細明體';
  background: #fff; }

div, ul, li, header, footer, section, p, dl, dt, dd {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

.wrap {
  margin: 0 auto;
  background: #fffae6; }

.scimg img {
  width: 100%;
  display: block; }

.container {
  margin: 0 auto; }

.article {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 100%; }
  .article p {
    text-align: justify;
    margin: 1em auto; }

.section {
  padding-bottom: -8px; }

.vertical {
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size: 22px;
  line-height: 1.5;
  font-family: source-han-serif-tc, serif;
  font-weight: 700; }

.column3 {
  position: relative; }
  .column3 .box {
    width: 33.3%;
    position: relative;
    z-index: 1; }
  .column3 .box:nth-child(1) {
    padding: 6% 3% 6% 6%; }
  .column3 .box:nth-child(2) {
    padding: 6% 3% 6% 3%; }
  .column3 .box:nth-child(3) {
    padding: 6% 6% 6% 3%; }
  .column3 .color {
    position: absolute;
    top: 35%;
    left: 0;
    height: 30%;
    width: 100%;
    z-index: 0; }

.column2 .img {
  width: 64%; }
  .column2 .img .inner {
    position: relative;
    height: 100%;
    background-size: cover;
    background-position: center; }

.column2 .left .inner {
  margin-right: 2%; }

.column2 .left .vertical {
  position: absolute;
  top: 10%;
  left: 10%; }

.column2 .right .inner {
  margin-left: 2%; }

.column2 .right .vertical {
  position: absolute;
  top: 10%;
  right: 10%; }

.column2 .text {
  width: 36%;
  padding: 5%; }

.column3-img .box {
  min-height: 750px; }
  .column3-img .box .inner {
    position: relative;
    height: 100%; }

.column3-img .color {
  height: 100%;
  width: 16.6%;
  top: 0; }

.column3-img .posimg {
  position: absolute;
  height: 33%; }
  .column3-img .posimg img {
    height: 100%;
    display: block; }

.column3-img .posimg1 {
  right: 0;
  bottom: 0; }

.column3-img .posimg2 {
  right: 12%;
  bottom: 33%; }

.column3-img .right .vertical {
  position: absolute;
  top: 0;
  right: 0; }

.column3-img.left .color {
  left: auto;
  right: 0; }

.column3-img.left .posimg1 {
  right: auto;
  left: 0;
  bottom: 0; }

.column3-img.left .posimg2 {
  right: auto;
  left: 10%;
  bottom: 33%; }

.column3-img2 .box {
  background-size: cover;
  background-position: center; }

.column3-img2 .color {
  height: 50%;
  top: 0; }

.column3-img2.bottom .color {
  top: auto;
  bottom: 0; }

.video {
  position: relative;
  text-align: center;
  min-height: 100vh;
  background-size: cover;
  background-position: center; }
  .video iframe {
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    margin-top: -240px;
    left: 50%;
    margin-left: -400px; }