/* ------------------------------------------------------------------
Project: Incanto
Version: 1.0
------------------------------------------------------------------ */

@import url("http://fonts.googleapis.com/css?family=Libre+Baskerville:400italic");
@import url("http://fonts.googleapis.com/css?family=Lato:400,700,400italic");
@import url("http://fonts.googleapis.com/earlyaccess/notosanstc.css");

/* ------------------------------------------------------------------
General Styles
------------------------------------------------------------------ */

body {
    background: #fff;
    overflow-x: hidden;
    -ms-overflow-style: scrollbar;
    /*font-family:  'Noto Sans TC', sans-serif;*/
    font-family: "Lato","Noto Sans TC", sans-serif;
    color: #222;
}


img {
    max-width: 100%;
    height: auto;
}

iframe {
    border: 0;
}

/* ------------------------------------------------------------------
Selection
------------------------------------------------------------------ */

::-moz-selection {
    background: #000;
    color: #fff;
}

::-webkit-selection {
    background: #000;
    color: #fff;
}

::selection {
    background: #000;
    color: #fff;
}

/* ------------------------------------------------------------------
Transition elsements
------------------------------------------------------------------- */

a,
.btn {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

/* ------------------------------------------------------------------
Reset box-shadow
------------------------------------------------------------------- */

.btn,
.well,
.panel,
.progress,
.form-control, .form-control:hover, .form-control:focus {
    -webkit-box-shadow: none;
       -moz-box-shadow: none;
        -ms-box-shadow: none;
         -o-box-shadow: none;
            box-shadow: none;
}

/* ------------------------------------------------------------------
Reset border-radius
------------------------------------------------------------------- */

.well, .label, .alert,
.modal-content {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

/* ------------------------------------------------------------------
Typography
------------------------------------------------------------------- */

a {
    color: rgba(17, 17, 17, 0.55);
}

a:hover, a:focus {
    text-decoration: none;
    color: #111;
    outline: 0;
}

.bg-dark a {
    color: #aaa;
}

.bg-dark a:hover,
.bg-dark a:focus {
    color: #fff;
}

.text-light {
    color: rgba(255, 255, 255, 0.7);
}

.text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5, .text-light h6,
.text-light .h1, .text-light .h2, .text-light .h3, .text-light .h4, .text-light .h5, .text-light .h6 {
    color: #fff;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.4;
    font-weight: 400;
    color: #111;
}

h1, .h1 {
    font-size: 28px;
}

h2, .h2 {
    font-size: 24px;
}

h3, .h3 {
    font-size: 18px;
}

h4, .h4 {
    font-size: 16px;
}

h5, .h5 {
    font-size: 14px;
}

h6, .h6 {
    font-size: 12px;
}

p, ol, ul, blockquote {
    margin: 0 0 20px;
}

blockquote {
    border-color: #f7f7f7;
}

blockquote.serif-quote {
    border: 0;
    padding-left: 0;
    padding-right: 0;
}

.font-alt {
    font-family: 'Noto Sans TC', sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.font-serif {
    font-family: "Libre Baskerville", "Times New Roman", sans-serif;
    letter-spacing: 1px;
    font-style: italic;
}

.rotate {
    text-shadow: none !important;
}

/* ------------------------------------------------------------------
Forms
------------------------------------------------------------------- */

.form-control {
    border: 2px solid #eee;
    height: 32px;
    letter-spacing: 1px;
    font-size: 10px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.form-control:focus {
    border-color: #111;
}

/* Form sizes */

.input-lg,
.form-horizontal .form-group-lg .form-control {
    height: 42px;
    font-size: 12px;
}

.input-sm, .form-horizontal .form-group-sm .form-control {
    height: 29px;
    font-size: 10px;
}

/* ------------------------------------------------------------------
Buttons
------------------------------------------------------------------- */

.btn {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    padding: 8px 37px;
    -webkit-border-radius: 0;
       -moz-border-radius: 0;
         -o-border-radius: 0;
            border-radius: 0;
}

.btn.focus, .btn:focus,
.btn.active.focus, .btn.active:focus,
.btn:active.focus, .btn:active:focus {
    background: none;
    outline: 0;
}

/* Button types */

.btn.btn-round {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.btn.btn-circle {
    -webkit-border-radius: 30px;
       -moz-border-radius: 30px;
         -o-border-radius: 30px;
            border-radius: 30px;
}

/* Button colors */

.btn.btn-w {
    background: rgba(255, 255, 255, 0.8);
    color: #111;
}

.btn.btn-w:hover, .btn.btn-w:focus {
    background: white;
    color: #111;
}

.btn.btn-border-w {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: #fff;
}

.btn.btn-border-w:hover, .btn.btn-border-w:focus {
    background: #fff;
    border-color: transparent;
    color: #111;
}

.btn.btn-g {
    background: #eee;
    color: #111;
}

.btn.btn-g:hover, .btn.btn-g:focus {
    background: rgba(238, 238, 238, 0.7);
    color: #111;
}

.btn.btn-d {
    background: rgba(17, 17, 17, 0.8);
    color: #fff;
}

.btn.btn-d:hover, .btn.btn-d:focus {
    background: #111111;
}

.btn.btn-border-d {
    background: transparent;
    border: 2px solid #111;
    color: #111;
}

.btn.btn-border-d:hover {
    background: #111;
    color: #fff;
}

.btn.btn-b {
    background: #111111;
    color: #fff;
}

.btn.btn-b:hover, .btn.btn-b:focus {
    background: rgba(17, 17, 17, 0.8);
}

/* Button sizes */

.btn.btn-lg {
    font-size: 12px;
    padding: 12px 45px;
}

.btn.btn-sm {
    letter-spacing: 1px;
    font-size: 10px;
    padding: 6px 25px;
}

.btn.btn-xs {
    letter-spacing: 0;
    font-size: 10px;
    padding: 4px 19px;
}

/* ------------------------------------------------------------------
Progress bars
------------------------------------------------------------------- */

.progress {
    overflow: visible;
    height: 4px;
}

.progress-title {
    margin-top: 0;
}

.progress-bar {
    position: relative;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
        -ms-border-radius: 4px;
         -o-border-radius: 4px;
            border-radius: 4px;
}

.progress-bar.pb-dark {
    background: #111;
}

.progress-bar span {
    position: absolute;
    padding: 4px 0px;
    display: block;
    top: -28px;
    right: 0;
    opacity: 0;
    line-height: 12px;
    font-size: 12px;
    color: #777;
}

/* ------------------------------------------------------------------
Tabs and Accordion
------------------------------------------------------------------- */

.nav-tabs {
    border-color: #eee;
}

.nav-tabs > li > a {
    font-size: 12px;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.nav-tabs >li.active > a,
.nav-tabs >li.active > a:hover,
.nav-tabs >li.active > a:focus {
    border: 1px solid #eee;
    border-bottom-color: transparent;
}

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background: #eee;
}

.tab-content {
    border: 1px solid #eee;
    border-top: 0;
    padding: 15px;
}

.tab-content :last-child {
    margin-bottom: 0;
}

/* Accordion */

.panel-group {
    border: 1px solid #1273b2;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
        -ms-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.panel-group .panel {
    border-radius: 0;
}

.panel {
    border: 0;
    border-bottom: 1px solid #1273b2;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-color: #1273b2;
    padding: 40px;
    font-size: 15px;
    background-color: #1273b2;
    color: #FFF;
}

.panel-heading {
    padding: 15px 20px;
}

.panel-default > .panel-heading {
    background: transparent;
    border-color: #1273b2;
}

.panel-heading a {
    position: relative;
    display: block;
    color: #1273b2;
}

.panel-heading a:after {
    position: absolute;
    content: "\f106";
    top: 50%;
    right: 0px;
    margin-top: -7px;
    font-family: "FontAwesome";
    font-size: 14px;
    line-height: 1;
    color: #1273b2;
}

.panel-heading a.collapsed:after {
    content: "\f107";
}

.panel-title {
    font-size: 16px;
    color: #1273b2;
}

.panel-group .panel + .panel {
    border-top: 0;
    margin-top: 0;
}

/* -------------------------------------------------------------------
Checkout table
------------------------------------------------------------------- */

.checkout-table {
    border: 1px solid #eee;
}

.checkout-table > tbody > tr > td,
.checkout-table > tbody > tr > th,
.checkout-table > tfoot > tr > td,
.checkout-table > tfoot > tr > th,
.checkout-table > thead > tr > td,
.checkout-table > thead > tr > th {
    border-top: 1px solid #eee;
    padding: 12px;
}

.checkout-table tr td,
.checkout-table tr th {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    border-left: 1px solid #eee;
}

.checkout-table tbody tr td:first-child,
.checkout-table tbody tr th:first-child {
    max-width: 36px;
}

.pr-remove {
    vertical-align: middle !important;
    text-align: center;
}


/* ------------------------------------------------------------------
Pagination
------------------------------------------------------------------- */

.pagination > li {
    display: inline-block;
}

.pagination > li > a,
.pagination > li > span {
    background: #f7f7f7;
    border: 0;
    height: 32px;
    width: 32px;
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 32px;
    font-size: 10px;
    color: #111;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background: #111;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    background: #f0f0f0;
    color: #111;
}

/* ------------------------------------------------------------------
Social links
------------------------------------------------------------------- */

.social-text-links,
.social-icon-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.socicon-round > li > a {
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.socicon-circle > li > a {
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
         -o-border-radius: 100%;
            border-radius: 100%;
}

.social-text-links > li {
    display: inline-block;
    margin: 0 10px 20px;
}

.social-icon-links > li {
    display: inline-block;
    margin: 0 5px 10px 0;
}

.social-icon-links > li > a {
    display: inline-block;
    background: #f7f7f7;
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 36px;
    font-size: 14px;
    color: #111;
}

.social-icon-links > li > a:hover {
    background: #f0f0f0;
}

/* ------------------------------------------------------------------
Content box
------------------------------------------------------------------- */

.content-box {
    text-align: center;
    margin: 25px 0;
}

#farglory-nineifo .content-box {
    text-align: center;
    margin:0;
}


.content-box-icon {
    font-size: 42px;
    color: #111;
}

.content-box-title {
    text-align: center;
    margin: 5px 0 18px;
}

.content-box-text{
    color:#000;
    letter-spacing:2px;
    font-weight:300;
    line-height:24px;
}

/* Alt content box */

.alt-content-box {
    position: relative;
    padding-left: 55px;
    margin: 25px 0;
}

.alt-content-box-icon {
    position: absolute;
    height: 38px;
    width: 38px;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 38px;
    font-size: 28px;
    color: #000;
}

.alt-content-box-title {
    margin: 0 0 18px;
}

/* ------------------------------------------------------------------
Gallery box
------------------------------------------------------------------- */

.gallery-box {
    text-align: center;
    margin: 35px 0;
}

.gallery-box-text {
    font-size: 12px;
}

.gallery-box .gallery {
    display: block;
    margin: 20px 0 0;
}

.gallery-box .gallery:after {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.gallery-box:hover .gallery:after {
    opacity: 1;
}

/* ------------------------------------------------------------------
Counters
------------------------------------------------------------------- */

.counter-item {
    text-align: center;
}

.counter-number {
    font-weight: 700;
    font-size: 22px;
}

/* ------------------------------------------------------------------
Team
------------------------------------------------------------------- */

.team-image {
    position: relative;
    overflow: hidden;
}

.team-image > img {
    width: 100%;
}

.team-image:after {
    position: absolute;
    background: transparent;
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.team-detail {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    z-index: 2;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.team-item:hover .team-detail {
    opacity: 1;
    -webkit-transform: translateY(0%);
       -moz-transform: translateY(0%);
            transform: translateY(0%);
}

.team-item:hover .team-image:after {
    background: rgba(17, 17, 17, 0.3);
}

.team-descr {
    text-align: center;
    padding-top: 20px;
}

.team-name {
    margin: 0 0 10px;
}

.team-role {
    font-size: 11px;
}

/* ------------------------------------------------------------------
Client logos
------------------------------------------------------------------- */

.client-item {
    opacity: 1;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.client-item:hover {
    opacity: 0.8;
}

.alt-client-item {
    position: relative;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0;
    text-align: center;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.alt-client-item a {
    display: block;
    width: 100%;
    padding: 50px 15px;
    opacity: 0.9;
}

.alt-client-item a:hover {
    background-color: rgba(0, 0, 0, 0.05);
    opacity: 1;
}

.alt-client-item:before {
    position: absolute;
    border-left: 1px solid #eee;
    height: 100%;
    content: "";
    top: 0;
    left: -1px;
}

.alt-client-item:after {
    position: absolute;
    border-bottom: 1px solid #eee;
    width: 100%;
    content: "";
    bottom: -1px;
    left: 0;
}

.quote-author {
    font-size: 12px;
    opacity: 0.75;
}

/* -------------------------------------------------------------------
tree---直的手機版
-------------------------------------------------------------------*/

.tree {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#FFF;
    border:0px solid #1273b2;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
}

.tree i{
    margin:2px 5px;
}

.tree li {
    list-style-type:none;
    margin:0;
    padding:10px 5px 0 5px;
    position:relative;
}

.tree li::before, .tree li::after {
    content:'';
    left:-20px;
    position:absolute;
    right:auto
}
.tree li::before {
    border-left:1px solid #999;
    bottom:50px;
    height:100%;
    top:0;
    width:1px
}
.tree li::after {
    border-top:1px solid #999;
    height:20px;
    top:25px;
    width:25px
}
.tree li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:3px 8px;
    text-decoration:none
}
.tree li.parent_li>span {
    cursor:pointer
}
.tree>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree li:last-child::before {
    height:25px
}
.tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:#eee;
    border:1px solid #94a0b4;
    color:#000
}


/* -------------------------------------------------------------------
tree--橫的桌機版
------------------------------------------------------------------- */
.tree-d {
    min-height:20px;
    padding:19px;
    margin-bottom:20px;
    background-color:#FFF;
    border:0px solid #FFF;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
}

.tree-d i{
    margin:2px 5px 2px 0px;
}

.tree-d ul,li {
    list-style-type:none;
    padding:0;
    margin:0;
}

.tree-d li {
    list-style-type:none;
    margin:0;
    padding:10px 2px 0 2px;
    position:relative
}


.tree-d li span {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    /*border:1px solid #999;*/
    border-radius:5px;
    display:inline-block;
    padding:3px 3px;
    text-decoration:none;
    width:100%;
    text-align:center;
}
.tree-d li.parent_li>span {
    cursor:pointer
}
.tree-d>ul>li::before, .tree>ul>li::after {
    border:0
}
.tree-d li:last-child::before {
    height:25px
}
.tree-d li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
    background:rgba(198,238,255,1.00);
    border:1px solid #94a0b4;
    color:#000
}


.branch-father{
    color:#FFF;
    background-color:#1273b2;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border:1px solid #999;
    border-radius:5px;
    display:inline-block;
    padding:10px 8px;
    text-decoration:none;
    width:100%;
    text-align:center;
    font-size:20px;
    letter-spacing:15px;
}

.branch-first{
    float:left;
}

.branch-first img{
    margin-bottom:5%;
}


.branch-title{
    color:rgba(255,255,255,1.00);
}

.branch-blue{
    background-color: #1273b2;
}

.branch-red{
    background-color: #df002c;
}

.branch-yellow{
    background-color: #c3a067;
}

.branch-child{
    font-size:10px;
    font-weight: 400;
    background-color:rgba(255,255,255,1.00);
}

.branch-child-blue{
    border: solid 1px #1273b2;
    color: #1273b2;
}

.branch-child-red{
    border: solid 1px #df002c;
    color: #df002c;
}

.branch-child-yellow{
    border: solid 1px #c3a067;
    color: #c3a067;
}


.branch-child-child{
    font-size:8px;
}


/* -------------------------------------------------------------------
tree--橫的桌機版
------------------------------------------------------------------- */

.org-child{
    float:left;
}


/* -------------------------------------------------------------------
index-box
------------------------------------------------------------------- */

#index-box-building{
    background-image:url(../images/index/index-building.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-life{
    background-image:url(../images/index/index-life.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-logistics{
    background-image:url(../images/index/index-logistics.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-leisure{
    background-image:url(../images/index/index-leisure.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-dome-d{
    background-image:url(../images/index/index-dome-d.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-commercial{
    background-image:url(../images/index/index-commercial.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-internet{
    background-image:url(../images/index/index-internet.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-charityable{
    background-image:url(../images/index/index-charityable.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-oversea{
    background-image:url(../images/index/index-oversea.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-dome-m{
    background-image:url(../images/index/index-dome.jpg);
    background-size:cover;
    background-position:center;
}

#index-box-dome{
    background-color:rgba(6,14,42,1.00);
    height:500px;
}

/* -------------------------------------------------------------------
Shope item(index)
------------------------------------------------------------------- */

.shop-item {
    text-align: center;
    position:relative;
}

.nine-name{
    position:absolute;
    top:3%;
    left:5%;
    color:rgba(255,255,255,1.00);
    z-index:5;
    text-align:left;
    text-shadow: 1px 1px 2px #333333;
}

.shop-item-title{
    font-size:15px;
    line-height:22px;
    letter-spacing:3px;
}


.shop-item-subtitle{
    font-size:14px;
    line-height:18px;
    letter-spacing:2px;
    /*font-weight:lighter;*/
    text-transform:uppercase;
}


.shop-item-image {
    position: relative;
    overflow: hidden;
}

.shop-item-image img {
    width: 100%;
    height:500px;
    opacity:0;
}

.shop-item-image-dome {
    width: 100%;
    height:500px;
}

#dome-pic{

    height:auto;
}

.shop-item-detail,
.shop-item-image:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.shop-item-image:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.shop-item-detail {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.shop-item-title {
    margin: 15px 0 5px;
}


.shop-item-detail i{
    margin-left:5%;
}

.shop-item-detail .btn{
    background-color:rgba(0,0,0,.60);
    font-size:16px;
}

.shop-item-detail .btn:hover{
    background-color:rgba(0,0,0,.60);
}

/* Shop item hover */

.shop-item:hover .shop-item-image:after {
    background: rgba(17, 17, 17, 0.6);
}

.shop-item:hover .shop-item-detail {
    opacity: 1;
    bottom: 50%;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);
}


/* -------------------------------------------------------------------
Shope item(index) -m
------------------------------------------------------------------- */

.shop-item-m {
    text-align: center;
    position:relative;
}

.nine-name-m{
    position:absolute;
    top:3%;
    left:5%;
    color:rgba(255,255,255,1.00);
    z-index:5;
    text-align:left;
    text-shadow: 1px 1px 2px #333333;
}

.shop-item-m .btn{
    padding:5px 30px;
    background:rgba(238,238,238,1.00);
}

.shop-item-title-m-btn{
    position:absolute;
    top:45%;
    left:5%;
    color:rgba(255,255,255,1.00);
    z-index:6;
    text-align:left;
}

.shop-item-title-m-btn i{
    margin-left:5%;
}


.shop-item-title-m{
    font-size:13px;
    line-height:18px;
    letter-spacing:2px;
}


.shop-item-subtitle-m{
    font-size:10px;
    line-height:16px;
    letter-spacing:1px;
    font-weight:300;
    text-transform:uppercase;
}


.shop-item-image-m {
    position: relative;
    overflow: hidden;
}

.shop-item-image-m img {
    width:100%;
    height:350px;
    opacity:0;
}

.shop-item-image-m-h-half img {
    width:100%;
    height:175px;
    opacity:0;
}

.shop-item-image-dome-m {
    width: 100%;
    height:500px;
}

#dome-pic-m{

    height:auto;
}

.shop-item-detail-m,
.shop-item-image-m:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.shop-item-image-m:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.shop-item-detail-m {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.shop-item-title-m {
    margin: 15px 0 5px;
}


/* -------------------------------------------------------------------
Shope item(activity)
------------------------------------------------------------------- */

.shop-item-activity {
    position:relative;
    /*border: solid 2px #d81978;*/
    margin-bottom: 30px;
    text-align: left;
    height: 400px;
}

.shop-item-title-activity i {
    margin-right: 2%;
    color: rgba(0, 115, 183, 0.9);
}

.shop-item-detail-activity i  {
    margin-right: 2%;
    color:white;
}


.shop-item-title-activity{
    font-size: 14px;
    margin: 0 0 15px;
    color: rgba(0, 115, 183, 0.9);
}


.shop-item-subtitle-activity{
    color: #d81978;
    font-weight:500;
    line-height:22px;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 15px;
}


.shop-item-image-activity {
    position: relative;
    overflow: hidden;
}

.shop-item-image-activity img {
    width: 100%;
}


.shop-item-detail-activity,
.shop-item-image-activity:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.shop-item-image-activity:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.shop-item-detail-activity {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.shop-item-title-activity {
    margin: 15px 0 5px;
}

.bear-love{
    width: 70px;
    height: 70px;
}


.shop-item-detail-activity i{
    margin-left:5%;
}

.shop-item-detail-activity .btn{
    font-size:16px;
}

.shop-item-detail-activity .btn:hover{
    background-color:rgba(0,0,0,.60);
}

/* Shop item hover */

.shop-item-activity:hover .shop-item-image-activity:after {
    background: rgba(240, 178, 0, 0.95);
}

.shop-item-activity:hover .shop-item-detail-activity {
    opacity: 1;
    bottom: 50%;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);
}


/* -------------------------------------------------------------------
Shope item(message)
------------------------------------------------------------------- */

.shop-item-message {
    position:relative;
    /*border: solid 2px #d81978;*/
    margin-bottom: 30px;
    text-align: left;
    height: 400px;
}

.shop-item-title-message i {
    margin-right: 2%;
    color: rgba(0, 115, 183, 0.9);
}

.shop-item-detail-message i  {
    margin-right: 2%;
    color:white;
}


.shop-item-title-message{
    font-size: 14px;
    margin: 0 0 15px;
    color: rgba(0, 115, 183, 0.9);
}


.shop-item-subtitle-message{
    color: #d81978;
    font-weight:500;
    line-height:22px;
    font-size: 17px;
    letter-spacing: 1px;
    margin-bottom: 15px;
    height: 30px;
}


.shop-item-image-message {
    position: relative;
    overflow: hidden;
}

.shop-item-image-message img {
    width: 100%;
}


.shop-item-detail-message,
.shop-item-image-message:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.shop-item-image-message:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
}

.shop-item-detail-message {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.shop-item-title-message {
    margin: 15px 0 5px;
}

.seemore{
    width: 70px;
    height: 70px;
}


.shop-item-detail-message i{
    margin-left:5%;
}

.shop-item-detail-message .btn{
    font-size:16px;
}

.shop-item-detail-message .btn:hover{
    background-color:rgba(0,0,0,.60);
}


/* Shop item hover */

.shop-item-message:hover .shop-item-image-message:after {
    background: rgba(0, 117, 201, 0.95);
}

.shop-item-message:hover .shop-item-detail-message {
    opacity: 1;
    bottom: 50%;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);
}



/* ------------------------------------------------------------------
tttttt
------------------------------------------------------------------- */

.top-banner-building{
    background-image:url(../images/nine/bg-building.jpg);
    height:500px;
    }

.top-banner-life{
    background-image:url(../images/nine/bg-life.jpg);
    height:500px;
    }

.top-banner-logistics{
    background-image:url(../images/nine/bg-logistics.jpg);
    height:500px;
    }

.top-banner-charityable{
    background-image:url(../images/nine/bg-charityable.jpg);
    height:500px;
    }

.top-banner-commercial{
    background-image:url(../images/nine/bg-commercial.jpg);
    height:500px;
    }

.top-banner-dome{
    background-image:url(../images/nine/bg-dome.jpg);
    height:500px;
    }

.top-banner-internet{
    background-image:url(../images/nine/bg-internet.jpg);
    height:500px;
    }

.top-banner-leisure{
    background-image:url(../images/nine/bg-leisure.jpg);
    height:500px;
    }

.top-banner-oversea{
    background-image:url(../images/nine/bg-oversea.jpg);
    height:500px;
    }

.top-banner-public{
    height:400px;
    }

.top-banner-stakeholder{
    height:400px;
    background: url(../images/bg-stakeholder.jpg);
    background-position:top left;
    }

.top-banner-publicgood{
    height:400px;
    background: url(../images/bg-publicgood.jpg);
    background-position:top left;
    }

.top-banner-education{
    height:400px;
    background: url(../images/bg-education.jpg);
    background-position:top left;
    }

.top-banner-sustainable{
    height:400px;
    background: url(../images/bg-sustainable.jpg);
    background-position:top left;
    }

.top-banner-message{
    height:400px;
    background: url(../images/bg-message.jpg);
    background-position:top left;
    }

.top-banner-news{
    height:400px;
    background: url(../images/bg-news.jpg);
    background-position:top left;
    }

.top-banner-activity{
    height:400px;
    background: url(../images/bg-activity.jpg);
    background-position:top left;
    background-size: cover;
    }

.top-banner-all{
    background:rgba(0,0,0,.5);
    }

 .top-banner-title{
     font-size:26px;
     color:#FFFFFF;
     letter-spacing:8px;
     text-align:left;
     font-weight:300;
     /*margin-top:8%;*/
     margin-top:30px;
     margin-bottom: 30px;
     line-height:40px;
     text-shadow: 2px 2px 2px #333333;
 }

.top-banner-subtitle{
     font-size:17px;
     color:#FFFFFF;
     letter-spacing:2px;
     margin:0 0 5% 0;
     text-align:left;
     font-weight:200;
     text-shadow: 2px 2px 2px #333333;
     text-transform:uppercase;
     }

.top-banner-content{
     font-size:14px;
     color:#FFFFFF;
     /*letter-spacing:3px;*/
     letter-spacing:2px;
     line-height:22px;
     margin:0 0 5% 0;
     text-align:justify;
     font-weight:100;
     text-shadow: 0px 1px 0px #333333;
     }

.content-title{
     font-size:20px;
     color:rgba(0,0,0,1.00);
     letter-spacing:3px;
     margin:0 0 5% 0;
     text-align:center;
     }

 .content-title:after {
    content: '';
    display: block;
    height: 3px;
    width: 5%;
    background-color: rgba(16,33,139,1.00);
    margin: 20px auto 20px;
   }

 .company{
     margin-bottom:8%;
    }

 .company a{
     text-decoration:none;
     }

 .company-title{
     font-size:16px;
     letter-spacing:3px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:justify;
     margin:5% 0 2% 0;
     font-weight:500;
     }

 .company-info{
     font-size:14px;
     letter-spacing:0px;
     color:rgba(0,0,0,1.00);
     line-height:20px;
     text-align:justify;
     /*text-align: left;*/
     font-weight: 300;
     }

 .company-btn{
     font-size:16px;
     letter-spacing:8px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:center;
     margin:5% 0 2% 0;
     font-weight:400;
     border:solid #10218b 2px;
     padding:4px;
     transition: 1s;
 }

.company-btn:hover{
     font-size:16px;
     letter-spacing:8px;
     background-color:rgba(16,33,139,1.00);
     color:rgba(255,255,255,1.00);
     line-height:20px;
     text-align:center;
     margin:5% 0 2% 0;
     font-weight:300;
     border:solid #10218b 2px;
     padding:4px;
 }

 .company-building{
     background-color:#e3eef6;
    }

.top-news{
     margin-bottom:8%;
    }

.top-news-date{
     font-size:13px;
     letter-spacing:3px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:justify;
     margin:5% 0 2% 0;
     font-weight:300;
}

.top-news-title{
     font-size:16px;
     letter-spacing:3px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:justify;
     font-weight:500;
}

.top-news-title:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: rgba(16,33,139,1.00);
    margin: 20px auto 20px;
   }

.top-news-info{
     font-size:13px;
     letter-spacing:2px;
     color:rgba(0,0,0,1.00);
     line-height:20px;
     text-align:justify;
     font-weight:300;
     }

 .top-news-btn{
     font-size:12px;
     letter-spacing:2px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:center;
     margin:30% 0 2% 0;
     font-weight:300;
     border:solid #10218b 2px;
     padding:4px;
 }

 .top-news-btn:hover{
     font-size:12px;
     letter-spacing:2px;
     background-color:rgba(16,33,139,1.00);
     color:rgba(255,255,255,1.00);
     line-height:20px;
     text-align:center;
     margin:30% 0 2% 0;
     font-weight:300;
     border:solid #10218b 2px;
     padding:4px;
 }


 .small-news{
     margin-bottom:8%;
    }


 .news-date{
     font-size:13px;
     letter-spacing:3px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:justify;
     margin:5% 0 2% 0;
     font-weight:300;
}

.news-pic{
    text-align:center;
}

.news-title{
     font-size:14px;
     letter-spacing:3px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:justify;
     font-weight:500;
}

.news-title:after {
    content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: rgba(16,33,139,1.00);
    margin:5px auto;
   }

.news-info{
     font-size:13px;
     letter-spacing:2px;
     color:rgba(0,0,0,1.00);
     line-height:16px;
     text-align:justify;
     font-weight:300;
     }

 .news-btn{
     font-size:6px;
     letter-spacing:2px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:center;
     margin:30% 0 2% 0;
     font-weight:200;
     border:solid #10218b 2px;
     padding:0px;
 }

 .news-btn:hover{
     background-color:rgba(16,33,139,1.00);
     color:rgba(255,255,255,1.00);
 }

 .more-news-btn{
     font-size:18px;
     letter-spacing:2px;
     color:rgba(16,33,139,1.00);
     line-height:20px;
     text-align:center;
     margin:15% 0 2% 0;
     font-weight:200;
     border:solid #10218b 2px;
     padding:10px;
 }

 .more-news-btn:hover{
     background-color:rgba(16,33,139,1.00);
     color:rgba(255,255,255,1.00);
 }

 .gray-line{
     content: '';
    display: block;
    height: 1px;
    width: 100%;
    background-color: rgba(0,0,0,.2);
    margin:5% auto;
}


.bg-w{
    background-color:rgba(255,255,255,1.00);
}


.navbar .nav.pull-center {
  float: none;
  margin: 0 auto;
  display:inline-block;
  *display:inline; /* ie7 fix */
  *zoom:1; /* hasLayout ie7 trigger */
  vertical-align: top;
}


#header li{
    /*border:solid 1px blue;*/
}


/* ------------------------------------------------------------------
svg
------------------------------------------------------------------- */

@font-face {
  font-family: 'icomoon';
  src:  url('../fonts/icomoon.eot?dyojiz');
  src:  url('../fonts/icomoon.eot?dyojiz#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?dyojiz') format('truetype'),
    url('../fonts/icomoon.woff?dyojiz') format('woff'),
    url('../fonts/icomoon.svg?dyojiz#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-heart-insurance:before {
  content: "\e901";
}
.icon-port:before {
  content: "\e902";
}
.icon-reception:before {
  content: "\e903";
}
.icon-stakeholder-building:before {
  content: "\e900";
}


/* -------------------------------------------------------------------
stakeholder
------------------------------------------------------------------- */

.stakeholder-item {
    text-align: center;
    position:relative;
    border:2px solid #1273b2;
    border-radius:20%;
}

.stakeholder-item-image {
    position: relative;
    overflow: hidden;
}

.stakeholder-item-image img {
    opacity:0;
}


.stakeholder-item-detail,
.stakeholder-item-image:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.stakeholder-item-image:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius:20%;
}

.stakeholder-item-detail {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    border-radius:20%;
}

.stakeholder-icon{
    font-size:70px;
    margin:50px 0 30px 0;
    color:#1273b2;
}

.stakeholder-item-title {
    margin: 35px 0 50px 0;
    font-size:16px;
    letter-spacing:3px;
    color:rgba(0,0,0,1.00);
}


.stakeholder-item-detail i{
    margin-left:5%;
}

.stakeholder-item-detail .btn{
    background-color:rgba(0,0,0,.60);
    font-size:16px;
}

.stakeholder-item-detail .btn:hover{
    background-color:rgba(0,0,0,.60);
}

/* stakeholder item hover */

.stakeholder-item:hover .stakeholder-item-image:after {
    background: rgba(17, 17, 17, .8);
    border-radius:19%;
}

.stakeholder-item:hover .stakeholder-item-detail {
    opacity: 1;
    bottom: 50%;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);

}

/* /stakeholder item hover */

.s-borderline {
    position: relative;
    background: #1273b2;
    display: block;
    height: 1px;
    width: 80%;
    margin:3% auto;
}

.s-borderline:before {
    position: absolute;
    background: #1273b2;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.s-borderline:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}

.s-borderline-red {
    position: relative;
    background: #DF002C;
    display: block;
    height: 1px;
    width: 80%;
    margin:3% auto;
}

.s-borderline-red:before {
    position: absolute;
    background: #DF002C;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.s-borderline-red:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}

.s-borderline-y {
    position: relative;
    background: #C3A067;
    display: block;
    height: 1px;
    width: 80%;
    margin:3% auto;
}

.s-borderline-y:before {
    position: absolute;
    background: #C3A067;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.s-borderline-y:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}


/* -------------------------------------------------------------------
stakeholder-new
------------------------------------------------------------------- */

.investors-bg{
    background-image:url(../images/investors-bg.png);
    background-size:cover;
    height:440px;
    position:relative;
}

.supplier-bg{
    background-image:url(../images/supplier-bg.png);
    background-size:cover;
    height:300px;
    position:relative;
}

.client-bg{
    background-image:url(../images/client-bg.png);
    background-size:cover;
    height:380px;
    position:relative;
    background-position: bottom;
}

.employee-bg{
    background-image:url(../images/employee-bg-md.png);
    background-size:cover;
    height:300px;
    position:relative;
    background-position: bottom left;
}

.investors-overlay{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    z-index: 10;
    background-color: rgba(22,69,138,0.8);
}

.supplier-overlay{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    z-index: 10;
    background-color: rgba(183,0,44,0.8);
}

.client-overlay{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    z-index: 10;
    background-color: rgba(22,69,138,.9);
}

.employee-overlay{
    position: absolute;
    top: 0;
    right: 0;
    width: 60%;
    height: 100%;
    -webkit-clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    clip-path: polygon(25% 0, 100% 0%, 100% 100%, 5% 100%);
    z-index: 10;
    background-color: rgba(100,80,40,0.8);
}

.investors-btn-all{
    z-index: 11;
    margin-top:2%;
}

.investors-btn{
    position:relative;
    border:solid 2px white;
    border-radius:10px;
    color:rgba(255,255,255,1.00);
    background-color:rgba(255,255,255,00);
    margin:15px;
    padding:15px 3% 10px 9%;
    cursor:pointer;
    transition: 1s;
}

#employee-btn{
    margin-top: 20%;
}

#supplier-btn{
    margin-top: 20%;
}

.investors-btn:hover{
    background-color:rgba(0,0,0,.4);
}

.investors-btn span{
    font-size:16px;
    color:#ffffff;
    margin-left:10%;
    letter-spacing:3px;
    margin-right:5%;
    font-weight:400;
}

.investors-btn img{
    max-width:50px;
}

.investors-btn .arrow{
    position:absolute;
    right:5%;
    top:36%;
    max-width:25px;
}

.investors-icon{
    float:left;
    font-size:36px;
    margin:30px;
}

#client{
    color: #fff;

}

#client-table{
    z-index: 11;

}

.phone-link{
    color: #fff;
}

.phone-link:visited{
    color: #fff;
}

.font-yellow{
    color: #e4cea3;
    font-weight: 500;
    font-size: 15px;
}

.stakeholder-btn-icon{
    height: 50px;
    width: 50px;
}

@media (max-width: 1310px) {
  .investors-btn img{
    max-width:45px;
  }

  .investors-btn span{
    font-size:14px;
    color:#ffffff;
    margin-left:4%;
    letter-spacing:1px;
    margin-right:5%;
   }

   .investors-btn-all{
    margin-top:3%;
    }

    .investors-btn{
    padding:15px 3% 10px 6%;
}
}





/* -------------------------------------------------------------------
supplier
------------------------------------------------------------------- */

.supplier-item {
    text-align: center;
    position:relative;
    border:2px solid #1273b2;
    border-radius:20px;
}

.supplier-item-image {
    position: relative;
    overflow: hidden;
}

.supplier-item-image img {
    opacity:0;
}


.supplier-item-detail,
.supplier-item-image:after {
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.supplier-item-image:after {
    position: absolute;
    display: block;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    border-radius:20px;
}

.supplier-item-detail {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 100%;
    padding: 20px;
    opacity: 0;
    z-index: 2;
    text-align: center;
    font-size: 12px;
    color: #aaa;
    border-radius:20px;
}

.supplier-icon{
    font-size:70px;
    margin:50px 0 30px 0;
    color:#1273b2;
}

.supplier-item-title {
    margin: 35px 0 50px 0;
    font-size:16px;
    letter-spacing:3px;
    color:rgba(0,0,0,1.00);
}


.supplier-item-detail i{
    margin-left:5%;
}

.supplier-item-detail .btn{
    background-color:rgba(0,0,0,.60);
    font-size:16px;
}

.supplier-item-detail .btn:hover{
    background-color:rgba(0,0,0,.60);
}

/* supplier item hover */

.supplier-item:hover .supplier-item-image:after {
    background: rgba(17, 17, 17, .8);
    border-radius:18px;
}

.supplier-item:hover .supplier-item-detail {
    opacity: 1;
    bottom: 50%;
    -webkit-transform: translateY(50%);
       -moz-transform: translateY(50%);
            transform: translateY(50%);

}

/* /supplier item hover */

/*.s-borderline {
    position: relative;
    background: #1273b2;
    display: block;
    height: 1px;
    width: 80%;
    margin:3% auto;
}

.s-borderline:before {
    position: absolute;
    background: #1273b2;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.s-borderline:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}
*/


/* -------------------------------------------------------------------
Price-tables
------------------------------------------------------------------- */

.price-table {
    background: #fff;
    border: 1px solid #1273b2;
    padding: 25px 20px;
    margin: 15px 0 30px;
    text-align: center;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.price-table:hover {
    border-color: #1273b2;
}

.price-table.best {
    margin: 0 0 30px;
}

.price-table .small {
    margin: 0;
}

.borderline {
    position: relative;
    background: #1273b2;
    display: block;
    height: 1px;
    width: 100%;
    margin: 20px 0 20px;
}

.borderline:before {
    position: absolute;
    background: #1273b2;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.borderline:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}


.borderline-red {
    position: relative;
    background: #DF002C;
    display: block;
    height: 1px;
    width: 100%;
    margin: 20px 0 20px;
}

.borderline-red:before {
    position: absolute;
    background: #DF002C;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.borderline-red:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}

.borderline-y {
    position: relative;
    background: #C3A067;
    display: block;
    height: 1px;
    width: 100%;
    margin: 20px 0 20px;
}

.borderline-y:before {
    position: absolute;
    background: #C3A067;
    content: "";
    bottom: -7px;
    left: 50%;
    height: 14px;
    width: 14px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -7px;
}

.borderline-y:after {
    position: absolute;
    background: #fff;
    content: "";
    bottom: -5px;
    left: 50%;
    height: 16px;
    width: 16px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
    margin-left: -8px;
}


.price-table h4 {
    font-weight: 700;
    margin: 0;
}

.price-table .stakeholder-icon{
    margin:30px 0 10px 0;
}

.price-table p.price {
    font-weight: 400;
    font-size: 18px;
    letter-spacing:3px;
    color: #111;
    padding: 0;
    margin: 0 0 30px 0;
}

.price-table p.price span {
    display: inline-block;
    vertical-align: top;
    font-size: 16px;
    padding-top: 25px;
}

.price-details {
    list-style: none;
    padding: 0;
    margin: 0 0 23px;
}

.price-details li {
    padding: 7px 0;
    font-size: 12px;
}

.price-details li > span {
    text-decoration: line-through;
    color: #aaa;
}


/* -------------------------------------------------------------------
contact
------------------------------------------------------------------- */

.contact-pic{
    background-image:url(../images/contact.jpg);
    background-size:cover;
    background-position:center;
}

.contact-title-all{
    margin:100px 40px 720px 0px;
}

.contact-title{
     font-size:24px;
     color:#FFFFFF;
     letter-spacing:6px;
     text-align:center;
     font-weight:300;
     line-height:40px;
     text-shadow: 2px 2px 2px #333333;
     background-color:rgba(0,0,0,.8);
     padding-top:15px;
 }

.contact-subtitle{
     font-size:17px;
     color:#FFFFFF;
     letter-spacing:2px;
     text-align:center;
     font-weight:200;
     text-shadow: 2px 2px 2px #333333;
     text-transform:uppercase;
     background-color:rgba(0,0,0,.8);
     padding-bottom:15px;
}

/*#contact-form{
    padding:20px 0 80px 0;
}*/

#contact-form label{
    text-align:left;
}


.contact-item{
    margin:40px 0;
}

label{
    font-weight:500;
}


/* ------------------------------------------------------------------
timeline
------------------------------------------------------------------- */

#header{
    background-color:rgba(255,255,255,1.00);
    z-index:1000;
    max-width:1000px;
}

/*平版橫幅*/
@media (min-width: 993px) and (max-width:1310px) {
   #header{
      width:800px;
   }
}
/*平版直拿*/
@media (min-width: 768px) and (max-width: 992px) {
   #header{
      width:800px;
   }
}
/*手機*/
@media (min-width: 501px) and (max-width: 767px)  {
   #header{
      width:450px;
      margin:0 auto;
   }
}
/*手機iphone*/
@media (max-width: 500px) {
   #header{
      width:400px;
      margin:0 auto;
   }
}

.mile{
    padding:15px;
    font-size:28px;
    color:#1273b2;
    font-weight:500;
    letter-spacing:3px;
    text-align:center;
}

#header a{
    padding:25px 15px;
    font-size:16px;
    font-weight:700;
}

#timeline-line{
    width:2px;
    background-color:rgba(80,80,80,.8);
    height:900px;
}

#timeline-triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12.5px 0 12.5px 20px;
    border-color: transparent transparent transparent #1273b2;
}


.timeline-item{
    padding-top:165px;
}

.timeline-year{
    font-size:28px;
    letter-spacing:2px;
    color:#1273b2;
    font-weight:600;
    padding:5px;
}

.timeline-content{
    font-size:16px;
    color:rgba(94,94,94,1.00);
}


@media (max-width: 1310px) {
    .timeline-item{
    padding-top:200px;
    }
}


@media (max-width: 991px) {
    .timeline-item{
    padding-top:135px;
    }
}


/* ------------------------------------------------------------------
info.idea.vision.privacy
------------------------------------------------------------------- */

.info-content{
    padding:40px 0;
    text-align:justify;
    letter-spacing:1px;
    font-weight:300;
    }

.info-title{
    color:#1273b2;
    font-size:22px;
    font-weight:600;
    letter-spacing:2px;
    }

.info-subtitle{
    color:#1273b2;
    font-size:16px;
    letter-spacing:1px;
    margin-bottom:5%;
    }


#info img{
    margin-top:5px;
    }

#idea-2{
    position:relative;
    }

#idea-3{
    position:absolute;
    top:70%;
    left:20%;
    width:277px;
    height:177px;
    }

#vision-top{
    margin-bottom:10%;
    position:relative;
    }

#vision-sign{
    position:absolute;
    width:25%;
    height:auto;
    top:70%;
    left:60%;
    }

.vision-photo img{
    }

.photo-detail{
    font-size:12px;
    }

    .privacy-subtitle{
    color:;
    font-size:15px;
    letter-spacing:1px;
    margin-bottom:5%;
    line-height: 26px;
    }

    .privacy-content-title{
    margin: 40px 0 0 0 ;
    padding: 10px;
    text-align:justify;
    letter-spacing:1px;
    font-size: 15px;
    background-color:#1273b2;
    color: #fff;
    }



/* -------------------------------------------------------------------
publicgood.education
------------------------------------------------------------------- */

 .publicgood-left{
     background-image:url(../images/contact.jpg);
     background-size:cover;
     height:600px;
  }

  .publicgood-center{
      background-color:rgba(230,230,230,1.00);
      height:600px;
  }

  .publicgood-right{
     background-image:url(../images/contact.jpg);
     background-size:cover;
     height:600px;
  }

  .publicgood-content{
    text-align:justify;
    padding:60px 0px;
    letter-spacing:1px;
    font-weight:300;
    }

    #publicgood-list{
        height: 728px;
    }

    #publicgood-pic img{
    margin-bottom: 5px;
    }

    .sustainable-content{
    text-align:justify;
    padding:8% 0px 0px 0px;
    letter-spacing:1px;
    font-weight:300;
    }

    .sustainable-content p{
        font-weight:400;
        letter-spacing:4px;
        margin:0 0 10px;
        font-size:16px;
    }

    .sustainable-content span{
        font-weight:300;
        font-size:14px;
        letter-spacing:1px;
    }

   .public-solid{
    height:5px;
    background-color:#1273B4;
    }

    #publicgood-2016{
    text-align:left;
    padding:15px;
    line-height:30px;
    font-size:14px;
    margin-top: 5%;
    }

    #education img{
        margin-bottom:20px;
    }

    #education-owl img{
        width: 100%;
        margin-bottom: 0;
    }

    .education-content{
    text-align:justify;
    padding:60px 0px;
    letter-spacing:1px;
    font-weight:300;
    }

    .edu-solid{
    width:15px;
    height:60px;
    background-color:#62b7d5;
    margin-right:5px;
    float:left;
    }

    #education-2{
        margin-top:40px;
    }


    .sustainable-solid-down{
        height:10px;
        width:75%;
        background-color:#1273B4;
        bottom:0;
        right:0;
        position:absolute;
    }

    .sustainable-solid-up{
        height:3px;
        width:75%;
        background-color:#1273B4;
        top:0;
        right:0;
        position:absolute;
    }

    .sustainable-solid-right{
        height:100%;
        width:3px;
        background-color:#1273B4;
        top:0;
        right:0;
        position:absolute;
    }

    .sustainable-content .sustainable-content-number{
        color:#1273B4;
        font-weight:400;
        line-height:26px;
        margin-right:3px;
    }


/* ------------------------------------------------------------------
hire - jobimage
------------------------------------------------------------------- */

#jobimage-menu{
    background-color: white;
    max-width: 1300px;
}

#jobimage-menu a{
    background-color: #1273b2;
    font-size: 18px;
    padding: 20px;
    color: #FFF;
    border-radius: 30px;
    margin: 0 10px;
    text-align: center;
}

