@charset "utf-8";
/* CSS Document */



/*

	//[ Vertical Alignment ]

	// older webkit
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-justify-content: center;

    // older firefox
    display: -moz-box;
    -moz-box-align: center;
    -moz-box-pack: center;

    // IE10
    display: -ms-flexbox;
    -ms-flex-align: center;
    -ms-flex-pack: center;

    // newer webkit
    display: -webkit-flex;
    -webkit-align-items: center;
    -webkit-box-pack: center;

    // Standard Form - IE 11+, FF 22+, Chrome 29+, Opera 17+
    display: flex;
    align-items: center;
    justify-content: center;

*/


/* --------- Fonts --------- */

html {
    -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */
}


body, tr, td, p{
    font-family:"Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height:25px;
    letter-spacing: 0px;
    overflow-x: hidden;
}

b, strong{
    /*font-family:"Proxima Nova Light", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;*/
    font-weight:bold;
}

/* ---- END --- Fonts ------ */



body {
    background-color:#ffffff;
    /*display: none;*/
}

html, body{
    height:100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body, tr, td {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    color:#444444;
}

img {
    border:0px;
    outline: none !important;
}

td img {
    display: block;
}

a:focus {
    outline: none !important;
}

input:focus {
    outline: none !important;
}

select:focus {
    outline: none !important;
}

select::-ms-expand {
    display: none;
}

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

a:link, a:visited{
    /*color:#34A79B;*/
    text-decoration: none;
}
a:hover{
    /*color:#666666;*/
    text-decoration: none;
}

.table_fixed_size {
    table-layout:fixed;
    overflow:hidden;
    word-wrap:break-word;
}

.table_fixed_size img{
    display:inline-block;
    vertical-align:middle;
}


.table_normal_size{
    table-layout:auto !important;
    overflow:visible !important;
    word-wrap:normal !important;
    display:inline-block !important;
}


.cccdi, a.cccdi:link, a.cccdi:visited{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#333333;
    font-size:9px;
    text-decoration: none;
    letter-spacing: 0px;
}

a.cccdi:hover{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#999999;
    font-size:9px;
    text-decoration: none;
    letter-spacing: 0px;
}


.v_table {
    height:100%;
}


.reg_box {
    color:#FFFFFF;
    letter-spacing: 1px;
    text-align: center;
    border-top : 1px solid #cccccc;
    border-left : 1px solid #cccccc;
    border-right : 1px solid #666666;
    border-bottom : 1px solid #666666;
    background-color:#999999;
    height: 25px;
    width: 380px;
    vertical-align: text-bottom;
}










/*===========================================*/
/*--------------- tomyccc TEMP --------------------*/
/*===========================================*/


body {
    /*display:none;*/
}




#menu{
    width:100%;
    height: 150px;
    background-color: #ffffff;
    position: fixed;
    top: -200px;
    z-index: 8888;
    text-align:center;
    border-bottom: 1px solid #EEEEEE;
    left:0;
}



#store{
    width:100%;
    text-align:center;

    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#store .btn{
    text-align:center;
    min-width:300px;
    display:inline-block;
    color:#FFF;
    border:2px solid #FFFFFF;
    padding-left:30px;
    padding-right:30px;
    padding-top:20px;
    padding-bottom:20px;
    border-radius: 50px;
    font-size: 15px;
    margin-top:130px;
}


#store .overlay_txt{
    /*cursor:pointer;*/
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    position:absolute;
    width:100%;
    height:100%;
    z-index:998;
}


#store .overlay{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000;

    opacity: 0.4;
    filter: alpha(opacity=4); /* For IE8 and earlier */

    z-index:100;
}


#store .col00 .bg{

    position:absolute;
    width:100%;
    height:100%;

    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(../img/hkac/shop_00.jpg);

    -webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
}

#store .col00{
    display:inline-block;
    position:relative;
    float:left;
    width:100%;
    height:350px;



}




#store .col01{
    display:inline-block;
    position:relative;
    float:left;
    width:100%;
    height:350px;

}


#store .col02{
    display:inline-block;
    position:relative;
    float:left;
    width:100%;
    height:350px;


}



#store .col01 .bg{

    position:absolute;
    width:100%;
    height:100%;

    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(../img/hkac/shop_01.jpg) ;

    -webkit-transition: transform 0.2s;
    -moz-transition: transform 0.2s;
    -ms-transition: transform 0.2s;
    -o-transition: transform 0.2s;
    transition: transform 0.2s;
}


