@charset "utf-8";
/******************************/

/*捲軸底色*/
::-webkit-scrollbar-track {
  -webkit-box-shadow:  0 -1px 2px rgba(0, 0, 0, 0.8);
  background-color: #fff;
  border:1px solid #ccc; padding:2px
}
/*捲軸寬度*/
::-webkit-scrollbar {  width: 7px; height: 7px;  background-color: #888;}
/*捲軸本體顏色*/
::-webkit-scrollbar-thumb {  background-color: #c7c7c7;    border-radius: 3px;     -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);}
.modal-header .btn-close{ z-index:15}
body, html {    width: 100%;	height: 100%;}

body{	color: #444;
	font-family: arial, tahoma, "微軟正黑體", "Microsoft Yahei", Helvetica, sans-serif;	font-size: 1rem;}
input,button,a{outline:none!important;}
input::placeholder{ font-size:0.9rem}

a {	color: #444;	text-decoration: none;	transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;    
	-o-transition: all 300ms ease-in-out;}
a:hover {	color:#FF2323;	text-decoration: none;}
a.turquoise {	color: #00c9db;}
a.white {	color: #fff;}
img{ transition: 0.4s all ease;}
.modal{ color:#333}
.modal-title{line-height: 1.3;    font-size: 1.05rem;}
.btn-primary {    background-color: #2782ce;    border-color: #2782ce;}
.btn-primary:hover{	background-color: #1D6198;}
.btn-outline-secondary{border-color: #ced4da;    background-color: #e9ecef;}
.btn-outline-secondary:hover, .btn-outline-secondary:focus{ color:#F63; background-color:#e3f4fd; border-color: #ced4da;}

.alert-set{ width:320px; margin: 5rem auto;}
.alert-set, .alert-set .spinner-grow{    font-size: 1.15rem;    display: flex;    justify-content: center;    align-items: center;    gap: 0.5rem;     flex-wrap: wrap; text-align:center}
.alert-set i{    font-size: 1.3rem;    color: #fff; vertical-align:middle;}
.alert-success{     background-color: #e0f9de;    border-color: #b8e5b9;}

.alert-set .text-success{ background-color:#35a100; }

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.R-side-box{ position: fixed; right: 8px;  bottom: 5%;  z-index: 996;}
.back-to-top, .R-side-service, .R-side-chat{ background: #1f7dcc;  width: 40px;  height: 40px;  border-radius: 50px;    border: 1px solid #fff; margin-bottom:10px; box-shadow: 0 0 6px rgb(255,255,255);    box-sizing: border-box;}
.R-side-service{ }
.back-to-top {  visibility: hidden;  opacity: 0;   transition: all 0.4s;}

.back-to-top i, .R-side-service i, .R-side-chat i{  font-size: 20px;  color: #fff;  line-height: 0;}
.back-to-top:hover, .R-side-service:hover, .R-side-chat:hover{  background: #2194f7;  color: #fff;}
.back-to-top.active, .R-side-service.active, .R-side-chat.active{  visibility: visible;  opacity: 1;}
.R-side-chat{}

/*側滑模組*/
#chatTool{
	display: none; /* 初始隱藏 */
    position: fixed;
    bottom: 0;
    right: 6%; /* 初始位置在右邊隱藏 */
    width: 220px;
    height: 150px;
    background-color: #fff;
	border:1px solid #555; padding:10px;
	opacity: 1; /* 初始不透明 */

  }

/*自訂btn*/
.btn-blue, .btn-orange, .btn-black{color:#FFF; padding:8px 15px; margin:2px; display:block;letter-spacing: 1px; text-align: center;  text-decoration: none;transition: background-image .5s,transform .5s; font-size:1rem; border-radius: 6px;}
.btn-blue{ background:#2782ce; border: 1px solid #cbecff;  color:#fff	}
.btn-orange{ background-color:#F63;	border: 1px solid #ffe53a; color:#FFF 	}
.btn-black{ background-color:#1b6cb1}
.btn-blue:hover, .btn-orange:hover, .btn-black:hover{transform:translateY(-10%); text-decoration: none; color:#fff}
.btn-black:hover{ color:#FFF}
.btn-blue:hover{	background-color: #2B6384;}
.btn-orange:hover{	background: #f78621;}


/*上區主功能選單*/
.home_W_set{ margin: 0 auto;    width: 1190px; transition: all ease 1s;position: relative; 
	display: flex;    align-items: center;    justify-content: space-between;  }
.head_lan{ background-color: #1b6cb1; }
.head_lan_group{   height: 4px;   }


.head_lan_R div{ margin: 0 5px; display:flex; position:relative; align-items: center;}


.head_lan_R{display: flex;    align-items: center; height: 100%; margin:0 0.8rem; position:relative}
.head_lan_R i, .head_lan_L i{ margin:0 3px; font-size: 0.9rem; color:#ffd886}
.head_lan a{ color: #fff; }
.head_lan a:hover{	color: #FFDEA8;}
.top-user-menu ul{    list-style: none; margin:0 auto; padding:0; width:83%  }
.top-user-menu {position: absolute; min-height: 50px;      width: 220px;    background-color: #fff;   display: grid;     gap: 1rem;    top: 52px;    border-radius: 6px;    font-size: 0.85rem;    color: #999;     z-index: 2000;    right: -2.5%;  box-shadow: 0 0 8px rgba(0, 0, 0, .3);}
.top-user-menu li i{ font-size:1.2rem   }	
.top-user-menu li a{ display: flex;    align-items: center;    gap: .8rem;    color: #363636;padding:8px; border-bottom:1px solid #ddd; width:100%  }
.top-user-menu li a:hover{ background-color:#e9f7ff}
.top-user-ID{ background-color:#ededed; width:100%; padding:0.6rem 0.3rem; text-align:center; color:#000;     border-radius: 6px 6px 0 0; font-size:1rem; display:none}
.top-user-menu .btn-group, .top-user-menu .btn-group-vertical{width: 84%;    margin: 0 auto 1rem;}
.li-right{   color: #fa5414; flex: 1;    display: flex;    align-items: center;    justify-content: end;  }
.top-user-menu .btn{ font-size:0.9rem}
.head_icon{     display: flex;       padding-left: 1.5rem;     align-items: center;     gap: 0.5rem; position:relative}
.top-btn-register, .top-btn-login, .top-btn-cart{   display: flex;    align-items: center;    font-size: 0.9rem;    border-radius: 50px;    color: #fff;    width: 45px;    height: 45px;    justify-content: center;  position:relative; box-shadow: inset 0 -2px 3px #cfcfcf; background-color: #8b99a5;}
.top-btn-register:hover, .top-btn-login:hover, .top-btn-cart:hover, .top-btn-ID:hover, .top-btn-ID-icon:hover{ background-color:#1f7dcc; color:#fff}
.top-btn-cart, .top-btn-ID, .top-btn-ID-icon{border: 1px solid #a9a9a9; box-shadow: inset 0 -2px 3px #cfcfcf; background-color:#8b99a5;}

.top-btn-cart{      padding-bottom: 5px; font-size:1.3rem;     border-radius: 50px 0 0 50px; width:50px }
.top-btn-cart .car-qty{      background-color: #fc8214;    color: #ffffff;    font-size: 0.7rem;    min-width: 16px;    height: 16px;    border-radius: 50px;    padding: 3px;    justify-content: center;    margin: 4px 0 0;    position: absolute;    top: -8px;    right: 0;    display: flex;    align-items: center;}
.top-btn-ID, .top-btn-ID-icon{   border-radius: 0 50px 50px 0;  color: #fff;    height: 45px;    margin-left: -0.7rem;    display: flex;    align-items: center;    padding: 0 0.9rem;   }
.top-btn-ID i{ margin-left:5px}
.top-btn-ID-icon{ display:none ; padding-top: 4px;}
.top-btn-ID-icon i{  font-size:1.3rem;   }


/*搜尋bar*/
.searchBar{ width:50%;     display: flex;     justify-content: flex-end; align-items: center;}
.searchbar-form{ border: 1px solid #2782ce; justify-content: space-between;    display: flex;    align-items: center; padding: 0 12px;border-radius:50px;     height: 45px; width:48% ; position: relative;     background-color: #fff;}

.searchBar form{ width:100%; margin-bottom:0}
.searchBar .input-txt{height: 2.5rem;  border: 0;   width: 75%; font-size:0.95rem; background-color: transparent;letter-spacing:1px; color:#555}
.searchBar .input-btn{
  position: absolute;  top: 0;  right: 0;  bottom: 0;  border: 0;  background: none;  font-size:1rem;  padding: 0 20px; color: #2782ce;  transition: 0.3s;  border-radius: 40px;}

.searchBar .input-btn:hover {  background: #2782ce; color:#fff}
.searchBar .input-txt::placeholder{ color:#C0C0C0; font-size:0.85rem; }
.box-tools{ position:relative}
.box-tools .form-group{ position:absolute; width:100%;     margin-top: 0.2rem;     z-index: 10;}
ul.seachTxt{ position: absolute;  width:100%; background-color:#fff; border:1px solid #F4F4F4; list-style:none; padding:10px;     display: grid;    grid-template-columns:1fr;    gap: .56rem;     left: 0;
    top: 35px;    border-radius: 10px; font-size:0.85rem; color:#999}
.search-hot ul li a:hover{ color:#F63}
/*內頁搜尋列*/
.search-bar .btn{padding: .375rem 1.55rem;}
.search-bar .btn-primary{background-color: #2782ce;
    border-color:  #2782ce;}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  background:rgb(233 247 255);  transition: all 0.5s;  z-index: 1035;  height: 120px;  top: 4px;}
#header.header-scrolled {      box-shadow: 0 0 5px rgba(0, 0, 0, .5);    height: 90px;  top: 0; background: rgba(255, 255, 255, 1)}
.header_info{   /* justify-content: flex-start;*/}

#header .logo {}
#header .logo a { }

#header .logo img {  max-height: 50px;}
.header-inner-pages {  background: rgba(5, 87, 158, 0.9) !important;}
.topbar-inner-pages {  background: rgba(6, 98, 178, 0.9) !important;}



/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {  padding: 0;}
.navbar ul {  margin: 0;  padding: 0;  display: flex;  list-style: none;  align-items: center;}
.navbar li {  position: relative;}
.navbar>ul>li {  position: relative;  white-space: nowrap;  padding: 10px 24px;}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  color: rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  transition: 0.3s;
  position: relative; font-weight: 500;
}

.navbar a i,
.navbar a:focus i {  font-size: 12px;  line-height: 0;  margin-left: 5px;}

.navbar>ul>li>a:before {
  content: "";
  position: absolute;
  /*width: 100%;*/
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: #f6b024;
  visibility: hidden;
  width: 0;
  transition: all 0.3s ease-in-out 0s;
}

.navbar a:hover:before,
.navbar li:hover>a:before,
.navbar .active:before {  visibility: visible;  width: 100%;}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 8px;
}

.navbar .dropdown ul li {  min-width: 150px;}

.navbar .dropdown ul a {  padding: 10px 20px;  font-weight: 500;  text-transform: none;}

.navbar .dropdown ul a i {  font-size: 12px;}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {  color: #0880e8; text-decoration: none;}

.navbar .dropdown:hover>ul {  opacity: 1;  top: 100%;  visibility: visible;}

.navbar .dropdown .dropdown ul {  top: 0;  left: calc(100% - 30px);  visibility: hidden;}

.navbar .dropdown .dropdown:hover>ul {  opacity: 1;  top: 0;  left: 100%;  visibility: visible;}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/


.mobile-nav-toggle {
  color: #222;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
width: 28px; height: 28px
}

.mobile-nav-toggle.bi-x {  color: #f6b024;}

@media (max-width: 991px) {
  .mobile-nav-toggle {    display: block;  }
  .navbar ul {    display: none;  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(5, 74, 133, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {  position: absolute;  top: 15px;  right: 15px;}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile>ul>li {  padding: 0;}

.navbar-mobile a,
.navbar-mobile a:focus {  padding: 10px 20px;  font-size: 15px;  color: #0665b7;}

.navbar-mobile a:hover:before,
.navbar-mobile li:hover>a:before,
.navbar-mobile .active:before {  visibility: hidden;}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {  color: #f6b024;}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {  margin: 15px;}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {  min-width: 200px;}
.navbar-mobile .dropdown ul a {  padding: 10px 20px;}
.navbar-mobile .dropdown ul a i {  font-size: 12px;}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {  color: #f6b024;}

.navbar-mobile .dropdown>.dropdown-active {  display: block;}
.main_box{ padding-top:180px;     flex-wrap: wrap;    justify-content: center; padding-bottom:80px;     min-height: calc(100vh - 288px); align-items: normal;}

.focus-inform{    display: grid;    grid-template-columns:65% repeat(1,1fr);    gap: 0 1rem;     padding:0; margin-bottom:40px; }
.focus-inform .news-box-title{ margin:0}
.ADimg_box{     justify-content: center; position:relative; text-align:center}
.ADimg_box .carousel-item {  border-radius: 3px; overflow:hidden}
 /*.ADimg_box .carousel-item img{object-fit:cover; height: 100%; display: block;    border-radius: 10px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;}*/

/*new圖文區*/
ul.news-box  {    display: flex;list-style: none;   margin: 0;  padding: 0; flex-direction: column;}
.news-box li {    flex: 1;    position: relative;    padding: 0 0.5rem; justify-content: flex-start;    display: flex;}
.news-box li a {    display: flex;    align-items: center;    color: #363636; font-size:0.9rem   }
.news-box li a:hover {    color: var(--bs-blue);}
.news-box-img {    display: flex;    align-items: center;    width: 85px;	height:50px;    background-color:#efefef;
    border-radius: 4px;    overflow: hidden; margin-right: 0.8rem}
.news-box-img img {    transition: 0.4s all ease;}
a:hover .news-box-img img {    transform: scale(1.1);}
.news-box-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; margin:0.8rem 0
}
.news-box-title:hover{ color:var(--bs-blue)}
/*.news-box li:not(:last-child):after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: #ddd;
}*/
/**熱門產品**/
.hot_pro{ padding-top:20px}
.page_title {
    display: flex;
    align-items: center;
    gap: 1rem;
	margin-bottom:10px
	
}
.page_title i{ font-size:1.3rem; color: #fff;    background-color: #fa5714;    width: 35px;    padding-top: 0.4rem;
    text-align: center;    height: 35px;    border-radius: 80px;    background:linear-gradient(to bottom, rgb(255 222 160) 0%, rgb(255 74 0) 100%);}
.page_title h2{ font-size:1.5rem; margin-bottom:0;     display: flex; }
.page_title_icon { width:120px;}
.hot-pro-info{    display: grid;    gap: 2.5rem; padding:0}


/*產品列表 */
.pro-list {    display: grid;    grid-template-columns: repeat(5,1fr);    gap: 3rem;
    margin-top: 1.2rem; 	list-style: none; padding:0}
.pro-list .pro-img {    position: relative;    
    width: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, .3); border: 1px solid #e9e9e9;     border-radius: 0.8rem;
    overflow: hidden; border-radius: 0.8rem; /*height: 0; padding-bottom: 100%;*/}

.pro-list li a {    position: relative;    display: grid;    gap: 0.8rem;    color: #444;    font-size: 0.95rem; word-break: break-all;}
.pro-list li a strong{	font-weight: normal; text-align:left}
.pro-list li a img {
	transform: scale(1.01);
	max-width: 100%;
    height: auto;
  /*  width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
   object-fit: contain; */
}
.pro-list li a:hover .pro-img{border: 1px solid #2782ce;}
.pro-list li a:hover {   color: var(--bs-blue); }
.pro-list li a:hover img {    transform: scale(1.15); padding:0; }

/*.pro-list li a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 120%;
    height: 114%;
    border-radius: 0.8rem;
    box-shadow: 0 0 8px rgba(0, 0, 0, .08);
    background-color: #fff;
    opacity: 0;
     transition: 0.4s all ease;
}
.pro-list li a:hover::after {
    opacity: 1;
}*/


/*all產品*/
.all-pro{     display: flex;    flex-wrap: wrap;    gap: 1rem;    margin: 60px 0;     width: 100%;}
.all-pro .tab-content{ display:flex; width:100%}
.tabInfo {display: flex;    gap: 1.5rem;    width: 100%; position: relative;    flex-direction: column;     padding: 1rem 0;   }

/*.tabInfo .pro-list{grid-template-columns: repeat(8, 1fr);     margin-top: 1.08rem; gap:1.5rem 2.5rem}*/
.btn-more-pro{    border-radius: 50px; padding:8px 20px; margin:20px auto; width:180px}
/*all產品-頁籤設定*/
.tabNav{ width:100%;  padding-left: 15px;}
.tabNav .nav-link{ font-size:1.1rem;     padding: 0.5rem 3rem;     border-bottom: 1px solid #dee2e6; background-color: #efefef;}
.tabNav .nav-link:hover, .tabNav .nav-link.active, .tabNav .show>.nav-link{ background: linear-gradient(to bottom,  #edf7ff 0%,#ffffff 53%); }
.tabNav .nav-link.active, .tabNav .show>.nav-link {   /* background-color: #2464ab;*/}
.tabNav-sub .nav-item, .nav-lin{position: relative}
.tabNav-sub .nav-link.active:after, .tabNav-sub .show>.nav-link:after {
  /*  background-color: #39F;    border-radius: 50px;
    content: '';    position: absolute;
	width:10px; height:10px; right:-5px; top:0; bottom:0; margin:auto*/
}
.tabNav-sub .nav-link {/* padding:0; font-size:1.1rem; color:#666 */}
.tabNav-sub .nav-link:hover {   color: var(--bs-blue);}
.page-mem-tab{ padding-bottom:1.8rem}


/*遊戲直接儲點*/
.topUP{ width:100%; margin-bottom:50px}
.topUP-list {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 1rem;
    margin: 1.5rem 0 3rem; 
	list-style: none; padding:0
}

.topUP-list-img {
    position: relative;
    width: 30%; box-shadow: 0 0 8px rgba(0, 0, 0, .3);
   overflow: hidden; border-radius: 0.8rem;
}
.topUP-list-img img{}
.topUP-list li a {
    position: relative;     display: flex;    gap:1rem;    color: #444;
    font-size: 0.95rem;    align-items: center; background-color: #ebebeb;
    overflow: hidden;    border-radius: 1rem;    padding: 6px 10px 6px 6px; border:1px solid #fff}
.topUP-list li a:hover{ /* transform: scale(1.02);*/	background-color:#E6F4F9;	border:1px solid #C7E2E9}
.topUP-list-txt{ text-align:left;     flex: 1; }
/*公告區*/
.notic-news{ margin-bottom:50px}
.notic-news ul.news-box{   flex-direction: row; flex-wrap: wrap; }
/*.notic-news .news-box li:not(:last-child):after{ width:0}*/
.notic-news .news-box li{ width: 25%; flex:none; padding:0.6rem 1rem 1.5rem}
.notic-news .news-box li a{    flex-direction: column;    display: flex;
    align-items: center;
    color: #363636;
    font-size: 0.9rem;
}
.notic-news .news-box-img{ width:100%; height:180px; margin-right:0; }


/*頁尾區*/
#footer {    background-color: #f7f7f7;  padding: 0 ;  font-size: 14px; }
#footer ul{list-style: none; margin:0; padding:0}
.foot-LR{ display: grid;   grid-template-columns: repeat(2, 1fr); gap:4rem;   align-items: start;}
.foot-payIcon {  text-align:center;     margin: 15px auto; }
.foot-payIcon h4{ color:#555; font-size:.9rem;     margin: 0 1rem 1rem;}
ul.payIcon-img{display: flex;    align-items: center; gap:1.2rem;    justify-content: center;}
.payIcon-img li{    position: relative;  overflow: hidden;    border-radius: 0.5rem; width: 40px;}
.footer-top {  display: flex;}

.footer-top .footer-info {  margin-bottom: 30px;}

.footer-top .footer-info h3 {
  font-size: 18px;  margin: 0 0 20px 0;  padding: 2px 0 2px 0;
  line-height: 1;  font-weight: 700;}

.footer-top h4 {  font-size: 0.9rem;  font-weight: bold;  color: #fff;
  text-transform: uppercase;  position: relative;  padding-bottom: 8px;}
.footer-links {   display: flex;    flex-direction: column;     width: 30%;     align-items: center;}

.footer-top .footer-links ul li {  padding: 5px 0;  display: flex;  align-items: center; justify-content: center;}
.footer-top .footer-links ul li a {  display: inline-block;  line-height: 1;     color: #dbdbdb}
.footer-top .footer-links ul li a:hover{ color:#FFC}

#footer .copyright {  text-align: center;  padding: 30px 0; border-top: 1px solid #dbdbdb; font-size: 0.8rem;
    color: #fff; background-color:#1b6cb1}
#footer .copyright .home_W_set{justify-content: center;flex-direction: column;}
#footer .copyright p{ margin-bottom:0.6rem }
#footer .copyright span{ margin:0 15px 15px; display:block}
#footer .copyright span i{ margin-right:5px}
.copright-logo{ width:70px}

.bi::before, [class^="bi-"]::before, [class*=" bi-"]::before{    vertical-align: middle;}
/*彈跳客服資訊*/
.modal-noTitle .modal-body, .modal-login .modal-header{ border:0px!important}
.modal-noTitle .modal-header, .modal-noTitle .modal-header{border-bottom:0px; padding:0.5rem 0.8rem 0.5rem}
.modal-noTitle .modal-header .btn-close{padding: .5rem .5rem;    border-radius: 50px;
    border: 1px solid #959595;
    position: absolute;
    right: -.3rem;
    top: .2rem;
    display: block;
    background-color: #fff;
    opacity: .9;
}
.modal-noTitle .modal-header .btn-close:hover{ background-color:rgb(233 247 255)}
.serviceInfo{font-size:0.9rem;color:#555  }
.serviceInfo b{ padding:10px; border:1px solid #CCC; background-color:rgb(233 247 255); display:block; border-radius:50px;  text-align:center;}
.serviceInfo ul{ list-style:none; margin:0 0 15px; padding:0;}
.serviceInfo ul li{margin:5px 10%; padding:10px; border-bottom:1px solid #CCC;     display: flex;
    align-items: center;     font-size: 1rem;    letter-spacing: 0.05rem;}
.serviceInfo ul li i{ margin-right:8px; font-size:1.8rem; color:#ed4f29}
.serviceInfo ul li:nth-child(2) i{ color:#39b70f}
.serviceInfo ul li:nth-child(3) i{ color:#2782ce}

/*彈跳會員登入*/

.login-form-box{ padding:0 40px 25px}
.login-form-box .nav-tabs{ margin-bottom:2.2rem;     padding-top: 5px;}
.login-form-box .bg-light{
background: linear-gradient(to bottom,  rgb(255,255,255) 0%,rgb(233 247 255) 100%)!important; }
.login-form-box .btn-outline-secondary{    border-color:#ced4da ;    background-color:#e9ecef ;} 
.login-form-box .btn-outline-secondary:hover, .login-form-box .btn-outline-secondary:active{ color:#F33}
.modal-login .form-control, .modal-login .btn, .modal-login .input-group-text, .modal-login{ font-size:0.9rem}
.modal-login .form-check-label{ font-size:0.75rem; margin-bottom:15px}
.modal-login a{ color:#F33; margin-left:4px}
.modal-login .modal-body{ padding-top:0}
.login-btn-group .btn-more-pro{width: 150px;     padding: 8px 10px;     display: inline-block; margin:0 10px}
.login-form-box .nav-link{color: #2782ce;}
.login-form-box .form-signin{ width:90%;     margin: auto;}
/*信息提示框*/
.pop-alert-bg{    position: fixed;    top: 0;    left: 0;    z-index: 1060;   width: 100%;    height: 100%;      outline: 0;overflow-x: hidden;    overflow-y: auto; background-color:rgba(0,0,0, 0.3)}
.pop-alert-info{ display:flex; align-items: center; height:100%;     text-align: center;}
.pop-alert-bg .alert{width: 40%;    margin: auto;  }
.pop-alert-info h6{ width:100%; text-align:center; color:#F63}
.pop-alert-info .alert-warning{    color: #444;    background-color: #fff9e5;    border-color: #fffcf6;}
.pop-alert-info .alert-dismissible{ padding-right:1rem}
.alert-dismissible .btn-close{padding:1rem}

/*內頁所有頁籤*/
.page-TabSet{width:100% }
.page-TabSet .nav{ background-color: #f3f3f3;  border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; padding:8px 10px 0; position:relative}
.page-TabSet .tab-content{ border: 1px solid #dee2e6;    border-top: 0px;    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;   padding: 1rem;}
.page-TabSet .nav-link:hover{ color:#F63}

/*內頁-訊息區*/
.newsAll-page{ }
.newsAll-page .notic-news .news-box-title, .newsAll-page .notic-news .news-box li a{align-items: flex-start;}
.news-box-time{	    color: #fa5414;    margin: 10px 0 -10px;    font-size: 0.7rem; }
.navTab-search .btn-primary {    background-color: #2782ce;    border-color: #2782ce;}
.navTab-search{ position:absolute; right:35px}

/*內頁-遊戲直儲*/
.topUp-pro-page .pro-list{ padding:0 50px}
.topUp-pro-page{ width:100%}
.pro-buyInfo{ position:relative; display:grid;  padding:1.5rem 1.8rem;   grid-template-columns: 12% 1fr;    gap: 1rem;     border-radius: 1rem; box-shadow: 0px 3px 12px rgba(0,0,0,.2); 
background: linear-gradient(135deg,  #e7e2db 10%,#f5f3f0 10%,#ffffff 11%,#ffffff 88%,#efece7 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */    border: 2px solid #fff;}
.pro-buyInfo .pro-img{/*width:130px; height:130px*/}
.pro-buy-txtItem{    display: flex; padding: 0.3rem 0;   flex-direction: column;    justify-content: space-between;
        font-size:0.85rem}
.pro-buy-title{ font-size:1.2rem;     border-bottom: 1px solid #d9d9d9;    padding-bottom: 0.3rem;}
.pro-buy-txt p{ margin-bottom:0;line-height:1.4rem}
.pro-buy-txt-note{ color:#fa5414}
.pro-img img{max-width: 100%;    height: auto;}
.pro-buying{ width:100%}
.pro-buying ul{  gap: 1.5rem; list-style:none; margin:0 0 2.5rem 0; padding:0; display: flex;}
.pro-buying ul li{ position:relative; display:flex; width:50%; font-size:1rem; padding: 1rem; border-radius: 0.7rem; flex-direction: column;   border: 1px solid #e0e5e9;    background-color: #f5f5f5;    box-shadow: inset 0px 0px 5px 5px rgb(220 234 239 / 70%);}
.pro-buying-note{ }
.pro-buying-quantity span{ color:#fa5414}
.pro-buying-note, .pro-buying-quantity{ color:#858585; font-size:0.85rem}
.pro-buying-btn{ position: absolute;    height: 70%;font-size: 1rem;    padding: 15px;    background-color: #e3e3e3;    border-radius: 10px;    right: 1rem;    display: flex;    top: 0;bottom: 0;    margin: auto;    align-items: center;    justify-content: center;    color: #a5a5a5;}
.pro-buying-btn:hover{ color:#939393}
.pro-buying-btnAdd{ background-color:#F63; color:#fff; cursor: pointer }
.pro-buying-btnAdd:hover{ color:#fff; background-color:#2782ce}
/*內頁-產遊戲儲值共用版*/
/*.pro-chooseWay{position: relative;    display: grid;gap: .3rem;    grid-template-columns: 2.5fr 1fr;  align-items: flex-start;    }*/

.pro-chooseWay{position: relative;    display: flex; gap: 1.8rem;    }
.pro-chooseWay-tab{flex:1.5; order:1;}
.pro-chooseWay-L{  font-size:0.85rem; padding: 1.2rem;    border-radius: 0.2rem;     background-color: #fbf3e1;}
.pro-chooseWay-R{ flex:3.5; order:2; position:relative;   }
ul.pro-chooseWay-car{ list-style-type:none; margin:0 0 1.8rem ; display: flex; gap: 1rem;    flex-wrap: wrap; justify-content: center;  border-bottom: 1px solid #d7d7d7;    padding: 1rem;     align-items: center; background-color: #fbf3e1; }
.pro-chooseWay-car li{ display:flex; justify-content: center;    font-size: 1rem; width:46%; align-items: center;}
.pro-chooseWay-car li:first-child{ width:100%}
.pro-chooseWay-car li:first-child span{ font-size:1.5rem}
.pro-chooseWay-car a{  width:100%}
.pro-chooseWay-car b{ margin-left:0.3rem}
.pro-chooseWay-car .btn-secondary{background-color: #9fa3a7;    border-color: #ced4da; }
.pro-chooseWay-keyin{ margin-bottom:1.5rem}
.pro-chooseWay-keyin p{ margin-bottom:0.3rem}
.pro-chooseWay-R ul{display: grid;gap: 1rem;    grid-template-columns:1fr 1fr;  list-style:none; margin:0; padding:0}
.pro-chooseWay-R li{ border:1px solid #d7d7d7; padding:1rem 0.7rem; border-radius: 0.4rem; display:flex;    flex-wrap: wrap;
    align-items: center; cursor:pointer; background: linear-gradient(to bottom,  #ffffff 19%,#f5f3f0 99%); height:100% 
}
.pro-chooseWay-R li .title{ flex:2}
.pro-chooseWay-R li .price{ flex:1; text-align: right;    transition: all .4s ease;     color: #fa5414;}
.pro-chooseWay-R li.active{border-color:#fd8914}
.pro-chooseWay-R li .price span{ margin-right:0.3rem; color:#444}
.pro-chooseWay-R li .price p{ margin-bottom:0}

.pro-buy-rule{ width:100%}
.pro-buy-rule .page_title h2{border-bottom: 2px solid #ff833e;}
.pro-buy-rule .page_title{ margin-bottom:1.2rem}
.pro-buy-rule img{    max-width: 100%;    height: auto;    margin: 0; padding-bottom:15px}
.pro-buy-rule a, .page-newsInfo a{ color:#002cd7 }
.pro-buy-rule a:hover, .page-newsInfo a:hover{ color:#dc3545}
.pro-buy-rule p, .page-newsInfo p{ margin-bottom:0.5rem}
.pro-chooseWay-keyin .input-group-text{ width:95px; font-size:0.93rem; background: linear-gradient(to right,  #ffffff 59%,#f5f3f0 99%); }
.pro-chooseWay-keyin .btn{width:95px; font-size:0.93rem;}
.pro-chooseWay-keyin .btn-secondary {    background-color: #cb8f73;    border-color: #b78c6c;}
.pro-chooseWay-keyin .btn-secondary:hover{ background-color:#FC9F05}
/*頁面-點數卡*/
.page-pointCard .pro-chooseWay{flex-direction: column;}
.page-pointCard .pro-chooseWay-car li:first-child, .page-pointCard .pro-chooseWay-car li{ width:30%; gap: 5px;}
.page-pointCard ul.pro-chooseWay-car{ border-bottom: 0;    padding: 0 8rem 0;     margin-bottom: 0;}

/*頁面-公告詳細內容*/
.page-newsInfo-top{ width:100%; display:flex; align-items: center; margin-bottom: 1.5rem;    justify-content: center;
    border-bottom: 1px solid #cdcdcd;    padding-bottom: 1rem;     flex-wrap: wrap;}
.newsInfo-time{ font-size:0.9rem; color: #fa5414; margin-right: 0.5rem;}
.newsInfo-title{font-size:1.4rem; font-weight: bold }
.page-newsInfo img{ max-width:100%; height:auto; padding:20px}
.page-newsInfo-foot{ width:100%; border-top: 1px solid #cdcdcd; padding-top:2.5rem ; margin:2.5rem 0; }
.page-newsInfo-foot ul.news-box{     flex-direction: row;     gap: 1.5rem;}
.page-newsInfo-foot .news-box li{}
.page-newsInfo-foot .news-box li a{border: 1px solid #dbdbdb;    padding: 0.8rem;     border-radius: 0.3rem;}
.page-newsInfo-foot h5{ font-size:0.9rem; text-align:center}
.page-newsInfo-foot .news-box-img{ width:100px; height:60px }
.page-newsInfo-foot .news-box-title{ margin:0}

/*頁面-會員中心*/
.page-mem{    position: relative;    display: flex;     gap: 2rem;    width: 100%;}
.mem-nav{    border-radius: .5rem;	  border: 1px solid #dbdbdb;    width: 100%;    display: flex;    padding: 0.5rem; }
.page-mem-R{ position: relative;    width: 82%;    display: flex; flex-direction: column;    flex-wrap: wrap;}
.mem-nav ul.nav{ width:100%;    /* gap: 0.3rem;*/}
.mem-nav .nav li i{ margin-right:0.6rem; font-size:1.4rem;     color: #eda54b;     padding-bottom: 0.3rem;}
.mem-nav .nav-link{    color: #444; align-items: center;    justify-content:space-around;  display:flex;  width: 100%; padding: .3rem .5rem;     border-bottom: 1px solid #dbdbdb;}
.mem-nav .nav-link:hover{ color:#F33}
.mem-nav .nav-link.active{background-color: #efefef;}
.mem-nav .nav-link span{ width:80px; text-align:center}
.mem-nav .nav-item:last-child .nav-link{ border-bottom:0}
/*會員中心-會員選單*/
.mem-nav-m-box{ position:relative; /*display:none*/;    display: flex;    width: 17%;    flex-wrap: wrap;    flex-direction: column; }
.mem-nav-m-box .btn{ width:100%;  border-radius: 50px;       display: block;    font-size: 1.2rem;    font-weight: bold; position:relative;     border-radius: 0.5rem;    margin-bottom: 0.3rem;}
.mem-nav-m-box  .btn-primary{ background-color:#717e91; color:#fff;     border-radius: 0.5rem;
}

.mem-nav-m{     width: 100%;    margin: 0.5rem auto;    position: absolute;    left: 0;    right: 0; background-color:#fff; z-index:100}
.mem-nav-m .nav-link{    justify-content: center;}
.mem-nav-m-box .btn i{ position:absolute;  right:15px;}

.mem-home-top{ position:relative;  display: grid;  gap: 1.5rem;    grid-template-columns: 1fr 1fr;    width: 100%;   align-items: stretch; margin-bottom:2rem}
.mem-home-top-L, .mem-home-top-R{border-radius:0.5rem; padding:0.8rem 1.2rem; display:flex; position:relative;     background-color: #fff9e4;    box-shadow: inset 0 0 15px rgb(255 187 102 / 30%);    box-sizing: border-box; flex-direction: column;
    align-items: center; font-size:1.2rem}
.mem-home-top-L div, .mem-home-top-R div{  width:100%; height: 60px;    display: flex;
    justify-content: center;    align-items: center;     flex-wrap: wrap;}
.mem-home-top-L div:nth-of-type(2), .mem-home-top-R div:nth-of-type(2){ font-size:0.85rem; border-top:1px solid #dbdbdb;     padding-top: 0.7rem;}
.mem-home-top-R .btn-blue{ width:50%; margin:auto; border-radius: 50px;}
.mem-home-top-L .img-fluid{ width:32px; margin-right:0.5rem}
.mem-home-info{ width:100%; display:flex; }

.search-date-bar{ display:flex;  gap:0.5rem;     align-items: center;     /* padding: 0 0 1rem;   border-bottom: 1px solid #dbdbdb;   */ margin: 0 0 0.5rem;     justify-content: center;}
.search-date-bar .input-group{ width:auto}
.search-date-bar .form-control{ font-size:0.85rem}
.page-mem-tab{ width:100%;/* padding-top:2.5rem*/}
.page-mem-tab .tabNav .nav-link{ font-size:1rem}
.page-mem-tab .nav{   /* justify-content: center;*/ margin-bottom:2rem}
.page-mem .table{ text-align:center}
.page-mem .table>:not(:last-child)>:last-child>*{border-bottom-color: #888;}
/*.page-mem .spinner-grow, .mem-edit-modal .spinner-grow{ text-align:center}*/
.page-mem .spinner-grow i, .mem-edit-modal .spinner-grow i{ font-size:1.3rem; color:#fff}
/*.page-mem .alert-set, */.mem-edit-modal .alert{    width: 30%;    text-align: center;    margin: 5rem auto;}
.mem-news-modal .title{ padding-bottom:0.7rem; margin-bottom:0.7rem; color:#fa5414; border-bottom: 1px solid #dbdbdb; font-weight:600 }
.productOrderInfo .modal-body .table, .mem-deal-info .table, .show_getProductOrder{    vertical-align: middle;}
.dealDate-img{ width:80px}

.w-50px{ width:50px}
.w-60px{ width:60px}
.w-70px{ width:70px}
.w-80px{ width:80px}


.mem-qa-info .accordion-item{     border-radius: 0.25rem;    margin-bottom: 1.5rem;    border: 1px solid #dbdbdb;     box-shadow: 0 0 8px rgba(0,0,0,.1);}
.mem-qa-info .accordion-body{1.7rem 1.25rem}
.mem-qa-info .accordion-item:first-of-type, 
.mem-qa-info.accordion-item:last-of-type, 
.mem-qa-info .accordion-button.collapsed, 
.mem-qa-info .accordion-button:focus, 
.mem-qa-info .accordion-item:last-of-type .accordion-button.collapsed{ border-radius: .25rem;}

.mem-topup-info .row{    justify-content: flex-end;}
.mem-topup-info .input-group{ margin-bottom:1rem}

/*頁面-會員中心-帳號管理*/
.mem-myDate-info .pro-buying ul{flex-direction: column;     margin-bottom: 1.5rem;}
.mem-myDate-info .pro-buying ul li{ width:100%;     flex-direction: row; align-items: center; font-size:1.1rem; gap: 1.5rem; justify-content: space-between; }
.mem-myDate-info{}

.mem-myDate-info .pro-buying-title{ width:20%;     border-right: 1px solid #c9c9c9;     color: #2782ce; font-weight:600; display: flex;    align-items: center;    flex-wrap: wrap;    flex: 1;}
.mem-myDate-info .pro-buying-title i{ margin-left: 0.5rem; font-weight: 600;    color: #1769ad;}
.mem-myDate-info .pro-buying-note { width: 46%; font-size:0.95rem; color: #444; }
.mem-myDate-info .pro-buying-btn{ position:relative; right:0 ;   margin: initial;   padding: 8px 15px; width: 100px;}
.myDate-icon{background: linear-gradient(to bottom, #f8faff 0%, #bad5ed 75%); font-size:1.4rem;   color: #065b8f;
    width: 45px; height:45px;     border-radius: 50px;    border: 1px solid #f5f5f5;    display: flex;    justify-content: center;    align-items: center;    box-shadow: 0 3px 8px #a3b1b9; margin-right: 1.5rem;
    margin-left: 0;}
.myDate-btn{width: 20%;    display: flex;    justify-content: flex-end;}
.upload-ex{ padding-top:1.3rem}
.mem-myDate-info .text-success{ color:#00a759 !important;}
.mem-myDate-info p{ margin-bottom:0}
.mem-edit-modal{ padding:0 1rem 0.5rem}
.mem-edit-modal h5{ font-size:1.2rem; text-align:center; padding-bottom:0.5rem; margin-bottom:1.2rem; border-bottom:1px solid #c9c9c9; font-weight:600}
.mem-edit-modal .btn-more-pro{ width:150px; margin:2rem auto 1rem; }
.mem-edit-modal .btn-outline-secondary {    border-color: #ced4da;    background-color: #e9ecef;}
.mem-edit-modal .btn-outline-secondary:hover{ color:#F66}
.mem-edit-modal .alert{ width:80%}
.mem-edit-modal .input-group b span{ margin-left:0.5rem; color:#00a759}
/*認證表單*/
.certify-form{ position:relative}
.certify-form h5{    background: linear-gradient(to top, #c8d7e3 8%, #edf7ff 10%, #ffffff 85%);
    padding-bottom: 0.5rem;    color: #1f7dcc; margin-top:1.5rem}

.certify-form h5 span{ font-size:0.9rem; color:#F63;     margin-left: 0.5rem; }
.certify-form h5 i{    margin: 0 0.5rem 0 0; vertical-align: text-bottom;}

.certify-form-disable{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; background-color:rgba(0,0,0,0.2); z-index:1000;     border-radius: .25rem;}
.certify-form-disable .alert{ font-size:1.5rem}
.upload-myImg{   border: 1px solid #b7b7b7;    border-radius: 0.5rem; padding:1rem; text-align:center}
.upload-myImg p{ font-size:0.85rem}
.upload-show a{display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;}
.upload-show{ width:220px; height:130px;     display: flex;    flex-direction: column;    justify-content: center; position:relative;     margin: 0 auto 0.5rem; }
.upload-show img{    object-fit: contain;    background: #f5f5f5; height:100%}
.upload-show .btn-more-pro{ width:100%; height:40px}
.upload-ex a{ width: 100px;    display: block;       margin:0 auto;}
.upload-ex img{ margin-bottom:0.5rem}
.upload-show .btn-light{    background-color: #dfdfdf;    border-color: #b9b9b9;}
.upload-txt{ border-bottom:1px solid #b7b7b7; padding-bottom:1rem}
/*我的虛寶*/
.mem-gift-info ul, .mem-coupon-info ul{list-style: none;    margin: 0; padding:0; display: grid;    gap: 1.5rem;}
.mem-gift-info li, .mem-coupon-info li{background:linear-gradient(to bottom, #fdfdfd 40%, #dfdfdf 100%); 	    gap: 1rem;    grid-template-columns: 8% auto 25% 18% 9%;    display: grid;    width: 100%;    align-items: center;    border: 1px solid #fff;    border-radius: 0.5rem;    padding: 1rem;    text-align: center;    box-shadow: 0 2px 8px rgb(123 138 157 / 50%);    min-height: 100px;}
.mem-gift-info span, .mem-coupon-info span{ color:#F63; font-weight:600}
.mem-gift-info img{    border-radius: 1rem;}
.mem-gift-info li div:nth-of-type(2){ text-align:left; color:#36C; font-weight:600}
.mem-gift-info li div:nth-of-type(3){text-align:left}
.mem-gift-info .pro-buying-btn{ position:relative; right:0}

/*優惠券*/
.mem-coupon-info li{grid-template-columns: 16% 18% auto 25%; padding:0; letter-spacing:0.05rem}
.mem-coupon-info li div:nth-of-type(1){ height:100px;  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgb(255 225 181 / 40%) 85%, rgb(209 209 209 / 50%) 87%, rgba(255, 255, 255, 0.03) 92%);  display: flex;    justify-content: center;    align-items: center;     padding-right: 1.5rem;}
.mem-coupon-info a{ color:#F63; text-decoration:underline }
.mem-coupon-info a:hover{ color:#2782ce; }

/*購物車*/
.page-cart{ position: relative;    display: grid;    grid-template-columns: 70% 27%;
    align-items: start;       gap: 1rem;    width: 100%;     justify-content: space-between;}
.page-cart-L, .page-cart-R	{         display: flex;    flex-wrap: wrap;    align-items: center;}
.page-cart-L{order:1; border:0px}
.page-cart-R{order:2;padding: 1rem 1.5rem; background: linear-gradient(to bottom, #f5f3f0 2%, #ffffff 89%);  border: 1px solid #d7d7d7; border-radius: 0.4rem;   }
ul.cart-list{ list-style:none;    padding: 0 ; margin:0; position: relative;        }
.cart-list li{display:flex; gap: 1rem;      flex-wrap: wrap;    border: 1px solid #d7d7d7; padding: 1rem;    border-radius: 0.4rem; margin-bottom:1.5rem ;    box-shadow: 0 0 8px #e1e1e1;}
.cart-list a{ font-size:1.4rem}
.cart-list li img{border-radius: 0.5rem;}
.cart-coupon{  width:100%}
.cart-total{       display: grid;    grid-template-columns: 1fr 1fr;    gap: 1.5rem;    width: 100%;    justify-content: space-between;align-items: center;    justify-content: space-around;     margin: 0.5rem 0;}

.total-price-txt{    font-size: 1.2rem;    font-weight: 600;}
.total-price, .cart-onePrice{  color:#e50000; font-size:1.2rem; letter-spacing:0.05rem; font-weight: 600;}
.total-price{text-align:right;}
.cart-buyInfo-item{grid-template-columns:0.1fr 0.35fr 1.1fr .5fr 0.6fr 0.15fr ; gap: 1rem;     display: grid;     align-items: center; }
.cart-buyInfo-item .pro-buying-title{ font-weight: 600;   }

.cart-buyInfo-item a{  text-align:center}

.cart-buyInfo-txt{grid-template-columns: 1fr 1fr 1fr; display:grid;  gap: 0.5rem 1.5rem;  
border-top:1px #ffb414 dashed; padding-top:1.3rem; margin-top:1rem; width:100% }
.cart-buyInfo-txt span{ color:#1f7dcc; font-weight: 600;}
.cart-buyInfo-txt div{    border-bottom: 1px solid #dfdfdf;      padding-bottom: 0.3rem;}
.cart-null{ width:65%; margin:1rem auto;  display: flex;    flex-wrap: wrap;    justify-content: center;}
.cart-null h5{ margin-top:1.5rem;     text-align: center;    line-height: 1.5;     color: #f63;    font-weight: 600;}


.page-cart-R .form-check{text-align: right;    width: 100%;}
.page-cart-R .form-check .form-check-input{ float:none}
.page-cart-R .form-check .form-check-label{ font-size:0.8rem}
.page-cart-R .form-check .form-check-label a{	text-decoration: underline;}

.page-tile{padding-bottom: 0.2rem;    border-bottom: 2px solid #2782ce;
    width: 100%;    margin-bottom: 1.5rem;    padding-left: 0.2rem;    font-size: 1.3rem;    color: #2782ce;}

.error-bg{    background: url(/image/404bg.png) center center / cover no-repeat fixed #fff; display:flex; width:100%; height:100%; justify-content: center;
    align-items: center; }
.error-404{ width:500px}
.error-404 img{ margin-bottom:2rem}
.error-close{ width: 70%;    display: flex;    flex-direction: column;    align-items: center;   }
.error-img{ width:250px; padding:3.3rem;    /* background: linear-gradient(to bottom, #f8faff 0%, #bad5ed 75%);*/
    height: 250px;    border-radius: 300px;    border: 1px solid #fff;    display: flex;
    justify-content: center;    align-items: center;    box-shadow: 0 3px 8px #a3b1b9;}
.error-close h5{ font-size:2.5rem; background-color: #666666; margin:2rem 0 1rem;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;}
.orderCart-bg{background: url(/image/bg-transition.jpg) center center / cover no-repeat fixed #fff; display:flex; width:100%; height:100%; justify-content: center;    align-items: center;}
.orderCart-pop{width:360px; text-align:center}
.orderCart-pop h5{ padding:2rem 0; line-height:1.4}
.orderCart-pop img{  width:220px}
.orderCart-pop .alert-set .btn-more-pro{ font-size:1.3rem; width:240px}

@media (min-width: 1440px) {
.home_W_set{ width:1300px}
.pro-list li a{ font-size:1.1rem}
.news-box li a, .notic-news .news-box li a{ font-size:1rem}
}
@media (min-width: 1600px) {
.home_W_set{ width:1420px}	
	}

@media (max-width: 1200px) {
#footer .home_W_set{ width: 96%;}
.home_W_set{width:96%;     }
.main_box{  padding-bottom: 20px; min-height: calc(100vh - 266px);}
.page-mem{    gap: 1.3rem;}

	}
@media (max-width: 1000px) {
#header{    padding: 0 2%;}	
.main_box{ padding-top:150px}
.pro-buyInfo .pro-img{ width:100%; height:100%}
.pro-buyInfo{    grid-template-columns: 6rem 1fr;}
.pro-buy-txt p{ line-height:1.2rem ; font-size:0.8rem}
.pro-chooseWay{    flex-direction: column;}
.page-cart{grid-template-columns: 1fr;}
.footer-links h4{ display:none}
.page-mem-R{ width:100%;     flex-wrap: nowrap;}
.mem-nav-m-box{ width:100%}
.mem-nav .nav-link{justify-content: center;}
.page-mem{flex-direction: column;}
.alert-set, .mem-edit-modal .alert{ width:80%}
.top-btn-ID-icon{ display:block}
.top-btn-ID{ display:none}
.navbar>ul>li>a:before{    height: 5px;    bottom: -11px;}
.header_info .navbar li:nth-child(3) span{ display:none}
.focus-inform{ margin-bottom:20px ;grid-template-columns: 1fr;}
.focus-inform ul.news-box{gap: 0.5rem;    margin-top: 1rem;flex-wrap: wrap;    flex-direction: row;}
.focus-inform .news-box li{    width: 49%; flex:none}
/*購物車結帳功能置底*/
.cart-total{    position: fixed;    bottom: 0;    z-index: 500;    width: 100%; margin:0;
    background-color: #fff;    left: 0;    height: 95px;    padding: 0 10% 3rem;    box-shadow: 0 0 8px #a9a9a9;}
.page-cart-R .pro-buying-btnAdd{    position: fixed;    bottom: 8px;    z-index: 500;    left: 0;     right: 0;    margin: auto;}

.mem-nav{ padding:0;     position: absolute;    z-index: 5;    background-color: #fff;}
.mem-nav a .active:first-child, .mem-nav a .active:last-child{    border-top-left-radius: .5rem;    border-top-right-radius: .5rem;}
	
	
	}
	
@media (max-width: 991px){
.navbar ul {    display: block!important;}
.navbar>ul>li{    padding: 10px 8px;    display: inline-block;    font-size: 0.95rem;}
/*top選單*/
#header{    height: 90px;    top: 43px;     background: #1b6cb1;    }
#header.header-scrolled{ height:60px}
.head_lan{background-color: #e9f7ff;}
.head_lan_group{ height:60px}
.header_info{    flex-wrap: wrap;}
#header .logo{ width: 25%;    /* order: 1; */    position: absolute;    top: -62px;    left: -8px;}
.header_info .navbar{    position: absolute;    top: -70px;    right: -12px; /*order: 2;*/}
.top-btn-cart{ display:none}
.top-user-ID{ display:block}
.top-user-menu{ right:-4.2%}
.top-btn-register, .top-btn-login{height: 35px;    width: 50px; }
.top-btn-ID-icon{border-radius: 50px;    height: 35px;    width: 35px;    margin-left: 0;
    text-align: center;    padding: 0;    font-size: 1rem; padding: 8px 0 0 0}
.top-btn-ID-icon i { font-size:1.18rem}
.searchBar{ width:100%;     order: 3;}
.searchbar-form{ height: 35px;     width: 90%;}
ul.pro-chooseWay-car{    justify-content: center;  position: fixed;    z-index: 100;    bottom: 0;    width: 100%;    margin-bottom: 0;   padding:0.5rem; left:0; gap:0.5rem; box-shadow: 0 0 5px rgba(0, 0, 0, .5);}
.pro-chooseWay-car li:first-child span{ font-size:1.15rem}
.pro-chooseWay-car li:first-child{ line-height:1}
.pro-chooseWay-L{    padding: 1.2rem 0.8rem}
.page-pointCard ul.pro-chooseWay-car{padding: 0.5rem;}
.page-pointCard .pro-chooseWay-car li{ width:45%; }
.page-pointCard .pro-chooseWay-car li:first-child{ width:100%}
#footer .copyright{padding: 0.8rem 0 6rem;}


/*top選單 end */
}	
	
@media (max-width: 768px) {	
.modal-header{    padding: 1rem 1rem 0.3rem;}


.page_title{ margin-bottom:0}
.pro-list li a{font-size: 0.9rem;     line-height: 1.3;}
.all-pro { margin:20px 0}
.notic-news{    margin-bottom: 20px;}
.news-box-img{ width: 95px; height:60px}

.notic-news .news-box li{    width: 50%;    padding: 0.6rem 0.3rem 0rem;}
.notic-news .news-box-img{ height:100px}
.page_title i{width: 30px; height:30px}
.page_title h2{    font-size: 1.2rem;}
.tabInfo{ gap:0;     padding: 0.7rem 0}
.tabNav .nav-link{    padding: 0.5rem 1rem;}
.pro-list{    grid-template-columns: repeat(4, 1fr);    gap:1.2rem 0.5rem;}
.topUp-pro-page .pro-list{ padding:0 10px}
.login-form-box .form-signin{ width:98%}
.login-form-box .nav-link{    padding: .5rem .5rem;}
.login-form-box{   padding: 0 0 25px;}
.pro-buying ul{    flex-direction: column;}
.pro-buying ul li{ width:100%}
.pro-buyInfo{    padding: 1rem;}
.pro-buying-btn	{width: 120px;    height: 30px;    position: relative;     right: 0;     margin-top: 0.5rem;}
.pro-chooseWay-R ul{    grid-template-columns: 1fr;}
.page-TabSet .tab-content{    padding: 0.8rem;}
.cart-buyInfo-txt div{ font-size:0.85rem}
.cart-buyInfo-txt{ margin-top:0}
.cart-buyInfo-txt span{ display:inline-block; width:100%}
.cart-buyInfo-txt{gap: 0.5rem 0.8rem;}
.cart-buyInfo-item{    display: flex;    flex-wrap: wrap; gap: 0.7rem;}
.cart-buyInfo-item .pro-img{ width:75px}
.cart-onePrice{    width: 30%;    text-align: right;}
.cart-buyInfo-item .input-group{ width:47%}
.cart-buyInfo-item .pro-buying-title{ width:54%}
.foot-LR{grid-template-columns: 1fr;     gap: 1.5rem;}

#footer .copyright span{ margin-bottom:5px}
/*會員中心-會員選單-手機板*/
.mem-home-top-L, .mem-home-top-R{    font-size: 1rem;     padding: 0.8rem 0.6rem;}
.mem-home-top-L div:nth-of-type(2), .mem-home-top-R div:nth-of-type(2){ line-height:1.1}
.mem-home-top-L .img-fluid{ width:25px}
.mem-home-top-R .btn-blue{ width:90%}
.mem-home-top{gap: 0.7rem;}

.page-mem-R{ width:100%; padding-bottom:1.5rem}
.mem-tabInfo{ font-size:0.85rem; }
.page-mem{    flex-direction: column;}
.mem-nav-m-box{display:block}
.mem-nav-m .nav-link:hover{ background-color: #e9f7ff}
.page-mem-tab .nav{    margin-bottom: 1.5rem;}
.page-mem-tab .tabNav .nav-link{font-size: 0.9rem;     padding: 0.5rem 0.8rem;}

.page-mem-tab{}
.myDate-icon{ display:none}
.mem-myDate-info .pro-buying ul li{    gap: 1rem;}
.mem-coupon-info li{    letter-spacing: 0;}
.mem-gift-info li, .mem-coupon-info li{ display:flex; flex-wrap: wrap; gap:0; align-content: center;}
.mem-gift-info li div, .mem-coupon-info li div{ width:100%; padding-left:110px; text-align:left}
.mem-gift-info li div:nth-child(1), .mem-coupon-info li div:nth-child(1){     width: 100px;    position: absolute;     padding-left: 0;}
.mem-gift-info li div:nth-child(3), .mem-coupon-info li div:nth-child(3), .mem-gift-info li div:nth-child(4), .mem-coupon-info li div:nth-child(4){ font-size:0.85rem}
.mem-gift-info .pro-buying-btn{ margin:0}
.modal-noTitle .modal-header .btn-close{right: 0;}
ul.payIcon-img{gap: 0.5rem;}

.error-img{ width:200px; height:200px; padding: 2.5rem;}
.error-close h5{ font-size:2rem}
.table-responsive .table{ width:800px}
.cart-null{ width:90%}

	}
@media (max-width: 568px) {	
.pro-buying ul li{flex-direction: column; flex-wrap: wrap;}
.mem-myDate-info .pro-buying-title, .mem-myDate-info .pro-buying-note{ width:100%}
.mem-myDate-info .pro-buying-title{    border-right: 0;     border-bottom: 1px solid #c9c9c9;     padding-bottom: 0.3rem;}
.myDate-btn{ width:60%; position: absolute;    width: 120px;    top: 0.5rem;    right: 1rem;}
.mem-myDate-info .pro-buying-btn{     width: 120px;  }
.serviceInfo ul li{    justify-content: center;}
.navbar>ul>li{padding: 10px 4px; font-size:0.9rem}
#header .logo{ width:33%}
.focus-inform ul.news-box{flex-direction: column;}
.focus-inform .news-box li{ width:100%}
ul.pro-chooseWay-car{    gap: 0.3rem;}
.page-pointCard .pro-chooseWay-car li{ width:30%}
.page-pointCard .pro-chooseWay-car li:last-child{ width:66%;    }
.pro-chooseWay-car .btn{    padding: .375rem .5rem;}
.pro-chooseWay-car .form-control{    padding: .375rem 0;}
.table-responsive .table{ width:600px}
.dealDate-img{ width:65px}
.orderCart-pop{ width:90%}
.orderCart-pop h5{ font-size:1rem}
.orderCart-pop .alert-set .btn-more-pro {    font-size: 1.1rem;    width: 210px;}
}