#jobimage-menu img{
    float: left;
    width: 35px;
    margin-left: 5%;
}

.jobimage-menu-item:hover{
    color: yellow;
    background-color: black;
}

#environment{
    padding: 0px;
    height: 500px;
}

#jobimage-text{
    background-color: #d81978;
}

/* ------------------------------------------------------------------
job-image  tab
------------------------------------------------------------------- */
#jobimage-menu-tab{
    background-color: white;
}

#jobimage-menu-tab img{
    float: left;
    width: 35px;
    margin-right: 12%;
    margin-top: -5%;
}

#jobimage-tab {
}

#jobimage-tab-content{
    /*margin-bottom: 450px;*/
}

#jobimage-tab-environment-pic{
    z-index: 999;
    background-color:#1273b2;
    /*border: solid 10px #1273b2;*/
    padding: 0;
    margin: 0;
}

#jobimage-tab-environment-pic img{
    width: 100%;
}

.environment-detail{
    position: absolute;
    bottom: 20px;
    right: 0px;
    background-color: rgba(0,0,0,.6);
    color: #FFF;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 3px;
}

/*#jobimage-tab-environment-text{
    background-color: #1273b2;
    border: solid 10px #1273b2;
    height: 350px;
    position: absolute;;
    top: 80%;
    left: 55%;
}*/

