.inlineBlockSpacing {
     letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed;
    
}

#mtkContainer,
#mtkContainer * { box-sizing: border-box; }

body { background: url(../images/bg-repeat-yellow.jpg) top center repeat; }

.index { background: url(../images/header-index-pc.jpg) top center no-repeat; }
header.index-header { padding: 370px 0 100px 0; width: 100%;}
header.index-header h1 { display: none; }

.index-header-drawAni { margin: 0 auto; max-width: 550px; }
.index-header-drawAni img { width: 100%; }



.index-header-drawAni .text{height: 360px;text-align: center;padding: 50px 0;}
.index-header-drawAni .text strong {font: bold 36px/1.2 "微軟正黑體";border-bottom: 1px solid #394077;color:#394077;}
.index-header-drawAni .text p{font: 30px/1.6 "微軟正黑體";margin-top: 5%;}


.index-header-button { margin: 0 auto;  max-width: 455px; height: 71px; background: url(../images/bg-button-1.png) top center no-repeat; transition: .5s; }
.index-header-button a { display: block; padding-left: 100px; width: 100%; font: bold 40px/71px "微軟正黑體"; color: #fff; text-align: center; letter-spacing: 2px; text-shadow:3px 3px 0 #ff367f;  }
.index-header-button a strong { vertical-align: baseline; color: #fff25c; }
.index-header-button a img { transform: translateY(-8px); vertical-align: middle; }

.index-header-button:hover { transform: translateY(-10px); }



.index-gallery-title { margin: 0 auto; max-width: 1400px; }
.index-gallery-title h2 {padding-top: 75px;  text-align: center; height: 186px; color: #42403f;  letter-spacing: 2px; 
  background: url(../images/bg-index-h2-1.png) top center no-repeat; }
.index-gallery-title h2 p { display: inline-block; font: bold 40px/1.6 "微軟正黑體"; border-bottom:1px solid #42403f; }
.index-gallery-title h2 small { display: block; font: bold 26px/2 "微軟正黑體";  }


.index-gallery-data {  margin-top: 10px;  }
.index-gallery-data ul { padding: 0 20px; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.index-gallery-data ul li { position: relative; display: inline-block; padding: 0 20px; width: 16.666666% }
.index-gallery-data ul li img { width: 100%; }
.index-gallery-data ul li h3 { margin: 0 auto 10px auto; width: 113px; height: 50px; font: bold 22px/40px "微軟正黑體"; color: #fff; text-align: center;
 letter-spacing: 2px; background: url(../images/bg-gallery-1.png) top center no-repeat }


.index-gallery-data-content { position: relative; }
.index-gallery-data-content div { position: absolute; top: 0; left: 0; }
.index-gallery-data-content div:first-child { position: relative; z-index: 3; }
.index-gallery-data-content div:nth-child(2) { transform: translateX(7px) rotate(1deg) ;z-index: 2; background: #000; }
.index-gallery-data-content div:last-child { transform: translateX(15px)  rotate(2deg); z-index: 1; background: #000; }

.index-gallery-data-content div:nth-child(2) img {  opacity: 0.9;}
.index-gallery-data-content div:last-child img {  opacity: 0.8; }

.index-gallery-data-player { margin-top: 10px; font:18px/30px "微軟正黑體"; color: rgba(0,0,0,0.75); letter-spacing: 1px; text-align: center; 
white-space: nowrap; overflow: hidden;}

.index-gallery-data-control { position: absolute;bottom: 40px; right: 20px; width: 70px; height:auto;  z-index: 4; }
.index-gallery-data-control-after { position: relative; }
.index-gallery-data-control-before { position: relative; margin-top: 10px ; }
.index-gallery-data-control a { font:12px/12px "微軟正黑體"; color: rgba(0,0,0,0.5); letter-spacing: 1px; }
.index-gallery-data-control img { width: 20px !important; }
.index-gallery-data-control-before img { transform: scaleY(-1); }


.index-information { margin-top: 60px; padding: 60px 0 ;background:#6ccfef; }

.index-information-title { margin: 0 0 5% 0; padding: 20px 0 0 0; height: 166px; background: url(../images/bg-index-h2-2.png) top center no-repeat; }
.index-information-title h2 {padding-top: 0;  text-align: center;  color: #42403f;  letter-spacing: 2px; 
   }
.index-information-title h2 p { display: inline-block; margin-bottom: 10px; font: bold 40px/1.6 "微軟正黑體"; border-bottom:1px solid #42403f; }
.index-information-title > p { margin:0 auto; max-width: 750px;  font: bold 26px/1.4 "微軟正黑體"; text-align: center; letter-spacing: 2px; color: #42403f;}
.index-information-title > p strong { padding: 5px 10px;  color: #fff; border-radius: 99em;  background: #ff4d9d; }


.index-information-step { margin: 0 auto; max-width: 1400px; text-align: center;  }
.index-information-step ul  { letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.index-information-step ul li { display: inline-block; width: 47%; max-width: 645px; letter-spacing: normal; }
.index-information-step ul li:nth-child(2) { padding-top: 15%; width: 6%; max-width: 71px; }
.index-information-step ul li img { width: 100%;  }
.index-information-step ul li p { margin:0 auto; font: bold 26px/1.4 "微軟正黑體"; text-align: center; letter-spacing: 2px; color: #42403f;}

.index-information-step-arrow { margin: 0 auto; max-width: 756px; }
.index-information-step-arrow img { width: 100%; }
.index-information-step-arrow img:nth-child(2) { display: none; }



.index-note-title { margin: 2% 0; }
.index-note-title h2 {padding-top: 0;  text-align: center;  color: #42403f;  letter-spacing: 2px; }
.index-note-title h2 p { display: inline-block; font: bold 40px/1.6 "微軟正黑體"; border-bottom:1px solid #42403f; }

.index-note-content  { margin: 0 auto ; padding: 0 15px; max-width: 1400px; }
.index-note-content  ul { position: relative; height: 250px; overflow: hidden; transition: .5s; }
.index-note-content  ul li { font: 17px/1.8 "微軟正黑體"; text-align: left; color: #42403f; }
.index-note-content  ul::after { content: ""; position: absolute; bottom:0; left: 0; width: 100%; height: 70px; z-index: 2;
background: linear-gradient(90deg, rgba(255, 242, 92, 1)0%, rgba(255, 242, 92, 0)100%);
background: -moz-linear-gradient(90deg, rgba(255, 242, 92, 1)0%, rgba(255, 242, 92, 0)100%);
background: -webkit-linear-gradient(90deg, rgba(255, 242, 92, 1)0%, rgba(255, 242, 92, 0)100%);
background: -o-linear-gradient(90deg, rgba(255, 242, 92, 1)0%, rgba(255, 242, 92, 0)100%);
 }
.index-note-content  ul.open { height: auto; }
.index-note-content  ul.open::after { background: none; }



.index-fixmenu { position: fixed; right: 20px; top: 100px; padding: 40px 10px; width: 150px; height: auto; border-radius: 60px; border:3px solid #000;
 background: #fc6d49; z-index: 10; }
.index-fixmenu ul { position: relative; }
.index-fixmenu ul::after {content: ""; position: absolute; top:-100px; left: 0; width: 107px; height: 97px; 
background: url(../images/dec-1.png) top center no-repeat; }
.index-fixmenu li { margin-bottom: 5px; padding-bottom: 5px; border-bottom:1px solid #fff; text-align: center; }

.index-fixmenu a {  font: bold 22px/1.4 "微軟正黑體"; text-align: left; color: #fff; }



.overshow { margin: 20px auto; padding: 0px; width:290px; border-radius: 20px; background: #ff4d9d; transition: .5s; position: relative;cursor: pointer; }
.overshow  a {display: block; width: 100%; font: bold 24px/1.8 "微軟正黑體"; text-align: center; color: #fff;  }
.overshow:hover { transform: translateY(-10px); }
.overshow::after{content: "";background: url(../images/hand.gif);position: absolute;right: -21px;width: 50px;height: 60px;top: 22px;}



/*draw畫作*/
.draw {padding-top: 120px; background: url(../images/header-draw-pc.jpg) top center no-repeat; }
.draw-paint { position: relative; margin: 0 auto;padding-bottom: 110px; max-width: 600px; height: auto;  }
.draw-paint canvas { width: 100%; height: auto; }


.draw-paint-time { padding: 20px 20px 0 20px ;  width: 100%;background: #fff;}
.draw-paint-time-bar { position: relative; width: 100%; height: 20px; border-radius: 99em;  background: #c4c4c4; }
.draw-paint-time-bar-pink { position: absolute; top:0; left: 0; width: 90%; height: 100%; border-radius: 99em 0 0 99em; background: #ff76a9; }
.draw-paint-time-bar-num { position: absolute; top: -5px; left: 88%; width: 30px; height: 30px;font: 20px/30px "微軟正黑體"; text-align: center;
 z-index: 2; border-radius: 99em; color: #ff76a9; border:1px solid #ff76a9; background: #fff; }
#paintArea { margin-bottom: 20px; }
.draw header.header,
.draw-end { display: none; }

.draw-paint #reset { position: absolute; bottom: 150px; left: -115px; width: 115px; transition: .5s; }
.draw-paint #reset img { width: 100%; }
.draw-paint #reset:hover { transform: translateY(-10px); }
.draw-paint #reset span { display: none; }



/*finsh完成*/
.finsh {padding-top: 118px; padding-bottom: 30px; background: url(../images/header-draw-pc.jpg) top center no-repeat; }
.finsh header.header { display: none; }
.finsh .draw-paint  { margin: 0 auto; padding-bottom: 0; }
.finsh .draw-paint img { padding-bottom: 48px; background: #fff; width: 100%; border: 3px solid #000 } 
.finsh-name { position: relative; margin: -40px auto 60px auto; padding:  0px 0; width: 80%; max-width: 430px; height: 88px;
  font: 20px/80px "微軟正黑體"; text-align: center; color: #fff; 
  background: url(../images/bg-button-2.png) top center no-repeat; z-index: 3; }

/*
.finsh-name::after { content: ""; position: absolute; bottom: -10px; left: -3px; width: 100%; height: 100%; border:3px solid #000;
background: #fff; border-radius: 30px;  z-index: -1; }*/

.finsh-share { margin:0 auto 30px auto; width: 90%; max-width: 673px; height: auto;  }
.finsh-share-title { width: 100%; height: 76px; background:url(../images/bg-finsh-title-1.png) top center no-repeat; }
.finsh-share-title h2 { position: relative; font: bold 38px/76px "微軟正黑體"; text-align: center; color: #fff25c; letter-spacing: 2px; }
.finsh-share-content { width: 100%; height: auto; background:url(../images/bg-finsh-title-2.png) top center repeat-y;}
.finsh-share-end { width: 100%; height: 34px; background:url(../images/bg-finsh-title-3.png) top center no-repeat;  }
.finsh-share-title h2::after { content: ""; position: absolute; right: 150px; top:0; width: 88px; height: 101px; background: url(../images/dec-3.png) top center no-repeat; }

.finsh-share-content { padding:  10px 20px 0 20px; text-align: center; }
.finsh-share-content ul {  letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.finsh-share-content li { display: inline-block; margin: 0 5px; width:74px; letter-spacing: normal;  }
.finsh-share-content li img { width: 100%; } 
.finsh-share-content li.finsh-share-content-url { margin-right: 0; width: 270px; font: 20px/42px "微軟正黑體"; border:1px solid #555;
 border-radius: 10px 0 0 10px; transform: translateY(15px); border-right: none; overflow: hidden; }
.finsh-share-content li:last-child { margin-left: 0 }

.finsh-share.gift { position: relative; }
.gift .finsh-share-title h2 { margin-right: 120px; text-align: right; } 
.gift .finsh-share-content { padding: 20px 55px 20px 0; text-align: right; }
.gift .overshow { margin:  0 auto; display: inline-block; }
.gift .overshow a { font-size: 26px; color: #fff25c; }
.finsh-share.gift .photo { position: absolute; top:-20px; left: 0; width: 341px; }
.finsh-share.gift .photo img { width: 100%; }
.gift .finsh-share-title h2::after { content: ""; position: absolute; right: -120px; top:-20px; width: 102px; height: 110px; background: url(../images/dec-4.png) top center no-repeat; }


.box2 { margin-bottom: 30px; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.box2 .title { position: relative; display: inline-block; padding: 10px; width: 30%; font: 20px/1.6 "微軟正黑體"; color: #fff; letter-spacing: 1px;
border-radius: 10px; background: #fc64aa; }
.box2 .title::after { content: ""; position: absolute;bottom:0 ;right:-20px; width: 26px; height: 37px;
 background: url(../images/dec-5.png) top center no-repeat; background-size: 100% ;  }
.box2 .text {  display: inline-block; margin: 7px 0 0 20px; width: calc(70% - 20px ); font: bold 26px/1.6 "微軟正黑體"; color: #000; letter-spacing: 1px;   }
.box2 .text .change a { padding: 5px 10px;  font: 14px/1.6 "微軟正黑體"; color: #fff; border-radius: 99em; background: #6ccfef;  }
.table { padding-bottom: 200px }
.table .index-header-drawAni { padding-top: 30px; }
.table .inputname { margin-top: 5px; border:1px solid #bbb; }


.index.share { background: url(../images/header-share-pc.jpg) top center no-repeat; }
.share .share-content { margin: -120px auto 100px auto;; width: 100%; max-width: 670px;  }
.share .share-content {  letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.share .share-content .finsh-name { display: inline-block; margin: 0 auto; width: 68%; max-width: 68%; letter-spacing: normal; }
.share .share-content .share-content-paint { position: relative; display: inline-block;padding: 0px 0; width:32%; height: 88px;
 letter-spacing: normal;    text-align: center;  transition: .5s;  
  background: url(../images/bg-button-3.png) top center no-repeat; background-size:  100% 100%; }
.share .share-content .share-content-paint a {font: bold 40px/80px "微軟正黑體"; color: #000;  }
.share .share-content .share-content-paint:hover { transform: translateY(-10px); }
.share .share-content .share-content-paint::after { content: ""; position: absolute; bottom: 10px; right: -50px; width: 90px; height: 165px; background:url(../images/dec-6.png) top center no-repeat; }



.gallery-header { width: 100%; height: 496px; background:url(../images/header-gallery-pc.jpg) top center no-repeat;  }
.gallery-header h1 { display: none; }

.gallery-content { margin: 0 auto; width: 100%;  }
.gallery-content-inner {  margin: 0 auto; max-width: 1600px; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.gallery-content-inner li { display: inline-block; padding-bottom: 120px; width: calc(50% - 17px); border-radius: 20px; }
.gallery-content-inner li:nth-child(1) { margin-right: 17px; background:url(../images/bg-gallery-inner-1.jpg) top center no-repeat; }
.gallery-content-inner li:nth-child(2) { margin-left: 17px; background:url(../images/bg-gallery-inner-2.jpg) top center no-repeat;}


.gallery-content-inner h2 { margin: -75px auto 0 auto; width: 100%; max-width: 388px; }
.gallery-content-inner h2 img { width: 100%; }

.gallery-content-inner-data {  text-align: center; letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed;  }
.gallery-content-inner-data > div { display: inline-block; }
.gallery-content-inner-data .data {  letter-spacing: -0.31em; *letter-spacing: normal;  *word-spacing: -0.43em;text-rendering: optimizespeed; }
.gallery-content-inner-data .data > div { display: inline-block; letter-spacing: normal; }

.gallery-content-inner-data img { width: 100%; }
.gallery-content-inner-data .left,
.gallery-content-inner-data .right { margin-top: 15%; width: 9%; max-width: 65px; }
.gallery-content-inner-data .right img { transform:  scaleX(-1); }
.gallery-content-inner-data .left { margin-right:1%; }
.gallery-content-inner-data .right { margin-left:1%; }

.gallery-content-inner-data .data { width: 80%; max-width: 600px;  }
.gallery-content-inner-data .data .one ,
.gallery-content-inner-data .data .two { width: calc(50% - 10px) ;max-width: 280px; }
.gallery-content-inner-data .data .one { margin-right: 20px; }


.gallery-line { margin-bottom: 100px; width: 100%; height: 76px; background: url(../images/dec-7.png) top center repeat-x;  }


.giftC26{width:100%;margin: 0 auto;background: #fcffb5;}
.giftC26Img{width: 20%;display: inline-block;margin:15px;}
.giftC26Img img{max-width: 600px;width: 100%;}
.giftC26Text{width: 75%;display: inline-block;margin:15px;position: relative;}
.giftC26Text strong {font: bold 24px/1.4 "微軟正黑體"; color: #000;display: block;}
.giftC26Text p{font: 20px/1.4 "微軟正黑體"; color: #000;  border-top:1px solid #000;margin-top: 10px;padding-top: 10px;}
.giftC26Btn {border-radius: 20px; background: #45c3f8;font: bold 20px/1.8 "微軟正黑體";color:#FFF;position:absolute;right: 0; width: 200px;text-align: center;transition: 0.3s;}
.giftC26Btn:hover{transform: translateY(-5px);}







@media only screen and (max-width: 1366px) {
   .gallery-content-inner li { margin-bottom: 50px; padding-bottom: 50px }
 .gallery-content-inner li:nth-child(1),
  .gallery-content-inner li:nth-child(2) { background-size: 140% }


.giftC26Text{width: 70%;}

}



@media only screen and (max-width: 1160px) {
.giftC26{padding:10px 0 40px 0;}

}




@media only screen and (max-width: 1024px) {
.index-gallery-data ul li { margin-bottom:10%; width: 33.333333% }

.index-information { padding: 0 10%;  }
.index-information-step ul li { margin: 10% auto; display: block; width: 100%;   }
.index-information-step ul li:nth-child(2) { padding-top: 0; width: 100%; }
.index-information-step ul li:nth-child(2) img { transform: rotate(90deg); }

.index-information-step-arrow { margin: 0 auto; max-width: 71px; }
.index-information-step-arrow img:nth-child(1) { display: none; }
.index-information-step-arrow img:nth-child(2) { display: block;transform: rotate(90deg); }

.index-fixmenu { top:calc(100% - 50px); right: 0; padding: 0; width: 100%; height: 50px; overflow: hidden; }
.index-fixmenu ul::after { display: none;  }
.index-fixmenu ul li { display: inline-block;margin-bottom: 0; padding-bottom: 0; width: 25%; float: left; border-bottom: none; }
.index-fixmenu ul li:first-child { width: 50%; /*background: #cd5233;*/ }
.index-fixmenu a { line-height: 42px; }
.index-fixmenu-onlypc { display: none; }

.gallery-content-inner { text-align: center; }
.gallery-content-inner h2 { margin: 0 auto 0 auto; padding:0 0 0 0; max-width: 350px ; transform: translateY(-10%); }
.gallery-content-inner li { display: block; margin:  0 auto 10% auto; padding:0 0 10% 0; width:95% ; max-width: 95% ; border-radius: 30px; }
.gallery-content-inner li:nth-child(1) { margin-right: auto; background:url(../images/bg-gallery-inner-1.jpg) top center no-repeat; background-size: 130%; }
.gallery-content-inner li:nth-child(2) { margin-left: auto; background:url(../images/bg-gallery-inner-2.jpg) top center no-repeat; background-size: 130%;}

.gallery .index-fixmenu ul li { width: 100%; background:none; }
.finsh .index-fixmenu ul li { width: 100%; background:none; }


}


@media only screen and (max-width: 900px) {
.gallery-header { padding-bottom: 5%; height: auto; background:none; }
.gallery-header h1 { display: block; }
.gallery-header h1 img { width: 100%; }
}


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

.giftC26Img{width: 90%;margin:15px auto;text-align: center;display: block;}

.giftC26Text{width: 90%;display: block;margin:15px auto;position: relative;}

.giftC26Text strong {font: bold 20px/1.4 "微軟正黑體";}
.giftC26Text p{font:16px/1.4 "微軟正黑體"; }
.giftC26{padding: 15px 0;}
.giftC26Btn {position:static;width: 90%;text-align: center;margin:15px auto;padding: 0;}

}

@media only screen and (max-width: 700px) {
	.overshow::after{content: "";background: url(../images/hand.gif); position: absolute; right: -6px; width: 11%; height: 100%; top: 22px; background-size: cover;}
}



@media only screen and (max-width: 600px) {
.draw,
.finsh { padding-top: 0; background: none } 

.finsh header.header,
.draw header.header,
.draw-end { display: block; }

.finsh header.header img,
.draw header.header img,
.draw-end img  { width: 100%; }
.draw-paint { padding: 0 5%; background: url(../images/bg-draw-m.jpg) top center repeat; background-size: 100%;  }
.draw-paint-time { padding: 0; }


.draw #paintArea { margin-bottom: 2%; }
.draw #reset,
.draw .index-header-button { position: static; display: inline-block; margin:0 2% 0 1%; padding: 0;  width: 47%; height: 50px;
  border-radius: 10px; border:2px solid #000;  }
.draw #reset img { display: none; }
.draw #reset{ float: left; margin:0 1% 0 2%; text-align: center; background: #464f92; }
.draw .index-header-button { float: right; background: #ff4d9d; }
.draw .index-header-button a { padding-left: 0; line-height: 45px }
.draw-paint #reset span { display: block; font: bold 20px/45px "微軟正黑體"; color: #fff; letter-spacing: 2px; text-shadow: 3px 3px 0 rgba(0,0,0,0.1);}

.finsh .draw-paint img { padding-bottom: 0; }
.finsh-name { margin: 0 auto; width: 100%;transform: translateX(0px); background: url(../images/bg-draw-m.jpg) top center repeat; border:none;background-size: 100%; }
.finsh-name > div { margin: 0 auto; padding:  0;  width: 90%;border:2px solid #000; border-radius: 30px; background: #ff4d9d; }

.index.share { background:#6ccfef ; }
.share .share-content { margin: -10% auto 0 auto; padding: 0 5%; width: 100%; }
.share .share-content .finsh-name { margin-right: 0%; width: 100%;max-width: 100%;  height: auto; background: none; }
.share .finsh-name > div { width: 100%; border-radius:; }
.share .share-content .share-content-paint { margin: 5% 0; width: 100%;max-width: 100%;  height: auto; border-radius: 30px; border:2px solid #000; background:#fff25c; }
.share .share-content .share-content-paint::after {right: 10%; width: 50px; background-size: 100%; background-position: bottom }



}

@media only screen and (max-width: 500px) {
.index {  background: none; } 
header.index-header { padding: 0 0 10% 0; width: 100%; background:#3dbbe4; border-radius: 0 0 10% 10% }

header.index-header h1 { display: block; }
header.index-header h1 img { width: 100%; }

.index-header-drawAni { margin: 0 auto; padding: 10% 0; width: 100%; /*border-bottom:1px solid #000;*/
 background: url(../images/bg-paintgif.jpg) top center no-repeat; background-size: 100%; }
.index-header-drawAni img { display: block; margin: 0 auto; width: 80%; }
.table .index-header-drawAni { padding: 10% 0 18% 0 }




.index-header-drawAni .text{height: auto;padding: 9% 0;}
.index-header-drawAni .text strong {font: bold 6.5vw/1.2 "微軟正黑體";border-bottom: 1px solid #000}
.index-header-drawAni .text p{font: 5vw/1.6 "微軟正黑體";margin-top: 5%;}



.index-header-button { margin-top:-20px; max-width: 320px; height: 49px; background-size: 100%;  }
.index-header-button a { padding-left: 60px; font: bold 26px/47px "微軟正黑體";  }
.index-header-button a img { width: 10px; transform: translateY(-2px);  }

.index-gallery-title h2 { padding-top: 10%; height: 120px; background: none; }
.index-gallery-title h2 p {font: bold 26px/1.6 "微軟正黑體";  }
.index-gallery-title h2 small { font: 14px/1.6 "微軟正黑體";  }
.index-information-title > p { font: 17px/1.6 "微軟正黑體"; text-align: left; }


.index-gallery-data ul li { padding: 0 10%;  width: 100% }

.index-information-title { height: auto; }
.index-information-title h2 p {  font: bold 26px/1.6 "微軟正黑體"; }

.index-information-step ul li:nth-child(2) {  max-width: 50px; }
.index-information-step-arrow { max-width: 50px; }
.index-information-step ul li p { font: bold 20px/1.4 "微軟正黑體"; }


.index-note-title h2 p { font: bold 26px/1.6 "微軟正黑體";  }

.index-note-content { padding: 0 10%; }


.index-fixmenu a {  font-size: 16px; text-align: center; }

.finsh-share { border-left: 2px solid #000; border-right: 2px solid #000; }
.finsh-share-content li { margin: 0 1%; width: 20%; }
.finsh-share-content li.finsh-share-content-url { margin: 0; width: 70%;font: 17px/30px "微軟正黑體"; transform: translateY(40%);  }
.finsh-name { padding: 0; }

.gift .finsh-share-title h2 { margin-right: 0; text-align: center; }
.finsh-share.gift .photo { position: static; top:0px; left: 0; width: 100% ; }
.gift .finsh-share-content { padding: 0 5%; }
.gift .overshow { display: block; }

.finsh-share-title h2::after {right: 0px; top:0; width: 60px; height: auto; background-size: 100%; }

.gift .finsh-share-title h2::after { right: 0px; top:0px; width: 60px; height: auto; background-size: 100%; }




.box2 { margin-bottom: 5%; padding: 0 7%; }
.box2 .title {font: 14px/1.6 "微軟正黑體";}
.box2 .text { font-size: 20px; }





.share .index-header-drawAni { margin: 0 auto; padding: 10% 0; width: 100%; border-bottom:1px solid #000;
 background: url(../images/bg-paintgif-2.jpg) top center no-repeat; background-size: 100%; }



 .gallery-content-inner h2 { max-width: 250px ;}
 .gallery-content-inner li:nth-child(1),
  .gallery-content-inner li:nth-child(2) { background-size: 165% }
  .gallery-line { margin-bottom: 15%; height: 40px; background-size: 10%;  }
  .gallery .index-gallery-data-player { font: 14px/20px "微軟正黑體";letter-spacing: -1px; }










}

@media only screen and (max-width: 475px) {
.giftC26 {padding: 5px 0;}

}




@media only screen and (max-width: 320px) {
.box2 { margin-bottom: 2%; padding: 0 7%; }
}