﻿html,body{
	font-size: calc( 100vw/ 19.2 );
	color: #333;
	font-family: 'Microsoft YaHei','华文细黑','平方';
	-moz-user-select:none;
	-webkit-user-select:none;
	user-select:none;
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: #f8da87;
}
.index-wrap{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: url('../images/marathon/index-bg.png') center center no-repeat;
  background-size: cover;

}
.index-wrap .logo{
	width: 3.8rem;
	height: 1.08rem;
	margin: 0.4rem auto 0;
	display: block;
}
.index-wrap .story{
	color: #296899;
	font-size: 0.22rem;
	width: 15.72rem;
	height: 5.24rem;
	background: url('../images/marathon/text_bg.png') center center no-repeat;
	background-size: 100% 100%;
	padding: 0.45rem;
	position: absolute;
	top: 2.05rem;
	left: 50%;
	margin-left: -7.86rem;
}
.index-wrap .story p{
	margin: 0 0 0.35rem 0;
	text-indent: 0.44rem;
	line-height: 0.4rem;
}
.index-wrap .start-btn{
	position: absolute;
	top: 8.48rem;
	left: 50%;
	width: 3.26rem;
	height: 0.98rem;
	margin-left: -1.63rem;
	cursor: pointer;
}

.second-wrap{
	width: 100%;
	height: 100%;
	background: url(../images/marathon/left_road.png) left top no-repeat;
	background-size: contain;
	display: none;
}
.second-wrap .title{
	font-size: 0.36rem;
	color: #113a58;
	text-align: center;
	padding-top: 0.85rem;
}

.second-wrap .cloud1{
	width: 3.5rem;
	height: 1.7rem;
	font-size: 0.24rem;
	color: #113a58;
	text-align: center;
	line-height: 2.2rem;
	background: url(../images/marathon/cloud.png) center center no-repeat;
	background-size: cover;
	position: absolute;
	left: 3.54rem;
	top: 1.52rem;
}

.second-wrap .baby{
	width:2.21rem;
	height: 2.61rem;
	position: absolute;
	top: 5.3rem;
	left: 4rem;
}
.second-wrap .next{
	width: 2.32rem;
	height: 0.74rem;
	border-radius: 0.3rem;
	background: #113857;
	color: #f8da87;
	position: absolute;
	top: 8.3rem;
	left: 8.4rem;
	font-size: 0.24rem;
	line-height: 0.74rem;
	text-align: center;
	cursor: pointer;
}
.second-wrap .info{
	background: url(../images/marathon/info_bg.png) center center no-repeat;
	background-size: contain;
	width: 10.2rem;
	height: 2.77rem;
	font-size: 0.3rem;
	color: #113a58;
	padding: 0.62rem 0.4rem 0 0.4rem;
	position: absolute;
	left: 6.66rem;
	top: 3.75rem;
}

.second-wrap .draw_btn{
	width: 3.26rem;
	height: 0.98rem;
	position: absolute;
	top: 8.2rem;
	left: 8rem;
	cursor: pointer;
}

.third-wrap {
	width: 100%;
	height: 100%;
	background: url(../images/marathon/left_road.png) left top no-repeat;
	background-size: contain;
	position: absolute;
	display: none;
}

.third-wrap .desc{
	width: 9.25rem;
	height: 0.62rem;
	margin:1rem auto 0;
	padding-left: 0.65rem;
	font-size: 0.24rem;
	color: #fff;
	line-height: 0.62rem;
	background: #4d86b3 url(../images/marathon/light.png) 0.2rem center no-repeat;
}

.third-wrap .sun{
	width: 6.46rem;
	height: 3.6rem;
	margin: 0 auto;
	font-size: 0.28rem;
	color: #fff;
	position: relative;
}
.third-wrap .sun img{
	width: 100%;
	height: 100%;
}
.third-wrap .sun input{
	width: 100%;
	text-align: center;
	background: transparent;
	border:0;
	outline: 0;
	position: absolute;
	left: 0;
	top: 75%;
	color: #fff;
}
.third-wrap .sun input::-webkit-input-placeholder{
	color: #fff;
}

 .alert-box{
	margin: 5.37rem auto 0;
	width: 8.35rem;
	height: 1.8rem;
	border-radius: 0.3rem;
	background: rgba(255,255,255,.74);
	position: relative;
	color: #27618b;
	font-size: 0.26rem;
	padding: 0.4rem 0.5rem;
	display: none;
}

