body { overflow-x: hidden;}

#mtkContainer { position: relative;overflow-x: hidden; background: url(../images/bgRepeatGround.jpg) top center fixed repeat-y; }
#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }

a,
a:hover { text-decoration: none; }


.bgIndexHeader { background: url(../images/bgIndexHeader.png) top center no-repeat; }
.bgIndexFooter { background: url(../images/bgIndexFooter.png) bottom center no-repeat; }

/*共用*/
.width100 {}
.widthContent { margin:0 auto; width: 90%; max-width: 1220px; }
.box2 > div { display: inline-block; letter-spacing: normal; }

.line1 { height: 40px; }

.widthStyle{margin: 0 auto; width: 100%; max-width: 1220px; }
/*.widthStyle.contentW { width: 90%; }*/

/*共用END*/

header.indexHeader { height: 472px; }
header.indexHeader h1 { font-size: 0px; }

.interViewBase { margin:75px auto 50px auto; padding-bottom: 50px; width: 90%; max-width: 1080px; background: rgba(250,246,230,0.9); border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.4); }
.interViewBase2 { margin:130px auto 100px auto; padding-bottom: 50px; width: 90%; max-width: 1080px; background: rgba(250,246,230,0.9); border-radius: 20px; box-shadow: 0 5px 10px rgba(0,0,0,0.4);}
.interViewBase .top, .interViewBase2 .top { transform: translate(38.5%,-75px); width: 58%; }
.interViewBase img, .interViewBase2 img { width: 100%; }



