body { background: #10a8ff;  }
#mtkContainer { position: relative; background:url(../images/topBanner.jpg?v=2020071601) top center no-repeat; }
#mtkContainer,
#mtkContainer * { vertical-align: top; }
 ul li { list-style: none; }

header.header { }
header.header h1 { height: 550px; }
header.header h1 .m { display: none; }



.mobileMenuButton { display: none }
.mainPageButton { position:sticky; position: -webkit-sticky; top:0px; left: 0; width: 100%; margin-bottom: -36px;
	text-align: center; background: #e8528c ; z-index: 50}
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; white-space:nowrap; }
.mainPageButton ul li { display:inline-block; margin:5px 0; padding: 5px 10px;white-space:nowrap;  }
.mainPageButton ul li a,
.mainPageButton ul li a:link {  font:20px/1.4 "arial","微軟正黑體"; color: #fff; white-space:nowrap;  }
.mainPageButton ul li a:hover { /*text-decoration: underline !important;*/ border:1px solid #fff; }



.hasButton { position: relative;  z-index: 1 }
.hasButton .secButton { display: none; position: absolute; top: 20px; left: 0; width: auto; min-width: 100%; z-index: 2; background: rgba(0,0,0,0.5) }
.hasButton .secButton a { display: block; padding: 5px 0 }
.mainPageButton a:hover {color: #fff200 !important;}

.hasButton .secButton.ship { left: -30px }

.contentBase { padding: 50px 0; }



.joinLine { display: inline-block; position: fixed; bottom: 60%; right: 0; z-index: 20; border-radius: 10px;transition: .5s;
 box-shadow:0 10px 10px rgba(0,0,0,0.3); overflow: hidden; background: rgba(255,255,255,0.7);cursor: pointer; }
.joinLine:hover { background: #fff; }
.joinLine img { width: 100%; }
.joinLine .pc { display: block; }
.joinLine .m { display: none; }

.qr { display: none; position: absolute; top: 0; left: 0; transition: .5s; }

.lightBase { display: none; position: fixed; top: 0; left: 0; padding: 40px 10px; width: 100%; height: 100%; 
	z-index: 101; background: rgba(0,0,0,0.8) }
.lightBase .closeBtn { display: block; margin: 10px auto; width: 250px; border-radius: 99em; border: 1px solid #fff; background: rgba(255,255,2550.8)   }
.lightBase .closeBtn a {display: block; font:16px/2 "arial","微軟正黑體"; color: #000; text-align: center;  }
.lightBase .tktImg { display: block; margin: 0 auto; max-width: 700px; width: 100%; }


/**/
.contentBase { margin: 0 auto; width: 100%; max-width: 1400px; }

.box1 img { width: 100%; }

.box2 { display: flex; flex-wrap: wrap;  align-items: stretch; }
.box2 li { display: inline-block; width: 50%; flex-grow:0; flex-shrink:0; }
.box2 li img { width: 100%; }


.box4 { display: flex; flex-wrap: wrap;  align-items: stretch; }
.box4 li { display: inline-block; width: 25%; flex-grow:0; flex-shrink:0; }
.box4 li img { width: 100%; }


.box5 { display: flex; flex-wrap: wrap;  align-items: stretch; }
.box5 li { display: inline-block; width: 20%; flex-grow:0; flex-shrink:0; }
.box5 li img { width: 100%; }



@media only screen and (max-width: 1366px) {
.lightBase .tktImg { max-width: 500px; }
}

@media only screen and (max-width: 1200px) {
#mtkContainer { position: relative;  background-size: 150% auto }
header.header h1 { height: 52vw; }




}


@media only screen and (max-width: 960px) {
.joinLine { display: inline-block; position: fixed; bottom: 0%; right: 0; width: 100%; border-radius: 0px;
 box-shadow: none; overflow: visible; background: rgba(255,255,255,1); text-align: center; padding: 10px 0;}
.joinLine .pc { display: none; }
.joinLine .m { display: block; margin:0 auto;}

.qr { display: none; position: absolute; top: -200px; max-width: 200px; left: 0; transition: .5s; opacity: 0; }
.joinLine:hover .qr { display: block; opacity: 1;}

}


@media only screen and (max-width: 768px) {
#mtkContainer { position: relative; background:none; }

header.header h1 { height: auto; }
header.header h1 .m { display: block; width: 100%;}


.mobileMenuButton { display: inline-block; position: fixed; bottom:0; left:calc(50% + 15px); padding: 5px;
 width:auto; height:auto; z-index: 100; background: rgba(0,0,0,0.5) }
.mainPageButton { display: none; position:fixed; top:0; left: 0; padding-top: 10%; width: 100%; height: 100vh;margin-bottom:0;
	 z-index:98; }
.mainPageButton ul { margin:0 auto;padding: 0px; width: 90%; max-width: 1440px; text-align: center; }
.mainPageButton ul li { display: block; margin:5px 0; padding: 5px 10px; }
.mainPageButton ul li a,
.mainPageButton ul li a:link { font:16px/16px "arial","微軟正黑體"; color: #fff }

.hasButton { position: relative; z-index: 1 }
.hasButton .secButton { display: block; position: static;width: 100%; z-index: 2; background: rgba(255,255,255,0.2) }
.hasButton .secButton a { display: block; padding: 5px 0 }


.joinLine:hover .qr { display: none; opacity: 1;}
.mobileMenuButton { left: calc(100% - 40px); bottom: 80px; }

.mHide { display: none !important; }

.box2 li { display: inline-block; width: 100%; flex-grow:0; flex-shrink:0; }


}

@media only screen and (max-width: 500px) {
.contentBase { padding: 0 5%; }

.box4 { display: flex; flex-wrap: wrap;  align-items: stretch; }
.box4 li { display: inline-block; width: 50%; flex-grow:0; flex-shrink:0; }
.box4 li img { width: 100%; }


.box5 { display: flex; flex-wrap: wrap;  align-items: stretch; }
.box5 li { display: inline-block; width: 50%; flex-grow:0; flex-shrink:0; }
.box5 li img { width: 100%; }




}