/***** News Page Bread Crumb*****/
.breadcrumb {
    background-color: #ffffff;
    font-size:1.3rem;
}
.breadcrumb.bg-act { background-color:#fcf4e9; }
.breadcrumb li{ float: left; }
.breadcrumb > li + li:before {
    padding: 0px;
    content: "";
}
.breadcrumb a,
.breadcrumb a:active,
.breadcrumb a:focus,
.breadcrumb a:hover,
.breadcrumb a:visited {
    color:#333;
}
.breadcrumb li:not(:last-child):after {
    padding: 0 10px;
    color: #404040;
    content:')';
}
.breadcrumb a:hover {
    text-decoration: underline;
}
@media screen and (max-width: 1024px) {
    .breadcrumb { font-size:2.3rem; }
}

/***** News Page Thumb Nail Box *****/
.thumbnail{ background-color:#fcf4e9; border: 0; }
.thumbnail img{ border-radius: 10px; }
.thumbnail .caption { color:#0398cc; }
.thumbnail.detail{ background-color:#fff; border: 0px; padding: 0px; }
.thumbnail.detail .thumb-img { border-radius: 0px; }
.thumbnail.detail .caption{ min-height: 200px; }

.thumbnail .box-head{
    width:100%;
    background-image:url(../img/bg-lineLB.png);
    background-color:#fff;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}
.thumbnail .box-head .title{
    padding: 10px;
    color: #336dad;
    font-size: 20px;
}

.caption .title{ font-size: 1.8rem; }
.caption .note{ white-space:pre-wrap; line-height:24px; padding:10px 0; color:#404040;  }

.thumb-img {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    transition: background-color 0.2s ease-out;
    margin-bottom: 15px;
}

.img-bg-box {
    -moz-transition: 0.2s;
    -o-transition: 0.2s;
    -webkit-transition: 0.2s;
    transition: 0.2s;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /*background-size: contain;*/
    /*padding-top: 64.5%;*/
    padding-top: 80%;
}

.img-bg-box:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

.thumb-img  .share {
    position: absolute;
    background-color: rgba(0,0,0,.3);
    color: #fff;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    text-align: center;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: auto;
    -webkit-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.thumb-img:hover .share {
    opacity: 1;
    visibility: visible;
}
.thumb-img:hover .img-bg-box{
    opacity: 0.7;
    transform: scale(1.1);
}
.thumb-img .share .shareTitle {
    font-size: 1.4em;
}

@media screen and (max-width: 1024px) {
    .col-md-3 {width: 100%; }
    .thumbnail{ display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center;  align-items:center; }
    .thumbnail .box-head .title{ font-size: 40px; padding: 20px }
    .thumbnail .caption{ width: 80%; }
    .thumbnail .caption .title{ font-size: 55px; }
    .thumbnail .caption .title.sub{ font-size: 38px; }
    .thumbnail .caption .note{ line-height:90px; font-size: 45px; }
    .thumbnail .caption .note.sub{ line-height:60px; font-size: 32px; }
    .thumb-img{  width: 80%; }
    .page-ctrl-row { font-size: 20px; }
    .btn-xs { font-size: 18px; padding:0 10px;  }
    .thumb-img .share .shareTitle { font-size: 3.4em; }
}
@media only screen and (max-device-width : 414px)  and (max-device-height : 812px){
    /* iPhoneX Portrait */
    .thumbnail .caption{ width: 90%; }
    .thumb-img{  width: 90%; }
}


/*****  Page Change Control Bar ( Next / Prev ) *****/
.page-ctrl-row select{ margin:0 5px; }
.tot-records, .page-size, .tot-page{ color:#337ab7; margin:0 8px; }
.page-bar{ margin:0 10px; }
.page-bar.lf{ margin-left: 50px; }
.page-ctrl-row .btn{ width:80px; }
.page-ctrl-row .btn.ch{ width:80px; }
.page-ctrl-row .br{ display: none;}
@media screen and (max-width: 1024px) {
    .page-ctrl-row .btn{ font-size:26px;padding:5px 10px; width:100px; }
    .page-ctrl-row .btn.tr{ width:120px; }
    .page-ctrl-row{ font-size:26px; line-height:60px; }
    .page-ctrl-row .br{ display: block;}
    .page-ctrl-row .page-bar.lf{display: none;}
}


.act-page-ctrl{ margin-top: 120px; padding: 0 30px; }
.act-page-ctrl div:nth-child(1){ flex: 2; }
.act-page-ctrl div:nth-child(2){ flex: 2; text-align:center; }
.act-page-ctrl div:nth-child(3){ flex: 2; text-align:right; }
.act-page-ctrl a { font-size:18px; font-weight: 300; padding:10px 10px 4px; border-bottom:1px solid #999; }
.act-page-ctrl div:nth-child(2) a { padding:10px 30px 4px; }

@media screen and (max-width: 1024px) {
    .act-page-ctrl a{ font-size: 32px; line-height:60px;  }
    .act-page-ctrl div:nth-child(1){ flex: 2; }
    .act-page-ctrl div:nth-child(2){ flex: 3; }
    .act-page-ctrl div:nth-child(3){ flex: 2; }
}


/***** About Page Image Gallery Area *****/
#idx_gallery {
    float: left;
    width: 100%;
    position: relative;
    /*margin-bottom:40px;*/
    /*padding-bottom:40px;*/
    border-bottom:1px solid #EEEEEE;
    box-sizing:border-box;
}
#idx_gallery #gallery_carousel {
    float: left;
    width: 100%;
}
#idx_gallery #gallery_carousel .gallery_photo {
    float: left;
    height: 180px;
    width: 268px;
    margin-right: 3px;
    display: block;
    overflow: hidden;
}
#idx_gallery #gallery_carousel .gallery_photo img {
    float: left;
    width: 100%;
}
#idx_gallery .prev {
    margin-top: -20px;
    position: absolute;
    z-index: 10;
    left: 0px;
    top: 50%;
    cursor:pointer;
}
#idx_gallery .next {
    margin-top: -20px;
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 50%;
    cursor:pointer;
}
#idx_gallery .caroufredsel_wrapper {
    width:93%!important;
    margin-left:3.5%!important;
}

/***** About Page (Appear) Gallery Area *****/
.idx_gallery {
    float: left;
    width: 100%;
    position: relative;
    box-sizing:border-box;
}
.idx_gallery .gallery_carousel {
    float: left;
    width: 100%;
}
.idx_gallery .gallery_carousel .gallery_photo {
    float: left;
    height: 200px;
    width: 268px;
    margin-right: 3px;
    display: block;
    overflow: hidden;
}
.idx_gallery .gallery_carousel .gallery_photo img {
    float: left;
    width: 100%;
}
.idx_gallery .prev {
    margin-top: -20px;
    position: absolute;
    z-index: 10;
    left: -5px;
    top: 50%;
    cursor:pointer;
}
.idx_gallery .next {
    margin-top: -20px;
    position: absolute;
    z-index: 10;
    right: -5px;
    top: 50%;
    cursor:pointer;
}
.idx_gallery .caroufredsel_wrapper {
    width:93%!important;
    margin-left:3.5%!important;
}

/*Modal to Page Center*/
.vertical-display-table { display:table; height: 100%; width: 100%; }
.vertical-align-center { display: table-cell; vertical-align: middle;}
.modal-content { width:inherit; height:inherit; margin: 0 auto;}
.modal .btn{ width: 120px; font-size: 18px;}
.modal .btn-green{ background-color: rgba(118,163,156,1); color: #fff; }
.modal .btn-green:hover{ background-color: rgba(118,163,156,.8); color: #fff; border-color: #adadad; }
.modal .btn-green:active{ color: #fff; background-color: rgba(118,163,156,.8); }