#store .col02 .bg{

    position:absolute;
    width:100%;
    height:100%;

    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:url(../img/hkac/shop_02.jpg);
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
}

#store .col00:hover .bg,
#store .col01:hover .bg,
#store .col02:hover .bg{
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}

#store .overlay_txt .btn{
    -webkit-transition: background-color 0.2s, color 0.2s;
    -moz-transition: background-color 0.2s, color 0.2s;
    -ms-transition: background-color 0.2s, color 0.2s;
    -o-transition: background-color 0.2s, color 0.2s;
    transition: background-color 0.2s, color 0.2s;
}
#store .overlay_txt .btn:hover{
    background:#fff;
    color:#444;
}





#joinus{
    width:100%;
    text-align:center;
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#joinus .container{
    /*display:inline-block;*/
    position:relative;
    width:100%;
    text-align:left;
}

#joinus .container .title{
    font-size:30px;
    line-height: 30px;
    color:#333333;
    margin-top:80px;
    overflow: hidden;
}
#joinus .container .subtitle{
    font-size:16px;
    color:#666666;
}

#joinus .container img{
    /*margin-top:5px;*/
}

#joinus .col00{
    padding:15px;
    height:336px;
    text-align:center;

    background: linear-gradient(141deg, #FFE5E2 0%, #FFEBD9 60%, #FFECDA 99%);
    background-image: linear-gradient(141deg, rgb(255, 238, 243) 0%, rgb(255, 235, 217) 60%, rgb(255, 236, 218) 99%);
}

#joinus .col01{
    padding:15px;
    height:336px;
    text-align:center;

    background: linear-gradient(141deg, #FFE5E2 0%, #FFEBD9 60%, #FFECDA 99%);
    background-image: linear-gradient(141deg, rgb(255, 238, 243) 0%, rgb(255, 235, 217) 60%, rgb(255, 236, 218) 99%);
}



#what{
    width:100%;
    /*text-align:center;*/
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */

    /*
    background: linear-gradient(141deg, #FFEEF3 0%, #FFEBD9 60%, #FFE1A5 99%);
    background-image: linear-gradient(141deg, rgb(255, 238, 243) 0%, rgb(255, 235, 217) 60%, rgb(255, 225, 165) 99%);
    */
    background-color:#FFF;
    overflow-x: hidden;
    position: relative;

}

.cal-wrap{
    width: 100%;
    position: relative;
}
.what-wrap{
    position: relative;
}
#calendar{
    position:absolute;
    margin-top:50px;
    z-index:999;
    right: -490px;
    cursor:pointer;
    position: absolute;

    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#what .container{
    /*display:inline-block;*/
    margin-top:60px;
    margin-bottom:70px;
    width:100%;
    /*text-align:center;*/
}

#what .title{
    text-align: center;
    font-size:40px;
    color:#333;
    position:relative;
    float:left;
    width:100%;
    margin-bottom:40px;
}
@media(max-width:991px){
    #what .title{
        font-size:28px;
    }
}
#what .container img{
    max-width:1200px;
    height:auto;
}

#whaton_02_over,
#whaton_01_over{
    display:none;
}

#what .block_1{
    display:inline-block;
    position:relative;
    float:left;
    width:1180px;
    height:760px;
    margin-bottom:30px;

    margin-left:10px;
    margin-right:10px;
}



#what .block_2{
    display:inline-block;
    position:relative;
    float:left;
    width:100%;
    height:450px;
    margin-bottom:20px;

    /*margin-left:15px;*/
    /*margin-right:15px;*/

    text-align:left;
    background-color:#FFF;
}

#what .block_3{
    display:none;
    position:relative;
    float:left;
    width:370px;
    height:400px;
    margin-bottom:30px;

    margin-left:15px;
    margin-right:15px;

    text-align:left;
    background-color:#FFF;
}

#what .block_1 img,
#what .block_2 img,
#what .block_3 img{
    width:100%;
    height:auto;

}


#what .extra{
    text-align:center;
    color:#FFF;
    position:absolute;
    width:160px;
    background-color:#999;
    letter-spacing:0px;
    z-index:10;
}
#what .cover{
    position:absolute;
    width:100%;
    height:100%;
    color:#FFF;

    display:none;
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */

    font-size:18px;
    letter-spacing:0;
    text-align:left;
    z-index:300;

}