.jobimage-tab-environment-text-pic{
    margin: 0px;
    padding: 5px;
}


#jobimage-tab-environment-text{
    background-color: #;
    border: solid 12px #1273b2;
    /*border-left: none;*/
    padding: 5% 5%;
    margin-top: 3%;
    position: relative;
}

#jobimage-tab-environment-text-overlay{
    position: absolute;
    background-image: url(../images/recruit/jobimage/en-bg.png);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    opacity: 0.2;
}

#jobimage-tab-environment-text h3{
    letter-spacing: 5px;
    color: #1273b2;
}

#jobimage-tab .info {
    display: none;
    padding: 150px 20px 0px;
}

#jobimage-tab .info img{
    /*width: 100%;*/
}

#jobimage-tab .on {
    display: block;
}

#jobimage-tab .title {
}

#jobimage-tab .title li {
    cursor: pointer;
    float: left;
    background-color: #1273b2;
    padding: 5px 5%;
    border-radius: 25px;
    width: 21%;
    margin: 0 2%;
    transition: 0.5s;
}

#jobimage-tab .title li.on, #jobimage-tab .title li.over {
    background-color: #d81978;
}

#jobimage-tab .title li h3 {
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    padding-bottom: 6px;
}

#jobimage-tab .title li.on h3, #jobimage-tab .title .over h3, #jobimage-tab .title li.on p, #jobimage-tab .title .over p {
    color: #fff;
}

