/*共用*/
body,html {width:100%;overflow-x: hidden;}
ul,li { text-decoration: none;list-style: none; }
a:hover { text-decoration: none; }
#mtkContainer { position: relative; width: 100%;}


#mtkContainer,
#mtkContainer * { vertical-align: top; box-sizing: border-box; }
.mobile{display: none;}
.mheader {display: none;}
div.mobileTopRight{display: none;opacity: 0;position: fixed;bottom: -100px;right:-100px;}
.header {position: relative;height: 800px;}

.header::after{position: absolute;content: "";bottom: 10px;background: url(../images/headerbg.png) center no-repeat;width: 100%;background-size: 100%;height: 20%;}

.pcheader{width: 100%;text-align: center;position: absolute;z-index: 2;top: 40px;}
.pcheader img {position: relative;margin: 70px 0 0 0;width: 100%;max-width: 1164px;}
h1.h1{position: relative;}
/*h1.h1 .yout iframe{position: relative;z-index: -1;}*/

.yout{width: 100%;position: relative;padding-bottom: 56.25%;padding-top: 0px;height: 0;overflow: hidden;}
.yout iframe, .yout object, .yout embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;}


/*上面選單*/

.topMenu {margin:0 auto;z-index: 999;position: relative;text-align: center;width: 100%;}
.topMenu li {background: #18232a;border-radius: 10px; font: bold 24px/1.8 "arial","微軟正黑體";display: inline-block;margin: 0 10px;color:#FFF;padding: 5px 10px;position: relative;cursor: pointer;transition: 0.3s;}
.topMenu li:hover {transform: translateY(-10px);}
.topMenu li img{max-width: 50px;width: 100%;margin:0 5px 0 0;}
.topMenu.ing{background:#ffde00;position: fixed;top:0;padding: 5px 0; }
.topMenu.ing li img { max-width: 40px;width: 100%;margin:0 5px 0 0;}
.topMenu.ing li{ font: bold 20px/1.6 "arial","微軟正黑體";}



/*c26*/
.group-type-ph { 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 */ ;margin: 50px 0;}

.group-type-ph .ph { display: inline-block; margin: 0 1% 2% 1%; padding: 10px; width: 80%;
 letter-spacing: normal; background: #fff;  transition: .5s;}
.group-type-ph .ph:hover { transform: scale(0.95); }
.group-type-ph .addPhBox2 > div { display: inline-block; width: 50%; letter-spacing: normal; }
.group-type-ph .addPhBox2 img { width: 100%; }

.addPhBox2 .addText { position: relative; padding-left: 10px; padding-bottom: 0px; text-align: left; height: 100%; }
.addText .ph-title { font: bold 24px/1.2em "arial","微軟正黑體"; color: #000;  }
.addText .ph-detail { font:  18px/1.4em "arial","微軟正黑體"; color: #000;  margin:5px;}
.addText .price { position: relative;font: bold 20px/2.2em "arial","微軟正黑體";color:#ff305c;
letter-spacing: -1px; vertical-align: bottom;}
.addText .price i{font-size:20px;margin-left:-2px;font-style: normal;}
.addText .price span {font: bold 32px/1.2em "arial","微軟正黑體";   }
.ph .ph-feature { padding: 5px 0; font: 18px/1.4em "arial","微軟正黑體"; color: #000; text-align: left; background: #d5d5d5; }



.boxBase{width: 80%;max-width: 1400px;margin: 0 auto;text-align: center;}
.part1 {background: url(../images/bg01.jpg) no-repeat top center,#066fa5;text-align: center;padding: 25px 0 10px 0;margin-top:-10px;}
.part2 {background: url(../images/bg02.jpg) repeat-y top center,#262c4c;text-align: center;padding: 25px 0 10px 0;}
.part3 {background: url(../images/bg03.jpg) repeat-y top center,#066fa5;text-align: center;padding: 25px 0 10px 0;}

.sale{width:70%;background:#262c4c;border-radius: 10px;border:2px #FFF dashed;margin:100px auto;position: relative;z-index: 0;}
.title{max-width: 359px;width: 100%;margin: -50px 0 0 0;}
.title2{max-width: 359px;width: 100%;margin: 0px 0 0 0;}
.sale::before{content: "";position: absolute;background: url(../images/horse2.png);width: 159px;height: 240px;left:-55px;bottom: -30px;}
.sale::after{content: "";position: absolute;background: url(../images/horse1.png) ;width: 164px;height: 308px;right:-75px;bottom: -30px;}

.play{width:100%;background:#066fa5;border-radius: 10px;margin:100px auto;position: relative;text-align: center;padding: 0 0 30px 0;z-index: 0;}
.playTitle{color:#FFF;font: bold 40px/1.8 "arial","微軟正黑體";margin: 10px 0;}
h2{background: #efe800;border:2px solid #262c4c;font: bold 44px/1.6 "arial","微軟正黑體"; margin: 0 auto;position: relative;top:-44px;display: inline;padding: 7px 20px;}
h2::before{content: "";position: absolute;background: url(../images/h2.png);width: 71px;height: 66px;left:-55px;bottom: -17px;z-index: -1;}
h2::after{content: "";position: absolute;background: url(../images/h2.png);width: 71px;height: 66px;right:-55px;bottom: -17px;z-index: -1;transform: rotate(180deg)}

.sale::before{content: "";position: absolute;background: url(../images/horse2.png);width: 159px;height: 240px;left:-55px;bottom: -30px;}



.pic{display: inline-block;}
.pic.mobile{display: none;}
.things{margin: 40px auto;position: relative;}


.things1 .text::after{content: "";position: absolute;background: url(../images/horse3.png) ;width: 153px;height: 251px;right:-65px;bottom: 155px;}
.things1 .pic{width: 50%;margin: 0 33px;}
.things1 .pic > img{max-width:702px;width: 100%; }
.things1 .text{width: 38%;position: relative;}
.step img{max-width: 153px;width: 100%;}
.text{text-align: left;display: inline-block;}
.text h3{color:#fff100;font: bold 46px/1.2 "arial","微軟正黑體";}
.text h4{color:#fff100;font: bold 32px/1.4 "arial","微軟正黑體";margin: 5px 0;}
.text p{color:#fff;font: 18px/1.4 "arial","微軟正黑體";}
h4{color:#fff100;font: bold 32px/1.4 "arial","微軟正黑體";margin: 5px 0;text-align: left;}

.things2 .text::after{content: "";position: absolute;background: url(../images/horse4.png) ;width: 135px;height: 114px;right:-35px;top: 0px;}
.things2 .pic{width: 42%;margin:0 0 0 35px;}
.things2 .text {width: 44%;position: relative;}
.things2 .pic img{max-width:587px;width: 100%; }
.things2 .text .down {border:1px solid #FFF;padding: 20px;margin: 20px 0;}
.things2 .text .down .text2{color:#fff;font: bold 24px/1.6 "arial","微軟正黑體";margin: 10px 0;}
.things2 .text .down .text2 span{color:#066fa5;font: bold 24px/1.6 "arial","微軟正黑體";border-radius: 20px;padding: 5px 10px;background: #FFF;margin: 5px;}
.things2 .text .down .text3 p{display: inline-block;width: 70%;}

.qrcode img{max-width: 143px;width: 100%;}
.qrcode{display: inline-block;}

.things3 .pic{width: 48%;margin: 0 auto;}
.things3 .pic img{width: 100%;max-width: 622px;}
.things3 .text {width: 44%;}


.things2 .text .up h4{display: inline-block;margin: 50px 0 0 10px;}
.things3 .text h4 {display: inline-block;margin:50px 0 10px 10px;}
.things4 .text h4 {display: inline-block;margin:50px 0 10px 10px;width: 60%;}

.step.step1 {margin:20px 0 10px 0;}
.step.step2 {display: inline-block;margin:20px 0 10px 0;}
.step.step3 {margin:20px 0 10px 0;display: inline-block;}
.step.step4 {margin:20px 0 10px 0;display: inline-block;}

.things4 .text {width: 40%;margin: 0 20px;position: relative;}
.things4 .text::after{content: "";position: absolute;background: url(../images/horse5.png) ;width: 189px;height: 258px;left:-184px;bottom: -150px;}

.things4 .pic{width: 48%;margin: 0 auto;background: rgba(255,255,255,0.3);border-radius: 30px;padding: 10px;}
.things4 .pic img{max-width:583px;width: 100%; }

.font16{color:#FFF;font: 16px/1.4 "arial","微軟正黑體";text-align: left;}
.font18{color:#FFF;font: 18px/1.4 "arial","微軟正黑體";text-align: left;}
.dotted{border-radius: 20px; border:2px dotted #FFF;padding: 20px;}

.blogger{width:100%;background:#262c4c;border-radius: 10px;margin:100px auto;position: relative;text-align: center;padding: 0 50px 30px 50px;z-index: 0;}
.blog{display: inline-block;text-align: center;}

.blog1{position: relative;}
.blog1 .text{width: 40%;margin: 10% 0 0 0;}
.blog1 img{max-width: 530px;width: 100%;position: relative;}

.blog2{margin: 50px 0;}
.blog2Left {position: relative;width: 48%;text-align: left;display: inline-block;}
.blog2Left img{ width:45%; max-width: 800px;margin: 10px;}
.blog2LeftImg{width:100%;margin: 10px;display: inline-block;}
.blog2LeftText{display: inline-block;width: 100%;padding: 20px;}
.blog2Right{display: inline-block;width:41%;}
.blog2Right img{max-width: 800px;width: 100%;}

.blog3{margin: 50px 0;position: relative;}
.blog3-1{width: 22%;display: inline-block;margin-right: 10px;position: relative;}
.blog3-1 h4{margin-left:20px; }
.blog3-2{width: 14%;display: inline-block;margin: 10px;position: relative;}
.blog3-2 p{margin: 10px 0 10px 0;}
.blog5{position: relative;}
.blog3-2 img{max-width: 600px;border-radius: 99em;width: 100%;border: 3px #FFF solid;margin:5px 0 5px 0;}
.blog5-1{width: 24%;display: inline-block;margin: 40px;position: relative;}
.blog5-1 img{max-width: 600px;border-radius: 99em;width: 100%;border: 3px #FFF solid;margin:10px 0 10px 0;}
.blog6 p {width: 100%;}
.blog6{margin:10px auto;width: 87%;}

.blogger .blog1 {padding-top:50px;}
.blog2-2 .blog2Right{margin-top: 20px;}

.blog6-1{width: 22%;display: inline-block;margin: 10px;position: relative;}
.blog6-1 img{max-width: 600px;border-radius: 99em;width: 100%;border: 3px #FFF solid;margin:5px 0 5px 0;}
.blog6Pic {margin: 20px 0;}
.blog6-1 p{margin:10px auto;}

.blog7{margin-top: 15px;position: relative;}
.blog7-1{display: inline-block;width:26%;margin-top: 20px;}
.blog7-2{display: inline-block;width: 28%;margin:14px;}
.blog7-2 img{max-width: 800px;width: 100%;margin:10px 0 10px 0;}
.blog7-1 h4 {position: relative;}


.blog1::after{content: "";position: absolute;background: url(../images/05.png) ;width: 91px;height:76px;left:51%;bottom:-5px;}

.blogger1 .blog1 p::after,.blogger2 .blog1 p::after{content: "";position: absolute;background: url(../images/horse4.png) ;width: 135px;height: 114px;right:50px;top: 80px;}
.blogger1 .blog3 .blog3-1::after{content: "";position: absolute;background: url(../images/horse6.png) ;width: 182px;height:216px;left:-200px;bottom: -50px;}
.blogger1 .blog3 .blog3-2:nth-child(2)::after{content: "";position: absolute;background: url(../images/01.png) ;width: 76px;height:59px;left:-10px;bottom: -50px;}

.blogger1 .blog3 .blog3-2:nth-child(5)::after{content: "";position: absolute;background: url(../images/01.png) ;width: 76px;height:59px;right:-50px;top: 80px;transform: rotate(-90deg);}

.blogger1 .blog5::after{content: "";position: absolute;background: url(../images/horse3.png) ;width: 153px;height: 251px;right:-65px;bottom: 155px;}

.blogger1 .blog5 .blog5-1:nth-child(1)::after{content: "";position: absolute;background: url(../images/02.png) ;width: 76px;height: 59px;right:-85px;bottom: 175px;transform: rotate(-30deg);}
.blogger1 .blog5 .blog5-1:nth-child(2)::after{content: "";position: absolute;background: url(../images/02.png) ;width: 76px;height: 59px;right:-75px;bottom: 215px;transform: rotate(30deg);}

.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(1)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;left:-43px;bottom: 25px;}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(4)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;right:-23px;top: 60px;transform: rotate(-180deg);}

.blogger2 .blog7 .blog7-1 h4::after{content: "";position: absolute;background: url(../images/04.png) ;width: 52px;height:51px;right:40px;top: -8px;background-size: cover;}
.blogger2 .blog7::after {content: "";position: absolute;background: url(../images/horse7.png) ;width: 142px;height: 216px;right:-100px;bottom: 0px;}

.blog1 > a > img:hover {transform: translateY(-10px);}
.blog1 > a > img{transition: 0.3s;}





@media only screen and (max-width: 1650px) {
.header::after{position: absolute;content: "";bottom: 0px;background: url(../images/headerbg.png) center no-repeat;width: 100%;background-size: 100%;height: 20%;}
}


@media only screen and (max-width: 1600px) {
.boxBase{width: 90%;}
.sale{width:80%;}
}	

@media only screen and (max-width: 1500px) {
.blog1::after{content: "";position: absolute;background: url(../images/05.png) ;width: 91px;height:76px;left:54%;bottom:-5px;}
}


@media only screen and (max-width: 1420px) {
.header {background: none;height: auto;position: relative;}
.pcheader img {margin: 2% 0 0 0;}

}	


@media only screen and (max-width: 1400px) {

.boxBase{width: 95%;}
.sale{width:90%;}
.group-type-ph .ph{width: 90%;}
.sale::before{content: "";position: absolute;background: url(../images/horse2.png);width: 159px;height: 240px;left:-80px;bottom: -30px;}
.sale::after{content: "";position: absolute;background: url(../images/horse1.png) ;width: 164px;height: 308px;right:-120px;bottom: -30px;}

.text h3{font:bold 40px/1.2 "arial","微軟正黑體";}
.step img{width: 100%;max-width: 100px;}

.text h4{font:bold 28px/1.4 "arial","微軟正黑體";}
.things2 .text .up h4 {margin: 30px 0 0 10px;}
.things3 .text h4 {margin: 30px 0 0 10px;}
.things4 .text h4 {margin: 30px 0 0 10px;}
.things2 .text .down .text2,.things2 .text .down .text2 span{font:bold 20px/1.6 "arial","微軟正黑體";}
.things4 .text h4{width: 75%;}

.things4 .text::after{ content: ""; position: absolute; background: url(../images/horse5.png); width: 148px; height: 202px; left: -72px; bottom: -216px; background-size: cover;}

.things1 .text::after{content: ""; position: absolute;background: url(../images/horse3.png); width: 114px; height: 190px;right: -26px; bottom: 181px; background-size: cover;}


.blogger1 .blog1 p::after,.blogger2 .blog1 p::after{content: "";position: absolute;background: url(../images/horse4.png) ;width: 135px;height: 114px;right:0px;top: 80px;}
.blogger1 .blog5::after{content: "";position: absolute;background: url(../images/horse3.png) ;width: 107px;height: 177px;right:-65px;bottom: 155px;background-size: cover;}

h4{color:#fff100;font: bold 28px/1.4 "arial","微軟正黑體";margin: 5px 0;text-align: left;}


}



@media only screen and (max-width: 1300px) {
.things2 .text .down .text3 p{width: 60%;font:16px/1.4 "arial","微軟正黑體"}
.things4 .text h4 {width: 70%;}

.blogger1 .blog1 p::after,.blogger2 .blog1 p::after{content: "";position: absolute;background: url(../images/horse4.png) ;width: 116px;height: 98px;right:-10px;top: 80px;background-size: cover;}

.blog2 .blog2Right{margin-top: 60px;}
.blogger2 .blog7 .blog7-1 h4::after{content: "";position: absolute;background: url(../images/04.png) ;width: 52px;height:51px;right:3px;top: -8px;background-size: cover;}
.blog1::after{content: "";position: absolute;background: url(../images/05.png) ;width: 91px;height:76px;left:56%;bottom:-5px;}
}



@media only screen and (max-width: 1200px) {
.things2 .pic {margin:50px 0 0 35px;}
.step.step1{display: inline-block;}
.things1 .text h4 {display: inline-block;margin:16px 0 10px 10px;width: 60%;}
.things2 .text .up h4 ,.things3 .text h4{width: 60%;}
.things1 .text::after{content: ""; position: absolute;background: url(../images/horse3.png); width: 114px; height: 190px;right: -26px; top: -134px; background-size: cover;}
.things2 .text::after{content: ""; position: absolute;background: url(../images/horse4.png); width: 135px; height: 114px;right: -35px;top: -59px;}
.sale::after{ content: ""; position: absolute; background: url(../images/horse1.png); width: 108px; height: 204px; right: -73px; bottom: -26px; background-size: cover;}
.sale::before{content: ""; position: absolute; background: url(../images/horse2.png); width: 126px; height: 193px; left: -80px; bottom: -30px; background-size: cover;}
.blog7-1 {width: 30%;}

.blog1::after{content: "";position: absolute;background: url(../images/05.png) ;width: 91px;height:76px;left:58%;bottom:-5px;
}








@media only screen and (max-width: 1100px) {


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

.mobile{display: block;}
.pc{display: none;}


.pic.pc{display: none;}
.pic.mobile{display: block;}



.things1 .pic{width: 80%;margin: 0 auto;}
.things1 .pic > img{max-width: 759px;}

.things1 .text{width: 80%;margin:20px 0;}
.things2 .text{width: 80%;}
.things{margin:0px auto;}
.things.things2 {margin:0px auto;}
.things2 .text .down .text3 p{width: 80%;}
.things1 .text h4{margin:34px 0 10px 10px;}
.things2 .pic{width: 80%;margin:0 auto;}
.things2 .pic img{max-width: 1000px;}
.things3 {margin: 10px auto;}
.things3 .pic{width: 80%;background: rgba(255,255,255,0.3);border-radius: 30px;padding: 10px;margin:10px auto;}
.things3 .text{width: 80%;}
.things4 .text{width: 80%;}

.things4 .pic {width: 80%;margin: 10px 0;}
.things2 .text::after{content: ""; position: absolute; background: url(../images/horse4.png); width: 135px;height: 114px; right: -67px; top: -5px;}
.things4 .text::after{content: ""; position: absolute; background: url(../images/horse5.png); width: 148px; height: 202px;left: -72px;bottom: -358px; background-size: cover;}	

.things2 .text .down .text3 p{width: 100%;}
.qrcode{ display: inline-block; text-align: right; width: 100%;}




.blog1 .text{width: 85%;margin:5% 0 0 0;}
.blogger1 .blog1 p::after, .blogger2 .blog1 p::after{content: "";position: absolute;background: url(../images/horse4.png); width: 135px;height: 114px;right: 117px;top: 257px;background-size: cover;}
.blog2 .blog2Left{width: 85%;}

.blog2 .blog2Right{margin-top:0px; width: 80%;}
.blogger1 .blog3-1{ width: 80%;display: block; margin-right: 10px; position: relative; margin: 0 auto;}
.blogger1 .blog3-2{ width: 20%;display: inline-block; margin: 10px 5px; position: relative;}
.blogger1 .blog3 .blog3-2:nth-child(2)::after{content: "";position: absolute; background: url(../images/01.png); width: 76px; height: 59px; left: -58px; bottom: 70px; transform: rotate(103deg);}
.blogger1 .blog5 .blog5-1 {width: 24%; margin:20px;}
.blogger1 .blog5 .blog5-1:nth-child(1)::after{ content: ""; position: absolute; background: url(../images/02.png); width: 64px; height: 45px; right: -52px; bottom: 143px; transform: rotate(-30deg);  background-size: cover;}
.blogger1 .blog5 .blog5-1:nth-child(2)::after{content: "";position: absolute;background: url(../images/02.png) ;width: 64px;height: 45px;right:-58px;bottom: 241px;transform: rotate(30deg);background-size:cover; }

.blog6-1{width: 40%;margin:30px;}


.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(1)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;left:-43px;bottom: 25px;}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(2)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;right:-43px;top: 25px;transform: rotate(-180deg);}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(3)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;left:-43px;bottom: 70px;}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(4)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;right:-43px;top: 70px;transform: rotate(-180deg);}

.blog7-1{width: 80%;}
.blog7-2{width: 40%;}


.blog1::after{content: none;}


}





@media only screen and (max-width: 900px) {
.blogger1 .blog3 .blog3-1::after{content: ""; position: absolute; background: url(../images/horse6.png);  width: 134px; height: 170px; left: -160px; bottom: -40px;background-size: cover;}
.blog6-1{width: 35%;}
.blog7-2{margin:20px;}

.blogger1 .blog1 p::after, .blogger2 .blog1 p::after{content: "";position: absolute;background: url(../images/horse4.png); width: 135px;height: 114px;right: 0px;top: 257px;background-size: cover;}



}


@media only screen and (max-width: 800px) {
.things2 .text .up h4, .things3 .text h4{width: 70%;}
.group-type-ph .addPhBox2 > div { display: inline-block; width: 50%; letter-spacing: normal; }
.things4 .text::after{content: ""; position: absolute; background: url(../images/horse5.png); width: 120px; height: 164px;left: -72px;bottom: -358px; background-size: cover;}	
}


@media only screen and (max-width: 768px) {



div.mobileTopRight {opacity: 1;position: fixed;background: rgba(0,0,0,0.7);width: 33px;height: 45px;border-radius: 20px 0 0 20px;font:20px/1 "微軟正黑體";color:#FFF;text-align: center;right:0 ;bottom: 10%;z-index: 999;padding:3px 0 0 1px;cursor: pointer;display: none;}
div.mobileTopRight p {font:14px/1.2 "微軟正黑體";}

.sale::before{content: none;}
.sale::after{content: none;}

.topMenu li img{width: 30%;width: 35px;}
.topMenu li{font:bold 18px/1.8 "arial","微軟正黑體";padding: 2px 10px;}

.topMenu.ing li img{width: 30%;width: 35px;}
.topMenu.ing li{font:bold 18px/1.8 "arial","微軟正黑體";padding: 2px 10px;}



.group-type-ph .ph {width: 90%;}
.group-type-ph .addPhBox2 > div { display: inline-block; width: 100%; letter-spacing: normal; }
.addText .price { position: static; display: block; font: bold 16px/2.4em "arial","微軟正黑體"; color: #ff305c; text-align: center;}
.addText .price span{font:bold 32px/1em "arial","微軟正黑體";}
.addPhBox2 .addText{margin-top:10px;}

.things4 .pic{width: 90%;}
.things3 .pic {width: 90%;}


.blogger{padding:0 10px 30px 10px;}
.blogger2 .blog7::after,.blogger1 .blog5::after,.blogger1 .blog3 .blog3-1::after{content: none;}

}



@media only screen and (max-width: 600px) {

.text h4{font:bold 22px/1.4 "arial","微軟正黑體"}
.sale{border: 1px #FFF dashed;}



.blogger1 .blog3-2{width: 40%;}

.blogger1 .blog3 .blog3-2:nth-child(3)::after{content: ""; position: absolute; background: url(../images/01.png); width: 76px; height: 59px;right: -58px; top: 70px; transform: rotate(-90deg);}
.blogger1 .blog3 .blog3-2:nth-child(4)::after{content: ""; position: absolute; background: url(../images/01.png); width: 76px; height: 59px;left: -58px; bottom: 70px; transform: rotate(109deg);}
.blogger1 .blog5 .blog5-1{width: 80%;margin:40px; }
.blogger1 .blog5 .blog5-1:nth-child(1)::after{content: "";position: absolute; background: url(../images/02.png); width: 76px; height: 59px; right: 41%; bottom: -72px; transform: rotate(90deg); background-size: cover;}
.blogger1 .blog5 .blog5-1:nth-child(2)::after{content: "";position: absolute; background: url(../images/02.png); width: 76px; height: 59px; right: 41%; bottom: -72px; transform: rotate(90deg); background-size: cover;}

.blog6-1{width: 90%; border-bottom: 2px #FFF dotted; margin: 0;  padding: 10px;}
.blog6-1:last-child{border: 0;}
.blog7-2{width: 80%;}
.blog2Left img {width: 100%; margin:5px auto;}

.blog2 .blog2Left {width: 80%; margin:0 auto;}
.blog2LeftText{padding: 0; margin:10px auto;}
.blog2LeftImg {margin: 0;}
.blog2 .blog2Right{margin-top: 5px;}

.blogger1 .blog1 p::after, .blogger2 .blog1 p::after { content: ""; position: absolute; background: url(../images/horse4.png); width: 135px; height: 114px; right: 0px; top: 16px; background-size: cover;}
h4{color:#fff100;font: bold 22px/1.4 "arial","微軟正黑體";margin: 5px 0;text-align: left;}
}

@media only screen and (max-width: 550px) {
.step.step1,.step.step2,.step.step3,.step.step4{display: block;width: 100%;}
.things1 .text h4,.things2 .text .up h4, .things3 .text h4,.things4 .text h4{margin: 10px 0 10px 0px;width: 100%;}
.text h3{font:bold 30px/1.2 "arial","微軟正黑體";}
.things2 .text::after{ content: "";  position: absolute;  background: url(../images/horse4.png);  width: 135px;  height: 114px; right: -25px; top: -5px;background-size: cover;}
.things4 .text::after{ content: "";  position: absolute;  background: url(../images/horse5.png);  width: 121px;  height: 162px; left: 257px;  top: 21px; background-size: cover;}
.playTitle{font:bold 30px/1.8 "arial","微軟正黑體";}
.qrcode{text-align: center;}
.play,.sale{margin: 50px auto;}

.topMenu li img{display: none;}
.topMenu li{font:bold 18px/1.4 "arial","微軟正黑體";padding: 2px 10px;margin: 0 3px;}

.topMenu.ing li img{display: none;}
.topMenu.ing li{font:bold 18px/1.4 "arial","微軟正黑體";padding: 2px 10px;margin: 0 3px;}

.title {width: 80%;margin:-32px auto 0 auto;}


h2{font: bold 30px/1.6 "arial","微軟正黑體";position: relative;top:-26px;}
h2::before{content: "";position: absolute;background: url(../images/h2.png);width: 55px;height: 50px;left:-42px;bottom: -17px;z-index: -1;background-size: cover;}
h2::after{content: "";position: absolute;background: url(../images/h2.png);width: 55px;height: 50px;right:-42px;bottom: -17px;z-index: -1;transform: rotate(180deg);background-size: cover;}

.pcheader img{margin:0% 0 0 0;}
.pcheader{top:20px;}





}


@media only screen and (max-width: 500px) {
.blogger1 .blog1 p::after, .blogger2 .blog1 p::after {content: ""; position: absolute; background: url(../images/horse4.png); width: 98px; height: 83px;  right: 14px; top: 16px; background-size: cover;}


}
@media only screen and (max-width: 450px) {
.things4 .text::after{ content: ""; position: absolute; background: url(../images/horse5.png); width: 121px; height: 162px; left: 207px; top: 21px; background-size: cover;}
.things3 .pic ,.things4 .pic {border-radius:15px;}
.group-type-ph {margin: 7% 0;}
.playTitle{font:bold 24px/1.8 "arial","微軟正黑體"}
.blog2 .blog2Left{width: 90%;}
.blogger1 .blog3-1{width: 90%;}
.blogger1 .blog3-2{width: 80%;border-bottom: 2px #FFF dotted; margin: 0;  padding: 10px;}
.blogger1 .blog3-2:last-child{border: 0;}
.blog2{margin:30px 0;}
.blogger1 .blog5 .blog5-1{margin:40px 20px;}
.blogger1 .blog5 .blog5-1:nth-child(2)::after{content: ""; position: absolute; background: url(../images/02.png); width: 76px; height: 59px; right: 34%;bottom: -72px; transform: rotate(90deg);background-size: cover;}
.blogger1 .blog5 .blog5-1:nth-child(1)::after{content: ""; position: absolute; background: url(../images/02.png); width: 76px; height: 59px; right: 34%;bottom: -72px; transform: rotate(90deg);background-size: cover;}
.blog7-1,.blog7-2{width: 90%;}
.blog2 .blog2Right{width: 90%;}



.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(1)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;left:-23px;bottom: 25px;}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(2)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;right:-23px;top: 25px;transform: rotate(-180deg);}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(3)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;left:-23px;bottom: 70px;}
.blogger2 .blog6 .blog6Pic .blog6-1:nth-child(4)::after{content: "";position: absolute;background: url(../images/03.png) ;width: 32px;height: 79px;right:-23px;top: 70px;transform: rotate(-180deg);}
.blogger .blog1{padding-top:30px;}
}	


@media only screen and (max-width: 415px) {
.group-type-ph .ph {  margin: 0 1% 10% 1%; }
.step.step1,.step.step2,.step.step3,.step.step4{text-align: left;}
.things2 .text::after{ content: "";  position: absolute;  background: url(../images/horse4.png);  width: 120px;  height: 101px; right: 2px; top: 16px;background-size: cover;}
.things4 .text::after{ content: ""; position: absolute; background: url(../images/horse5.png); width: 93px; height: 127px; left: 165px; top: 21px; background-size: cover;}
.things1 .text::after{content: ""; position: absolute;background: url(../images/horse3.png); width: 88px; height: 145px;right: -26px; top: -82px; background-size: cover;}

.things2 .text .down .text2 {font:bold 18px/1.5 "arial","微軟正黑體";}
.things2 .text .down .text2 span {font:bold 16px/1.8 "arial","微軟正黑體";}

}





@media only screen and (max-width: 395px ) {
.topMenu li{font:bold 16px/1.4 "arial","微軟正黑體";padding: 2px 10px;margin: 0 3px;}
.topMenu.ing li{font:bold 16px/1.4 "arial","微軟正黑體";padding: 2px 10px;margin: 0 3px;}


}