/*全局*/
body,html { height: 100%}
html {overflow-x: hidden;overflow-y: auto;}
body {min-height: 100vh;transition: color .5s, background-color .5s;line-height: 1.25;font-family:pingfang;font-size: 14px;margin: 0; padding: 0;user-select: inherit;}
html { -webkit-tap-highlight-color: transparent;-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;  line-height: 1.6; font-size: 14px;-webkit-tap-highlight-color: transparent}
a {-webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; -ms-transition: all 0.2s linear; -o-transition: all 0.2s linear;transition: all 0.2s linear;text-decoration: none;outline: none}
:hover,.module-tab-item:hover {-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-ms-transition: all 0.2s linear;-o-transition: all 0.2s linear;transition: all 0.2s linear;}
* {margin: 0;padding: 0;border: 0;outline: 0;list-style: none;box-sizing: border-box;}
*,:after,:before { box-sizing: border-box}
input,button,textarea,select { outline: none;resize: none;border: none;-webkit-appearance: none;appearance: none;background: 0 0;color: inherit;font: inherit}
input,textarea,select,button {-webkit-touch-callout: none;-webkit-font-smoothing: antialiased;font-family: pingfang sc, verdana}
img {border: none}
em {font-style: normal}
button {cursor: pointer;background: 0 0}
button,video {border: none;outline: none}
ol,ul,li,dl,dd,dt {list-style: none}
h1,h2,h3,h4 {font-weight: 400}
table {empty-cells: show;border-collapse: collapse}
caption,th {text-align: left;font-weight: 400}
select::-ms-expand,input[type=radio]::-ms-check,input[type=checkbox]::-ms-check,input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear {display: none}
input[type=radio],input[type=checkbox] {clip: rect(0, 0, 0, 0)}

#MAIN-LEFT {width: calc(100% - 76px);margin-left: 76px;}/*有左側菜單時用這個*/
#MAIN {width: 100%;}
.Content {width:1100px;margin: 0 auto; padding-top: 30px;position: relative;}
@media(min-width:559px) {}
@media(min-width:559px) and (max-width:899px) {}

/*页面顶部标题*/
.PageTitle {font-weight: bold; position: relative; padding-left: 20px;}
.PageTitle p {font-weight: 100;}
.PageTitle::after { content: '';position: absolute;left: 5px;width: 5px;height: 70px;top: 0;border-radius: 3px;}

/*繼續加載*/
.LoadMore {width: 100%; padding: 20px 0 40px 0;}
.LoadMore a {width:150px; display: block; text-align: center; margin: 0 auto; line-height: 40px; border-radius: 10px;}


