*{padding: 0;margin: 0;box-sizing: border-box;}
dl,dt,li{list-style-type: none;}
a{text-decoration: none;}
a:link {text-decoration:none;}
a:active {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
html{min-width: 320px;max-width: 640px;margin: 0 auto;font-size: 12px;background: #eef1f6;}
body{font-size: 12px;font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;}

@supports (-moz-appearance:none) {
    .scrollable
    {
        scrollbar-width: thin;
        scrollbar-color: #ccc #fff;
        -ms-overflow-style: scrollbar;
    }
}
@supports (-ms-overflow-style: none) {
    .scrollable
    {
        scrollbar-width: thin;
        scrollbar-color: #ccc #fff;
        -ms-overflow-style: scrollbar;
    }
}
.scrollable::-webkit-scrollbar 
{
    width: 3px;
    height: 3px;
}
.scrollable::-webkit-scrollbar-track 
{
    background: #fff;
}
.scrollable::-webkit-scrollbar-thumb 
{
    background-color: #ccc;
    border-radius: 8px;
}
.scrollable::-webkit-scrollbar-thumb:hover 
{
    background: #ccc;
}
#loading{z-index:999999;position:absolute;right:1px;top:1px;background-color:rgba(255, 255, 255, 0.5); width:32px;display:none;}
#loading2{z-index:999999;position:absolute;right:1px;top:1px;display:none;width: 40px;padding: 4px;aspect-ratio: 1;border-radius: 50%;background: #4da2ff;--_m: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;-webkit-mask: var(--_m);mask: var(--_m);-webkit-mask-composite: source-out;mask-composite: subtract;animation: loading_tran 0.5s infinite linear;}
@keyframes loading_tran {to{transform: rotate(1turn)}}
/*header*/
.header{width: 100%;max-width: 640px;min-width: 320px;height: 50px;background-color: #0086f6;position: fixed;top: 0;left: 0;right: 0;margin: 0 auto;z-index: 995;}
.header .logo{height: 35px;margin: 7px auto 0 auto;display: block;}

/* page-header */
.page-header{background: #0086f6;min-width: 320px;max-width: 640px;height: 50px;line-height: 50px;position: fixed;top: 0;left: 0;right: 0;margin: 0 auto;z-index: 995;display: flex;justify-content: space-between;color: #fff;}
.page-header .back{width: 50px;text-align: left;padding-left: 10px;}
.page-header .home{width: 50px;text-align: right;padding-right: 10px;}
.page-header .back i{font-size: 26px;color: #fff;}
.page-header .home i{font-size: 26px;color: #fff;}
.page-header h1,.page-header h2{flex: 1;height: 50px;text-align: center;font-size: 16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-weight: 500;}


/* 分页 */
.mpage{padding: 30px 0;display: flex;justify-content: center;flex-wrap: nowrap;align-items: center;}
.mpage a{width: 45%;margin: 0 5px;border: 1px solid #eee;padding: 8px 0;text-align: center;font-size: 14px;color: #006ff6;border-radius: 5px;}
.mpage a.off{color: #ccc;}
.mpage .num{font-size: 14px;color: #555;margin: 0 5px;}

/* tool */
.tool{width: 100%;height: 55px;max-width: 640px;min-width: 320px; color: #394f7c;border-top: 1px solid #f7f7f7; user-select: none;box-shadow: 0px -1px 6px 0px rgba(6, 0, 0, 0.1);background-color: #fff;position: fixed; bottom: 0; left: 0; right: 0;margin: 0 auto;z-index: 996;display: flex; justify-content: space-around;align-items: center;}
.tool a{text-align: center;color: #394f7c; font-size: 12px;line-height: 18px;font-weight: 500;}
.tool i{font-size: 20px}
.tool .home{font-weight: 600;}
.tool .yacht-date{font-weight: 600;}
.tool .online{font-size: 22px;}
.tool .member{font-weight: 600;font-size: 18px;}
.tool .order{font-weight: 400;font-size: 16px;}
.tool-gb2{background: #0086f6;color: #fff;border-top: 1px solid #0086f6;box-shadow:none;}
.tool-gb2 a{color: #fff;}

/*footer*/
.footer{color: #152030;font-size: 12px;padding:20px 0 80px 0;line-height: 24px;}
.footer .copyright{text-align: center;line-height: 22px;}
.footer .copyright h1{display: inline;font-weight: normal;font-size: 14px;color: #152030;}
.footer p{text-align: center;}
.footer a{color:#152030;}

/* 选择航线弹窗 */
.mask{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: #152030;opacity: 0.65;z-index: 996;transition: all 0.4s;}
.port-box{background-color: #fff;max-width: 640px;margin: 0 auto;position: fixed;top: 10%;left: 0;right: 0;bottom: 0;border-radius: 20px 20px 0 0;z-index: 997;padding: 10px 0;box-sizing: border-box;}
.port-box .head{border-bottom: 1px solid #eee;height: 35px; line-height: 35px; font-size: 15px;color: #152030;text-align: center;font-weight: 500;position: relative;}
.port-box .head .close{position: absolute;top: 0;right: 15px;cursor: pointer; font-size: 24px;color: #152030;font-weight: normal;}
.port-box .box-body{height: 85%;padding: 10px 10px; overflow-y: scroll;padding-bottom: 60px;}
.port-box .box-body dt{color: #666;font-size: 14px;padding: 10px 0;}
.port-box .box-body dd{display: flex;flex-wrap: wrap;justify-content: flex-start;padding: 5px 0px;box-sizing: border-box;}
.port-box .box-body dd a{width: 48%;margin-right: 2%;margin-bottom: 20px; padding: 8px 0;box-sizing: border-box; border:1px solid #eee;border-radius: 5px;text-align: center;font-size: 13px;color: #152030;display: flex;justify-content: center;align-items: center;flex-wrap: nowrap;}
.port-box .box-body dd a.on{border:1px solid #0086f6;background: #0086f6; color: #fff;}
.port-box .box-body dd a i{font-size: 16px;color: #555;margin: 0 5px;}
.port-box .box-body dd a.on i{color: #fff;}
.port-box .head .close:hover{animation: rotate 1s;animation-iteration-count: 1;}
@keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(180deg);}}

        
/*THE END*/
.end-box {margin: 20px 5px;border-top: 1px solid #eee;display: flex;justify-content: center;flex-wrap: nowrap;align-items: center;}
.end-box .end-text {padding: 0 5px;color: #ccc;background: #fff;margin-top: -7px;display: flex;flex-wrap: nowrap;justify-content: center;align-items: center;font-size: 12px;}
.end-box .end-text .dot-left, .end-box .end-text .dot-right {width: 5px;height: 5px;border-radius: 3px;background-color: #eee;margin-right: 11px;display: inline-block;}
.end-box .end-text .dot-right {margin: 0 0 0 11px;}

/* 日历组件 */
.calendar{max-width:640px;box-sizing:border-box;margin:0 auto;padding:5px 10px;background:#fff;border-radius:12px 12px 0 0;overflow:hidden;position:fixed;bottom:0;left:0;right:0;top:10%;z-index:1000;}
.calendar-wrap{height:100%;display:flex;flex-direction:column;}
.calendar-wrap .title{text-align:center;font-size:15px;border-bottom:1px solid #eee;height:40px;line-height:40px;color:#152030;font-weight: 500;}
.calendar-wrap .title .close{font-size:30px;float:right;margin-right:10px;color:#304659;font-weight: normal;cursor: pointer;}
.calendar-wrap .month-header{display:flex;justify-content:space-around;height:50px;flex-direction:row;flex-wrap:wrap;align-items:center;font-size:14px;font-weight:500;}
.calendar-wrap .month-header .up-month{width:50px;text-align:right;font-size:18px;cursor: pointer;font-weight:600;}
.calendar-wrap .month-header .next-month{width:50px;text-align:left;font-size:18px;cursor: pointer;font-weight:600;}
.calendar-wrap .month-header .monthinfo{flex:1;text-align:center;}
.calendar-wrap .calendar-week{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row nowrap;flex-flow:row nowrap;justify-content:space-between;font-weight:500;height:30px;}
.calendar-wrap .calendar-week li{align-items:center;justify-content:center;flex:1;text-align:center;line-height:30px;font-size:14px;}
.calendar-wrap .calendar-week li:first-child{color:#69798c;}
.calendar-wrap .calendar-week li:last-child{color:#69798c;}
.calendar-wrap .calendar-month{overflow-y:scroll;flex:1;}
.calendar-wrap .calendar-month .calendar-day{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row wrap;flex-flow:row wrap;}
.calendar-wrap .calendar-month .calendar-day li{height:60px;display:flex;justify-content:center;align-items:center;-webkit-flex-basis:14.25%;flex-basis:14.25%;font-size:14px;cursor: pointer;}
.calendar-wrap .calendar-month .date-item{display:flex;flex-direction:column;justify-content:center;}
.calendar-wrap .calendar-month .date-item .price{font-size:10px;color:#ff3a30;user-select:none;}
/*topback*/
.topback{position: fixed;right: 10px;bottom: 80px;z-index: 100;border-radius: 50px;box-shadow: 1px 1px 10px #999;width: 40px;height: 40px;display: none;justify-content: center;align-items: center;background:#fff;}
.topback i{font-size:26px;color:#bbb;cursor:pointer;}