.welfare{
    margin: 0;
    padding: 0;
    height: 223px;
}

.welfare-text{
    background-color: #fff;
    border: solid 12px #ff9600;
    padding: 2% 5%;
}

.welfare-text h3{
    letter-spacing: 5px;
    color: #ff9600;
}

.environment-text-title:after{
    content: '';
    display: block;
    width: 20%;
    height: 3px;
    background-color: #1273b2;
    margin: 5% 0;
}

.salary-text-title:after{
    content: '';
    display: block;
    width: 30%;
    height: 3px;
    background-color: #7EB23C;
    margin: 5% 0;
}

.welfare-text-title:after{
    content: '';
    display: block;
    width: 30%;
    height: 3px;
    background-color: #ff9600;
    margin: 5% 0;
}

.training-title:after{
    content: '';
    display: block;
    width: 30%;
    height: 3px;
    background-color: #d81978;
    margin: 5% 0;
}

.welfare-pic .item{
    width: 100%;
    overflow: hidden;
}

.welfare-img{
    width: 100;
}

.welfare-pic{
    overflow: hidden;
}

.welfare-detail{
    position: absolute;
    bottom: 20px;
    left: 0px;
    background-color: rgba(0,0,0,.6);
    color: #FFF;
    padding: 10px 20px;
    font-size: 14px;
    letter-spacing: 3px;
}

#training-pic-owl{
    z-index: 999;
    background-color:#d81978;
    /*border: solid 10px #1273b2;*/
    padding: 0;
    margin: 0;
    height: 312px;
}

#training-pic-owl2{
    z-index: 999;
    background-color:#d81978;
    /*border: solid 10px #1273b2;*/
    padding: 0;
    margin: 0;
    height: 507px;
}

.training-title{
    color: #d81978;
    letter-spacing: 5px;
    font-size: 18px;
}


#training-text-1{
    background-color: #fff;
    /*background-image: url(../images/recruit/jobimage/8833.svg);*/
    background-repeat: no-repeat;
    background-position: right;
    border: solid 12px #d81978;
    padding: 4% 5%;
    height: 312px;
}

#training-tree{
    background-color: #dd378e;
    border: solid 12px #d81978;
    border-top: none;
    padding: 5%;
}

.training-pic,.training-text{
    margin: 0;
    padding: 0;
    height: 253.5px;
    background-color: #ea3498;
    border: solid 12px #d81978;
}

.training-pic-large{
    margin: 0;
    padding: 0;
    height: 507px;
    background-color: #ea3498;
    border: solid 12px #d81978;
    overflow: hidden;
}

.training-text-1{
    margin: 0;
    height: 253.5px;
    background-color: #FFF;
    border: solid 12px #d81978;
    padding: 6%;
}

.training-text-2{
    margin: 0;
    padding: 5%;
    height: 253.5px;
    background-color: #ea3498;
    border: solid 12px #d81978;
}

.training-text-2 h3{
    margin: 0px;
    padding: 5px;
    color: #FFF;
    font-size: 20px;
    letter-spacing: 3px;
}


.training-text h3,.training-text i{
    font-size: 20px;
    color: #fff;
    letter-spacing: 3px;
}

.training-text{
    padding: 10%;
}

.salary-text-title{
    color: #7EB23C;
    letter-spacing: 5px;
    font-size: 18px;
}

#salary-tree{
    background-color: #8CC43B;
    border: solid 12px #7EB23C;
    padding: 0%;
    height: 500px;
    overflow: hidden;
}

#salary-tree-img{
    width: 128%;
    margin-left: -12%;
}

#salary-text{
    background-color: #fff;
    border: solid 12px #7EB23C;
    border-right: none;
    padding: 4% 5%;
    height: 300px;
}

#salary-text-2{
    background-color: #8CC43B;
    border: solid 12px #7EB23C;
    border-right: none;
    border-top: none;
    padding: 4% 5%;
    height: 200px;
}
#salary-text-3{
    background-color: #8CC43B;
    border: solid 12px #7EB23C;
    border-right: none;
    border-top: none;
    padding: 4% 5%;
    height: 200px;
}
#salary-text-4{
    background-color: #fff;
    border: solid 12px #7EB23C;
    border-right: none;
    border-top: none;
    padding: 4% 5%;
    height: 200px;
}

#salary-pic{
    background-color: #8CC43B;
    border: solid 12px #7EB23C;
    border-top: none;
    padding: 4% 5%;
    height: 200px;
}

#salary-pic-m{
    background-color: #8CC43B;
    border: solid 12px #7EB23C;
    border-top: none;
    padding: 4% 5%;
    height: 170px;
}

.jobimage-icon{
    width: 40%;
    margin-left: 25%;
    margin-top: 8%;
}

.welfare-icon{
    width: 40%;
    margin-left: 25%;
    margin-top: 8%;
}

/* ------------------------------------------------------------------
hire - jobshare
-------------------------------------------------------------------

#jobshare{
    position: relative;
}

.jobshare{
    padding: 5% 3%;
    color: #fff;
}

.jobshare-senior-all{
    background-color: #1273b2;
}

.jobshare-supersales-all{
    background-color: #d81978;
}

.senior{
    background-color: #1273b2;
}

.supersales{
    background-color: #d81978;
}

.jobshare-cata-title{
    color: #fff;
    padding: 1%;
    font-size: 18px;
    letter-spacing: 3px;
}

.senior-title{
    padding: 10px 3%;
    background-color: #1273b2;
    -webkit-clip-path: polygon(0% 0%, 45% 0%, 40% 50%, 45% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 45% 0%, 40% 50%, 45% 100%, 0% 100%);
}

.supersales-title{
    padding: 10px 3%;
    background-color: #d81978;
    text-align: right;
    position: absolute;
    z-index: 999;
    -webkit-clip-path: polygon(100% 0%, 55% 0%, 60% 50%, 55% 100%, 100% 100%);
            clip-path: polygon(100% 0%, 55% 0%, 60% 50%, 55% 100%, 100% 100%);
}

#senior-title{
    display: block;
    width: 450px;
    top: 420px;
    left: 10%;
    position: fixed;
    z-index: 999;
    padding: 10px 3%;
    background-color: #1273b2;
    -webkit-clip-path: polygon(0% 0%, 45% 0%, 40% 50%, 45% 100%, 0% 100%);
            clip-path: polygon(0% 0%, 45% 0%, 40% 50%, 45% 100%, 0% 100%);
    box-shadow:30px 30px 30px gold;
}


#supersales-title{
    display: block;
    width: 450px;
    top: 420px;
    right: 10%;
    position: fixed;
    z-index: 999;
    padding: 10px 1%;
    background-color: #d81978;
    text-align: right;
    -webkit-clip-path: polygon(100% 0%, 55% 0%, 60% 50%, 55% 100%, 100% 100%);
            clip-path: polygon(100% 0%, 55% 0%, 60% 50%, 55% 100%, 100% 100%);
}

.jobshare-text{
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 2px;
    text-align: justify;
    padding: 20px 0;
    height: 150px;
}

.jobshare-pic img{
    width: 50px;
}

*/


/* ------------------------------------------------------------------
hire - jobshare
------------------------------------------------------------------- */

.jobshare{
    padding: 5% 5%;
    position: relative;
    margin: 18% 0% 0% 0;
    border-radius: 0 15px 15px 15px ;
}

.senior{
    background-color: #1273b2;
}

.supersales{
    background-color: #d81978;
}

.unknown-1{
    background-color: #7EB23C;
}

.unknown-2{
    background-color: #ff9600;
}

.jobshare-text{
    color: #fff;
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 1px;
    text-align: justify;
    padding: 20px 0;
    height: 100px;
}

.jobshare-tag{
    background-color: #fff;
    border-radius: 15px 15px 0 0 ;
    position: absolute;
    top: -42px;
    left: 0px;
    padding: 5px 10%;
    font-size: 18px;
    letter-spacing: 8px;
    font-weight: 500;
}

.senior-tag{
    border: solid 8px #1273b2;
    color: #1273b2;
}

.supersales-tag{
    border: solid 8px #d81978;
    color: #d81978;
}

.unknown-1-tag{
    border: solid 8px #7EB23C;
    color: #7EB23C;
}

.unknown-2-tag{
    border: solid 8px #ff9600;
    color: #ff9600;
}

.jobshare-banner{
    position: relative;
    margin-bottom: 50px;
}

.jobshare-banner-text{
    position: absolute;
    top: 30%;
    left: 15%;
    z-index: 999;
    font-size: 30px;
    letter-spacing: 8px;
}

.jobshare-banner-m{
    position: relative;
    margin-bottom: 80px;
}

.jobshare-banner-text-m{
    position: absolute;
    top: 10%;
    left: 13%;
    z-index: 999;
    font-size: 22px;
    letter-spacing: 8px;
}

@media (max-width: 768px){

    .jobshare-banner-text-m{
    position: absolute;
    top: 13%;
    left: 25%;
    z-index: 999;
    font-size: 28px;
    letter-spacing: 10px;
    }
}

@media (max-width: 650px){

    .jobshare-banner-text-m{
    position: absolute;
    top: 13%;
    left: 25%;
    z-index: 999;
    font-size: 28px;
    letter-spacing: 10px;
    }
}

@media (max-width: 649px) and  (min-width: 451px) {

    .jobshare-banner-text-m{
    position: absolute;
    top: 13%;
    left: 20%;
    z-index: 999;
    font-size: 28px;
    letter-spacing: 5px;
    }
}

@media (max-width: 450px){

    .jobshare-banner-text-m{
    position: absolute;
    top: 10%;
    left: 13%;
    z-index: 999;
    font-size: 22px;
    letter-spacing: 5px;
    }
}


/* ------------------------------------------------------------------
jobnews
------------------------------------------------------------------- */

.jobnews-owl{
    padding: 0 0 30px 0;
}

.jobnews-banner img{
    width: 100%;
}


.jobnews-owl-item-pic{
    float: left;
}

.jobnews-owl-item-text{
    text-align: left;
}


#jobnews-topbn-owl .owl-page {
    position: relative;
    background: rgba(255, 255, 255, 1);
    border: solid 0px rgba(0, 115, 183, 0.9);
    display: inline-block;
    overflow: hidden;
    height: 9px;
    width: 9px;
    margin: 50px 4px;
    text-indent: -200%;
    z-index: 1000;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    /*-webkit-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
       -moz-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
         -o-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
            box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);*/
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

#jobnews-topbn-owl .slider-testimonials .owl-pagination {
    right: 20px;
    margin: 0;
}

#jobnews-topbn-owl .owl-pagination {
    position: absolute;
    z-index: 3;
    margin-top: 15px;
    text-align: right;
    width: 100%;
}



/* ----jobnews-top-banner---- */

#jobnews-top-banner {
        width:100%; /* 圖片寬度 + 縮圖寬度 + 間隔 8px */
        height:610px;   /* 圖片高度 */
        padding: 6px 10px;
        position: relative;
        border: 0px solid #ccc;
    }
    #jobnews-top-banner ul, #jobnews-top-banner li {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    #jobnews-top-banner img {
        border: none;
        width: 100%;
    }
    #jobnews-top-banner .photo {
        width: ;    /* 圖片寬度 */
        height: ;   /* 圖片高度 */
        position: absolute;
    }
    #jobnews-top-banner .desc-block {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;    /* 圖片寬度 */
        height: 32px;
    }
    #jobnews-top-banner .desc-bg, #jobnews-top-banner .desc-title {
        position: absolute;
        width: ;    /* 圖片寬度 - padding * 2 */
        background: #000;
        top: 0;
        height: 24px;
        padding: 4px 10px;
    }
    #jobnews-top-banner .desc-title {
        color: #fff;
        background: none;
        line-height: 24px;
    }
    #jobnews-top-banner #playPause-btn {    /* 播放/暫停鈕 */
        position: absolute;
        display: block;
        right: 5px;
        bottom: 5px;
        width: 21px;
        height: 21px;
        width: 21px;
        height: 21px;
        text-indent: -999px;
        opacity: 0;
    }
    #jobnews-top-banner .playPause-btn-play {
        background: url(images/sprite.png) no-repeat -21px 0px;
    }
    #jobnews-top-banner .playPause-btn-pause {
        background: url(images/sprite.png) no-repeat 0px 0px;
    }
    #jobnews-top-banner .thumbs {
        width: ;
        height: 288px;  /* 圖片高度 - padding-top */
        /*padding-top: 12px;*/
        right: 10px;
        position: absolute;
    }
    #jobnews-top-banner .carousel {
        height: 610px;
        position: relative;
        overflow: hidden;
    }
    #jobnews-top-banner .carousel .nav-bar {
        float: left;
        width: 2px;
        height: 63px;
        margin-right: 2px;
    }
    #jobnews-top-banner .carousel img {
        float: left;
        width: 90px;
        height: 63px;
    }
    #jobnews-top-banner .carousel ul {
        position: absolute;
    }
    #jobnews-top-banner .carousel li {
        width: 94px;
        height: 72px;
    }
    #jobnews-top-banner .carousel .current .nav-bar {   /* 當被點選時，縮圖左邊的顏色 */
        background: #007acc;
    }
    #jobnews-top-banner .thumbs .prev, #jobnews-top-banner .thumbs .next {  /* 縮圖上下的控制鈕 */
        position: absolute;
        left: 43px;
        width: 12px;
        height: 0px;
        padding-top: 6px;
        overflow: hidden;
        display: block;
        cursor: pointer;
        background: url(images/sprite.png) no-repeat 0 0;
    }
    #jobnews-top-banner .thumbs .prev {
        top: 0px;
        background-position: 0 -21px;
    }
    #jobnews-top-banner .thumbs .next {
        bottom: -2px;
        background-position: 0 -27px;
    }

/* ---- /jobnews-top-banner ---- */


#campus-table{
    /*border: solid 1px #c3a067;*/
 }


#promote-table{
    /*border: solid 1x #1273b2;*/
 }

#campus-table-title{
    background-color: #c3a067;
    color: #fff;
    font-size: 20px;
    letter-spacing: 5px;
    text-align: center;
    padding: 10px 0 ;
}

#promote-table-title{
    background-color: #1273b2;
    color: #fff;
    font-size: 20px;
    letter-spacing: 5px;
    text-align: center;
    padding: 10px 0 ;
}

.signup-btn{
    background-color: #d81978;
    border-radius: 15px;
    width: 60%;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    margin: -2px auto 0;
}

.signup-btn i{
    margin-left: 5px;
}

.signup-btn:hover{
    background-color: #c5037e;
    color: #fff;
}

#campus-table th{
    font-size: 16px;
    padding: 10px 0;
    text-align: center;
 }


#campus-table td{
    font-size: 16px;
    padding: 12px 0;
    text-align: center;
 }


#promote-table th{
    font-size: 16px;
    padding: 10px 0;
    text-align: center;
 }


#promote-table td{
    font-size: 16px;
    padding: 12px 0;
    text-align: center;
 }


/* ------------------------------------------------------------------
jobjoin
------------------------------------------------------------------- */

.jobjoin-iframe{
    border: 0px solid #1273b2;
}

.font-label{
    font-size: 18px;
}

.jobjoin-detail{
    font-size: 16px;
    font-weight: 600;
    color: #1273b2;
    text-align: center;
    margin-bottom: 30px;
}

/* ------------------------------------------------------------------
Owl sliders
------------------------------------------------------------------- */

