@charset "utf-8";

/*--for ie8--*/

.ie.ie8 nav.InnerID button.navbar-toggle {
    display: none;
}

.ie.ie8 .Logo {
    margin: 5px auto 0px 15px !important;
}

.ie.ie8 .navbar-header:after {
    clear: none !important;
}

.ie.ie8 .container-fulid,
.ie.ie8 #Header .container,
.ie.ie8 #MainContent .container,
.ie.ie8 .row.Inner_mainMenu .mainMenu .container,
.ie.ie8 footer.container.Footer,
.ie.ie8 .container.AMPAmain,
.ie.ie8 .container.AMPAsub,
.ie.ie8 .container.AMPA_fulid {
    width: 1170px !important;
    margin: 0 auto !important;
}

.ie.ie8 .container-fulid.AMPA_fulid .container,
.ie.ie8 #MainContent .container {
    background: #fff !important;
}

.ie.ie8 .col-md-6,
.ie.ie8 .col-sm-6 {
    width: 50%;
}

.ie.ie8 .col-md-4,
.ie.ie8 .col-sm-4 {
    width: 30%;
}

.ie.ie8 .col-md-3,
.ie.ie8 .col-sm-3 {
    width: 25%;
}

.ie.ie8 .col-md-5,
.ie.ie8 .col-sm-5 {
    width: 41.66%;
}

.ie.ie8 .col-md-7,
.ie.ie8 .col-sm-7 {
    width: 58.33%;
}

.ie.ie8 .col-md-8,
.ie.ie8 .col-sm-8 {
    width: 66.66%;
}

.ie.ie8 .col-md-9,
.ie.ie8 .col-sm-9 {
    width: 75%;
}

.ie.ie8 .tr1 .col-md-4,
.ie.ie8 .tr2 .col-md-4,
.ie.ie8 .tr3 .col-md-4 {
    width: 30%;
}

.ie.ie8 .tr1 .col-md-6,
.ie.ie8 .tr2 .col-md-6,
.ie.ie8 .tr3 .col-md-6 {
    width: 45%;
}

.ie.ie8 .FunMenu .btnIdentity {
    border-bottom: 2px dotted #cccccc;
}

.ie.ie8 .FooterBtn button {
    margin-bottom: 5px;
}

.ie.ie8 .InnerID {
    margin-top: 60px;
}

.ie.ie8 .collapse {
    display: block;
    margin: 10px 0;
    padding: 0;
}

.ie.ie8 .panel-collapse.collapse {
    display: none !important;
}

.ie.ie8 .checkbox input[type="checkbox"],
.ie.ie8 .checkbox input[type="radio"] {
    padding: 0;
    margin: 0px;
    display: block;
    min-height: 25px;
}

.ie.ie8 .share-btn-wrp.animated.fadeOutLeft {
    margin: 0px 0px 0px -50px;
    padding: 0px;
    width: 45px;
}

.ie.ie8 .VipPage.v1 .VerticalBottom,
.ie.ie8 .VipPage.v2 .VerticalBottom,
.ie.ie8 .VipPage.v3 .VerticalBottom {
    padding: 50px 0px 0px 50px;
}

.ie.ie8 .VipIntro.v1 .images,
.ie.ie8 .VipIntro.v2 .images,
.ie.ie8 .VipIntro.v3 .images {
    clear: both;
    display: block;
    float: none;
    width: 280px;
    max-height: auto !important;
    max-width: auto;
}

.ie.ie8 .VipIntro.v1 .images img,
.ie.ie8 .VipIntro.v2 .images img,
.ie.ie8 .VipIntro.v3 .images img {
    width: 100%;
    max-height: auto;
    max-width: auto;
}

.ie.ie8 .col-md-2.text-right .btn-block {
    width: inherit !important;
    float: right !important;
}

.ie.ie8 .col-md-3.sidebar-offcanvas.in {
    width: inherit !important;
}

.ie.ie8 .Footer .row img.QRcode {
    position: absolute;
    top: 10px !important;
    right: 10px !important;
    max-width: 100px !important;
}

.ie.ie8 .TfunBtn {
    background: #fff url(../images/TfunBtn_bg.png) repeat-x 0px 1px !important;
}

.ie.ie8 .RWDRoleMenu.InnerID .collapse.navbar-collapse {
    display: none !important;
}

.ie.ie8 .scrollup {
    background: #ccc !important;
}

/* .ie.ie8 .fullslide {
    top: -65px;
}
*/
.ie.ie8 .newsblock ul.list li a {
    color: #333;
}

.ie.ie8 .RWDRoleMenu.InnerID .collapse.navbar-collapse {
    display: block !important;
}

.ie.ie8 .RWDRoleMenu {
    top: 429px;
    right: 0px;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child {
    border-bottom: 8px solid #00b5e6;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child + .btnIdentity {
    border-bottom: 8px solid #dc241f;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child + .btnIdentity + .btnIdentity {
    border-bottom: 8px solid #87d300;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child:hover {
    background: #00b5e6;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child:hover + .btnIdentity:hover {
    background: #dc241f;
}

.ie.ie8 .RWDRoleMenu .btnIdentity:first-child:hover + .btnIdentity:hover + .btnIdentity:hover {
    background: #87d300;
}

.ie.ie8 .visible-lg-inline {
    display: inline-block !important;
}


/*--for ie9 --*/


/*--reset--*/

body {
    font-size: initial !important;
    position: relative;
    color: #333 !important;
    padding: 0 !important;
    margin: 0 !important;
}

body,
h1,
h2,
h3,
h4 {
    font-family: "微軟正黑體", Arial, Helvetica, sans-serif !important;
    text-align: inherit;
    line-height: 1.65em !important;
}

h3,
h4 {
    font-size: 1.2em;
    margin: 0 auto;
}

select {
    padding: 8px 12px;
}


/* Links */

a {
    text-decoration: none;
    color: #333;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

a:hover,
a:focus {
    color: #999;
    text-decoration: none;
}

a img {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}


/* footer social icons */

ul.social-network {
    list-style: none;
    display: inline;
    margin-left: 0 !important;
    padding: 0;
}

ul.social-network li {
    display: inline;
    margin: 0 2px;
}

/* indexpage slick one-time style */
.one-time div img{ height: 650px; object-fit: cover; }

/* footer social icons */

.social-network a.icoRss:hover {
    background-color: #F56505;
}

.social-network a.icoFacebook:hover {
    background-color: #3B5998;
}

.social-network a.icoTwitter:hover {
    background-color: #33ccff;
}

.social-network a.icoGoogle:hover {
    background-color: #BD3518;
}

.social-network a.icoVimeo:hover {
    background-color: #0590B8;
}

.social-network a.icoLinkedin:hover {
    background-color: #007bb7;
}

.social-network a.icoRss:hover i,
.social-network a.icoFacebook:hover i,
.social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i,
.social-network a.icoVimeo:hover i,
.social-network a.icoLinkedin:hover i {
    color: #fff;
}

a.socialIcon:hover,
.socialHoverClass {
    color: #44BCDD;
}

.social-circle li a {
    display: inline-block;
    position: relative;
    margin: 0 auto 0 auto;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    text-align: center;
    width: 50px;
    height: 50px;
    font-size: 20px;
}

.social-circle li i {
    margin: 0;
    line-height: 50px;
    text-align: center;
}

.social-circle li a:hover i,
.triggeredHover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms--transform: rotate(360deg);
    transform: rotate(360deg);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -o-transition: all 0.2s;
    -ms-transition: all 0.2s;
    transition: all 0.2s;
}

.social-circle i {
    color: #fff;
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    -o-transition: all 0.8s;
    -ms-transition: all 0.8s;
    transition: all 0.8s;
}

.social-circle a {
    background-color: #D3D3D3;
}


/* counter */

.counter {
    color: #c00;
    font-size: 1.5em;
    text-align: center;
    position: absolute;
    top: 10px;
    right: 10px;
    border-radius: 5px;
    text-shadow: 0 1px 0 #000;
    font-weight: bold;
}

.counter span {
    background: url(../images/counter_bg.png) repeat-x 0 0;
    line-height: 1.2em;
    display: inline-block;
    margin: 0 2px 0 0;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 5px;
    border: 1px solid #555444;
}

.IDBTN {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
}

.AMPAmain {
    background-color: #fff;
    position: static;
    z-index: 999;
    margin-top: -50px;
    padding: 0;
    /* right: 0; */
}

.AMPAsub {
    position: relative;
    z-index: 2;
}


/* Full Slider */

.fullslide {
    width: 100%;
    margin: 0 !important;
    padding: 0;
    position: relative;
    z-index: 1;
    top: 0px;
}

.fill {
    width: 100%;
    /* height: 100%; */
    height: 650px;
    text-align: center;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.slick-dots li {
    width: 24px;
    height: 24px;
}


/* carousel-inner fade in/out */

.fullslide .carousel-inner .item {
    transition-property: opacity;
}

.fullslide .carousel-inner .item,
.fullslide .carousel-inner .active.left,
.fullslide .carousel-inner .active.right {
    opacity: 0;
}

.fullslide .carousel-inner .active,
.fullslide .carousel-inner .next.left,
.fullslide .carousel-inner .prev.right {
    opacity: 1;
}


/* newsblock */

.newsblock {
    margin: 0px;
    padding: 0px 0 0 0;
    overflow: hidden;
    text-align: left;
    position: absolute;
    bottom: 50px;
    left: 15px;
}

.newsblock h2 {
    color: #fff;
    font-size: 1.5em;
    margin: 0 0 0px 10px;
    font-weight: bold;
    text-shadow: 0 1px 1px #000;
}

.newsblock .more {
    float: right;
    text-shadow: none;
}

.newsblock .more a {
    letter-spacing: normal;
    color: #333 !important;
    background: #fff;
    padding: 2px 5px;
    font-size: 0.6em;
    border-radius: 5px;
}

.newsblock .more:hover a {
    border: none;
}

.newsblock .newBox {
    width: 500px;
    height: 260px;
    background: url(../images/new_bg.png) repeat-x 0 0 ! important;
    border-radius: 6px;
    padding: 5px;
}

.newsblock ul.list {
    height: 260px;
    overflow-y: auto;
    padding: 5px;
    margin: 0;
}

.newsblock ul.list li {
    padding: 3px;
    display: block;
    margin: 0 0 5px 0;
    position: relative;
}

.newsblock ul.list li:last-child,
.newsblock ul.list li:last-child a:hover {
    border-bottom: none;
    border-radius: none;
}

.newsblock ul.list li img {
    vertical-align: middle;
    box-shadow: none;
    margin: 0 0 0 3px;
}

.newsblock ul.list li a {
    color: #fff !important;
    padding: 3px 3px 3px 1em;
    font-weight: bold;
    display: inline-block;
    line-height: 1.65em;
    width: 80%;
}

.newsblock ul.list li a:before {
    content: "●";
    color: #fff !important;
    font-size: 11px;
    padding-right: 0px;
    margin-left: -1em;
}

.newsblock ul.list li,
.newsblock ul.list li:hover {
    border: none !important;
}

.newsblock ul.list li:hover a {
    color: #f39c12 !important;
    border: none;
    border-bottom: 1px dotted #ccc;
    border: none;
}

.newsblock ul.list li em {
    font-style: normal;
    color: #CCC !important;
    font-weight: bold;
    margin: 5px 3px 0 0px;
    position: absolute;
    right: 0;
}


/* ----------header------------- */

header {
    z-index: 998;
    position: relative;
}

.Content > button,
.Content > input[type="submit"],
.Content > input[type="reset"],
.Content > input[type="button"] {
    background-color: #CCC;
}

.Content .button:hover,
.Content input[type="submit"]:hover,
.Content input[type="reset"]:hover,
.Content input[type="button"]:hover {
    background-color: #999;
    border-color: transparent;
}

.nav .open>a,
.nav .open>a:hover,
.nav .open>a:focus {
    background-color: transparent;
}

.pagination>.active>a,
.pagination>.active>span,
.pagination>.active>a:hover,
.pagination>.active>span:hover,
.pagination>.active>a:focus,
.pagination>.active>span:focus {
    background-color: #666;
}

.SearchBox #searchFormRWD,
.SearchBox form {
    display: none;
}

.TtopNav .container {
    height: 60px;
}

.pageright {
    width: 1170px;
    overflow: hidden;
    clear: both;
    display: block !important;
    margin: 0 auto;
    padding: 0;
    line-height: 0.938em;
}

.KVbanner {
    margin: 0px auto 0 auto;
    text-align: center;
    position: relative;
    z-index: 8;
}

.KVbanner img {
    width: 100%;
}

.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
    background-color: #333;
}

.btn-default {
    color: #ffffff;
    background-color: #999;
    border-color: #999;
}

.row.Inner_mainMenu {
    margin: 0;
}


/* ----------MainContent------------- */

#MainContent >.container > .row {
    background-color: #FFF;
    padding: 0 35px 60px 35px;
    min-height: 550px;
}

#MainContent h2 {
    background: url(../images/h2_bg.gif) no-repeat 0 bottom;
    margin: 0 auto 20px auto;
    padding-bottom: 8px;
    font-weight: bold;
    font-size: 1.25em;
}

#MainContent>.row> .Content> p {
    color: #444;
    font-size: 1.125em;
    line-height: 1.8em;
}

.Function a,
.Function a:visited,
.Function a:focus {
    color: #333;
    padding: 8px 8px 8px 0;
}

.Function a:nth-child(2):before {
    color: #666;
    border-radius: 50px;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border: 1px solid #666;
}

.Function a:first-child:before + a:before {
    border: 1px solid #666;
}

.TemplateBox .row .editArea li {
    list-style-type: none;
}

.DisplayNone {
    display: none !important;
}

.date {
    color: #999;
}


/* carousel Box */

.SetBox .container-fluid .row,
.TemplateBox .row,
.TfunBtn,
.TemplateBox .row {
    text-align: center;
    margin: 0 auto;
    clear: both;
    width: 100%;
}

.TemplateBox .row .editArea {
    max-width: 1170px;
    text-align: center;
    margin: 0 auto;
}

.CarouselBox {
    position: relative;
    margin: 0 auto 15px auto;
}


/* RWDRoleMenu：btnIdentity Button  */

.RWDRoleMenu {
    margin: 0 0px;
    display: block;
    position: absolute;
    top: 556px;
    right: 0px;
    z-index: 99;
}

.RWDRoleMenu .btnIdentity {
    display: inline-block;
    float: left;
    width: 150px;
}

.Sticker,
.FunMenu {
    text-align: left;
    position: absolute;
    z-index: 2;
    left: 0;
    right: 0;
    border-spacing: inherit;
}

.btnIdentity img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    padding: 5px !important;
    margin: 0 5px 5px 0;
}

.RWDRoleMenu .btnIdentity img {
    display: none;
}

.RWDRoleMenu .btnIdentity {
    left: 0;
    text-align: center;
    display: block;
    margin: 0px;
    cursor: pointer;
    -o-transition: .5s !important;
    -ms-transition: .5s !important;
    -moz-transition: .5s !important;
    -webkit-transition: .5s !important;
}

.RWDRoleMenu .btnIdentity p {
    margin: 0;
    padding: 0;
    position: relative;
}

