#mtkContainer {
    text-align: left;
    font-family: "微軟正黑體", "Microsoft JhengHei", "Apple LiGothic Medium", Arial, Helvetica, sans-serif;
}

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


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

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

a {
    text-decoration: none;
}


h3{text-align: center; color: #558f9c; font-size: 28px; font-weight: bold; letter-spacing: 0.05em;}
h3 p{font-size: 18px; color: white; background:#558f9c; padding: 0.3em 1.5em; border-radius: 5em; display: inline-block;     margin: 0.5em 0 0 0;}
.space{height: 35px;}
.space[data-add="dash"]{border-bottom: dashed 1px white; margin-bottom: 35px;}
.info{ width: 100%; margin: 0 auto; font-size: 17px; line-height: 1.5;}

@media screen and (min-width:1400px){
    .wrapper{padding: 70px 0;}
    h3{font-size: 42px;}
    h3 p{font-size: 22px;}
    .info{width: 70%;}
}/*media*/





/*header*/
#header{position: relative; overflow: hidden;}
#header h1{
    background:#000 url(../images/film.jpg) left top repeat-y;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    height: 100%;
}
#header h1 img{
    width: 60%;
    margin: 10% 0 0 24%;
    max-width: 314px;
}



/*teaser*/
#teaser{
    background:url(../images/bg_teaser.jpg) center bottom no-repeat;
}

#teaser .iframe{
    position: relative;
    padding-bottom: 41.75%;
    overflow: hidden;
}
#teaser .iframe iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}





/*intro*/
.tabs-panel{display: none;}

.topic > .tabs-nav {text-align: center; font-size: 0;}
.topic > .tabs-nav > li{display: inline-block;  position: relative; width: 50%;}
.topic > .tabs-nav > li > a{display: block; background: rgba(130,130,130,0.8);    padding: 0.5em 0;
text-align: center; color: #fff; font-size: 28px; font-weight: bold; letter-spacing: 0.1em;
}
.topic > .tabs-nav > li > a:hover{background: rgba(130,130,130,1);}
.topic > .tabs-nav > li > a.active{ 
    background: #00426b;
}
.topic > .tabs-nav > li > a.active + span{display: inline-block; }
.topic > .tabs-nav > li > span{
    display: none;
    width: 30px;
    height: 25px;
    background: #00426b;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,40%);
   }
.topic > .tabs-nav > li > span img{
    position: relative;
    width: 40%;
    top: 40%;
}

@media screen and (min-width:1400px){
    .topic > .tabs-nav > li { width: auto; }
    .topic > .tabs-nav > li > a { padding: 0.5em 2em; font-size: 36px; }
    .topic > .tabs-nav > li > span{
         width: 35px;
         height: 30px;
    }
}/*media*/





/*scene*/
#intro{position: relative;}
.topicBG{position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    opacity: 0.15;
    z-index: -1;
    transform: translate(-50%, -50%);
    background: center center no-repeat;
    background-size: cover;
    background-image: url(../images/scene/scene1_1.jpg) ;
    
}

.scene .tabs-nav{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
}
.scene .tabs-nav li{display: inline-block;}
.scene .tabs-nav li a{display: block; color: #54909d; font-size: 18px; font-weight: bold; 
    background: rgba(255,255,255,0.5); border:solid 1px #54909d;
    padding: 0.5em 1em;}