.owl-carousel .owl-controls .owl-buttons .owl-prev,
.owl-carousel .owl-controls .owl-buttons .owl-next {
    position: absolute;
    background: #fff;
    display: block;
    height: 40px;
    width: 40px;
    top: 50%;
    margin: -20px 10px 0;
    padding: 0;
    opacity: 0;
    text-align: center;
    line-height: 40px;
    font-size: 17px;
    color: #111;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
            border-radius: 2px;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.owl-carousel .owl-controls .owl-buttons .owl-prev {
    left: -20px;
}

.owl-carousel .owl-controls .owl-buttons .owl-next{
    right: -20px;
}


.owl-carousel:hover .owl-controls .owl-buttons .owl-prev {
    opacity: 0.5;
    left: 0px;
}

.owl-carousel:hover .owl-controls .owl-buttons .owl-next {
    opacity: 0.5;
    right: 0px;
}

/* Pagination */

.owl-pagination {
    position: absolute;
    z-index: 3;
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

.slider-testimonials .owl-pagination {
    bottom: -40px;
    margin: 0;
}

/* Slider images */

.slider-images .owl-pagination {
    bottom: 10px;
    margin: 0;
}

.owl-page {
    position: relative;
    background: rgba(255, 255, 255, 1);
    border: solid 1px rgba(0, 115, 183, 0.9);
    display: inline-block;
    overflow: hidden;
    height: 7px;
    width: 7px;
    margin: 6px 4px;
    text-indent: -200%;
    z-index: 1000;
    -webkit-border-radius: 6px;
       -moz-border-radius: 6px;
            border-radius: 6px;
    /*-webkit-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
       -moz-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
         -o-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
            box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);*/
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}


/*owl-jobimages-environment*/

#jobimage-tab-environment-pic .owl-page {
    position: relative;
    background: rgba(255, 255, 255, 1);
    border: solid 3px rgba(0, 115, 183, 0.9);
    display: inline-block;
    overflow: hidden;
    height: 13px;
    width: 13px;
    margin: -5px 4px;
    text-indent: -200%;
    z-index: 1000;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    /*-webkit-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
       -moz-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
         -o-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
            box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);*/
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

/*owl-jobimages-environment*/

/*owl-jobimages-welfare*/

.welfare-pic .owl-page {
    position: relative;
    background: rgba(255, 255, 255, .8);
    border: solid 0px rgba(0, 115, 183, 0.9);
    display: inline-block;
    overflow: hidden;
    height: 9px;
    width: 9px;
    margin: 10px 4px;
    text-indent: -200%;
    z-index: 1000;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    /*-webkit-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
       -moz-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
         -o-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
            box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);*/
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.welfare-pic .slider-testimonials .owl-pagination {
    bottom: 0px;
    right: 5px;
    margin: 0;
}

.welfare-pic .owl-pagination {
    position: absolute;
    z-index: 3;
    margin-top: 15px;
    text-align: right;
    width: 100%;
}


/*owl-jobimages-welfare*/

/*owl-jobimages-training*/

.training-pic-large .owl-page {
    position: relative;
    background: rgba(255, 255, 255, .8);
    border: solid 0px rgba(0, 115, 183, 0.9);
    display: inline-block;
    overflow: hidden;
    height: 9px;
    width: 9px;
    margin: 10px 4px;
    text-indent: -200%;
    z-index: 1000;
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
            border-radius: 10px;
    /*-webkit-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
       -moz-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
         -o-box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);
            box-shadow: 0 0 1px rgba(17, 17, 17, 0.4);*/
    -webkit-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.000, 0.000, 0.580, 1.000);
}

.training-pic-large .slider-testimonials .owl-pagination {
    bottom: 0px;
    right: 5px;
    margin: 0;
}

.training-pic-large .owl-pagination {
    position: absolute;
    z-index: 3;
    margin-top: 15px;
    text-align: right;
    width: 100%;
}


/*owl-jobimages-training*/


.owl-page.active {
    -webkit-transform: scale(1.3);
       -moz-transform: scale(1.3);
         -o-transform: scale(1.3);
            transform: scale(1.3);
}

/* ------------------------------------------------------------------
Overlays
------------------------------------------------------------------- */

.bg-light {
    background-color: #f7f7f7;
    height: 100%;
    width: 100%;
}

.bg-dark {
    background-color: #111;
    height: 100%;
    width: 100%;
}

.bg-dark,
.bg-dark-30,
.bg-dark-50,
.bg-dark-60,
.bg-dark-90,
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.bg-dark-30 h1, .bg-dark-30 h2, .bg-dark-30 h3, .bg-dark-30 h4, .bg-dark-30 h5, .bg-dark-30 h6,
.bg-dark-50 h1, .bg-dark-50 h2, .bg-dark-50 h3, .bg-dark-50 h4, .bg-dark-50 h5, .bg-dark-50 h6,
.bg-dark-60 h1, .bg-dark-60 h2, .bg-dark-60 h3, .bg-dark-60 h4, .bg-dark-60 h5, .bg-dark-60 h6,
.bg-dark-90 h1, .bg-dark-90 h2, .bg-dark-90 h3, .bg-dark-90 h4, .bg-dark-90 h5, .bg-dark-90 h6,
.bg-dark .content-box-icon, .bg-dark-30 .content-box-icon, .bg-dark-60 .content-box-icon, .bg-dark-90 .content-box-icon {
    color: #fff;
}

.bg-film:before,
.bg-dark-30:before,
.bg-dark-50:before,
.bg-dark-60:before,
.bg-dark-90:before,
.bg-light-30:before,
.bg-light-50:before,
.bg-light-60:before,
.bg-light-90:before {
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: 0;
}

.bg-dark-30:before {
    background: rgba(34, 34, 34, 0.3);
    content: "";
    left: 0;
    top: 0;
}

.bg-dark-50:before {
    background: rgba(34, 34, 34, 0.5);
    content: "";
    left: 0;
    top: 0;
}

.bg-dark-60:before {
    background: rgba(34, 34, 34, 0.6);
    content: "";
    left: 0;
    top: 0;
}

.bg-dark-90:before {
    background: rgba(34, 34, 34, 0.9);
    content: "";
    left: 0;
    top: 0;
}

.bg-light-30:before {
    background: rgba(255, 255, 255, 0.3);
    content: "";
    left: 0;
    top: 0;
}

.bg-light-50:before {
    background: rgba(255, 255, 255, 0.5);
    content: "";
    left: 0;
    top: 0;
}

.bg-light-60:before {
    background: rgba(255, 255, 255, 0.6);
    content: "";
    left: 0;
    top: 0;
}

.bg-light-90:before {
    background: rgba(255, 255, 255, 0.9);
    content: "";
    left: 0;
    top: 0;
}

.bg-film:before {
    background: url(../images/dot.gif);
    opacity: 0.09;
    content: "";
    left: 0;
    top: 0;
}

.bg-en:before {
    background: url(../images/recruit/jobimage/en-bg.png);
    opacity: 0.9;
    content: "";
    left: 0;
    top: 0;
}

/* ------------------------------------------------------------------
Navigation
------------------------------------------------------------------- */

.navbar-custom {
    -webkit-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.navbar-custom {
    /*background: rgba(0, 0, 51, 1);*/
    background: rgb(4,125,201);
    border: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
      -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
           box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.navbar-custom .navbar-brand {
    float: left;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 15px;
    padding-bottom: 0;
    letter-spacing: 4px;
    font-weight: 200;
    font-size: 15px;
    color: #111;
    left: 20px;
}

/*

.navbar-custom .navbar-brand {
    float: none;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
    letter-spacing: 4px;
    font-weight: 200;
    font-size: 15px;
    color: #111;
}

*/

/*.navbar-custom .navbar-slogan {
    float: left;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 0px;
    padding-bottom: 0;
    letter-spacing: 4px;
    font-weight: 200;
    font-size: 15px;
    color: #111;
    position: absolute;
    right: 20px;
    top: 20px;
}*/

.navbar-custom a,
.navbar-custom .navbar-brand {
    color: #fff;
    font-size:14px;
    letter-spacing: 4px;
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
}

.navbar-custom .nav li > a {
    position: relative;
    letter-spacing: 1px;
}

.navbar-custom .nav > li > a:focus,
.navbar-custom .nav > li > a:hover,
.navbar-custom .nav .open > a,
.navbar-custom .nav .open > a:focus,
.navbar-custom .nav .open > a:hover,
.navbar-custom .dropdown-menu > li > a:focus,
.navbar-custom .dropdown-menu > li > a:hover {
    /*background: rgba(0, 0, 51, 0.7);*/
    background:#0262b6;
    color: #FFFFFF;
}

/* Navbar toggle */

.navbar-custom .navbar-toggle {
    /*margin-top: 13px;*/
    margin-top:23px;
    margin-bottom:23px;
}

.navbar-custom .navbar-toggle .icon-bar {
    background: #FFF
}

/* Navbar dropdown */

.navbar-custom .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.navbar-custom .dropdown-menu > li > a {
    border: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 14px;
    padding: 11px 15px;
}

.navbar-custom .dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
    margin-top: -1px;
}



.leftauto {
    right: 0 !important;
    left: auto !important;
}

.navbar-custom .dropdown-menu.left-side {

    right: 100%;
    left: auto;
}

.navbar-custom .dropdown-toggle:after {
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    margin-top: -5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 9px;
    content: "\f107";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle {
    /*padding-right: 28px;*/
}

.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle:after {
    position: absolute;
    display: block;
    /*right: 15px;*/
    right:0px;
    top: 50%;
    margin-top: -5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 9px;
    content: "\f107";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.light-logo {
    display: none !important;
}

.navbar-transparent.navbar-dark .light-logo {
    display: block !important;
}

.navbar-transparent.navbar-dark .dark-logo {
    display: none !important;
}

/* Push search */

.navbar-custom .navbar-nav > .dropdown > .dropdown-toggle.search-dropdown:after {
    content: "";
}

.dropdown-search {
    position: relative;
    padding: 7px 5px;
}

.dropdown-search .form-control {
    position: relative;
}

.dropdown-search .search-btn {
    position: absolute;
    background: transparent;
    border: none;
    overflow: hidden;
    top: 50%;
    right: 0px;
    width: 42px;
    height: 32px;
    line-height: 30px;
    font-size: 14px;
    outline: none;
    color: #eee;
    margin-top: -16px;
}

/* ------------------------------------------------------------------
Navigation-down
------------------------------------------------------------------- */

#navbar-down{
    z-index:9999;
}


.navbar-center{
    text-align:center;
    margin:0 auto;
}


.navbar-custom-down {
    -webkit-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: background 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000), padding 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.navbar-custom-down {
    background: rgba(255, 255, 255, 0.4);
    border: 0;
    border-radius:0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 10px;
    color:rgba(15,22,78,1.00);
    text-align:center;
    margin:0 auto;
    min-height:40px;
    webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
      -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
           box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

.navbar-custom-down .navbar-brand {
    float: none;
    height: 60px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
    letter-spacing: 4px;
    font-weight: 200;
    font-size: 20px;
    color: #111;
}

.navbar-custom-down a,
.navbar-custom-down .navbar-brand {
    color:rgba(15,22,78,1.00);
    font-size:10px;
    -webkit-transition: none;
       -moz-transition: none;
         -o-transition: none;
            transition: none;
}

.navbar-custom-down .nav li > a {
    position: relative;
}

.navbar-custom-down .nav > li > a:focus,
.navbar-custom-down .nav > li > a:hover,
.navbar-custom-down .nav .open > a,
.navbar-custom-down .nav .open > a:focus,
.navbar-custom-down .nav .open > a:hover,
.navbar-custom-down .dropdown-menu > li > a:focus,
.navbar-custom-down .dropdown-menu > li > a:hover {
    background: rgba(80, 80, 80, 0.1);
    color:rgba(15,22,78,1.00);
}

/* Navbar toggle */

.navbar-custom-down .navbar-toggle {
    margin-top: 13px;
}

.navbar-custom-down .navbar-toggle .icon-bar {
    background: #FFF
}

/* Navbar dropdown */

.navbar-custom-down .navbar-nav>li>.dropdown-menu{
    margin-bottom: 0px;
}

.navbar-custom-down .dropdown-menu {
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 0;
    padding: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
}

.navbar-custom-down .dropdown-menu > li > a {
    border: 0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 10px;
    padding: 5px 8px;
}

.navbar-custom-down .dropdown-menu .dropdown-menu {
    top: 0;
    left: 100%;
    right: auto;
}


.navbar-custom-down .dropdown-menu.left-side {

    right: 100%;
    left: auto;
}

/*.navbar-custom-down .dropdown-toggle:after {
    position: absolute;
    display: block;
    right: 0;
    top: 50%;
    margin-top: -5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 9px;
    content: "\f107";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}*/

.navbar-custom-down .navbar-nav > .dropdown > .dropdown-toggle {
    padding-right: 28px;
}

.navbar-custom-down .navbar-nav > .dropdown > .dropdown-toggle:after {
    position: absolute;
    display: block;
    right: 15px;
    top: 50%;
    margin-top: -5px;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 9px;
    content: "\f107";
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}



/* Push search */

.navbar-custom-down .navbar-nav > .dropdown > .dropdown-toggle.search-dropdown:after {
    content: "";
}


.foot-title{
    color:rgba(180,180,180,1.00);
    font-size:12px;
    padding-left:5px;
}

/* ------------------------------------------------------------------
Hero
------------------------------------------------------------------- */

#hero-m{
    background-image:url(../images/index/hero-m-bg.jpg);
    background-position:left;
    height:100vh;
}


.module-hero {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.video_wrapper{
    /*position:relative;
    display:block;*/
}

.hero-caption {
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}

.hero-text {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

/* Hero caption sizes */

.mh-line-size-1,
.mh-line-size-2,
.mh-line-size-3,
.mh-line-size-4,
.mh-line-size-5,
.mh-line-size-6 {
    font-weight: 700;
    opacity: 0.99;
    margin: 0;
}

.mh-line-size-1 {
    letter-spacing: 50px;
    font-size: 26px;
}

.mh-line-size-2 {
    letter-spacing: 40px;
    font-size: 24px;
}

.mh-line-size-3 {
    letter-spacing: 12px;
    font-size: 22px;
}

.mh-line-size-4 {
    letter-spacing: 8px;
    font-size: 14px;
}

.mh-line-size-5 {
    letter-spacing: 6px;
    font-size: 12px;
}

.mh-line-size-6 {
    font-weight: 400;
    font-size: 16px;
}

/* ------------------------------------------------------------------
footer
------------------------------------------------------------------- */

#fb-content{
    margin: 20px 0;
}


#footer{
    z-index:1000;
}

.list-unstyled li{
    padding:15px 0;
    text-align:center;
}


.list-unstyled{
    margin:10% auto;
}


/* ------------------------------------------------------------------
Modules
------------------------------------------------------------------- */

.wrapper {
    background: #fff;
    overflow: hidden;
    margin: 0 auto;
    width: 100%;
}

.module,
.module-small {
    /*padding: 80px 0;*/
    padding: 40px 0 80px 0;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

.module-small {
    padding: 0px 0;
}

.module-public {
    padding: 130px 0;
}

.navbar-custom + .module {
    padding: 200px 0;
}

.navbar-custom + .top-module {
    padding: 120px 0;
}

.navbar-custom + .module-small {
    padding: 130px 0;
}

.module-parallax {
    background-attachment: fixed;
}

/* Module titles */

.module-title {
    text-transform: uppercase;
    letter-spacing: 10px;
    text-align: center;
    font-size: 18px;
    margin-bottom: 70px;
}

.module-subtitle {
    text-align: center;
    font-size: 13px;
    margin-bottom: 70px;
}

.module-icon {
    font-size: 36px;
    margin-bottom: 70px;
}

.module-title + .module-subtitle {
    margin-top: -35px;
}

.divider {
    margin: 0;
    background-color:#000;
    height:1px;
}


.divider-foot {
    margin:0 0 0px 0;
    opacity:0.7;
    background-color:#1273b2;
    height:3px;
}


.copyright {
    padding: 0 5px;
}

/* ------------------------------------------------------------------
message Works grid
------------------------------------------------------------------- */

.works-grid-wrapper {
    margin: 0 -5px;
}

.works-grid {
    position: relative;
    width: 100%;
}

.work-item,
.grid-sizer {
    width: 25%;
}

.work-item.wide,
.work-item.wide-tall {
    width: 50%;
}

/* ------------------------------------------------------------------
message
------------------------------------------------------------------- */

.work-item a {
    position: absolute;
    top: 0;
    bottom: 10px;
    right: 5px;
    left: 5px;
    overflow: hidden;
}

.work-item a:after {
    position: absolute;
    display: block;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-item img {
    height: auto;
    width: 100%;
}


.message-date{
    color: rgba(0, 115, 183, 0.9);
    margin: 5px 0;
}

.message-date i {
    margin-right: 2%;
}

.message-title{
    color: #000;
    font-size: 16px;
    margin: 3px 0;
    font-weight: 500;
    color: #d81978;
}

.message-content{
    color: #000;
    font-size: 14px;
    margin: 3px 0;
    text-align: justify;
    font-weight: 300;
}

.message-tag{
    color: #fff;
    font-size: 16px;
    letter-spacing: 3px;
    padding: 5px 15px;
    position: absolute;
    top: 2%;
    left: 0;
    -webkit-clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    width: 70px;
    box-shadow: 5px 5px 5px 1px #242424;
    -webkit-box-shadow: 5px 5px 5px 1px #242424;
    -moz-box-shadow: 5px 5px 5px 1px #242424;
    -o-box-shadow: 5px 5px 5px 1px #242424;
}

.blue-tag{
    background-color: rgba(0, 117, 201, 1);
}

.red-tag{
    background-color: rgba(230, 0, 31, 1);
}

.yellow-tag{
    background-color: rgba(194, 159, 103, 1);
}

.work-caption {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    opacity: 0;
    overflow: hidden;
    padding: 20px;
    z-index: 3;
    text-align: center;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.work-title {
    font-size: 16px;
    letter-spacing: 4px;
    color: #FFF;
    margin: 6px 0 6px;
}

.work-title i {
    margin:6px;
}

.work-descr {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

/* White hover */

.works-hover-w .work-title {
    color: #FFF;
}

.works-hover-w .work-descr {
    color: rgba(17, 17, 17, 0.75);
}

/* Work item gradien background */

.works-hover-g a:after {
    opacity: 0;
}

/* ------------------------------------------------------------------
message Works item hover
------------------------------------------------------------------- */

.work-item:hover a:after {
    background: rgba(0, 0, 0, 0.8);
}

.works-hover-w .work-item:hover a:after {
    background: rgba(0, 0, 0, .8);
}

.works-hover-g .work-item:hover a:after {
    background: rgb(111, 226, 158);
    background: -moz-linear-gradient(-45deg, rgba(111,226,158,0.8) 0%, rgba(91,218,209,0.8) 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(111,226,158,0.8)), color-stop(100%,rgba(91,218,209,0.8)));
    background: -webkit-linear-gradient(-45deg, rgba(111,226,158,0.8) 0%,rgba(91,218,209,0.8) 100%);
    background: -o-linear-gradient(-45deg, rgba(111,226,158,0.8) 0%,rgba(91,218,209,0.8) 100%);
    background: -ms-linear-gradient(-45deg, rgba(111,226,158,0.8) 0%,rgba(91,218,209,0.8) 100%);
    background: linear-gradient(135deg, rgba(111,226,158,0.8) 0%,rgba(91,218,209,0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6fe29e', endColorstr='#5bdad1',GradientType=1 );
    opacity: 1;
}

.work-item:hover .work-caption {
    opacity: 1;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
            transform: translateY(-50%);
}

/* ------------------------------------------------------------------
Portfolio Filter
------------------------------------------------------------------- */

.filters {
    text-align: center;
    list-style: none;
    padding: 0;
    margin: 0 0 70px;
}

.filters > li {
    display: inline-block;
    margin: 5px 15px;
}

.filters > li sup {
    top: -.7em;
    font-size: 80%;
    color: #999;
}

.filters > li > a {
    text-transform: uppercase;
    color: #111;
}

.filters > li > a:hover, .filters > li > a.current,
.filters > li > a:hover sup, .filters > li > a.current sup {
    color: #999;
}

/* ------------------------------------------------------------------
Portfolio Single
------------------------------------------------------------------- */

.image-caption {
    position: relative;
    margin: 0 0 20px;
}

.image-caption .caption-text {
    position: absolute;
    display: table;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    padding: 20px;
    font-size: 12px;
}

#message-single-img img{
    width: 100%;
}

.message-single-content{
    line-height: 32px;
    font-size: 15px;
    text-align: justify;
}

.project-details {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-details li {
    padding: 0 0 10px;
}

/* ------------------------------------------------------------------
post-index
------------------------------------------------------------------- */

/* Fix Firefox 3 column width bug */

@-moz-document url-prefix() {

    @media (min-width: 1310px) {
        .posts-masonry .col-lg-4 {
            width: 33.3333%;
        }
    }

    @media (min-width: 992px) {
        .posts-masonry .col-md-4 {
            width: 33.3333%;
        }
    }

}

.post-index {
    width: 100%;
}

.post-media-index {
    position: relative;
    margin: 0 0 20px;
}

.post-media-index img {
    width: 100%;
}

.post-media-index a:after {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.post-media-index:hover a:after {
    opacity: 1;
}

.post-title-index {
    margin: 0;
    height:80px;
}

.post-title-index a {
    color: #d81978;
    font-weight:500;
    line-height:20px;
    font-size: 16px;
}

.post-title-index a:hover {
    color: rgba(0, 115, 183, 0.9);
}

.post-meta-index {
    font-size: 14px;
    margin: 0 0 15px;
    color: rgba(0, 115, 183, 0.9);
}

.post-meta-index i {
    margin-right: 2%;
    color: rgba(0, 115, 183, 0.9);
}

.post-header-index {
    margin: 0 0 15px;
}

.post-more-link-index {
    font-size: 14px;
    text-align:center;
    margin:5% auto;
    color:#000;
    font-weight:400;
}

.post-more-link-index a:hover {
    color: rgba(0, 115, 183, 0.9);
}


/* ------------------------------------------------------------------
news
------------------------------------------------------------------- */

/* Fix Firefox 3 column width bug */

@-moz-document url-prefix() {

    @media (min-width: 1310px) {
        .posts-masonry .col-lg-4 {
            width: 33.3333%;
        }
    }

    @media (min-width: 992px) {
        .posts-masonry .col-md-4 {
            width: 33.3333%;
        }
    }

}

.post {
    width: 100%;
}

#news i {
    margin-right: 2%;
    color: rgba(0, 115, 183, 0.9);
}

.post-media {
    position: relative;
    margin: 0 0 20px;
}

.post-media img {
    width: 100%;
}

.post-media a:after {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.post-media:hover a:after {
    opacity: 1;
}

.post-title {
    margin: 0;
    height:50px;
}

.post-title a {
    color: #d81978;
    font-weight:500;
    line-height:22px;
    font-size: 17px;
}

.post-title a:hover {
    color: rgba(0, 115, 183, 0.9);
}

.post-meta {
    font-size: 14px;
    margin: 0 0 15px;
    color: rgba(0, 115, 183, 0.9);
}

.post-header {
    margin: 0 0 5px;
}

.post-entry{
    text-align: justify;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
}

.post-entry p{
    height: 120px;
}


.post-more-link {
    font-size: 14px;
    text-align:center;
    margin:5% auto;
    color:#000;
    font-weight:500;
}

.post-more-link a {
    color: rgba(0, 115, 183, 1);
}


.post-more-link a:hover {
    color: rgba(0, 115, 183, 0.7);
}




/* Single post */

.post-single .post-media,
.post-single .post-header,
.post-single .post-entry {
    margin: 0 0 40px;
}

.post-single .post-meta {
    margin: 0 0 20px;
}


/* -------------------------------------------------------------------
news-single
------------------------------------------------------------------- */

.product-gallery {
    list-style: none;
    padding: 0;
    width: 100%;
    margin: 10px 0 0;
}

.product-gallery li {
    display: inline-block;
    width: 14%;
    margin: 0 5px;
}

.product-gallery li:first-child {
    margin-left: 0;
}

.product-title {
    margin: 0 0 20px;
    color: #d81978;
    font-weight: 600;
}

.date {
    font-size: 20px;
    color: rgba(0, 115, 183, 0.9);
}

.news-content{
    text-align: justify;
    font-size: 15px;
    line-height: 32px;
}

.date i {
    margin-right: 2%;
}


/* ------------------------------------------------------------------
activity
------------------------------------------------------------------- */

/* Fix Firefox 3 column width bug */

@-moz-document url-prefix() {

    @media (min-width: 1310px) {
        .posts-masonry .col-lg-4 {
            width: 33.3333%;
        }
    }

    @media (min-width: 992px) {
        .posts-masonry .col-md-4 {
            width: 33.3333%;
        }
    }

}

.activity{
    border: solid 2px #d81978;
}

.post-activity {
    width: 100%;
}

.post-media-activity {
    position: relative;
    margin: 0 0 20px;
}

.post-media-activity img {
    width: 100%;
}

.post-media-activity a:after {
    background: rgba(255, 255, 255, 0.3);
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.post-media-activity:hover a:after {
    opacity: 1;
}

.post-title-activity {
    margin: 0;
    height:50px;
}

.post-title-activity a {
    color: #d81978;
    font-weight:500;
    line-height:22px;
    font-size: 17px;
}

.post-title-activity a:hover {
    color: rgba(0, 115, 183, 0.9);
}


.post-meta-activity {
    font-size: 14px;
    margin: 0 0 15px;
    color: rgba(0, 115, 183, 0.9);
}

.post-header-activity {
    margin: 0 0 5px;
}

.post-entry-activity{
    text-align: justify;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1px;
}

.post-entry-activity p{
    height: 120px;
}


.post-more-link-activity {
    font-size: 14px;
    text-align:center;
    margin:5% auto;
    color:#000;
    font-weight:500;
}

.post-more-link-activity a {
    color: rgba(0, 115, 183, 1);
}


.post-more-link-activity a:hover {
    color: rgba(0, 115, 183, 0.7);
}



/* ------------------------------------------------------------------
Tags
------------------------------------------------------------------- */

.tags a {
    background: #f7f7f7;
    position: relative;
    display: inline-block;
    padding: 1px 15px 1px 10px;
    margin: 0px 15px 10px 0;
    height: 26px;
    letter-spacing: 1px;
    line-height: 24px;
    font-size: 11px;
    -webkit-border-radius: 2px 0 0 2px;
       -moz-border-radius: 2px 0 0 2px;
            border-radius: 2px 0 0 2px;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.tags a:before {
    border-left: 8px solid #f7f7f7;
    border-top: 13px solid rgba(0, 0, 0, 0);
    border-bottom: 13px solid rgba(0, 0, 0, 0);
    position: absolute;
    content: "";
    right: -8px;
    top: 0;
    height: 0;
    width: 0;
    -webkit-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
       -moz-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
         -o-transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
            transition: all 0.3s cubic-bezier(0.300, 0.100, 0.580, 1.000);
}

.tags a:after {
    background: #fff;
    position: absolute;
    display: block;
    content: "";
    right: 4px;
    top: 11px;
    height: 4px;
    width: 4px;
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

.tags a:hover {
    background: #f0f0f0;
}
.tags a:hover:before {
    border-left-color: #f0f0f0;
}

/* ------------------------------------------------------------------
Post author
------------------------------------------------------------------- */

.post-author .author-avatar {
    max-width: 70px;
    float: left;
}

.post-author .author-avatar img {
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

.post-author .author-content {
    margin-left: 100px;
}

.post-author .author-name {
    margin-top: 0;
}

/* ------------------------------------------------------------------
Comments and Comment form
------------------------------------------------------------------- */

.comment-avatar {
    float: left;
    max-width: 70px;
}

.comment-avatar img {
    -webkit-border-radius: 50%;
       -moz-border-radius: 50%;
            border-radius: 50%;
}

.comment-content {
    margin-left: 100px;
    margin-bottom: 40px;
}

.comment-author {
    margin: 0 0 20px;
}

.comment-author a {
    color: #111;
}

.comment-meta {
    font-size: 12px;
}

.comments,
.comment-form,
.post-author {
    margin: 80px 0 0;
}

.comment-title,
.comment-form-title,
.post-author-title {
    margin: 0 0 15px;
}

/* ------------------------------------------------------------------
Widgets
------------------------------------------------------------------- */

.widget {
    margin: 0 0 60px;
}

.widget-title {
    border-bottom: 1px solid #eee;
    padding: 0 0 10px;
    margin: 0 0 20px;
}

.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget li {
    padding-bottom: 10px;
}

/* Search */

.search-box {
    position: relative;
}

.search-btn {
    background: transparent;
    border: none;
    position: absolute;
    overflow: hidden;
    right: 1px;
    top: 50%;
    height: 40px;
    width: 42px;
    outline: none;
    margin-top: -20px;
    line-height: 38px;
    font-size: 14px;
    color: #eee;
}

/* Recent posts */

.widget-posts li {
    padding-bottom: 20px;
}

.widget-posts-image {
    float: left;
    width: 64px;
}

.widget-posts-body {
    margin-left: 74px;
}

.widget-posts-title {
    margin: 0 0 5px;
}

.widget-posts-meta {
    letter-spacing: 1px;
    font-size: 11px;
}

/* -------------------------------------------------------------------
Google map
------------------------------------------------------------------- */

#module-maps {
    position: relative;
    height: 450px;
    width: 100%;
}

#map {
    height: 100%;
    width: 100%;
}

#map img {
    max-width: none;
}

/* ------------------------------------------------------------------
Preloader
------------------------------------------------------------------- */

.page-loader {
    background: #fff;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9998;
}

.loader {
    background: #ddd;
    position: absolute;
    display: inline-block;
    height: 40px;
    width: 40px;
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    text-indent: -9999em;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
            animation: ball-scale 1s 0s ease-in-out infinite;
}


@-webkit-keyframes ball-scale {

    0% {
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
            -ms-transform: scale(0);
             -o-transform: scale(0);
                transform: scale(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }

}

@keyframes ball-scale {

    0% {
        -webkit-transform: scale(0);
           -moz-transform: scale(0);
            -ms-transform: scale(0);
             -o-transform: scale(0);
                transform: scale(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(1);
           -moz-transform: scale(1);
            -ms-transform: scale(1);
             -o-transform: scale(1);
                transform: scale(1);
    }

}


/* -------------------------------------------------------------------
Scroll to top
------------------------------------------------------------------- */

.scroll-up {
    position: fixed;
    display: none;
    bottom: 7px;
    right: 7px;
    z-index: 999;
}

.scroll-up a {
    background: #fff;
    display: block;
    height: 28px;
    width: 28px;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    -webkit-border-radius: 2px;
       -moz-border-radius: 2px;
         -o-border-radius: 2px;
            border-radius: 2px;
}

.scroll-up a:hover,
.scroll-up a:active {
    opacity: 1;
    color: #000;
}

/* -------------------------------------------------------------------
Responsive Media Querries
------------------------------------------------------------------- */

@media (min-width: 1600px) {

#dome-pic{
    max-width:80%;
    height:auto;
    margin:0 auto;
}

}

@media (max-width: 1309px) and  (min-width: 768px) {

#dome-info{
    font-size:12px;
}

.company-info{
        //*height:160px;*/
        /*letter-spacing:1px;*/
        letter-spacing: 0.05em;
     }

.sustainable-content{
    padding:2% 0px 0px 0px;
    }

.sustainable-content p{
    padding:6% 0px 0px 0px;
    font-size:16px;
    }

.sustainable-content span{
        font-weight:300;
        font-size:13px;
        letter-spacing:0px;
    }

.publicgood-content{
    padding:10% 0px 0px 0px;
    }

.publicgood-content p{
    padding:4% 3%;
    font-size:14px;
    }

#publicgood-list{
        height: 830px;
    }
#publicgood-2016{
    margin-top: 13%;
    }

#publicgood-bear{
    display: none;
    }

.education-content{
    padding:5% 0px 0px 0px;
    }

    #education-2 img{
        margin-top:25px;
    }

    .client-bg{
    height:560px;
    background-position: left;
    }

    .post-title {
    margin: 0;
    height:50px;
    }

     .post-title a {
    line-height:22px;
    font-size: 18px;
     }

    .shop-item-subtitle-activity{
    font-size: 13px;
    }

    .navbar-custom .navbar-brand {
        /*padding-top: 22px;*/
        padding:0px;
        margin:10px 0px;
    }

    #jobimage-menu-tab img{
    margin-top: 7%;
    }

    #training-text-1{
    height: 348px;
    }

    #training-tree{
    padding: 2%;
    }

    .training-pic-large{
    height: 358px;
    }

    .training-pic,.training-text{
    height: 179px;
    }

    .training-text-1{
    height: 179px;
    padding: 1%;
    font-size: 14px;
    }

    .training-text-2{
    height: 179px;
    padding: 1%;
    font-size: 14px;
    }

    .training-text h3,i{
    font-size: 18px;
    }

    .training-text{
    padding: 6%;
    }

    .training-text-2{
    padding: 1%;
    height: 179px;
    }

    .training-text-2 h3,i{
    font-size: 18px;
    }

    #training-pic-owl .item{
    width: 130%;
    }

    #training-pic-owl{
    overflow: hidden;
    height: 348px;
    }

    #training-pic-owl-2 .item{
    width: 130%;
    }

    #training-pic-owl-2{
    overflow: hidden;
    height: 179px;
    }

    #welfare-pic .item{
    width: 135%;
    }

    #welfare-pic{
    overflow: hidden;
    height: 223px;
    }

    #welfare-owl .item{
    width: 135%;
    position: relative;
    margin: 0 auto;
    }

    #welfare-owl .item img{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left: -10%;
    }

    #welfare-owl{
    overflow: hidden;
    height: 223px;
    }

    .jobshare-text{
    height: 120px;
    }

    .jobimage-icon{
    width: 50%;
    margin-left: 20%;
    margin-top: 15%;
    }

    .welfare-icon{
    width: 50%;
    margin-left: 20%;
    margin-top: 15%;
    }




}