.RWDRoleMenu .btnIdentity:hover {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.RWDRoleMenu .btnIdentity:last-child {
    margin-right: 0px;
}

.RWDRoleMenu .btnIdentity a {
    display: block;
    font-size: 1.5em;
    padding: 8px 0;
    line-height: 1.2em;
    color: #FFFFFF !important;
    text-shadow: 1px 1px 0 #333;
}


/**/

.RWDRoleMenu .btnIdentity:hover {
    margin-top: -10px;
    padding-bottom: 10px;
}

.RWDRoleMenu .btnIdentity:nth-child(1) {
    background: url(../images/btnIdentity-tab1.png) no-repeat 0px 0px;
}

.RWDRoleMenu .btnIdentity:nth-child(2) {
    background: url(../images/btnIdentity-tab2.png) no-repeat 0px 0px;
}

.RWDRoleMenu .btnIdentity:nth-child(3) {
    background: url(../images/btnIdentity-tab3.png) no-repeat 0px 0px;
}

.RWDRoleMenu .btnIdentity:first-child {
    background: url(../images/btnIdentity-tab1.png) no-repeat 0px 0px;
}

.RWDRoleMenu .btnIdentity:first-child + .btnIdentity {
    background: url(../images/btnIdentity-tab2.png) no-repeat 0px 0px;
}

.RWDRoleMenu .btnIdentity:first-child + .btnIdentity + .btnIdentity {
    background: url(../images/btnIdentity-tab3.png) no-repeat 0px 0px;
}
.one-time .slick-dots{ bottom: 30px; margin-left: 0; }

/*----TfunBtn--*/

.TfunBtn {
    margin: 0px 0px;
    padding: 10px 0px 30px 0;
    z-index: 1;
    position: relative;
    -webkit-box-shadow: 0px 0px 6px 0px #999;
    -moz-box-shadow: 0px 0px 6px 0px #999;
    box-shadow: 0px 0px 6px 0px #999;
    background: #fff url(../images/TfunBtn_bg.png) repeat-x 0px 1px;
}

.TfunBtn:nth-child(2) {
    background: none !important;
    box-shadow: none;
}

.TfunBtn:first-child + .TfunBtn {
    background: none !important;
    box-shadow: none;
}

span.maskbg {
    width: 100%;
    height: 90px;
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    background: url(../images/TfunBtn_maskbg.png) repeat-x 0px bottom;
}

.menuRow0 {
    padding: 0 !important;
}


/*no TfunBtn rest padding*/

.tr1.mr1.TfunBtn {
    bottom: 40px;
}


/*三組二列*/

.tr2.mr1.TfunBtn {
    bottom: 100px;
}

.tr2.mr2.TfunBtn {
    bottom: 40px;
}

.TfunBtn .col-md-12 {
    width: 96%;
}

.TfunBtn .col-md-6 {
    width: 46%;
}

.TfunBtn .col-md-4 {
    width: 30%;
}

.TfunBtn div {
    padding: 5px 0;
    display: inline-block;
    margin: 0 15px;
    font-size: 1.5em;
    color: #008f41;
    background: url(../images/TfunBtn_libg.png) no-repeat right center;
}

.TfunBtn div:last-child {
    background: none;
}

.TfunBtn div p {
    margin: 5px auto;
    text-align: center;
}

.TfunBtn div p img {
    width: 65px;
    height: 65px;
    padding: 8px;
    display: block;
    margin: 5px auto;
    line-height: 60px;
    border-radius: 50%;
}

.TfunBtn div p a {
    text-decoration: none;
    display: block;
    margin: 5px auto;
}

.TfunBtn div:hover {
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.TfunBtn div:hover a {
    color: #fff !important;
}


/* InnerBody FunMenu Button  */

.FunMenu {
    text-align: center;
    position: inherit;
    top: inherit;
    margin: 30px auto;
}

.FunMenu .btnIdentity img {
    width: 45px;
    height: 45px;
    line-height: 45px;
    border-radius: 0;
    margin: -3px 0 0 0;
    padding: 0 !important;
    box-shadow: none !important
}

.FunMenu .btnIdentity.active,
.FunMenu .btnIdentity:hover {
    background-color: #00b5e6;
}

.FunMenu .btnIdentity + .btnIdentity.active,
.FunMenu .btnIdentity + .btnIdentity:hover {
    background-color: #dc241f;
}

.FunMenu .btnIdentity + .btnIdentity + .btnIdentity.active,
.FunMenu .btnIdentity + .btnIdentity + .btnIdentity:hover {
    background-color: #87d300;
}

.FunMenu .btnIdentity {
    color: #fff;
    left: auto;
    display: inline-block;
    text-align: center;
    width: 31%;
    margin: 0 12px 0px 0;
    padding: 10px 12px 5px 12px;
    font-size: 1.25em;
    font-weight: bold;
    border-radius: none;
    border-bottom: none;
    background-color: #ccc;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    -o-transition: .5s !important;
    -ms-transition: .5s !important;
    -moz-transition: .5s !important;
    -webkit-transition: .5s !important;
}

.FunMenu .btnIdentity p {
    margin: 0;
    padding: 0;
}

.FunMenu .btnIdentity p a {
    display: block;
    text-shadow: none !important;
    color: #fff !important;
}

.FunMenu .btnIdentity:hover a {
    color: #fff !important;
}


/**/

.btnLoginList div {
    margin: 20px 5px;
}

.btnLoginList div .btn-lg {
    padding: 10px;
}

.btnLoginList div .btn {
    font-size: 1.25em;
}


/*SearchBox*/

.collapse.navbar-collapse.SearchBox {
    display: none !important;
}


/*Font color/size*/

.SearchBox a> i {
    color: #fff;
}

.SearchBox {
    margin: 0 0 0 5px;
}

.Logo {
    text-align: center;
    margin: 0px 0 0 0;
}

.Logo img {
    max-width: 280px;
    max-height: 70px;
    width: auto;
    height: auto;
    margin: 0px auto;
}

.Logo.fixed-nav {
    position: fixed;
    top: 5px;
    z-index: 999;
}


/* Product  */

.Product,
.newsList {
    padding: 0px 15px;
}

.Product h2,
.newsList h2 {
    background: url(../images/h2products_bg.gif) no-repeat 0 bottom;
    font-weight: bold;
    font-size: 1.5em;
    color: #1f1d60;
}

.Product .responsive {
    margin: 20px 0;
}

.Product .responsive div {
    margin: 0 auto;
}

.Product .responsive > div img {
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 15px;
    width: 150px;
    height: 150px;
}

.Product h2 .more,
.newsList h2 .more {
    float: right;
    font-size: 0.75em !important;
}

.Product .responsive .slick-dots {
    bottom: -10px !important;
}

.fixed-bg .TopLink {
    font-size: 0.85em;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.newsList ul.list li em {
    font-style: normal;
    color: #999;
}

.fixed-bg>.TopLink>a {
    color: #FFF;
}

.TopLink .dropdown-menu {
    min-width: auto;
    margin: 0;
}

.TopLink .dropdown-menu>li>a {
    padding: 5px 20px 5px 18px !important;
}

.TopLink .dropdown-menu>li {
    border-bottom: 1px solid #444;
    margin: 0;
    padding: 0 !important;
}

.TopLink .dropdown-menu>li:last-child {
    border-bottom: none;
}


/**/

.img-responsive.exhLogo {
    margin: 0 auto;
    text-align: center;
    max-height: 250px;
}


/*.navbar*/

.navbar {
    border-radius: 0 !important;
}

.navbar-brand {
    padding: 0;
    margin: 5px auto 0px 0px !important;
    height: auto;
}

.Logo.fixed-nav {
    margin: 5px auto 0px -8px !important;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.Logo.fixed-nav img {
    height: 45px !important;
}


/*---topNav-----*/

.TtopNav {
    padding: 0px 0 0px 0;
    margin-bottom: 0px;
}

.TtopNav .navbar {
    margin: 0 0 5px 0;
    min-height: inherit !important;
    border-bottom: none;
}

.TopLink li.dropdown.open:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 15px;
    bottom: -5px;
    border-width: 0px 8px 8px 8px;
    border-style: solid;
    box-shadow: none;
    border-color: #fff transparent;
}


/*TopLink*/

.TopLink {
    margin: 10px 0 0 0;
    float: right \9;
}

.TopLink>li {
    float: left;
    display: inline-block;
    color: #fff;
    margin: 0 4px 0 0;
    padding: 0;
}

.TopLink>li>a {
    padding: inherit;
    font-size: 0.9em;
    display: inline;
    border: none;
    padding: 5px 5px;
}

.TopLink>li>a strong {
    display: none;
}

.TopLink>li.dropdown>a i.caret {
    vertical-align: top;
    right: -6px;
    top: 50%;
    position: absolute;
    color: #fff;
}

.TopLink>li>a:hover,
.TopLink>li>a:focus {
    background-color: transparent;
}

.TopLink>li.dropdown .dropdown-menu li>a:hover {
    background: #c9c9c9;
}

.TopLink li img {
    height: 25px;
}


/*--------- topMenu------*/

.TtopNav .topMenu {
    display: none;
}

.mainMenu .topMenu {
    display: block;
    background: none !important;
    text-align: center;
    float: none;
}


/*---------mainMenu------*/

.mainMenu {
    position: relative;
    width: 100%;
    z-index: 9;
    right: 0;
    left: 0;
    text-align: center;
    background-color: #0f0c4a;
}

.navbar-fixed-top {
    position: fixed;
    top: 0px;
}

.mainMenu .topMenu {
    text-align: center;
    margin: 0 auto;
    padding: 0;
    float: none;
}

.mainMenu .topMenu>li:first-child {
    border-right: 0;
}

.mainMenu .topMenu>li {
    display: inline-block;
    position: relative;
    float: none;
    margin: 0 0 0 -5px;
    background: url(../images/menu_libg.png) no-repeat right center;
}

.mainMenu .topMenu>li:last-child {
    background: none;
}

.mainMenu .topMenu>li i.caret {
    display: none;
}

.mainMenu .topMenu>li>a {
    display: inline-block;
    padding: 10px 7px;
    text-decoration: none;
    color: #fff;
    line-height: inherit;
    font-size: 1em;
}

.mainMenu .topMenu ul {
    position: absolute;
    left: -4000px;
    min-width: 225px;
    margin-top: -35px;
    z-index: 9 !important;
    text-align: left;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    background-color: #666;
}

.mainMenu .topMenu > li:hover ul {
    left: 0 !important;
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    margin: 0 0 0 0;
    transition: opacity .5s .1s, margin-top .5s, left 0s 0s;
}

.mainMenu .topMenu > li:hover ul:before {
    left: 0;
    margin: 0;
    padding: 0;
}

.mainMenu .topMenu ul li {
    display: block;
    line-height: 2.5em;
    margin: 0 0 0 -40px;
    padding: 0;
    border-bottom: 1px solid #555;
}

.mainMenu .topMenu ul li:last-child {
    border-bottom: 0;
}

.mainMenu .topMenu ul li>a {
    display: block !important;
    color: #ccc;
    line-height: 1.65em;
    padding: 5px 10px 5px 20px !important;
    margin: 0;
}

.mainMenu .topMenu ul li a:before {
    content: '\e831';
    font-family: 'fontello';
    margin: 0 3px 0 -10px;
}

.mainMenu .topMenu>li>a:hover, .mainMenu .topMenu>li>a:focus{
    color: #fff; background-color:transparent;
}
.mainMenu .topMenu>li>a.dropdown-toggle:hover, .mainMenu .topMenu>li>a.dropdown-toggle:focus{
    color: #fff;display: block;
}


.mainMenu .topMenu ul li a:hover {
    color: #fff !important;
}


/*-----search---------*/

input.search-form {
    background: transparent;
    border: 0 none;
    width: 120px;
    height: 30px;
    padding: 3px 25px 3px 8px !important;
    *padding: 3px 25px 5px 8px !important;
    margin: 0 0px;
    color: #333 !important;
    border-radius: 2px;
    background-color: #fff;
    -webkit-transition: all 400ms;
    -moz-transition: all 400ms;
    -ms-transition: all 400ms;
    -o-transition: all 400ms;
    transition: all 400ms;
}

input.search-form::-webkit-input-placeholder {
    color: transparent;
}

input.search-form:hover::-webkit-input-placeholder {
    color: #FFF;
}


/*--------btn------*/

.btn-transparent {
    background-color: transparent;
    border: none;
    font-size: 1.2em;
    color: #333 !important;
}

.footerAD {
    display: none;
}

.navbar-toggle {
    display: none;
}

.btn-transparent:hover {
    background-color: transparent;
}

.btn-transparent:hover i:hover {
    color: #c00;
}



/* scroll to top */

.scrollup {
    position: fixed;
    width: 50px;
    height: 50px;
    bottom: 15%;
    right: 15px;
    background: #555;
    opacity: 0.9;
    -moz-opacity: 0.9;
    filter: alpha(opacity=90);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transition: background 200ms linear;
    -moz-transition: background 200ms linear;
    -o-transition: background 200ms linear;
    transition: background 200ms linear;
    -webkit-backface-visibility: hidden;
    z-index: 99999;
}

a.scrollup {
    outline: 0;
    text-align: center;
    text-decoration: none;
}

a.scrollup:hover {
    text-decoration: none;
    background-color: #333;
}

a.scrollup i {
    font-size: 25px;
    line-height: 45px;
    color: #fff;
}

a.scrollup i:hover {
    text-decoration: none;
}


/* ----------Footer------------- */

.Footer .row {
    position: relative;
    min-height: 120px;
    clear: both;
    font-size: 0.85em;
    color: #333;
    padding: 0 15px;
    background: #cecece;
}

.Footer.FooterIndex .row {
    margin: 0px;
}

.foot_c {
    font-size: 0.85em !important;
}

.Footer .row img {
    vertical-align: middle;
}

.Footer .row a {
    color: #333;
}

.Footer .row a:hover {
    text-decoration: underline;
}

.Footer .row .foot_l {
    margin: 0px 100px 10px 0px;
    text-align: left;
}

.Footer .row .foot_l span {
    color: #333;
    padding: 0 2px;
}

.Footer .row .foot_l p,
.Footer .foot_l p a {
    color: #333;
    text-align: left;
}

.Footer .row .foot_l p a {
    display: inline-block;
}

.Footer .row .foot_l .p1 {
    margin: 0 0 5px 0;
    font-weight: bold;
}

.Footer .row .foot_l .p2 {
    color: #333;
    width: 100%;
    text-align: left;
}

.Footer .row img.QRcode {
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 100px;
    max-height: none !important;
    height: inherit !important;
}

@media screen and (min-width:991px) and (max-width:1199px) {
    .uk-navbar-nav>li {
        margin: 0px -2px !important;
    }
    .Logo img {
        max-height: 50px;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .topbanner,
    .pageright {
        width: 750px;
    }
    .Logo img {
        max-height: 50px;
    }
    .counter {
        font-size: 1.25em;
        top: 10px;
    }
    .newsblock .newBox {
        width: 435px;
    }
    .RWDRoleMenu .btnIdentity {
        width: 110px;
    }
    .RWDRoleMenu .btnIdentity p a {
        font-size: 1.2em;
        padding: 11px 0 10px 0;
    }
    .TfunBtn div {
        font-size: 1.2em;
    }
    .TfunBtn div.col-md-6 {
        margin: 0 0 0 10px
    }
    .TfunBtn div.col-md-4 {
        width: 30%;
        margin: 0 0 0 15px
    }
    .mainMenu .topMenu {
        max-width: 768px;
    }
    .mainMenu .topMenu>li a {
        padding: 5px;
    }
    .list-group {
        display: none;
    }
    .btnLoginList div {
        width: 48%;
    }
    /*.mainMenu .container,
.TtopNav .container,
.row,
.SetBox .row,
.fullslide,
.TfunBtn,
.Footer .row {
width: 750 !important;
}*/
.uk-navbar-nav>li {
    margin: 0px 0px;
}
}

@media (max-width: 767px) {
    #photoDetail {
        display: none;
    }
    .loginbtnCenter {
        text-align: left !important;
    }
    .Content {
        font-size: 1.25em !important;
        line-height: 1.65em !important;
    }
    .Sticker {
        /* margin-top:70px; */
        position: absolute;
        display: block;
        outline: : 1px solid red;
        top: inherit;
        left: 12px;
    }
    .Sticker img {
        height: 75px !important;
        object-fit: cover !important;
    }
    .counter {
        position: static;
        width: 100%;
        padding: 5px;
        margin: 0px 0 0 0 !important;
        background: #fde10b;
    }
    #counter {
        position: static;
        width: 100%;
        padding: 5px;
        margin: 70px 0 0 0 !important;
    }
    .fill {
        height: 300px;
        text-align: center;
        -webkit-background-size: contain !important;
        -moz-background-size: contain !important;
        background-size: contain !important;
        -o-background-size: contain !important;
        background-size: contain !important;
    }
    /* indexpage slick one-time style */
    .one-time div img{ height: auto; object-fit: contain; }
    body {
        background: #000;
    }
    header {
        background: url(../images/header_bg.png) repeat-x 0 0;
    }
    /*.TtopNav .container,
.row,
.SetBox .row,
.fullslide,
.TfunBtn,
.Footer .row,
.container-fluid.SetBox .mainMenu,
.mainMenu {
width: 100% !important;
margin: inherit !important;
}*/
.form-group {
    clear: both;
}
#MainContent h2,
.Content h3,
.Content h4,
.SitemapBox .panel .panel-heading,
.btnLoginList div .btn {
    font-size: 1em;
}
.navbar-toggle,
.SearchBox #searchFormRWD {
    display: block;
}
#MainContent >.container > .row {
    background-color: #FFF;
    padding: 0 15px 30px 15px;
}
.KVbanner {
    display: none;
}
.navbar-default {
    background-color: #FFF;
}
/*.navbar*/
.navbar-brand {
    padding: 0;
    margin: 0px auto 0px -5px;
    height: 55px;
}
.TtopNav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
.ProductInfo .row .col-xs-6 {
    width: auto;
    margin: 5px 0;
}
.Logo {
    text-align: center;
    margin: 5px auto !important;
    z-index: 1;
    float: none !important;
    position: absolute;
        /*width: 100%;
        height: 50px;*/
        vertical-align: middle;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .Logo img {
        max-height: 50px;
        max-width: 210px;
    }
    .navbar-toggle i {
        font-size: 2.3em;
    }
    .Footer .row .foot_l {
        margin: 0px;
    }
    button.navbar-toggle,
    .TtopNav .offcanvas-toggle {
        color: #fff;
        margin: 0px 6px;
        padding: 0px;
        background-color: transparent !important;
        z-index: 999;
    }
    .navbar-toggle i.btn-lg {
        margin: 0 0px;
        padding: 3px 3px;
        float: left;
    }
    .Logo.fixed-nav {
        margin: 5px auto 0px -5px !important;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s;
    }
    .Logo.fixed-nav img {
        height: 55px !important;
    }
    /**/
    .newsblock .newBox,
    .newsblock ul.list {
        height: auto !important;
        overflow: none !important;
        background: none !important;
    }
    .newsblock ul.list {
        overflow-y: none !important;
        height: auto !important;
        width: 98%;
        margin: 0 auto;
    }
    .newsblock {
        display: none
    }
    .newsblock .newBox {
        width: 100%;
        padding: 0;
    }
    .newsblock ul.list li {
        margin: 0 0 5px 1em !important;
    }
    .newsblock ul.list li a:before {
        margin-left: -2.6em !important;
    }
    .newsblock ul.list li,
    .newsblock ul.list li em {
        position: inherit !important;
    }
    .newsblock ul.list li a {
        width: auto !important;
        display: inline !important;
    }
    .newsblock ul.list li em {
        right: auto !important;
    }
    .AMPAmain {
        margin-top: 50px;
    }
    .TfunBtn {
        text-align: center;
        bottom: 0 !important;
        margin: -40px 0 15px 0 !important;
        padding: 0 15px !important;
        left: 0;
        overflow: inherit;
        bottom: 0 !important;
        z-index: 1 !important;
        width: 100%;
    }
    .tr2.mr1.TfunBtn {
        bottom: 112px !important;
    }
    .tr2.mr2.TfunBtn {
        bottom: 0px !important;
    }
    .TfunBtn div,
    .TfunBtn div p {
        -webkit-transform: skew(0deg) !important;
        -moz-transform: skew(0deg) !important;
        -o-transform: skew(0deg) !important;
        transform: skew(0deg) !important;
        margin: 0px;
    }
    .TfunBtn div {
        width: 100% !important;
        padding: 10px !important;
        margin: 10px 0;
        color: #008f41;
        display: block;
        background: none;
    }
    /* .fullslide {
        top: 0px;
        margin: 0 15px;
        width: auto !important;
        height: 210px !important;
    }
    .fullslide .backstretch img {
        width: 100% !important;
        height: auto !important;
        right: 0 !important;
        left: 0 !important;
        } */
        /*InnerBody FunMenu*/
        .FunMenu .btnIdentity,
        .RWDRoleMenu .FunRWDMenu .btnIdentity {
            display: block;
            width: 100%;
        }
        .FunMenu .btnIdentity img,
        .RWDRoleMenu .FunRWDMenu .btnIdentity img {
            width: 40px;
            height: 40px;
        }
        /* InnerBody FunMenu Button  */
        .RWDRoleMenu .FunRWDMenu {
            text-align: center;
            position: inherit;
            top: inherit;
            padding-bottom: 10px;
            margin: 0px auto;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity img {
            width: 45px;
            height: 45px;
            line-height: 45px;
            border-radius: 0;
            margin: -3px 0 0 0;
            padding: 0 !important;
            box-shadow: none !important
        }
        .RWDRoleMenu .btnIdentity:nth-child(1),
        .RWDRoleMenu .btnIdentity:nth-child(2),
        .RWDRoleMenu .btnIdentity:nth-child(3),
        .RWDRoleMenu .btnIdentity:first-child,
        .RWDRoleMenu .btnIdentity:first-child + .btnIdentity,
        .RWDRoleMenu .btnIdentity:first-child + .btnIdentity + .btnIdentity {
            background: none;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(1).active,
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(1):hover {
            background-color: #00b5e6;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(2).active,
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(2):hover {
            background-color: #dc241f;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(3).active,
        .RWDRoleMenu .FunRWDMenu .btnIdentity:nth-child(3):hover {
            background-color: #87d300;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity {
            color: #fff;
            left: auto;
            display: block;
            text-align: center;
            margin: 10px 12px 8px 0;
            padding: 10px 12px 5px 12px;
            font-size: 1.25em;
            font-weight: bold;
            border-radius: none;
            border-bottom: none;
            background-color: #ccc !important;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            text-decoration: none;
            cursor: pointer;
            -o-transition: .5s !important;
            -ms-transition: .5s !important;
            -moz-transition: .5s !important;
            -webkit-transition: .5s !important;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity p {
            margin: 0;
            padding: 0;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity p a {
            display: block;
            text-shadow: none !important;
            color: #fff !important;
            font-size: 1em;
            padding: 3px 0;
            line-height: 1.5em;
        }
        .RWDRoleMenu .FunRWDMenu .btnIdentity:hover a {
            color: #fff !important;
        }
        /* InnerFunMenu /navbar-toggle */
        .InnerID,
        .RWDRoleMenu {
            background-color: #e8e8e8;
            border-radius: 5px;
            margin: 80px 0 0 0;
            position: relative;
            z-index: 9;
        }
        .RWDRoleMenu {
            top: 0;
            margin: 10px 0 10px 0 !important;
            right: 0;
        }
        .InnerID button.navbar-toggle,
        .RWDRoleMenu button.navbar-toggle {
            text-align: left;
            line-height: 2em;
            font-size: 1.25em;
            position: inherit;
            float: none;
            width: 100%;
            margin: 0 auto;
            border: none;
            background-color: #e8e8e8 !important;
        }
        .InnerID button.navbar-toggle span,
        .RWDRoleMenu button.navbar-toggle span {
            color: #666;
            line-height: 2em;
            padding: 0 10px;
            font-weight: bold;
        }
        .InnerID button.navbar-toggle i,
        .RWDRoleMenu button.navbar-toggle i {
            float: right;
            color: #666;
        }
        .InnerID .FunMenu {
            margin: 0;
        }
        .InnerID .FunMenu .btnIdentity {
            background: rgba(0, 0, 0, .2);
            display: block;
            margin: 10px auto 15px auto;
            width: 100%;
        }
        .InnerID .FunMenu .btnIdentity,
        .InnerID .FunMenu .btnIdentity p {
            -webkit-transform: skew(0deg) !important;
            -moz-transform: skew(0deg) !important;
            -o-transform: skew(0deg) !important;
            transform: skew(0deg) !important;
            font-size: 1.25em;
        }
        /**/
        .InnerID.RWDRoleMenu .FunMenu {
            top: 90px;
            display: none;
        }
        .FunMenu .btnIdentity img {
            width: 50px;
            height: 50px;
        }
        /*--------footerAD------*/
        .footerAD {
            display: block;
            position: fixed;
            bottom: 0;
            z-index: 2;
        }
        .footerAD img {
            width: 100%;
            bottom: 0px;
            margin: 0;
        }
        .footerAD #footerADClose {
            position: absolute;
            right: 0px;
            top: 0;
        }
        .footerAD #footerADClose.icon-cancel {
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 3px 5px 5px 0px;
            width: 30px;
            height: 30px;
            line-height: 10px;
            color: #fff;
        }
        .footerAD #footerADClose.icon-cancel:hover {
            background: rgba(0, 0, 0, 1);
            color: #fff;
        }
        /*topMenu*/
        .mainMenu .topMenu {
            display: none;
        }
        .TtopNav .topMenu {
            display: block;
        }
        .TtopNav .topMenu {
            list-style-type: none;
            padding: 10px 0 10px 0px;
            margin: 0;
            border-radius: none;
            list-style-type: none;
        }
        .TtopNav .topMenu>li>a {
            padding: 0 0 0 10px;
            display: block;
            font-size: 1em;
            color: #FFF;
            text-decoration: none;
            position: relative;
            line-height: 2.5em;
            border-bottom: 1px solid #333;
            position: relative;
        }
        .TtopNav .topMenu>li>a>i.caret {
            position: absolute;
            right: 20px;
            top: 50%;
            font-size: 1.2em;
            color: #889097;
            margin-top: 0px;
        }
        .TtopNav .topMenu>li.active>a,
        .TtopNav .topMenu>li.active>a:focus,
        .TtopNav .topMenu>li.active>a:hover,
        .TtopNav .topMenu>li>a:focus,
        .TtopNav .topMenu>li>a:hover {
            color: #FFF;
            background-color: transparent;
        }
        .TtopNav .topMenu>li>.dropdown-menu:after {
            display: none !important;
        }
        .TtopNav .topMenu>li.active ul {
            background: rgba(155, 155, 155, 0.4);
            border-radius: 0 !important;
        }
        .TtopNav .topMenu>li.active ul li {
            border-radius: none;
        }
        .TtopNav .topMenu>li.active ul li a {
            -webkit-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
            transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
            color: #fff;
        }
        .TtopNav .topMenu>li.active ul li a:before {
            content: '\e831';
            font-family: 'fontello';
            padding: 0 5px 0 0;
        }
        .TtopNav .topMenu>li.active ul li a:hover,
        .TtopNav .topMenu>li.active ul li a:focus {
            -webkit-transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
            transition: background-color 0.2s, padding-left 0.3s, box-shadow 0.4s;
            color: #222;
            background-color: #fff;
        }
        .TtopNav .topMenu>li.active ul li a {
            color: #ccc;
            font-weight: normal;
            line-height: 1.65em;
            display: block;
            padding: 8px 12px;
            white-space: normal !important;
        }
        /*-----searchBox---------*/
        .SearchBox {
            padding: 8px;
            border: none;
            box-shadow: none;
            background: rgba(35, 51, 36, 0.88);
        }
        .SearchBox form {
            margin: 0 15px;
            display: block;
        }
        .SearchBox input.form-control {
            width: 89%;
            border: none;
            display: inline-block;
            border: none;
        }
        .SearchBox button.btn {
            vertical-align: top;
        }
        .navbar .nav>li>.dropdown-menu:before {
            content: '';
            display: inline-block;
            border-left: 7px solid transparent;
            border-right: 7px solid transparent;
            border-bottom: 7px solid #ccc;
            border-bottom-color: rgba(0, 0, 0, 0.2);
            position: absolute;
            top: -7px;
            left: 9px;
        }
        .navbar .nav>li>.dropdown-menu:after {
            content: '';
            display: inline-block;
            border-left: 6px solid transparent;
            border-right: 6px solid transparent;
            border-bottom: 6px solid #ffffff;
            position: absolute;
            top: -6px;
            left: 10px;
        }
    }

    @media screen and (min-width:361px) and (max-width:719px) {
        .Footer .row img.QRcode {
            position: inherit;
            top: inherit;
            bottom: inherit;
            right: inherit;
            margin: 1em auto;
            text-align: center;
            display: table;
        }
        .Footer .foot_l .p2 {
            width: 100%;
        }
    }

    @media screen and (min-width:481px) and (max-width: 640px) {
        .SearchBox input.form-control {
            width: 86%;
        }
    }

    @media screen and (max-width: 480px) {
        .AMPAmain {
            margin-top: 40px;
        }
        .FunMenu .btnIdentity {
            margin: 0 auto;
        }
        .SearchBox input.form-control {
            width: 78%;
        }
        .newsblock ul.list li {
            padding: 0 0 10px 0;
        }
        .newsblock ul.list li a {
            width: auto !important;
        }
        .newsblock ul.list li em {
            position: static;
            right: inherit;
        }
        .Footer span {
            display: block;
            overflow: hidden;
            text-indent: -5000px;
            height: 5px;
        }
        .Footer .foot_l .p2 {
            margin: 0 0 20px 0;
        }
        .Footer .unit ul {
            display: table-cell;
            overflow: hidden;
        }
        .Footer .unit i {
            float: none;
            font-size: 1.2em;
            margin: 0 0 10px 0;
        }
        .Footer .unit,
        .Footer .link {
            width: auto;
            overflow: hidden;
            margin: 15px 0 25px 10px;
        }
        .Footer .unit ul li,
        .Footer .link li,
        .Footer .link li:first-child {
            display: block;
            float: none;
            background: url(../images/arrowsclass.png) no-repeat 5px -270px;
            padding: 0 0 0 15px;
        }
        .Footer .unit ul li {
            background: none;
            margin: 0 0 5PX 0
        }
        .Footer .row img.QRcode {
            position: inherit;
            top: inherit;
            bottom: inherit;
            right: inherit;
            margin: 1em auto;
            text-align: center;
            display: table;
        }
    }

    @media screen and (max-width: 320px) {
        .AMPAmain {
            margin-top: 70px;
        }
    }


    /*--------print-----*/

    @media print {
        a[href]:after {
            content: none !important;
        }
    }


    /************************** bootstrap.offcanvas ***************************/

    body {
        padding-top: 0px;
    }

    footer {
        padding: 0px 0;
    }


    /**/

    .side-collapse-container {
        position: relative;
        left: 0;
        transition: left .3s;
    }

    .side-collapse {
        clear: both;
        transition: width .3s;
        background-color: transparent;
        margin: 0 0 0 0px;
        padding: 0;
    }

    .row.row-offcanvas {
        margin: 10px -15px;
    }

    .modal-dialog .form-wrap .input-group {
        width: 100%;
    }

    .side-collapse.in {
        width: 0px;
        margin: 0 0 0 0px;
        padding: 0;
        overflow: hidden;
    }

    .side-collapse.out {
        left: 45px;
    }

    @media (max-width: 767px) {
        footer {
            position: relative;
            z-index: 1;
        }
        .SitemapBox .panel .panel-heading a {
            cursor: pointer;
        }
        .SitemapBox .panel .panel-heading a.navbar-collapse:after {
            content: "\e89f";
            font-family: fontello;
            float: right;
            color: #ccc;
            font-weight: normal;
            font-size: 1em;
        }
        .SitemapBox .panel .panel-heading a.navbar-collapse.collapsed a:after {
            content: "\e8a2";
            font-family: fontello;
        }
        .row-offcanvas {
            position: relative;
            -webkit-transition: all .25s ease-out;
            -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
        }
        .row-offcanvas-right {
            right: 0;
        }
        .row-offcanvas-left {
            left: 0;
        }
        .row-offcanvas-right .sidebar-offcanvas {
            right: -50%;
            /* 6 columns */
        }
        .row-offcanvas-left .sidebar-offcanvas {
            left: -50%;
            display: none;
            /* 6 columns */
        }
        .row-offcanvas-right.active {
            right: 50%;
            /* 6 columns */
        }
        .row-offcanvas-left.active {
            left: 50%;
            /* 6 columns */
        }
        .sidebar-offcanvas {
            position: absolute;
            top: 0;
            width: auto;
            /* 6 columns */
        }
        /**/
        .navbar-offcanvas {
            position: fixed;
            height: 100%;
            width: 250px;
            max-width: 100%;
            left: -250px;
            top: 0;
            bottom: 0;
            z-index: 999;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            -webkit-transition: all 0.15s ease-in;
            transition: all 0.15s ease-in;
        }
        .navbar-offcanvas.in {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
            background: #1a2229;
        }
        .navbar-offcanvas.navbar-offcanvas-fade {
            opacity: 0;
        }
        .navbar-offcanvas.navbar-offcanvas-fade.in {
            opacity: 1;
        }
        .navbar-offcanvas.offcanvas-transform.in {
            -webkit-transform: translateX(250px);
            -ms-transform: translateX(250px);
            transform: translateX(250px);
        }
        .navbar-offcanvas.offcanvas-position.in {
            left: 0;
        }
        .navbar-offcanvas.navbar-offcanvas-right {
            left: auto;
            right: -250px;
        }
        .navbar-offcanvas.navbar-offcanvas-right.offcanvas-transform.in {
            -webkit-transform: translateX(-250px);
            -ms-transform: translateX(-250px);
            transform: translateX(-250px);
        }
        .navbar-offcanvas.navbar-offcanvas-right.offcanvas-position.in {
            left: auto;
            right: 0;
        }
        .navbar-offcanvas .dropdown.active .caret {
            border-top: 0;
            border-bottom: 4px solid;
        }
        .navbar-offcanvas .dropdown-menu {
            position: relative;
            display: block;
            width: 100%;
            background: inherit;
            border: inherit;
            box-shadow: none;
            padding: 0;
            overflow: hidden;
            -webkit-transition: all 0.15s ease-in;
            transition: all 0.15s ease-in;
            height: 0;
        }
        .navbar-offcanvas .dropdown-menu.shown {
            height: auto;
        }
        .navbar-offcanvas .dropdown-menu > li > a {
            color: #777;
            padding: 5px 15px 5px 30px;
        }
        .offcanvas-toggle {
            background: #f8f8f8;
        }
        .offcanvas-toggle .icon-bar {
            background: #000;
        }
        .offcanvas-toggle.offcanvas-toggle-close {
            margin-right: 0;
        }
        .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(1) {
            -webkit-transform: rotate(45deg) translate(5px, 4px);
            -ms-transform: rotate(45deg) translate(5px, 4px);
            transform: rotate(45deg) translate(5px, 4px);
        }
        .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(2) {
            opacity: 0;
        }
        .offcanvas-toggle.offcanvas-toggle-close .icon-bar:nth-child(3) {
            -webkit-transform: rotate(-45deg) translate(4px, -4px);
            -ms-transform: rotate(-45deg) translate(4px, -4px);
            transform: rotate(-45deg) translate(4px, -4px);
        }
    }

    @media (max-width: 480px) {
        .Sticker img {
            height: 60px !important;
        }
        .fill {
            height: 180px;
        }
        .row-offcanvas-left .sidebar-offcanvas {
            left: -76%;
            /* 6 columns */
        }
        .row-offcanvas-left.active {
            left: 85%;
            /* 6 columns */
        }
    }


    /************************** template 自由編輯區 ***************************/

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

    .template1 ul,
    .template2 ul,
    .template3 ul {
        padding: 10px 0;
        margin: 20px 0 20px 25px;
        clear: both;
        overflow: hidden
    }

    .template1 ul li,
    .template2 ul li,
    .template3 ul li {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 27.5%;
        height: 300px;
        margin: 0 25px 25px 0;
        overflow: hidden;
        background-color: #fff;
        vertical-align: top;
        padding: 10px;
        border: 2px solid #e8e8e8;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        ransition: .5s
    }

    .template1 ul li:hover,
    .template2 ul li:hover,
    .template3 ul li:hover {
        border: 2px solid #ca5083
    }

    .template1 ul li:hover a div img,
    .template2 ul li:hover div img,
    .template2 ul li div img:hover {
        box-shadow: none
    }

    .template2 ul li,
    .template3 ul li {
        height: 340px
    }

    .template1 ul li a h3,
    .template2 ul li h3 {
        display: block;
        line-height: 1.45em !important;
        color: #5b2c7c;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center
    }

    .template2 ul li div h3 em,
    .template3 ul li em {
        color: #999;
        font-style: normal;
        font-weight: normal;
        margin: 0 0 0 5px;
        font-size: .85em
    }

    .template1 ul li a p,
    .template2 ul li div p {
        color: #666
    }

    .template1 ul {
        padding: 10px 0;
        margin: 20px 0 20px 25px
    }

    .template1 ul li a div {
        height: 205px;
        vertical-align: middle;
        text-align: center
    }

    .template1 ul li a div span {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        line-height: inherit
    }

    .template1 ul li a div img {
        max-width: 90%;
        max-height: 180px;
        vertical-align: middle;
        display: inline-block
    }

    .template2 ul li div {
        text-align: left;
        margin: 0 0 10px 0
    }

    .template2 ul li div img.left,
    .template2 ul li div img.right {
        width: 100px;
        display: table-cell
    }

    .template2 ul li div img.left {
        float: left;
        margin: 0 5px 0 0
    }

    .template2 ul li div img.right {
        float: right;
        margin: 0 0 0 5px
    }

    .template2 ul li div h3 {
        display: table-cell;
        text-align: left
    }

    .template2 ul li div p {
        clear: both
    }

    .template3 ul ul.list {
        padding: 0;
        margin: 0 0 10px 0
    }

    .template3 ul ul.list li {
        display: block;
        margin: 0 0 0 0 !important;
        padding: 0;
        width: auto;
        height: inherit;
        clear: both;
        text-align: left;
        border: 0;
        position: inherit;
        display: inherit;
        overflow: inherit;
        background-color: transparent
    }

    .template3 ul ul.list li:last-child a,
    .template3 ul ul.list li:last-child a:hover {
        border-bottom: 0
    }

    .template3 ul ul.list li a {
        color: #666;
        font-weight: bold;
        display: block;
        padding: 5px 0 5px 15px;
        background: url(../images/arrowsclass.png) no-repeat 5px -265px;
        border-bottom: 1px dotted #ccc
    }

    .template3 ul ul.list li a:hover {
        color: #333 !important;
        border: 0;
        border-bottom: 1px dotted #ccc
    }

    .template4 ul {
        margin: 10px auto;
        padding: 0 4%;
        clear: both;
        overflow: hidden;
        text-align: center
    }

    .template4 ul li {
        display: inline-block;
        margin: 0 10px 10px 10px;
        text-align: center
    }

    .template4 ul li img {
        width: 170px
    }

    .fullBlock {
        text-align: center;
        overflow: hidden;
        margin: 10px auto;
        padding: 0 20px;
        clear: both;
        background: #fff
    }

    @media only screen and (max-width:960px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 26% !important
        }
        .template3 ul ul.list li {
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important
        }
        .template4 ul {
            padding: 0 0 0 5px !important;
            margin: 0 auto !important
        }
        .template4 ul li {
            margin: 0 10px 10px 0 !important;
            width: 45% !important
        }
    }

    @media(max-width:720px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 5% 25px 0 !important
        }
        .template1 ul li:nth-child(even),
        .template2 ul li:nth-child(even),
        .template3 ul li:nth-child(even) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul li {
            width: 41.5% !important;
            margin: 0 15px 25px 0 !important
        }
        .template2 ul li,
        .template3 ul li {
            width: 41.5% !important;
            margin: 0 10px 25px 0 !important
        }
        .template2 ul li img,
        .template3 ul li img {
            max-height: auto !important;
            display: block !important;
            clear: both !important
        }
    }

    @media screen and (min-width:361px) and (max-width:719px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 5% 25px 0 !important
        }
        .template1 ul,
        .template2 ul,
        .template3 ul {
            margin: 10px 0 10px 4% !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 42% !important;
            margin: 0 5% 25px 0 !important;
            padding: 5px !important
        }
        .template1 ul li:nth-child(even),
        .template2 ul li:nth-child(even),
        .template3 ul li:nth-child(even) {
            margin: 0 0 25px 0 !important
        }
        .footer img.QRcode {
            position: inherit;
            top: inherit;
            bottom: inherit;
            right: inherit;
            margin: 1em auto;
            text-align: center;
            display: table
        }
        .footer .foot_l .p2 {
            width: 100%
        }
    }

    @media screen and (max-width:480px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul,
        .template2 ul,
        .template3 ul {
            margin: 20px 0 20px 0 !important;
            padding: 5px 4% !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 94% !important;
            height: auto !important;
            margin: 10px 0 !important;
            padding: 5px !important
        }
        .template3 ul ul {
            margin: 0 !important;
            padding: 5px !important
        }
        .template1 ul li h3,
        .template2 ul li h3,
        .template3 ul li h3 {
            width: auto !important
        }
        .template4 ul li {
            float: inherit !important;
            text-align: center !important;
            display: block !important;
            margin: 10px 0 !important;
            width: 98% !important;
        }
    }

    @media screen and (min-width:991px) and (max-width:1199px) {
        .template4 ul li {
            width: 22% !important;
            margin-right: 20px;
        }
    }

    @media screen and (min-width:768px) and (max-width:991px) {
        .template4 ul li {
            width: 30% !important;
        }
    }

    @media screen and (max-width:767px) {
        .template4 ul li {
            width: 45% !important;
        }
    }

    @media screen and (max-width:480px) {
        .template4 ul li {
            display: inline !important;
        }
        .template4 ul li img {
            margin: 0 0 8px 0 !important;
        }
    }

    .fullBlock {
        text-align: center;
        overflow: hidden;
        margin: 10px auto;
        padding: 0 20px;
        clear: both;
        background: #FFFFFF;
    }


    /************************** template 自由編輯區 ***************************/

    .editArea {
        margin: 0 auto;
        padding: 0 15px;
        text-align: center
    }

    .template1 ul,
    .template2 ul,
    .template3 ul {
        padding: 10px 0;
        margin: 20px 0 20px 25px;
        clear: both;
        overflow: hidden
    }

    .template1 ul li,
    .template2 ul li,
    .template3 ul li {
        position: relative;
        display: inline-block;
        overflow: hidden;
        width: 27.5%;
        height: 300px;
        margin: 0 25px 25px 0;
        overflow: hidden;
        background-color: #fff;
        vertical-align: top;
        padding: 10px;
        border: 2px solid #e8e8e8;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        text-align: center;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        ransition: .5s
    }

    .template1 ul li:hover,
    .template2 ul li:hover,
    .template3 ul li:hover {
        border: 2px solid #ca5083
    }

    .template1 ul li:hover a div img,
    .template2 ul li:hover div img,
    .template2 ul li div img:hover {
        box-shadow: none
    }

    .template2 ul li,
    .template3 ul li {
        height: 340px
    }

    .template1 ul li a h3,
    .template2 ul li h3 {
        display: block;
        line-height: 1.45em !important;
        color: #5b2c7c;
        font-weight: bold;
        margin: 0;
        padding: 0;
        text-align: center
    }

    .template2 ul li div h3 em,
    .template3 ul li em {
        color: #999;
        font-style: normal;
        font-weight: normal;
        margin: 0 0 0 5px;
        font-size: .85em
    }

    .template1 ul li a p,
    .template2 ul li div p {
        color: #666
    }

    .template1 ul {
        padding: 10px 0;
        margin: 20px 0 20px 25px
    }

    .template1 ul li a div {
        height: 205px;
        vertical-align: middle;
        text-align: center
    }

    .template1 ul li a div span {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
        line-height: inherit
    }

    .template1 ul li a div img {
        max-width: 90%;
        max-height: 180px;
        vertical-align: middle;
        display: inline-block
    }

    .template2 ul li div {
        text-align: left;
        margin: 0 0 10px 0
    }

    .template2 ul li div img.left,
    .template2 ul li div img.right {
        width: 100px;
        display: table-cell
    }

    .template2 ul li div img.left {
        float: left;
        margin: 0 5px 0 0
    }

    .template2 ul li div img.right {
        float: right;
        margin: 0 0 0 5px
    }

    .template2 ul li div h3 {
        display: table-cell;
        text-align: left
    }

    .template2 ul li div p {
        clear: both
    }

    .template3 ul ul.list {
        padding: 0;
        margin: 0 0 10px 0
    }

    .template3 ul ul.list li {
        display: block;
        margin: 0 0 0 0 !important;
        padding: 0;
        width: auto;
        height: inherit;
        clear: both;
        text-align: left;
        border: 0;
        position: inherit;
        display: inherit;
        overflow: inherit;
        background-color: transparent
    }

    .template3 ul ul.list li:last-child a,
    .template3 ul ul.list li:last-child a:hover {
        border-bottom: 0
    }

    .template3 ul ul.list li a {
        color: #666;
        font-weight: bold;
        display: block;
        padding: 5px 0 5px 15px;
        background: url(../images/arrowsclass.png) no-repeat 5px -265px;
        border-bottom: 1px dotted #ccc
    }

    .template3 ul ul.list li a:hover {
        color: #333 !important;
        border: 0;
        border-bottom: 1px dotted #ccc
    }

    .template4 ul {
        margin: 0px auto !important;
        padding: 0 4%;
        clear: both;
        overflow: hidden;
        text-align: center
    }

    .template4 ul li {
        display: inline-block;
        margin: 0 10px 10px 10px;
        text-align: center
    }

    .template4 ul li img {
        width: 170px
    }

    .template4 ul li img:hover {
        box-shadow: 0 0 6px #666;
    }

    .fullBlock {
        text-align: center;
        overflow: hidden;
        margin: 10px auto;
        padding: 0 20px;
        clear: both;
        background: #fff
    }

    @media only screen and (max-width:960px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 26% !important
        }
        .template3 ul ul.list li {
            padding: 0 !important;
            margin: 0 !important;
            width: 100% !important
        }
        .template4 ul {
            padding: 0 0 0 5px !important;
            margin: 0 auto !important
        }
        .template4 ul li {
            margin: 0 10px 10px 0 !important;
            width: 45% !important
        }
    }

    @media(max-width:720px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 5% 25px 0 !important
        }
        .template1 ul li:nth-child(even),
        .template2 ul li:nth-child(even),
        .template3 ul li:nth-child(even) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul li {
            width: 41.5% !important;
            margin: 0 15px 25px 0 !important
        }
        .template2 ul li,
        .template3 ul li {
            width: 41.5% !important;
            margin: 0 10px 25px 0 !important
        }
        .template2 ul li img,
        .template3 ul li img {
            max-height: auto !important;
            display: block !important;
            clear: both !important
        }
    }

    @media screen and (min-width:361px) and (max-width:719px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 5% 25px 0 !important
        }
        .template1 ul,
        .template2 ul,
        .template3 ul {
            margin: 10px 0 10px 4% !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 42% !important;
            margin: 0 5% 25px 0 !important;
            padding: 5px !important
        }
        .template1 ul li:nth-child(even),
        .template2 ul li:nth-child(even),
        .template3 ul li:nth-child(even) {
            margin: 0 0 25px 0 !important
        }
        .footer img.QRcode {
            position: inherit;
            top: inherit;
            bottom: inherit;
            right: inherit;
            margin: 1em auto;
            text-align: center;
            display: table
        }
        .footer .foot_l .p2 {
            width: 100%
        }
    }

    @media screen and (max-width:480px) {
        .template1 ul li:nth-child(3n+0),
        .template2 ul li:nth-child(3n+0),
        .template3 ul li:nth-child(3n+0) {
            margin: 0 0 25px 0 !important
        }
        .template1 ul,
        .template2 ul,
        .template3 ul {
            margin: 20px 0 20px 0 !important;
            padding: 5PX 4% !important
        }
        .template1 ul li,
        .template2 ul li,
        .template3 ul li {
            width: 94% !important;
            height: auto !important;
            margin: 10px 0 !important;
            padding: 5px !important
        }
        .template3 ul ul {
            margin: 0 !important;
            padding: 5px !important
        }
        .template1 ul li h3,
        .template2 ul li h3,
        .template3 ul li h3 {
            width: auto !important
        }
        .template4 ul li {
            float: inherit !important;
            text-align: center !important;
            display: block !important;
            margin: 10px 0 !important;
            width: 98% !important;
        }
    }

    @media screen and (min-width:991px) and (max-width:1199px) {
        .template4 ul li {
            width: 22% !important;
            margin-right: 20px;
        }
    }

    @media screen and (min-width:768px) and (max-width:991px) {
        .template4 ul li {
            width: 30% !important;
        }
    }

    @media screen and (max-width:767px) {
        .template4 ul li {
            width: 45% !important;
        }
    }

    @media screen and (max-width:480px) {
        .template4 ul li {
            display: inline !important;
        }
        .template4 ul li img {
            margin: 0 0 8px 0 !important;
        }
    }

    .fullBlock {
        text-align: center;
        overflow: hidden;
        margin: 10px auto;
        padding: 0 20px;
        clear: both;
        background: #FFFFFF;
    }


    /************************** InnerStyle start ***************************/


    /*---修正預登FORM--*/

    .path {
        border: none !important;
    }

    .path h3 {
        background: url(https://download.taiwantradeshows.com.tw/files/css/tpl14/images/h2_bg.gif) no-repeat 0 bottom !important;
        margin: 0 auto 20px auto !important;
        color: #333 !important;
        padding: 0 0 8px 0 !important;
        font-weight: bold !important;
        font-size: 1.5em !important;
    }

    .regEd {
        width: 100% !important;
        margin: 0 auto !important;
        float: none !important;
        text-align: center !important;
        overflow: hidden;
        outline: none !important;
    }

    .regEd h3 {
        padding: 0 !important;
        color: #666 !important;
        background: none !important;
        font-weight: bold;
        font-size: 1em !important;
    }

    .regEd .oneline {
        margin: 0 auto !important;
        text-align: center !important;
        float: left !important;
    }

    .listform,
    .listform_gray {
        width: auto!important;
        margin: 0 20%;
    }

    .listform_gray .oneline {
        background: transparent none !important;
    }

    .regEd_gray {
        padding: 0 !important;
    }

    .regEd .online .lb,
    .regEd label,
    .regEd legend {
        float: none !important;
        font-size: 1em;
        width: 180px !important;
        margin: 0;
    }

    .warmtxt {
        color: #c00 !important;
        font-size: 0.25em;
        text-align: left;
        margin-left: 2px !important;
        line-height: 1.5em;
        color: #999;
    }

    .oneline .lb {
        width: 165px !important;
    }

    .listform_gray .oneline .ipt input,
    .listform .oneline .ipt input {
        padding: 5px;
    }

    .oneline .ipt input.newcode,
    .loginbtnCenter input {
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        background-image: none;
        border: 1px solid transparent;
        white-space: nowrap;
        padding: 10px 15px;
        font-size: 15px;
        line-height: 1.42857143;
        border-radius: 4px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-color: #333;
        color: #fff !important;
        -o-transition: .5s;
        -ms-transition: .5s;
        -moz-transition: .5s;
        -webkit-transition: .5s;
        transition: .5s
    }

    .oneline .ipt input.newcode:hover,
    .loginbtnCenter input:hover {
        background-color: #999;
    }

    .oneline .ipt {
        float: left;
        display: inline-block;
        width: auto;
        text-align: left !important;
    }

    img.code {
        margin: 5px 0px 0px 0px !important;
        vertical-align: top !important;
    }

    .path .function img {
        width: auto !important;
        height: auto !important;
    }

    #visLocalForm,
    .content {
        width: 100% !important;
        overflow-x: auto !important;
    }

    .Content .User-data img {
        width: inherit !important;
        height: inherit !important;
        max-width: 100% !important;
        max-height: 500px !important;
    }

    .pCompany .images {
        float: left;
    }

    .pCompany .exhInfo {
        overflow: hidden
    }

    .pCompany .exhInfo p {
        margin: 0;
    }

    .pCompany img {
        max-width: 150px !important;
        max-height: 100px !important;
        display: block;
    }

    .pCompany span {
        display: inline-block;
    }


    /*---------------------*/


    /**/

    .modal-dialog {
        width: 90% !important;
        margin: 3% auto;
        min-height: 380px;
    }

    .form-wrap .form-group {
        clear: both;
    }

    .form-wrap .form-group .control-label {
        text-align: right;
    }

    .modal-dialog #login {
        padding: 0
    }


    /*sidebar*/

    .btn-menu-open,
    .btn-menu-close {
        margin: 0;
        padding: 0;
        z-index: 1;
        position: relative;
        background-color: #333;
        width: 40px;
        height: 42px;
    }

    .btn-menu-open {
        left: -55px;
    }

    .btn-menu-close {
        left: -15px;
    }

    .btn-menu-open:before,
    .btn-menu-close:before {
        font-size: 1.2em;
        color: #fff;
        font-family: "fontello";
        padding: 2px;
        line-height: 10px;
    }

    .btn-menu-open:before {
        content: "\e830";
    }

    .btn-menu-close:before {
        content: "\e831";
    }

    #Sidebar {
        width: 203px;
        margin: 0 0 0 15px
    }

    .affix {
        top: 85px;
        z-index: 1;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }

    .nav-stacked>li+li {
        margin-top: 0px;
    }

    #Rightcol section h3 {
        font-size: 1.5em;
        margin: 60px 0 20px 0;
    }

    .RWDlist-group .form-control {
        color: #fff;
        border-radius: 6px;
        border: none;
        margin: 10px 0;
        background: -webkit-gradient(inherit);
        background: -webkit-linear-gradient(inherit);
        background: -moz-linear-gradient(inherit);
        background: -ms-linear-gradient(inherit);
        background: -o-linear-gradient(inherit);
        background: linear-gradient(inherit);
        background: #666 !important;
    }


    /**/

    .row-offcanvas.row-offcanvas-left .col-md-offset-0 {
        margin-left: 1%;
    }

    .SidebarLeft #Sidebar {
        width: 8px;
    }

    .SidebarLeft .list-group {
        max-height: 10px;
    }

    .menuList {
        display: none;
    }


    /**/

    .tbtop .form-control {
        color: #FFF !important;
        background-color: #666 !important;
    }

    .BtnCenter {
        text-align: center;
    }

    .BtnCenter input,
    .BtnCenter buttom {
        margin: 10px auto;
    }

    h4.icon-search {
        background-color: #eee;
        border-radius: 5px;
        padding: 5px;
        font-size: 1em;
        margin: 0 0 10.5px 0;
    }


    /**/

    #calendar {
        max-width: 900px;
        min-height: 800px;
        margin: 0 auto;
    }

    .abc {
        width: 40% !important;
        height: 45px;
        border-top-right-radius: 5px !important;
        border-bottom-right-radius: 5px !important;
    }


    /**/

    .Rside .panel {
        border: none;
    }

    .Rside .panel-heading,
    .panel-group .panel-heading+.panel-collapse>.panel-body {
        background-color: transparent;
        border-bottom: 1px solid #dce4ec;
        border-top: none;
        margin: 0;
        padding: 8px 0;
    }

    .Rside .panel a {
        color: #666;
        width: 100%;
        display: inline-block;
    }

    .Rside .panel a.active {
        color: #333 !important;
    }


    /**/

    .affix-top {
        position: relative;
    }

    .list-group.col-2 li:nth-child(n+1) {
        width: 50%;
        float: left;
        margin-left: -1px;
    }

    .list-group-item span {
        color: #888;
        margin-left: 2px;
    }

    #menuList {
        margin: 0px 0 0 2px;
        padding: 0;
        width: 200px;
    }

    .btn.LeftSlide {
        background-color: #333;
        color: #fff;
        font-size: 1.88em;
        width: 40px;
        padding: 0px 0 0 0;
        border: none;
        position: absolute;
        top: 0px;
        right: -38px;
        z-index: 9;
        text-align: center;
        transition: ease-in .5s;
    }

    .btn.LeftSlide:hover {
        background-color: #066
    }


    /**/

    .form-control,
    input {
        font-size: 1em;
        border: 1px solid #ccc;
        border-width: 1px;
    }

    select.form-control {
        color: #333;
        margin-right: 2px;
    }

    #Sidebar .list-group-item {
        padding: 0;
        list-style: inherit !important;
    }

    #Sidebar .list-group-item a {
        padding: 8px 15px;
        display: block;
    }

    #Sidebar .list-group-item.active a,
    #Sidebar .list-group-item.active a:hover {
        color: #fff;
        background-color: #2c3e50;
    }

    #Sidebar .list-group-item:hover {
        background-color: #eee;
    }

    .list-group-item.active,
    .list-group-item.active:hover,
    .list-group-item.active:focus {
        border: none !important;
    }

    .modal .close {
        color: #333;
        padding: 0 5px 5px 5px;
        background-color: #ccc;
        border-radius: 50%;
        width: 30px;
        height: 30px;
        font-size: 18px;
    }

    .input-group.custom-search-form .input-group-btn {
        font-size: 15px;
    }


    /**/

    .IntroPage .images {
        width: 200px;
        height: 200px;
        max-height: 200px;
        margin: 0 auto;
        vertical-align: middle;
    }

    .IntroPage .images img {
        max-width: 100%;
        overflow: hidden;
        position: relative;
    }


    /**/


    /*.IntroPage.VipPage .ProductImg{ background-color:#eee; border-radius:6px;}*/

    .IntroPage em {
        font-style: normal;
    }

    .IntroPage.VipPage .images {
        width: auto;
        height: auto;
        max-height: 250px;
        max-width: 250px;
        margin: 0 0 20px 0;
        padding: 0px;
        vertical-align: middle;
    }

    .IntroPage.VipPage .images img {
        width: auto;
        height: auto;
        object-fit: cover;
        overflow: hidden;
        border: none;
        clear: both;
    }

    .IntroPage.VipPage>div:nth-child(2) .images,
    .IntroPage.VipPage>div:nth-child(2) .images img {
        margin: inherit !important;
    }

    .IntroPage.VipPage>div:nth-child(2) .images img {
        border-radius: 6px;
    }

    .videoIMG .images,
    .List ul li .images a.videoIMG {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 200px;
        float: none;
    }

    .videoIMG .images img {
        width: 100%;
        height: inherit;
        max-height: 200px;
    }

    .videoIMG .images:after,
    .List ul li .images a.videoIMG:after {
        position: absolute;
        padding: 0;
        right: 15px;
        bottom: 15px;
        cursor: pointer;
        z-index: 3;
        content: '\e955';
        font-family: 'fontello';
        font-size: 50px;
        color: #fff;
    }

    .v1 .videoIMG .images img,
    .v2 .videoIMG .images img,
    .v3 .videoIMG .images img {
        max-width: 100% !important;
        max-height: auto !important;
        height: 200px;
        object-fit: cover;
        overflow: hidden;
    }

    .List ul li .images a.videoIMG:after {
        padding: 30% 0 0 38%
    }

    .List.ListGroup ul li .images a.videoIMG:after {
        padding: 40% 0 0 35%
    }

    .IntroPage .videoIMG .images:after {
        border-radius: 6px;
    }

    .videoIMG .images:hover a,
    .List ul li .images a.videoIMG:hover img {
        position: inherit;
        z-index: 3;
    }


    /**/

    .IntroPage,
    .Vip1Intro {
        margin: 0 0px 20px 0px;
    }

    .IntroPage h2 {
        font-size: 1.2em !important;
        color: #333;
        font-weight: bold;
        margin: 0 !important;
        padding: 5px 0 0 0;
        background: none !important;
    }

    .IntroPage h3 {
        font-size: 1em;
        margin: 0 0px 20px 0px;
        line-height: 1.5em;
        font-weight: bold;
        clear: both;
    }

    .IntroPage h3 .ENname,
    .RoomType .ENname {
        color: #555;
        margin-top: 5px;
        font-weight: normal;
        display: inline-block;
    }

    .IntroPage p {
        color: #333;
    }

    .tab-content h3 {
        font-size: 1.12em;
        color: #333;
        margin: 10px 0 0 0;
    }

    .IntroPage>.IntroBox {
        margin: 30px 0px 30px 15px;
        float: none !important;
        clear: both !important;
        overflow: hidden;
    }

    .IntroPage>.IntroBox p {
        margin-left: 10px;
    }

    .IntroPage>.IntroBox h3 {
        border-left: 5px solid #ccc;
        padding-left: 5px;
        font-weight: bold;
    }

    .IntroPage>.IntroBox h3:before {
        display: none;
    }

    .VipPage {
        margin-bottom: 30px;
        background: url(../images/h3_bg.gif) repeat-x 0 bottom;
        padding-bottom: 30px;
    }

    .VipPage img.ContentQRcode {
        margin: inherit !important;
        display: inline-block;
    }

    .VipPage .ProductInfo {
        border-collapse: collapse;
    }

    .VipPage .ProductInfo dd,
    .VipPage .ProductInfo dt {
        padding: 3px;
    }

    .VipPage .ProductInfo dt {
        width: 110px;
        color: #333;
        text-align: left;
    }


    /**/

    .VipIntro .videoIMG {
        background-color: #eee;
        border-radius: 5px;
        padding: 10px 10px 40px 10px;
    }

    .VipIntro .IntroBox {
        margin: 30px 0 30px 0px;
    }

    .VipIntro .IntroBox p {
        margin-left: 1.5em;
    }

    .VipIntro .IntroBox h3,
    .VipPage .IntroBox h3,
    .videoIMG h3,
    .ListPhoto2 h3 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0px 0;
    }

    .VipIntro .IntroBox>h3 {
        padding: 10px 0 0 2px;
        border: none;
    }

    .VipIntro .IntroBox h3:before,
    .VipPage .IntroBox h3:before,
    .videoIMG h3:before,
    .ListPhoto2 h3:before {
        content: "\e948";
        font-family: fontello;
        padding-right: 4px;
    }

    .VipIntro .IntroBox ul {
        margin: 0px 0 10px 0;
    }

    .VipIntro .IntroBox ul li {
        border-bottom: 1px solid #eee;
        line-height: 2em;
    }

    .VipIntro .IntroBox ul li a {
        display: inline-block;
        color: #066;
    }

    .VipIntro .videoIMG h4 {
        font-weight: bold;
        font-size: 1.12em;
        line-height: 1.5em;
        margin: 10px 0;
    }

    .VipBtn {
        display: table;
        width: 100%;
    }

    .VerticalBottom {
        float: none;
        display: table-cell;
        vertical-align: bottom;
    }


    /*.IntroPage .IntroBox p{padding-left:10px}*/

    .IntroPage>.IntroBox.videoIMG .images {
        overflow: hidden;
    }

    .IntroPage>.IntroBox ul {
        margin: 10px 0px 10px 15px;
        padding: 0
    }

    .IntroPage .btn-lg {
        padding: 15px 20px;
    }


    /**/

    .subBtn .col-md-6 {
        text-align: center;
    }

    .row.subBtn .col-md-6 {
        text-align: inherit;
        margin: 5px 0;
    }

    .row.subBtn .col-md-6.text-right,
    .row.subBtn .col-md-12.text-right {
        text-align: right;
    }


    /**/

    .ProductImg {
        max-width: 500px;
        margin: 0 auto;
        display: block;
        text-align: center;
    }

    .ProductImg img {
        max-height: 360px;
        margin: 0 auto;
        text-align: center;
    }

    .ProductLogo .img {
        max-height: 180px;
    }


    /**/

    .ProductSlick h3 {
        background: url(../images/h3_bg.gif) repeat-x 0 bottom;
        font-size: 1.125em;
        padding-bottom: 10px;
        margin: 0;
        border: none !important;
        font-weight: normal;
    }

    .ProductSlick h3:before {
        font-family: 'fontello';
        content: "\e831";
        font-size: 1.2em;
        padding-right: 8px;
    }

    .ProductSlick h3 em,
    .IntroBox>h3 em,
    .ListPhoto2 h3 em {
        color: #F30;
        font-style: normal;
    }


    /**/

    .ProductType {
        border-top: 1px solid #ddd;
        margin: 20px 0;
        padding: 5px 0;
    }

    .ProductType h3 {
        font-size: 1.2em;
        font-weight: bold;
        margin: 0;
    }


    /**/

    .ProductInfo {
        overflow: hidden;
    }

    .ProductInfo img {
        width: auto !important;
        max-height: 100px !important;
    }

    .ProductInfo dd,
    .ProductInfo dt {
        font-size: 1em;
        color: #666;
        line-height: 2em;
    }

    .ProductInfo dt {
        width: 100px;
        font-weight: normal;
    }

    .ProductInfo dd {
        margin-left: 110px;
        vertical-align: top;
    }


    /**/

    .DisplayPage {
        position: relative;
        margin: 40px;
        clear: both;
    }

    .DisplayPage .col-md-6 {
        max-width: 320px;
    }

    .DisplayPage .icon-left-open-big,
    .DisplayPage .icon-right-open-big {
        font-size: 5em;
        position: absolute;
        top: -10px;
    }

    .DisplayPage .icon-left-open-big {
        left: -100px;
    }

    .DisplayPage .icon-right-open-big {
        right: -100px;
    }

    .DisplayPage h3 {
        font-size: 1.3em;
    }


    /**/

    .VideoBox {
        margin: 10px 0 20px 0;
    }

    .VideoBox .VideoShow {
        border-radius: 5px;
        background-color: #e8e8e8;
        margin: 0 auto;
        padding: 15px;
        text-align: center;
    }


    /**/

    .siderbrRWD {
        padding: 0 0 0 0px;
        margin: 0;
        clear: both;
    }

    .siderbrRWD li {
        display: block;
        border-bottom: 1px solid #eee;
        font-size: 1em;
        display: block !important;
        padding: 0;
        margin: 0;
    }

    .siderbrRWD li.active a:before {
        color: #fff;
    }

    .siderbrRWD li:hover a:before {
        color: #2c3e50;
    }

    .siderbrRWD li:hover,
    .siderbrRWD.HotelImg li:hover {
        background-color: #eee;
    }

    .siderbrRWD li a {
        border-radius: 0;
        margin: 0;
        color: #666;
        display: block !important;
    }

    .siderbrRWD li a:hover {
        color: #000;
    }


