@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("./public/googlefont/MaterialIcons-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("./public/googlefont/MaterialIcons-Regular.ttf") format('truetype');
}

@font-face {
    font-family: 'Material Icons Outlined';
    font-style: normal;
    font-weight: 400;
    src: url("./public/googlefont/MaterialIconsOutlined-Regular.eot"); /* For IE6-8 */
    src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url("./public/googlefont/MaterialIconsOutlined-Regular.otf") format('truetype');
}

@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url("./public/googlefont/material-symbols-outlined.woff2") format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    /* line-height: 1; */
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* vertical-align: baseline; */
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.material-icons.outlined {
    font-family: 'Material Icons Outlined';
}

.material-icons.symbols-outlined {
    font-family: 'Material Symbols Outlined';
}

.material-icons.symbols-outlined.sm {
    font-variation-settings:'FILL' 0,'wght' 200,'GRAD' 0,'opsz' 48;
}

.material-icons.font-sm { font-size:20px; line-height:20px; }

/**********************************************************************************************************************************/

body { font-size:18px; color:#434655; text-align: center; font-family: "微軟正黑體","Microsoft JhengHei", "Arial", serif; }
img { width:100%; }
html * { max-height: 9999999px; }
ul,li { list-style-type: none; padding:0; margin:0; }
a , a:hover { text-decoration: none; }
button { border:none; background-color:transparent; }

.BD1 { width:100%; height:1px; background-color:#f2668f; }
.BD2 { width:100%; height:1px; background-color:#c6c6c6; }
.BD3 { width:100%; border-bottom:1px dotted #c6c6c6; }
.BD_h2 { height:2px; }
.BD_TLR { border-top-left-radius: 32px; }
.BD_BRR { border-bottom-right-radius: 32px; }

/* 圖片cover */
.gbox { overflow: hidden; }
.gbox .wh { height:100% !important; width:auto !important; }
.gbox .ww { width:100% !important; height:auto !important; }

/* 正方形區塊 */
.BaseBD { position: relative; width:100%; }
.Base169 { padding-top:56.25%; }
.BasePartner { padding-top:55%; }
.Base11 { padding-top:100%; }
.BaseArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; }

.absolute-center { position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); }

.arrowType1 { position: relative; width:160px; height:30px; }
.arrowType1 .arrowLine { position: absolute; top:50%; transform: translate(0px,-50%); height:2px; width:100%; background-color:#939597; }
.arrowType1 .arrowLeft { position: absolute; left:5px; top:0px; border-left:2px solid #939597; border-bottom:2px solid #939597; width:30px; height:30px; transform: rotate(45deg); }
.arrowType1 .arrowRight { position: absolute; right:5px; top:0px; border-right:2px solid #939597; border-top:2px solid #939597; width:30px; height:30px; transform: rotate(45deg); }
.arrowType1:hover .arrowLine { background-color:#f2668f; }
.arrowType1:hover .arrowLeft,
.arrowType1:hover .arrowRight { border-color:#f2668f; }

.arrowType2 { display: inline-block; position: relative; width:60px; height:15px; }
.arrowType2 .arrowLine { position: absolute; bottom:0; width:100%; border-bottom: 1px solid #e8426c; }
.arrowType2 .arrowRight { position: absolute; bottom:0; right:0; border-top:1px solid #e8426c; width:10px; height:5px; transform: rotate(45deg); }

a:hover .arrowLine { border-bottom: 1px solid #007cff; }
a:hover .arrowRight { border-top: 1px solid #007cff; }

.mtop { height:250px; }
.topnb.inside ~ .mtop { height:80px; }

.linkType1 { color:#fff; background-color:#e8426c; border-radius: 30px; }
.linkType1:hover { background-color:#434655; color:#fff; }
a.delete { color:#6c0012; border-bottom:1px solid #6c0012; cursor: pointer; }
a.upload { color:#007cff; border-bottom:1px solid #007cff; cursor: pointer; }
a.upload:hover,
a.delete:hover { color:#e8426c; border-bottom:1px solid #e8426c; }

a.send,
input.send,
button.send { width:100%; border:none; border-radius: 25px; padding:4px 0px; }
a.type1 , button.type1 { background-color:#e8426c; border:2px solid #e8426c; color:#fff; }
a.type1:hover , button.type1:hover { background-color:#434655; border:2px solid #434655; }
a.type2 , button.type2 { background-color:#007cff; border:2px solid #007cff; color:#fff; }
a.type2:hover , button.type2:not(.invalid):hover { background-color:#434655; border:2px solid #434655; }
a.type3 , button.type3 { background-color:#fff; border:2px solid #007cff; color:#007cff; }
a.type3:hover , button.type3:hover { background-color:#007cff; color:#fff; }
button.none { background-color:#434655; border:2px solid #434655; color:#fff; cursor: auto; }
button.back { float:right; padding:10px 20px; background-color:#e8426c; color:#fff; border-radius:25px; width:160px; border:none; }
button.back:hover { background-color:#434655; color:#fff; }
button.back i { font-size:1.5rem; float:left; }
button.wd1 { max-width:200px; }
button.br1 { border-radius: 5px; }

textarea { resize:none; }

form { text-align:left; }
form label { color:#e8426c; margin-bottom:3px; }
form label.add { color:#007cff; border-bottom:1px solid #007cff; cursor: pointer; }
form label.add:hover { color:#e8426c; border-bottom:1px solid #e8426c; }
form label.check { color:#474747; }
form input,
form select,
form textarea { width:100%; background-color:#fff; border:1px solid #c6c6c6; padding:6px 8px; margin-bottom:25px; color:#474747; }
form.odForm input,
form.odForm select,
form.odForm textarea  { background-color:#f1f1f1; color:#474747; }
form button.change { color:#007cff; }
form .security img { width:auto; }
form input.other-w160 { width:160px; padding:2px 6px; margin-bottom:0; }
form input.other-w200 { width:200px; padding:2px 6px; margin-bottom:0; }

form .FormArea { padding:30px 50px; }

form .birth { position: absolute; right:25px; top:40px; color:#474747; border:none; background-color:transparent; }
form .ImageArea { background-color:#fff; border:2px solid #e2e2e2; }
form .imageIcon { font-size:4rem; color:#e2e2e2; }

input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }

/* select 改變按鈕圖示 */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
}

select:not(.dis) { 
    background: url("./images/arrow.png") no-repeat center center;
    background-position:calc(100% - 10px) 50%;
    background-color:#fff;
}

/* ie remove arrow */
select::-ms-expand {
    display: none;
}

/* checkbox style */
.article .check { padding-left:35px; }
.check { display: block; position: relative; padding-left: 30px; margin-bottom: 0px; cursor: pointer; font-size: 1rem; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* overflow:hidden; */
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }/* Hide the browser's default checkbox */
.checkmark { position: absolute; top: 4px; left: 4px; height: 16px; width: 16px; border:1px solid #474747; background-color: #eee; border-radius:3px; }/* Create a custom checkbox */
.checkmark.circle { border-radius: 8px; }
.check:hover input ~ .checkmark { background-color: #ccc; }/* On mouse-over, add a grey background color */
.check input:checked ~ .checkmark { background-color: #000; }/* When the checkbox is checked, add a blue background */
.check input:checked ~ .checkmark.circle { background-color: transparent; }
.checkmark:after { content: ""; position: absolute; display: none; }/* Create the checkmark/indicator (hidden when not checked) */
.check input:checked ~ .checkmark:after { display: block; }/* Show the checkmark when checked */
.check .checkmark.tick:after { left: 4px; top: 1px; width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.check .checkmark.circle:after { left: 4px; top: 4px; width: 6px; height: 6px; background-color:#474747; border-radius: 5px; }

/* placeholder color */
::-webkit-input-placeholder{ color:#777777; }
/* ::-moz-placeholder { color:#777777; } */
/* ::-ms-input-placeholder{ color:#777777; } */

.numType1 { font-family: 'arial'; }

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

/* topnb */
.topnb { position: absolute; top:0px; padding:30px 40px; background-color:#fff; color:#303030; width:100%; z-index:10; transition: top 0.3s; }
.topnb .logo img { width:auto; height:110px; }
.topnb .logo .img2 { display: none; }

.topnb .menu { font-size:1.25rem; }
.topnb .menu .nav-item { position: relative; padding:0px 15px; }
.topnb .menu .nav-item .dot { display: block; margin:0px auto; width:4px; height:4px; border-radius:4px; background-color:#434655; }
.topnb .menu .nav-link { color:#434655; font-weight: bold; }
.topnb .menu .nav-link:hover { color:#e8426c; }

.topnb .menu .nav-item .dp_menu { display: none; position: absolute; padding:5px 10px; left:50%; transform: translate(-50%,0px); white-space: nowrap; background-color:#fff; }

.topnb .topbtn { position: absolute; right: 15px; top:40px; line-height: 40px; }
.topnb .topbtn a { color:#434655; display: inline-flex; align-items: center; font-size:1.25rem; font-weight: bold; }
.topnb .topbtn a:hover { color:#e8426c; }
.topnb .topbtn a .icon { font-size:1.125rem; }

.topnb .topbtn button { color:#555664; }

/* topnb inside */
.topnb.inside { position: fixed; display: flex; justify-content: space-between; padding: 0; padding-right:200px; }
.topnb.inside .logo { padding:20px 15px; }
.topnb.inside .logo .img1 { display: none; }
.topnb.inside .logo .img2 { display: block; height:40px; }

.topnb.mem { height:80px; padding-right:0; }
.topnb.mem .contain { display: flex; justify-content: space-between; align-items:center; max-width:1320px; width:100%; margin:0 auto; }
.topnb.mem .contain .logo { padding:10px; }
.topnb.mem .contain .logo img { height:50px; }
.topnb.mem .contain .homelink { height:80px; padding:20px; }

.topnb.mem .contain .Bonus { font-size:2rem; }
.topnb.mem .contain .Bonus .material-icons { font-size:2rem; }

.collapse .mask { position: fixed; top:0; left:0; bottom:0; right:0; background-color:rgba(0,0,0,0.5); z-index:2; }

/* footer */
.footer { background-color:#de416c; color:#fff; }
.footer a { color:#fff; }
.footer a:hover { color:#555664; }
.footer .top { padding:70px 0px; }
.footer .top .logo { margin-bottom:30px; }
.footer .top .logo img { height:120px; width:auto; }
.footer .top .logo_txt { color:#262626; }

.footer .top .info { line-height: 35px; }
.footer .top .info .txt1 { font-size:1rem; }
.footer .top .bshour { font-size:0.875rem; }

.footer .top .link { text-align: left; line-height: 35px; }
.footer .top .link .BD1 { position: absolute; top:50%; transform:translate(0,-50%); }

.footer .bottom { padding:25px 0px; display: flex; justify-content: space-between; }
.footer .bottom .icon span { display: inline-block; padding:0px 10px; }
.footer .bottom .icon .lineImg { padding:0px 10px; background:url("./images/ico_line.png") no-repeat center center; background-size:18px; }
.footer .bottom .copy { font-size:0.875rem; }


/* .fill { background-color: #66493d; } */

/* sidebar */
.sidebar { position:fixed; right:0px; top:50%; transform:translate(0px,-50%); z-index:2; transition: right 0.3s; }
.sidebar > button { display: block; width:80px; height:80px; background-color: rgba(67, 70, 85, 0.8); color:#fff; }
.sidebar > button:hover { background-color: #434655; opacity: 1; cursor: pointer; }
.sidebar button .icon { font-size:1.25rem; }
.sidebar button .name { font-size:0.75rem; margin-top:8px; }
.sidebar button .bd { width:20px; border-bottom:1px solid #fff; position: absolute; top:80px; left:30px; }
.sidebar .buycar { position: relative; }
.sidebar .buycar .num { position: absolute; top:13px; right:15px; width:24px; height:24px; line-height:24px; border-radius: 50%; color:#fff; background-color:#434655; font-size:0.8rem; }
.sidebar > button:hover .num { background-color: #e8426c; }
.sidebar .totop { background-color: #2f92fd; opacity: 0.8; }
.sidebar .icon .lineImg { display: block; width:32px; height:32px; padding:8px 0px; margin:0 auto; text-align: center; background:url("./images/ico_line.png") no-repeat center center; background-size:24px; }

/* bottombar */
.ctlbar { transition: bottom .3s; /*transition-delay: .5s;*/ }
.bottombar { position:fixed; bottom:0px; width:100%; display:flex; z-index:5; }
.bottombar > button { flex:1; padding:12px 0px 4px 0px; border:none; color:#fff; background-color: rgba(67, 70, 85, 0.8); }
.bottombar > button:hover { background-color: #434655; opacity: 1; cursor: pointer; }
.bottombar button .icon { font-size:1rem; }
.bottombar button .name { padding-top:2px; font-size:0.75rem; }
.bottombar .buycar .icon span { position: relative; }
.bottombar .buycar .num { position: absolute; top:-10px; right:-10px; width:16px; height:16px; line-height:16px; border-radius: 50%; color:#fff; background-color:#434655; font-size:0.75rem; font-weight:normal; }
.bottombar > button:hover .num { background-color:#e8426c; }
.bottombar .totop { background-color:#2f92fd; color:#fff; padding:21px 0; }
.bottombar .icon .lineImg { display: block; width:18px; height:18px; margin:0px auto; background:url("./images/ico_line.png")no-repeat center center; background-size:18px; }

/* modal */
.clickable { cursor: pointer; }
#searchModal .close { position: absolute; right:0px; top:-50px; color:#ffffff; text-shadow:none; opacity: 1; }
#searchModal .modal-dialog { margin:8rem auto; max-width:730px; }
#searchModal .modal-content { border-radius: 0; text-align: left; }
/* .modal .modal-body { padding:14px; } */
#searchModal .modal-body input { border:none; width:calc(100% - 40px); border-right:1px solid #c6c6c6; }
#searchModal .modal-body .fa-search { color:#262626; width:30px; text-align: right; border:none; background-color:transparent; padding:0px; }
#searchModal .modal-body .fa-search:hover  { color:#4b9007; }

/* buy car modal */
#buyCarModal .modal-dialog { width:300px; position: absolute; right:0; height:100%; margin:0; border-radius: 0; }
#buyCarModal .modal-header { background-color: #e8426c; border-top-left-radius: 0; border-top-right-radius: 0; }
#buyCarModal .modal-header .mTitle { margin:0 auto; color:#ffffff; }
#buyCarModal .closebc { position: absolute; left:-50px; color:#ffffff; border:none; background-color:transparent; font-size:0.8rem; }
#buyCarModal .closebc span { font-size:1.3rem; }
#buyCarModal .modal-content { height:100%; border-radius: 0; }
#buyCarModal .modal-body { position: relative; overflow-y:auto; }
#buyCarModal .bclist { padding:20px 0px; border-bottom:1px solid #f7f0e7; }
#buyCarModal .bcimg { height:100%; float:left; }
#buyCarModal .bcimg img { height:64px; width:64px; }
#buyCarModal .bcdes { float:right; width:calc(100% - 64px); padding-left:10px; text-align: left; }
#buyCarModal .bcdes .pType { color:#aeaeae; font-size:0.875rem; padding-top:15px; }
#buyCarModal .bcdes .pSum { font-size:0.75rem; line-height:24px; padding-top:20px; font-family: "Helvetica"; }
#buyCarModal .pPrice { color:#e8426c; font-size:0.75rem; font-family: "Helvetica";  }
#buyCarModal .num { font-size:1rem; }
#buyCarModal .total { text-align:left; padding-top:20px; color:#898989; }
#buyCarModal .modal-footer { border-top:none; }
#buyCarModal .nolist { padding-top:20px; }

#loginModal .close { position: absolute; right:0px; top:-50px; color:#ffffff; text-shadow:none; opacity: 1; font-weight: normal; font-size:1rem; }
#loginModal .modal-dialog { margin:10vh auto; max-width:572px; }
#loginModal .modal-content { border-radius: 0; }
#loginModal .modal-body { padding:0; }
#loginModal .modal-body .close .material-icons { font-size:1.25rem; transform: translate(4px,4px); }

/* ====== login ====== */
.lr_main .title { display:flex; font-size:1.25rem; }
.lr_main .title a { flex:1; padding:15px; color:#fff; background-color:#434655; text-decoration: none; }
.lr_main .title .active { cursor: default; background-color: #ffffff; color:#434655; }

.lr_main .login .check.remember { color:#474747; }
.lr_main .lr_link { display: flex; justify-content: flex-end; padding-top:20px; }
.lr_main .lr_link a { color:#007cff; }
.lr_main .lr_link span { font-size:1.25rem; }

.lr_main .login,
.lr_main .join { padding:30px; }
.lr_main .join { display: none; }
.lr_main .join .content { margin-bottom:30px; color:#474747; }
.lr_main .join .mhjoin { height:10px; }



::-webkit-input-placeholder{ color:#777777; }
/* scrollbar */
.topnb .menu *::-webkit-scrollbar{ display:none; }
.top .topmenu .subject::-webkit-scrollbar { display:none; }
#leftbarMenu .LeftBar::-webkit-scrollbar { display: none; }

/* product */
.prod_img a { overflow: hidden; }
.prod_img a img { transition: all .2s ease-out 0s; }
.prod_img a:hover img { transform: scale(1.1);  }

.map-responsive{
    overflow:hidden;
    padding-bottom:480px; /* map height */
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

@media (max-width:1199.98px){
    .mtop { height:170px; }

    .topnb .menu { position: absolute; left:0; right:0; top:100%; background-color:#fff; }
    .topnb .menu .navbarItems { transition: all .3s; }
    .topnb .menu .navbarItems .navbar-nav { overflow: auto; max-height:calc(100vh - 170px); }
    .topnb.inside .menu .navbarItems .navbar-nav { max-height:calc(100vh - 80px); }
    .topnb .menu .subt { position: relative; }
    .topnb .menu .subt.bg1 { background-color:#434655; }
    .topnb .menu .subt.bg1 a { color:#fff; }
    .topnb .menu .subt .icon { position: absolute; right:10px; top:15px; }
    .topnb .menu .subt .material-icons { font-size:1.125rem; }
    .topnb .menu .nav-link { display: inline-block; }
    .topnb .menu .nav-item { padding:0; }
    .topnb .menu .nav-item .dp_menu { position: static; padding:0; transform: none; background-color:#ffedf3; }
    .topnb .menu .nav-item .dp_menu li { border-bottom:1px solid #fff; }

    .topnb .topbtn { top:50%; transform: translate(0px,-50%); }
    .topnb .topbtn button .material-icons { font-size:2rem; }

    .sidebar { display: none; }
}

@media (max-width:991.98px){

    .arrowType1 { width:120px; }

    .topnb.mem .contain .logo img { height:40px; }

    .footer .top .info { margin:30px 0px; }
    .footer .top .bshour { margin:30px 0px; }

    .footer .bottom { flex-direction: column; }
    .footer .bottom .icon { margin-bottom:30px; }

    .Hover_Before { display: flex; }
    .Hover_After { display: block; position: static; }
}

@media (max-width:767.98px) {
    .mtop { height:140px; }

    .arrowType1 { width:60px; }
    .arrowType1 .arrowLeft { width:16px; height:16px; top:7px; left:0; }
    .arrowType1 .arrowRight { width:16px; height:16px; top:7px; right:0; }

    .arrowType2 { width:40px; }

    form label { font-size:1rem; }
    form .FormArea { padding:20px; }

    .topnb { padding:30px; }
    .topnb .logo img { height:80px; }
    .topnb .topbtn { right:10px; }
    .topnb .menu .navbarItems .navbar-nav { max-height:calc(100vh - 140px); }
    
    .topnb.mem { height:60px; }
    .topnb.mem ~ .mtop { height:60px; }
    .topnb.mem .contain .logo { padding-left:5px; }
    .topnb.mem .contain .logo img { height:30px; }
    .topnb.mem .contain .homelink { height:60px; padding:12px; }
    .topnb.mem .contain .Bonus { font-size:1.5rem; }
    .topnb.mem .contain .Bonus .material-icons { font-size:1.5rem; }

    .modal .modal-dialog { margin:10vh auto; max-width:540px; }

    .bottombar .totop { padding:12px 0px; }

    .lr_main .login,
    .lr_main .join { padding:20px; }
}

@media (min-width:768px){
    .lr_main { max-width:540px; }
}

@media (min-width:992px){

    .footer { text-align:left; }
    .footer .top .logo_txt { padding-left:25px; }
    .footer .bottom .copy > div { display: inline-block; padding-left:20px; }

    .container.mlg { max-width:950px; }

    .Hover_Scale { transition: all .2s ease-out 0s; }
    .Hover_Scale:hover { transform: scale(1.1); }

    .Hover_Before { display: flex; }
    .Hover_After { display: none; border:1px solid #fff; color:#fff; }
    .Hover_Scale:hover .Hover_Before { display: none; }
    .Hover_Scale:hover .Hover_After { display: flex; }
}

@media (min-width:1200px){
    .bottombar { display: none; }

    .topnb .menu { margin-top:30px; }
    .topnb .menu .nav-item:hover > .dp_menu { display: block; }

    .topnb.inside .topbtn { top:0px; right:0; }
    .topnb.inside .topbtn .btnTop { width:200px; padding:19px 20px; background-color:#555866; color:#fff; }
    .topnb.inside .topbtn .btnTop a { color:#fff; }
    .topnb.inside .topbtn .btnTop a:hover { color:#e8426c; }
    .topnb.inside .topbtn .btnBottom { padding-right:20px; }

    .topnb.inside .menu { font-size:1.125rem; margin-top:0px; padding:16px 15px; }
    .topnb.inside .menu .nav-item { padding:0; }

    .topnb.mem .contain .homelink { background-color:#555866; color:#fff; }
    .topnb.mem .contain .homelink .material-icons { font-size:1.125rem; }
    .topnb.mem .contain .Bonus { position: absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}

@media (min-width:1500px){
    .topnb.inside .menu { font-size:1.25rem; padding:15px; }

    .topnb.inside .logo { padding:15px; }
    .topnb.inside .logo .img2 { height:50px; }

    .container.xxl { max-width:1320px; }
}



/********************************* jcarousel *********************************/
.jcarousel-wrapper {
    margin: 0px auto;
    position: relative;
}

/** Carousel **/

.jcarousel {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.jcarousel ul {
    width: 10000em;
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}

.jcarousel li {
    width: 200px;
    /* 左右切換 */
    /* float: left; */
    /* 淡入淡出 */
    position: absolute;
    top:0;
    left:0;
    /* border: 1px solid #fff; */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.jcarousel li.slide {
    position: static;
    float: left;
}

.PicArea .jcarousel img {
    display: block;
    max-width: 100%;
    height: auto !important;
}

.jcarousel li .bnr { opacity: 0; }

/** Carousel Controls **/

.control-prev { left: 40px; }

.control-next { right: 40px; }

.jcarousel-control-prev,
.jcarousel-control-next { 
    position: absolute; 
    top: 50%; 
    transform:translate(0,-50%);
    width: 32px; 
    height: 32px; 
    text-align: center; 
    background-color: #e2e2e2;
    opacity: 1;
    z-index: 0; 
    font-size:1.5rem; 
    padding: 4px 0px;
    color: #555866;
    text-decoration: none; 
    cursor: pointer; 
}

.topbnr .jcarousel-control-prev,
.topbnr .jcarousel-control-next {
    width: auto;
    height: auto;
    background-color: transparent;
}

.jcarousel-control-prev:hover,
.jcarousel-control-next:hover {
    opacity: 1;
    color: #e8426c;
}

.slide-btn { position: absolute; bottom: 0vh; right:20vw; width: 60px; height: 130px; color: #007cff; font-size:0.9rem; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; transition: .3s; z-index:5; }
.slide-btn i { text-decoration: none; color:#ec4067; position: absolute; top:55%; left:50%; font-size:2.5rem; transform:translate(-50%); animation: jump 3s infinite; }
.slide-btn:hover { cursor: pointer; color:#FEEB8C; text-decoration: none; }
.slide-btn:hover .slidebd .bar { background-color:#b2956e; }
.slide-btn .txt { line-height: 50px; font-size:0.75rem; -webkit-transform: rotate(90deg) translate(-10px,0px); -moz-transform: rotate(90deg) translate(-10px,0px); -ms-transform: rotate(90deg) translate(-10px,0px); -o-transform: rotate(90deg) translate(-10px,0px); transform: rotate(90deg) translate(-10px,0px); }
.slide-btn .slidebd { position: relative;  height:80px; width:2px; background-color: transparent; margin-left:29px; overflow: hidden }
.slide-btn .slidebd .bar { position: absolute; top:0px; height:40px; width:1px; background-color:#007cff; animation: jump 2s infinite; }

@keyframes jump {
    0% { top:-30px; opacity: 1 }
    20%{ opacity: 1 }
    100% { top:100px; opacity: 0}
}

/** Carousel Pagination **/

.jcarousel-pagination { position: absolute; bottom: -25px; left:50%; transform:translate(-50%,0px); height:12px; margin: 0; }
.jcarousel-pagination a { padding : 10px 0px; text-indent: -9999px; }
.jcarousel-pagination a span { text-decoration: none; display: inline-block; height: 16px; width: 16px; line-height: 20px; background: #e2e2e2; border-radius: 25px; margin:0px 10px; }
.jcarousel-pagination a:hover span,
.jcarousel-pagination a.active span { background: #e8426c; }

.gallery .jcarousel-pagination a span { width:8px; height:8px; margin:0px 5px; background:transparent; border:1px solid #e8426c; }
.gallery .jcarousel-pagination a:hover span,
.gallery .jcarousel-pagination a.active span { background: #e8426c; }

@media (max-width:1199.98px) {
    .jcarousel-control-prev { left: 0px; }
    .jcarousel-control-next { right: 0px; }
    .topbnr .jcarousel-control-prev { top:65%; left: 30px; }
    .topbnr .jcarousel-control-next { top:65%; right: 30px; }
}

@media (max-width:767.98px){
    .topbnr .jcarousel-control-prev,
    .topbnr .jcarousel-control-next {
        font-size:1.5rem;
        padding:15px 0px;
    }

    .topbnr .jcarousel-control-prev { left:15px; }
    .topbnr .jcarousel-control-next { right:15px; }
    .topbnr .jcarousel-pagination{ right:40px; }
}

@media (min-width:768px){
    .gallery .jcarousel-wrapper { transform:translate(-10px,-70px); }
}