@charset "utf-8";
/* CSS Document */
body{background: #ff4c4c;}

.key-visual{background: url('../images/kv-bg.gif') no-repeat center top;}
.key-visual .wrapper{width: 950px; height: 750px; margin: 0 auto 10px; position: relative;}
.key-visual .box{width:100%; height: inherit; background: url('../images/box.png') no-repeat center bottom; background-size: 100%; position: absolute; top: 0; left: 0;}
.key-visual .btn-go{}
.key-visual .btn-go ul{position: absolute; left: 0; bottom: 0; z-index: 5; overflow: hidden;}
.key-visual .btn-go ul li{float: left; width: 20%;}
.key-visual .btn-go ul li:hover, .key-visual .btn-go ul li:active{filter: hue-rotate(320deg);}
.key-visual .btn-go ul li a{display: block; width: 100%; text-align: center;}
.key-visual .btn-go ul li a img{width: 100%; height: auto;}
.key-visual .hotdogs{width: 70%; position: absolute; left: 16%; bottom: 10%; z-index: 4;}
.key-visual .hotdogs div{width: 216px; height: 272px; display: inline-block;}
.key-visual .hotdogs .dog1{background: url('../images/dog1.png') no-repeat center top; position: relative;}
.key-visual .hotdogs .dog2{background: url('../images/dog2.png') no-repeat center top; position: relative;}
.key-visual .hotdogs .dog3{background: url('../images/dog3.png') no-repeat center top; position: relative;}
.key-visual .hotdogs .dog1 p{background: url('../images/bubble1.png') no-repeat center center; width: 55%; height: 0; padding-bottom: 45%; position: absolute; left: -30%; top: 20%; background-size: contain; display: none;}
.key-visual .hotdogs .dog1:hover p{display: block;}
.key-visual .hotdogs .dog2 p{background: url('../images/bubble2.png') no-repeat center center; width: 55%; height: 0; padding-bottom: 46%; position: absolute; left: -28%; top: 8%; background-size: contain; display: none;}
.key-visual .hotdogs .dog2:hover p{display: block;}
.key-visual .hotdogs .dog3 p{background: url('../images/bubble3.png') no-repeat center center; width: 43%; height: 0; padding-bottom: 40%; position: absolute; right: -22%; top: 24%; background-size: contain; display: none;}
.key-visual .hotdogs .dog3:hover p{display: block;}

.slide-top {
	-webkit-animation: slide-top .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
	        animation: slide-top .6s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate-reverse both;
}

@-webkit-keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}
@keyframes slide-top {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-40%);
            transform: translateY(-40%);
  }
}