@media (max-width: 991px) {

.list-unstyled a{
    font-size:14px;
}
/*
.navbar-custom a,
.navbar-custom .navbar-brand {
    font-size:13px;
    }

.navbar-custom a,
.navbar-custom .navbar-brand {
    font-size:14px;
    letter-spacing: 0px;
}

.navbar-brand img{
    max-width:75%;
}

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

.investors-btn span{
    margin-left:5%;
}

.sustainable-content .sustainable-content-number{
        color:#1273B4;
        font-weight:300;
        line-height:20px;
        margin-right:3px;
    }

#publicgood-text{
    margin-right: 0;
    padding-right: 0;
}

#publicgood-pic{
    right: 0;
}

#publicgood-pic img{
    float: left;
    width: 33.3333333333333%;
}

.publicgood-content h4{
    padding:2% 3%;
    font-size:14px;
    line-height: 22px;
    }

.publicgood-content p{
    padding:10% 3%;
    font-size:14px;
    line-height: 22px;
    }

.publicgood-content{
    line-height: 20px;
    }

#publicgood-left{
    margin-right: 0;
    padding-right:0;
    }

.post-title a {
    line-height:20px;
    font-size: 16px;
    }

.post-entry p{
    height: 170px;
    }

    #jobimage-tab .title li {
    padding: 5px 2%;
}


#jobimage-tab .title li h3 {
    font-size: 16px;
    letter-spacing: 1px;
    padding-bottom: 2px;
}

#jobimage-menu-tab img{
    margin-top: -6%;
    }



    #training-tree{
    padding: 2%;
    height: 300px;
    }

    .training-pic,.training-text ,.training-text-2{
    height: 150px;
    }

    .training-text h3,.training-text-2 h3,.training-text i{
    font-size: 15px;
    letter-spacing: 2px;
    }

    .training-text-2{
    padding: 6%;
    }

    .training-text{
    padding: 6%;
    }

    #training-pic-owl .item{
    width: 135%;
    }

    #training-pic-owl{
    overflow: hidden;
    height: 348px;
    }

    #training-pic-owl-2 .item{
    width: 120%;
    }

    #training-pic-owl-2{
    overflow: hidden;
    height: 150px;
    }

    .training-pic-large{
    height: 300px;
    }

    #welfare-pic .item{
    width: 185%;
    }

    #welfare-pic{
    overflow: hidden;
    height: 223px;
    }

    #welfare-owl .item{
    width: 185%;
    }

    #welfare-owl{
    overflow: hidden;
    height: 223px;
    }

    .jobshare-text{
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 1px;
    padding: 15px 0;
    height: 140px;
    }

    .jobshare{
    margin-bottom: 60px;
    }

    .jobimage-icon{
    width: 50%;
    margin-left: 20%;
    margin-top: 35%;
    }

    .welfare-icon{
    width: 50%;
    margin-left: 20%;
    margin-top: 35%;
    }


}

@media (max-width: 520px) {

.list-unstyled a{
    font-size:14px;
}

}


/*@media (min-width: 768px) {*/
@media (min-width: 1100px) {

    /* Navbar */

    .navbar-custom .navbar-brand {
        padding-left: 0;
        margin-top: 0px;
        padding-top: 10px;
    }

    .navbar-custom .navbar-nav > li > a {
        /*padding-top: 20px;
        padding-bottom: 20px;*/
        padding-right: 14px;
        padding-left: 10px;
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .navbar-transparent {
        background: transparent;
        padding-top: 15px;
        padding-bottom: 15px;
        background: transparent;
        webkit-box-shadow: none;
          -moz-box-shadow: none;
               box-shadow: none;
    }

    .navbar-custom-down .navbar-brand {
        padding-left: 0;
    }

    .navbar-custom-down .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-transparent-down {
        webkit-box-shadow: none;
          -moz-box-shadow: none;
               box-shadow: none;
    }

    .navbar-brand img{
        height:60px;
        max-width:100%;
        margin-left: 5px;
    }

    /* Tra */

    .navbar-transparent.navbar-dark .navbar-nav > li > a,
    .navbar-transparent.navbar-dark .navbar-brand {
        color: rgba(255, 255, 255, 0.95);
    }

    .navbar-transparent.navbar-dark .nav > li > a:focus,
    .navbar-transparent.navbar-dark .nav > li > a:hover {
        color: rgba(255, 255, 255, 0.75);
    }

    .navbar-custom .dropdown-menu .dropdown-toggle:after {
        position: absolute;
        display: block;
        right: 9px;
        top: 50%;
        margin-top: -6px;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: 9px;
        content: "\f105";
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .navbar-custom .dropdown-menu {
        position: absolute;
        display: block;
        visibility: hidden;
        opacity: 0;
    }

    .navbar-custom .open > .dropdown-menu {
        visibility: visible;
        opacity: 1;
    }

    .navbar-right .dropdown-menu {
        right: auto;
        left: 0;
    }

    /* Comments */

    .comment .comment {
        margin-left: 100px;
    }

    .client-bg .table{
        margin-left: -40px;
    }



}

@media (max-width: 992px) {

    /* Hero captions */

    .mh-line-size-1 {
        letter-spacing: 40px;
        font-size: 26px;
    }

    .mh-line-size-2 {
        letter-spacing: 28px;
        font-size: 20px;
    }

    .mh-line-size-3 {
        letter-spacing: 20px;
        font-size: 22px;
    }

    .mh-line-size-4 {
        letter-spacing: 8px;
        font-size: 16px;
    }

    .navbar-custom {
        letter-spacing: 1px;
        font-size: 9px;
    }

    /* Portfolio grid */

    .work-item,
    .grid-sizer {
        width: 33.3333%;
    }

    .work-item.wide,
    .work-item.wide-tall {
        width: 66.6666%;
    }

    .employee-bg{
    background-image:url(../images/employee-bg.png);
    }

    #employee-btn{
    margin-top: 35%;
    }

    #supplier-btn{
    margin-top: 30%;
    }

    #salary-tree{
    padding: 0%;
    height: 330px;
    }

    #salary-text{
    border-right: none;
    padding: 10% 6%;
    height: 330px;
    }

    .jobshare-banner-text{
    top: 25%;
    left: 12%;
    font-size: 22px;
    letter-spacing: 5px;
    }

    .signup-btn{
    width: 70%;
    }

    .welfare-detail{
    left: 0px;
    bottom:80%;
    font-size: 14px;
    letter-spacing: 3px;
    }


}