/*
.siderbrRWD li.active a{
color: #fff;
background-color: #2c3e50;
}
*/


/**/

.Page {
    vertical-align: middle;
    text-align: center;
    margin: 0;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-direction: row;
}

.Page>div:nth-child(1) {
    order: 1;
}

.Page>div:nth-child(2) {
    order: 2;
}

.Page>div:nth-child(3) {
    order: 3;
}

.Page em {
    font-style: normal;
    margin: 0 3px;
}

.Page em,
.pagination>li>a {
    color: #e74c3c;
}

.pagination>li.active a,
.pagination>.active>a:hover {
    color: #fff !important;
}

.pagination>li>a:hover,
.pagination>li>span:hover,
.pagination>li>a:focus,
.pagination>li>span:focus,
.pagination>.disabled>a:hover,
.pagination>li> a.icon-angle-right:hover,
.pagination>li> a.icon-angle-double-right:hover {
    background-color: #CCC !important;
    color: #333 !important;
}

.pagination>li>a,
.pagination>li>span {
    padding: 8px 12px;
    line-height: 1.2em;
    color: #333;
    background-color: #eee;
    border: none;
    border-radius: 5px;
    margin: 0 5px 0 0;
}

.pagination>.disabled>a,
.pagination>li> a.icon-angle-right,
.pagination>li> a.icon-angle-double-right,
.pagination>li> a.icon-angle-left {
    color: #999;
    background-color: #eee !important;
    padding: 8px 6px;
}

