/* CSS Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
html {
    height: 100%;
}
body {
    height: 100%;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}




body{text-align:center;}
body *{font-family:"Open Sans", '微軟正黑體', Arial;font-size:12px;}

body:not(input){
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}

.body_container{max-width:768px;margin:auto;position:relative;}

.nouserselect{
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
}


/* For controlling logo size (The div containing retina background image as logo). This img element is not visible */
.infinitus_header img,
.infinitus_header_hd img{
    width:100%;height:auto;max-height:180px;
    visibility:hidden;
}



.category-select{
    width: 80%;
    margin: auto;
    margin-top:-30px;
}
.ui-select{
    background-color: #fff;
    border-radius: .3125em;
    z-index: 1;
}
span.selection{font-size:18px;}
.category-filter{margin-top:14px;}
.category-filter .filter-option{cursor:pointer;border:1px solid #808080;}
#page-calendar .category-filter .filter-option{width:22%;}
.category-filter .filter-option span:before{
    content:" ";display: inline-block;vertical-align: top;width:8px;height:8px;margin:8px 3px;
    border-radius:5px;border:1px solid #fff;margin-left: 5px;float:left;
}
.category-filter .filter-option span{font-size:16px;color:#000;}
@media (max-width: 420px){
    .category-filter .filter-option span:before{margin:8px 1px;width:6px;height:6px;border-radius:4px;}
    #page-calendar .category-filter .filter-option{margin-right:1%;}
    #page-calendar .filter-option:first-child{margin-left: 1%;}
}
@media (max-width: 380px){
    .category-filter .filter-option span{font-size:14px;}
}
.category-filter .filter_cat1 span:before, .category-filter .filter_cat1.pressed{background:#38B549;}
.category-filter .filter_cat2 span:before, .category-filter .filter_cat2.pressed{background:#EC008C;}
.category-filter .filter_cat3 span:before, .category-filter .filter_cat3.pressed{background:#91268F;}
.category-filter .filter_cat4 span:before, .category-filter .filter_cat4.pressed{background:#1A75BC;}
.category-filter .pressed span{color:#fff;}

.clear_float{clear:both;}


/* Layout for all media */

span.button{
    cursor: pointer;
    border:1px solid #d1d3d4;
    font-weight: bold;
    padding: 7px 14px;
    font-size: 24px;
    color: #444;
    border-radius: 6px;
    background-color:#e6e7e8;
    background: linear-gradient(to bottom, #e6e7e8, #f1f2f2 33%, #bcbec0);
    display:inline-block;vertical-align: top;
    -moz-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

span.button: hover, span.button.hover {
    border:1px solid #d1d3d4;
    font-weight: bold;
    padding: 9px 18px;
    font-size: 24px;
    color: #444;
    border-radius: 6px;
    background-color:#e6e7e8;
    background: linear-gradient(to bottom, #000000, #ffffff 33%, #000000);
    display:inline-block;vertical-align: top;
}

span.my_event_button{background:transparent;color:#fff;}



/* BEGIN - Style for Footer Area */
footer{position:fixed; bottom:0; width: 100%; background-color:#fff; z-index:5;}
footer .bottom_highlight{max-width: 768px; margin: 0 auto; background-color:#cf0a2c; box-shadow:0 0 6px #000;}
footer .bottom_highlight > div > div{
    padding: 2px;text-align: center;
    display:inline-block;vertical-align:top;
}


.footer{text-align:center;line-height:20px;
    /* -webkit-transform-origin-x: 0; fix unwanted margin-left after -webkit-transform */
    -webkit-transform:scale(0.85);
}
.footer > div{height:20px; display: inline-block; vertical-align: top;}
.footer .copyright{background:url("../img/copyright.png") no-repeat 0 0;background-size: 310px 20px;width:310px;}
.footer .fb_logo{background:url("../img/icon_fb.png") no-repeat 0 0;background-size: 20px 20px;width:20px;}
.footer .youtube_logo{background:url("../img/icon_youtube.png") no-repeat 0 0;background-size: 20px 20px;width:20px;}


.infinitus_footer_space{height:134px;}


/* END - Style for Footer Area */


.title-bar {
    display: block;
    position: relative;
    padding:10px 12.5%;
    overflow: hidden;
}


.title-spacer{
    display: block;
    height: 10px;
}

.title-bar h1 {
    display: block;
    float: left;
    font-size: 25px;
}

.title-bar .calendar-header {
    display: block;
    position: absolute;
    font-size: 21px;
    right: 12.5%;
    bottom: 10px;
}

.event_list_header{}
.event_list_header h1{text-align:left;font-size: 25px;padding: 10px 12.5%;}
.selected_event_list{text-align:left;padding: 10px 5%;}
.selected_event_list div.selected_event_month_divider{margin: 20px 0 10px;}
.selected_event_list span.yearname{
    padding: 0 10px;
    margin: 0 10px;
    background: #000;
    color: #fff;
    height: 15px;
    border-radius: 8px;
}

.close_icon{
    background: url("../img/cross_64.png") no-repeat 0 0;background-size: 32px 32px;width:32px;height:32px;
    display:inline-block;vertical-align: top;
}
.remove_event{position: absolute;top:20px;right:10px;}

div.event_info_attr > span{
    display: inline-block;
    vertical-align: top;
    font-size: 15px;
}
.selected_event_list .event_info_block{
    padding:10px 4px;border-top:1px solid #ccc;line-height: 20px;position: relative;
    padding-right: 44px;
}
.selected_event_list .event_info_block.cat1 > div.event_info_attr.event_info_name{color:#38B549;}
.selected_event_list .event_info_block.cat2 > div.event_info_attr.event_info_name{color:#EC008C;}
.selected_event_list .event_info_block.cat3 > div.event_info_attr.event_info_name{color:#91268F;}
.selected_event_list .event_info_block.cat4 > div.event_info_attr.event_info_name{color:#1A75BC;}

.selected_event_list span.monthname{font-size:1.8em;}



/* Back link for most pages */
.back_page_link{line-height:50px;}
.back_page_link a{font-size:21px;color:#000;text-decoration: none;}


/** Product List */
.product_area{text-align:left;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.product_item a{color:#000;text-decoration: none;}
.product_item span.button{font-size:18px;}
.product_item{display:inline-block;vertical-align:top;width:49%;border-bottom:6px solid #fff; padding: 4px 0;min-height: 190px;padding-top: 15px;}
.product_item.selected{background-color:#ebebec;}
.product_item.highlighted{background-color:#FAFAD2;}
.product_item.highlighted.selected{background-color:#ebebec;}
.product_item > div, .product_item a > div{display:inline-block;vertical-align: top;}
.product_item > div.product_quantity{width:40px;padding-top:4px;}
.product_quantity_plus, .product_quantity_minus{padding:14px 4px;font-size:24px;text-align: center;background-color:#e6e7e8;color: #5a5a5a;}


@media (max-width: 370px){
    .product_item > div.product_quantity{width:40px;padding-top:22px;}
    .product_quantity_plus, .product_quantity_minus{padding:4px;}
}
.product_quantity input{padding: 6px 0; width: 38px;text-align:center;font-size:18px;}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{-webkit-appearance: none;margin: 0;}
div.input{width: 40px;text-align:center;font-size:18px;/*border:1px solid #ccc;padding: 6px 0; */}
.product_item div.product_image{max-width:160px;margin-left:-3px;position:relative; border:1px solid #d1d3d4; border-radius:20px;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.product_item div.product_image .icon_selected{
    position:absolute;top:6px;right:6px;display:inline-block;vertical-align: top;width:32px;height:32px;
    background:url("../img/button_tick02@2x.png") no-repeat 0 0;visibility: hidden;background-size:32px 32px;
}
.product_item.selected div.product_image .icon_selected{visibility: visible;}
.product_item div.product_image > img{width:100%;border-radius:20px;}
.product_item div.product_details{width:140px;padding:0 4px;line-height:20px;padding-right: 0;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}
.product_item div.product_details > .product_name{font-weight:bold;font-size:1.4em;line-height:30px;min-height: 60px;}
.product_item div.product_details > .product_selling_price, .product_item div.product_details > .product_selling_price span{font-size:14px;color:#666;}
.product_item div.product_details > .product_distribution_price, .product_item div.product_details > .product_distribution_price span{font-weight:bold;font-size:14px;color:#cf0a2c;}
.product_item div.product_details > .product_points, .product_item div.product_details > .product_points span{font-weight:bold;font-size:14px;line-height:22px;color:#cf0a2c;}
.product_item div.product_details > .product_info_button{margin:4px 0;}
.product_item div.product_details span.label{display:inline-block;vertical-align:top;width:56px;}


/* Product list page footer */
.selected_product_summary{color:#fff;padding:6px 0;}
.selected_product_summary > span{font-size:20px;line-height:40px;margin: 0 8px;}
.selected_product_summary > span > span{font-size:20px;margin: 0 2px;}

/* Product details */
.product_info{text-align:center;padding:20px;}
.product_info_inner{margin:auto;max-width:600px;}
.product_info_inner .product_image{width:100%;}
.product_info_inner .product_image img{width:50%;}
.product_info_inner .product_details{text-align: left;}
.product_info_inner .product_details *{font-size:18px; line-height: 1.3em;}
.product_info_inner .product_details .product_name{font-size: 1.9em;font-weight: bold;line-height:30px;}
.product_info_inner .product_details .product_price{ font-size: 1.6em;font-weight: bold;line-height:28px;color:#cf0a2c;}
.product_info_inner .product_details .product_points{font-size: 1.6em;font-weight: bold;color:#cf0a2c;}
.product_info_inner .product_details .product_description{line-height:18px; margin: 18px 0;}
.product_info_inner .product_description_subtitle{font-weight: bold;padding:10px 0;}

.product_info table{border:1px solid #000;border-collapse: collapse;width:100%;}
.product_info table td{border:1px solid #000;padding:4px;}

.product_details_separator {border-bottom: 1px solid #aaaaaa; padding-bottom: 5px;}
.product_details_separator span {padding: 3px 5px; font-weight: bold; font-size: 20px; line-height: 30px; background:#bbb; cursor: pointer; border: 1px solid #000000;}
.product_details_separator span:before {content: " >"; weight: bold;}
.product_details_separator span a, .product_details_separator span a:hover, .product_details_separator span a.visited {text-decoration: none; font-size: 20px;}
.product_details .product_description ul {margin-left: 20px}

/* .product_leaflet {display: none;} */
.product_leaflet {wdith: 100%}
.product_leaflet img { width: 100%; height: auto; }




/* Selected items */
.cart_quantity_header{font-size:18px;color:#000;border-bottom:1px solid #eee;text-align: left;padding:2px 20px;}
.cart_quantity_item{position:relative; font-size:16px;color:#000;border-bottom:1px solid #f7f7f7;text-align: left;padding:10px 20px;}
.cart_quantity_item_count, .cart_quantity_item_info{display:inline-block;vertical-align: top;}
.cart_quantity_item_count{font-size:18px;background-color:#e6e7e8;padding:4px 0;font-weight:bold;width:50px;text-align:center;margin-right:7px;}
.cart_item_thumb {display: inline-block; width:50px; height: 50px;}
.cart_item_thumb  img {width:50px; height: 50px;}
.cart_quantity_item_info{width:70%;}
.cart_quantity_item_info_name{font-weight:bold;font-size: 20px;}
.cart_quantity_item_info_price{font-size:1.1em;color:#cf0a2c;}
body#selected-products input.changeProductCountInput {padding: 6px 0;width: 38px; text-align: center; font-size: 18px; border: none; background: #e6e7e8;}



.popup_dialog{position:fixed;top:0;left:0;height:100%;width:100%;z-index:20;display: none;}
.popup_dialog .popup_dialog_background{position:relative;height:100%;width:100%;background-color:rgba(0,0,0,0.8);}
.popup_dialog_body{
    position:fixed;top:50%;left:50%;background-color:#fff;border:1px solid #222;
    width:300px;margin-left:-170px;margin-top:-200px;padding:10px 20px;padding-bottom:30px;height:auto;
    max-height: 400px;overflow-y: scroll;
}

.popup_dialog span.order_id_display, .popup_dialog span.asterisk {font-size: 75px !important;}
span.line-change {display:block;}


@media (max-height: 440px){
    .popup_dialog_body{
        max-height: 380px;
    }
}

.popup_dialog_body .popup_dialog_body_inner{
    padding-top:18px;
}
.popup_dialog_body_for_order .popup_dialog_body_inner{
    padding-top:45px;
}
.popup_dialog_body_for_order .popup_dialog_body_inner h2{padding-left:0;}
.popup_dialog_body_for_order .popup_dialog_body_inner h3, .popup_dialog_body_for_order .popup_dialog_body_inner h3 span{
    font-size: 20px;
    margin-bottom: 14px;
}

.popup_dialog_body .icon_close{
    float:right;margin:6px;
}
.popup_dialog_body .icon_close i{font-size:30px;}
.popup_dialog_body h2{font-size:24px;font-weight: bold;line-height: 40px;  padding-left: 34px;}
.popup_dialog_body .popup_dialog_body_content div{font-size:1.2em;text-align: left;padding: 0 10px;}
.popup_dialog_body .popup_dialog_body_content div.radio_input{text-align: center;margin:0;}
.popup_dialog_body .popup_dialog_body_content div.radio_input > div{margin:auto;font-weight: bold;text-align: left;line-height:30px;display: inline-block;}
.popup_dialog_body .popup_dialog_body_content div.radio_input > div label{font-size:16px;}

.popup_dialog_body .popup_dialog_body_content div.text_input{margin-bottom:10px;margin-top:10px;}
.popup_dialog_body_content_submitted{display: none;/*padding-top: 30px;*/}
.popup_dialog_body_content_submitted h2{padding-left:0;}
.popup_dialog_body_content_submitted .submitted_form_text{margin:20px 0;text-align: center;}

.bottom_highlight.product_list_bottom span.button{margin-top:2px;}

span.registration_result_button{
    background: #cf0a2c !important;
    color: #fff;
    margin-top: 18px;
}


/* General CSS for both Mobile and Tablet layout */
/* Make a larger footer when space allows, e.g. on tablet */
@media (min-height: 600px){

    .bottom_highlight.product_list_bottom span.button{margin-top:8px;}

    footer .selected_product_summary {text-align: left;}
    footer .selected_product_summary > span > span {font-size: 20px;}
    footer .selected_product_summary > span {display: block; font-size: 20px; line-height: 28px;}
    footer .selected_product_summary > span > span.summary_attr {width: 110px; display: inline-block;}

}
@media (min-height: 728px){
    body.details_image footer {height: 20px;}
    footer {height: 14%;}
    footer .bottom_highlight {height: 100%; margin-top: -17px;}
    footer .bottom_highlight .wrapper {display: table; width: 100%; height: 100%;}
    footer .bottom_highlight .wrapper  > div {display: table-cell; vertical-align:top;}
    footer .bottom_highlight.product_list_bottom span.button { font-size: 40px;}
    .infinitus_footer_space {height: 14%}
    .infinitus_footer_space_extra {height:34px;}

    /*
    footer .bottom_highlight .home_button, footer .bottom_highlight .selected_event_button {display: table; height: 100%; width: 100%; }
    footer .bottom_highlight .home_button > div, footer .bottom_highlight .selected_event_button > div {display: table-cell;  vertical-align: middle; }

    */

}

@media (min-height: 728px) and (min-width: 460px){
    #page-calendar footer .bottom_highlight > div > div{padding-bottom:38px;}
}

@media (min-width: 738px){
    .product_quantity input {width: 42px;}
    .product_item > div.product_quantity {width: 44px;}
}


@media (min-width: 640px){
    .product_info_inner {overflow:hidden;}
    .product_info_inner .product_image {width: 50%; float: left;}
    .product_info_inner .product_image img {width: 100%;}
    .product_info_inner .product_details {width: 48%; float: left; padding-left: 2%;}
    .product_info_inner .product_details  .product_price > span {display: block;}
}

@media (max-width: 768px){

    .infinitus_header{
        max-height:184px;background:url("../img/logo.png") no-repeat 0 0 ;
        background-size:100% auto;
    }

}
@media (max-width: 768px) and (min-height: 728px){
    #page-calendar footer .bottom_highlight > div > div{
        padding-top: 38px;
    }
}

@media (max-width: 728px){
    /* For menu style */
    .product_item {width:100%;}
    .product_item div.product_details{padding:0 20px;width:200px;}

}


@media (max-width: 640px){
    .selected_product_summary > span:first-child{display: block;}
    .selected_product_summary > span{line-height:28px;}

}


@media (max-width: 540px){


    .product_item div.product_details{padding:0 8px;}
    footer.bottom_highlight > div{background-size: 100% auto;}
    footer .bottom_highlight .button{
        font-size: 20px;
    }


    .selected_product_summary span{line-height:28px;font-size:18px;margin: 0 2px;}
    .selected_product_summary > span:first-child{display:block;}

    footer .bottom_highlight.product_list_bottom span.button { font-size: 32px;margin-top:7px;}

}

@media (max-width: 460px){

    .product_item div.product_details{width:170px;}
    .selected_product_summary{text-align:left;}
    .selected_product_summary > span{display:block;font-size: 16px !important;}
    .selected_product_summary > span > span{font-size: 16px !important;line-height: 28px;}
    .summary_attr{display: inline-block;width:80px !important;font-size: 16px !important;}
    .cart_quantity_item_info {width: 60%;}
    .cart_quantity_item_info_price span {display:block;}

    #page-calendar footer .bottom_highlight > div > div{
        padding-top: 0;
    }
}
@media (max-width: 430px){
    footer .bottom_highlight.product_list_bottom span.button{margin-top:26px;font-size: 22px;}
}

@media (max-width: 408px){

    .product_item div.product_details{padding:0 4px;width:140px;}
    /*footer .bottom_highlight > div{background-size: 100% auto;}*/
    footer .bottom_highlight .button{
        font-size: 16px;
    }
    #event-list .event_info{  padding: 16px 0px; padding-top: 25px;}


}

@media (max-width: 370px){
    /* For menu style */
    .product_item {width:100%;}
    .product_item div.product_quantity{padding-top:2px;margin-top: 24px;}
    .product_item div.product_image{max-width:120px;margin-top: 24px; border:1px solid #d1d3d4; border-radius:10px;}
    .product_item div.product_image > img{border-radius:10px;}
    .product_item div.product_details{padding:0 4px;}

    #page-calendar footer .bottom_highlight > div > div{
        padding-top: 0;
    }
}

@media (max-width: 340px){
}


/* For normal PCs */
@media (min-width: 768px){

    .infinitus_header{
        height:184px;
        background:url("../img/logo.png") no-repeat 0 0 ;
    }

    #page-calendar footer .bottom_highlight > div > div{
        padding-top: 20px;
        padding-bottom: 18px;
    }
    footer .bottom_highlight > div > div{
        width:33%;
    }
    footer .bottom_highlight > div > div.summary{
        width:65%;
    }
    .product_section footer .bottom_highlight > div > div{
        width:45%;
    }
    .product_section footer .bottom_highlight > div > div.summary{
        width:52%;
    }
    .product_section footer .bottom_highlight.product_list_bottom span.button{margin-top: 16px;font-size: 40px;}
    .product_section footer .bottom_highlight.product_list_bottom .summary .selected_product_summary{margin-top: 0px;}



}

@media (min-height: 728px) and  (min-width: 768px){
    #page-calendar footer .bottom_highlight > div > div{
        padding-top: 38px;
        padding-bottom: 38px;
    }

}

.calendar_dot{
    display: inline-block;vertical-align: top;
    content: "";width:8px;height:8px;border-radius: 4px;
}
.calendar_dot_cat1{
    display: inline-block;vertical-align: top;
    content: "";width:8px;height:8px;border-radius: 4px;
    background-color:#38B549;
}
.calendar_dot_cat2{
    display: inline-block;vertical-align: top;
    content: "";width:8px;height:8px;border-radius: 4px;
    background-color:#EC008C;
}
.calendar_dot_cat3{
    display: inline-block;vertical-align: top;
    content: "";width:8px;height:8px;border-radius: 4px;
    background-color:#91268F;
}
.calendar_dot_cat4{
    display: inline-block;vertical-align: top;
    content: "";width:8px;height:8px;border-radius: 4px;
    background-color:#1A75BC;
}
#page-calendar .hb-day.hb-day-active{background-color:#eee;color:#000;font-weight:bold;}
.hb-day.hb-day-active span{
    display: block;
    line-height: 17px;
}
#page-calendar .hb-day.hb-day-selected{background-color:#F0C1C2;}

.product_description strong, .product_description h1, .product_description h2, .product_description h3, .product_description h4, .product_description h5, .product_description h6
{font-weight:bold;}
.product_description p{margin:4px 0;}

#calendar .hb-days{padding: 0 10px;border-radius: 0;}
.ui-btn{border:1px solid #c0c0c0 !important;}

.hidden{display:none;}

body.details_image .title-bar {padding-left: 2em}
.youtube_container {margin-top:20px}