@charset "utf-8";
/* CSS Document */

@import url(reset.css);
@import url(fontawesome/css/font-awesome.min.css);

.clearfix:after {content: "."; display: block; clear: both; visibility: hidden;	line-height: 0;	height: 0;}
h1, h2, h3, h4, h5, h6, p, b, i, a, u, strong{ font-family:"微軟正黑體"; letter-spacing:1px; color:#222;}

body{ background:#ff9b9f; width:100%;}
.wrap{ margin:0 auto; box-sizing: border-box;}
.outerWrap{ width:100%;}

.outerWrap .top_line{ position:relative; left:0; top:0; width:100%; height:10px; background:#f27176;}

.outerWrap .mainWrap{ width:100%; background: url(../images/bg_main.jpg) center bottom #fff no-repeat;}
.outerWrap .mainWrap .wrap{ width:1500px; margin:0 auto; box-sizing:border-box; background:url(../images/bg_circle01.png) left top no-repeat;}
.outerWrap .mainWrap .wrap .mainBox{ width:1100px; height:600px; margin:0 auto;}

.outerWrap .mainWrap .wrap .mainBox .logoBox{ width:100%; height:295px; padding:75px 0 0 56px; box-sizing:border-box;}
.outerWrap .mainWrap .wrap .mainBox .logoBox_m{display:none; width:450px; height:430px; box-sizing:border-box; margin:0 auto;}

.outerWrap .mainWrap .wrap .mainBox .eventBox{ width:100%; height:305px; position:relative;}
.outerWrap .mainWrap .wrap .mainBox .eventBox .bearBox{width:400px; height:280px; position:absolute; left:0; bottom:0;}
.outerWrap .mainWrap .wrap .mainBox .eventBox .couponBox{width:655px; height:232px; position:absolute; right:15px; bottom:15px;}
.outerWrap .mainWrap .wrap .mainBox .eventBox .couponBox a{ position:relative;}

/*主視覺_手機版本*/
.outerWrap .mainWrap_m{ display:none; width:100%; background: url(../images/bg_main.jpg) center bottom #fff no-repeat;}
.outerWrap .mainWrap_m .wrap{ width:100%; margin:0 auto; box-sizing:border-box; background:url(../images/bg_circle01.png) 300px -40px no-repeat; padding-bottom:15px;}

.outerWrap .mainWrap_m .wrap .mainBox{ width:100%; box-sizing:border-box; padding:20px 20px 0;}
.outerWrap .mainWrap_m .wrap .mainBox img{ display:block; width:100%;}
.outerWrap .mainWrap_m .wrap .mainBox .logoBox{ float:left; width:50%; box-sizing:border-box;}
.outerWrap .mainWrap_m .wrap .mainBox .bearBox{ float:right; width:50%; box-sizing:border-box; padding:120px 20px 0 30px;}

.outerWrap .mainWrap_m .wrap .couponBox a{ display:block; width:658px; margin:0 auto; position:relative;}



/*==活動內容_開始==*/
.eventWrap{ width:100%; box-sizing:border-box;}
.eventWrap .wrap{ width:1100px; margin:0 auto; box-sizing:border-box;}

/*新朋友見面禮*/
.newgiftBox{ width:100%; height:150px; box-sizing:border-box; border:3px #48ab36 solid; border-radius:6px; background:#fff;}
.newgiftBox .titleBox{ float:left; width:25%; height:144px; box-sizing:border-box; background:#48ab36; position:relative;} 
.newgiftBox .titleBox:after{content:""; position:absolute; left:-50px; top:0; width:0; height:0; border-style:solid; border-width: 0 0 144px 50px; border-color: transparent transparent #48ab36 transparent;}
.newgiftBox .titleBox h2{ position:absolute; right:30px; top:30px;}

.newgiftBox .txtBox{ float:left; width:75%; box-sizing:border-box; padding:30px 40px;} 
.newgiftBox .txtBox h3{ font-size:20px; padding-left:13px;}
.newgiftBox .txtBox p{ font-size:16px; line-height:1.4; padding-top:6px;}

/*新朋友見面禮_手機版本*/
.newgiftBox_m{ display:none; width:100%; box-sizing:border-box; border:3px #48ab36 solid; border-radius:6px; background:#fff;}
.newgiftBox_m .titleBox{ background:#48ab36; text-align:center; padding:5px 0;}
.newgiftBox_m .conBox{ width:100%; box-sizing:border-box; padding:30px 40px;}
.newgiftBox_m .conBox h3{ font-size:20px; padding-left:13px;}
.newgiftBox_m .conBox p{ font-size:16px; line-height:1.4; padding-top:6px;}



/*如何加入*/
.joinBox{ width:100%; box-sizing:border-box; border:3px #fab1aa solid; border-radius:6px; background: url(../images/img_malldj01.png) right top #fff no-repeat; margin-top:30px; padding-bottom:80px;}
.joinBox .titleBox{ width:100%; height:160px; background:url(../images/bg_circle02.png) no-repeat 80px top; position:relative;}
.joinBox .titleBox h2{ font-size:40px; font-weight:normal; position:absolute; left:50%; top:50%; margin:0px 0 0 -240px;}

.joinBox .conBox{ text-align:center;}
.joinBox .conBox ul{ display:inline-block; margin-top:60px;}
.joinBox .conBox ul li{ float:left; width:33.33%; padding:0 40px; box-sizing:border-box;}
.joinBox .conBox ul li .itemBox{ width:100%; box-sizing:border-box;}
.joinBox .conBox ul li .itemBox h3{ display:inline-block; text-align:center; color:#fff; font-size:24px; background:#48ab36; border-radius:50px; padding:5px 40px;}
.joinBox .conBox ul li .itemBox b{ display:block; padding:20px 0; font-size:18px;}
.joinBox .conBox ul li .itemBox b span{ color:#fd6b0d;}
.joinBox .conBox ul li .itemBox a{ display:block; transition:all 0.4s ease;}
.joinBox .conBox ul li .itemBox a:hover{ opacity:0.9;}

.joinBox .conBox ul li .type_c .imgBox{ width:205px; border:1px #c4c4c4 solid;}
.joinBox .conBox ul li .type_c img{ display:block; width:100%;}

/*好友獨享*/
.friendBox{ width:100%; box-sizing:border-box; border:3px #fab1aa solid; border-radius:6px; background: url(../images/img_malldj02.png) right top #fff no-repeat; margin-top:30px; padding-bottom:65px;}
.friendBox .titleBox{ width:100%; height:160px; background:url(../images/bg_circle03.png) no-repeat 80px top; position:relative;}
.friendBox .titleBox h2{ font-size:40px; font-weight:normal; position:absolute; left:50%; top:50%; margin:0px 0 0 -240px;}

.friendBox .conBox{ width:100%; text-align:center; margin-top:60px;}
.friendBox .conBox ul{ display:inline-block; width:75%;}
.friendBox .conBox ul li{ float:left; width:50%; box-sizing:border-box; padding:0 80px 60px;}
.friendBox .conBox ul li .itemBox{ width:280px; height:280px; border-radius:50%; background:#c8e9ef; text-align:center; margin:0 auto;}
.friendBox .conBox ul li .itemBox .iconBox{ padding-top:50px;}
.friendBox .conBox ul li .itemBox .iconBox img{ transform:scale(1,1); opacity:1;}
.friendBox .conBox ul li .itemBox:hover .iconBox img{transform:scale(1.2, 1.2); opacity:0.8; transition:all 0.4s ease;}
.friendBox .conBox ul li .itemBox .txtBox{}
.friendBox .conBox ul li .itemBox .txtBox b{ display:block; font-size:32px; font-weight:normal; line-height:1.2;}

.friendBox .conBox .timeBox{}
.friendBox .conBox .timeBox h4{ display:inline-block; font-size:18px; color:#fff; background:#a464a6; padding:5px 15px; border-radius:20px;}
.friendBox .conBox .timeBox p{ display:inline-block; font-size:16px; padding-left:10px;}
.friendBox .conBox .timeBox p span{ font-size:13px; padding:0 4px;}


footer{ width:100%; padding:40px 0;}
footer .wrap{ width:1100px; margin:0 auto; text-align:center;}
footer .wrap p{ font-size:14px; color:#fff; letter-spacing:2px;}
footer .wrap p br{ display:none;}


/*------css3動畫--------*/
@-webkit-keyframes upDown {
  0%     {bottom:5px; opacity:1;}
  50%   {bottom:18px; opacity:1;}
  100% {bottom:5px; opacity:1;}
}
@-moz-keyframes upDown {
  0%     {bottom:5px; opacity:1;}
  50%   {bottom:18px; opacity:1;}
  100% {bottom:5px; opacity:1;}
}
@keyframes upDown {
  from     {bottom:5px; opacity:1;}
  50%   {bottom:18px; opacity:1;}
  to {bottom:5px; opacity:1;}
}
.upDown{
	-webkit-animation: upDown ease-out 1s infinite;
	-moz-animation: upDown ease-out 1s infinite;
	-o-animation: upDown ease-out 1s infinite;
	animation: upDown ease-out 1s infinite;}

/*手機板*/	
@-webkit-keyframes upDown_m {
  0%     {bottom:0px; opacity:1;}
  50%   {bottom:10px; opacity:1;}
  100% {bottom:0px; opacity:1;}
}
@-moz-keyframes upDown_m {
  0%     {bottom:0px; opacity:1;}
  50%   {bottom:10px; opacity:1;}
  100% {bottom:0px; opacity:1;}
}
@keyframes upDown_m {
  from     {bottom:0px; opacity:1;}
  50%   {bottom:10px; opacity:1;}
  to {bottom:0px; opacity:1;}
}
.upDown_m{
	-webkit-animation: upDown_m ease-out 1s infinite;
	-moz-animation: upDown_m ease-out 1s infinite;
	-o-animation: upDown_m ease-out 1s infinite;
	animation: upDown_m ease-out 1s infinite;}	


/*==說明頁==*/

.useBox{ width:100%; box-sizing:border-box; border:3px #fab1aa solid; border-radius:6px; background: url(../images/img_malldj03.png) right top #fff no-repeat;}
.useBox .titleBox{ width:100%; height:160px; background:url(../images/bg_circle04.png) no-repeat 80px top; position:relative;}
.useBox .titleBox:before{ content:""; position:absolute; left:50px; top:30px; width:140px; height:136px; background:url(../images/img_dialog01.png) no-repeat;}
.useBox .titleBox h2{ font-size:40px; font-weight:normal; position:absolute; left:50%; top:50%; margin:-20px 0 0 -240px;}
.useBox .titleBox b{ display:inline-block; font-size:24px; position:absolute; left:50%; top:50%; margin:40px 0 0 -340px;}

/*折價券序號*/
.useBox .couponBox{ width:800px; height:340px; margin:80px auto 0; text-align:center; position:relative; box-sizing:border-box; padding:50px 0 80px; margin-bottom:80px;}
.useBox .couponBox:before{ content:""; position:absolute; right:0; top:0; width:111px; height:105px; background:url(../images/line_dotted02.png) no-repeat; z-index:5;}
.useBox .couponBox:after{ content:""; position:absolute; left:0; bottom:0; width:592px; height:103px; background:url(../images/line_dotted01.png) no-repeat; z-index:5;}

.useBox .couponBox p{ font-size:22px; letter-spacing:3px;}
.useBox .couponBox b{ display:block; font-size:72px; color:#ff3339; font-family:"Century Gothic"; font-weight:normal; letter-spacing:2px; margin-top:30px;}

.useBox .couponBox .linkBox{ position:absolute; right:6px; bottom:-11px; border:1px #ff3339 solid;  z-index:20;}
.useBox .couponBox .linkBox a{ display:block; font-size:15px; color:#ff3339; padding:6px 20px;background:#fff; transition:all 0.4s ease;}
.useBox .couponBox .linkBox a i{ color:#ff3339; padding-left:8px; transition:all 0.4s ease;}
.useBox .couponBox .linkBox a:hover{ color:#fff; background:#ff3339;}
.useBox .couponBox .linkBox a:hover i{ color:#fff;}


/*使用步驟*/
.useBox .stepBox{ width:100%; padding:90px 0 70px; background:#fff9e0; text-align:center; box-sizing:border-box;}
.useBox .stepBox .step_titleBox{ text-align:center;}
.useBox .stepBox .step_titleBox h3{ display:inline-block; font-size:40px; position:relative;}
.useBox .stepBox .step_titleBox h3:after{ content:""; position:absolute; right:-180px; bottom:-20px; width:130px; height:130px; background:url(../images/img_dialog02.png) no-repeat;}

.useBox .stepBox ul.col-3{ display:inline-block; width:900px; margin:0 -33px; margin-top:90px;}
.useBox .stepBox ul.col-3 li{ float:left; width:33.33%; padding:0 33px; box-sizing:border-box;}

.useBox .stepBox ul.col-2{ display:inline-block; width:580px; margin:0 -33px; margin-top:50px;}
.useBox .stepBox ul.col-2 li{ float:left; width:50%; padding:0 33px; box-sizing:border-box;}


.useBox .stepBox ul li .itemBox{ width:250px; box-sizing:border-box; border:3px #fe6588 solid; border-radius:18px; background:#fff; text-align:center; padding:70px 0 40px; position:relative;}

.useBox .stepBox ul li .step1:before{ content:""; position:absolute; left:-3px; top:-3px; width:150px; height:46px; background:url(../images/step01.png) no-repeat;}
.useBox .stepBox ul li .step2:before{ content:""; position:absolute; left:-3px; top:-3px; width:150px; height:46px; background:url(../images/step02.png) no-repeat;}
.useBox .stepBox ul li .step3:before{ content:""; position:absolute; left:-3px; top:-3px; width:150px; height:46px; background:url(../images/step03.png) no-repeat;}
.useBox .stepBox ul li .step4:before{ content:""; position:absolute; left:-3px; top:-3px; width:150px; height:46px; background:url(../images/step04.png) no-repeat;}
.useBox .stepBox ul li .step5:before{ content:""; position:absolute; left:-3px; top:-3px; width:150px; height:46px; background:url(../images/step05.png) no-repeat;}
.useBox .stepBox ul li p{ font-size:24px;}
.useBox .stepBox ul li b{ font-size:34px; font-weight:normal;}

.useBox .stepBox ul li .step4{ height:194px; padding-top:80px;}


.useBox .usetxtBox{ width:840px; margin:0 auto; padding:80px 0;}
.useBox .usetxtBox .dialog{ float:left; width:140px; box-sizing:border-box; margin-top:30px;}
.useBox .usetxtBox .txtBox{ float:left; width:700px; box-sizing:border-box; padding-left:60px;}
.useBox .usetxtBox .txtBox p{ font-size:16px; line-height:2;}


/*coupon複製*/
.useBox .couponBox .coupon{ margin-top:30px; position:relative; box-sizing:border-box; text-align:center;}
.useBox .couponBox .coupon input{ border:0; width:100%; text-align:center; font-size:72px; color:#ff3339; font-family:"Century Gothic"; letter-spacing:2px; box-sizing:border-box;}
.useBox .couponBox .coupon button{ background:#222; color:#fff; border:0; font-size:20px; font-weight:bold; font-family:"微軟正黑體"; padding:6px 35px; border-radius:4px; margin-top:10px;}
.useBox .couponBox .coupon button:active{ background:#999;}


@media (max-width:1367px){
.outerWrap .mainWrap .wrap{ width:100%;}	
}


@media (max-width:1034px){
.outerWrap .mainWrap .wrap .mainBox{ width:100%;}
.outerWrap .mainWrap .wrap .mainBox .logoBox{ padding:75px 40px 0;}
.outerWrap .mainWrap .wrap .mainBox .logoBox img{ display:block; width:100%;}
.eventWrap .wrap{ width:100%; padding:0 15px;}
footer .wrap{ width:100%;}

.newgiftBox .titleBox h2{ right:20px;}

.useBox .titleBox b{ left:57%;}
}

@media (max-width:980px){
.outerWrap .mainWrap .wrap{ background-position:left -20px;}	
.outerWrap .mainWrap .wrap .mainBox{ height:545px;}	
.outerWrap .mainWrap .wrap .mainBox .eventBox{ height:250px;}	
.outerWrap .mainWrap .wrap .mainBox .eventBox .bearBox{ width:350px; bottom:-35px;}
.outerWrap .mainWrap .wrap .mainBox .eventBox .bearBox img{ display:block; width:100%;}

.friendBox .conBox ul li{ padding:0 0 60px;}

footer{ padding:30px 0;}

.useBox .titleBox:before{ left:20px;}
}

@media (max-width:768px){
.outerWrap .mainWrap{ display:none;}
.outerWrap .mainWrap_m{ display:block;}

.newgiftBox{ display:none;}
.newgiftBox_m{ display:block;}

.joinBox .titleBox{ background-position:-150px top;}
.joinBox .titleBox h2{ margin:0; left:40px; font-size:36px;}
.joinBox .conBox ul li{ padding:0 12px;}

.friendBox .titleBox{ background-position:-150px top;}
.friendBox .titleBox h2{ margin:0; left:40px; font-size:36px;}
.friendBox .conBox ul{ width:100%;}
.friendBox .conBox ul li{ padding:0 0 40px;}

.useBox .titleBox{ background-position:-150px top;}
.useBox .titleBox h2{ margin:0; left:40px; font-size:36px;}
.useBox .conBox ul li{ padding:0 12px;}
.useBox .titleBox:before{ display:none;}
.useBox .titleBox b{ display:block; left:40px; margin:50px 0 0 0;}

.useBox .couponBox{ width:90%;}
.useBox .stepBox ul.col-3{ width:100%; margin:70px 0 0 0;}
.useBox .stepBox ul.col-3 li{ padding: 0 10px;}
.useBox .stepBox ul li .itemBox{ width:100%;}
.useBox .stepBox ul.col-2{ margin-top:20px;}

.useBox .usetxtBox{ width:100%; padding:60px 20px; text-align:center; box-sizing:border-box;}
.useBox .usetxtBox .dialog{ float:none; margin:0 auto;}
.useBox .usetxtBox .txtBox{ float:none; width:100%; padding:20px 0 0 0; display:inline-block;}
.useBox .usetxtBox .txtBox p{ text-align:left; display:inline-block; text-align:justify;}
}

@media (max-width:640px){
.eventWrap .wrap{ padding:0 10px;}
.outerWrap .mainWrap_m .wrap .couponBox a{ width:100%; padding:0 20px; box-sizing:border-box;}
.outerWrap .mainWrap_m .wrap .couponBox a img{ display:block; width:100%;}

.joinBox{ background-size:30%;}
.joinBox .titleBox{ height:130px; background-position:-180px -50px;}
.joinBox .titleBox h2{ top:40px; font-size:30px;}
.joinBox .conBox ul{margin:30px -10px 0;}
.joinBox .conBox ul li{ padding:0 10px;}
.joinBox .conBox ul li .itemBox h3{ font-size:20px; padding:5px 20px;}
.joinBox .conBox ul li .itemBox b{ font-size:16px;}
.joinBox .conBox ul li .itemBox .imgBox{ width:180px;}
.joinBox .conBox ul li .itemBox .imgBox img{ display:block; width:100%;}

.friendBox{ background-size:25%; padding-bottom:50px;}
.friendBox .titleBox{ height:130px; background-position:-180px -50px;}
.friendBox .titleBox h2{ top:40px; font-size:30px;}
.friendBox .conBox ul li .itemBox{ width:250px; height:250px;}
.friendBox .conBox ul li .itemBox .iconBox{ padding-top:30px;}
.friendBox .conBox ul li .itemBox .txtBox b{ font-size:26px; padding-top:10px;}
.friendBox .conBox .timeBox p{ display:block; padding:15px 0 0 0;}

.useBox{ background-size:30%;}
.useBox .titleBox{ height:130px; background-position:-180px -50px;}
.useBox .titleBox h2{ top:40px; font-size:30px;}
.useBox .titleBox b{ margin-top:20px;}

.useBox .couponBox{ height:auto;}
.useBox .couponBox:after{ width:320px;}

.useBox .stepBox{ padding:90px 10px 60px;}
.useBox .stepBox .step_titleBox h3{ font-size:36px;}
.useBox .stepBox .step_titleBox h3:after{ right:-150px;}
.useBox .stepBox ul li p{ font-size:20px;}
.useBox .stepBox ul li b{ font-size:30px;}
.useBox .stepBox ul.col-3 li{ padding:0 5px;}
.useBox .stepBox ul li .step4{ height:183px;}
.useBox .stepBox ul.col-2{ width:100%;}
.useBox .stepBox ul.col-2 li{ padding:0 15px;}
}

@media (max-width:480px){
.outerWrap .mainWrap_m .wrap .mainBox .bearBox{ padding:60px 0 0 0;}	
.newgiftBox_m .conBox{ padding:20px 25px;}

.joinBox{ padding-bottom:10px;}
.joinBox .titleBox{ background-position:-300px -50px; }
.joinBox .titleBox h2{ font-size:28px; left:20px;}
.joinBox .conBox ul{ margin:0;}
.joinBox .conBox ul li{ float:none; width:100%; padding:0 80px 30px;}
.joinBox .conBox ul li .itemBox .imgBox{ width:inherit;}
.joinBox .conBox ul li .itemBox h3{ padding:5px 30px;}
.joinBox .conBox ul li .itemBox b{ padding:10px 0;}

.friendBox .titleBox{ background-position:-300px -50px; }
.friendBox .titleBox h2{ font-size:28px; left:20px;}
.friendBox .conBox{ margin-top:0;}
.friendBox .conBox ul li{ float:none; width:100%; padding:0 0 25px;}

.useBox{ padding-bottom:0px;}
.useBox .titleBox{ background-position:-300px -50px; }
.useBox .titleBox h2{ font-size:28px; left:20px;}
.useBox .titleBox b{ left:20px; font-size:20px; font-weight:normal;}
.useBox .couponBox{ margin-top:40px; padding:50px 0 60px;}
.useBox .couponBox p{ font-size:18px;}
.useBox .couponBox .coupon{ margin-top:20px;}
.useBox .couponBox .coupon input{ font-size:50px; letter-spacing:1px;}

.useBox .stepBox{ padding:60px 30px 30px;}
.useBox .stepBox .step_titleBox h3:after{ display:none;}
.useBox .stepBox ul.col-3{ margin-top:30px;}
.useBox .stepBox ul.col-3 li{ float:none; width:100%; padding:0;}
.useBox .stepBox ul.col-2{ margin:0;}
.useBox .stepBox ul.col-2 li{ float:none; width:100%; padding:0;}
.useBox .stepBox ul li{ margin:0 0 20px;}
.useBox .stepBox ul li .step4{ height:auto;}
.useBox .stepBox ul li .itemBox{ padding:60px 0 40px;}

.useBox .usetxtBox{ padding:50px 20px 40px;}
}

@media (max-width:420px){
.outerWrap .mainWrap_m .wrap{ background-position:180px -40px;}
.newgiftBox_m .conBox p{ font-size:15px;}
.friendBox{ padding-bottom:30px;}

.joinBox .conBox ul li{ float:none; width:100%; padding:0 60px 30px;}

footer{ padding:20px 0;}
footer .wrap p br{ display:block;}



.useBox .titleBox b{ font-size:16px;}
.useBox .couponBox{ margin:10px auto 60px;}
.useBox .couponBox:after{ width:120px;}
.useBox .couponBox p{ font-size:16px;}

.useBox .couponBox .coupon{ margin-top:10px;}
.useBox .couponBox .coupon input{ font-size:40px;}
.useBox .couponBox .coupon button{ font-size:18px;}

.useBox .stepBox .step_titleBox h3{ font-size:30px; font-weight:normal;}

.useBox .usetxtBox .txtBox p{ line-height:1.6;}
}

@media (max-width:375px){
.outerWrap .mainWrap_m .wrap .mainBox{ padding:20px 10px 0;}
.outerWrap .mainWrap_m .wrap .couponBox a{ padding:0 10px;}
.outerWrap .mainWrap_m .wrap .mainBox .bearBox{ padding-top:40px;}

.friendBox .conBox ul li .itemBox{ width:220px; height:220px;}
.friendBox .conBox ul li .itemBox .iconBox{ padding-top:25px;}
.friendBox .conBox ul li .itemBox .txtBox b{ font-size:22px; padding-top:10px;}

footer .wrap p{ font-size:13px;}

.useBox .couponBox{ padding:40px 0 50px;}
.useBox .stepBox{ padding:60px 20px 20px;}
.useBox .usetxtBox{ padding:30px 20px 40px;}
}

@media (max-width:320px){
.newgiftBox_m .conBox{ padding:15px 15px;}
.newgiftBox_m .titleBox img{ display:block; width:90%; margin:0 auto;}
.newgiftBox_m .conBox p{ text-align:justify; font-size:14px;}

.joinBox{ margin-top:15px;}
.joinBox .titleBox{ height:100px; background-position:-400px -50px;} 
.joinBox .titleBox h2{ font-size:24px;}

.friendBox{ margin-top:15px;}
.friendBox .titleBox{ height:100px; background-position:-400px -50px;} 
.friendBox .titleBox h2{ font-size:24px;}
.friendBox .conBox .timeBox p{ padding:10px 8px 0;}

.useBox{ margin-top:15px;}
.useBox .titleBox{ height:100px; background-position:-400px -50px;} 
.useBox .titleBox h2{ font-size:24px;}
.useBox .titleBox b{ font-size:14px;}
.useBox .stepBox{ padding:40px 20px 20px;}
.useBox .stepBox ul li .itemBox{ padding:60px 0 30px;}
.useBox .usetxtBox .txtBox p{ font-size:15px;} 

.useBox .couponBox .coupon input{ font-size:34px;}

footer{ padding:15px 0;}

}