.pagination>li> a.icon-angle-right,
.pagination>li> a.icon-angle-double-right {
    color: #333;
}

.pagination {
    margin: 0px auto;
}

.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
    color: #bbb !important;
    background-color: #eee !important;
    border-color: transparent;
    cursor: none;
}


/**/

.Total,
.TotalDisplay {
    padding-top: 5px;
}

.TotalDisplay {
    text-align: right;
}

.Total,
.TotalDisplay .form-control,
.TotalDisplay select {
    display: inline-block;
    width: auto;
    text-align: left;
}

.FooterBtn {
    margin: 30px 0;
    width: 100% !important;
}


/**/

.meta {
    margin: 20px 0 !important;
}

.meta-time {
    color: #999;
}

.meta-time i {
    color: #555;
}

.IntroBox .List .meta-time {
    margin-right: 5px;
}

.AlbumFun .icon-picture-1 {
    font-size: 1.6em;
    color: #999;
    vertical-align: -3px;
}

.AlbumFun {
    margin: 0 0 5px;
}


/**/

.HotelNote {
    background: url(../images/hotel-bg.jpg) no-repeat 0 0;
    padding: 0px 0 0px 350px;
    min-height: 165px;
    max-height: 180px;
    overflow: auto;
    font-size: 0.85em;
    color: #000;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 1);
    margin: 0 0 20px 0;
}

