@charset "utf-8";

a, a:focus, a:hover, a:active, 
button, button:focus, button:hover, button:active
{
	outline:none;
}

/*** Works on common browsers ***/
::selection 
{
	background-color: #F00;
}

/*** Mozilla based browsers ***/
::-moz-selection 
{
	background-color: #F00;
}

/***For Other Browsers ***/
::-o-selection 
{
	background-color: #F00;
}

::-ms-selection 
{
	background-color: #F00;
}

/*** For Webkit ***/
::-webkit-selection 
{
	background-color: #F00;
}

.mainbox
{
	padding: 20px 0;
}

.link
{
	text-decoration: underline;
}

.language-list
{
	margin-left: 0;
	margin-right: 0;
}

.gr-topnav
{
	border-radius: 0;
	border: none;
	border-bottom: 1px solid #F00;
	box-shadow: 0 1px 3px #900;
	font-family: 'DINPro-Regular', Arial, Helvetica, sans-serif;
	text-transform: uppercase; 
	background: #000;
	z-index: 100;
}

.gr-topnav-title
{
	font-size: 25px;
	margin: 15px 0;
}

.gr-topnav li 
{ 
	float: left; 
	padding: 0 15px; 
	margin: 0; 
	font-size: 1.1em; 
	font-weight: 100; 
}

.gr-topnav .navbar-toggle
{
	padding: 4px 8px;
	margin-top: 10px;
}

.gr-topnav .gaming-toggle
{
	background: #F00;
	border: 1px solid #A00;
}

.gr-topnav .gaming-toggle:focus,
.gr-topnav .gaming-toggle:hover
{
	background: #B00;
}

.navbar-inverse .navbar-brand { padding: 0 15px; }

.navbar-inverse .navbar-nav>li>a 
{
	color: #FFF;
}

.navbar-inverse .navbar-nav>li>a:hover
{
	color: #F00;
}

.index_logonbox2
{
	margin: 0;
}

.left-privacy h2
{
	font-size: 1em;
}

.left-privacy p
{
	font-size: .8em;
	line-height: initial;
}

/* Modal */
.modal-content 
{
	background: #111;
	border: 1px solid #444; 
}
.modal-header
{
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 #222;
}
.modal-footer
{
	border-top: 1px solid #222;
	box-shadow: 0 -1px 0 #000;
}

.modal-header .close
{
	color: #FFF;
	text-shadow: 0 1px 0 #000;
	opacity: .8;
}

.modal-backdrop.in
{
	opacity: .8;
}

.notice_brasil_content
{
	padding: 10px;
	margin: 10px 30px;
}

#captcha-img
{
	border-radius: 5px;
	border: 1px solid #333;
	margin-bottom: 10px;
}

#captcha-reflush:hover #captcha-img
{
	border: 1px solid #F00;
	box-shadow: 0 0 5px #F00;
}

#copyright
{
	padding: 10px;
	/*margin: 30px;*/
}

#copyright p
{
	font-size: 11pt;
	margin-bottom: 5px;
}

.sideNav
{
	font-weight: 100;
}

a.btn:hover, 
a.btn[href='']:hover, 
a.btn[href='#']:hover 
{ 
	color: inherit; 
	color: #FFF; 
}

a.btn:hover, 
a.btn:focus 
{ 
	color: #FFF; 
	text-decoration: none; 
}

.contentbox .graybox-img .row
{
	margin-left: 0;
	margin-right: 0;
}

.gr-global-notice
{
	background: #900;
	border: 0;
}

.mm-index-ul
{
	line-height: 180%;
}

.mm-index-ul i
{
	line-height: 140%;
}

/*.mainbox,
.graybox-img
.welcome_bar
{
	margin-left: 0;
	margin-right: 0;
}*/

a.btn.link-gaming
{
	color: #FFF;
}

a.btn.link-gaming:hover, 
a.btn.link-gaming:focus
{
	color: #F00;
	/*text-decoration: underline;*/
}

label.error,
div.error
{
	background: #F00;
	color: #FFF;
	padding: 4px 12px;
	margin: 10px 0;
	border-radius: 5px;
	font-weight: 100;
}

