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

/* 
 *<a href="http://bmg.com.hk" target="_blank">Web Designed</a>  by  <a href="http://bmg.com.hk" target="_blank">Black Media Group</a>
 *
 * Author: Black Media Group
 * Author URI: www.bmg.com.hk
 * Date: 2017
 *
 *
*/
@import url("reset.css");
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
}

/*------general-------*/
html, body {
    font-size:12px;
/*    line-height:1.4;*/
    background:#fff;
    color:#282b30;
    font-family:'Oswald','微軟正黑體', 'Microsoft JhengHei', sans-serif !important;
    height: 100%;
    width:100%;
    margin: 0;
    padding: 0;
    /*overflow-x:hidden;*/
}
.mob { display: none; }
a {
    color:#666;
    text-decoration:none;
    transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
}
a:hover, a:focus {
    text-decoration:none;
    color:#666;
}

h1 {font-size:25px;}
h2 {font-size: 20px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h5 {font-size:15px;}
h6 {font-size:14px;}
p {font-size:16px;}
i {font-style:italic;}
.bold {font-weight:bold;}

#global-container {
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    background-repeat: repeat;
    padding: 30px 15px 70px;
    margin: 0 auto;
    text-align: center;
    color: #363636;
    border: 10px solid #ffc000;
}
img {
    max-width: 640px;
    width: 100%;
}
img.figure1 {
    max-width: 900px;
    width: 100%;
}
.wrap {
    max-width: 80%;
    margin:  0 auto;
}
h1 {
    margin: 30px 0 50px;
    font-weight: bold;
}
h1.latter { margin-top: 80px; }
h3 {
    margin: 30px 0 0 0;
    border-bottom: 2px solid #ffc000;
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 0;
}
ul {
    text-align: left;
    font-family:'Roboto','微軟正黑體', 'Microsoft JhengHei', sans-serif;
}
ul > li {
    border-bottom: 1px dashed #ccc;
    padding: 10px 0 5px;
}
ul > li >* {
    display: inline-block;
}
li .address {
    width: 80%;
}
.phone {
    float: right;
    margin-top: 4px;
}
.address > p {
    margin-bottom: 5px;
    line-height: 24px;
}
.address > p b {
    font-weight: 900;
}
.plogo { margin-top: 0;  max-width: 460px;}
.lang { position: absolute; top: 30px; right:20px; font-size: 18px; }
.lang a { padding: 5px 15px; border: 1px #999999 solid; border-radius: 15px; }
.address ul li b { font-weight: 900; }
.box { width:40%; height: 300px; border: #e1e1e1 1px solid; border-radius: 10px; display:inline-flex; align-items:center; justify-content:center; margin: 0px; font-size: 26px;  transition: all ease .5s; }
.box:hover { border: #ffc000 3px solid; }
.box.area { }
.logo { width:244px; height: 70px; margin: 0 auto; margin-bottom: 20px;}
sup { font-size: 12px!important; vertical-align: top!important}		
.mt100 {margin-top: 50px;}
ul.tab { margin: 0 auto; padding: 0; width: 100%; max-width: 80%;  margin-top: 19px; display: block; text-align: center;     border-bottom: 1px solid #ffc000;}
ul.tab  li { width: 30%;  display: inline-block; text-align: center; font-size: 16px; border-top:1px solid #ffc000;  border-left:1px solid #ffc000;  border-right:1px solid #ffc000; border-bottom-width: 0px; padding: 2px 0; margin: 0 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; vertical-align: middle;  }
ul.tab li a  { display: table; height: 100%; width: 100%; padding: 20px 0;  }
ul.tab li a>div { margin-top: 0px; height: 100%; display: table-cell; vertical-align: middle; }
ul.tab li.active  {background-color:#ffc000;  }
ul.tab li.active a {  color: white; font-weight: 900 }
h1.mB10 { margin: 30px 0 20px 0!important; }
hr { width: 80%;  margin-top: 50px;  margin-bottom: 50px; }
table { font-size: 16px; line-height: 26px; width: 600px; margin: 0 auto; margin-bottom: 50px; }
th {width: 25%;}
td {width: 75%; text-align: left; }
@media screen and (max-width: 1280px) {
    li .address {
    width: 75%;
}
}
@media screen and (max-width: 980px) {
    ul.tab { max-width: 100%; }
    .wrap { max-width: 95%; }
    .box { width : 48%; }
}
@media screen and (max-width: 800px) {
    h1.latter { margin-top: 65px; }
.phone { float: none; margin-top: 10px; font-weight: 700;}
ul > li >* {
    display: block;
}
	.box { width:100%; height: 200px; margin: 0; margin-bottom: 15px; }
    .wrap { max-width: 100%; }
}
@media (max-width: 768px) {
    .dk {display: none; }
    .mob { display: block; }
    .plogo{ margin-top: 50px;}
					table { width: 100%}
					ul.tab { width:100%}
					ul.tab li a { margin: 0; min-height: 50px; padding:0; vertical-align: middle}
					ul.tab li  a span { display:block; }
					ul.tab li  a>div { margin-top: 0px; }
    .address p { line-height: 24px; }
        li .address { width: 100%; }
}