#what .cover .content{
    display:inline-block;

    text-align:left;
    margin:25px 30px 25px 30px;
}

#what .cover .reg{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    margin:0px 0 30px 15px;
    border:2px solid #FFF;
    border-radius:20px;
    padding:5px 20px 5px 20px;
}

#what .cover .details{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    margin:0px 0 30px 30px;
    border:2px solid #FFF;
    border-radius:20px;
    padding:5px 20px 5px 20px;
}

.va_bg{
    background-color: #FF0F3C !important;
}

.fma_bg{
    background-color: #FF5100 !important;
}

.pa_bg{
    background-color: #FF9700 !important;
}

.caa_bg{
    background-color: #00C85A !important;
}

.pa_bg{
    background-color: #00C7F4 !important;
}

.ae_bg{
    background-color: #452DA2 !important;
}

.sp_bg{
    color: #474747 !important;
}


.va_color{
    color: #FF0F3C !important;
}

.fma_color{
    color: #FF5100 !important;
}

.pa_color{
    color: #FF9700 !important;
}

.caa_color{
    color: #00C85A !important;
}

.pa_color{
    color: #00C7F4 !important;
}

.ae_color{
    color: #452DA2 !important;
}

.sp_color{
    color: #474747 !important;
}


#what .cover.c00{
    background-color:#F05467;
}

#what .cover.c01{
    background-color:#00C85A;
}

#what .cover.c02{
    background-color:#E58AAD;
}

#what .cover.c03{
    background-color:#4BC1A1;
}

#what .cover.c04{
    background-color:#5BC0DF;
}

#what .cover.c05{
    background-color:#452DA2;
}

#what .cover.c06{
    background-color:#AEA06A;
}

#slider_content{
    position: relative;
    overflow:scroll;
    width:100%;
}

#slider_content .my_content{
    float:left;
    width:100%;
}



#what .bgImg{
    width: 100%;
    /*height: 230px;*/
    /*height: 350px;*/
    padding-top: 56.25%;

    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index:-1;
}

#what .block_2 .bgImg{
    height: 300px;
}

#what .block_3 .bgImg{
    height: 230px;
}


#what .cat00{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#F05467;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat01{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#FF8E28;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat02{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#E58AAD;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat03{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#4BC1A1;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat04{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#5BC0DF;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat05{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#8167CB;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .cat06{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    display:inline-block;
    color:#AEA06A;
    width:100%;
    font-size:18px;
    margin-top:5px;
}

#what .t{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size:20px;
    line-height:28px;
    display:block;
    width:100%;
    font-weight:bold;
    letter-spacing:0px;
}

#what .d{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:26px;
    display:block;
    width:100%;
    color:#666666;
    letter-spacing:0px;
}

#what .l{
    font-family:"gothic-compressed", "Proxima Nova Reg", "MHei", "STHeiti", "微軟正黑體", "Microsoft JhengHei", Arial, Helvetica, sans-serif;
    font-size:16px;
    line-height:26px;
    display:block;
    width:100%;
    color:#999999;
    letter-spacing:0px;
    /*white-space:nowrap;*/
}







#category{
    width:100%;
    text-align:center;
    display:none;
}


#category .container{
    display:inline-block;
    margin-top:70px;
    margin-bottom:70px;
    width:1200px;
    height:130px;

}

#category .container .cat{
    float:left;

    width:130px;
    height:130px;
    background-color:#FFF;
    margin-right:45px;
    font-size:16px;
    font-weight:bold;

}
#category .container .cat_img{
    position:absolute;
    margin-left:35px;
    margin-top:20px;
}

#category .container .cat00 .cat_in{
    margin-top:50px;
}
#category .container .cat01 .cat_in{
    margin-top:40px;
}
#category .container .cat02 .cat_in{
    margin-top:40px;
}
#category .container .cat03 .cat_in{
    margin-top:30px;
}
#category .container .cat04 .cat_in{
    margin-top:50px;
}
#category .container .cat05 .cat_in{
    margin-top:40px;
}
#category .container .cat06 .cat_in{
    margin-top:40px;
}


#category .container .cat00{
    display:inline-block;
    border:4px solid #F05467;
    color:#F05467;
    width:100%;
    height:100%;

    border-radius: 100%;
}