@media (max-width: 767px) {

    /* Navbar */

    .navbar-custom {
        letter-spacing: 2px;
        font-size: 10px;
    }

    .navbar-transparent.navbar-dark .light-logo {
        display: none !important;
    }

    .navbar-transparent.navbar-dark .dark-logo {
        display: block !important;
    }

    .navbar-custom .navbar-nav .open .dropdown-menu > li > a,
    .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 10px 25px;
    }

    .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu .dropdown-header,
    .navbar-custom .navbar-nav .open .dropdown-menu .dropdown-menu > li > a {
        padding: 10px 35px;
    }

    .navbar-custom .dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown-toggle:after {
        right: 15px;
        content: "\f107";
    }

    .navbar-custom .nav > .open >.dropdown-toggle:after, .navbar-custom .dropdown-menu .dropdown.open .dropdown-toggle:after {
        right: 15px;
        content: "\f106";
    }

    .navbar-custom .navbar-slogan {
    padding-top: 12px;
    }

    /* Hero captions */

    .mh-line-size-1 {
        letter-spacing: 24px;
        font-size: 26px;
    }

    .mh-line-size-2 {
        letter-spacing: 16px;
        font-size: 15px;
    }

    .mh-line-size-3 {
        letter-spacing: 14px;
        font-size: 14px;
    }

    .mh-line-size-4 {
        letter-spacing: 4px;
        font-size: 14px;
    }

    .mh-line-size-5 {
        letter-spacing: 2px;
        font-size: 13px;
    }

    .mh-line-size-6 {
        font-size: 13px;
    }



    /* Portfolio filters */

    .filters li {
        display: block;
        margin: 0 10px 10px;
    }

    .filters li:last-child {
        margin: 0 10px 140px;
    }

    /* Portfolio grid */

    .work-item,
    .grid-sizer {
        width: 50%;
    }

    .work-item.wide,
    .work-item.wide-tall {
        width: 100%;
    }



    .investors-bg{
    padding-top:30px;
    }

    .investors-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

    .supplier-bg{
    padding-top:30px;
    height: 160px;
    }

    .supplier-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

     .client-bg{
     height:600px;
     padding: 15px;
     color: #fff;
     background-position: left;
     }

     .client-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

    .employee-bg{
    padding-top:30px;
    height: 160px;
    }

    .employee-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

     #publicgood-list{
        height: 1000px;
     }

     .post-title {
    margin: 0;
    height:40px;
    }

      .post-title a {
    line-height:20px;
    font-size: 16px;
     }

      #employee-btn{
    margin-top: 0%;
    }

    #supplier-btn{
    margin-top: 0%;
    }

    .post-entry p{
    height: 100px;
    }

      .timeline-item{
    padding-top:20px;
     }

    /*.dropdown-menu>li>a{
    color:#FFF;
    }*/

    .dark-logo{
    margin-left:10px;
    }

    .top-banner-all{
        padding:10px;
    }

    .module-public {
    padding: 50px 0;
    }

    .info-title{
    color:#1273b2;
    font-size:20px;
    font-weight:600;
    letter-spacing:2px;
    }

    .info-subtitle{
    color:#1273b2;
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:5%;
    }

    .content-title:after {
    content: '';
    display: block;
    height: 3px;
    width: 15%;
    background-color: rgba(16,33,139,1.00);
    margin: 20px auto 30px;
   }

    #vision-top{
    margin-bottom:2%;
    position:relative;
    }

    .top-banner-content{
     font-weight:300;
     }

     .top-banner-title{
     font-weight:500;
     }

     .top-banner-subtitle{
     font-weight:400;
     }

     .top-banner-building{
    background-image:url(../images/nine/bg-building-m.jpg);
    height:500px;
    }

    .top-banner-life{
    background-image:url(../images/nine/bg-life-m.jpg);
    height:500px;
    }

    .top-banner-logistics{
    background-image:url(../images/nine/bg-logistics-m.jpg);
    height:500px;
    }

    .top-banner-charityable{
    background-image:url(../images/nine/bg-charityable-m.jpg);
    height:500px;
    }

    .top-banner-commercial{
    background-image:url(../images/nine/bg-commercial-m.jpg);
    height:500px;
    }

    .top-banner-dome{
    background-image:url(../images/nine/bg-dome-m.jpg);
    height:500px;
    }

    .top-banner-internet{
    background-image:url(../images/nine/bg-internet-m.jpg);
    height:500px;
    }

    .top-banner-leisure{
    background-image:url(../images/nine/bg-leisure-m.jpg);
    height:500px;
    }

    .top-banner-oversea{
    background-image:url(../images/nine/bg-oversea-m.jpg);
    height:500px;
    }

    #index-box-charityable{
    background-image:url(../images/index/index-charityable-m.jpg);
    }


     .top-banner-stakeholder{
    height:330px;
    background: url(../images/bg-stakeholder-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    }

    .top-banner-publicgood{
    height:330px;
    background: url(../images/bg-publicgood-m.jpg);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    }

    .top-banner-education{
    height:330px;
    background: url(../images/bg-education-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    }

    .top-banner-sustainable{
    height:330px;
    background: url(../images/bg-sustainable-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    }

    .top-banner-message{
    height:330px;
    background: url(../images/bg-message-m.jpg);
    background-position:top left;
    background-repeat: no-repeat;
    background-size: cover;
    }

    .top-banner-news{
    height:330px;
    background: url(../images/bg-news-m.jpg);
    background-position:top left;
    background-repeat: no-repeat;
    background-size: cover;
    }

    .top-banner-activity{
    height:330px;
    background: url(../images/bg-activity-m.jpg);
    background-position:top left;
    background-repeat: no-repeat;
    background-size: cover;
    }

    #publicgood-left{
    margin-right: 0;
    padding-right:15px;
    }

    .navbar-custom a,
    .navbar-custom .navbar-brand {
    font-size:15px;
    }

    .navbar-custom a,
    .navbar-custom .navbar-brand {
    font-size:15px;
    letter-spacing: 4px;
    }

    .navbar-custom .navbar-slogan {
    position: relative;
    top: 0;
    }

    .branch-child{
    font-weight: 500;
    }

    #jobimage-tab .title li {
    padding: 3px 5%;
    }


    #jobimage-tab .title li h3 {
    font-size: 16px;
    letter-spacing: 2px;
    padding-bottom: 2px;
    }

    #jobimage-menu-tab img{
    margin-top: -8%;
    margin-bottom: 5%;
    width: 40px;
    padding: 2px 5%;
    }

    #salary-tree{
    padding: 0%;
    height: auto;
    border-top: none;
    margin: 0 auto;
    }

    #salary-tree-img{
    width: 100%;
    margin-left: 0%;
    }

    #salary-pic-m{
    height: auto;
    }

    #salary-text{
    border-right: solid 12px #7EB23C;
    padding: 2% 6%;
    height: 250px;
    }

    #training-text-1{
    height: auto;
    }

    #training-text-2{
    height: 50px;
    border: none;
    }

    #training-text-3{
    height: 50px;
    border: none;
    }

    #training-pic-owl .item{
    width: 100%;
    }

    #training-pic-owl{
    overflow: hidden;
    height: 310px;
    }

    #training-pic-owl-2 .item{
    width: 100%;
    }

    #training-pic-owl-2{
    height: 300px;
    }

    .training-text, .training-text-2{
    padding: 0% 4%;
    }

    .training-text h3{
    margin: 0px;
    }

    #training-book-pic{
    border: none;
    height: 300px;
    }

    #training-tree{
    border-top: solid 12px #d81978;
    padding: 3% 0%;
    height: 300px;
    }

    #welfare-owl .item{
    width: 100%;
    position: relative;
    margin: 0 auto;
    }

    #welfare-owl .item img{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

    .welfare{
    overflow: hidden;
    height: auto;
    }

    #welfare-owl{
    overflow: hidden;
    height: auto;
    }

    #welfare-pic .item{
    width: 100%;
    }

    #welfare-pic{
    overflow: hidden;
    height: auto;
    }

    .welfare-money{
    margin-top: -10px;
    }

    .jobimage-icon{
    width: 30%;
    margin-left: 35%;
    margin-top: 2%;
    }

    .jobshare-text{
    height: 90px;
    }

    .jobshare{
    margin-bottom: 80px;
    }

    .jobshare-banner-text{
    top: 35%;
    left:13%;
    font-size: 22px;
    letter-spacing: 5px;
    }

    .jobshare-banner{
    margin-bottom: 80px;
    }

     #campus-table-title{
    font-size: 18px;
    letter-spacing: 4px;
    padding: 10px 0 ;
    }

#promote-table-title{
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
    padding: 10px 0 ;
}

