@import url('/resources/mobile/css/event_common.css');

.btn-top{bottom:310px}

#container.event .event01 .videoArea{position:absolute;  top: 800px; left:0px; width:100%; line-height:56px; font-size:40px; color:#545454; text-align:center;}
#container.event .tabArea{
	display:flex;
    width:100%;
    height: 204px; 
    text-align:center;
    background:url(/resources/mobile/event/2020/12/heartmeal/images/tabArea.png)no-repeat;
}
#container.event .tabArea li{ width: 33.3333%; height:100%;}
#container.event .tabArea li a{width:100%; height: 100%; text-indent: -99999px;}
#container.event .event02 .slideArea{position:absolute; left:0px; width:100%; text-align:center; bottom:100px;}
#container.event .event02 .slick-arrow{position:absolute; top:50%; width:82px; height:145px; margin-top:-73px; text-indent:-999px; overflow:hidden; z-index:2}
#container.event .event02 .slick-prev{left:40px; background:url(/resources/mobile/event/2019/12/heartmeal/images/btn_prev.png) no-repeat 0 0}
#container.event .event02 .slick-next{right:40px; background:url(/resources/mobile/event/2019/12/heartmeal/images/btn_next.png) no-repeat 0 0}
#container.event .event03 .btnArea{top: 2090px;}
#container.event .event03 .btnArea a:first-of-type{margin-right:30px;}

#container.event .event04 .inputArea{bottom: 140px;}
#container.event .event08 .inputArea{bottom: 240px;}
#container.event .event04 .inputArea input,
#container.event .event08 .inputArea input{
    width: 890px;
    box-sizing: border-box;
    padding: 25px 40px;
    border: 1px solid #cccccc;
    margin-bottom: 40px;
}
#container.event .event08 .btnArea{top:70px;}
#container.event .event08 .btnArea a{margin-left: -120px; margin-bottom: 70px;}
#container.event .event08 .btnArea a:nth-of-type(2){margin-left: 230px;}
#container.event .event08 .btnArea a:last-of-type{margin-left:0;}
#container.event .event10 .btnArea{bottom: 170px;}

#container.event .event04 .hashArea{top: 1543px;}
.hashArea{
	position: absolute;
	top: 560px;
	text-align: center;
}
.hashArea a{    
    margin-top: 30px;
    margin-bottom: 40px;
    margin-right: -620px;
    width: 190px;
    height: 60px;
    text-indent: -9999px;}
.hashArea span{
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 50px;
    background: #fff;
    color: #333333;
    font-size: 36px;
    border-radius: 30px;
    width: 400px;
    margin-bottom: 20px;
}
#container.event .event04 .hashArea span:nth-child(odd){margin-right:10px;}
#container.event .event08 .hashArea span{ 
	width:auto;
    padding: 10px 35px; 
    margin-right:10px;
}
#container.event .event08 .hashArea span:nth-of-type(3),
#container.event .event08 .hashArea span:nth-of-type(5){margin-right:0;}

.quickArea{position:fixed; bottom:0px; left:0px; width:100%; height:384px; background:url(/resources/mobile/event/2019/12/heartmeal/images/quickBg.png) no-repeat 0 0; z-index:2}
.quickArea .btnBox{position:absolute; right:40px; top:142px;}
.quickArea .btnBox a{    
    display: block;
    margin-bottom: 20px;
}
.quickArea .gaugeArea{position:absolute; left:54px; top:206px;}
.quickArea .gauge{display:inline-block; position:relative; width:567px; height:67px; margin-left:3px; background:url(/resources/mobile/event/2020/12/heartmeal/images/gaugeBg_off.png) no-repeat 0 0}
.quickArea .gauge>span{position:absolute; 

    width: 100%!important;
    height:100%; bottom:0px; left:0px; background:url(/resources/mobile/event/2020/12/heartmeal/images/gaugeBg_on.png) no-repeat 0 100%} 



#popBox{position:fixed; left:50%; top:50%; margin:-350px 0 0 -360px; width:700px; height:720px; z-index:6}
#popBox>a{position:absolute; right:40px; top:40px;}