/*
#category .container .cat00:hover{
	color:#FFFFFF;
	background-color:#F05467;
}
*/


#category .container .cat01{
    display:inline-block;
    border:4px solid #FF8E28;
    color:#FF8E28;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat01:hover{
	color:#FFFFFF;
	background-color:#FF8E28;
}
*/

#category .container .cat02{
    display:inline-block;
    border:4px solid #E58AAD;
    color:#E58AAD;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat02:hover{
	color:#FFFFFF;
	background-color:#E58AAD;
}
*/

#category .container .cat03{
    display:inline-block;
    border:4px solid #4BC1A1;
    color:#4BC1A1;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat03:hover{
	color:#FFFFFF;
	background-color:#4BC1A1;
}
*/

#category .container .cat04{
    display:inline-block;
    border:4px solid #5BC0DF;
    color:#5BC0DF;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat04:hover{
	color:#FFFFFF;
	background-color:#5BC0DF;
}
*/

#category .container .cat05{
    display:inline-block;
    border:4px solid #8167CB;
    color:#8167CB;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat05:hover{
	color:#FFFFFF;
	background-color:#8167CB;
}
*/

#category .container .cat06{
    display:inline-block;
    border:4px solid #AEA06A;
    color:#AEA06A;
    width:100%;
    height:100%;

    border-radius: 100%;
}

/*
#category .container .cat06:hover{
	color:#FFFFFF;
	background-color:#AEA06A;
}
*/



#footMenu{
    position:relative;
    width:100%;
    text-align:center;
    border-top: 1px solid #EEEEEE;
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#footSub{
    position:relative;
    width:100%;
    text-align:center;
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}

#topMenu{
    width:100%;
    text-align:center;

    display:none;
    height:0px;
    position:relative;
    opacity: 0.0;
    filter: alpha(opacity=0); /* For IE8 and earlier */
}


ul.topnav {
    display:inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;

}

ul.topnav li {
    float: left;
    height:20px;
}




#footSub div.topnav {
    display:inline-block;
    margin-top:45px;
    margin-bottom:50px;
    /*width:1200px;*/
    /*height:90px;*/
    font-size:13px;
}

#footSub div.topnav b{
    font-size:14px;
}

#footSub div.topnav .txt_00 a,
#footSub div.topnav .txt_01 a,
#footSub div.topnav .txt_02 a{
    color:#333333;
}

#footSub div.topnav .head{
    width:100%;
    display:inline-block;
    margin-bottom:6px;
}

#footSub div.topnav .txt_00,
#footSub div.topnav .txt_01,
#footSub div.topnav .txt_02{
    margin-right: 50px;
    padding-bottom: 20px;
}

#footSub div.topnav .txt_00{
    /*width:100%;*/
}

#footSub div.topnav .txt_01{
    /*width:280px;*/
}

#footSub div.topnav .txt_02{
    width:180px;
}


#footSub div.topnav div{
    text-align:left;
}


#footSub div .txt_00 img,
#footSub div .txt_01 img,
#footSub div .txt_02 img{
    display:inline-block;
    vertical-align:bottom;
    margin-right:6px;
}



#footSub div .som{
    margin-left:20px;
    float: right;
}







#footMenu ul.topnav {
    display:inline-block;
    /*width:1200px;*/
    height:35px;
    margin-top:32px;
    margin-bottom:60px;
    font-size:10px;
    letter-spacing:0px;
    color:#999999;
}



#footMenu ul .txt{
    margin-top:6px;
}

#footMenu ul li a{
    font-size:10px;
    letter-spacing:0px;
    color:#999999;

    text-align:center;
    padding-left:12px;
    padding-right:12px;
}



#footMenu .copySpace{
    width:40px;
}

#footMenu .lang{
    /*float:right;*/
    text-align: right;
    margin-top: 17px;
    padding-top: 15px;
    padding-bottom: 15px;
}


#footMenu select {
    border: 1px solid #DDDDDD;
    font-size:14px;
    height: 35px;
    width: 180px;
    color:#333333;
    padding-left:40px;
    padding-right:10px;

    background-image:url(../img/hkac/selectLang.png);
    background-position:10px 7px;
    background-repeat:no-repeat;
    background-size:18px 18px;
}





#menu ul.topnav{
    width:1230px;
    height:78px;
}