.HotelNote h4 {
    font-weight: bold;
    font-size: 1em;
    margin: 8px 0 0 30px;
}


/**/

.Hotel2col {
    margin: 0 0 30px 0;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    min-height: 280px;
    overflow: hidden;
}

.Hotel2col .btn,
.Hotel2col .btn-sm {
    font-size: 1em !important;
}

.Hotel2col:hover {
    border: 1px solid #333;
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
}

.Hotel2col h1:before,
.RoomType h1:before {
    content: "\ec1e";
    font-family: "fontello";
    font-size: 1em;
    color: #aaa;
    padding-right: 3px;
}

.Hotel2col .meta-time {
    color: #999;
}

.Hotel2col a.btn-sm {
    padding: 0;
}

.Hotel2col .icon-taxi,
.Hotel2col .text-danger.icon-location-1,
.Hotel2col a.icon-bus,
.Hotel2col a.icon-vcard {
    color: #333;
    font-size: 0.9em;
    padding-right: 2px;
}

.Hotel2col .icon-taxi em {
    font-style: normal;
    background-color: #aaa;
    color: #FFF;
    padding: 2px 5px;
    margin: 0 0 0 2px;
    border-radius: 3px;
    font-size: 0.85em;
}

.Content .icon-ok,
.Content .btn-primary {
    background-color: #333;
    color: #fff !important;
    border-width: 0;
}

.Hotel2col h1,
.Hotel2col h2 {
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1em !important;
    background: none !important;
}

.Hotel2col h1 a:hover,
.Hotel2col h2 a:hover {
    color: #333 !important;
}

.Hotel2col h1 {
    margin: 0 0 10px 0 !important;
    font-weight: bold !important;
}

.Hotel2col h2,
.Hotel2col h2 a {
    background: none !important;
    margin: 0 0 !important;
    color: #066;
}

.Hotel2col h3 {
    margin: 0;
    font-size: .7em;
}

.Hotel2col h3 span {
    margin: 0;
    display: inline-block;
    font-size: 1.5em;
}

.Hotel2col .col-md-4 {
    padding: 0 0;
}

.Hotel2col .col-md-8 {
    padding: 0 0px 0 20px;
}


/**/

.HotelInfo {
    border-top: 1px solid #eee;
    min-height: 195px;
}

.HotelInfo div {
    margin-bottom: 5px;
}

.HotelInfo .text-right {
    margin: 10px 0 0 0;
}


/**/

.HotelInfo {
    margin: 10px 0 0 0px;
    font-size: 0.9em;
    border-top: 1px solid #eee;
    min-height: 195px;
}

.HotelImg {
    width: 220px !important;
    margin: 0 0 0 -15px !important
}

.HotelImg li {
    clear: both;
    width: 100%;
    margin: 0 0 5px 0;
}

.HotelImg img.img-responsive {
    width: 120px;
    float: left;
    display: inline-block;
    margin: 0 8px 0 0;
}

.HotelImg li img {
    float: left;
    display: table-cell;
    margin-right: 5px;
    max-width: 45px !important;
    max-height: 45px !important;
}

.HotelImg li a {
    line-height: 1.2em;
    padding: 5px;
    overflow: hidden;
}

.HotelImg li a p {
    line-height: 1.2em;
    margin: 0;
    display: inline;
}

.HotelImg li a:before,
.HotelImg li a:before:hover {
    display: none;
}

.HotelImg li.active a:after {
    content: "\e80d";
    font-size: 1em;
    font-family: fontello;
    padding-left: 10px;
}

.Hotel2col a.text-danger:hover,
.Hotel2col a.text-danger:focus {
    color: #333;
}

.MTCard {
    display: inline-block;
    border: 1px solid #ddd;
    color: #003;
    font-size: 0.85em;
    padding: 6px 10px;
    font-weight: normal !important;
    position: relative;
}

.MTCard:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: -8px;
    top: 40%;
    transform: rotate(-90deg);
    border-width: 0px 6px 6px 6px;
    border-style: solid;
    box-shadow: none;
    border-color: #ccc transparent #ccc transparent;
}

.Hotel2col h1 img,
.RoomType .MTCard img {
    vertical-align: -5px;
}


/**/

.RoomType h1 {
    margin: 0 15px 15px 15px;
    font-weight: bold;
    font-size: 1.25em !important;
}

.RoomType h2:before {
    content: "\e948";
    font-family: fontello;
    margin: 0 5px 0 -21px;
}

.RoomIntro h2 {
    margin: 0 0 0 1em !important;
    color: #333;
    background: none !important;
    font-size: 1.25em !important;
    line-height: 1.5em !important;
    font-weight: normal !important;
}

.RoomIntro {
    margin: 0 0 20px 0;
    padding: 10px 0;
}

.RoomIntro p {
    font-size: 1.2em;
}

.RoomIntro .btn-transparent,
.RoomIntro .btn-transparent:hover,
.HotelInfo .text-right .btn-transparent,
.HotelInfo .text-right .btn-transparent:hover {
    font-size: 1em;
    color: #c00;
}

.RoomIntro .btn {
    margin-bottom: 2px;
}

.RoomIntro .images img {
    margin: 15px auto !important;
}

.RoomIntro>h3 {
    background: url(../images/h3_bg.gif) repeat-x 0 12px;
    font-size: 1.25em;
    font-weight: bold;
    margin: 0px 0 10px 0;
}

.RoomIntro>h3>span {
    background-color: #fff;
    padding: 8px;
    margin-left: 20px;
}

.RoomIntro .dl-horizontal dt {
    width: 8%;
}

.RoomIntro .dl-horizontal dd {
    margin-left: 50px;
}

.RoomIntro .dl-horizontal dt a {
    color: #aaa;
}

.RoomService span a.btn {
    display: inline-block;
    float: left;
}