.scene .tabs-nav li a:hover , .scene .tabs-nav li a.active{background:#54909d; color: white;}

.scene .tabs-panel{overflow: hidden; font-size: 15px; position: relative;}
.scene .tabs-panel dl{ padding: 1.5em;
    width: 100%; background: rgba(84,144,157,0.75); color: white; line-height: 1.5; 
}
.scene .tabs-panel dl dt{font-size: 170%; font-weight: bold; text-align: center; padding-bottom: 0.5em;}
.scene .tabs-panel img{width: 100%; 
}



@media screen and (min-width:1000px) {
    .scene .tabs-panel dl{
            width: 50%;
        min-height: 330px; 
        padding: 1.5em 3em 1.5em 1.5em; float: left; transform: translateX(1em); 
    }
    .scene .tabs-panel img{
        width: 50%; float: left; transform: translateX(-1em); margin-top: 2em;
    }
    .scene .tabs-panel:after{content: url(../images/d_1.png); width: auto; position: absolute; right: 0; bottom: 0; transform: translateX(-7%) translateY(2%); }
}

@media screen and (min-width:1400px) {
    .scene .tabs-nav{
        overflow-x: inherit;
        overflow-y: inherit;
    }
    .scene .tabs-nav li a{font-size: 22px;     margin: 0 0.5em;
    }

}





/*c26*/
.c26{background: #e8eeed url(../images/bg_c26.jpg) center bottom no-repeat;}
.tour .tabs-nav{font-size: 0;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
}
.tour .tabs-nav li{display: inline-block;}
.tour .tabs-nav li a{display: block; text-align: center; color: #54909d; font-size: 18px; 
    padding: 0.5em 1.5em;  background: white; border-top:solid 1px #54909d; border-left:solid 1px #54909d; border-bottom:solid 1px #54909d;}
.tour .tabs-nav li:last-child a{border-right:solid 1px #54909d;}
.tour .tabs-nav li a:hover , .tour .tabs-nav li a.active{color: white; background:#54909d;}

@media screen and (min-width:1400px) {
    .tour .tabs-nav{
        overflow-x: inherit;
        overflow-y: inherit; 
    }
   .tour .tabs-nav li a{font-size: 22px; padding: 0.5em 4em;}

}





/*discount*/
#discount .explanation{
    text-align: center;
}

#discount .explanation a{
    display: inline-block;
    background:#54909d;
    color: white;
    font-size: 17px;
    padding: 0.5em 2em; border-radius: 5em;
    margin-top: 2em;
}
#discount .explanation a:hover{
    filter: brightness(1.1);
    padding: 0.5em 3em; 
}








/*浮層區*/
#mtkContainer .ruleBase {transition: none;}

.ruleBase{ 
    transition: none;
    position: fixed; 
    top:0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    overflow-y: auto; 
    z-index: 50; 
    background: rgba(0,0,0,0.8);
    display: none;
}

.closeButton {
    position: fixed;
    right: 10px;
    top: 10px;
    width: 40px;
    height: 40px;
    border: 1px solid #fff;
    cursor: pointer;
    z-index: 99;
    
}
.closeButton::after,
.closeButton::before { content: ""; position: absolute; top:18px;left: 0; width: 100%; height: 1px; border-bottom: 1px solid #fff; transition: .5s; }
.closeButton::after { transform: rotate(45deg); }
.closeButton::before { transform: rotate(-45deg); }

.closeButton:hover::after { transform: rotate(-45deg); }
.closeButton:hover::before { transform: rotate(45deg); }


.ruleBase .rule {
    position: relative;
    margin: 50px auto 0;
    color: white;
    font-size: 15px;
    line-height: 2;
    width: 100%;
    max-width: 1000px;
    height: calc(100% - 50px);
    overflow-y: auto;
    padding: 2% 5%;
}

.ruleBase .rule h5{font-size: 170%; text-align: center; line-height: 1.2;
    padding: 0.5em;}
.ruleBase .rule p{font-size: 120%; text-align: center; font-weight: bold;
 border-top: 1px solid white; border-bottom: 1px solid white;     margin: 0 0 1em;
 line-height: 1.2;
    padding: 0.5em;
}

.ruleBase .rule dl{
    padding: 1em 0;
}
.ruleBase .rule dt{
    font-size: 120%;
    display: inline-block;
    background: #54909d;
    border-radius: 5em;
    padding: 0 1.5em;
    margin-bottom: 0.2em;
    font-weight: bold;
}
.ruleBase .rule dd span{
    color: yellow;
}
.ruleBase .rule dd b{
    text-decoration: underline;
}

@media screen and (min-width:960px) {
   .ruleBase .rule {
    height: auto; font-size: 17px;
   }
   .ruleBase .rule h5{ font-size: 200%;  }
   .closeButton{   top: 20px; right: 40px;}
}

/*浮層區*/






/*snsWrap*/
#snsWrap{background: #000 url(../images/film2.jpg) left top repeat-x; color: white;}
#snsWrap .wrapper{display: flex; justify-content: center; flex-wrap: wrap;}
#snsWrap section{padding: 3% 1.5%;}
#snsWrap .title{width: 42%; max-width: 314px;}
#snsWrap .poster{width: 58%;}
#snsWrap .sns{width: 100%;}
#snsWrap .sns img{width: 1.2em; vertical-align: middle;}
#snsWrap .sns h3{text-align: left; color: white; text-indent: -1.5em;
    margin-left: 1.5em;}
#snsWrap .sns p{font-size: 17px; line-height: 1.5; padding: 1em 0;}
#snsWrap .sns .go{text-align: center;}
#snsWrap .sns a{display: inline-block; background: #5171c5; color: white; padding: 0.5em 2em; border-radius: 5em; 
    letter-spacing: 0.08em;}
#snsWrap .sns a[data-sns="line"]{
    background:#00b900;
}
#snsWrap .sns a:hover{filter: brightness(1.1); transform: translate(2px , 2px);}

@media screen and (min-width:960px) {
    #snsWrap .wrapper{flex-wrap: nowrap;}
    #snsWrap section{padding: 1.5%;}
    #snsWrap .title{width: 22%;     }
    #snsWrap .poster{width: 28%;}
    #snsWrap .sns{width: 50%;}
    #snsWrap .sns .go{text-align: right;}
}








/*fixed*/
#fixed{width: 100%; transition: none; display: none;
    position: fixed; left: 0px; bottom: 0; 
    font-size: 0; border-top: solid 2px white;
}
#fixed li{display: inline-block; width: 25%; text-align: center; position: relative;}
#fixed li:after{content: ''; display: inline;  height: 50%; border-right:solid 1px white; position: absolute; right: 0; top: 25%; }
#fixed li:last-child:after{display: none;}
#fixed a{display: block;  padding: 1em 0.5em;  font-size: 17px; color: white; background: #54909d;  }
#fixed a:hover{filter: brightness(1.1);}
#fixed a br.forPC{display: none;}

@media screen and (min-width:1400px) {
    #fixed{
            width: auto;
        left: 20px; bottom: 50%; transform: translateY(50%); border-top: none;
    }
    #fixed li{display: block; width: auto;}
    #fixed li:after{display: none;}
    #fixed a{margin: 0.8em 0; padding: 1em;
        box-shadow: 1px 3px 0px rgba(255,255,255,0.5); border-radius: 5em;
    }
    #fixed a:hover{transform: translateY(3px);}
    #fixed a br.forPC{display: inline;}
}