#topMenu ul.topnav {
    /*width:1200px;*/
    /*height:125px;*/
    margin-top:10px;
}




#topMenu ul.topnav li.logo{
    height:120px;
}

#topMenu ul.topnav li.topHeight {
    width:1126px;
    height:55px;
}

#topMenu ul.topnav li.topSpace {
    width:740px;
    height:16px;
}

#topMenu ul.topnav li.topTxt a{
    text-align:center;
    font-size:12px;
    padding-left:12px;
    padding-right:12px;
    height:16px;
    color:#878787;


}



#menu ul.topnav li.menuSpace{
    width:380px;
    margin-top:25px;
}
#menu ul.topnav li.menuTxt{
    margin-top:15px;
}
#menu ul.topnav li.menuTxt a{
    padding-left:13px;
    padding-right:13px;
    color:#333333;
    font-size:25px;
    letter-spacing:0px;
}

#menu ul.topnav li.menuTxt a.event{
    font-size:18px;
    color:#888888;
}

#menu ul.topnav li.bottomSpace{
    width:165px;
    margin-top:25px;
}

#menu ul.topnav li.bottomTxt{
    margin-top:25px;
    display:none;
}






#topMenu ul.topnav li.bottomSpace{
    width:400px;
    margin-top:20px;
}

#topMenu ul.topnav li.bottomTxt{
    margin-top:20px;
}


#menu ul.topnav li.bottomTxt a,
#topMenu ul.topnav li.bottomTxt a{
    padding-left:13px;
    padding-right:13px;
    color:#333333;
    font-size:15px;
    letter-spacing:0px;
}




#slider {
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    display:none;
    position:relative;
    overflow: hidden;
}


#slider *{
    height: auto !important;
}



#video_01{
    display:none;
}

#slider_img {

    top: 0px;
    left: 0px;
    width: 100%;
    min-height: 100%;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -1;

    background-image:url(../img/hkac/hkac_over2.jpg);

    display:none;

}



#slider_cover{
    z-index: 90;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height:auto;

    background-color:#000000;
    opacity: 0.3;
    filter: alpha(opacity=30); /* For IE8 and earlier */
}

#slider #tag_00{
    z-index: 91;
    width: 80%;
    position: absolute;
    /*text-align:center;*/
    /*font-size:80px;*/
    color:#FFF;
    /*top:50%;*/
    left: 10%;
    bottom:25%;
    /*top:70%;*/
    text-align: left;
    text-shadow:1px 1px 4px #333333;
}

#slider #tag_01{
    z-index: 92;
    width: 80%;
    position: absolute;
    /*text-align:center;*/
    /*font-size:30px;*/
    color:#FFF;
    /*top:62%;*/
    text-align: left;
    left: 10%;
    bottom:35%;
    text-shadow:1px 1px 4px #333333;
}



#slider_arrow{
    position: absolute;
    z-index: 100;
    left:50%;
    margin-left: -21.5px;
    bottom: 3%;
    display:none;
    cursor: pointer;
}

#slider video{
    width: 100%;
}
#slider #tag_00{
    font-size: 32px;
}
#slider #tag_01{
    font-size: 22px;
}

@media (min-width: 768px) {
    #slider #tag_00{
    }
    #slider {
        height: calc(100vh - 320px);
    }
    #slider video{
        width: auto;
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%);
        min-width: 100%;
        min-height: 100%;
    }
}
@media (min-width: 992px) {

}
@media (min-width: 1200px) {

}



@media only screen and (min-width: 767px){
    /* Mobile */
    /*#slider{*/
    /*height:100% !important;*/
    /*}*/

    #slider_arrow{
        display: none;
    }

}

@media only screen and (min-width: 567px){
    /* Mobile */
    /*#slider{*/
    /*height:100% !important;*/
    /*}*/
    #slider_arrow{
        display: none;
    }
}

@media only screen and (max-width: 768px){
    #menu ul.topnav{
        width: 100%;
    }
}

@media only screen and (min-width: 768px){


    #slider_arrow{
        display: block;
    }

    #menu ul.topnav{
        width: 1230px;
    }
}