.RoomService span a.btnCircle {
    color: #fff;
    font-size: 1.8em;
    float: left;
    margin: 0px 5px 10px 0;
    padding: 0px;
    line-height: 42px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.RoomService span:nth-child(1) a {
    background-color: #F90;
}

.RoomService span:nth-child(2) a {
    background-color: #036;
}

.RoomService span:nth-child(3) a {
    background-color: #666;
}

.RoomService span:nth-child(4) a {
    background-color: #399;
}

.RoomService span:nth-child(5) a {
    background-color: #06C;
}

.RoomService span:nth-child(6) a {
    background-color: #09C;
}

.RoomService span:nth-child(7) a {
    background-color: #F66;
}

.RoomService span:nth-child(8) a {
    background-color: #696;
}

.RoomService a.icon-parking {
    background: url(../images/icon-service.png) no-repeat 10px 10px;
}

.RoomService a.icon-gym {
    background: url(../images/icon-service.png) no-repeat 10px -26px
}

.RoomService a.icon-spa {
    background: url(../images/icon-service.png) no-repeat 10px -64px;
}


/**/

.RoomIntro h4 {
    font-size: 2em;
    color: #888;
    margin: -5px 0 10px 20px;
}


/**/

.Content .class,
.Content .displaySwitch {
    margin: 0 0px;
}

.Content .class {
    margin: 0 15px !important;
}


/**/

.table {
    margin: 10px 0;
    font-size: 1em;
}

.table th {
    white-space: nowrap;
}

.table caption {
    font-size: 1.35em;
    color: #333;
}

.table h3 {
    font-size: 1em !important;
    margin: 0 !important;
}

.table h3 a,
.RoomIntro a,
.VipPage a {
    color: #066;
}

.table thead {
    font-size: 1em;
    border-top: 2px solid #999;
    background-color: #eee;
    color: #333;
}

.table-hover tr {
    border-bottom: 1px solid #ddd;
}

.table-hover>tbody>tr:hover {
    background-color: #fcfcef;
}

.table-hover td i {
    font-style: normal;
}

.PressData img,
.PressData2 img {
    width: 180px;
}

.PressData2 .icon-trash-empty {
    font-size: 1.5em;
}


/*common button*/

#exhDataList a.btn-dark {
    border-radius: 5px;
    font-size: 0.85em;
}

.btn-dark {
    background-color: #333 !important;
    -o-transition: .5s !important;
    -ms-transition: .5s !important;
    -moz-transition: .5s !important;
    -webkit-transition: .5s !important;
    transition: .5s !important;
    color: #fff;
}

.btn-dark:hover {
    background-color: #999 !important;
}

.badge {
    margin-left: 4px;
    background-color: #999
}


/**/

.SearchResult_Adv {
    background-color: #eee;
    margin: 0 auto;
    padding: 20px;
    border-radius: 5px;
    overflow: hidden;
}

.SearchResult_Adv .control-label {
    text-align: right;
    padding: 8px 0 0 0;
}

.SearchResult_Adv .form-group {
    margin: 0 0 15px 0;
    overflow: hidden;
}


/*tab*/

.Tab {
    position: relative;
    display: block;
    margin-top: 50px;
    padding-bottom: 70px;
}

.Tab .tabs a {
    position: absolute;
    top: 0;
    height: 45px;
    text-align: center;
    padding: 8px 0 5px 0;
    color: #888;
    font-size: 1.125em;
    border-radius: 6px 6px 0px 0px;
    border-bottom: 2px solid #333;
    text-decoration: none;
}

.Tab .tabs a.enable {
    color: #aaa !important;
    cursor: default
}

.Tab .tabs a.enable:hover {
    background-color: transparent !important;
}

.Tab .tabs a:hover,
.Tab .tabs a:focus {
    outline: none;
    color: #333;
}

.Tab .tabs a:hover {
    background-color: #eee;
}

.Tab .tabs.active a {
    color: #333;
    font-weight: bold;
    background-color: white;
    border-width: 2px;
    border-style: solid;
    border-color: #333 #333 transparent;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
}

.Tab .tab_container {
    margin-top: 40px;
    background: whitesmoke;
    display: inline-block;
    /*解決margin失效問題*/
    width: 100%;
}

.Tab .tabs.tabs1 a {
    left: 0%;
    width: 25%;
}

.Tab .tabs.tabs2 a {
    left: 25%;
    width: 25%;
}

.Tab .tabs.tabs3 a {
    left: 50%;
    width: 25%;
}

.Tab .tabs.tabs4 a {
    left: 75%;
    width: 25%;
}

img.ContentQRcode {
    display: block;
    margin: 20px auto;
    text-align: center;
}

#Sidebar img.ContentQRcode {
    display: none;
}

.IntroPage img.ContentQRcode {
    display: block !important;
}


/**/

.admin-form .field {
    display: block;
    position: relative;
    margin: 0 0 15px 0;
}

.admin-form .field-icon i {
    color: #BBB;
    position: relative;
}

.admin-form .TriaCode {
    display: inline;
    margin-left: 7px;
}


/*==================================================================
Input Icons
===================================================================*/

.admin-form .append-icon,
.admin-form .prepend-icon {
    top: 0;
    left: 0;
    display: inline-block;
    vertical-align: top;
    position: relative;
    width: 100%;
}

.admin-form .append-icon .field-icon,
.admin-form .prepend-icon .field-icon {
    top: 0;
    z-index: 4;
    width: 40px;
    height: 40px;
    color: inherit;
    line-height: 40px;
    position: absolute;
    text-align: center;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    pointer-events: none;
}

.admin-form .append-icon .field-icon i,
.admin-form .prepend-icon .field-icon i {
    position: relative;
    font-size: 1em;
}

.admin-form .prepend-icon .field-icon {
    left: 0;
}

.admin-form .append-icon .field-icon {
    right: 0;
}

.admin-form .prepend-icon > input,
.admin-form .prepend-icon > textarea {
    padding-left: 36px;
}

.admin-form .append-icon > input,
.admin-form .append-icon > textarea {
    padding-right: 36px;
    padding-left: 10px;
}

.admin-form .append-icon > textarea {
    padding-right: 36px;
}


/**/

.SitemapBox {
    margin: 20px -15px;
}

.SitemapBox .panel {
    margin: 20px 0 20px 0;
}

.SitemapBox .panel .panel-heading {
    color: #333;
    font-size: 1.2em;
    padding: 5px 0 0 0;
    font-weight: bold;
    border-bottom: 2px solid #CCC\9;
}

.SitemapBox>div:nth-child(3n+1) {
    clear: both;
}

.SitemapBox .panel .panel-heading a {
    display: block;
    width: 100%;
    color: #333;
    padding: 0;
}

.SitemapBox .panel .panel-heading button.navbar-collapse {
    display: none;
}

.SitemapBox>div:nth-child(1) .panel-heading {
    border-bottom: 2px solid #C00;
}

.SitemapBox>div:nth-child(2) .panel-heading {
    border-bottom: 2px solid #FC0;
}

.SitemapBox>div:nth-child(3) .panel-heading {
    border-bottom: 2px solid #9C0;
}

.SitemapBox>div:nth-child(4) .panel-heading {
    border-bottom: 2px solid #06C;
}

.SitemapBox>div:nth-child(5) .panel-heading {
    border-bottom: 2px solid #3C9;
}

.SitemapBox>div:nth-child(6) .panel-heading {
    border-bottom: 2px solid #6C6;
}

.SitemapBox>div:nth-child(7) .panel-heading {
    border-bottom: 2px solid #C36;
}

.SitemapBox>div:nth-child(8) .panel-heading {
    border-bottom: 2px solid #669;
}

.SitemapBox>div:nth-child(9) .panel-heading {
    border-bottom: 2px solid #F99;
}

.SitemapBox>div:nth-child(10) .panel-heading {
    border-bottom: 2px solid #CC3;
}

.SitemapBox>div:nth-child(11) .panel-heading {
    border-bottom: 2px solid #FC9;
}

.SitemapBox>div:nth-child(12) .panel-heading {
    border-bottom: 2px solid #666;
}

.SitemapBox .panel .panel-body>ul,
.SitemapBox .panel .panel-body>ul>li,
.EventBox ul li,
.EventBox ul {
    margin: 0px 0 10px -20px;
    list-style-type: none;
    line-height: 1.65em;
}

.EventBox ul li {
    margin: 10px 0 0px -20px;
}

.SitemapBox .panel .panel-body ul li a:hover,
.EventBox ul>li a:hover {
    color: #888
}

.SitemapBox .panel .panel-body>ul>li:before,
.EventBox ul>li:before {
    content: "\e831";
    font-family: fontello;
    padding: 0 5px 0 0;
}

.SitemapBox .panel .panel-body>ul>li:hover:before,
.EventBox ul>li:hover:before {
    color: #888;
}

.SitemapBox .panel .panel-body>ul>li li a,
.EventBox ul>li li a {
    color: #333;
}

.BtnSearch,
.BtnSearch-adv {
    background-color: #333 !important;
    padding: 4px 10px !important;
}

.BtnSearch-adv {
    background-color: #666 !important;
}


/**/

.EventBox .dl-horizontal dd,
.EventBox .dl-horizontal dt {
    line-height: 2.5em;
}

.EventBox .dl-horizontal dd img {
    vertical-align: middle;
    margin: -8px 0 0 0;
    height: 30px;
    max-height: 30px;
}

.EventBox .dl-horizontal dd {
    color: #666;
}

.EventBox div:last-child {
    border-left: 1px solid #ccc;
}


/**/

.calendarTb td.Tdate {
    background-color: #fcfcef;
    color: #066;
    padding: 5px 0;
    font-weight: bold;
}

.calendarTb td.Tdate .time {
    background-color: #666 !important;
    padding: 2px 5px;
    margin: 0 0 0 3px;
    border-radius: 4px;
    color: #fff;
}


/**/

.CategoryMenu button {
    padding: 0 0 0px 12px;
    width: 205px;
    text-align: left;
    display: inline-block;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px;
}

.CategoryMenu button.icon-menu:before,
.CategoryMenu button.icon-left-open-3:before {
    margin-left: -8px;
    padding: 2px 0;
    font-size: 1.2em;
}

.CategoryMenu button:hover {
    background-color: transparent;
    border-radius: 0 !important;
    color: #999;
}

.CategoryMenu button.icon-menu span,
.CategoryMenu button.icon-left-open-3 span {
    color: #066;
    text-align: left;
    overflow: hidden;
    vertical-align: top;
    font-size: 0.85em;
    border-radius: 0;
}

.CategoryMenu button.icon-menu:before {
    display: inline;
    float: left;
}

.CategoryMenu button.icon-cancel-3 {
    font-size: 1.5em;
    color: #333;
    padding: 2px;
}


/**/

.VipAlbum {
    margin: 0 0 20px 0;
}

.VipAlbum>div {
    padding: 0;
}

.VipAlbum>div>div {
    padding: 0 5px 5px 0;
}

.VipAlbum .recent-work-wrap {
    position: relative;
    width: 100%;
    height: 100%;
}

.VipAlbum .recent-work-wrap:nth-child(1) img {
    width: 100%;
    max-height: inherit;
    max-height: 408px;
    min-height: 408px;
    border: 1px solid #ddd;
}

.VipAlbum>div:nth-child(2) .recent-work-wrap img {
    width: 100%;
    max-height: 200px;
    min-height: 200px;
    object-fit: cover;
    overflow: hidden;
    display: block;
    height: auto;
    max-width: 100%;
    border: 1px solid #ddd;
}

.VipAlbum .recent-work-wrap .recent-work-inner {
    top: 0;
    background: transparent;
    opacity: .8;
    width: 100%;
    border-radius: 0;
    margin-bottom: 0;
}

.VipAlbum .recent-work-wrap .recent-work-inner h4 {
    margin: 0px 0;
    font-size: 1.2em !important;
}

.VipAlbum .recent-work-wrap .recent-work-inner h4 a {
    color: #fff;
}

.VipAlbum .recent-work-wrap .recent-work-inner p {
    font-size: 1em !important;
    color: #fff !important;
    margin: 0 !important;
}

.VipAlbum .recent-work-wrap .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 0;
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    vertical-align: middle;
    -webkit-transition: opacity 500ms;
    -moz-transition: opacity 500ms;
    -o-transition: opacity 500ms;
    transition: opacity 500ms;
    padding: 20px;
    overflow-y: auto;
}

.VipAlbum .recent-work-wrap .overlay .preview {
    bottom: 0;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    border-radius: 0;
    background: transparent;
    text-align: center;
    color: #fff;
}

.VipAlbum .recent-work-wrap:hover .overlay {
    opacity: 1;
}

@media screen and (min-width:991px) and (max-width:1199px) {
    .IntroPage .col-md-9 {
        padding-left: 50px;
    }
    .HotelNote h4 {
        margin: 0px 0 0 30px;
    }
    .Hotel2col .col-md-4 {
        width: 30%;
    }
    .Hotel2col .col-md-8 {
        width: 70%;
    }
    .IntroBox.videoIMG .col-md-8 {
        padding-left: 60px;
    }
    .EventBox div:last-child {
        border-left: none;
        border-top: 1px solid #ccc;
        padding: 20px 0;
    }
    .RoomIntro h4 {
        font-size: 1.2em;
        margin: -5px 0 10px -15px;
    }
    #Sidebar {
        width: 175px;
    }
    #menuList,
    .list-group {
        width: 180px;
    }
    .btn-menu-open {
        left: -35px;
    }
    .listform,
    .listform_gray {
        margin: 0 18%;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .row-offcanvas-left .btn-menu-open {
        display: none;
    }
    .Hotel2col .col-md-4,
    .IntroPage .col-md-3 {
        width: 25%;
    }
    .IntroPage .col-md-9 {
        width: 72%;
        padding-left: 60px;
    }
    .Hotel2col .col-md-8 {
        width: 75%;
    }
    .Hotel2col .row.HotelInfo .text-right {
        width: 50%;
    }
    .IntroBox.videoIMG .col-md-8 {
        padding-left: 60px;
    }
    .CategoryMenu {
        display: none;
    }
    #Sidebar {
        width: auto;
        top: inherit !important;
        position: inherit !important;
    }
    .SearchResult_Adv .control-label {
        text-align: left;
        padding: 0 0 0 15px;
    }
    .EventBox div:last-child {
        border-left: none;
        border-top: 1px solid #ccc;
        padding: 20px 0;
    }
    /**/
    .IntroPage .images {
        max-width: 350px;
        max-height: 350px;
        margin: 20px auto;
    }
    .HotelNote {
        background-position: -100px 0;
        padding: 0px 0 0px 60px;
    }
    .HotelNote h4 {
        font-weight: bold;
        font-size: 1em;
        margin: 0px 0 0 30px;
    }
    .row.text-center .col-xs-12 {
        width: auto;
        float: inherit;
    }
    .RoomIntro h4 {
        font-size: 1.2em;
        margin: -5px 0 10px -15px;
    }
    #menuList,
    .list-group {
        width: 180px;
    }
    .btn-menu-open {
        left: -35px;
        display: none;
    }
    .ProductImg img {
        max-height: 320px;
    }
    .listform,
    .listform_gray {
        margin: 0 18%;
    }
    .RWDlist-group {
        padding: 0;
    }
    .subBtn .col-md-6,
    .subBtn .col-md-6 .btn {
        text-align: left !important;
        float: none;
        margin: 5px 0 !important;
        width: auto !important;
    }
    .row.subBtn .col-md-6 {
        display: inline;
    }
}

