/*************** 初始值 ***************/
html{height: 100%;}
body{
    height: 100%; margin: 0;padding: 0;
    font-size: 15px;color:#fff;background-color: #070707;
}
body,h1,h2,h3,h4,h5,h6{
    line-height: 160%;letter-spacing: 1.2px;
    /* font-family:'Helvetica' , 'Arial' , 'PMingLiU' , 'sans-serif'; */
    font-family:'Open Sans', 'Helvetica' , 'Arial' , 'STHeiti Light', 'Hiragino Sans GB', 'Meiryo', 'Microsoft YaHei UI Light' ,  'Microsoft JhengHei UI Light' , 'Microsoft JhengHei', 'PMingLiU' , 'sans-serif';
}
.title-font{ font-family:'Open Sans', 'Helvetica' , 'Arial' , 'STHeiti Light', 'Hiragino Sans GB', 'Meiryo', 'Microsoft YaHei UI Light' ,  'Microsoft JhengHei UI Light' , 'Microsoft JhengHei', 'PMingLiU' , 'sans-serif';}
.wrap{min-height: 100%; height: auto !important;height: 100%;}
a,a:hover,a:active,a:visited,a:focus{text-decoration:none;}
a,a:visited{color:#ccc;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
a:hover,a:active,a:focus{color:#fff;}
/*************** web通用 ***************/
#greatasia-top {
    display: none;
    position: fixed;
    right: 0;
    bottom: 20px;
    padding: 7px 10px 5px;
    font-size: 24px;
    background: #c7000b;
    color: #fff;
    cursor: pointer;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
#greatasia-top:hover{
    color:#c7000b;
    background-color: #fff;
}
.btn-submit{
    background-color: #c7000b;color:#fff;
    padding:8px 20px;margin:10px 0;
    display: inline-block;
    border:none;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.btn-submit:hover{
    background-color: #ccc;color:#c7000b;
}
.btn-disabled{
    background-color: #666;color:#fff;
    border:none;padding:5px 15px;margin:10px 0;
    -o-transition: background-color .40s ease-in;
    -webkit-transition: background-color .40s ease-in;
    -moz-transition: background-color .40s ease-in;
    transition: background-color .40s ease-in;
}

.btn-blue{
    background-color: #0377c8;
}
.btn-del{
    color: #ccc;
}

.more-btn-box{text-align: center;}
.more-btn{
    margin:0;padding:0;
    color:#ea6252;
    display: inline-block;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
    font-size: 19px;
}
.more-btn:hover{
    color:#e5368d;
}
.page-back-box{
    text-align: center;margin:3% 0;
}
.page-back-btn{
    color:#ccc;
    display: inline-block;
    padding:5px 10px;
    text-align: center;font-size: 30px;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.page-back-btn:hover{
    color:#fff;
}

.masonry {margin: 0 auto;}
#user_gmap{width:100%;height:500px;}
.page{text-align: center;font-size:19px;}
.pagination>li>a, .pagination>li>span {
    color: #ccc;background-color: #070707;border:none;
    font-size: 30px;
    padding: 6px 0 6px 12px;margin:0;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.pagination>li>a:hover, .pagination>li>span:hover {
    color:#fff;
    background-color: #070707;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #070707;
    color:#fff;
    z-index: 10;
}
.pagination>.disabled>a, .pagination>.disabled>a:focus, .pagination>.disabled>a:hover, .pagination>.disabled>span, .pagination>.disabled>span:focus, .pagination>.disabled>span:hover {
    color: #666;
    cursor: not-allowed;
    background-color: #070707;
}


.pagination{position: relative;}
.datepicker-dropdown {
    font-size: 19px;
}
.datepicker table tr td, .datepicker table tr th {
    text-align: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    border: none;
}
.datepicker table tr td.active:active, .datepicker table tr td.active.highlighted:active, .datepicker table tr td.active.active, .datepicker table tr td.active.highlighted.active {
    color: #fff;
    background-color: #009688;
    border-color: #008e81;
}
.form-group label.control-label {
    font-size: 19px;
    line-height: 1.07142857;
    color: #fff;
    font-weight: 400;
    margin: 5px 0 0 0;
}
.radio label {
    cursor: pointer;
    padding-left: 22px;
    position: relative;
    color: rgba(0,0,0, 0.40);
}
.form-group.is-focused .radio label {
  color: rgba(0,0,0, 0.40);
}
.form-group.is-focused .radio label:hover,
.form-group.is-focused .radio label:focus {
  color: rgba(0,0,0, .65);
}
fieldset[disabled] .form-group.is-focused .radio label {
  color: rgba(0,0,0, 0.40);
}
.radio label span {
    left: 0;
    top: 2px;
}
.form-horizontal .radio {
    margin-bottom: 0;
}
.radio input[type=radio] {
    height: auto;
    width: auto;
}
.form-group .checkbox label, .form-group .radio label, .form-group label {
    font-size: 16px;
    line-height: 1.42857143;
    color: #555;
    font-weight: 400;
    padding-right: 15px;
    margin-bottom: 10px;
}
.checkbox label {
  cursor: pointer;
  padding-left: 0;
  color: rgba(0,0,0, 0.40);
}
.form-group.is-focused .checkbox label {
  color: rgba(0,0,0, 0.40);
}
.form-group.is-focused .checkbox label:hover,
.form-group.is-focused .checkbox label:focus {
  color: rgba(0,0,0, .65);
}
fieldset[disabled] .form-group.is-focused .checkbox label {
  color: rgba(0,0,0, 0.40);
}
.form-control[disabled], .form-control[readonly], .form-group .form-control[disabled], .form-group .form-control[readonly], fieldset[disabled] .form-control, fieldset[disabled] .form-group .form-control {
    background-color: rgba(0,0,0,0);
    cursor: not-allowed;
    background-image: none;
    border-bottom: 1px dotted #D2D2D2;
}
.form-control-bottom{border-bottom: 1px dotted #D2D2D2;}
.form-control{color:#fff;}

.gallery_img{width:100%;margin-bottom: 20px;}
.contact-title{margin:0 0 10px;padding:0;color:#c7000b;font-weight: bold;font-size: 21px;}
.contact-data{font-size: 19px;color:#fff;}
.contact-data a{color: #fff;}
.form-group {
    padding-bottom: 7px;
    margin: 0;
}
.googlemap-box{text-align: center;color:#40220f;}
.googlemap-box a{color:#0377c8;}
.googlemap-box a:hover,.googlemap-box a:active,.googlemap-box a:focus{color:#ff0000;}
.googlemap-title{margin:0;font-size:19px;color:#c7000b;}
.modal-header .close{
    -o-transition: opacity .40s ease-in;
    -webkit-transition: opacity .40s ease-in;
    -moz-transition: opacity .40s ease-in;
    transition: opacity .40s ease-in;
}
/*滾動時，動態顯示選單*/
.fixed-strip.affix {
    top: 0;
}
.fixed-strip {
    position: fixed;
    top: -100px;
    right: 0;
    left: 0;
    z-index: 9999;
    -webkit-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}
/***** 圖像效果 *********/
.web-img-effect{
    position: relative;text-align:center;overflow: hidden;
}
.web-img-item {
    width: 100%;
    -moz-transform: scale3d(1, 1, 1);
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -moz-transition: -moz-transform 200ms ease-out;
    -o-transition: -o-transform 200ms ease-out;
    -webkit-transition: -webkit-transform 200ms ease-out;
    transition: transform 200ms ease-out;
}
a:focus .web-img-item,a:hover .web-img-item {
    -moz-transform: scale3d(1.2, 1.2, 1);
    -webkit-transform: scale3d(1.2, 1.2, 1);
    transform: scale3d(1.2, 1.2, 1);
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -moz-transition: -moz-transform 6000ms cubic-bezier(0, 0, 0.8, 0.9);
    -o-transition: -o-transform 6000ms cubic-bezier(0, 0, 0.8, 0.9);
    -webkit-transition: -webkit-transform 6000ms cubic-bezier(0, 0, 0.8, 0.9);
    transition: transform 6000ms cubic-bezier(0, 0, 0.8, 0.9);
}
.web-img-area .web-img-black {
    background-color: rgba(255, 255, 255, 0.2);
    -moz-transition: opacity 100ms ease-out;
    -o-transition: opacity 100ms ease-out;
    -webkit-transition: opacity 100ms ease-out;
    transition: opacity 100ms ease-out;
}
.web-img-area:focus .web-img-black, .web-img-area:hover .web-img-black {
    opacity: 1;
}
.web-img-area .web-img-black {
    opacity: 0;
    -moz-transition: opacity 250ms ease-out;
    -o-transition: opacity 250ms ease-out;
    -webkit-transition: opacity 250ms ease-out;
    transition: opacity 250ms ease-out;
}
.web-img-effect .web-img-black{
    bottom: 0;
    left: 0;
    overflow: hidden;
    padding: 40px;
    position: absolute;
    right: 0;
    top: 0;
}
/***** 圖像效果 *********/

/** image-gallery **/
.btn:not(.btn-raised):not(.btn-link):focus, .btn:not(.btn-raised):not(.btn-link):hover, .input-group-btn .btn:not(.btn-raised):not(.btn-link):focus, .input-group-btn .btn:not(.btn-raised):not(.btn-link):hover {
    background-color: rgba(153,153,153,.2);
    color: #e5368d;
}
.btn:not(.btn-raised).btn-primary, .input-group-btn .btn:not(.btn-raised).btn-primary {
    color: #006dbb;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.modal-content .modal-footer button {
    margin-top: 7px;
}
.modal-content .modal-footer button.pull-left {
    left: 0;
    padding-left: 16px;
    padding-right: 16px;
}
.modal-title {
    margin: 0;
    font-size:19px;
}
/** image-gallery **/

/*************** header相關 ***************/
/** web nav **/
.header{width:100%;position: absolute;top:0;left:0;z-index: 1000;background-color:rgba(0, 0, 0, 0.5);text-align: right;}

/* 此網站特殊使用 */
.header-index{width:100%;position: absolute;z-index: 1000;bottom:0;left:0;background-color:rgba(0, 0, 0, 0.5);text-align: center;}
.header-index-logo{position: absolute;top:15px;left:30px;z-index: 1000;}
.header-index-menu-box{margin:0 auto;line-height: 40px;}
.header-index-menu-box .card-image{float:left;padding:15px 0 15px 30px;}
.header-index-menu-box .menu{
    display: inline-block;
    padding:10px 30px;
    -o-transition: color .40s ease-in,border .40s ease-in;
    -webkit-transition: color .40s ease-in,border .40s ease-in;
    -moz-transition: color .40s ease-in,border .40s ease-in;
    transition: color .40s ease-in,border .40s ease-in;
    color:#ccc;font-size:19px;font-weight: normal;
}
.header-index-menu-box .menu:hover{color:#fff;}
.header-index-menu-box .menu_now{color:#fff;}

.header-menu-box{margin:0 auto;line-height: 40px;}
.header-menu-box .card-image{float:left;padding:15px 0 15px 30px;}
.header-menu-box .menu{
    display: inline-block;
    padding:25px 30px;
    -o-transition: color .40s ease-in,border .40s ease-in;
    -webkit-transition: color .40s ease-in,border .40s ease-in;
    -moz-transition: color .40s ease-in,border .40s ease-in;
    transition: color .40s ease-in,border .40s ease-in;
    color:#ccc;font-size:19px;font-weight: normal;
}
.header-menu-box .menu:hover{color:#fff;}
.header-menu-box .menu_now{color:#fff;}
.header-page{border-bottom: 2px solid #c490bf;}
/** mobile nav **/
.navbar{display: none;font-size:17px;}
/** mobile nav 背景 **/
.navbar, .navbar.navbar-default {background-color: rgba(0, 0, 0, 0.5);}
/** mobile 縮小後按鈕 **/
.navbar-default .navbar-toggle{
    background-color: #000;color: #fff;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.navbar-default .navbar-toggle:focus,.navbar-default .navbar-toggle:hover {background-color: #c7000b;color:#fff;}
/** mobile 縮半及縮小後下拉選單-文字 **/
.navbar-default .navbar-nav{float:right;}
.navbar-default .navbar-nav > li > a{color: #ccc;padding: 17px 5px 13px;margin:0 10px;}
.navbar-default .navbar-nav > li > a:focus,.navbar-default .navbar-nav > li > a:hover{
    color: #fff;background-color: rgba(0, 0, 0, 0.5);
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.navbar-default .navbar-nav > li > a >span{font-size:17px;}
/** mobile 縮半及縮小後下拉選單-目前頁面 **/
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background-color: #c7000b; color: #fff;}
/** mobile 縮小後下拉選單-logo區 **/
.navbar-default .navbar-brand {padding:5px;line-height: 50px;font-size:21px;color: #221814;}
.navbar-default .navbar-brand,.navbar-default .navbar-brand:hover{color:#221814;}
.navbar-toggle{padding:5px 10px;margin:7px 15px 7px 0;min-width:55px;}
.navbar-brand>img {display: inline-block;margin-top: 0;margin-left:5px;position: absolute;}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {max-height: 100%;}

/*************** main相關 ***************/
main{padding-bottom: 146px;margin:0 auto;}
/*************** footer相關 ***************/
footer{width:100%;margin-top:-146px;position:relative;background-color: #12100e;clear:both;}
.footer-box{margin:0 auto;padding:10px 15px;text-align: center;color:#fff;}
.footer-box a{color:#fff;}
.footer-box div{display: inline-block;}
.footer-box .footer-logo{padding:25px 20px;}
.footer-box .footer-social{padding:25px 5px 25px;}

.footer-box2{margin:0 auto;text-align: center;background-color: #000000;padding:5px 0;}
.footer-box2 a{color:#737373;}

.footer-title{font-size: 19px;font-weight: normal;margin:10px 0;}
/*************** index ***************/
.index-box{padding: 3% 0 0;text-align: left;}
.index-content{font-size:15px;color:#333;padding-bottom: 4%;}
.index-arraw{font-size: 19px;}

.index-title{font-size: 24px;color:#777;width:100%;border-bottom: 1px solid #bbb;padding: 0 0 5px;margin-bottom:3%; }
.index-title .more-link{float:right;font-size: 15px;}
.index-title .material-icons{vertical-align: middle;font-size: 40px;line-height: 1px;}





.case-catalog-box{
    padding:30px 30px 0;
}
.index-catalog-title{
    position: relative;
    display: inline-block;
    width:100%;
    padding:0;
    margin: 0 0 30px;
}
.index-catalog-title img{width:100%;}
.index-catalog-title h2{
    position: absolute;text-align: center;width: 100%;
    color: #fff;padding:10px 15px;margin:0;
    font-size: 24px;line-height: 130%;
    -o-transition: color .40s ease-in;
    -webkit-transition: color .40s ease-in;
    -moz-transition: color .40s ease-in;
    transition: color .40s ease-in;
    top:46%;
    top: calc(50% - 20px);
}
a.index-catalog-title h2{
    position: absolute;text-align: center;width: 100%;
    color: #ccc;padding:10px 15px;margin:0;
    font-size: 24px;line-height: 130%;
    -o-transition: color .40s ease-in;
    -webkit-transition: color .40s ease-in;
    -moz-transition: color .40s ease-in;
    transition: color .40s ease-in;
    top:40%;
    top: calc(50% - 50px);
}
a.index-catalog-title:hover h2{
    color: #fff;
}
.index-catalog-item{
    position: relative;
    display: inline-block;
    width:100%;
    padding:0;
    margin: 0 0 30px;
    overflow: hidden;
}
.index-catalog-item img{width:100%;}
.index-catalog-item h2{
    position: absolute;width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;margin:0;padding:10px 0;
    font-size: 19px;line-height: 130%;
    -o-transition: opacity .40s ease-in;
    -webkit-transition: opacity .40s ease-in;
    -moz-transition: opacity .40s ease-in;
    transition: opacity .40s ease-in;
    bottom:0;text-align: center;
    opacity: 1;
}
.index-catalog-item:hover h2{
    color: #fff;
    opacity: 0;
}





.index-news-item{display: inline-block;padding:10px;background-color:#fff;width:100%;}
.index-news-img{width:50%;height:100%;float:left;background-color:#fff;}
.index-news-data{
    width:50%;height:100%;float:left;
    padding-left: 10px;
    background-color:#ffffff;
    text-align: left;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.index-news-data h2{
    font-size: 19px;margin:10px 0;
    line-height: 160%;color:#000;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
a:hover .index-news-data h2{
    color:#c7000b;
}
.index-news-date{
    color:#bbb;
}
.index-news-view{
    color:#bbb;line-height: 140%;margin:0;
}

.index-link-item{
    width:100%;background-color: #fff;text-align: center;padding:20px 10px;margin-bottom:1px;font-size: 19px;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
}
.index-link-item .material-icons{font-size: 50px;padding-bottom: 10px;}
.index-link-item .socicon-facebook{font-size: 50px;padding-bottom: 10px;}
.index-link-item:hover,.index-link-item:active,.index-link-item:focus{
    background-color: #fde9ea;color:#c7000b;
}



.index-about{
    background-image: url('../images/index-about-bg.jpg');
    background-repeat: repeat;
    background-size: cover;
    text-align: center;
    color:#fff;
    padding:5% 0;
}
.index-about-title{
    margin:0 0 3%;
    font-size: 24px;
}
.index-about-data{
    margin:0 0 3%;
}
.index-more-btn{
    font-size: 21px;
    color:#ccc;
}
.index-more-btn:hover{
    color:#fff;
}

.index-contact {
    background-image: url('../images/index-contact-bg.jpg');
    background-position:top center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: left;
}
.index-contact-box{max-width: 1100px;width:100%;margin: 0 auto;padding:0 20px;}
.index-contact-title{font-size: 21px;color:#fddc08;margin:10px 0;}
.index-contact-data{color: #fff;}

a.index-contact-btn{display:inline-block;margin-top: 20px;color:#000;background-color: #fddc08;padding:10px 15px;}
a:hover.index-contact-btn{color:#fff;background-color: #e5368d;}

.index-partner{background-color: #f6f6f6;}
.index-partner-item{padding:0 3% 20px;text-align: center;}
.index-partner-item img{width:100%;max-width: 200px;}

/*************** page ***************/
.main_box{margin: 5% auto;}
.page-padding-bottom{padding-bottom: 4%;}
.page-title{
    font-size:24px;line-height: 160%;
    margin:0;
    color:#3c3c3b;font-weight: bold;
}


.page-bg-title {
    position: absolute;
    z-index: 2;
    text-align: center;
    font-size: 24px;
    color: #777;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 180px;
    height: 45px;
    line-height: 40px;
    top: 50%;
    top: -moz-calc(50% - 20px);
    top: -webkit-calc(50% - 20px);
    top: calc(50% - 20px);
    border: 1px solid #aaa;
}



.page-bread{
    color:#777;font-size: 19px;
    border-bottom: 1px solid #bbb;
    margin:0 0 20px;padding:0 0 3px;
}
.page-bread a{color:#000;}
.page-bread a:hover{color:#c7000b;}
.page-bread span{color:#eee;}

.page-bread-order{float:right;color:#274986;}
.page-bread-order:hover{color:#ea6252;}
.page-bread-order select{cursor: pointer;}

.page-left{
    float:left;
    width:25%;
}
.page-menu-box{
    text-align: left;
    width:100%;
    color:#fff;border:1px solid #ccc;
}
.page-menu-box .page-menu-title{
    margin:0;padding:10px 15px;font-weight: normal;
    background-color:#777;color:#fff;
    font-size:19px;
    border-bottom: 1px solid #bbb;
}
.page-menu-box a{
    display: block;padding:10px 15px;font-size: 19px;
    -o-transition: color .40s ease-in,background-color .40s ease-in;
    -webkit-transition: color .40s ease-in,background-color .40s ease-in;
    -moz-transition: color .40s ease-in,background-color .40s ease-in;
    transition: color .40s ease-in,background-color .40s ease-in;
    color:#000;
    background-color:#fff;
    border-bottom: 1px solid #eee;
}
.page-menu-box a:hover{
    color:#c7000b;background-color: #fde9ea;
}
.page-menu-box >a:nth-last-child(1) {
    border-bottom: none;
}
.page-menu-box .page-menu-now{
    color:#fff;background-color: #c7000b;
}
.page-menu-box .page-menu-bottom{
    background-color:#fff3e8;
    height:40px;width:100%;
}
/** 子分類 **/
.page-menu-sub a{font-size: 17px;color: #3c3c3b;}
.page-menu-sub{display: none;}
.page-right{
    float:left;
    width:75%;padding-left: 20px;
    height: 100%;
}
.page-right .form-group {
    padding-bottom: 7px;
    margin: 0;
}
.page-right-data{
    border:1px solid #bbb;padding:10px 15px;
}
.page-box{padding-top: 20px;padding-bottom: 20px;}
.page-contents{
    padding:15px 0 0;margin-top:15px;
    border-top: 1px solid #888;
}




.page-about-box{
    background-image: url('../images/page-about-bg.jpg');
    background-position:top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 15px;
}
.page-menu-top{text-align: center;color:#fff;font-size: 19px;}
.page-menu-top span,.page-menu-top a{padding:40px 15px;display: inline-block;}
.about-box1-img{position: absolute;bottom:15px;}

.page-team-item{text-align: center;margin-bottom: 30px;}
.page-team-item img{
    -webkit-border-radius: 250px;
    -moz-border-radius: 250px;
    border-radius: 250px;
    max-width: 250px;
}
.page-team-item h2{font-size:19px;font-weight: normal;margin:10px 0;}

.page-idea-item{margin-bottom: 30px;}
.page-idea-item h2{font-size:19px;font-weight: normal;margin:30px 0 10px;color:#0099dd;}

.page-service-box{
    background-image: url('../images/page-service-bg.jpg');
    background-position:top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 15px;
    min-height: 640px;
}
.page-contact-box{
    background-image: url('../images/page-contact-bg.jpg');
    background-position:top center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 15px;
    min-height: 640px;
}
.page-case-box{
    padding:0 30px 0;
}
.page-selection{
    float: right;
}


.masonry_list{margin: 0 auto;width:100%;}
.masonry_item{width:320px;margin:15px;}
.masonry_item img{width:100%;}
.index-catalog-item{
    position: relative;
    display: inline-block;
    width:100%;
    padding:0;
    margin: 0 0 30px;
    overflow: hidden;
}
.page-news-item img{width:100%;}
.page-news-item h2{
    position: absolute;width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;margin:0;padding:10px 0;
    font-size: 19px;line-height: 130%;
    -o-transition: opacity .40s ease-in;
    -webkit-transition: opacity .40s ease-in;
    -moz-transition: opacity .40s ease-in;
    transition: opacity .40s ease-in;
    bottom:0;text-align: center;
    opacity: 1;
}
.page-news-item:hover h2{
    color: #fff;
    opacity: 0;
}

.sp-buttons {
    bottom: 80px;
}
.show_youtube{
    position: relative;
}
.show_youtube .material-icons{
    position: absolute;
    font-size: 40px;
    top:45%;
    left:45%;
    top:calc(50% - 20px);
    left:calc(50% - 20px);
}



/*************** dropdown-menu ***************/
.dropdown-menu{background-color: #c8a157;}
.dropdown-menu li a{color:#fff;padding: 8px 20px;}
.dropdown-menu li a:hover{color:#000;}
.navbar .navbar-nav .open .dropdown-menu>li>a:focus, .navbar .navbar-nav .open .dropdown-menu>li>a:hover{color:#000;}
/*************** dropdown-submenu ***************/
.dropdown-submenu{position:relative;}
.dropdown-submenu:hover{overflow:inherit;}
.dropdown-submenu:hover >.dropdown-menu{margin-left:-1px;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:1px;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#fff;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#000;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;}
/*************** slider-pro ***************/
#slider{overflow: hidden;}
.sp-layer{max-width: 50%;}
.slider-pro{margin: 0 auto;}
.slider-pro p.sp-layer{font-size:19px;}
.sp-previous-arrow:before, .sp-previous-arrow:after, .sp-next-arrow:before, .sp-next-arrow:after{
    background-color:rgba(255,255,255,0.5);
    -o-transition: background-color .40s ease-in;
    -webkit-transition: background-color .40s ease-in;
    -moz-transition: background-color .40s ease-in;
    transition: background-color .40s ease-in;
}
.sp-previous-arrow:hover:before, .sp-previous-arrow:hover:after, .sp-next-arrow:hover:before, .sp-next-arrow:hover:after {
    background-color: rgba(255,255,255,1);
}
/*************** rwd ***************/
@media (max-width: 1250px){
    .header-menu-box{font-size: 19px;}
    .icon-set-mode{margin-top:-2px;font-size: 21px;}
}

@media (max-width: 1100px){
    .header-menu-box{font-size:17px;}
    .header-menu-box>.menu{margin:0;}
    .icon-set-mode{margin-top:-2px;font-size: 19px;}
}
@media (max-width: 992px){
    .contact-data{margin-top: 20px;}
    .header-top-left{display: none;}
}

@media (max-width: 960px){
.header-menu-box .menu{
    padding:25px 12px;
    font-size: 17px;
}

@media (max-width: 760px){
    .header{display: none;} /** web nav 隱藏時機 **/
    .header-index{display: none;}
    .header-index-logo{display: none;}
    .navbar{display: block;} /** mobile nav 顯示時機 **/
    .header-top-left{padding-left: 10px;}

    /* 將選單提前換成小按鈕模式的時機 */
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in {
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }

    .sp-buttons {
        bottom: 10px;
    }
}

@media (max-width: 767px){
    .index-news-box .index-news-title{
        padding:10% 0;
    }
    .page-right{
        width:100%;
        padding:0;
    }
    .page{font-size:15px;}
    .about-box1-img{position:relative;bottom:auto;padding:15px 0 30px;}
    .about-box1-img img{width:100%;max-width:345px;}
}
@media (max-width: 450px){
    .page-bread-order{display: none;}
    .language-text{display: none;}

    .index-news-img{width:100%;}
    .index-news-data{width:100%;padding:10px 0 0;}

}