.HEADER{width: 100%;height: 55px;background-color: #eff2f9;border-top: 5px solid #dee2ec;}
.HEADER ul{width: 930px;height: 55px;margin: 0 auto;}
.HEADER ul li{float: left;width: 155px;height: 50px;}

.HEADER ul li:nth-child(1){border-bottom: 5px solid #3bb2d4;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_01.png') no-repeat center top;text-align: center;text-indent:70px;}
.HEADER ul li:nth-child(1) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#3bb2d4;}
.HEADER ul li:nth-child(1) a:hover{border-top: 5px solid #3bb2d4;margin-top: -5px;}
.HEADER ul li a:after{content: "";width:inherit;height: 30px; border-right: 1px solid #dee2ec;padding-left: 20px;}
.HEADER ul li:nth-child(2){border-bottom: 5px solid #4dccaf;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_02.png') no-repeat center top;text-align: center;text-indent:65px;}
.HEADER ul li:nth-child(2) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#4dccaf;}
.HEADER ul li:nth-child(2) a:hover{border-top: 5px solid #4dccaf;margin-top: -5px;}
.HEADER ul li:nth-child(3){border-bottom: 5px solid #69d71e;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_03.png') no-repeat center top;text-align: center;text-indent:53px;}
.HEADER ul li:nth-child(3) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#69d71e;}
.HEADER ul li:nth-child(3) a:hover{border-top: 5px solid #69d71e;margin-top: -5px;}
.HEADER ul li:nth-child(4){border-bottom: 5px solid #fdb52d;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_04.png') no-repeat center top;text-align: center;text-indent:70px;}
.HEADER ul li:nth-child(4) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#fdb52d;}
.HEADER ul li:nth-child(4) a:hover{border-top: 5px solid #fdb52d;margin-top: -5px;}
.HEADER ul li:nth-child(5){border-bottom: 5px solid #fa7c7d;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_05.png') no-repeat center top;text-align: center;text-indent:70px;}
.HEADER ul li:nth-child(5) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#fa7c7d;}
.HEADER ul li:nth-child(5) a:hover{border-top: 5px solid #fa7c7d;margin-top: -5px;}
.HEADER ul li:nth-child(6){border-bottom: 5px solid #f46696;background: url('http://shopping.friday.tw/event/2018mem/01/newmember/home/images/huiyuan_icon_06.png') no-repeat center top;text-align: center;text-indent:35px;}
.HEADER ul li:nth-child(6) a{display: block;width: 155px;height: 50px;font:bold 16px/60px "微軟正黑體"; color:#f46696;}
.HEADER ul li:nth-child(6) a:hover{border-top: 5px solid #f46696;margin-top: -5px;}
.HEADER ul li:nth-child(6) a:after{display: none;content: "";width:inherit;height: 30px; border-right: 1px solid #dee2ec;padding-left: 20px;}

.WRAPPER{ width:100%; height:auto;}
.PACKAGE{ width:100%; height:auto;overflow:hidden;}

.LATTICE_NO2{width:995px;height: auto;margin: 0 auto 1em; background:#52494c; padding-bottom: 1em; padding-top: 10px;overflow: hidden;}
.LATTICE_NO2:nth-child(even){background: #1a1a1a;}
.LATTICE_NO2 h5{width:100%;text-align: center;font:bold 40px/70px "微軟正黑體"; color:#fff;}
.LATTICE_NO2 ul{width:940px;margin:0 auto;padding-left: 5px;}
.LATTICE_NO2 ul li{width:230px;height: 420px;margin: 0px 5px 5px 0px;text-align: center;background-color: #fff;float: left;}
.LATTICE_NO2 ul li.GQBN{width:230px;height: 420px;margin: 0px 5px 5px 0px;background-image: url('../images/guanqi-1.jpg');background-size: cover;background-position: center bottom;background-repeat: no-repeat;background-color: transparent;}
.LATTICE_NO2 ul li.GQBN a > p{opacity: 0;background-color: transparent;}
.LATTICE_NO2:nth-child(2) ul li.GQBN{background-image: url('../images/guanqi-2.jpg');}
.LATTICE_NO2:nth-child(3) ul li.GQBN{background-image: url('../images/guanqi-3.jpg');}
.LATTICE_NO2:nth-child(4) ul li.GQBN{background-image: url('../images/guanqi-4.jpg');}
.LATTICE_NO2 ul li.GQBN img{width:100%;height:auto;opacity: 0;}
.LATTICE_NO2 ul li>img{width: 100%;height: auto;}
.LATTICE_NO2 ul li h6{width:230px;height: 230px;}
.LATTICE_NO2 ul li h6>img{width: 100%;height: auto;}
.LATTICE_NO2 ul li p.TESE{width: 230px;height: 45px;background-color: #ffe34a;font:bold 19px/45px "微軟正黑體"; color:#f5281e;white-space: nowrap;}
.LATTICE_NO2 ul li p.PINMING{width: 230px;height: 45px;font:16px/18px "微軟正黑體"; color:#575757;padding-top: 5px;}
.LATTICE_NO2 ul li p.JIAGE{width: 230px;height: 45px;color: #ff3854;position: relative;white-space: nowrap;}
.LATTICE_NO2 ul li p.JIAGE span.TT1{text-decoration: line-through;color: #575757;font:13px/15px "Century Gothic";}
.LATTICE_NO2 ul li p.JIAGE span.TT1:before{content: "$";font-size: 13px;}
.LATTICE_NO2 ul li p.JIAGE span.TT2{font:bold 16px/45px "微軟正黑體";}
.LATTICE_NO2 ul li p.JIAGE span.TT3{font:bold 32px/45px "Century Gothic";}
.LATTICE_NO2 ul li p.JIAGE span.TT3:before{content: "$";font-size: 16px;}
.LATTICE_NO2 ul li p.JIAGE span.TT4{font:bold 16px/45px "微軟正黑體";}
.LATTICE_NO2 ul li p.QIANG{width: 230px;height: 50px;background-color: #f5281e; font:25px/45px "微軟正黑體";color: #fff;}

@media screen and (max-width:768px) {
	.key-visual{background:#ffd8dd;}
	.key-visual .wrapper{width: 100%; height: 0; padding-bottom: 144%;}
	.key-visual .wrapper img{width: 100%;}
	.key-visual .box{height:0; padding-bottom:144%; background-position: center 41.8%;}
	.key-visual .btn-go ul li{width:33.33%; background:#eb1d34;}
	.key-visual .btn-go ul li:nth-child(1),.key-visual .btn-go ul li:nth-child(2){width: 50%; background: none;}
	.key-visual .hotdogs{bottom: 50%;}
	.key-visual .hotdogs div{width: 30%; height: 0; padding-bottom: 40%;}
	.key-visual .hotdogs .dog1,
	.key-visual .hotdogs .dog2,
	.key-visual .hotdogs .dog3{background-size: 100%;}
	
	.HEADER{width: 100%;height: 110px;background-color: #eff2f9;border-top: 5px solid #dee2ec;position: fixed;bottom: 0;left: 0;z-index: 99;}
	.HEADER ul{width: 100%;height: 110px;margin: 0 auto;}
	.HEADER ul li{float: left;width: 33.33%;height: 50px;white-space: nowrap;}
	.HEADER ul li:nth-child(1){border-bottom: 5px solid #3bb2d4;background-position: -15% center;text-align: left;text-indent:28%;background-size: 65% auto;}
	.HEADER ul li:nth-child(1) a{display: block;width:100%;height: 50px;font:bold 4.5vw/50px "微軟正黑體";}
	.HEADER ul li:nth-child(2){border-bottom: 5px solid #4dccaf;background-position: -5% center;text-align: left;text-indent:28%;background-size: 65% auto;}
	.HEADER ul li:nth-child(2) a{display: block;width:100%;height: 50px;font:bold 4.4vw/50px "微軟正黑體";color:#4dccaf;}
	.HEADER ul li:nth-child(3){border-bottom: 5px solid #69d71e;background-position: -5% center;text-align: left;text-indent:28%;background-size: 75% auto;}
	.HEADER ul li:nth-child(3) a{display: block;width: 100%;height: 50px;font:bold 4.4vw/50px "微軟正黑體"; color:#69d71e;}
	.HEADER ul li:nth-child(4){border-bottom: 5px solid #fdb52d;background-position: -15% center;text-align: left;text-indent:28%;background-size: 75% auto;}
	.HEADER ul li:nth-child(4) a{display: block;width: 100%;height: 50px;font:bold 4.4vw/50px "微軟正黑體"; color:#fdb52d;}
	.HEADER ul li:nth-child(5){border-bottom: 5px solid #fa7c7d;background-position: -15% center;text-align: left;text-indent:28%;background-size: 75% auto;}
	.HEADER ul li:nth-child(5) a{display: block;width: 100%;height: 50px;font:bold 4.4vw/50px "微軟正黑體"; color:#fa7c7d;}
	.HEADER ul li:nth-child(6){border-bottom: 5px solid #f46696;background-position: -15% center;text-align: left;text-indent:28%;background-size: 75% auto;}
	.HEADER ul li:nth-child(6) a{display: block;width: 100%;height: 50px;font:bold 4.4vw/50px "微軟正黑體"; color:#f46696;}	
	
	html, body{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
	
	.WRAPPER{ width:100%; height:auto;}
	.PACKAGE{ width:100%; height:auto;}
	
	.LATTICE_NO2{width:100%;height: auto;margin: 0 auto 1em;padding-top:2.5%;overflow: hidden;}
	.LATTICE_NO2 h5{width:100%;height: auto;text-align: center;font: bold 2em/2.2em "微軟正黑體"; color:#fff;white-space:nowrap;}
	.LATTICE_NO2 ul{width:98%;margin: 0 auto;padding-left: 0px;}
	.LATTICE_NO2 ul li{width:48%;height: auto;margin:0% 1% 2% 1%;;text-align: center;background-color: #fff;float: left;}
	.LATTICE_NO2 ul li.GQBN{width: 48%;height: auto;margin: 0% 1% 2% 1%;background-image: url('../images/guanqi-1.jpg');background-size: cover;overflow: hidden;background-position: center top;background-repeat: no-repeat;background-color: transparent;}
	.LATTICE_NO2 ul li.GQBN a > p{opacity: 0;background-color: transparent;}
	.LATTICE_NO2:nth-child(2) ul li.GQBN{background-image: url('../images/guanqi-2.jpg');}
	.LATTICE_NO2:nth-child(3) ul li.GQBN{background-image: url('../images/guanqi-3.jpg');}
	.LATTICE_NO2:nth-child(4) ul li.GQBN{background-image: url('../images/guanqi-4.jpg');}
	.LATTICE_NO2 ul li.GQBN img{width:100%;height:100%;opacity: 0;}
	.LATTICE_NO2 ul li>img{width: 100%;height: auto;}
	.LATTICE_NO2 ul li h6{width:100%;height:0;padding-bottom: 100%;}
	.LATTICE_NO2 ul li h6>img{width:100%;height:auto;}
	.LATTICE_NO2 ul li p{overflow: hidden;}
	.LATTICE_NO2 ul li p.TESE{width:100%;height:40px;font:bold 1.2em/2em "微軟正黑體";white-space: nowrap;}
	.LATTICE_NO2 ul li p.PINMING{width:100%;height:40px;font:1em/1.2em "微軟正黑體";}
	.LATTICE_NO2 ul li p.JIAGE{width:96%;height:45px;color: #ff3854;position: relative;padding:0% 2%;white-space: nowrap;}
	.LATTICE_NO2 ul li p.JIAGE span.TT1{display: block;text-decoration: line-through;color: #5a5b5d;font:0.9em/1em "Century Gothic";position: absolute;top:10%;left: 3%;}
	.LATTICE_NO2 ul li p.JIAGE span.TT1:before{content: "$";font-size: 0.9em;}
	.LATTICE_NO2 ul li p.JIAGE span.TT2{font:bold 0.9em/45px "微軟正黑體";}
	.LATTICE_NO2 ul li p.JIAGE span.TT3{font:bold 2em/45px "Century Gothic";}
	.LATTICE_NO2 ul li p.JIAGE span.TT3:before{content: "$";font-size: 0.5em;}
	.LATTICE_NO2 ul li p.JIAGE span.TT4{font:bold 0.9em/45px "微軟正黑體";}
	.LATTICE_NO2 ul li p.QIANG{width:100%;height:40px;background-color: #f5281e; font:1.2em/1.8em "微軟正黑體";color: #fff;}
}