.index h2 { margin-bottom: 30px; text-align: center; color: #452500; letter-spacing: 1px; }
.index h2 strong,
.index h2 small { display: block; }

.index h2 strong { margin-bottom: 15px; font: bold 42px/1em "微軟正黑體"; }
.index h2 small { font: bold 30px/1em "微軟正黑體"; }

.interViewBase .content1,
.interViewBase .content2 { margin-bottom: 27px; padding: 0 7.868020%; }
.interViewBase .content1 .photo { width: 54%; }
.interViewBase .content1 .text { padding-left: 20px; width: 46%; }

.interViewBase .content1 .text h3 {  font: bold 21px/1.4em "arial","微軟正黑體"; color: #000; text-align: left; }
.interViewBase .content1 .text ul { list-style: none; }
.interViewBase .content1 .text ul li {  font: 16px/1.4em "arial","微軟正黑體"; color: #000; text-align: left; }


.interViewBase .type1 {display: block;  margin:0 auto 65px auto; width: 90%; font: bold 30px/1em "arial","微軟正黑體"; color: #ff0000; text-align: center;  }
.interViewBase .type2 {display: block;  margin:0 auto 5px auto; width: 90%; font: bold 30px/1em "arial","微軟正黑體"; color: #768d1e; text-align: center;  }
.awardText{margin:20px auto 40px;text-align: center;}
.awardText > a{background-color:#452500;font-size: 16px;padding:10px 20px; color:#fff;transition: .5s;border-radius: 50px;}
.awardText > a:hover{padding:10px 40px; background-color: #a56100;}
.awardBox{border:2px solid #452500; margin:10px; padding:20px 0px 0px;border-radius: 5px;}

.interViewBase .button_viewRule { padding: 5px 0; font: 18px/1em "arial","微軟正黑體"; color: #fff; background: #452500;text-align: center;
border-radius: 99em; cursor: pointer; transition: .5s;}
.interViewBase .button_viewRule:hover { transform: scale(0.95); }

.interViewBase .content2 .ruleContent { display: none; }
.interViewBase .content2 .ruleContent h2 { margin-bottom: 15px ;font: bold 21px/1em "arial","微軟正黑體"; text-align: left; color: #000;}
.interViewBase .content2 .ruleContent p,
.interViewBase .content2 .ruleContent ul li { margin-bottom: 10px; font: 18px/1.4em "arial","微軟正黑體"; color: #000;	}

.interViewBase .content2 .ruleContent p b { color: #a56100; font-weight: normal; }
.interViewBase .content2 .ruleContent ul { list-style: none; }

.interViewBase .content2 .ruleContent a,
.interViewBase .content2 .ruleContent a:link { color: #21488f; text-decoration: underline; }


/*youtube*/
.contentViedo{position: relative; display: block; width: 100%; z-index: 5; text-align: center; margin-top: -4%;}
.contentViedo .viedoBase{ position: relative; display: inline-block; padding: 0 1.5%; transition: all .3s; width: 45%; }
.contentViedo .viedoBase .viedoImg{width: 100%; max-width: 490px;}
.contentViedo .viedoBase .viedoImg img{width: 100%;}
.contentViedo .viedoBase .viedoTxt{ position: absolute; width: 100%;text-align: center; top: 47%;}
.contentViedo .viedoBase .viedoTxt .tri{ display: inline-block; border-top: 25px solid rgba(0,0,0,0); border-bottom: 25px solid rgba(0,0,0,0); border-left: 40px solid rgba(255,255,255,0.9); }
.contentViedo .viedoBase:hover{ cursor: pointer; transform: scale(1.1); opacity: 1;}


/*more*/
.linkmore{ letter-spacing: normal; text-align: center;  width: 18%; margin: 3% auto 0; border-radius: 30px; background: rgba(225,27,0,0.8); padding: 5px 5px; transition: all 0.3s;}
.linkmore a{ font: 1.4em/1.4em "arial","微軟正黑體"; color: #fff; }
.linkmore:hover{background: #000; transform: scale(1.1);}



.manBase { margin:0 auto; width: 100%; max-width: 1052px; text-align: center;}
.manBase img { width: 100%; }
.manBase .pc { display: block; }
.manBase .m { display: none; }

.manBase a img { transition: .5s; }
.manBase a img:hover { transform: scale(0.95); }

/*商品頁面*/
.bgItemHeader { padding-bottom: 50px; background: url(../images/bgItemHeader.png) top center no-repeat; }
.item2 .bgItemHeader { padding-bottom: 50px; background: url(../images/bgItemHeader2.png) top center no-repeat; }

header.itemHeader { height: 600px; }

.itemHeader ul { padding-top: 430px; text-align: center; }
.itemHeader ul li { display: inline-block; width: 25%; max-width: 180px; transition: .5s; cursor: pointer; }
.itemHeader ul li:hover { transform: scale(0.9); }
.itemHeader ul img { width: 100%; }

.item2 .itemHeader ul li { width: 33%; max-width: 258px;  }

.itemBase1 { margin-bottom: 120px ;}
.itemBaseBg1{  background: url(../images/itemBg1.png) top center no-repeat; }
.itemBaseBg2{  background: url(../images/itemBg2.png) top center no-repeat; }
.itemBaseBg3{  background: url(../images/itemBg3.png) top center no-repeat; }
.itemBaseBg4{  background: url(../images/itemBg4.png) top center no-repeat; }
.itemBaseBg5{  background: url(../images/itemBg5.png) top center no-repeat; }
.itemBaseBg6{  background: url(../images/itemBg6.png) top center no-repeat; }
.itemBaseBg7{  background: url(../images/itemBg7.png) top center no-repeat; }


.itemContent { margin:0 auto; width: 90%; max-width: 1220px; }
.infor > div { display: inline-block; letter-spacing: normal; }
.infor .text { padding-right: 10px; width: 45%; max-width: 320px; }
.infor .photo { cursor: pointer; width: 55%; max-width: 580px; }
.infor h3 { border-bottom: 5px solid #8ea33c; font: bold 30px/1.2em "arial","微軟正黑體"; color: #000; }
.infor h3 small { display: block; font-size: 24px; }
.infor p { padding-top: 15px; font: 16px/1.6em "arial","微軟正黑體"; color: #000;
text-shadow: 0px 0px 10px #d5fad2, 0px 0px 10px #d5fad2, 0px 0px 10px #d5fad2, 0px 0px 10px #d5fad2, 0px 0px 10px #d5fad2, 
0px 0px 10px #d5fad2, 0px 0px 10px #d5fad2; }

.infor .photo img { width: 100%; }
.infor .photo .pc { display: block; }
.infor .photo .m { display: none; }


.moreinfor { margin:25px auto 0 auto; width: 100%; max-width: 900px; text-align: center; }
.moreinfor .box3 { display: none; margin-bottom: 25px; }
.moreinfor .box3 > div { display: inline-block; margin: 0 1.5%; padding-bottom: 10px; width: 30%; max-width:260px; overflow: hidden;
 border-radius: 10px 20px 20px 20px;background: #8ea33c;
 letter-spacing: normal;}
.moreinfor .box3 img { width: 100%; }

.moreinfor .box3 h5 { margin:0 auto; padding: 4px 0; width: 90%; border-radius: 99em;font: 18px/1.6em "arial","微軟正黑體"; color: #768d1e;
 background: #e4fbde; }
.moreinfor .box3 p { padding: 8px 20px;font: 18px/1.6em "arial","微軟正黑體"; color: #e4fbde; text-align: left; }


.moreinfor .box3.box2 > div { padding-bottom: 10px; width: 47%; max-width:405px; } 

.buttonMoreItemInfor { margin:0 auto; padding: 7px 0; width: 90%; font: 18px/1em "arial","微軟正黑體"; color: #fff; 
border-radius: 99em; background: #000; cursor: pointer; transition: .5s; }

.buttonMoreItemInfor:hover { transform: scale(0.95); border-radius: 10px; }

.c23Base { margin:25px auto 0 auto; width: 100%; max-width: 900px; text-align: center; }
.c23Base .box-head,
.c23Base .intro-anchors { display: none; }
.c23Base h4 {position: relative; display: inline-block; margin-bottom: 5px; font: bold 24px/1.2em "微軟正黑體"; color: #000; }
.c23Base h4::before,
.c23Base h4::after { content: ""; position: absolute; top:-5px; width:57px; height: 35px;
 background:url(../images/c23Dot.png) top center no-repeat;  }
.c23Base h4::before { left: -60px; }
.c23Base h4::after { right: -60px; transform: scaleX(-1); }

.c23Base li { position: relative; margin-bottom: 40px; padding: 20px; list-style: none; text-align: left; background: #b09049; }
.c23Base li strong {  display: block; }

.c23Base li a,
.c23Base li a:link { font: 18px/1.2em "微軟正黑體"; color: #fff; }
.c23Base li .price { position: absolute; bottom: -18px; left: calc(50% - 90px); padding: 0; width: 180px; height: 36px; 
	font: 20px/36px "arial","微軟正黑體"; border:3px solid #b09049; border-radius: 99em; color: #b09049; text-align: center;
	 background: #fff; }
.c23Base li .price span {font: 20px/36px "arial","微軟正黑體";}





/*照片展示*/
.photoShow { display: none; position: fixed;top: 0; left: 0; padding: 0 10%; width: 100vw; height: 100vh; text-align: center; background: rgba(0,0,0,0.8); z-index: 10; }
.photoBase { padding-top: 5vh; overflow: hidden;overflow-y: hidden; overflow-x:auto;-webkit-overflow-scrolling: touch;	
	overflow-scrolling: touch; }
.photoBase ul { white-space:nowrap; width:auto; border-radius: 0; }
.photoBase li { display: inline-block; margin:0 20px; width: 70%; max-width: 960px; }

.photoBase  img { width: 100%; }

.closePhoto {display: inline-block; margin-top:10px; padding: 10px ; font: 30px/1em "arial","微軟正黑體"; color: #fff; 
border:3px solid #fff; border-radius: 20px; transition: .5s; cursor: pointer;}
.closePhoto:hover { color: #000; background: #fff; }


.fixBtnBasePc { display: inline-block; position: fixed; top:10%; right:0; width: 158px; z-index: 10; }

.fixBtnBaseM { display: none; position: fixed; bottom:0%; left:0; padding: 0 15%; width: 100%; z-index: 10; }
.fixBtnBaseM .bn2 { display: inline-block; width: 50%; }
.fixBtnBaseM img { width: 100%; }




/*全屏*/
.playBase{display: none; background: rgba(0,0,0,0.8); width: 100%;	height: 100%; position: fixed; top: 0; left: 0; z-index: 80;}
.playBase .playCotent{ position: relative; margin-top:50px;}
.playBase .playCotent iframe{display: block; margin: 0 auto;}
.playBase .playCotent .closePlay{ background: #000; border-radius: 99em; color: #fff; width: 250px; height: auto; font: 1.6em/1.5em "arial","微軟正黑體"; text-align: center; margin: 15px auto; cursor: pointer; padding: 6px 0; border:1px solid #fff;}




@media only screen and (max-width: 1220px) {
.bgIndexHeader,
.bgIndexFooter { background-size:161% auto; }

header.indexHeader { height: 45vw; }



.interViewBase{ margin:0px auto 50px auto; }

}

@media only screen and (max-width: 1180px) {
header.itemHeader { height: 60vw; }	
.contentViedo .viedoBase{ width: 45%; }
}



@media only screen and (max-width: 1068px) {
header.itemHeader { height: 68vw; }	
}	


@media only screen and (max-width: 960px) {
header.indexHeader { height: 52vw; }	
.bgIndexHeader { background: url(../images/bgIndexHeaderM.png) top center no-repeat; }
.bgIndexHeader { background-size:100% auto; }
.bgIndexFooter { background-size:140% auto; }



.interViewBase{ margin:30px auto 50px auto; }
.interViewBase .top, .interViewBase2 .top { transform: translate(20.5%,-60px); width: 74%;}

.contentViedo .viedoBase{ width: 78%; padding: 0 1.5% 1.5%;}
.contentViedo .viedoBase .viedoImg { width: 100%;max-width: 650px; }

/*more*/
.linkMore{ width: 26%; }
.linkMore a{ font: 1.6em/1.5em "arial","微軟正黑體"; letter-spacing: 1px;}


.manBase .pc { display: none; }
.manBase .m { display: block; padding-bottom: 80px; }




/* 商品頁面*/
.bgItemHeader { background: url(../images/bgItemHeaderM.png) top center no-repeat;background-size:100% auto;  }
.item2 .bgItemHeader { background: url(../images/bgItemHeaderM2.png) top center no-repeat;background-size:100% auto;  }
header.itemHeader { height: 70vw; }

.itemHeader ul { margin:0 auto; width: 90%; padding-top: 47.5vw; ; text-align: center; }

.itemBase1 { margin-bottom: 20% }
.itemBase1:last-child { margin-bottom: 0; }
.itemBaseBg1 {background: url(../images/itemBg1M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg2 {background: url(../images/itemBg2M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg3 {background: url(../images/itemBg3M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg4 {background: url(../images/itemBg4M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg5 {background: url(../images/itemBg5M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg6 {background: url(../images/itemBg6M.png) top center no-repeat;  background-size: 100% auto}
.itemBaseBg7 {background: url(../images/itemBg7M.png) top center no-repeat;  background-size: 100% auto}

.itemBase1 h2 { margin-bottom: 8%; }

.infor > div { display: block;  }
.infor .text { padding-right: 0px; width: 100%; max-width: 100%; }


.infor h3 { margin: 0 auto;text-align: center; border-bottom: 5px solid #8ea33c; font: bold 3rem/1.2em "arial","微軟正黑體"; color: #000; }
.infor h3 small { display: block; font-size: 2.5rem; }
.infor h3 small.small { font-size: 2rem } 
.infor p { padding-top: 2%; font: 1.4rem/1.6em "arial","微軟正黑體";text-shadow: none; }


.infor .photo { width: 100%; max-width: 100%; }
.infor .photo .pc { display: none; }
.infor .photo .m { display: block; }



.moreinfor .box3 h5 { width: 95%;} 


.fixBtnBasePc { display: none; }
.fixBtnBaseM { display: block; }
}




@media only screen and (max-width: 768px){
   .awardText > a{display: block; margin:10px;}

.contentViedo .viedoBase .viedoTxt{ top: 45%;} 

/*more*/
.linkMore{ width: 30%;}

}

@media only screen and (max-width: 600px) {
.interViewBase .content1 .photo,
.interViewBase .content1 .text { padding: 0; display: block; width: 100%; }

.itemBase1 { margin-bottom: 40% }

.itemBase1 h2 img { width: 50%; }

.interViewBase{padding-bottom: 30px;}
.interViewBase2{padding-bottom: 30px;margin: 110px auto 100px auto;} 

.interViewBase .top, .interViewBase2 .top { transform: translate(10%,-45px); width: 85%;}

/*more*/
.linkMore{ width: 45%;}

.infor h3 {font: bold 2.5rem/1.2em "arial","微軟正黑體"; }
.infor h3 small { font-size: 2rem; }
.infor h3 small.small { font-size: 0.9rem; margin-bottom: -5%; } 
.infor p {  font: 1.2rem/1.6em "arial","微軟正黑體";}


.moreinfor { margin:25px auto 0 auto; width: 100%; max-width: 900px; text-align: center; }
.moreinfor .box3 { margin-bottom: 25px; }
.moreinfor .box3 > div ,
.moreinfor .box3.box2 > div { display: block; margin: 0 0 5% 0;padding-bottom: 10px; width: 100%; max-width:100%;
 border-radius: 10px 20px 20px 20px;background: #8ea33c;}

.moreinfor .box3 > div { 
 	letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */}
 .moreinfor .box3 .img { display: inline-block; width: 40%; }
 .moreinfor .box3 .textBox { display: inline-block;width: 60% ; letter-spacing: normal;}

  .moreinfor .box3.box2 .img { display: inline-block; width: 100%; }
 .moreinfor .box3.box2 .textBox { display: inline-block;width: 100% ; letter-spacing: normal;}

 .moreinfor .box3 h5 { width: 100%; border-radius: 0; padding: 0; }
 .moreinfor .box3 p { padding: 5px; font: 14px/1.4em "arial","微軟正黑體";}
.moreinfor .box3 img { width: 100%; }




.photoShow { position: fixed;top: 0; left: 0; padding: 0 5%; width: 100vw; height: 100vh; background: rgba(0,0,0,0.8); z-index: 10; }
.photoBase { padding-top: 20vh; }


.fixBtnBaseM { padding: 0 }

}




@media only screen and (max-width: 414px){
.interViewBase2{ margin: 110px auto 60px auto;}
.interViewBase .top, .interViewBase2 .top { transform: translate(6%,-35px); width: 90%;}


.contentViedo .viedoBase{ width: 90%; padding: 0 0% 4%;}

.contentViedo .viedoBase .viedoTxt{ top: 38%;}

.linkMore { width: 52%;}
.linkMore a{ font: 1.3em/1.3em "arial","微軟正黑體";}

.playBase .playCotent .closePlay {font: 1.4em/1.3em "arial","微軟正黑體";}


}