#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
    background: url(../images/bg.jpg) center top repeat;
    overflow-x: hidden;
}

#mtkContainer * {
    transition: all 0.2s, font-size 0s;
}

.wrapper {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

img {
    width: 100%;
    border: 0;
    vertical-align: top;
}

.poi-header .mobile-menu-level-1 .tab .tablinks .tablinks-img {
    width: auto;
}

a {
    text-decoration: none;
}



.header {
    position: relative;
    background: url(../images/head.jpg) center top no-repeat;
    background-size: 1920px;
    height: 1067px;
    text-align: center;
}

.header-intro {
    display: inline-block;
    width: 90%;
    max-width: 785px;
    margin-top:785px;
}

@media screen and (max-width: 1400px){
    .header {background: url(../images/head2.jpg) center top no-repeat; background-size: 120%; height: 70vw; max-height: 870px;}
    .header-intro{     margin-top: 46vw;  }
}

@media screen and (max-width: 768px){
    .header {height: 75vw;}
}



/*header-animation*/
.header-animation{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.header-animation img{position: absolute; left: 50%; top: 0; width: auto; opacity: 0; animation-fill-mode: forwards;}
.header-animation-title-1{transform: translate(-308px,89px); animation:titleAnimate 0.8s 0s linear; }

.header-animation-title-2{transform: translate(-61px,115px); animation:titleAnimate 0.5s 0.6s linear; }
.header-animation-title-3{transform: translate(69px,115px);  animation:titleAnimate 0.5s 0.8s linear;}
.header-animation-title-4{transform: translate(184px,122px); animation:titleAnimate 0.5s 1.0s linear;}
.header-animation-title-5{transform: translate(293px,115px); animation:titleAnimate 0.5s 1.2s linear;}
.header-animation-title-6{transform: translate(421px,118px); animation:titleAnimate 0.5s 1.4s linear;}
.header-animation-title-7{transform: translate(525px,118px); animation:titleAnimate 0.5s 1.6s linear;}

.header-animation-title-8{transform: translate(-2px,245px); animation:titleAnimate 0.5s 2.0s linear;}
.header-animation-title-9{transform: translate(113px,270px); animation:titleAnimate 0.5s 2.2s linear;}
.header-animation-title-10{transform: translate(247px,247px); animation:titleAnimate 0.5s 2.4s linear;}
.header-animation-title-11{transform: translate(378px,258px); animation:titleAnimate 0.5s 2.6s linear;}

.header-animation-title-12{transform: translate(-119px,391px); animation:titleAnimate 0.8s 3.0s linear;}
.header-animation-title-13{transform: translate(63px,391px); animation:titleAnimate 0.8s 3.4s linear;}
.header-animation-title-14{transform: translate(239px,385px); animation:titleAnimate 0.8s 3.8s linear;}
.header-animation-title-15{transform: translate(412px,389px); animation:titleAnimate 0.8s 4.2s linear;}

@keyframes titleAnimate {
   from { opacity: 0; }
     to { opacity: 1; }
}

@media screen and (max-width: 1400px){
    .header-animation{display: none;}
}




/*sale*/
.sale{font-size: 20px; line-height: 1.2; letter-spacing: 0.05em; }
.sale-section{  margin-bottom: 100px;  }
.sale-section-first{ margin-top: -70px; }
.sale-dialogue{width: 70%; display: flex; }
.sale-dialogue-left{  }
.sale-dialogue-right{  text-align: right; margin-left: 30%; margin-top: -392px;  }
.sale-dialogue > img{display: inline-block; width: 40%; height: auto;    align-self: flex-end; }
.sale-dialogue > div{display: inline-block; width: 60%;}
.sale-dialogue-b{    display: block; }
.sale-dialogue-p{position: relative;  display: inline-block; background: white; border:solid 2px #b2b2b2; border-radius: 5px; padding: 1em;     margin-top: 0.5em; font-weight: bold; text-align: left;}
.sale-dialogue-p:after{display: inline-block; content: url(../images/d1.png); position: absolute;  }
.sale-dialogue-left .sale-dialogue-p:after{ left: 2em; bottom: 0; transform: translateY(100%); }
.sale-dialogue-right .sale-dialogue-p:after{ right: 2em; top: 0;  transform: translateY(-100%) rotate(180deg); }
.sale-dialogue-left > div{ transform: translate(-2em,2em); }
.sale-dialogue-right > div{ transform: translate(2em,10em); }
.sale-dialogue-left .sale-dialogue-b{padding-left: 1em;}
.sale-dialogue-right .sale-dialogue-b{padding-right: 4em;     text-align: right;}

.sale-more{text-align: center;}
.sale-more a{display: inline-block; color: #94793a; border-radius: 5em; border: solid 2px; padding: 0.5em 1em; font-size: 20px; font-weight: bold; margin: 0.5em;}
.sale-more a:hover{ background: #94793a; color: white; }

.sale-paragraph{opacity: 0.7; margin-bottom: 100px;}

@media screen and (max-width: 1400px){
    .sale{font-size: 16px; }
    .sale-section-first{ margin-top:0; }
    .sale-dialogue{width:50%;}
    .sale-dialogue-right{margin-left: 50%; margin-top: -20vw;}
    .sale-dialogue-left > div , .sale-dialogue-right > div{ transform:none; }
    .sale-dialogue-p{    width: 90%; margin: 0.5em 5%; }
    .sale-dialogue-p br{display: none;}
    .sale-dialogue-right .sale-dialogue-b{padding-right: 2em;}
    .sale-dialogue-left .sale-dialogue-b{padding-left: 2em;}
    .sale-dialogue-right .sale-dialogue-p:after{ right: 2em; bottom: 0; transform: translateY(100%) scaleX(-1); }
}

@media screen and (max-width: 768px){
    .sale-section , .sale-paragraph{  margin-bottom: 10vw;  }
    .sale-dialogue{width: 100%;}
    .sale-dialogue-right{margin-left:0;  margin-top: 1em;     text-align: left;}
    .sale-more a{ font-size: 16px; }
}

@media screen and (max-width: 440px){
    .sale-dialogue-left .sale-dialogue-p:after {
        left: 0;
        bottom: inherit;
        transform: translateX(-75%) rotate(90deg) scaleX(-1);
        top: 1.5em;
    }
    .sale-dialogue-right .sale-dialogue-p:after {
        right: 0;
        bottom: 1.5em;
        top: inherit;
        transform: translateY(0);
        transform: translateX(75%) rotate(90deg) scaleY(-1);
    }
}