.signup-btn{
    background-color: #d81978;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    margin: -2px auto 0;
}

.signup-btn i{
    display: none;
}

.signup-btn:hover{
    background-color: #c5037e;
    color: #fff;
}

#campus-table th{
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
 }


#campus-table td{
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
 }


#campus-table{
border: none;
 }

#promote-table{
border: none;
 }

#promote-table th{
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
 }


#promote-table td{
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
 }

 .jobimage-icon-salaryxs{
    width: 30%;
    margin-left:30%;
    margin-top:2%;
 }






}

@media (max-width: 500px) {

    /* Hero captions */

    .mh-line-size-1 {
        letter-spacing: 12px;
        font-size: 26px;
    }

    .mh-line-size-2 {
        letter-spacing: 6px;
        font-size: 14px;
    }

    .mh-line-size-3 {
        letter-spacing: 4px;
        font-size: 13px;
    }

    .mh-line-size-4 {
        letter-spacing: 4px;
        font-size: 12px;
    }

    .mh-line-size-5 {
        letter-spacing: 2px;
        font-size: 11px;
    }

    .mh-line-size-6 {
        font-size: 12px;
    }

    /* Portfolio grid */

    .work-item,
    .grid-sizer {
        width: 100%;
    }

    .work-item.wide,
    .work-item.wide-tall {
        width: 100%;
    }

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

    .dark-logo{
    margin-left:10px;
    width:120px;
    }

    .top-banner-all{
        padding:10px;
    }

    .module-public {
    padding: 50px 0;
    }

    .info-title{
    color:#1273b2;
    font-size:20px;
    font-weight:600;
    letter-spacing:2px;
    }

    .info-subtitle{
    color:#1273b2;
    font-size:14px;
    letter-spacing:1px;
    margin-bottom:5%;
    }

    .content-title:after {
    content: '';
    display: block;
    height: 3px;
    width: 15%;
    background-color: rgba(16,33,139,1.00);
    margin: 20px auto 30px;
   }

    #vision-top{
    margin-bottom:2%;
    position:relative;
    }

    .top-banner-content{
     font-weight:300;
     }

     .top-banner-title{
     font-weight:500;
     }

     .top-banner-subtitle{
     font-weight:400;
     }

     .top-banner-building{
    background-image:url(../images/nine/bg-building-m.jpg);
    height:500px;
    }

    .top-banner-life{
    background-image:url(../images/nine/bg-life-m.jpg);
    height:500px;
    }

    .top-banner-logistics{
    background-image:url(../images/nine/bg-logistics-m.jpg);
    height:500px;
    }

    .top-banner-charityable{
    background-image:url(../images/nine/bg-charityable-m.jpg);
    height:500px;
    }

    .top-banner-commercial{
    background-image:url(../images/nine/bg-commercial-m.jpg);
    height:500px;
    }

    .top-banner-dome{
    background-image:url(../images/nine/bg-dome-m.jpg);
    height:500px;
    }

    .top-banner-internet{
    background-image:url(../images/nine/bg-internet-m.jpg);
    height:500px;
    }

    .top-banner-leisure{
    background-image:url(../images/nine/bg-leisure-m.jpg);
    height:500px;
    }

    .top-banner-oversea{
    background-image:url(../images/nine/bg-oversea-m.jpg);
    height:500px;
    }

    #index-box-charityable{
    background-image:url(../images/index/index-charityable-m.jpg);
    }

    .contact-title-all{
    margin:60px 0;
    }

    .contact-title{
     background-color:rgba(0,0,0,.7);
     }

     .contact-subtitle{
     background-color:rgba(0,0,0,.7);
     }

     #contact-submit{
     margin-bottom:40px;
     }

     #publicgood-2016 p{
    font-size:13px;
    }

    #publicgood-2016 h4{
    font-size:15px;
    font-weight:500;
    padding:5px;
    }

    .investors-bg{
    padding-top:30px;
    }

    .investors-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

    .supplier-bg{
    padding-top:30px;
    height: 160px;
    }

    .supplier-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

     .client-bg{
     height:570px;
     padding: 15px;
     color: #fff;
     background-position: left;
     }

     .client-bg td{
     color: #fff;
     }

     .client-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

    .employee-bg{
    padding-top:30px;
    background-position: left;
    height: 160px;
    }

    .client-overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: rgba(22,69,138,0.8);
    }

    .employee-overlay{
     width: 100%;
     height: 100%;
     -webkit-clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%);
     }

     #publicgood-list{
        height:680px;
     }

    .post-title {
    margin: 0;
    height:50px;
    }

      .post-title a {
    line-height:20px;
    font-size: 15px;
     }

     .post-meta{
     font-size: 16px;
     }


     #employee-btn{
    margin-top: 0%;
    }

    #supplier-btn{
    margin-top: 0%;
    }

    .timeline-item{
    padding-top:20px;
     }

     .top-banner-stakeholder{
    height:320px;
    background: url(../images/bg-stakeholder-m.jpg);
    background-position: center top;
    }

    .top-banner-publicgood{
    height:320px;
    background: url(../images/bg-publicgood-m.jpg);
    background-position: center top;
    }

    .top-banner-sustainable{
    height:320px;
    background: url(../images/bg-sustainable-m.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    }

    .navbar-custom a,
    .navbar-custom .navbar-brand {
    font-size:15px;
    }

    .navbar-custom a,
    .navbar-custom .navbar-brand {
    font-size:15px;
    letter-spacing: 4px;
    }

    .top-banner-message{
    height:320px;
    background: url(../images/bg-message-m.jpg);
    background-repeat: no-repeat;
    background-position:top left;
    }

    .top-banner-news{
    height:320px;
    background: url(../images/bg-news-m.jpg);
    background-position:top left;
    background-repeat: no-repeat;
    }

    .top-banner-activity{
    height:320px;
    background: url(../images/bg-activity-m.jpg);
    background-position:top;
    background-repeat: no-repeat;
    }

    #publicgood-left{
    margin-right: -15px;
    padding-right:15px;
    }

    #publicgood-2016{
    margin-top: 0%;
    }

    #fb-content{
        margin-top: 0;
    }

    .navbar-custom .navbar-slogan {
    position: relative;
    top: 0;
    }

    .branch-child{
    font-weight: 500;
    }

    .navbar-custom .navbar-brand {
    padding-top: 18px;
    }


    #jobimage-tab .title li {
    padding: 3px 5%;
    }


    #jobimage-tab .title li h3 {
    font-size: 16px;
    letter-spacing: 2px;
    padding-bottom: 2px;
    }

    #jobimage-menu-tab img{
    margin-top: -8%;
    margin-bottom: 5%;
    width: 40px;
    }

    #salary-tree{
    padding: 0%;
    height: auto;
    border-right: solid 12px #7EB23C;
    }

    #salary-text{
    border-right: solid 12px #7EB23C;
    padding: 6% 6%;
    height: 250px;
    }

    #training-text-1{
    height: 200px;
    }

    #training-text-2{
    height: 140px;
    border: none;
    }

    #training-text-3{
    height: 150px;
    border: none;
    }

    #training-pic-owl .item{
    width: 100%;
    }

    #training-pic-owl{
    overflow: hidden;
    height: 230px;
    }

    #training-pic-owl-2 .item{
    width: 100%;
    }

    #training-pic-owl-2{
    height: 250px;
    }

    #training-pic-owl2{
    height: auto;
    }

    .training-pic-large{
    height: auto;
    padding: 0;
    margin: 0;
    }

    .training-text, .training-text-2{
    padding: 0% 4%;
    }

    .training-text h3{
    margin: 0px;
    }

    #training-book-pic{
    border: none;
    height: 300px;
    }

    #training-tree{
    border-top: solid 12px #d81978;
    padding: 3% 0%;
    height: 300px;
    }

    .jobimage-icon{
    width: 30%;
    margin-left: 35%;
    margin-top: 15%;
    }

    #welfare-owl .item{
    width: 100%;
    position: relative;
    margin: 0 auto;
    }

    #welfare-owl .item img{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    }

    .welfare{
    overflow: hidden;
    height: auto;
    }

    .welfare-detail{
    bottom: 10px;
    left: 0px;
    padding: 5px 10px;
    font-size: 14px;
    letter-spacing: 3px;
    }

    .environment-detail{
    bottom: 10px;
    right: : 0px;
    padding: 5px 10px;
    font-size: 14px;
    letter-spacing: 3px;
    }

    #welfare-owl{
    overflow: hidden;
    height: auto;
    }

    #welfare-pic .item{
    width: 100%;
    }

    #welfare-pic{
    overflow: hidden;
    height: auto;
    }

    .welfare-money{
    margin-top: -10px;
    }

    .welfare-icon{
    padding: 20% 30%;
    margin: 0%;
    width: 100%;
    }

    .jobshare-text{
    font-size: 14px;
    line-height: 18px;
    letter-spacing: 1px;
    padding: 15px 0;
    height: 140px;
    }

    .jobshare{
    margin-bottom: 60px;
    border-radius: 0 0 15px 15px;
    }

    .jobshare-tag{
    width: 100%;
    text-align: center;
    font-size: 15px;
    letter-spacing: 3px;
    }

    #campus-table-title{
    font-size: 18px;
    letter-spacing: 4px;
    padding: 10px 0 ;
    }

#promote-table-title{
    font-size: 18px;
    letter-spacing: 4px;
    text-align: center;
    padding: 10px 0 ;
}

.signup-btn{
    background-color: #d81978;
    border-radius: 10px;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    margin: -2px auto 0;
}

.signup-btn i{
    display: none;
}

.signup-btn:hover{
    background-color: #c5037e;
    color: #fff;
}

#campus-table th{
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
    border: none;
 }


#campus-table td{
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
 }


#promote-table th{
    font-size: 14px;
    padding: 10px 0;
    text-align: center;
 }


#promote-table td{
    font-size: 13px;
    padding: 12px 0;
    text-align: center;
 }

 .jobimage-icon-salaryxs{
    width: 40%;
    margin-left:30%;
    margin-top:5%;
 }




}

@media (max-width: 350px){

    .jobshare-banner-text-m{
    font-size: 18px;
    letter-spacing: 5px;
    }


    .jobshare-text{
    height: 180px;
    }

    .jobshare-tag{
    padding: 5px 5%;
    font-size: 15px;
    letter-spacing: 5px;
    font-weight: 500;
    }
}

/* -------------------------------------------------------------------
Multi-columns-row
------------------------------------------------------------------- */

.multi-columns-row .first-in-row {
    clear: left;
}

.multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: left; }
.multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: left; }
.multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: left; }
.multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: left; }
.multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: left; }

@media (min-width: 768px) {

    .multi-columns-row .col-xs-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-xs-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-xs-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-xs-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-xs-1:nth-child(12n + 13) { clear: none; }

    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: left; }
}

@media (min-width: 992px) {

    .multi-columns-row .col-sm-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-sm-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-sm-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-sm-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-sm-1:nth-child(12n + 13) { clear: none; }

    .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: left; }
}

@media (min-width: 1200px) {

    .multi-columns-row .col-md-6:nth-child(2n + 3) { clear: none; }
    .multi-columns-row .col-md-4:nth-child(3n + 4) { clear: none; }
    .multi-columns-row .col-md-3:nth-child(4n + 5) { clear: none; }
    .multi-columns-row .col-md-2:nth-child(6n + 7) { clear: none; }
    .multi-columns-row .col-md-1:nth-child(12n + 13) { clear: none; }

    .multi-columns-row .col-lg-6:nth-child(2n + 3) { clear: left; }
    .multi-columns-row .col-lg-4:nth-child(3n + 4) { clear: left; }
    .multi-columns-row .col-lg-3:nth-child(4n + 5) { clear: left; }
    .multi-columns-row .col-lg-2:nth-child(6n + 7) { clear: left; }
    .multi-columns-row .col-lg-1:nth-child(12n + 13) { clear: left; }

}

.et-icons .box1 {
    border: 1px solid #eee;
    display: block;
    width: 25%;
    float: left;
    padding: 0;
    font-size: 13px;
    margin: -1px 0 0 -1px;
}

.et-icons .box1 > span {
    display: inline-block;
    border-right: 1px solid #eee;
    min-width: 60px;
    min-height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 28px;
    margin-right: 5px;
}

.fa-icons {
    padding: 0 15px;
}
.fa-icons > div {
    padding: 0;
    border: 1px solid #eee;
    margin: -1px 0 0 -1px;
    font-size: 13px;
}

.fa-icons > div > i {
    display: inline-block;
    margin-right: 5px;
    min-width: 40px;
    min-height: 40px;
    border-right: 1px solid #eee;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
}

/* new brand */
.navbar {
    height: 80px;
}

/*@media (min-width: 992px){*/
@media (min-width: 768px){
    .container {
        width: 94%;
        max-width: 1280px;
        position: relative;
    }

    /*.navbar-toggle {
        display: none;
    }*/
}

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

}
.nav.navbar-nav.navbar-right {
    padding-right:180px;
}

/* 手機版本設定 */
@media (max-width: 1099px){
    .nav.navbar-nav.navbar-right {
        background-color: #037dc9;
        margin-top:-1px;
        padding-right:0px;
    }
    .desktop-use.append-navbar.nav-slogan {
        margin-right: 80px;
    }
    .navbar-custom .navbar-nav > .dropdown > .dropdown-toggle:after {
        right:15px;
    }
    .dropdown-menu>li>a{
        color:#FFF;
    }
    .navbar-collapse {
        border-top:1px solid #0471b5;
    }
}
/* 電腦版設定 */
@media (min-width: 1100px){
.navbar-nav > li {
    float: left;
}
}
/*
    .navbar-toggle {
        display: none;
    }
    .nav.navbar-nav.navbar-right {
        background-color: #037dc9;
    }
}
@media (max-width: 1099px){

    .nav.navbar-nav.navbar-right {
        background-color: #037dc9;
    }
}*/

.desktop-use.append-navbar {
    position: absolute;
    right: 0%;
    top: 25px;
}
.desktop-use.append-navbar.nav-slogan a:hover {
    opacity: 0.8;
}
/* footer */
#footer {
    z-index: 1000;
    height: 345px;
    background-color: #0084cf;
    color: #FFF;
    overflow: hidden;
}
#footer:before {
    content: "";
    background-image: url(/assets/images/footer-left.png);
    width: 384px;
    height: 345px;
    position: absolute;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
#footer:after {
    content: "";
    background-color: #0075c1;
    width: calc(100% - 384px);
    margin-left: 384px;
    height: 107px;
    position: absolute;
    bottom: 0px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
div#footer-links {
    position: absolute;
    bottom:0px;
    left: 380px;
    z-index: 99;
}
div#footer-links ul li {
    display:inline-block;
}
div#footer-links ul li + li:before {
    content: "| ";
}
div#footer-links ul li a {
    color:#FFF;
    padding:0px 20px;
}
#footer-slogn-container {
    position: absolute;width: 500px;bottom: 115px;left: 400px;
}
@media (max-width: 968px){

    #footer-slogn-container {
        position: relative;
        left: 0;
        margin: auto;
        z-index: 99;
        width: 80%;
        max-width: 300px;
        /*margin-top: -50px;*/
        top:200px;
    }
    div#footer-links{
        position: relative;
        left: 0;
        text-align: center;
        margin-top: 240px;
    }
}

.content-info {
    font-size: 16px;
    margin-bottom:40px;
}
.content-info b {
    display: inline-block;
    font-size: 18px;
    margin-bottom:10px;
}
.youtube {
    left: 15px;
    position: fixed;
    bottom: 15px;
    width: 50px;
    height: 50px;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 50px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    background: #017dc9;
    /* border: 1px solid #333; */
    /* display: none; */
    z-index: 9997;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}

.facebook {
    left: 15px;
    position: fixed;
    bottom: 75px;
    width: 50px;
    height: 50px;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    line-height: 50px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
    background: #017dc9;
    /* border: 1px solid #333; */
    /* display: none; */
    z-index: 9997;
    -webkit-transition: all 300ms ease;
    -ms-transition: all 300ms ease;
    -o-transition: all 300ms ease;
    -moz-transition: all 300ms ease;
    transition: all 300ms ease;
}
.facebook a, .youtube a {
    display: block;
}
.facebook:hover , .youtube:hover {
    opacity: 0.8;
}