@import url('//fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100;300;400;500;700;900&display=swap');

/* fix chrome css start */
* {
    -webkit-text-size-adjust: none;
}

input:focus, textarea:focus, select:focus {
    outline: none;
}
/* fix chrome css end */

/* fix input number start */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}
/* fix input number end */

/* style for select start */
select {
    /*-webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;*/
}
select option:checked,
select option:hover,
select optgroup option:hover {
    box-shadow: 0 0 10px 100px #FAEAE2 inset;
}

select:focus > option:checked,
select:focus > optgroup option:checked {
    background: #FAEAE2 !important;
}
/* style for select end */

/* hidden style start */
.hidden_style {
    width: 1px;
    height: 1px;
    overflow: hidden;
    -moz-opacity: 0;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.hidden_style.position {
    float: right;
}
/* hidden style end */

/* half_dim_style start */
.normal_dim_style {
    -moz-opacity: 1;
    opacity: 1;
    filter: Alpha(Opacity=100);
}

.half_dim_style {
    -moz-opacity: 0.5;
    opacity: 0.5;
    filter: Alpha(Opacity=50);
}

.transparent_style {
    -moz-opacity: 0;
    opacity: 0;
    filter: Alpha(Opacity=0);
}
/* half_dim_style end */

/* for slick start */
.slick-dotted.slick-slider {
    margin-bottom:0;
}
.slick-dots {
    bottom:15px;
    z-index:2;
}
.slick-dots li {
    /*margin: 0 4px;*/
    margin:0;
}
.slick-dots li button:before {
    font-size:40px;
    -moz-opacity: 1;
    opacity: 1;
    filter: Alpha(Opacity=100);
    color:#BCC1C6;
}
.slick-dots li.slick-active button:before {
    -moz-opacity: 1;
    opacity: 1;
    filter: Alpha(Opacity=100);
    color:#ffffff;
}

.slick-list {
    z-index:1;
}
.slick-prev, 
.slick-next {
    z-index:2;    
}
.slick-next, .slick-next:hover, .slick-next:focus {
    right:-36px;

    width:32px;
    height:32px;  
    background-image: url('../images/main/slick_right_arrow.png'); 
    background-size: 100%;
    background-position: center;
    background-repeat:no-repeat;
}
.slick-prev, .slick-prev:hover, .slick-prev:focus {
    left:-36px;

    width:32px;
    height:32px;  
    background-image: url('../images/main/slick_left_arrow.png'); 
    background-size: 100%;
    background-position: center;
    background-repeat:no-repeat;
}
.slick-next:before {
    content:'';
    -moz-opacity: 1;
    opacity: 1;
    filter: Alpha(Opacity=100);
}
.slick-prev:before {
    content:'';
    -moz-opacity: 1;
    opacity: 1;
    filter: Alpha(Opacity=100);
}
/* for slick end */

/* default styles start */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,span,a
{
    font-family: "Noto Sans HK", "sans-serif", "Arial";
    font-weight:400;  
}

body,div,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,span,a
{
    font-size: 14px;
    color: #312927;
}

html {
    width: 100%;
    height: 100%;
}
body 
{
    margin: 0px;
    width:100%;
    height:100%;
    -webkit-overflow-scrolling:touch;
    background-color: #ffffff;
}
a
{
    color:#312927;     
    text-decoration:underline;
    font-size:12px;    
}
a:hover
{
    color:#312927;   
    text-decoration:underline;
}
form 
{
    margin: 0px;
    padding: 0px;
}
img 
{
    border:0;
    margin:0;
    padding:0;
    vertical-align:middle;
}
table
{
    width:100%;
    height:100%;
}
.clear {
    clear:both;
}
.cursor_pointer
{
    cursor:pointer;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #cdcdcd !important;
    font-size: 14px !important;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #cdcdcd !important;
    font-size: 14px !important;
}
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
    color: #cdcdcd !important;
    font-size: 14px !important;
}
input::placeholder,
textarea::placeholder {
    color: #cdcdcd !important;
    font-size:14px !important;
}


.display_desktop {
    display: none !important;
}
.display_desktop.isflex {
    display: none !important;
}
.display_desktop.isInherit{
    display: none !important;
}
.display_responsive {
    display: inline-block !important;
}
.display_responsive.isflex {
    display: flex !important;
}
.display_responsive.isInherit {
    display: inherit !important;
}
/* default styles end */

.body_div {
    width: 100%;
    /*height: 100%;*/
    min-height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction:column;
}
.main_div {
    width: 100%;
    /*height: 100%;*/
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_div .main_icon {
    max-width:100%;
    /*width: 400px;*/
}
.main_div .home_div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	flex-direction:column;
}
.main_div .home_div .app_div {
	margin-top:50px;
	max-width:500px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main_div .home_div .app_div .link_div {
    width:50%;
	display: flex;
    align-items: center;
    justify-content: center;
}
.main_div .home_div .app_div .link_div img {
    width:80%;
	max-width:100%;
}
.bottom_div {
    width: calc(100% - 24px - 24px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding:24px;
}
.bottom_div .left_div {
    width: 50%;
    text-align:left;
    font-size:12px;
}
.bottom_div .left_div a {
    /*text-decoration:none;*/
    color:#312927;
}
.bottom_div .right_div {
    width: 50%;
    text-align:right;
    font-size:12px;
}
.bottom_div .right_div a {
    font-size:12px;
}