/*左側菜單*/
.sidebar { width: 66px; top: 10px; left: 10px; z-index: 999999; display: block; height: calc(100% - 20px); position: fixed; transition: width 0.2s ease-in-out; box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(146, 98, 98, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.06); transition: .4s ease-in-out; border-radius: 10px; }
.sidebar.open { width: 230px; }
.sidebar .logo { width: 100%; height: 70px; padding-top: 10px; display: grid; align-items: center; justify-items: center; }
.sidebar .logo img { width: 56px; height: 56px; transition: .4s; }
.sidebar.open .logo img { width: 184px; height:42px;  }
.sidebar .logo h3 {  font-size: 26px; font-variant: small-caps; pointer-events: none; scale: 0; opacity: 0; }
.sidebar.open .logo h3 { scale: 1; opacity: 1; transition: .4s; transition-delay: .2s; }
.sidebar .nav-title { margin: 20px 0 18px; pointer-events: none; opacity: 0; transition: opacity 0.2s ease-in-out; width: 200px; white-space: nowrap; overflow: hidden; }
.sidebar.open .nav-title { opacity: 1; transition: .4s; transition-delay: .2s; width: 200px; white-space: nowrap; overflow: hidden; }
.sidebar nav { padding: 0 15px; margin-top: 0;  }
.sidebar:not(.open) nav { padding: 0 5px; }
.sidebar nav a {width: 98%;border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: flex-start;height: 46px; padding: 0 14px; margin: 8px 0;  transition: .3s; }
.sidebar nav a img, .sidebar nav a i { width: 30px; height: 30px; border-radius: 3px; font-size: 24px; }
.sidebar nav a i { margin-left: 3px; }
.sidebar nav a span { font-size: 14px; margin-left: 8px; opacity: 0; pointer-events: none; }
.sidebar.open nav a span { opacity: 1; pointer-events: visible; transition: .4s; transition-delay: .2s; }
.sidebar.open nav a span i {font-size: 16px;color: #ff95b0;}
.sidebar hr { width: 100%; height: 2px; border-radius: 3px; margin: 40px 0 50px; background: rgba(255, 255, 255, .1); opacity: 0; }
.sidebar.open hr { opacity: 1; transition: .4s; }
.sidebar .toggle { cursor: pointer; position: absolute; top: 20px; right: -40px; text-align: center; border-radius: 0 10px 10px 0; padding: 2px 0 2px 2px; width: 40px; height: 40px; box-shadow: 0 2px 16px #00000014; transition: padding 0.2s ease-in-out, margin-top 0.2s ease-in-out; }
.sidebar:not(.open) .toggle { right: -40px; top: 20px; }
.sidebar .toggle i { font-size: 16px; line-height: 38px; transition: .4s linear; }
.sidebar.open .toggle i { transform: rotateY(180deg); }
.sidebar nav h4 { display: flex; line-height: 30px; }
.sidebar nav h4 i { font-size: 20px; }
.sidebar nav span { padding-left: 5px; }
.Sidebar_Bottom { position: absolute; bottom: 0; width: 100%;}
.Sidebar_Bottom .Sidebar_Button {padding:0;}
.Sidebar_Bottom .Sidebar_Button ul, .Sidebar_Bottom .Sidebar_Button ul a {display: inline-block;}
.Sidebar_Bottom .Sidebar_Button ul {width: 180px;}
.Sidebar_Bottom .Sidebar_Button ul a {border: 1px; border-style: solid;  width: 85px;text-align: center;  padding: 6px 0; border-radius: 6px; transition: padding 0.2s ease-in-out, margin-top 0.2s ease-in-out; }
.Sidebar_Bottom .Sidebar_Button ul a:nth-child(2) { margin-left:6px;}
.Sidebar_Bottom .Sidebar_Button ul a i { margin-bottom: 5px; font-size: 26px;}
.Sidebar_Bottom .theme-switcher {display: flex;gap: 10px;padding: 1px;border-radius: 4px;}
.Sidebar_Bottom .theme-option {font-weight: bold;padding: 10px 28px;text-decoration: none; border-radius: 4px;transition: background-color 0.2s, color 0.2s;}
.Sidebar_Bottom .popup-menu ul {padding: 10px 0;}
.Sidebar_Bottom .popup-menu li a {line-height: 25px; display: block;padding: 10px;}
.Sidebar_Bottom .popup-menu li a:hover {border-radius: 8px;}

.sidebar_user { padding:16px;  }
.sidebar_user ul { position: relative; border-radius: 10px; padding: 10px; background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fbc2eb, #a6c1ee, #fbc2eb, #fad0c4, #ff9a9e); background-size: 400% 400%; animation: gradientAnimation 10s ease infinite; }
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.sidebar_user ul img { border-radius: 50%; width: 36px; height: 36px; display: inline-block; margin-right: 5px; }
.sidebar_user ul span {right: 14px;top: 14px;width: 30px;height: 30px;border-radius: 50%;text-align: center;line-height: 30px;position: absolute;}
.sidebar_user ul a {height: 36px; line-height: 18px; display:inline-block; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.sidebar_user ul a p {display: inline-block; font-size: 14px; width:90px;line-height: 25px; padding: 3px 0 5px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-popup {position: absolute; bottom:60px; left: 120px;  width: 200px;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); opacity: 0;visibility: hidden;transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;z-index: 1000; }
.user-popup .popup-content {padding: 10px;}
.user-popup.visible {opacity: 1;visibility: visible;}
.sidebar:not(.open) .user-popup {position: absolute; bottom: 55px; left: 20px; }
.sidebar:not(.open) .sidebar_user { padding: 5px;  }
.sidebar:not(.open) .sidebar_user ul span, .sidebar:not(.open) .sidebar_user ul a p { display: none; transition: padding 0.2s ease-in-out, margin-top 0.2s ease-in-out; }

.addChannel { height: calc(100vh - 270px - 100px); overflow-y: hidden; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.addChannel:hover {overflow-y: auto; }
.sidebar:not(.open) .addChannel { height: calc(100vh - 338px - 50px);  }
.addChannel.hidden { opacity: 0; visibility: hidden; height: 0; overflow: hidden;}
.scrollable { -webkit-overflow-scrolling: touch; }
.addChannel::-webkit-scrollbar { width: 3px; height: 3px; }
.addChannel::-webkit-scrollbar-thumb {  border: 0; border-radius: 2px; background-clip: padding-box; }

.WebMenu { padding: 0 16px; }
.WebMenu a { display: flex; position: relative; width: 100%; padding:10px 0 10px 15px; border-radius: 10px; margin-bottom: 0;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.WebMenu a i { width: 30px; height: 30px; font-size: 20px; line-height: 30px; text-align: center; }
.WebMenu a span { font-size: 16px; line-height: 30px; padding-left: 5px; transition: padding 0.2s ease-in-out, margin-top 0.2s ease-in-out; }
.WebMenu a .icon-xia, .WebMenu a .icon-shang {position: absolute; right: 10px;}
.sidebar:not(.open) .WebMenu a span, .sidebar:not(.open) .WebMenu a .icon-xia, .sidebar:not(.open) .WebMenu a .icon-shang { display: none; transition: padding 0.2s ease-in-out, margin-top 0.2s ease-in-out; }
.sidebar:not(.open) .WebMenu { padding: 0 5px; }
.sidebar:not(.open) .WebMenu a i { font-size: 30px; }
.sidebar:not(.open) .WebMenu a { padding: 10px 14px; margin-bottom: 5px;}


/*首頁*/
.TopWrapper img {width: 100%; height: auto; border-radius: 20px;}

/*部落格列表*/
.BlogList { padding: 10px 10px 30px 10px; display: block; }
.BlogList li:first-child {position: relative;width: 100%;margin-top: 20px;}
.BlogList li:first-child img {width: 600px; height: 600px;margin-bottom: 0;}
.BlogList li:first-child h2 {float: left;font-size: 40px;position: absolute;width: 450px;top: 0;right: 0;}
.BlogList li:first-child h2 p {font-size: 20px;}
.BlogList li:first-child h3 {float: left;font-size: 25px;position: absolute;width: 450px;bottom: 0;right: 0;}
.BlogList li {width: 32%; display: inline-block; margin-top: 50px; margin-left: 1%;}
.BlogList li img {width: 100%; height:auto; margin-bottom: 20px;}
.BlogList li h2 {margin-bottom: 20px; font-weight: bold;}
.BlogList li h2 p {margin-top: 10px; font-size: 16px;font-weight: 100;}

.blogDetails { padding: 40px 20px 0 20px;}
.blogDetails h3 {font-size: 35px;margin-bottom: 10px; padding-left: 15px;}
.blogDetails time {font-size: 20px;padding-left: 15px;padding-bottom: 15px;display: block;}
.blogDetails ul {border-radius: 10px;padding: 20px;}
.blogDetails ul p {line-height: 28px;font-size: 15px; margin-bottom: 15px;}
.blogDetails ul p img {border-radius: 10px;max-width: 100%;}
.blogDetails ul h1,
.blogDetails ul h2,
.blogDetails ul h3,
.blogDetails ul h4,
.blogDetails ul h5 { margin-top: 25px;  margin-bottom: 10px;}


/*入駐推廣*/
.Add-FanClub {width: 100%;border-radius: 10px;padding: 20px;margin: 30px 0 10px 0;float: left;}
.Add-FanClub, .Add-FanClub dt, .Add-FanClub dd {display: inline-block;}
.Add-FanClub dt {width: 700px;height: 235px;}
.Add-FanClub dt img {width: 700px;height: 235px;border-radius: 5px;}
.Application-Process {width: 100%;border-radius: 10px;padding: 30px 0;margin: 0 0 30px 0;}
.Application-Process, .Application-Process dt, .Application-Process dd {display: inline-block;vertical-align: middle;}
.Application-Process dt {font-size: 20px;width: 22%;text-align: center;}
.Application-Process dt i {font-size: 40px;}
.Application-Process dd {width: 3.3%;text-align: center;}
.Application-Process dd i {font-size: 30px;}

/*後援會申請*/
.JoinUs {width: 100%;border-radius: 10px;padding: 30px 0;margin: 30px 0;float: left;height: 1000px;}



/*****瀏覽後援會*****/
/*顶部搜索*/
#searchTop {position: fixed;top: 0;width: 100%;z-index: 10000;transition: box-shadow 0.3s ease;}
.SearchTop .SearchBar {width: 600px; margin: 0 auto; padding: 15px;position: relative;}
.SearchTop .SearchBar i {position: absolute;top: 27px;left: 35px; font-size: 20px;}
.SearchTop .SearchBar input {padding: 15px 15px 15px 50px;border-radius: 30px;width: 100%;margin: 0 auto;}

/*左右翻页组件*/
.SearchRecent, .SearchRecommend { position: relative;margin-top: 50px;}
.SearchRecent ul, .SearchRecommend ul {width: 100%; margin: 15px 0; }
.SearchRecent h3, .SearchRecommend h3 {font-weight: bold;}
.SearchRecent h3 i, .SearchRecommend h3 i {font-weight: 100; padding-left: 10px;font-size: 16px;cursor: pointer;}
.SearchRecent ul a {margin-right: 1%;padding: 10px; border-radius: 10px;}
.SearchRecent ul a img {width:40px;height: 40px; border-radius: 4px; display: inline-block;vertical-align: middle; margin-right: 10px;} 

.SearchRecommend ul a {margin-right: 1%;padding: 0; }
.SearchRecommend ul a img {width:100%;height: auto; border-radius: 5px; display: inline-block;} 
.SearchRecommend span {line-height: 26px;}
#dataList {display: flex;transition: transform 0.5s ease-in-out;will-change: transform;}
#dataList a {flex: 0 0 24%;box-sizing: border-box;}
#dataListRecommend {display: flex;transition: transform 0.5s ease-in-out;will-change: transform;}
#dataListRecommend a {flex: 0 0 15.7%;box-sizing: border-box;text-align: center;padding: 5px; border-radius: 10px;}
.slider-container {width: 100%;overflow: hidden;position: relative;}
.disabled {opacity: 0.5;pointer-events: none;}
.RecentPage {position: absolute; right: 0;top: 0;}
.RecentPage i {width: 40px; height: 40px; cursor: pointer; border-radius: 50%;padding: 8px;}

/*後援會TOP10*/
.HotFanClub { margin-top: 50px; padding-bottom: 50px;}
.HotFanClub h3 {font-weight: bold;font-size: 20px; margin-bottom: 10px;}
.HotFanClub dd {display: inline-block; width: 31%; margin-left: 3.1%;padding: 15px;border-radius: 15px;}
.HotFanClub dd:first-child {margin-left: 0;}
.HotFanClub dd a {font-size: 16px; display: block;padding: 10px;}
.HotFanClub dd a:hover {border-radius: 10px;}
.HotFanClub dd a img {width: 50px; height: 50px; vertical-align: middle; margin-right: 10px;border-radius: 5px;}
.HotFanClub dd li:nth-child(1) a {font-size: 20px;font-weight: bold;}
.HotFanClub dd li:nth-child(2) a {font-size: 18px;font-weight: bold;}
.HotFanClub dd li:nth-child(3) a {font-size: 16px;font-weight: bold;}
.HotFanClub dd li {position: relative;}
.HotFanClub dd li:nth-child(1) a img {width: 80px; height: 80px;}
.HotFanClub dd li:nth-child(2) a img {width: 70px; height: 70px;}
.HotFanClub dd li:nth-child(3) a img {width: 60px; height: 60px;}
.HotFanClub dd li span {display: inline-block;vertical-align: middle;}
.HotFanClub dd li span p {font-weight: 100;font-size: 14px; margin-top: 5px;}
.HotFanClub dd li:nth-child(1) span p {font-size: 18px;}
.HotFanClub dd li:nth-child(2) span p {font-size: 16px;}
.HotFanClub dd li:nth-child(3) span p {font-size: 14px;}
.HotFanClub dd li b {position: absolute; right: 10px; top: 20px;font-size: 20px; width: 40px; height: 40px; text-align: center;}
.HotFanClub dd li:nth-child(1) b i {font-size: 30px;font-weight: 100; color: #ce9e00;}
.HotFanClub dd li:nth-child(2) b i {font-size: 26px;font-weight: 100; color: #9d9d9d;}
.HotFanClub dd li:nth-child(3) b i {font-size: 22px;font-weight: 100; color: #b56b2e;}

/*****後援會主頁*****/
/*顶部*/
.FanClub-TopImg {width: 100%; height: 450px; background-repeat: no-repeat; background-size: cover; background-position: center center; position: relative;}
.FanClub-TopImg img {width: 150px; height: 150px; position: absolute; border-radius: 15px; bottom:-80px; left: 50%; margin-left: -35px;transition: width 0.2sease-in-out;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(146, 98, 98, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.06);transition: .4sease-in-out;}
.TopButton {position: absolute; right: 10px; top: 450px;padding: 35px 20px 20px 20px;}
.TopButton2 {position: absolute;right: 0;top: 0;padding: 13px 13px 0 0;}
.TopButton span, .TopButton2 span {position: relative;height: 37px;display: inline-block;}
.TopButton span .Fanclub_Sub, .TopButton span .Fanclub_unSub {border-radius: 5px; padding: 0 15px; height: 37px; line-height: 37px; display: inline-block; text-align: center; cursor: pointer;}
.TopButton span i, .TopButton2 span i {border:1px solid; padding:0 10px; text-align: center; border-radius: 5px;height: 37px; line-height: 37px;display: inline-block;margin-left: 5px; cursor: pointer; }
.FanClubTop { margin-top: 94px; text-align: center; padding-left: 80px;}
.FanClubTop h1 {font-size:26px; font-weight: bold;position: relative;}
.FanClubTop h1 span { margin: 0 auto;}
.FanClubTop h1 i {font-size:24px; color: #ff076f;display: inline-block;margin-left: 2px; position: absolute;}
.FanClubTop h2 {font-size:14px; font-weight: 100; margin-top: 10px;}
.FanClubTop p {margin-top: 15px;}
.FanClubTop p a {margin: 0 5px;}
.FanClubTop p a i {font-size: 26px;}
.FanClubTopMenu {border-bottom: 1px solid;padding-left: 80px;margin-top: 50px;}
.FanClubTopMenu ul {text-align: center;}
.FanClubTopMenu ul li {display: inline-block;}
.FanClubTopMenu ul li a {font-size: 16px; padding-bottom:15px;margin: 0 15px;display: inline-block;}
.FanClubTopMenu ul li a.active {font-weight: bold;border-bottom: 2px solid;}
/*顶部横条*/
.Fanclub-TopBarbG {box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(146, 98, 98, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.06);top: 0;z-index: 99999;display: flex;justify-content: center;align-items: center;height: 66px;position: fixed;width: 100%;}
.Fanclub-TopBar {top: 0;z-index: 999999;display: flex;justify-content: center;align-items: center;height: 66px;position: fixed;width: 100%;transition: width 0.2s ease-in-out;transition: .4s ease-in-out;padding: 10px; }
.Fanclub-TopBar img {width: 46px; height: 46px; border-radius: 5px;position: absolute;left: 10px;}
.Fanclub-TopBar h3 {position: absolute;left: 60px;display: inline-block;vertical-align: top;line-height: 46px; font-size: 18px; font-weight: bold;padding-left: 5px;}
.Fanclub-TopBar h3 i {font-weight: 100;font-size: 22px;padding-left: 5px;}
.Fanclub-TopBar .Fanclub_Sub {border-radius: 5px; padding: 0 15px; height: 37px; line-height: 37px; display: inline-block; text-align: center; cursor: pointer;}
.Fanclub-TopBar-Menu {display: inline-block;vertical-align: top;line-height: 46px;margin: 0 auto;}
.Fanclub-TopBar-Menu ul{display: flex;justify-content: center; align-items: center; padding: 0;margin: 0;}
.Fanclub-TopBar-Menu li {display: inline-block;}
.Fanclub-TopBar-Menu li a {font-size: 16px;padding:7px 15px;border-radius: 5px;}
.Fanclub-TopBar-Menu li a.active {font-weight: bold;}
/*底部*/
.FanClub-Bottom {text-align: center; margin-top: 50px; padding-bottom: 50px;}
.FanClub-Bottom img {width: 60px; height: 60px;}

/*胶囊开关*/
.toggle-switch {position: relative;display: inline-block;width: 50px;height: 24px; vertical-align: 3px;margin-right: 5px;}
.toggle-input {opacity: 0;width: 0;height: 0;}
.toggle-slider {position: absolute;cursor: pointer;top: 0;left: 0;right: 0;bottom: 0;transition: 0.4s;border-radius: 34px;}
.toggle-slider:before {position: absolute;content: "";height: 20px;width: 20px;left: 2px;bottom: 2px;transition: 0.4s;border-radius: 50%; }
.toggle-input:checked + .toggle-slider:before {transform: translateX(26px); }

/*加入会籍*/
.Join-Cycle {width: 100%; display: inline-block; text-align: center;}
.Join-Cycle span {line-height: 24px; height: 24px;font-size: 16px;}
.Join-Fanclub {position: relative;margin-top: 20px;}
.Join-Fanclub i {width: 30px; height: 30px; line-height: 30px; border-radius: 50%; font-size: 16px; text-align: center; display: inline-block;transform: translateY(-50%);cursor: pointer;position: absolute;}
.Join-Fanclub i.icon-zuo {top: 50%; left: 5px;}
.Join-Fanclub i.icon-you {top: 50%; right: 5px;}
.Join-Fanclub i.icon-zuo, .Join-Fanclub i.icon-you {cursor: pointer; transition: opacity 0.3s;}
.Join-Fanclub i.icon-zuo.disabled, .Join-Fanclub i.icon-you.disabled {opacity: 0.5;pointer-events: none;}
.Join-Fanclub .Fanclub-Level {overflow: hidden;width:calc(100% - 100px); margin: 0 50px;position: relative;}
.Join-Fanclub .Fanclub-Level ul {display: flex;transition: transform 0.5sease-in-out;will-change: transform;width: 100%;}
.Join-Fanclub .Fanclub-Level li {flex: 0 0 32.3%; margin-right: 15px; box-sizing: border-box;border: 1px solid;border-radius: 10px;flex-shrink: 0; }
.Join-Fanclub .Fanclub-Level li img {width: 100%; height:150px; border-radius: 10px 10px 0 0;}
.Join-Fanclub .Fanclub-Level li h1 {font-weight: bold; font-size: 22px; padding: 15px 20px 0 20px;}
.Join-Fanclub .Fanclub-Level li h2 {font-weight: 100; font-size: 20px; padding: 5px 20px;}
.Join-Fanclub .Fanclub-Level li h2 span {font-weight: 600; font-size: 28px;padding: 0 5px;}
.Join-Fanclub .Fanclub-Level li h2 em {font-weight: 100; font-size: 14px;}
.Join-Fanclub .Fanclub-Level li a {font-weight: 600; font-size: 16px; padding: 15px 0;width:calc(100% - 40px); margin:10px 20px;display: block; text-align: center; border-radius: 10px;}
.Join-Fanclub .Fanclub-Level li dd { padding: 5px 20px 20px 20px; line-height: 26px;}
.Join-Fanclub .Fanclub-Level li dd h3 {font-weight: bold; font-size: 18px; margin-top: 5px;}
.Join-Fanclub .Fanclub-Level li dd p {font-weight: 100; font-size: 16px;}
.Join-Fanclub .Fanclub-Level li.Recommend {border: 5px solid;border-radius: 15px;}
.Join-Fanclub .Fanclub-Level li.Recommend img {height:145px;}
.Join-Fanclub .Fanclub-Level li.Recommend dd {padding: 5px 20px 15px 20px;}
.Join-Fanclub .Fanclub-Level li.Recommend i {width: 110px !important;border-radius: 5px 0 10px 0;line-height: 34px;height: 34px;position: absolute;top: 21px;background-color: #333;color: #FFF;}
.page-dots {display: flex;justify-content: center;margin-top: 20px;}
.page-dot {width: 10px;height: 10px;background-color: #ccc;border-radius: 50%;margin: 0 5px;cursor: pointer;transition: background-color 0.3s}
.page-dot.active {background-color: #ff076f;}

/*後援會首頁商品模塊*/
.Fanclub-Commodity { margin: 30px 20px;}
.Fanclub-Commodity h2 {font-size: 24px; font-weight: bold; margin-bottom: 15px; width: 100%;position: relative;padding: 0 15px;}
.Fanclub-Commodity h2 p {font-size: 16px; font-weight: 100; position: absolute; right: 10px;top: 8px; }
.Fanclub-Commodity ul {display: flex;}
.Fanclub-Commodity ul li {flex-shrink: 0; width: 23.5%; margin-right: 2%; }
.Fanclub-Commodity ul li:nth-child(4) {margin-right: 0;}
.Fanclub-Commodity ul li img {width: 100%;border-radius: 15px;}
.Fanclub-Commodity ul li p {width: 100%;display: block; text-align: center; padding: 5px 0;font-size: 16px;}

/*後援會商品頁商品列表*/
.Products_List {position: relative;width:calc(100% - 300px) ;  margin-top: 60px; }
.Products_List ul {margin-top: 10px;padding-left:20px;display: inline-block; position: relative;}
.Products_List ul li {flex-shrink: 0; width: 31.5%; margin-right: 2%;display: inline-block; margin-bottom: 25px; position: relative; }
.Products_List ul li .addCart {position: absolute;right: 4px;bottom: 36px;cursor: pointer;font-size: 26px;border-radius: 10px;width: 35px;height: 35px;line-height: 35px;text-align: center; display: none;}
.Products_List ul li:hover .addCart {display:block;}
.Products_List ul li:nth-child(3n) {margin-right: 0;}
.Products_List ul li img {width: 100%;border-radius: 15px;}
.Products_List ul li p {width: 100%;display: block; text-align: center; padding: 5px 0;font-size: 16px;}
.Products_Top {padding: 10px 0;width: 776px;height: 60px;position: sticky;z-index: 1000;margin-left: 20px;top: 66px;}
.SearchPro {height: 40px; padding: 10px; border-radius: 10px; float: right;}
.SearchPro i {padding: 0 5px 0 2px;}
.Products_Class {height: 40px; padding: 10px 15px; border-radius: 10px; float: left;cursor: pointer;}
.Products_Class i {margin-right: 5px;}
.Products_ShopingCart {border-radius: 15px;padding: 15px 15px 13px 13px;width:280px;display: inline-block;vertical-align: top; position: sticky;top: 75px;z-index: 1000; float:right; margin-top: 70px;}
.Products_ShopingCart ul {padding-top: 5px;height: calc(100vh - 200px - 260px);margin-bottom: 130px;overflow-y: hidden;overflow-x: hidden;-webkit-overflow-scrolling: touch; padding-left: 5px; }
.Products_ShopingCart ul:hover {overflow-y: auto; }
.Products_ShopingCart ul::-webkit-scrollbar { width: 3px; height: 3px; }
.Products_ShopingCart ul::-webkit-scrollbar-thumb {  border: 0; border-radius: 2px; background-clip: padding-box; }

/*商品圖集*/
.Products_Box {position: relative;width:calc(100% - 300px);margin-top: 60px;display: flex;}
.Products_Box ul {padding: 10px;}
.Products_Box dl {width: 320px;position: relative;}
.Products_Box dl .Pro_PLeft,.Products_Box dl .Pro_PRight {position: absolute;background-color: #333;width: 32px;height: 32px;top: 322px;line-height: 32px;text-align: center;cursor: pointer;z-index: 100;}
.Products_Box dl .Pro_PLeft{left: 15px;border-radius:5px;}
.Products_Box dl .Pro_PRight{right: 15px;border-radius: 5px;}
.Products_Box dl p {position: absolute;width: 100%;top: 322px;line-height: 32px;text-align: center;}
.Products_Photo {overflow: hidden;white-space: nowrap;}
.Products_Photo img {width: 300px;border-radius: 15px;transition: width 0.2sease-in-out;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(146, 98, 98, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.06);transition: .4sease-in-out;cursor: pointer;margin-right: 16px;}
/* 新增图片放大浏览的样式 */
.overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.9);z-index: 10000;justify-content: center;align-items: center;}
.overlay.active {display: flex;}
.overlay div {text-align: center;}
.overlay img {max-width: 90%;max-height: 90%;border-radius: 10px;cursor: pointer;}
.overlay .close-btn {position: absolute;top: 100px;right: 100px;height: 40px;width: 40px;text-align: center;font-size: 30px;color: white;cursor: pointer;z-index: 10001;}
.overlay .nav-arrow {position: absolute;top: 50%;transform: translateY(-50%);font-size: 40px;color: white;cursor: pointer;z-index: 10001;}
.overlay .nav-arrow.left {left: 10%;}
.overlay .nav-arrow.right {right: 10%;}
/* 图片切换按钮样式 */
.Pro_PLeft, .Pro_PRight {position: absolute;background-color: #333;width: 32px;height: 32px;bottom: -36px;line-height: 32px;text-align: center;cursor: pointer;z-index: 100;border-radius: 5px;opacity: 1;transition: opacity 0.3s ease;}
.Pro_PLeft.disabled, .Pro_PRight.disabled {opacity: 0.5;pointer-events: none;}
.Pro_PLeft {left: 15px;}
.Pro_PRight {right: 15px;}

/*商品信息*/
.Products_Box dd.Products_info {width: calc(100% - 320px);padding:10px 0 0 20px;}
.Products_Box dd.Products_info h3 {font-size: 22px;font-weight: bold;}
.Products_Price {border-bottom: 1px dotted; border-top: 1px dotted;margin: 15px 0;padding: 10px 0;position: relative;}
.Products_Price .O-Price, .Products_Price .D-Price {display: inline-block;}
.Products_Price .D-Price {margin-right: 50px;font-weight: bold;}
.Products_Price .O-Price span em {text-decoration: line-through;}
.Products_Price span {font-size: 14px;}
.Products_Price span em {font-size: 30px;margin-left: 2px;}
.Products_Price p {font-size: 14px; font-weight: 100; padding-top: 5px;}
.Products_Currency {position: absolute;right: 10px; top: 25px; cursor: pointer;border: 1px solid;padding: 6px 8px; text-align: center;border-radius: 5px;line-height: 16px;}
.Products_Currency dl {margin-right: 3px;}
.Products_Currency i {margin-right: 3px;}
.Products_Category dl {width: 100%;margin-bottom: 15px;}
.Products_Category .left, .Products_Category .right {display: inline-block;}
.Products_Category .left { width: 50px; text-align: right; font-size: 14px;line-height: 40px;vertical-align: top;}
.Products_Category .right {  text-align: left; width: calc(100% - 55px);}
.Products_Category .right a {padding:6px;margin: 5px; display: inline-block; border-radius: 5px; cursor: pointer;min-width: 35px; text-align: center;}
.Products_Category .right a img {width: 30px; height: 30px; margin-right: 3px;vertical-align: middle; border-radius: 3px;}
.Products_addCart {border-radius: 10px; width: 100%; line-height: 50px; font-size: 18px;display: inline-flex;align-items: center;justify-content: center;border: none;cursor: pointer;overflow: hidden;}
.Products_addCart i {font-size: 16px;margin-left: 10px;}
.Products_addCart span, .Products_addCart i {transition: transform 0.3s ease;}
.Products_addCart:hover span {transform: translateX(10px);}
.Products_addCart:hover i {transform: translateX(30px);}
.Product_Detail_Box { border-radius: 15px;width: calc(100% - 300px); margin-top: 30px;}

/*TAB菜单*/
.TabMenu_TopBox {display: flex;}
.TabMenu_Top {padding: 10px 20px;cursor: pointer;border-bottom: none;margin-right: 5px;border-radius: 5px 5px 0 0;}
.TabMenu_Content {display: none;}
.TabMenu_Content.active {display: block;}

.TabMenu_ContentBox {padding: 20px;border-radius: 0 15px 15px 15px;border-top: none;font-size: 0;}
.TabMenu_ContentBox img {width: 100%; padding: 0; margin: 0;}
.TabMenu_ContentBox p {font-size: 14px; line-height: 22px;}

/*问答菜单*/
.faq-item {margin-bottom: 10px;}
.faq-question {cursor: pointer;padding: 10px;border-radius: 5px;font-weight: bold;font-size: 14px;}
.faq-answer {font-size: 14px;padding: 10px;border-radius: 5px;display: none;}
.faq-answer.active {display: block; }

/*後援會視頻*/
.FanClub-Video {margin-top: 60px;position: relative;width: 100%;}
.FanClub-Video ul {font-size: 0;}
.FanClub-Video ul li { width:calc(25% - 20px); display: inline-block;margin: 0 10px 20px 10px;vertical-align: top;}
.FanClub-Video ul li img { width: 100%; display:block; border-radius: 8px;}
.FanClub-Video ul li p {margin: 5px 0;font-size: 14px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;max-height: 3em;}
.FanClub-Video ul li span {font-size: 14px;}
.FanClub-Video-Detail {position: relative;margin-top: 66px;}
.FanClub-Video-Detail .FanClub-Video-Box {width:100%;font-size: 0;}
.FanClub-Video-Detail .FanClub-Video-Box video {width: 100%;border-radius: 10px; height: auto;}
.FanClub-Video-Detail h1 {width:100%;font-size: 22px; font-weight: bold; padding: 10px; line-height: 26px;}
.FanClub-Video-Detail p {padding: 10px;}
.FanClub-Video-Detail .video_class {font-size: 14px; font-weight: bold;padding: 5px 10px;border-radius: 8px;}

/*後援會音頻*/
.FanClub-Music {margin-top: 60px;position: relative;width: 100%;}
.FanClub-Music ul {font-size: 0;}
.FanClub-Music ul li { width:calc(20% - 20px); display: inline-block;margin: 0 10px 20px 10px;vertical-align: top;}
.FanClub-Music ul li dd { width: 200px; height: 200px; display:block; border-radius: 8px;border-radius: 8px; overflow: hidden;}
.FanClub-Music ul li img { width: 100%; display:block; }
.FanClub-Music ul li p {margin: 5px 0;font-size: 14px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;line-height: 1.5;max-height: 3em;}
.FanClub-Music ul li span {font-size: 14px;}
.FanClub-Music-Detail {position: relative;margin-top: 66px;}
.FanClub-Music-Detail .FanClub-Music-Box {width:100%;font-size: 0;}
.FanClub-Music-Detail .FanClub-Music-Box video {width: 100%;border-radius: 10px; height: auto;}
.FanClub-Music-Detail h1 {width:100%;font-size: 22px; font-weight: bold; padding: 10px; line-height: 26px;}
.FanClub-Music-Detail p {padding: 10px;}
.FanClub-Music-Detail .Music_class {font-size: 14px; font-weight: bold;padding: 5px 10px;border-radius: 8px;}

/*通知*/
.Message_Box {width: 800px; margin: 0 auto;}
.Message_Box li {padding:15px;}
.Message_Box li a {display:flex; position:relative;}
.Message_Box li:first-child {border-radius: 15px 15px 0 0;}
.Message_Box li:last-child {border-radius: 0 0 15px 15px;}
.Message_Box dt {margin-right: 10px;}
.Message_Box dd.Message_Title {margin-right: 90px; line-height: 25px;}
.Message_Box dd.Message_Title p {font-size: 12px;}
.Message_Box dt img.face {width: 50px; height: 50px; border-radius: 5px;}
.Message_Box dd.Message_Pic {width: 90px; position: absolute;right: 0; text-align: right; }
.Message_Box dd.Message_Pic img {max-width: 100px; max-height: 50px;}






    

/*購物車*/
.Products_ShopingCart h2 {font-size: 16px;margin-bottom: 10px; font-weight: bold;}
.Products_ShopingCart h2 i {font-size: 20px; margin-right: 5px;font-weight: 100;}
.Products_ShopingCart h2 span {font-size: 12px; float: right;padding: 5px;border-radius: 5px; cursor: pointer;}
.Products_ShopingCart dl {border-radius: 10px; margin-bottom: 10px; position: relative;padding: 10px 10px 8px 10px;width: 240px;}
.Products_ShopingCart dl dt, .Products_ShopingCart dl dd {display: inline-block;}
.Products_ShopingCart dl dt img {width:50px; height: 50px; border-radius: 5px;}
.Products_ShopingCart dl dd {vertical-align: top; padding-left: 5px;width: calc(100% - 55px);}
.Products_ShopingCart dl dd em {font-size: 10px;margin-right: 2px;}
.Products_ShopingCart dl dd h5 {font-size: 13px;white-space: nowrap;overflow: hidden;text-overflow:ellipsis; margin-top: 2px;}
.Products_ShopingCart dl dd p { margin-top: 12px;font-size: 12px;}
.Products_ShopingCart dl .counter {position: absolute; right:15px; bottom:13px; display: flex;}
.Products_ShopingCart dl .counter input { width:30px; text-align: center;}
.Products_ShopingCart dl .counter button { width:20px; border-radius: 50%;}
.Products_ShopingCart dl i {position: absolute; top: 0; right: 0; cursor: pointer;}
.Products_ShopingCart .Calculate {position: absolute; bottom: 0;left: 0;width: 100%;padding: 15px;}
.Products_ShopingCart .Calculate ul {border-radius: 10px;padding: 10px;}
.Products_ShopingCart .Calculate_box {border-radius: 10px;padding: 10px;}
.Products_ShopingCart .Calculate_box dt {width: 80px; text-align: right;display: inline-block; line-height: 30px;}
.Products_ShopingCart .Calculate_box dl {border-radius: 15px;margin-bottom: 0;position: relative;padding: 0 0 0 0;}
.Products_ShopingCart .Calculate_box dd {width: calc(100% - 85px);display: inline-block;line-height: 30px;font-size: 14px;font-weight: bold;}
.Products_ShopingCart .Calculate_box dd em {font-size: 10px;font-weight: 100; margin-right:2px;}
.Products_ShopingCart .Create_Order a {position: absolute;bottom: -50px;left: 0;width: 280px;height: 50px;line-height: 50px;background-color: #000;text-align: center;border-radius: 0 0 15px 15px;}
.NothingCart {text-align: center;position: absolute;top: 70px;display: block;width:calc(100% - 28px);}
.NothingCart p {font-size: 16px;}
.NothingCart i {font-size: 40px;}

/*後援會公用左側菜單與頂部固定搜索*/
.Fanclub_List {position: relative;width:100%;margin-top: 60px; }
.Fanclub_List ul {margin-top: 10px;padding-left:20px;display: inline-block; position: relative;}
.Fanclub_List ul li {flex-shrink: 0; width: 31.5%; margin-right: 2%;display: inline-block; margin-bottom: 25px; }
.Fanclub_List ul li:nth-child(3n) {margin-right: 0;}
.Fanclub_List ul li img {width: 100%;border-radius: 15px;}
.Fanclub_List ul li p {width: 100%;display: block; text-align: center; padding: 5px 0;font-size: 16px;}
.Fanclub_Class {width: 100%;margin: 15px 0;display: flex;justify-content: center;}
.Fanclub_Class li a {font-size: 16px;line-height: 40px; display: block; border-radius: 5px;padding:0 10px;}
.Fanclub_Class li a.active, .Fanclub_Class li a.active:hover {font-weight: bold;}
.Fanclub_Top {padding: 10px 0;width: 100%;height:130px;position: sticky;z-index: 1000;top:66px;}
.SearchFanclub {height: 40px; padding: 10px; border-radius: 10px;width: 400px;margin: 0 auto;}
.SearchFanclub i {padding: 0 5px 0 2px;}
.SearchFanclub input {width:calc(100% - 30px) !important;}

/*瀑布流*/
.container {width: 100%;margin: 0 auto;padding: 10px;}
.grid {column-count: 5;column-gap: 15px;}
.grid-item {position: relative;break-inside: avoid;border-radius: 8px;overflow: hidden;margin-bottom: 15px;display: inline-block;width: 100%;}
.grid-item img {position: relative;width: 100%;height: auto;display: block;object-fit: cover;border-radius: 0 0 10px 10px;cursor: pointer;}
.content {padding: 10px;}
.title {font-size: 14px;font-weight: bold;margin-bottom: 8px;cursor: pointer;}
.author {position: relative;display: flex;align-items: center;margin-bottom: 8px;}
.author-avatar {width: 24px !important;height: 24px !important;border-radius: 50% !important;margin-right: 8px !important;}
.author-name {font-size: 12px;color: #666;}
.likes {font-size: 12px;position: absolute;right: 0;top: 0;}
#load-more {display: block;margin: 20px auto;padding: 10px 20px;background-color: #ff5a5f;color: #fff;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;}
#load-more:hover {background-color: #ff3b3f;}
.grid-vipsee { position: absolute; top: 0; left: 0; background-color: #000;padding: 3px 5px; border-radius: 5px; color: #FFF; z-index: 666;}
.grid-vipsee i { margin-right: 3px;}
@media (max-width: 600px) {
.container {width: 100%;}
.grid {column-count: 2; }
}

/* BBS弹层样式 */
.bbs-overlay {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0, 0, 0, 0.5);z-index: 10000;justify-content: center;align-items: center;}
.BBS_Detail {max-width: 90%;height: 85vh;min-height: 85vh;max-height: 85vh;margin-left: 80px;border-radius: 12px;position: relative;overflow-y: auto;display: flex;align-items: stretch;margin-top: 66px;}
.close-bbs {position: absolute;top: 15px;right: 20px;font-size: 28px;cursor: pointer;z-index: 999;}
.BBS_Content {display: flex; align-items: flex-start;height: 100%;}
.bbs-detail-imgBox, .bbs-detail-content {height: 100%; }
.bbs-detail-imgBox {max-width: calc(100% - 400px); height: 100%; object-fit: cover; font-size: 0;flex-grow: 1;display: flex; align-items: center; justify-content: center; overflow: hidden;}
.bbs-detail-img {max-height: 100%;max-width: 100%;width: auto;object-fit: contain; }
.bbs-detail-content {width: 400px;height: 100%; box-sizing: border-box;position: relative;overflow-y: auto; scrollbar-width: none;-ms-overflow-style: none; }
.bbs-title {font-size: 24px;padding:15px 24px 10px 24px;}
.bbs-text {padding: 0 24px;}
.bbs-text p {line-height: 150%;font-size: 16px;}
.bbs-author {font-size: 16px;line-height: 35px;font-weight: bold;}
.bbs-likes {font-size: 16px;margin-bottom: 10px;}
.bbs-detail-top {border-radius: 20px;position: sticky; display: flex;width: 100%;top: 0;left: 0;padding:18px 24px;border-bottom: 1px solid;}
.bbs-detail-top img {width: 35px;height: 35px;border-radius: 50%;margin-right: 5px;vertical-align: middle;}

/* 移动端适配 */
@media (max-width: 768px) {
    .BBS_Detail {width: 90%;padding: 15px;}
    .BBS_Content {flex-direction: column;}
    .bbs-detail-img {width: 100%;height: auto;}
}

/* 公共頁面TITLE */
.PublicTitle {position: relative;}
.PublicTitle ul {position: absolute;right: 10px;top: 5px;}
.PublicTitle ul a {font-size: 22px; margin-left: 30px;}
.PublicTitle ul a.active {font-size: 26px; font-weight: bold;position: relative;}
.PublicTitle ul a.active::after { content: '';position: absolute;left: 0;width: 100%;height: 5px;bottom: -10px;border-radius: 3px;}

/* 按钮的浮动层样式 */
.fanclub-sub-popup, .fanclub-share-popup, .fanclub-more-popup{position: absolute;top: 37px;right: 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;display: none;border-radius: 5px;}
.Products-Class-popup {position: absolute;top: 50px;left: 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;display: none;border-radius: 5px;}
.Pro-Currency-popup {position: absolute;top: 55px;right: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;display: none;border-radius: 5px;}
.Comment-BQ-popup{position: absolute;bottom: 50px;left: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;display: none;border-radius: 15px;padding: 10px;}
.Comment-FX-popup{position: absolute;bottom: 50px;right: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;display: none;border-radius: 15px;}
.fanclub-sub-popup {width: 130px;}
.fanclub-share-popup {width: 260px;}
.Comment-BQ-popup {width: 360px;}
.Comment-FX-popup {width: 260px;}
.Pro-Currency-popup {width: 260px;}
.fanclub-more-popup {width: 100px;}
.Products-Class-popup {width: 107px;}
.fanclub-sub-popup h4, .fanclub-share-popup h4, .fanclub-more-popup h4, .Products-Class-popup h4, .Pro-Currency-popup h4, .Comment-BQ-popup h4, .Comment-FX-popup h4   
{line-height: 40px;padding:0 10px;font-weight: bold;}
.fanclub-sub-popup li a, .fanclub-share-popup li a, .fanclub-more-popup li a, .Products-Class-popup li a, .Pro-Currency-popup li a, .Comment-BQ-popup li a, .Comment-FX-popup li a 
{line-height: 40px;padding:0 10px; display: block;}
.fanclub-sub-popup li a i, .fanclub-share-popup li a i, .fanclub-more-popup li a i, .Products-Class-popup li a i, .Pro-Currency-popup li a i, .Comment-BQ-popup li a i, .Comment-FX-popup li a i 
{border:0 !important;padding: 0 !important; background-color: unset !important;}
.fanclub-share-popup li {width: 130px;float: left;}
.Comment-FX-popup li {width: 130px;float: left;}
.Comment-BQ-popup ul span {width: 34px !important;float: left !important;height: 34px !important;line-height: 34px !important;margin-left: 0 !important;}
.Comment-BQ-popup ul span img {border-radius: 0;display:block !important;width: 30px;height: 30px;position:unset !important;}
.Products-Class-popup li {width: 100% !important;margin-right: 0 !important;display:block !important;margin-bottom: 5px !important;}
.Products-Class-popup ul {margin-top: 0;padding-left:0;display:block; position: relative;}
.Pro-Currency-popup li em {font-size: 10px; width: 24px; height: 24px; line-height: 24px; text-align: center; border-radius: 50%; display: inline-block; margin-right: 5px;}
.fanclub-sub-popup.visible, .fanclub-share-popup.visible, .fanclub-more-popup.visible, .Products-Class-popup.visible, .Pro-Currency-popup.visible, .Comment-BQ-popup.visible, .Comment-FX-popup.visible {display: block;}
.bbs-Comment-pic {margin-top: 10px;position: relative !important;height: 30px!important;line-height: 30px!important;text-align: center!important;display: inline-block!important;float: left!important;}
.bbs-Comment-pic img {height:30px; width:30px; border-radius: 3px;}
.bbs-Comment-pic i {position: absolute; font-size: 10px !important; right: -5px;top: -15px;}

/*評論*/
.Comment { padding: 30px;}
.Comment h1 {font-size: 20px; font-weight: bold;}
.PostComment {width: 100%;padding: 20px 0;}
.PostComment img {border-radius: 50%;display: inline-block;margin-right: 15px;vertical-align: top;margin-top: 10px;}
.PostComment textarea, .bbs-PostComment textarea {width: calc(100% - 165px);border-radius: 10px;padding: 10px;border: 1px solid;line-height: 25px;font-size: 16px;display: inline-block;resize: none; overflow: hidden; min-height: 50px; max-height: 250px;}
.PostComment button {width: 80px; height: 72px; display: inline-block; vertical-align: top; margin-left: 10px;border-radius: 10px;font-size: 18px;}
.PostComment img {width: 50px; height: 50px; }

.bbs-Comment { padding: 20px 24px;}
.bbs-Comment h1 {font-size: 20px; font-weight: bold; margin-bottom: 10px;}
.bbs-PostComment {border-radius: 20px;position: sticky; display: flex;width:100%;bottom: 0;left: 0;padding: 12px;border-top: 1px solid;}
.bbs-PostComment dt {align-items: center;width: 100%;display: flex;}
.bbs-PostComment dt img {border-radius: 50%;display: inline-block;vertical-align: top;width: 25px; height: 25px; position: absolute; top: 16px; left: 16px;}
.bbs-PostComment span {float: right;display: inline-block; text-align: center; cursor: pointer; margin-left: 10px; line-height: 34px; }
.bbs-PostComment span i {margin-right:3px;}
.bbs-PostComment dt input {width: auto;height: 34px; border-radius: 15px;font-size: 12px; padding-left: 34px;line-height: 22px;}
.bbs-PostComment dt input[type="text"] {flex-grow: 1; min-width: 50px;}
.bbs-PostComment dt .fenxiang,
.bbs-PostComment dt .pinglun,
.bbs-PostComment dt .shoucang,
.bbs-PostComment dt .zan {flex-shrink: 0;margin-left: 15px;}
.bbs-PostComment dd {width: 100%;}
.bbs-PostComment dd.bbs-Post {display: none;}
.bbs-PostComment dd.bbs-Reply {display: none;}
.bbs-PostComment dd textarea {width: 100%; height: 34px;min-height:34px !important; line-height: 20px; border-radius: 15px;font-size: 14px;padding:7px 10px; border: 0;}
.bbs-PostComment dd button {width: 64px; height: 40px; display: inline-block; vertical-align: top; margin: 5px 0 0 5px;border-radius: 20px;font-size: 14px; float: right;}
.bbs-PostComment dd span {height: 50px; line-height: 50px; text-align: center; display: inline-block; float: left; }
.bbs-PostComment dd span i {font-size: 28px; margin: 0; padding: 0;}
.bbs-yuanwen {padding: 5px;}
.bbs-yuanwen p { margin-bottom: 5px;}
.bbs-yuanwen em { margin-bottom: 5px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}

.bbs-PostComment dt input {cursor: text; }
.bbs-PostComment dd.bbs-Post, .bbs-PostComment dd.bbs-Reply {display: none;}
.bbs-PostComment dd.bbs-Post.active, .bbs-PostComment dd.bbs-Reply.active {display: block;}
.bbs-PostComment dd textarea {width: 100%;min-height: 50px; max-height: 150px; resize: none; overflow-y: auto;}

.CommentList .parent-comment, .bbs-CommentList .bbs-parent-comment {margin-bottom: 20px;}
.comment-item, .bbs-comment-item {margin-bottom: 10px;}
.reply-container, .bbs-reply-container {margin-left: 52px; margin-bottom: 10px;}
.CommentList dt img {width: 40px; height: 40px;border-radius: 50%;}
.bbs-CommentList dt img {width: 40px; height: 40px;border-radius: 50%;}
.bbs-reply-container dt img {width: 25px; height: 25px;border-radius: 50%;}
.CommentList dt, .CommentList dd, .bbs-CommentList dt, .bbs-CommentList dd {line-height: 20px; display: inline-block;vertical-align: text-top;}
.CommentList dd, .bbs-CommentList dd { margin-left: 5px; width: calc(100% - 55px);font-size: 14px;}
.CommentList dd time, .CommentList dd span, .CommentList dd span a,
.bbs-CommentList dd time, .bbs-CommentList dd span, .bbs-CommentList dd span a {font-size: 12px; margin-right: 5px;display: inline-block;}
.bbs-comment-item dd p {line-height: 25px;}
.bbs-reply-container dd img, .bbs-comment-item dd img {max-width: 150px; margin-top: 8px;border-radius: 8px;}
.MoreReply, .bbs-MoreReply {margin-left:85px;height: 32px;line-height: 32px;cursor: pointer;font-weight: 500;font-size: 14px;}

#ReplyBox {display: none; position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;}
#ReplyPopup {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 700px;height: 150px;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);border-radius: 5px;}
#ReplyPopup p {margin-bottom: 10px;}
#ReplyPopup textarea {width: calc(100% - 90px);border-radius: 10px;padding: 10px;border: 1px solid;line-height: 25px;font-size: 16px;display: inline-block;resize: none; overflow: hidden; min-height: 50px; max-height: 250px;}
#ReplyPopup button {width: 80px; height: 72px; display: inline-block; vertical-align: top; margin-left: 10px;border-radius: 10px;font-size: 18px;}
#Reply-close-btn {position: absolute;top: 10px;right: 20px;cursor: pointer;font-size: 24px;font-weight: bold;}

/* 平板设备响应式样式 */
@media screen and (min-width: 768px) and (max-width: 1368px) {
  
    /* 调整放大图片的样式 */
    .overlay img {
        max-width: 50%;
        max-height: 50%;
    }
    .overlay .nav-arrow.left {left: 20%;}
    .overlay .nav-arrow.right {right: 20%;}

    .Products_List ul li .addCart {
        display: block;
    }
    .addChannel {  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
    .Products_ShopingCart ul {overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch; }
}