@media only screen and (min-width: 768px) and (max-width: 1230px) {
    /* Desktop */


    #menu ul.topnav,
    #category .container,
    #footMenu ul.topnav,
    #footSub div.topnav,
    #topMenu ul.topnav {
        width:100%;
    }

    #what .container{
        width:100%;
    }

    #what .container img{
        max-width:1000px;
        height:auto;
    }

    #category .container .cat{
        width:110px;
        height:130px;
        margin-right:36px;
    }


    #footSub div.topnav .txt_00,
    #footSub div.topnav .txt_01,
    #footSub div.topnav .txt_02{
        margin-right: 40px;
    }



    #footSub div .som{
        margin-left:9px;
    }


    #topMenu ul.topnav li.topHeight{
        width:926px;
    }

    #topMenu ul.topnav li.bottomSpace{
        width:200px;
    }

    #topMenu ul.topnav li.topSpace {
        width:490px;
    }



    #menu ul.topnav li.menuSpace{
        width:182px;
    }


    #what .block_2{
        width:100%;
    }

    #what .block_2 .bgImg{
        height: 246px;
    }

}






.pace {
    -webkit-pointer-events: none;
    pointer-events: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.pace-inactive {
    display: none;
}

.pace .pace-progress {
    background: #333333;
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 100%;
    width: 100%;
    height: 2px;
}
/*===========================================*/
/*::::: END ::::::::::: tomyccc TEMP :::::::::::*/
/*===========================================*/

















/*===========================================*/
/*--------------- Slider --------------------*/
/*===========================================*/
.slider-wrapper {
    width: 620px;
    margin: 0px auto;
}

.theme-default #slider {
    margin:0px auto 0 auto;
}

/*===========================================*/
/*===========================================*/





/*====================*/
/*=== Other Styles ===*/
/*====================*/
.clear {
    clear:both;
}








/* ======================================================== */
/* ====================== Retina ========================== */
/* ======================================================== */

@media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {



}


.content{
    font-size: 14px;
}

.noPadding{
    padding:0 !important;
}

ul.topnav.blockitem{
    overflow:visible;
}

ul.topnav.blockitem li{
    float: none;

}

.joinus_input{
    width: 70%;
    height:51px;
    border-radius: 50px;
    border: 0;
    padding:5px;
    padding-left: 35px;
}

.logo{
    padding-left: 15px;
}

.mobile_logo img{
    left: 50%;
    position: absolute;
    margin-left: -37.5px;
}

#slider_cover{
    background-color: white;
}



#what .cal{
    width: 550px;
    height: 627px;
    position: absolute;
    top: 150px;
    right: -550px;
    /*right: 0px;*/
    background-color: white;
    /*box-shadow: 1px 0px 5px #888888;*/
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    transition: right 0.4s;
    z-index: 999;
}

#what .calBtn{
    transform:rotate(90deg);
    width: 120px;
    height: 60px;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;
    position: absolute;
    top:29px;
    left:-90px;
    line-height: 60px;
    text-align: center;
    color: #333;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    cursor: pointer;

    /*display:none;*/
}
#what .month{
    /*background-color: red;*/
    margin: 0 auto;
    width: 80%;
    padding: 20px 20px 10px;
    text-align: center;
    font-size: 22px;
    border-bottom: 3px solid #d2d2d2;
    position: relative;
}
#what .date{
    width: 80%;
    height: 280px;
    /*background-color: red;*/
    margin: 0 auto;
    /*padding: 20px;*/
    margin-top: 20px;
}
#what .events{
    width: 100%;
    height: 240px;
    background-color: #f2f2f2;
}

#what .events .event-item{
    width:100%;
    height: 100%;
    text-align: left;
    padding-left:60px;
    padding-right:60px;
    padding-top: 10px;
}

.owl-dots{
    /*margin-top: -55px;*/
    position: relative;
    height: 0;
    transform: translateY(-50px);
}

.owl-prev{
    position: relative;
}

.owl-prev{
    float: left;
    top: 85px;
    left: 10px;
    position: absolute;
    background-color: initial;
    color: #ccc;
}

.owl-next{
    float: right;
    top: 85px;
    right: 10px;
    position: absolute;
    background-color: initial;
    color: #ccc;
}

/*.owl-theme .owl-nav [class*=owl-]{*/
/*background: none;*/
/*}*/