.alert-box .title{
	position: absolute;
	top: -.2rem;
	left: 0;
	width: 100%;

}
.alert-box > div{
	clear: both;
	overflow: hidden;
	margin-bottom: 0.4rem;
}
.alert-box > div span{
	display: block;
	float: left;
}
.alert-box > div input{
	width: 6rem;
	border:none;
	border-bottom: 1px solid #6ab3ed;
	float: right;
	background: transparent;
}
.alert-box > div .fq-date{
	float: inherit;
	position: static;
	background: #6ab3ed;
	width: 1.9rem;
	height: 0.3rem;
	color: #fff;
	text-align: center;
	font-size: 0.22rem;
	display: inline-block;
	margin-left: 1.3rem;
}

.third-wrap .next{
	width: 2.48rem;
	height: 0.86rem;
	position: absolute;
	top: 7.1rem;
	left: 15.71rem;
	cursor: pointer;
	display: none;
}


.fourth-wrap{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	display: none;
}

.fourth-wrap .left-desc{
	position: absolute;
	top: 2rem;
	left: 2.3rem;
}
.fourth-wrap .left-desc .title{
	width: 3.82rem;
	height: 0.69rem;
	margin-bottom: 0.17rem;
}
.fourth-wrap .desc{
	width: 3.32rem;
	height: 3.77rem;
	color: #113a58;
	font-size: 0.24rem;
	line-height: 0.4rem;
	padding: 0.67rem 0.25rem 0.5rem 0.25rem;
	background: #f3c953;
	text-align:justify;
}

.fourth-wrap .flag-box{
	width: 9.2rem;
	height: 6.9rem;
	position: absolute;
	left: 6.48rem;
	top: 1.07rem;
}

.fourth-wrap .flag-box .road{
	display: block;
	width: 6.2rem;
	height: 6.52rem;
	margin: 0 auto;

}