@media (max-width: 767px) {
    .regEd {
        text-align: left !important;
    }
    .listform,
    .listform_gray {
        margin: 0;
        text-align: left !important;
    }
    .oneline .lb {
        float: none;
        width: 100% !important;
        text-align: left !important;
    }
    .oneline .ipt input,
    .oneline .ipt textarea {
        width: auto !important;
    }
    .custom-search-form .form-control {
        padding: 8px 15px;
    }
    .pageright {
        width: auto !important;
    }
    .regEd .oneline {
        float: none !important;
    }
    .RWDlist-group {
        padding: 0;
    }
    .subBtn .col-md-6,
    .subBtn .col-md-6 .btn {
        text-align: left !important;
        float: none;
        margin: 5px 0 !important;
        width: auto !important;
    }
    .table {
        font-size: 0.85em;
    }
    .Tab {
        margin: 20px 0;
    }
    .Tab .tabs a {
        position: absolute;
        top: 0;
        font-size: 1em;
        height: 75px;
    }
    .VipAlbum>div:nth-child(2) .recent-work-wrap img {
        max-height: auto;
        min-height: auto;
    }
    .row-offcanvas-left .btn-menu-open {
        display: none;
    }
    .Content .icon-ok,
    .Content .btn-primary {
        font-size: 15px;
        padding: 5px 5px;
    }
    .Content .icon-ok:before {
        display: none;
    }
    .btn-group.bootstrap-select {
        padding: 0;
    }
    .ProductImg {
        float: none;
    }
    .btn-group.bootstrap-select {
        padding: 0;
    }
    .SitemapBox .panel .panel-heading {
        font-size: 1em;
    }
    .FooterBtn button.btn-primary {
        font-size: inherit;
    }
    #exhDataList {
        font-size: 0.85em;
    }
    /**/
    .row.text-center {
        overflow: hidden;
        width: 100%;
        font-size: 0.85em;
    }
    .row.text-center .col-xs-12 {
        width: auto;
        float: inherit;
    }
    .Function,
    .btn-menu-open,
    .btn-menu-close,
    .table.PressData thead th:nth-child(3),
    .table.PressData tbody td:nth-child(3) {
        display: none;
    }
    #Sidebar img.ContentQRcode {
        display: none;
    }
    .IntroPage img.ContentQRcode {
        display: block !important;
    }
    .affix {
        position: inherit;
        top: inherit;
    }
    .List ul li .images,
    .List ul li .images a.videoIMG {
        position: relative;
        width: 100% !important;
        max-width: 100%;
        height: inherit !important;
        max-height: inherit !important;
        float: none;
    }
    .List ul li .images a.videoIMG:after {
        padding: 36% 0 0 42%;
        font-size: 5em;
    }
    .VideoBox div:last-child {
        margin: 0 -15px;
    }
    .IntroPage.VipPage .images {
        margin-top: 30px !important;
    }
    .IntroPage h3,
    .table h3 {
        margin: 0 0 20px 0;
    }
    .table>thead>tr>th,
    .table>tbody>tr>th,
    .table>tfoot>tr>th,
    .table>thead>tr>td,
    .table>tbody>tr>td,
    .table>tfoot>tr>td {
        padding: 5px 0;
    }
    .IntroPage .col-sm-12 {
        margin: 0 -15px;
    }
    .row.IntroPage {
        margin: 0 -15px;
    }
    .Hotel2col {
        max-height: inherit;
        min-height: inherit;
        overflow: inherit;
    }
    .Hotel2col .col-md-8 {
        padding: 0;
    }
    .SearchResult_Adv .control-label {
        text-align: left;
        padding: 0 0 0 15px;
    }
    .FooterBtn button {
        font-size: 0.9em;
    }
    .IntroPage,
    .Vip1Intro {
        margin: 0 0px 20px 0px;
    }
    .IntroPage>.IntroBox {
        margin: 50px 0px 0 0px;
    }
    .RoomIntro {
        padding: 10px;
    }
    #Sidebar img.ContentQRcode {
        display: none;
    }
    .IntroPage img.ContentQRcode {
        display: block !important;
    }
    /**/
    .DisplayPage .col-md-6 {
        max-width: inherit;
    }
    .DisplayPage .icon-left-open-big,
    .DisplayPage .icon-right-open-big {
        font-size: 2.5em;
        padding: 50px 0px;
        color: #fff;
        position: fixed;
        top: 40%;
        z-index: 999;
        background-color: rgba(0, 0, 0, .3);
        border-radius: 5px;
    }
    .DisplayPage .icon-left-open-big:hover,
    .DisplayPage .icon-right-open-big:hover {
        color: #fff;
    }
    .DisplayPage .icon-left-open-big {
        left: -10px;
    }
    .DisplayPage .icon-right-open-big {
        right: -10px;
    }
    .DisplayPage h3,
    .DisplayPage .meta-time {
        display: none;
    }
    .RoomIntro h4 {
        font-size: 1em;
        margin: -5px 0 10px 0px;
    }
    /**/
    .EventBox .dl-horizontal dd img {
        height: auto;
        max-height: auto;
    }
    /**/
    .SitemapBox {
        margin: 0 -15px;
    }
    .SitemapBox .panel {
        margin: 20PX 0 30PX 0;
    }
    .SitemapBox .panel .panel-heading button.navbar-collapse {
        display: block;
        float: right;
        background-color: transparent;
        border: none;
        outline: none;
    }
    .SitemapBox .panel .panel-heading button.navbar-collapse.collapsed:after,
    .SitemapBox .panel .panel-heading button.navbar-collapse:after {
        content: "\e8a2";
        font-family: fontello;
        color: #ccc;
        font-weight: normal;
        font-size: 1.3em;
        outline: none;
        width: 80%;
        text-align: right;
        position: absolute;
        right: 20px;
        top: 5px;
        z-index: 1;
    }
    .SitemapBox .panel .panel-heading button.navbar-collapse:after {
        content: "\e89f";
    }
    /**/
    .HotelNote {
        background-position: -100px 0;
        padding: 0px 0 0px 60px;
    }
    .HotelNote h4 {
        font-weight: bold;
        font-size: 1em;
        margin: 0px 0 0 30px;
    }
    /**/
    .HotelImg {
        width: 100% !important;
    }
    .HotelImg li img {
        max-width: 100px !important;
        max-height: 100px !important;
        margin: 0 !important;
        height: auto !important;
    }
    .HotelImg li a {
        min-height: 50px;
        display: inline-block;
    }
    /**/
    .EventBox div:last-child {
        border-top: 1px solid #ccc;
    }
    /**/
    .IntroPage .images {
        max-width: 350px;
        max-height: 350px;
        margin: 20px auto;
        text-align: center;
    }
    .videoIMG .images {
        width: inherit;
        height: inherit;
        max-height: auto;
        position: inherit;
        object-fit: inherit;
        overflow: inherit;
        margin: 0 auto;
        text-align: center;
    }
    .videoIMG .images img,
    .List ul li .images.videoIMG img {
        width: 100%;
        height: auto !important;
        max-height: auto !important;
        max-height: auto;
        object-fit: none;
        overflow: inherit;
    }
    .videoIMG .images:after,
    .videoIMG .images:after {
        padding: 25% 0 0 0;
    }
    .videoIMG h4 {
        line-height: 1.6em;
    }
    /**/
    .ProductType {
        border: none;
    }
    .ProductLogo .img {
        max-height: 200px;
    }
    .ProductInfo {
        margin: 10px auto;
        text-align: center;
        border-bottom: 2px solid #eee;
        padding-bottom: 20px;
    }
    .ProductImg {
        max-height: 360px;
        max-width: 100%;
    }
    .ProductInfo h2,
    .ProductInfo h3 {
        text-align: center;
        margin: 0 0 10px 0;
    }
    /**/
    .ProductInfo dt,
    .ProductInfo dd {
        width: auto;
        text-align: left;
        margin: 0;
        color: #888;
        line-height: 1.8em;
    }
    .ProductInfo dt {
        font-weight: bold;
        color: #333;
    }
    .ProductInfo dt:before {
        content: "\e831";
        font-family: "fontello";
        color: #333;
        padding-right: 5px;
    }
    .VipPage .ProductInfo dt:before {
        display: none;
        padding-right: 0;
    }
    .ProductInfo dd {
        margin: 0;
        padding: 0 0 15px 15px;
    }
    .RoomIntro .ProductInfo dt:before {
        display: none;
    }
    .RoomIntro .ProductInfo dd {
        padding-left: 0px;
        margin: 0;
    }
    .RoomIntro .dl-horizontal dt {
        float: left;
        width: 30px;
    }
    /**/
    #Sidebar {
        margin: 10px 0px 20px 0 !important;
        border: none !important;
        width: auto;
    }
    .siderbrRWD {
        padding: 0;
        margin: 0 0px;
    }
    .siderbrRWD li {
        display: inline-block;
        width: 49%;
        text-align: center;
        float: left;
        margin: 0 2px 1px 0;
        border-bottom: none;
    }
    .siderbrRWD li.active:before,
    .siderbrRWD li:hover:before {
        display: none;
        border: none;
    }
    .siderbrRWD li:hover {
        border: none;
    }
    .siderbrRWD li.active a {
        color: #333;
    }
    .siderbrRWD li.active:hover a,
    .siderbrRWD li a:hover {
        color: #fff;
        background-color: #666 !important;
    }
    .siderbrRWD li a {
        color: #2c3e50;
        font-size: 1em;
        display: block;
        padding: 8px 0px;
        margin: 0 3px 3px 0;
        border-radius: 5px;
        background-color: rgba(155, 155, 155, .1);
        padding-left: 0px;
    }
    .VipPage {
        height: auto;
        min-height: auto;
    }
    .SearchResult_Adv {
        padding: 10px 0px;
    }
    /**/
    .FooterBtn .col-xs-12,
    .col-xs-12 button[type="button"] {
        margin: 0 0px 5px 0px;
    }
    /**/
    .VipPage .ProductInfo dt {
        width: auto;
    }
    .videoIMG .images,
    .videoIMG .images img {
        max-height: inherit !important;
    }
    .VipIntro .IntroBox {
        margin: 0 0 30px 0;
        clear: both;
    }
    .VipPage .ProductImg {
        display: block;
        float: none;
        margin-bottom: 120px;
    }
    .VipPage .IntroPage {
        margin: 0 auto 20px auto;
        text-align: center;
    }
    /**/
    .pagination {
        margin: 10px auto;
    }
    .Page {
        -webkit-flex-wrap: wrap;
        flex-direction: wrap;
        margin: 5px 0px;
    }
    .Page div {
        width: 100%;
        text-align: center !important;
        float: inherit !important;
    }
    .Page>div:nth-child(1) {
        order: 1;
    }
    .Page>div:nth-child(2) {
        order: 3;
        margin: 0px 0px;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
    }
    .Page>div:nth-child(3) {
        order: 2;
    }
    .pagination>li>a,
    .pagination>li>span {
        padding: 8px 12px;
    }
    .pagination>.disabled>a,
    .pagination>li> a.icon-angle-right,
    .pagination>li> a.icon-angle-double-right {
        padding: 8px 3px;
    }
    /*.col-xs-12 button[type="button"]{  width:100%;}*/
}

@media (max-width: 480px) {
    .displaySwitch.text-right {
        float: none;
        display: block;
        /*overflow: hidden;*/
    }
    .HotelNote {
        display: none;
    }
    .Tab .tabs a {
        font-size: 0.75em;
        height: 75px;
        line-height: 1.2em;
        word-wrap: break-word;
    }
    .PressData img {
        max-width: 100px;
    }
    .table.PressData thead th:nth-child(1),
    .table.PressData tbody td:nth-child(1),
    .table.PressData thead th:nth-child(3),
    .table.PressData tbody td:nth-child(3),
    .table.PressData thead th:nth-child(5),
    .table.PressData tbody td:nth-child(5),
    .table.PressData thead th:nth-child(6),
    .table.PressData tbody td:nth-child(6) {
        display: none;
    }
    .table.PressData2 thead th:nth-child(1),
    .table.PressData2 tbody td:nth-child(1),
    .table.PressData2 thead th:nth-child(3),
    .table.PressData2 tbody td:nth-child(3),
    .table.calendarTb th:nth-child(2),
    .table.calendarTb td:nth-child(2) {
        display: none;
    }
    .pagination {
        margin: 15px -15px 10px -15px;
    }
    .pagination .pre01,
    .pagination .next02 {
        display: none;
    }
    .List ul li .images a.videoIMG:after {
        padding: 35% 0 0 40%;
        font-size: 4em;
    }
}


/************************** Total List  ***************************/

.Content .List p,
.IntroPage p,
.List li p a {
    color: #333 !important;
    margin: 0;
    font-size: 1em !important;
    line-height: 1.65em !important;
}

.Listarrow li:before {
    content: "\e831";
    font-family: 'fontello';
    padding-right: 5px;
}

.List.ListGroup p {
    margin-right: 80px;
}

.IntroPage div p {
    margin-left: 0px;
}


/* displaySwitch  */

.displaySwitch i {
    color: #888;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid #ccc;
    margin: 0 3px 0;
}

.displaySwitch a.active i,
.displaySwitch a:hover i {
    color: #FFF;
    background-color: #666;
    padding: 3px;
    border-radius: 4px;
    border: 1px solid #666;
}

.displaySwitch a:hover {
    color: #666;
    color: #09C
}


/* List */

.List ul {
    margin: 20px 0;
    padding: 0 0px;
    list-style-type: none;
    clear: both;
}

.List ul li {
    margin: 0 0 15px 0;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
    overflow: hidden;
}

.List ul li .images a.videoIMG {
    width: 250px;
    outline: none;
    border: none;
    float: left;
    margin: 0 10px 0 0;
    overflow: hidden;
}

.List ul li a .images img,
.List ul li .images a.videoIMG img {
    width: 100%;
    height: auto;
    object-fit: cover;
    overflow: hidden;
}

.List ul li .images a.videoIMG:hover img,
.videoIMG .images:hover img {
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    -o-transition: .5s;
    -ms-transition: .5s;
    -moz-transition: .5s;
    -webkit-transition: .5s;
    transition: .5s;
    ;
}

.List ul li .images a.videoIMG:after,
.videoIMG .images:after {
    color: #333;
    text-shadow: 0 0px 5px #fff;
    font-size: 40px;
}

.List ul li .images a.videoIMG:hover:after,
.videoIMG .images:hover:after {
    color: #666;
}

.List ul li h3 a,
.List ul li a h3,
.List ul li h3 {
    font-size: 1.125em;
    color: #066;
    margin: 0 0;
    font-weight: bold;
    word-break: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
}

.List ul li h3 .ENname a {
    font-weight: normal;
}


/**/

.ListGroup ul {
    margin: 20px 0;
    padding: 0 0px;
    list-style-type: none;
}

.ListGroup ul li {
    margin: 0 0 35px 0;
    padding: 10px;
    position: relative;
    border-bottom: 2px solid #ddd;
    border: 2px solid #d8d8d8;
    border-radius: 5px;
    overflow: hidden;
}

.ListGroup ul li.checked {
    border: 2px solid #333;
}

.ListGroup ul li .images,
.ListGroup ul li .images a.videoIMG,
.Hotel2col .images {
    width: 180px;
    height: 180px;
    overflow: hidden;
    float: left;
    margin: 0 10px 0 0;
    text-align: center;
}

.ListGroup ul li .images img,
.ListGroup ul li .images a.videoIMG img,
.Hotel2col .images img {
    max-width: 100%;
    margin: 0 auto;
}

.ListGroup ul li h3 {
    font-size: 1em;
    margin-right: 90px;
    line-height: 1.6em;
}

.ListGroup ul li h3 .ENname,
.table h3 .ENname {
    margin-top: 5px;
    font-weight: normal;
}


/*list btn*/

.btnPA {
    position: absolute;
    top: 0px;
    right: 0px;
    border-top: 50px solid #FC0;
    border-left: 85px solid transparent;
}

.btnPA img {
    position: absolute;
    top: -45px;
    right: 5px;
}

.btnTrade {
    position: absolute;
    top: 60px;
    right: 10px;
}

.IntroPage .btnPA,
.IntroPage .btnPA img,
.IntroPage .btnTrade {
    position: inherit;
    top: inherit;
    right: inherit;
    display: inline-block;
}

.IntroPage .btnPA {
    border: none;
}

.btnFun {
    position: absolute !important;
    bottom: 5px;
    right: 5px;
}

.btnFun button {
    margin-right: 2px;
}

.btnFun .btn-sm {
    font-size: 1.25em;
    background-color: #ccc;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    line-height: 18px;
    padding: 5px 0;
    color: #fff;
}

.btnFun .btn-sm:hover {
    color: #fff !important;
    background-color: #e53e84;
}

.btnFun .icon-inquire:before {
    content: "";
    width: 30px;
    height: 30px;
    background-color: transparent;
    background: url(../images/icon-inquire.png) no-repeat 1px -1px;
    background-size: 82% !important;
}

.VipBtn .btnFun {
    right: inherit;
}

.VipBtn .btnPA {
    bottom: 40px;
}

.btnFun.btnFunProduct {
    position: inherit !important;
    margin: 5px 0;
}

@media screen and (min-width:991px) and (max-width:1199px) {
    .Hotel2col .images {
        width: 120px;
    }
}

@media (max-width: 767px) {
    .btnFun .btn-sm {
        font-size: 1.125em;
        width: 40px;
        height: 40px;
    }
    .btnFun .icon-inquire:before {
        background-size: 85% !important;
    }
    .btnFun {
        position: inherit !important;
        float: right;
    }
    .images,
    .List ul li a .images {
        width: inherit !important;
        height: auto !important;
        float: none !important;
        margin: 10px auto !important;
        max-height: inherit !important;
    }
    .images img {
        max-width: 100% !important;
        margin: 0 auto !important;
        height: auto !important;
        max-height: none !important;
        object-fit: inherit !important;
        overflow: inherit !important;
    }
    .Content .List p,
    .IntroPage p {
        font-size: 1.125em;
        line-height: 1.8em;
        margin: 0 0 10.5px 0;
    }
    .ListGroup ul li {
        margin: 0 0 40px 0;
    }
    .ListGroup ul li h3,
    .List ul li a h3 {
        margin: 0 0 10px 0;
        line-height: 1.65em;
    }
    .ListGroup ul li h3 .ENname {
        margin-top: 0px;
    }
    .ListGroup ul li .images,
    .ListGroup ul li .images a.videoIMG,
    .Hotel2col .images {
        width: auto !important;
        height: auto !important;
        max-width: 360px !important;
        max-height: 360px !important;
        overflow: hidden;
        float: none !important;
        margin: 0 auto !important;
    }
    .Hotel2col .images {
        width: inherit !important;
        height: inherit !important;
        float: none !important;
        margin: 0 0px 20px 0 !important;
    }
    .ListGroup ul li .images img,
    .ListGroup ul li .images a.videoIMG img,
    .Hotel2col .images img {
        max-width: 100% !important;
        width: auto !important;
    }
    .List ul li h3 a,
    .List ul li a h3,
    .List ul li h3 {
        margin: 0 0 8px 0;
        font-size: 1em;
        clear: both;
        line-height: 1.25em !important;
    }
    .ListGroup .btnFun,
    .ListGroup .btnTrade,
    .ListGroup .btnPA,
    .ListGroup .btnPA img {
        position: inherit !important;
        top: inherit !important;
        right: inherit !important;
        bottom: inherit !important;
        clear: both;
        display: inline-block;
        margin: 0px;
        padding: 0;
        border: none;
    }
    .ListGroup .btnPA img {
        top: inherit !important;
        bottom: -5px !important;
        right: 90px !important;
    }
    .List ul li .meta-time.pull-right {
        float: left !important;
    }
}

@media screen and (max-width: 480px) {
    .ListGroup ul li .images {
        width: auto !important;
        height: auto !important;
        float: none !important;
        margin: 0 auto 15px auto !important;
    }
    .ListGroup ul li .images img {
        width: 100% !important;
        width: auto !important;
        margin: 0 auto !important;
    }
}


/************************** login ***************************/

#login {
    padding-top: 50px
}

#login .form-wrap {
    width: 100%;
    margin: 0 auto;
    padding: 15px;
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 8px solid #333;
    border-radius: 8px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}

#login .form-group.input-group img.code {
    margin: 0;
}

#login h1 {
    color: #333;
    font-size: 1.25em !important;
    text-align: center;
    margin-bottom: 20px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

#login .form-group {
    margin-bottom: 25px;
    clear: both;
}

#login .form-group .form-control {
    background-color: #fff !important;
    color: #333 !important;
}

#login .checkbox {
    margin-bottom: 20px;
    position: relative;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

#login .checkbox.show:before {
    content: '\e013';
    color: #1fa67b;
    font-size: 17px;
    margin: 1px 0 0 3px;
    position: absolute;
    pointer-events: none;
    font-family: 'fontello';
}

#login .checkbox .character-checkbox {
    width: 25px;
    height: 25px;
    cursor: pointer;
    border-radius: 3px;
    border: 1px solid #ccc;
    vertical-align: middle;
    display: inline-block;
}

#login .checkbox .label {
    color: #6d6d6d;
    font-size: 13px;
    font-weight: normal;
}

#login .btn.btn-custom {
    font-size: 14px;
    margin-bottom: 20px;
}

#login .forget {
    font-size: 13px;
    text-align: center;
    display: block;
}

.btn-custom {
    color: #fff;
    background-color: #1fa67b;
}

.btn-custom:hover,
.btn-custom:focus {
    color: #fff;
}


/************************** tab ***************************/