#what .date ul{
    list-style-type: none;
    height: 40px;
    padding: 0;
    text-align: center;
    margin: 0px;
}
#what .date ul li{
    float: left;
    width: 14.2%;
    height: 40px;
    line-height: 40px;
    border-right: 1px solid #ccc;
    box-sizing: border-box;
}
#what .date ul li:not(.gray){
    cursor:pointer;
}
.gray{
    color: #ccc;
}

#cal-today.today{
    /*background: #FE6661;*/
    color:white;
    position: relative;
    /*z-index: 2;*/
    /*border-radius: 50%;*/
}

#cal-today.today::before{
    content: '';
    background-color: #FE6661;
    position: absolute;
    top:13%;
    left: 26%;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    z-index: -1;
}
#cal-today:not(.today){
    color:#FE6661;
}

.main_menu .topnav{
    /*width:100%;*/
}

#topMenu .topnav .bottomTxt{
    padding-left: 30px;
    padding-right: 30px;
}

.today_month{
    padding-right: 30px;
    padding-left: 30px;
}

.today_month_arrow{
    color: #b1b1b1;
    cursor: pointer;
}

.f12{
    font-size: 12px !important;
}

.details_btn{
    margin:0px 0 30px 0;
    background-color: #FE6661;
    border:2px solid #FE6661;
    border-radius:20px;
    padding: 0px 20px 0px 20px;
    margin-top: 10px;
    color:white;
    display: inline-block;

}

.reg_btn{
    margin:0px 0 30px 15px;
    background-color: #FE6661;
    border:2px solid #FE6661;
    border-radius:20px;
    margin-top: 10px;
    padding: 0px 20px 0px 20px;
    color:white;
    display: inline-block;
}

.mobile_menu_logo{
    text-align: center;
    margin-top: 15px;
}
.mobile_menu_logo img{
    width:150px;
    height:200px;
}
.mobile_menu_logo span{
    font-size: 36px;
    float: right;
    top:10%;
    right:10%;
    position: absolute;
    cursor: pointer;
}
.mobile_menu_logo span:hover{
    color:#ccc;
}
.mobile_menu_items{
    margin: 0 auto;
    margin-top: 40px;
    background-color: #f6f6f6;
    padding: 30px 0;
}
.mobile_menu_items ul{
    list-style: none;
    padding: 0;
    margin: 0;
    /*margin-top: 10px;*/
}
.mobile_menu_items ul li{
    margin: 0 auto;
    /*width: 380px;*/
    /*height: 60px;*/
    padding: 5px 0;
    text-align: center;
}
.mobile_menu_items ul li.leadingItems{
    padding-left:10px;
}

.mobile_menu_items ul li a{
    color:#777;
    font-size: 24px;
    line-height: 60px;
    text-decoration: none;
}
.mobile_menu_items ul li a:hover{
    color:#ccc;
}
.mobile_menu_items ul li ul li a{
    font-size:20px;
    line-height:40px;
}
.mobile-submenu{
    background-color: #e7e7e7;
    display: none;
}
.mobile_menu_items .expand-submenu{
    cursor:pointer;
    color: #777;
    font-size: 28px;
    display:inline-block;
    width:0;
}
.mobile_menu_items .expand-submenu:before{
    content:'＋';
    width:40px;
    text-align:center;
    display:inline-block;
}
.mobile_menu_items .expand-submenu.opened:before{
    content:'–';
}

.mobile_menu_items .mobile-menu-horizontal-list {
    text-align: center;
}
.mobile_menu_items .mobile-menu-horizontal-list li{
    display: inline-block;
}

/**************** common *****************/

.padding10 {
    padding: 10px;
}
.padding15 {
    padding: 15px;
}
.padding20 {
    padding: 20px;
}
.padding25 {
    padding: 25px;
}
.padding40 {
    padding: 40px;
}

.padding60 {
    padding: 60px;
}

.paddingBottom5 {
    padding-bottom: 5px;
}

.paddingBottom10 {
    padding-bottom: 10px;
}

.paddingBottom15 {
    padding-bottom: 15px;
}

.paddingBottom20 {
    padding-bottom: 20px;
}

.paddingBottom25 {
    padding-bottom: 25px;
}

.paddingBottom30 {
    padding-bottom: 30px;
}

.paddingBottom35 {
    padding-bottom: 35px;
}

.paddingBottom40 {
    padding-bottom: 40px;
}

.paddingTop10 {
    padding-top: 10px;
}

.paddingTop15 {
    padding-top: 15px;
}