.fourth-wrap .flag-box .left-flag{
	width: 0.46rem;
	height: 0.97rem;
	position: absolute;
	left: 0;
	top: 0.3rem;
	cursor: pointer;
	transition: all .7s ease-in-out;
	z-index: 1;
}
.fourth-wrap .flag-box .right-flag{
	width: 0.46rem;
	height: 0.97rem;
	position: absolute;
	right: 0;
	top: 0.3rem;
	cursor: pointer;
	transition: all .7s ease-in-out;
	z-index: 1;
}
.fourth-wrap .flag-box .left-flag:nth-child(2){
	top: 1.67rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(3){
	top: 3.04rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(4){
	top: 4.41rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(5){
	top: 5.78rem;
}

.fourth-wrap .flag-box .right-flag:nth-child(7){
	top: 0.3rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(8){
	top: 1.67rem;
}

.fourth-wrap .flag-box .right-flag:nth-child(9){
	top: 3.04rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(10){
	top: 4.41rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(11){
	top: 5.78rem;
}

.fourth-wrap .flag-box .left-flag:nth-child(1).active{
	top: 1rem;
	left: 1.9rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(2).active{
	top: 1.77rem;
	left: 1.07rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(3).active{
	top: 2.86rem;
	left: 2.1rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(4).active{
	top: 3.73rem;
	left: 3.02rem;
}
.fourth-wrap .flag-box .left-flag:nth-child(5).active{
	top: 5.12rem;
	left: 2.63em;
}

.fourth-wrap .flag-box .right-flag:nth-child(7).active{
	top: 1.25rem;
	right: 4.6rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(8).active{
	top: 2.09rem;
	right: 3.86rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(9).active{
	top: 2.86rem;
	right: 2.1rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(10).active{
	top: 4.07rem;
	right: 1.6rem;
}
.fourth-wrap .flag-box .right-flag:nth-child(11).active{
	top: 5.18rem;
	right: 1.63rem;
}


.fourth-wrap .done-btn{
	position: absolute;
	top: 9.1rem;
	left: 15.15rem;
	width: 3.26rem;
	height: 0.98rem;
	cursor: pointer;
}

.fourth-wrap .bottom_title_1,
.fourth-wrap .bottom_title_2,
.fourth-wrap .bottom_title_3,
.fourth-wrap .bottom_title_4,
.fourth-wrap .bottom_title_5,
.fourth-wrap .bottom_title_6,
.fourth-wrap .bottom_title_7,
.fourth-wrap .bottom_title_8,
.fourth-wrap .bottom_title_9,
.fourth-wrap .bottom_title_10{
	width: 2.5rem;
	padding: 0.3em;
	height: 0.25rem;
	background: #90c1df;
	border-radius: 0.3rem;
	line-height: 0.25rem;
	color: #fff;
	text-align: center;
	font-size: 0.22rem;
	position: absolute;
	display: none;
}
.fourth-wrap .bottom_title_10{
	top: 1.8rem;
	left: 0.9rem;

}
.fourth-wrap .bottom_title_9{
	top: 2.2rem;
	right: 3.5rem;
}

.fourth-wrap .bottom_title_8{
	top: 2.57rem;
	left: 0;

}

.fourth-wrap .bottom_title_7{
	top: 3.01rem;
	right: 2.6rem;
}

.fourth-wrap .bottom_title_6{
	top: 3.86rem;
	left: 0.9rem;

}

.fourth-wrap .bottom_title_5{
	top: 3.76rem;
	right: 0.9rem;
}

.fourth-wrap .bottom_title_4{
	left: 2rem;
	top: 4.73rem;

}

.fourth-wrap .bottom_title_3{
	top: 4.99rem;
	right: 0.5rem;
}

.fourth-wrap .bottom_title_2{
	top: 6.02rem;
	left: 1.5rem;
}

.fourth-wrap .bottom_title_1{
	top: 6.08rem;
	right: 0.5rem;

}


.alert-box2{
	width: 5.7rem;
	height: 2.6rem;
	background: rgba(255,255,255,.88);
	border-radius: 0.3rem;
	color: #27618b;
	font-size: 0.2rem;
	padding: 0.53rem 0.25rem 0 0.25rem;
	position: absolute;
	top: 400px;
	left: 600px;
	display: none;
	z-index: 9;
}
.alert-box2 img.title{
	position: absolute;
	left: 0;
	top: -0.19rem;
	width: 100%;
}
.alert-box2 > div{
	overflow: hidden;
	margin-bottom: 0.32rem;
}
.alert-box2 span{
	display: block;
	float: left;
}
.alert-box2 input{
	display: block;
	float: right;
	width: 3.7rem;
	outline: none;
	border:0;
	background: transparent;
	border-bottom: 1px solid #6ab3ed;
}

input::-webkit-input-placeholder {           
  color: #fff;
}
input:-moz-placeholder {/* Firefox 18- */
  color: #fff;
}

      

.alert-box2 .fq-date{
	position: static;
	width: 1.5rem;
	height: 0.3rem;
	margin-right: 0.2rem;
	border:0;
	background: #6ab3ed;
	color: #fff;
	text-align: center;

}
.alert-box2 .btn{
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	font-size: 0.24rem;
	width: 100%;
	margin-bottom: 10px;
}
.alert-box2 .btn span{
	display: inline-block;
	width: 1.4rem;
	height: 0.3rem;
	border-radius: 0.15rem;
	background: #00a3e9;
	margin-left: 2.5rem;
	color: #fff;
	cursor: pointer;
}
.fourth-wrap .fq-date{
	position: static;
	background: #6ab3ed;
	width: 1.9rem;
	height: 0.3rem;
	color: #fff;
	text-align: center;
	font-size: 0.22rem;
	display: inline-block;
}

ul{
	list-style: none;
	padding: 0;
	margin: 0;
}
#schedule-box{
	width: 320px;
	margin: 0 auto;
	padding: 35px 20px;
	font-size: 13px;
}
.schedule-hd{
	display: flex;
	justify-content: space-between;
	padding: 0 15px;
}
.today{
	flex: 1;
	text-align: center;
}
.ul-box{
	overflow: hidden;
}
.ul-box > li{
	float: left;
	width: 14.28%;
	text-align: center;
	padding: 5px 0;
}
.other-month{
	color: #999999;
}
.current-month{
	color: #333333;
}
.today-style{
	border-radius: 50%;
	background: #58d321;
}
.arrow{
	cursor: pointer;
}
.dayStyle{
	display: inline-block;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	text-align: center;
	line-height: 35px;
	cursor: pointer;
}
.current-month > .dayStyle:hover{
	background: #00BDFF;
	color: #ffffff;
}
.today-flag{
	background: #00C2B1;
	color: #fff;
}
.boxshaw{
	box-shadow: 2px 2px 15px 2px #e3e3e3;
}
.selected-style {
	background: #00BDFF;
	color: #ffffff;
}
.fq-datebox{
	background: #fff;
	width: 2.7rem;
	padding: 0.3rem;
	border-radius: 0.1rem;
	position: absolute;
	z-index: 99999;
	display: none;
	font-size: 0.22rem;
}

.arrow{
	display: inline-block;
	width: 0.2rem;
	height: 0.2rem;
	line-height: 0.2rem;
	text-align: center;
}
.icon-111arrowheadright:after{
	content: '>';
}
.icon-115rightarrowheads:after{
	font-size: 0.26rem;
	content: '>';
}
.icon-112leftarrowhead:after{
	content: '<';
}
.icon-116leftarrowheads:after{
	font-size: 0.26rem;
	content: '<';
}


.fifth-wrap{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	overflow: auto;
	color: #27618b;
	font-size: 0.22rem;
	display: none;
}
.fifth-wrap .title{
	display: block;
	margin:0.93rem auto 0.8rem;
	cursor: pointer;
}
.fifth-wrap li{
	width: 15.71rem;
	min-height: 2.34rem;
	background: rgba(255,255,255,.88);
	border-radius: 0.42rem;
	margin: 0 auto;
	position: relative;
	padding: 0.43rem 0.25rem 0 0.25rem;
	margin-bottom: 1.4rem;
}
.fifth-wrap .top_line{
	width: 100%;
	position: absolute;
	top: -0.34rem;
	left: 0;
}
.fifth-wrap .corner{
	width: 0.46rem;
	height: 0.97rem;
	position: absolute;
	top: -0.97rem;
	left: -0.46rem;
}
.fifth-wrap li > div{
	overflow: hidden;
	margin-bottom: 0.24rem;
}
.fifth-wrap li > div div:first-child{
	float: left;
}
.fifth-wrap li > div div:last-child{
	width: 13.5rem;
	float: right;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.05rem;
}
.fifth-wrap li > div span{
	display: inline-block;
	width: 2.4rem;
	height: 0.35rem;
	text-align: center;
	line-height: 0.35rem;
	color: #fff;
	background: #6ab3ed;
	margin-right: 0.5rem;
}

.dream{
	width: 1rem;
	height: 0.25rem;
	position: absolute;
	top: 1.3rem;
	left: 3.4rem;
	font-size: 0.24rem;
	line-height: 0.25rem;
	color: #fff;
	text-align: center;

}

@media screen and (min-width:1366px) and (max-width: 1599px) {
    .fourth-wrap .left-desc {
        top: 1rem !important;
        left: 1.3rem !important;
    }
    .fourth-wrap .flag-box {
        width: 6.2rem !important;
        height: 6.9rem !important;
    }
    .alert-box2 > div {
        margin-bottom: 0.2rem !important;
    }
    .alert-box2 {
        height: 2.2rem !important;
        padding: 0.23rem 0.25rem 0 0.25rem !important;
        top: 491.656px !important;
        left: 745.875px !important;
    }
    .fourth-wrap .done-btn {
        top: 5.8rem !important;
    }
    .alert-box2 {
        top: 494.391px !important;
    }
}