.nav-tabs-dropdown {
    display: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.nav-tabs-dropdown:before {
    content: "\e82c";
    font-family: 'fontello';
    position: absolute;
    right: 30px;
}


/**/

.nav-tabs>li>a,
.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus {
    font-size: 1.125em;
    color: #888;
    padding: 10px 15px;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus {
    border: 2px solid #333;
    font-weight: bold;
    border-bottom-color: transparent;
}

.nav-tabs {
    border-bottom: 2px solid #333;
}

.nav-tabs>li {
    margin-bottom: -2px;
}

@media screen and (min-width: 769px) {
    .nav-tabs-wrapper {
        display: block!important;
    }
}

@media screen and (max-width: 767px) {
    .nav-tabs-dropdown,
    .nav-tabs-dropdown:hover {
        display: block;
        background-color: #ddd !important;
        color: #555;
        text-align: left;
        font-size: 1em;
        border-radius: 8px 8px 0 0;
    }
    .nav-tabs-dropdown:hover,
    .nav-tabs-dropdown:focus,
    .nav-tabs-dropdown.focus {
        background-color: #ddd;
        color: #333;
    }
    .nav-tabs-wrapper {
        display: none;
        text-align: left;
        border-radius: 0 0 8px 8px;
    }
    .nav-tabs-horizontal {
        min-height: 20px;
        padding: 0px;
        margin-bottom: 20px;
        background-color: #ddd;
        border-bottom: none;
        -webkit-box-shadow: inset 0 0px 0px rgba(0, 0, 0, .05);
        box-shadow: inset 0 0px 0px rgba(0, 0, 0, .05);
    }
    .nav-tabs-horizontal > li {
        float: none;
    }
    .nav-tabs-horizontal > li + li {
        margin-left: 0px;
    }
    .nav-tabs-horizontal > li,
    .nav-tabs-horizontal > li > a {
        background: transparent;
        width: 100%;
        margin-left: 0px;
    }
    .nav-tabs>li.active>a,
    .nav-tabs>li.active>a:hover,
    .nav-tabs>li.active>a:focus {
        border: none;
        border-radius: 0;
    }
    .nav-tabs-horizontal > li > a {
        color: #333;
        border-radius: inherit !important;
    }
    .nav-tabs-horizontal > li.active > a,
    .nav-tabs-horizontal > li.active > a:hover,
    .nav-tabs-horizontal > li.active > a:focus {
        color: #ffffff;
        padding: auto !important;
        background-color: #555;
        border-radius: inherit;
        margin: inherit;
    }
}


/************************** tab ***************************/

.ListPhoto h3 {
    font-size: 1em;
    font-weight: bold;
    margin: 10px 0 10px 15px;
    color: #333;
}

.ListPhoto h3:before {
    content: "\e948";
    font-family: 'fontello';
    color: #666;
    padding-right: 5px;
}

.thumbnail {
    margin-bottom: 20px !important;
    border: none;
    border-radius: 0;
    /*outline: 1px solid #ddd;  */
}

.thumbnail:hover {
    outline: 2px solid #ccc;
}

.thumbnail.checked {
    outline: 2px solid #333;
}

.ListPhoto .thumbnail a {
    display: block;
}

.thumbnail .images {
    float: none !important;
    margin: 0 auto !important;
    width: 100%;
    height: 200px;
    overflow: hidden;
    margin: 0 auto;
    margin: 0 auto;
    opacity: .8;
    -moz-opacity: .8;
    filter: alpha(opacity=80);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.thumbnail .images img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    overflow: hidden;
}

.thumbnail .images:hover {
    opacity: 1;
    -moz-opacity: 1;
}

.ListPhoto3 .thumbnail .images {
    height: auto;
}

.ListPhoto3 .thumbnail .images img {
    width: 100%;
    height: auto;
    min-height: auto;
    min-width: auto;
    overflow: hidden;
}

.ListPhoto3 .thumbnail .images:hover img,
.ListPhoto3 .thumbnail .images img,
.ListPhoto3 .thumbnail {
    -webkit-transform: none !important;
    transform: none !important;
    outline: none !important;
}

.CheckText p {
    margin: 0 0 0 27px;
}

.VipBorder .thumbnail,
.VipBorder .thumbnail:hover {
    outline: inherit;
    text-align: center;
}

.VipBorder .thumbnail .images {
    max-width: 250px;
    max-height: 250px;
}

.ListPhoto.ListPhoto4 .thumbnail {
    position: relative;
    text-align: center;
    cursor: pointer;
    padding: 0px;
    background-color: #333;
}

.ListPhoto.ListPhoto4 .thumbnail:hover {
    outline: 2px solid #333;
    background-color: inherit !important;
}

.ListPhoto.ListPhoto4 .thumbnail img {
    position: relative;
    display: block;
    min-height: 100%;
    max-width: 100%;
    min-height: 100%;
    min-width: 100%;
    padding: 0;
    opacity: .5;
}

.ListPhoto.ListPhoto4 .thumbnail:hover img {
    opacity: 1 !important;
}

.ListPhoto4 .thumbnail .caption {
    text-align: right;
    padding: 0;
    margin: 0;
    font-variant: bold !important;
    z-index: 1000;
}

.ListPhoto4 .thumbnail .caption:before {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    border: 1px solid #fff;
    content: '';
}

.ListPhoto4 .thumbnail .caption h4,
.ListPhoto4 .thumbnail .caption p {
    position: absolute;
    right: 20px;
    left: 20px;
    padding: 0px 0;
    margin: 0;
}

.ListPhoto4 .thumbnail .caption p::before {
    font-family: fontello;
    content: "\e8ca";
    margin-right: 5px;
    font-size: 0.85em;
}

.ListPhoto4 .thumbnail .caption p {
    bottom: 20px;
    color: #fff;
    width: 80px;
    left: inherit;
    right: 20px;
    line-height: 1.5;
    font-size: 1.2em;
    text-align: center;
    padding: 5px;
    border-radius: 5px;
    background-color: #333;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.ListPhoto4 .thumbnail .caption h4 {
    font-size: 1.5em;
    color: #FFF;
    top: 10px;
    margin: 0;
    padding: 0;
    font-variant: bold !important;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 20px, 0);
    transform: translate3d(0, 20px, 0);
}

.ListPhoto4 .thumbnail .caption:hover h4 {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    color: #000;
}

.ListPhoto4 .thumbnail .caption:hover h4 {
    text-shadow: 0px 2px 0px rgba(255, 255, 255, 0.3);
}

.ListPhoto4 .thumbnail .caption h4::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #333;
    opacity: 0.6;
    -moz-opacity: 0.6;
    filter: alpha(opacity=60);
    content: '';
    -webkit-transform: translate3d(0, 40px, 0);
    transform: translate3d(0, 40px, 0);
}

.ListPhoto4 .thumbnail .caption h4::after,
.ListPhoto4 .thumbnail .caption p {
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.ListPhoto4 .thumbnail .caption:hover h4::after,
.ListPhoto4 .thumbnail .caption:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}


/*.ListPhoto1 /子首頁*/

.ListPhoto1 {
    margin: 50px 0;
    clear: both;
}

.ListPhoto1 .thumbnail {
    position: relative;
    padding: 0px;
    margin: 0;
}

.ListPhoto1 .thumbnail:hover,
.ListPhoto1 .thumbnail:hover .images {
    outline: none;
    opacity: 1;
    -moz-opacity: 1;
}

.ListPhoto1 .thumbnail .caption {
    overflow: hidden;
    color: #fff;
    position: absolute;
    bottom: 0px;
    height: 55px;
    width: 100%;
    z-index: 1;
    background-color: #333;
    opacity: 0.8;
    -moz-opacity: 0.8;
    filter: filter: alpha(opacity=80);
    padding: 0;
}

.ListPhoto1 .thumbnail:hover .caption {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
}

.ListPhoto1 .thumbnail .caption h4 {
    font-weight: normal;
    font-size: 1.2em;
    padding: 5px;
    margin: 0;
    line-height: 1.3em !important;
}

.ListPhoto2 .thumbnail .caption,
.ListPhoto3 .thumbnail a .caption {
    color: #333;
    margin: 0;
    padding: 0;
}

.ListPhoto2 .thumbnail a .caption h4,
.ListPhoto3 .thumbnail a .caption h4 {
    font-weight: normal;
    font-size: 1em;
    padding: 3px 0;
    margin: 0;
    line-height: 1.4em;
    height: 48px;
    overflow: hidden;
}


/*.ListPhoto2/ 相簿圖*/

.ListPhoto2 {
    margin: 20px 0;
    clear: both;
}

.ListPhoto2 .row {
    padding: 20px 0;
}

.ListPhoto2 .thumbnail {
    outline: 1px solid #ddd;
}

.ListPhoto2 .thumbnail:hover {
    outline: 2px solid #ccc !important;
}

.ListPhoto2 .thumbnail h4 {
    font-size: 1em;
    line-height: 1.4em !important;
    overflow: hidden;
    height: 45px;
    margin: 5px 0;
}

.more {
    margin: 0 0 0 0;
    padding: 0px 5px !important;
    border-radius: 5px;
}

.more a,
.more:hover a {
    color: #fff !important;
    background-color: #ccc;
    border-radius: 5px;
    padding: 0px 5px !important;
}

.ListPhoto2 .thumbnail .more {
    margin: -26px 0 0 0;
}


/*.ListPhoto3 /贊助商廠圖*/

.ListPhoto3 .thumbnail {
    border: none;
    margin: 0 5px 0 0;
}

.ListPhoto3 .thumbnail a {
    position: inherit;
}

.ListPhoto3 .thumbnail a .caption {
    color: #333;
    position: inherit;
    bottom: 40px;
    width: 100%;
    background: transparent;
    margin: 0;
    padding: 0;
}

.ListPhoto3 .thumbnail .images img {
    border: 1px solid #ccc;
    padding: 1px;
}

.ListPhoto3 .thumbnail .images img:hover {
    border: 1px solid #666;
}

@media screen and (min-width:991px) and (max-width:1199px) {
    .ListPhoto2 div.col-md-3 {
        width: 33%
    }
    .ListPhoto2 div.col-md-4 {
        width: 50%
    }
    .ListPhoto1 .thumbnail .caption,
    .ListPhoto1 .thumbnail a .caption {
        bottom: 0;
    }
}

@media screen and (min-width:768px) and (max-width:991px) {
    .ListPhoto1 .thumbnail .caption,
    .ListPhoto1 .thumbnail a .caption {
        bottom: 0;
    }
}

@media (max-width: 767px) {
    .ListPhoto1 .thumbnail .caption,
    .ListPhoto1 .thumbnail a .caption {
        height: auto;
        min-height: 55px;
        bottom: 0;
    }
    .ListPhoto1 .thumbnail h4,
    .ListPhoto2 .thumbnail h4,
    .ListPhoto3 .thumbnail h4,
    .ListPhoto4 .thumbnail h4 {
        font-size: 0.85em;
        font-weight: normal;
        height: auto;
        overflow: inherit;
    }
    .ListPhoto2 .animated .thumbnail .images {
        height: 160px !important;
    }
    .ListPhoto2 .animated .thumbnail .images img {
        height: 160px !important;
        object-fit: cover !important;
        overflow: hidden !important;
    }
    .ListPhoto2 .animated .thumbnail .more {
        margin: -30px 0 0 0;
        padding: 5px 10px;
    }
    .ListPhoto2 .animated .thumbnail h4 {
        height: 90px;
        overflow: hidden;
    }
    .ListPhoto3 .thumbnail a img {
        height: 100px;
    }
}

@media screen and (max-width: 480px) {
    .ListPhoto3 .col-xs-6 {
        width: 100%;
    }
    .ListPhoto2 .animated .thumbnail .images {
        height: 100px !important;
    }
}


/************************** Socialbar ***************************/

.Socialbar {
    left: 15px;
    top: 120px;
    position: fixed;
    z-index: 9999;
}

.Socialbar button {
    background-color: transparent !important;
    border: none;
    display: block;
    padding: 3px;
    color: #555;
    font-size: 1.2em;
}

.share-btn-wrp {
    list-style: none;
    display: block;
    margin: 0px 0 0 0;
    padding: 0px;
    width: 45px;
}

.share-btn-wrp .button-wrap {
    text-indent: -100000px;
    width: 45px;
    height: 45px;
    cursor: pointer;
    transition: width 0.1s ease-in-out;
}

.share-btn-wrp > .facebook {
    background: #3a589e url(../images/share-icons.png) no-repeat center 0px;
}

.share-btn-wrp > .wechat {
    background: #00d30d url(../images/share-icons.png) no-repeat center -45px;
}

.share-btn-wrp > .twitter {
    background: #2aaae0 url(../images/share-icons.png) no-repeat center -90px;
}

.share-btn-wrp > .line {
    background: #4ecd00 url(../images/share-icons.png) no-repeat center -135px;
}

.share-btn-wrp > .weibo {
    background: #f7781a url(../images/share-icons.png) no-repeat center -180px;
}

.share-btn-wrp > .facebook:hover,
.share-btn-wrp > .wechat:hover,
.share-btn-wrp > .twitter:hover,
.share-btn-wrp > .line:hover,
.share-btn-wrp > .weibo:hover {
    opacity: .8;
    width: 50px;
}

@media all and (max-width: 767px) {
    .Socialbar {
        left: inherit;
        top: inherit;
        bottom: 0;
        position: fixed;
        z-index: 99;
    }
    .Socialbar button {
        display: none;
    }
    .share-btn-wrp {
        width: 100%;
        text-align: center;
        position: fixed !important;
        bottom: 0px !important;
        top: inherit;
        left: 0;
        right: 0;
    }
    .share-btn-wrp .button-wrap {
        display: inline-block;
        margin-left: -2px;
        margin-right: -2px;
        width: 20%;
    }
    .share-btn-wrp > .facebook:hover,
    .share-btn-wrp > .wechat:hover,
    .share-btn-wrp > .twitter:hover,
    .share-btn-wrp > .line:hover,
    .share-btn-wrp > .weibo:hover {
        opacity: .8;
        width: 20%;
    }
    .Socialbar button {
        display: none;
    }
}


/************************** build ***************************/

.checkbox {
    position: relative;
    margin: 0;
}


/*.checkbox.checkbox-info{ padding-left:0 !important;}*/

.checkbox label {
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    z-index: 1;
    padding: 0;
    margin: 0px;
    display: block;
    min-height: 25px;
}

.ListGroup ul li .checkbox label {
    margin: -11px 0 0 -11px;
}

.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0;
    display: block;
    padding-left: -20px;
    border: 2px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}

.checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0;
    top: 0;
    margin-left: 0px;
    padding: 0 0 0 3px;
    font-size: 1.25em;
    color: #555555;
}

.checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    opacity: 0;
    z-index: 99 !important;
    margin: 0px;
    padding: 5px;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

body:not(:-moz-handler-blocked) .checkbox input[type="checkbox"],
.checkbox input[type="radio"] {
    left: 10px;
}

.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.checkbox input[type="checkbox"]:checked + label::after,
.checkbox input[type="radio"]:checked + label::after {
    font-family: "fontello";
    content: "\e80d";
}

.checkbox input[type="checkbox"]:disabled + label,
.checkbox input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.checkbox input[type="checkbox"]:disabled + label::before,
.checkbox input[type="radio"]:disabled + label::before {
    background-color: #eeeeee;
}

.checkbox.checkbox-circle label::before {
    border-radius: 50%;
}

.checkbox.checkbox-inline {
    margin-top: 0;
}

.checkbox-primary input[type="checkbox"]:checked + label::before,
.checkbox-primary input[type="radio"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after,
.checkbox-primary input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-danger input[type="checkbox"]:checked + label::before,
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

.checkbox-danger input[type="checkbox"]:checked + label::after,
.checkbox-danger input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-info input[type="checkbox"]:checked + label::before,
.checkbox-info input[type="radio"]:checked + label::before {
    background-color: #333333;
    border-color: #333333;
}

.checkbox-info input[type="checkbox"]:checked + label::after,
.checkbox-info input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-warning input[type="checkbox"]:checked + label::before,
.checkbox-warning input[type="radio"]:checked + label::before {
    background-color: #f0ad4e;
    border-color: #f0ad4e;
}

.checkbox-warning input[type="checkbox"]:checked + label::after,
.checkbox-warning input[type="radio"]:checked + label::after {
    color: #fff;
}

.checkbox-success input[type="checkbox"]:checked + label::before,
.checkbox-success input[type="radio"]:checked + label::before {
    background-color: #5cb85c;
    border-color: #5cb85c;
}

.checkbox-success input[type="checkbox"]:checked + label::after,
.checkbox-success input[type="radio"]:checked + label::after {
    color: #fff;
}

.radio {
    padding-left: 20px;
}

.radio label {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    padding-left: 5px;
}

.radio label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 25px;
    height: 25px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out;
    transition: border 0.15s ease-in-out;
}

.radio label::after {
    display: inline-block;
    position: absolute;
    content: " ";
    width: 11px;
    height: 11px;
    left: 3px;
    top: 3px;
    margin-left: -20px;
    border-radius: 50%;
    background-color: #555555;
    -webkit-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -o-transform: scale(0, 0);
    transform: scale(0, 0);
    -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
    transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
}

.radio input[type="radio"] {
    opacity: 0;
    z-index: 1;
}

.radio input[type="radio"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.radio input[type="radio"]:checked + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
}

.radio input[type="radio"]:disabled + label {
    opacity: 0.65;
}

.radio input[type="radio"]:disabled + label::before {
    cursor: not-allowed;
}

.radio.radio-inline {
    margin-top: 0;
}

.radio-primary input[type="radio"] + label::after {
    background-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::before {
    border-color: #337ab7;
}

.radio-primary input[type="radio"]:checked + label::after {
    background-color: #337ab7;
}

.radio-danger input[type="radio"] + label::after {
    background-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::before {
    border-color: #d9534f;
}

.radio-danger input[type="radio"]:checked + label::after {
    background-color: #d9534f;
}

.radio-info input[type="radio"] + label::after {
    background-color: #333333;
}

.radio-info input[type="radio"]:checked + label::before {
    border-color: #333333;
}

.radio-info input[type="radio"]:checked + label::after {
    background-color: #333333;
}

.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}

.radio-success input[type="radio"] + label::after {
    background-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::before {
    border-color: #5cb85c;
}

.radio-success input[type="radio"]:checked + label::after {
    background-color: #5cb85c;
}

input[type="checkbox"].styled:checked + label:after,
input[type="radio"].styled:checked + label:after {
    font-family: 'fontello';
    content: "\e80d";
    font-size: 1.25em;
    line-height: 26px;
}

input[type="checkbox"] .styled:checked + label::before,
input[type="radio"] .styled:checked + label::before {
    color: #fff;
}

input[type="checkbox"] .styled:checked + label::after,
input[type="radio"] .styled:checked + label::after {
    color: #fff;
}

@media (max-width: 767px) {
    .checkbox label::after {
        font-size: 1em;
    }
}