.paddingTop20 {
    padding-top: 20px;
}

.paddingTop25 {
    padding-top: 25px;
}

.paddingTop30 {
    padding-top: 30px;
}

.paddingTop40 {
    padding-top: 40px;
}

.paddingLeft10 {
    padding-left: 10px;
}

.paddingLeft15 {
    padding-left: 15px;
}

.paddingLeft20 {
    padding-left: 20px;
}

.paddingLeft25 {
    padding-left: 25px;
}

.paddingLeft30 {
    padding-left: 30px;
}

.paddingLeft40 {
    padding-left: 40px;
}

.paddingRight10 {
    padding-right: 10px;
}

.paddingRight15 {
    padding-right: 15px;
}

.paddingRight20 {
    padding-right: 20px;
}

.paddingRight25 {
    padding-right: 25px;
}

.paddingRight30 {
    padding-right: 30px;
}

.paddingRight40 {
    padding-right: 40px;
}

.margin10 {
    margin: 10px;
}
.margin20 {
    margin: 20px;
}
.margin30 {
    margin: 30px;
}

.marginBottom10 {
    margin-bottom: 10px;
}

.marginBottom15 {
    margin-bottom: 15px;
}

.marginBottom20 {
    margin-bottom: 20px;
}

.marginBottom25 {
    margin-bottom: 25px;
}

.marginBottom30 {
    margin-bottom: 30px;
}

.marginBottom40 {
    margin-bottom: 40px;
}

.marginTop10 {
    margin-top: 10px;
}

.marginTop15 {
    margin-top: 15px;
}

.marginTop20 {
    margin-top: 20px;
}

.marginTop25 {
    margin-top: 25px;
}

.marginTop30 {
    margin-top: 30px;
}

.marginTop40 {
    margin-top: 40px;
}

.marginLeft10 {
    margin-left: 10px;
}

.marginLeft15 {
    margin-left: 15px;
}

.marginLeft20 {
    margin-left: 20px;
}

.marginLeft25 {
    margin-left: 25px;
}

.marginLeft30 {
    margin-left: 30px;
}

.marginLeft40 {
    margin-left: 40px;
}

.marginRight10 {
    margin-right: 10px;
}

.marginRight15 {
    margin-right: 15px;
}

.marginRight20 {
    margin-right: 20px;
}

.marginRight25 {
    margin-right: 25px;
}

.marginRight30 {
    margin-right: 30px;
}

.marginRight40 {
    margin-right: 40px;
}


/****************************************************************************/
.marginTop0{
    margin-top:0;
}
.marginBottom0{
    margin-bottom:0;
}
.marginLeft0{
    margin-left:0;
}
.marginRight0{
    margin-right:0;
}
.marginLeft5{
    margin-left:5px;
}
.marginRight5{
    margin-right:5px;
}
.marginLeft-15{
    margin-left:-15px;
}
.marginRight-15{
    margin-right:-15px;
}
.marginTop-10{
    margin-top:-10px;
}
.paddingLeft0{
    padding-left:0;
}
.paddingRight0{
    padding-right:0;
}
.paddingLeft5{
    padding-left:5px;
}
.paddingRight5{
    padding-right:5px;
}
.fill-container{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.vertical-middle{
    display: table;
    height:100%;
    width:100%;
}
.vertical-middle>div{
    display: table-cell;
    vertical-align: middle;
}
.nowrap{
    white-space: nowrap;
}

.uppercase{
    text-transform: uppercase;
}
.relative{
    position: relative;
}
.inline-block{
    display: inline-block;
}
.clickthrough{
    pointer-events: none;
}

.grey{
    color: #bababa;
}
.bgimage{
    background-color:#ececec;
    background-position: center;
    background-repeat: no-repeat;
    background-size:100%;
    background-size:cover;
    width:100%;
    padding-bottom:56.25%;
    position:relative;
}
.bgimage.contain{
    background-size:contain;
}
.bgimage:after{
    content:'';
    height:100%;
    width:100%;
    position: absolute;
    background-color:rgba(0,0,0,0);
    -webkit-transition: background-color 0.2s;
    -moz-transition: background-color 0.2s;
    -ms-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
    transition: background-color 0.2s;
}
a .bgimage:hover:after{
    background-color:rgba(0,0,0,0.3);
}

.paddingTop60{
    padding-top: 60px;
}