.gr-well
{
	background: #333;
	box-shadow: 1px 1px 10px #000 inside;
}

.well-gray
{
	background: #333;
	border: 1px solid #111;
	box-shadow: 1px 1px 10px #000 inside;
}

.list-group-item
{
	background: #111;
	border: 1px solid #000;
	padding: 15px 30px;
}

.ui-datepicker td .ui-state-hover
{
	color: #ffffff;
	background: #CD0000;
	background-color: #CD0000;
	background-repeat: repeat-x;
	background-image: -khtml-gradient(linear, left top, left bottom, from(#DB0404), to(#CD0000));
	background-image: -moz-linear-gradient(top, #DB0404, #CD0000);
	background-image: -ms-linear-gradient(top, #DB0404, #CD0000);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #DB0404), color-stop(100%, #CD0000));
	background-image: -webkit-linear-gradient(top, #DB0404, #CD0000);
	background-image: -o-linear-gradient(top, #DB0404, #CD0000);
	background-image: linear-gradient(top, #DB0404, #CD0000);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DB0404', endColorstr='#CD0000', GradientType=0);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border-color: #CD0000 #CD0000 #DB0404;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-khtml-border-radius: 4px;
	border-radius: 4px;
}

input[type="text"], input[type="password"], .ui-autocomplete-input, textarea, .uneditable-input
{
	border:1px solid #383838;
	color: #FFF;
	padding: 6px 12px;
}

label
{
	font-weight: 100;
}

.form-horizontal .radio, .form-horizontal .checkbox
{
	padding-left: 20px;
}

#gr-member-register .control-label
{
	padding-bottom: 10px;
}

#gr-member-register .form-gray-gox
{
	background: #333;
	border-radius: 5px;
	padding: 10px 15px 15px;
	border: 1px solid #383838;
}

.profile-item:hover,
.detail-item:hover,
.register-item:hover,
.review-item:hover,
.product-item:hover,
.question-item:hover,
.promotion-item:hover,
#gr-member-register .form-gray-gox:hover,
#gr-member-register .form-gray-gox:focus,
#gr-member-register .form-gray-gox:active
{
	border: 1px solid #F00;
	box-shadow: 0 0 5px #F00;
}

.graybox-light
{
	border: 0;
}

.event_info
{
	width: 100%;
}

/* 設定變型時間時曲線 */
.eventbox>img
{
	-webkit-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
}
/* 設定變形角度及大小 */
.eventbox:hover>img
{
	-ms-transform: rotate(10deg) scale(1.2, 1.2); /* IE 9 */
	-webkit-transform: rotate(10deg) scale(1.2, 1.2); /* Chrome, Safari, Opera */
	transform: rotate(10deg) scale(1.2, 1.2);
}

.eventbox .bu-date, .eventbox .event_info
{
	border-bottom-left-radius: 7px;
}

.bu-date .bu
{
	font-size: 20px;
}

.detail-item, .detail-support,
.detail-item, .detail-invoice
{
	margin-left: 15px;
	margin-right: 15px;
}


{
	margin-left: 0;
	margin-right: 0;
}

.profile-item,
.detail-item,
.register-item
{
	border: 1px solid #000;
	margin-bottom: 5px;
	border-radius: 8px;
	background: #000;
}

.profile-item .item-head,
.detail-item .item-head,
.register-item .item-head
{
	border-right: 1px solid #222;
	padding: 10px 15px;
	border-top-left-radius: 5px;
	border-bottom-left-radius: 5px;
	text-align: right;
	color: #999;
	background: #111;
}

.profile-item:hover .item-head,
.detail-item:hover .item-head,
.register-item:hover .item-head,
.review-item:hover,
.product-item:hover,
.product-item.active,
.question-item:hover,
.promotion-item:hover,
.warranty-item:hover,
.booking-item:hover
{
	background-color: #900;
	background-image: -khtml-gradient(linear, left left, left bottom, from(#F00), to(#900));
	background-image: -moz-linear-gradient(left, #F00, #900);
	background-image: -ms-linear-gradient(left, #F00, #900);
	background-image: -webkit-gradient(linear, left left, left bottom, color-stop(0%, #F00), color-stop(100%, #900));
	background-image: -webkit-linear-gradient(left, #F00, #900);
	background-image: -o-linear-gradient(left, #F00, #900);
	background-image: linear-gradient(left, #F00, #900);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#990000', GradientType=1);
	color:#FFF;
}

.profile-item:hover .item-head,
.detail-item:hover .item-head,
.register-item:hover .item-head
{
	border-right: 1px solid #000;	
}

.register-item .item-head
{
	margin-bottom: 0;
}

.profile-item .item-body,
.detail-item .item-body
{
	padding: 10px 15px;
}

.register-item .item-body
{
	padding: 10px 15px;
}

.register-item .help-block
{
	color: #FFF;
}

.sub-survey label
{
	padding-left: 20px;
}

.register-item .item-body .radio input[type=radio], 
.register-item .item-body .radio-inline input[type=radio], 
.register-item .item-body .checkbox input[type=checkbox], 
.register-item .item-body .checkbox-inline input[type=checkbox]
{
	/*margin-left: 0;*/
}

.detail-support .col-sm-4
{
	padding: 5px;
}

.line
{
	border-top: 1px solid #333;
	box-shadow: 0 1px 0 #000;
	display: block;
}

.review-head,
.product-head,
.question-head,
.promotion-head,
.warranty-head,
.booking-head
{
	background: #111;
	padding: 10px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: #999;
}

.review-item,
.product-item,
.question-item,
.promotion-item,
.warranty-item,
.booking-item
{
	/*margin-bottom: 10px;*/
	background: #000;
	border-top: 1px solid #222;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
	border-bottom: 1px solid #111;
	padding: 10px;
}
.review-row .review-item:last-child,
.product-row .product-item:last-child,
.question-row .question-item:last-child,
.question-row .question-item:last-child,
.promotion-row .promotion-item:last-child,
.warranty-row .warranty-item:last-child,
.booking-row .booking-item:last-child
{
	border-bottom: 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.review-item .review-product,
.product-item .product-name,
.question-item .question-subject,
.promotion-item .product-name,
.warranty-item .product-name
{
	color: #F00;
}

.review-item:hover .review-product,
.product-item:hover .product-name,
.question-item:hover .question-subject,
.promotion-item:hover .product-name,
.warranty-item:hover .product-name
{
	color: #FFF;
}

.product-block,
.question-block,
.promotion-block
{ display: block; }

.contentbox .graybox-img .event_d_toppic
{
	margin-left: -30px;
	margin-right: -30px;
}

.contentbox .graybox-img .promotion-top { margin: -30px -30px -25px; }

.contentbox .graybox-img .promotion-top-sub .bu { font-size: 36px; }

.contentbox .graybox-img .promotion-top h1 { margin: 30px; }

.bottom-privacy { display: none; }

.index_logonbox { padding: 30px; }

.item-head .fa-asterisk { color: #F00;}

.gr-topnav .xs-language-btn
{
	display: none;
}

.Hotevent_list .Hotevent_list_link:hover,
.Hotevent_list .Hotevent_list_link:active,
.Hotevent_list .Hotevent_list_link:focus
{
	color:#FFF;
}

.modal-list 
{
	padding: 0 15px;
}

.modal-list .modal-item
{
	padding: 5px 15px;

}
.modal-list .modal-item .item-head,
.modal-list .modal-item .modal-item-head
{
	color: #999;
	font-style: italic;
	font-weight: bold;
}

.modal-list .modal-item input[type=file]
{
	height: auto;
	padding: 5px 10px;
}

.Hotevent_list
{
	padding: 0;

}

.Hotevent_list .eventbox
{
	cursor: default;
}

.Hotevent_list .promotion_block
{
	padding: 10px;
}

.Hotevent_list .promotion_block .promotion_link_icon_bg
{
	color: #F00;
}

.Hotevent_list .promotion_block .event_info
{
	transition: 0.3s ease;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	background: rgba(0,0,0,0);
	opacity: 0;

}

.Hotevent_list .promotion_block:hover .event_info
{
	background: rgba(0,0,0,.75);
	opacity: 1;

}
.Hotevent_list .promotion_title
{
	margin: 0;
}
.Hotevent_list .promotion_product_line
{
	margin: 10px 0;
}

.Hotevent_list .promotion_product_line
{
	font-size: 1.2em;
}

/* OCSS */
.ocss_question
{
	border: 1px solid #000;
	box-shadow: #000 0px 0px 5px;
	background: url(../images/gr/ocss_user_question.png) no-repeat #232323 0 0 ;
}

.ocss_reply_item
{
	border: 1px solid #000;
	box-shadow: #000 0px 0px 5px;
}

.ocss_reply_by_user
{
	background: url(../images/gr/ocss_user_reply.png) no-repeat #232323 0 0;
}

.ocss_reply_by_msi
{
	background: url(../images/gr/ocss_msi_reply.png) no-repeat #232323 right bottom;

}

.ocss_reply_item:hover
{
	border: 1px solid #F00;
	box-shadow: #F00 0px 0px 5px;
}

.question_attachment
{
	color: #999;
}

.question_attachment:hover,
.supportbox a:hover
{
	color: #FFF;
}

.panel-gaming .panel-default
{
	border: 1px solid #000;
	/*box-shadow: 0 1px 0 #F00;*/
}

.panel-gaming .panel-default>.panel-heading
{
	color: #FFF;
	background-color: #111;
	border-color: #333;
}

.panel-gaming .panel-default>.panel-heading h4
{
	line-height: 20px;
}

.label-gaming
{
	background: #F00;
	white-space: normal;
}

.label-gray
{
	background: #333;
}

.panel-gaming .panel-default .panel-heading .panel-title
{
	font-family: 'DINPro-Regular', Arial, Helvetica, sans-serif;
}
.panel-gaming .panel-default .panel-heading .panel-title > a
{
	line-height: 2em;
}

.panel-gaming .panel-default > .panel-heading+.panel-collapse > .panel-body
{
	border-top: 1px solid #F00;
	background: #000;
}

.panel-dark
{
	background-color: #000;
	color: #FFF;
}


/* Service */
.support_icon
{
	min-height: 250px;
}

.booking_block 
{
	padding: 15px;
}
.booking_block .btn
{
	width: 100%;
	padding: 20px;
}
.notice_block
{
	padding: 15px;
}

.bootstrap-select.btn-group .dropdown-menu
{
	background: #000;
	border: 1px solid #111;
}

.bootstrap-select .dropdown-menu>li>a
{
	color: #FFF;
}

.bootstrap-select .dropdown-menu>li>a:hover, .bootstrap-select .dropdown-menu>li>a:focus
{
	background: #F00;
	color: #FFF;
}

#booking_service_dialog .list-group-item
{
	color: #FFF;
	background: #000;
	border: 1px solid #111;
}

#booking_service_dialog .list-group-item:focus, 
#booking_service_dialog .list-group-item:hover,
#booking_service_dialog .list-group-item.on
{
	background: #F00;
}

#booking_pickup_confirm_dialog input,
#booking_pickup_confirm_dialog textarea,
#booking_service_confirm_dialog input,
#booking_service_confirm_dialog textarea,
#booking_service_user_dialog input,
#booking_service_user_dialog textarea
{
	width: 100%;
}

.review_promotion_link:hover .review_promotion_block
{
	border: 1px solid #F00;
}

.review_promotion_block
{
	background: #000;
	border: 1px solid #000;
	margin: 5px;
	min-height: 320px;
}

.shadowed 
{
	-webkit-filter: drop-shadow(0 5px 7px #900);
	filter: drop-shadow(0 5px 7px #900);
}

.modal-box
{
	margin: 15px;
	padding: 20px 10px;
	background: #222;
	border-radius: 5px;
}
.modal-box:hover
{
	color: #FFF;
	background: #A60004;
}

.gr_highlight
{
	color: #F00;
}
.gr_highlight_well_red
{
    background: #F00;
    color: #FFF;
    padding: 10px;
    border-radius: 5px;
}

.btn
{
	padding: 5px 12px;
}
.quick-login-button
{
	margin: -2%;
}
.style-btn
{
	color: #FFF;
	border: none;
    width: 46%;
    display: block;
    padding: 2%;
    margin: 2%;
    float: left;
    text-align: center;
    border-radius: 3px;
}
.style-btn:hover,.style-btn:active,.style-btn:visited
{
	color: #FFF;
}
.style-facebook
{
	background: #3B5998;
}
.style-google
{
	background: #DB4437;
}
.style-wechat
{
	background: #51C332;
}
.style-weibo
{
	background: #EB192D;
}
.style-qq
{
	background: #169BE6;
}
.style-vk
{
	background: #4a76a8;
}


.ml10 { margin-left: 10px; }
.mt10 { margin-top: 10px; }
.mt20 { margin-top: 20px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb50 { margin-bottom: 50px; }
.mb70 { margin-bottom: 70px; }

.pl20 { padding-left: 20px; }
.pr20 { padding-right: 20px; }

/* timeline */
    .timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #111;
        left: 50%;
        margin-left: -1.5px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 46%;
            float: left;
            border: 1px solid #333;
            border-radius: 5px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            background: #000;
        }
        .timeline li.gr-gray .timeline-heading h2 {
            color: #333;
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #333;
                border-right: 0 solid #333;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #000;
                border-right: 0 solid #000;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 16px;
            left: 50%;
            margin-left: -25px;
            background-color: #F00;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
        }

        .timeline li.gr-gray .timeline-badge {
			background: #333;
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}

.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline li.gr-gray .timeline-body {
	color: #FFF;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

    .timeline-body img
    {
    	border: 1px solid #999;
    	background: #444;
    	margin-top: 20px;
    	margin-bottom: 20px;
    }
    /*timeline-body img + img
    {
    	margin-top: 10px;
    }*/

.gr-gaming-error-block
{
	background: #B00;
	color: #FFF;
	border-radius: 5px;
	padding: 20px;
	border: 1px solid #F00;
}
	.gr-gaming-error-block h2
	{
		color: #FFF;
	}

/* Red Font Black Background */
.gr-gaming-error-block.gr-gaming-error-block-rfbb
{
	background:#000;
	color:#F00;
}

/* reward */
#reward .currency .points
{
	font-size: 3em;
	color: #FFF;
	display: block;
	float: left;
	font-style: italic;
	line-height: 1.2em;
}

#reward .currency .icon
{
	display: block;
    width: 58px;
    height: 58px;
    background-color: #F00;
    border-radius: 100%;
    border: 2px solid #666;
    background-image: url(../images/reward/currency_gray.png);
    background-repeat: no-repeat;
    background-position: 80% 5%;
    background-size: 150px 150px;
    margin-right: 10px;
    float: left;
}

#reward .currency:hover .icon
{
	border: 2px solid #F00;
	background-image: url(../images/reward/currency_red.png);
}

#reward .prizeBox-body { position: relative; }
#reward .pbox
{
	border: 1px solid #333;
	border-radius: 10px;
	margin: 10px;
	padding: 30px 10px 10px;
	min-height: 300px;
	height: 300px;
	overflow: hidden;
	background:url(../images/reward/boxbg.gif);
}
#reward .prizeBox-body.active .pbox{ border: 1px solid #F00 ;}
#reward .pbox { text-align: center; }
#reward .countBox,
#reward .potag
{
	display: block;
	background: #333;
	border-radius: 100%;
	position: absolute;
	text-align: center;
}
#reward .prizeBox-body.active .countBox,
#reward .prizeBox-body.active .potag
{ background: #F00; }

#reward .points { font-size: 1.5em; line-height: 1.2em; }

#reward .points_l { font-size: .5em; 	line-height: .5em; }
#reward .countBox
{
	width: 50px;
	height: 50px;
	top: -10px;
	left: 0;
}
#reward .potag
{
	width: 75px;
	height: 75px;
	bottom: -10px;
	right: 0;
}
#reward .countBox .points { padding-top: 5px; }
#reward .potag .points { padding-top: 15px; }

#reward a:hover, #reward a:focus{color: #FFF;}

#reward .product-item-info { padding-right: 10px; }
#reward .product-item-reason{ color: #999; margin: 5px 0 0; font-style: italic; }
#reward .product-item-date { color: #999; font-style: italic; }
#reward .prod-item-wiilget { color: #999; text-align: center; }
#reward .prod-item-points { color: #F00; text-align: center; }

#reward .nav-tabs>li.active>a, 
#reward .nav-tabs>li.active>a:hover, 
#reward .nav-tabs>li.active>a:focus
{
	color: #F00;
}

#reward .nav-tabs>li>a:hover, 
#reward .nav-tabs>li>a:focus
{
	color: #F00;
}

.pagination>li>a, 
.pagination>li>span
{
	color: #FFF;
	border: 1px solid #333;
	background: #111;
}

.pagination>.disabled>span, 
.pagination>.disabled>span:hover, 
.pagination>.disabled>span:focus, 
.pagination>.disabled>a, 
.pagination>.disabled>a:hover, 
.pagination>.disabled>a:focus
{
	color: #FFF;
	border: 1px solid #666;
	background: #555;
}

.pagination>li>a:hover, 
.pagination>li>span:hover, 
.pagination>li>a:focus, 
.pagination>li>span:focus
{
	background: #900;
	border: 1px solid #900;
}

.pagination>.active>a, 
.pagination>.active>span, 
.pagination>.active>a:hover, 
.pagination>.active>span:hover, 
.pagination>.active>a:focus, 
.pagination>.active>span:focus
{
	color: #FFF;
	background: #F00;
	border: 1px solid #F00;
}

.panel-gaming { border-color: #333 }
.panel-gaming>.panel-heading { color: #FFF; background-color: #222; border-color: #333; }
.panel-gaming>.panel-heading::before{
	content: "Q";
	background: #666;
	border-radius: 100%;
	display: block;
	width: 20px;
	height: 20px;
	font-size: 18px;
	padding: 0 3px;
	margin: 0;
	line-height: 20px;
	float: left;
	margin-right: 10px;
	text-align: center;
}
.panel-gaming>.panel-heading>.panel-title { font-size: 18px; padding-left: 30px; }
.panel-gaming>.panel-heading+.panel-collapse::before
{
	content: "A";
	background: #F00;
	border-radius: 100%;
	display: block;
	width: 20px;
	height: 20px;
	font-size: 18px;
	padding: 0 3px;
	line-height: 20px;
	float: left;
	margin-right: 10px;
	text-align: center;
	margin: 20px 0 0 15px;
}
.panel-gaming>.panel-heading+.panel-collapse>.panel-body { border-top-color: #333; background-color: #111; padding-left: 46px; word-wrap: break-word; word-break: break-all; }
.panel-gaming>.panel-heading .badge { color: #FFF; background-color: #222 }
.panel-gaming>.panel-footer+.panel-collapse>.panel-body { border-bottom-color: #333 }

.msi_global_notice
{
	color: #F00;
	font-size: 20px;
}

.product_type_item
{
	display: block;
	margin: 1px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,0);
}
.product_type_item:hover
{
	background: #900;
	color: #FFF;
	border: 1px solid #D00;
}

.product_type_item.selected .product_type_pic
{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}

.product_type_item .product_type_pic
{
	display: block;
	/*border: 1px solid #F00;*/
	width: 100%;
	height: 250px;
	background-repeat: no-repeat;
	background-position: 50%;
	background-size: 100%;
	position: relative;
	margin-bottom: 20px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.product_type_item .product_type_pic:hover
{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}
.product_type_item .product_type_name 
{
	overflow : hidden;
	text-overflow : ellipsis;
	white-space : nowrap;
	margin: 0;
	padding-bottom: 10px;
}

/* list-group-gr */
.list-group-gr .list-group-item
{
	background: #222;
	border: 1px solid #111;
	color: #EEE;
}

/* video */
.flex-video {
  position: relative;
  padding-top: 25px;
  padding-bottom: 67.5%;
  height: 0;
  margin-bottom: 16px;
  overflow: hidden;
}

.flex-video.widescreen { padding-bottom: 57.25%; }
.flex-video.vimeo { padding-top: 0; }

.flex-video iframe,
.flex-video object,
.flex-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.eac-sugg {
  color: #F00;
}

.footer .ip_address
{
	color: #000;
}

/* Apply CSS to iOS affected versions only */
body.iosBugFixCaret.modal-open { position: fixed; }

@media only screen and (max-device-width: 800px), only screen and (device-width: 1024px) and (device-height: 600px), only screen and (width: 1280px) and (orientation: landscape), only screen and (device-width: 800px), only screen and (max-width: 767px) {
  .flex-video { padding-top: 0; }
}

/* timeline */

.label-lg
{
	font-size: 20px;
}
/* how to identify */
#product_line_how_to_identify
{
	padding: 20px;
}
#product_line_how_to_identify h1,
#product_line_how_to_identify h2
{
	text-align: center;
}

#product_line_how_to_identify img
{
	margin: 0 auto;
}

.sample-img-block
{
	margin: 10px;
}

.font-weight-bold
{
	font-weight: bold;
}
.font-color-ffffff
{
	color: #FFF;
}

/* 小於 768 */
@media (max-width: 767px){
	
	.navbar .navbar-brand{ padding: 5px 10px; }
	.navbar .navbar-brand img { height: 40px; }

    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }


	.mainbox
	{
		margin: 10px;
		padding: 10px;
	}

	.navbar-collapse
	{
		border-top: none;
	}
	
	.gr-topnav .navbar-left li
	{
		border-bottom: 1px solid #222;
	}

	.gr-topnav .navbar-right li
	{
		border-bottom: 1px solid #222;
	}

	.gr-topnav .navbar-right li:last-child
	{
		border-bottom: none;
	}

	.gr-topnav .navbar-nav
	{
		margin: 0 -15px;
	}

	.gr-topnav .navbar-form
	{
		display: none;
	}

	.gr-topnav .xs-language-btn
	{
		display: block;
	}

	.gr-topnav
	{
		margin-bottom: 0px;
		/*background: #111;*/
	}

	.gr-topnav li
	{
		padding: 0;
		width: 100%;
		display: block;
		text-align: center;
	}
	
	.gr-topnav-title
	{
		font-size: 1.1em;
		margin: 10px 0 8px;
		color: #FFF !important;
	}

	.gr-global-notice
	{
		margin: 0;
		border-radius: 0;
		border: 0;
		background: #000;
		color: #F00;

	}

	#home-guide-book-btn,
	#home-notice-brasil-btn,
	#home-login-btn,
	#home-forget-password-btn,
	#home-register-product-btn
	{
		width: 100%
	}
	
	.sidebox
	{
		margin-top: -21px;
		background-color: #FF0000;
		margin-left: -35px;
		margin-right: -35px;
		background-image: -ms-linear-gradient(bottom, #900 0%, #F00 100%); 
		background-image: -moz-linear-gradient(bottom, #900 0%, #F00 100%); 
		background-image: -o-linear-gradient(bottom, #900 0%, #F00 100%); 
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #900), color-stop(1, #F00)); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#232323', endColorstr='#0c0c0c', GradientType=0 );
		border-bottom: 1px solid #F00;
		box-shadow: 0 1px 5px #700;
		margin-bottom: 20px;
	}

	.sideNav
	{
		padding: 0;
		margin: 0;
	}

	.sideNav li
	{
		margin-left: -15px;
		margin-right: -15px;
		border-bottom: 1px solid #900;
		box-shadow: 0 1px 0 #F00;
	}

	.sideNav li a
	{
		color: #FFF;
		text-align: center;
	}

	.sideNav li a:hover
	{
		color: #F00;
		background: #FFF;
		
	}

	.sideNav li.on a
	{
		color: #F00;
		background: #FFF;
	}
	
	/*.sidenav-toggle > i
	{
		transition: all .5s ease-in-out;
	}

	.sidenav-toggle:hover>i.fa-angle-double-right
	{
		-ms-transform: rotate(180deg);
		-webkit-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	.sidenav-toggle:hover>i.fa-angle-double-left
	{
		-ms-transform: rotate(-180deg);
		-webkit-transform: rotate(-180deg);
		transform: rotate(-180deg);
	}*/

	.sidenav-toggle,
	.sidenav-toggle:hover,
	.sidenav-toggle:link,
	.sidenav-toggle:visited,
	.sidenav-toggle:active,
	.sidenav-toggle:focus
	{
		color: #FFF;
		display: block;
		padding: 10px 0;
		text-align: center;
		font-size: 18px;
	}

	.Hotevent_list
	{
		padding: 25px 0;
	}

	.p15-5
	{
		padding: 0 0 15px;
	}
	.p25
	{
		padding: 25px;
	}
	.pl20 { padding-left: 0px; }
	.pr20 { padding-right: 0px; }

	
	/*#select-language-btn,*/
	.btn-xs-block
	{
		width: 100%;
		margin-top: 5px;
		margin-bottom: 5px;
	}

	.mm-index-ul
	{
		padding-left: 25px;
	}

	.form-horizontal
	{
		margin: 0 15px;
	}

	.form-group .fa-asterisk
	{
		margin-left: 0;
	}

	.profile-item .item-head,
	.detail-item .item-head,
	.register-item .item-head
	{
		border-right: 0px solid #222;
		text-align: left;
		border-radius: 5px;
		background: #222
	}

	.profile-item:hover .item-head,
	.detail-item:hover .item-head,
	.register-item:hover .item-head
	{
		border-right: 0px solid #222;
	}

	.left-privacy
	{
		display: none;
	}

	.bottom-privacy
	{
		display: block;
		margin: 30px 0;
	}

	.graybox 
	{
		margin-left: -15px;
		margin-right: -15px;
	}

	.contentbox .graybox-img
	{
		padding: 15px;
	}

	.modal-footer .btn+.btn
	{
		margin-left: 0;
	}

	.review_promotion_block
	{
		min-height: 0;
	}

	.quick-login-button
	{
		margin: 0;
	}	

	.style-btn
	{
		width: 100%;
		margin: 5px 0;
	}

	.Hotevent_list .promotion_block .event_info
	{
		background: rgba(0,0,0,.6);
		opacity: 1;
	}
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.navbar .navbar-brand{ padding: 8px 0px; }
	.navbar .navbar-brand img { height: 55px; margin-top: -5px; }

	.navbar-nav { float: left; margin: 0 }
	.navbar-nav>li { float: left }
	.navbar-nav>li>a 
	{
		color: #FFFFFF;
		padding: 22px 0;
	}
	.navbar-nav.navbar-right:last-child { margin-right: -15px  }

	.gr-topnav .navbar-form { margin: 14px 0; }

	.sidenav-toggle{ display: none; }

	.navbar-inverse .navbar-text
	{
		color:#FFF;
		font-size: 25px;
		margin: 15px 0;
	}

	.container-fluid { padding: 0 40px; }

	.review_promotion_block { min-height: 320px; }	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.navbar .navbar-brand{ padding: 0; }
	.navbar .navbar-brand img { height: 95px; margin-top: -15px; }

	.gr-topnav
	{
		padding: 20px 0;
	}
	
	.modal-xlg
	{
		width: 90%;
	}

	.container-fluid
	{
		padding: 0 50px;
	}

	.review_promotion_block
	{
		min-height: 240px;
	}

}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

	.navbar .navbar-brand { padding: 0 15px; }

	.navbar .navbar-brand img { height: 95px; margin-top: -15px; }

	.gr-topnav
	{
		padding: 20px 20px;
	}

	.container-fluid
	{
		padding: 0 90px;
	}

	.review_promotion_block
	{
		min-height: 280px;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1400px) { 


	.container-fluid
	{
		padding: 0 180px;
	}
	.gr-topnav
	{
		padding: 20px 110px;
	}

	.modal-xlg
	{
		width: 90%;
	}

	.review_promotion_block
	{
		min-height: 320px;
	}
}