@charset "utf-8";

:root {
  --background-color: #ce49ab;

}

body,html { margin:0; padding:0; height:100%; }
@media screen and (min-width: 768px) {
html{overflow-y:scroll;}
}

a { text-decoration:none;}
* { font-family:"微軟正黑體", Tahoma, simhei; margin:0; padding:0;}
img {border:0;}
input,textarea { font-size:100%;}

.WF{width: 100%; max-width: 1366px; margin: auto;}

.fa::before{ margin-right: 5px; color:var(--background-color); }

.layer {position: relative; width: 100%; height: 100%; left:0; -webkit-transition: left 300ms; transition: left 300ms;}
.layer.open{left: -200px;}

/*選單蓋背景*/
.infolayer {
position: fixed;
display:inline-block;
height: 100%;
width: 0;
right: 0;
top:0;
background: rgba(0, 0, 0, 0.66);
z-index:2;
-webkit-transition: background 300ms; transition: background 300ms;
}
.infolayer.open{background: rgba(0, 0, 0, 0.66); width:100%;}

/*上方浮動選單區-主選單*/
.fixedmenu{ position:relative; background-color:#999; margin:auto;  z-index: 4;}
.fixedmenu .menu { position:fixed; display:inline-table;; z-index:3; margin-left:310px;}
.fixedmenu .menu a { display:inline-block; padding: 0 25px 0 20px; color: #ffffff; line-height: 56px; font-size: 110%; border-left: 1px #ffffff solid;}
.fixedmenu .menu a:last-child{border-right: 1px #ffffff solid;}

/*上方浮動選單區*/
.fixedtop{position: fixed; text-align: center; width: 100%; left:0;z-index: 3; }
.fixedtop .topaF{background:rgba(0,0,0,0.85); height: 56px; margin-bottom: 1px;}
.fixedtop .topbF{ background: var(--background-color);; margin-bottom: 1px;}  /****var(--background-color)***/
@media screen and (max-width: 1366px) {
.fixedtop .topaF{height: 50px;}
}

/*LOGO主選單會員*/
.fixedtop .topa{position: relative; box-sizing: border-box; padding: 0 1%;}
.fixedtop .logo{ position: absolute; font-weight:300; left: 1%; display: inline-table; font-size: 230%; line-height: 56px; color: #ffffff;}
.fixedtop .logo .s{color:  var(--background-color);; margin-left: 5px;}
.fixedtop .meberbtn { position: absolute; height: 56px; right: 1%; display:block;}
.fixedtop .meberbtn a { display: inline-table; margin-top: 6px; padding: 10px 20px; border-radius: 25px; font-size: 110%; background-color: var(--background-color); color: #ffffff;}
.fixedtop .meberbtn .fa::before{ color:#ffffff; }
.fixedtop .meberbtn .msgY { top:20%;position:absolute; display:inline-table; font-size:50%; color:#ffffff; width:20px; height:20px; line-height:20px; background-color:#F00; border-radius:50%;right:-5px;-webkit-animation: bounceS 1.2s infinite ease-in-out; animation: bounceS 1.2s infinite ease-in-out}
@-webkit-keyframes bounceS {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
40% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
60% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
}
@keyframes bounceS {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0px);
transform: translateY(0px);
}
40% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
}
60% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
}
@media screen and (max-width: 1366px) {
.fixedtop .logo{ font-size: 180%; line-height: 50px; color: #ffffff;}
.fixedmenu .menu { margin-left: 220px;}
.fixedmenu .menu a { padding: 0 15px 0 10px; line-height: 50px; font-size: 100%; }
.fixedtop .meberbtn {height: 50px;}
.fixedtop .meberbtn a { margin-top: 8px; padding: 7px 10px; border-radius: 25px; font-size: 100%;  background-color:  var(--background-color);; color: #ffffff;}
.fixedtop .meberbtn .msgY { width:15px; height:15px; line-height:15px;}
}
@media screen and (max-width: 920px) {
.layer.open .fixedtop {left:0px;}
.fixedtop .logo{left: 2%;}
.fixedtop .topa{height:53px;  border-bottom: 3px var(--background-color) solid;}
.fixedtop .meberbtn { display:none;}
.fixedmenu { position:fixed;  z-index:3; width:200px; height:calc(100vh - 54px); background-color:#ffffff; top:54px; right:-200px; overflow-y: auto; overflow-x: hidden; -webkit-transition: right 300ms; transition: right 300ms;}
.layer.open .fixedmenu{display:block; width:200px; right:0;box-shadow: 0px 0px 9px #000;}
.fixedmenu .menu{position:relative;display:block; margin-left:auto; margin-bottom:10px; background-color: #000000; width: 100%; left: auto;  text-align: left;}
.fixedmenu .menu a{display: block; box-sizing: border-box; border: 0; padding: 0; width: 100%; padding-left: 15px;line-height: 47px; border-bottom: 1px #ffffff solid;}
.fixedmenu .menu a::before {font-size:130%; line-height:100%;}
.fixedmenu .menu a:last-child{border-right: 0;}
.fixedtop .meberbtn a {  margin-top: 13px; padding: 0 0 0 10px; border-radius: 0;; font-size: 150%;  background:none; color: #ffffff;}
.fixedtop .meberbtn .msgY {  right:32px;-webkit-animation:none; animation: none;}
}

/*會員區域*/
.fixedtop .memberA{position: absolute;display: none; direction: rtl; text-align: left; box-sizing: border-box; padding: 1.5% 2% 2%; background: rgba(255,255,255,1); left: 50%; transform: translateX(-50%); z-index: -1; margin-top:41px;box-shadow: 0px 9px 9px -9px #000;}
.fixedtop .memberA .ltr{ display:inline-table; width:60%;}
.fixedtop .memberA .title{font-size: 160%;}
.fixedtop .memberA .memberM{display: inline-table;direction: ltr; box-sizing: border-box; width: 38%;}
.fixedtop .memberA .memberR{display: inline-table;direction: ltr; box-sizing: border-box; padding-left: 3%; width: 49%; border-left: 1px #d1d1d1 solid;}
.fixedtop .memberA .memberL{display: inline-table;direction: ltr; box-sizing: border-box; padding-left: 3%; width: 50%; border-left: 1px #d1d1d1 solid;}

.fixedtop .memberA .memberM a{ position:relative; display: inline-table; padding: 5px 15px; background-color: #aaaaaa; color: #ffffff; font-size: 110%;  margin-right: 10px; margin-top: 5px;}
.fixedtop .memberA .memberM a .msgY { position:absolute; display:inline-table; font-size:70%; text-align:center; color:#ffffff; width:20px; height:20px; line-height:20px; background-color:#F00; z-index:1; border-radius:50%; margin-top:0px; right:-8px;-webkit-animation: bounceS 1.2s infinite ease-in-out; animation: bounceS 1.2s infinite ease-in-out}
.fixedtop .memberA .memberM a:last-child{margin-right: 0;}

.fixedtop .memberA .memberR a{ display: inline-table; padding: 5px 15px; background-color: var(--background-color); color: #ffffff; font-size: 110%;  margin-right: 10px; margin-top: 5px;}

.fixedtop .memberA .memberL .title .s{font-size: 60%;}
.fixedtop .memberA .memberL input{ display: block; box-sizing: border-box; padding: 4px 7px; font-size: 110%; border-radius: 8px; border: 0 ; background-color: #DDDDDD; margin-top: 5px; margin-bottom: 9px;  }
.fixedtop .memberA .memberL input.W150{width: 65%;}
.fixedtop .memberA .memberL input.W75{width: 45%;}
.fixedtop .memberA .memberL input:focus{outline:none}
.fixedtop .memberA .memberL input::placeholder{color: #999999;}
.fixedtop .memberA .memberL a{ display: inline-table; padding: 5px 15px; background-color: var(--background-color); color: #ffffff; font-size: 110%; margin-top: 0px;}

.fixedtop .memberA .close{position: absolute; right:10px; top: 10px; font-size: 200%;line-height: 35px; text-align: center; display: inline-table; width: 35px; height: 35px; background-color: #DD6264; color: #ffffff;}

/*會員區域-登入狀態*/
.fixedtop .memberA .login {width: 49%;}
.fixedtop .memberA .memberM.login a{ background-color: var(--background-color); padding: 7px 20px; }
.fixedtop .memberA .memberL.login .title{color: var(--background-color);}
.fixedtop .memberA .memberL.login a{background-color: #aaaaaa; margin-top: 5px;}
.fixedtop .memberA .memberL.login a.fa {padding: 0; background:none; margin: auto; margin-left: 5px;}
.fixedtop .memberA .memberL.login a.fa::before { font-size: 120%; color: #BD3F41;}
.fixedtop .memberA .memberL.login a.newmes{ font-size: 100%;  padding: 0; color: #BD3F41; background: none; margin-top: auto;}
.fixedtop .memberA .memberL.login a.newmes::before{margin-right: 3px;}
.fixedtop .memberA .memberL.login .fg::before{margin-right: 3px;}
.fixedtop .memberA .memberL.login .fg{color: #999999;}
.fixedtop .memberA .memberL.login .w{line-height: 180%; font-size: 110%;}

@media screen and (max-width: 1366px) {
.fixedtop .memberA{font-size: 85%; margin-top:36px; }
}

@media screen and (max-width: 920px) {
.fixedtop .memberA{direction: ltr; padding: 8% 3% 4%; margin-top:2px; font-size: 80%; }
.fixedtop .memberA .ltr{ display:inline-table; width:100%;direction: rtl;}
.fixedtop .memberA .close { font-size: 180%;line-height: 30px; width:30px; height:30px;}
.fixedtop .memberA .memberM{width: 100%; padding-top: 2%; margin-top: 3%; border-top: 1px #d1d1d1 solid;}
.fixedtop .memberA .memberM a{margin-right: 5px;}
.fixedtop .memberA .memberL{width: 51%; }
.fixedtop .memberA .memberL input {font-size: 120%; padding: 6px 12px;}
.fixedtop .memberA .memberL input.W150{width: 90%;}
.fixedtop .memberA .memberL input.W75{width: 60%;}
.fixedtop .memberA .memberR{width: 48%;border-left: 0; padding-left: 0;}
/*會員區域-登入狀態*/
.fixedtop .memberA .memberL.login{ width: 80%; border-left: 1px #d1d1d1 solid;padding-left: 4%; margin-left: 15%;}
.fixedtop .memberA .memberM.login a{ padding: 5px 15px; }

}

/*下方浮動選單區-標籤搜尋*/
.fixedmenu .taglist { position:fixed; display:inline-table; z-index:2; margin-top:57px; margin-left:1%; }
.fixedmenu .taglist a{color: #ffffff; padding: 0px; line-height: 40px;}
.fixedmenu .taglist a::after {content: "●"; color: #ea6f6f; font-size: 100%; padding-left: 11px; padding-right: 8px; cursor: text;}
@media screen and (min-width: 920px) {
.fixedmenu .taglist a::before{content: ""; }
}
.fixedmenu .taglist a:first-child{ padding-left: 0px;}
.fixedmenu .taglist a:last-child::after {content: "";}
.fixedmenu .taglist .title{ display:none;width:80%; margin:auto; text-align:center; line-height:150%; font-weight:600; color:var(--background-color); padding-top:10px; border-bottom:1px var(--background-color) solid;}


/*下方浮動選單區*/
.fixedtop .topb{position: relative; text-align: left; box-sizing: border-box; padding: 0 1%; height: 40px;}

.fixedtop .topb .search{display: inline-table; position: absolute; right: 1%; height: 40px;}
.fixedtop .topb .search input.Skeyword{display:table-cell ;border: none; width: 140px; box-sizing: border-box; padding: 0 5px; border-bottom: 3px #ea6f6f solid; height: 40px; background: rgba(255,255,255,0.3); color: #ffffff;}
.fixedtop .topb .search input.Skeyword::placeholder{color: #ffffff;}
.fixedtop .topb .search input.Skeyword:focus{outline:none;}
.fixedtop .topb .search .Ssub {display:table-cell ; border: 0; text-align: center; box-sizing: border-box;  border-bottom: 3px #ea6f6f solid; height: 36px; width: 40px; background: rgba(255,255,255,0.3); color: #ffffff;}
.fixedtop .topb .search .Ssub::before {line-height: 35px; font-size: 140%; }




@media screen and (max-width: 1366px) {
.fixedtop .topb{height: 35px;}
.fixedmenu .taglist {margin-top:51px; }
.fixedmenu .taglist a{font-size: 90%; line-height: 35px;}
.fixedmenu .taglist a::after { padding-left: 6px; padding-right: 4px;}
.fixedtop .topb .search{ height: 35px; font-size: 90%;}
.fixedtop .topb .search input.Skeyword{width: 90px; height: 35px;}
.fixedtop .topb .search .Ssub {height: 31px; width: 35px; }
.fixedtop .topb .search .Ssub::before {line-height: 30px; font-size: 120%; }
}
@media screen and (max-width: 920px) {
.fixedtop>.topb{display: none;}
.fixedtop>.topbF{height: 0;}
.fixedtop .topbF>.WF{height: 0;}
.fixedtop .topb>.search{display: none;}
.fixedmenu .taglist{position:relative; box-sizing: border-box; width: 200px; background-color: var(--background-color);margin-top: auto;margin-left: auto; padding-bottom:80px}
.layer.open .fixedmenu .taglist{ }
.fixedmenu .taglist a{  display:inline-table; box-sizing: border-box; padding:0; text-align: left; padding-left:15px; width: 100%; font-size: 95%; color: #ffffff; background-color: var(--background-color); border-left:0; margin-top:4px; margin:auto; border-bottom:1px #ffffff solid; line-height: 240%; margin-bottom:1px;}
.fixedmenu .taglist a::before{  position:absolute; right:10px; }
.fixedmenu .taglist a::after{content: ""; padding-left:0; padding-right:0;}
.fixedmenu .taglist a:first-child{ padding-left: 15px;}
}
/*標籤搜尋區域*/
.fixedtop .searchA{position: absolute; display: none; text-align: left; box-sizing: border-box; padding: 1.5% 2% 2%; background: rgba(255,255,255,1); left: 50%; transform: translateX(-50%); z-index: 2;box-shadow: 0px 9px 9px -9px #000;}
.fixedtop .searchA input.MSkeyword{display:none ;box-sizing: border-box; padding: 6px 12px; font-size: 120%; width: 60%; border-radius:8px 0 0 8px; border: 0 ; background-color: #DDDDDD; margin-top: 5px; margin-bottom: 13px;}
.fixedtop .searchA input.MSkeyword::placeholder{color: #999999;}
.fixedtop .searchA input.MSkeyword:focus{outline:none}
.fixedtop .searchA .Ssub {display:none ; border: 0; text-align: center; box-sizing: border-box; border-radius:0 8px 8px 0; color: #ffffff; font-size: 120%; background-color:var(--background-color); padding: 6px 12px; }
.fixedtop .searchA .title{font-size: 160%; margin-bottom: 1%;}
.fixedtop .searchA .close{position: absolute; right:10px; top: 10px; font-size: 200%;line-height: 35px; text-align: center; display: inline-table; width: 35px; height: 35px; background-color: #DD6264; color: #ffffff;}
.fixedtop .searchA .searchW{padding: 0 0 2% 0; margin-bottom: 2%; border-bottom: 1px #d1d1d1 solid;}
.fixedtop .searchA .searchW a{margin-right: 15px; font-size: 100%; color: #000000;white-space:nowrap;}
.fixedtop .searchA .searchW a:last-child{margin-right: auto;}
.fixedtop .searchA .searchW a::before{ font-size: 110%;color: var(--background-color); margin-right: 5px;}
.fixedtop .searchA .searchT{}
.Vlist .searchT{margin-top: 1%;}
.searchT a{display: inline-table; width: 15.8%; font-size: 110%;color: #000000; margin:auto 5px 15px auto;white-space:nowrap; border-bottom: 1px #d1d1d1 solid; }
.searchT a::before{ float: left; color: #ea6f6f; background-color: #fff2f2; font-size: 150%; margin-right: 5px; width:40px; height: 40px; text-align: center; line-height: 40px; border: 1px #d1d1d1 solid; border-bottom: 0; }
.searchT a:hover{ color:#ea6f6f; }
.searchT a .s{display: block; font-size: 75%;}
.searchT a .s::before{ margin-right: 3px;}
@media screen and (max-width: 1366px) {
.fixedtop .searchA{font-size: 85%; }
.fixedtop .searchA .searchW{padding: 0 0 1% 0; margin-bottom: 1%; }
.searchT a::before{ width:37px; height: 37px; line-height: 37px; }
.searchT a{ font-size: 100%; margin-right: 4px;}
.searchT a .s{display: block; font-size: 70%;}
}

@media screen and (max-width: 920px) {
.fixedtop .searchA .title{font-size: 150%;}
.fixedtop .searchA{ padding: 8% 3% 4%; margin-top:2px; }
.fixedtop .searchA .close { font-size: 180%;line-height: 30px; width:30px; height:30px;}
.fixedtop .searchA .searchW{padding: 3% 0 3% 0; margin-bottom: 3%; border-top: 1px #d1d1d1 solid; }
.fixedtop .searchA .searchW a{font-size: 105%; line-height: 160%;}
.Vlist .searchT{margin-top: 2%;}
.searchT a{font-size: 90%;width: 23.5%; margin:auto 4px 7px auto;}
.searchT a::before{ font-size: 150%; width:35px; height: 35px; line-height: 35px; }
.searchT a .s{display: block; font-size: 65%;}
.fixedtop .searchA input.MSkeyword{display: inline-table;}
.fixedtop .searchA .Ssub {display: inline-table;}
}

@media screen and (max-width: 540px) {
.searchT a{width: 31.1%; margin:auto 1px 5px auto; line-height: 17px;}
.searchT a::before{ font-size: 140%; width:32px; height: 32px; line-height: 32px; }
.fixedtop .searchA .searchT a{ font-size:100%}
}

/*Mobile Menu*/
.fixedtop .Mobile { display:none;}
#MsearchO.open::before{color: var(--background-color); }   
#MmenuO.open::before{color: var(--background-color); }
#MmemberO.open::before{color: var(--background-color); }

@media screen and (max-width: 920px) {
.fixedtop .Mobile {  display:block; margin-right: 2%;}
}



/*內容區*/
.main{position: relative; text-align: center; box-sizing: border-box; padding-top: 98px; min-height:calc(100vh - 110px); }
@media screen and (max-width: 1366px) {
.main{padding-top: 87px;}
}
@media screen and (max-width: 920px) {
.main{padding-top: 54px;}
}


/*首頁大圖*/
.ban{position: relative; width: 100%; background: center no-repeat; height: 220px;outline:none;}
.ban .slogin { position: absolute; left: 60%; top:50%; transform: translateY(-50%);width: auto; }
.ban .Mslogin { display: none; }
@media screen and (max-width: 1366px) {
.ban{ height: 190px;background-size:100%;}
.ban .slogin { left: auto; right: 0%; }
}
@media screen and (max-width: 920px) {
.ban{ background: center no-repeat;background-size: 100%; height: 220px;}
.ban .slogin{ display: none;}
.ban .Mslogin { position: absolute; right:0; bottom: 5%; display:inline-block; width:70%; max-width: 382px; height: auto;  }
}

/*內容區-影片列表*/
.Vlist{ position: relative; overflow: hidden; box-sizing: border-box; margin: 1.5% auto 3%; text-align: left;}
.Vlist.nof{padding-top: 35px;}
.Vlist:first-of-type { margin-top: 0.5%; }
.Vlist .title{ position: relative; font-size: 270%; color: #545454; font-weight: 300;}
.Vlist:first-of-type .title { line-height: 90%;}
.Vlist .title.Lh { padding-top: 0%;}
.Vlist .title .s{ font-size: 70%; color: #cdcdcd; margin-left: 1%;}
.Vlist .title .more {position: absolute; color: #000000; font-size: 40%; font-weight:400; right: 0; bottom: 10px;}
.Vlist .title .more::before{margin-right: 5px; color: #ea6f6f;}

/*內容區-分頁列*/
.Vlist .pagemenu {overflow: hidden; text-align: right;}
.Vlist .pagemenu.Lh { text-align: right;}
.Vlist .pagemenu:last-child{margin-top: 2%;}
.Vlist .pagemenu .page {display:inline-table; margin-right: 25px;}
.Vlist .pagemenu .page a,
.Vlist .pagemenu .page span{ display: block; box-sizing: border-box; float: left; width: auto; min-width: 35px; font-size: 110%; color:#545454; line-height: 35px; height: 35px; border: 1px #cdcdcd solid; border-right: 0; padding:0 10px;  text-align: center;}
.Vlist .pagemenu .page a:last-child,
.Vlist .pagemenu .page span:last-child{border-right: 1px #cdcdcd solid;}

.Vlist .pagemenu .calendar {display:inline-table; margin-left: 25px;}
.Vlist .pagemenu .calendar a,
.Vlist .pagemenu .calendar span{display: block; box-sizing: border-box; float: left; width: auto; min-width: 35px; font-size: 110%; color:#545454; line-height: 35px; height: 35px; border: 1px #cdcdcd solid; border-right: 0; padding:0 10px;  text-align: center;}
.Vlist .pagemenu .calendar a:last-child,
.Vlist .pagemenu .calendar span:last-child{border-right: 1px #cdcdcd solid;}

.Vlist .pagemenu .filter {display:inline-table;  }
.Vlist .pagemenu .filter a,
.Vlist .pagemenu .filter span{display: block; box-sizing: border-box; float: left; width: auto; min-width: 35px; font-size: 110%; color:#545454; line-height: 35px; height: 35px; border: 1px #cdcdcd solid; border-right: 0; padding:0 10px;  text-align: center;}
.Vlist .pagemenu .filter a:last-child,
.Vlist .pagemenu .filter span:last-child{border-right: 1px #cdcdcd solid;}

.Vlist .pagemenu .page a:hover,
.Vlist .pagemenu .page a.hover,
.Vlist .pagemenu .calendar a:hover,
.Vlist .pagemenu .calendar a.hover,
.Vlist .pagemenu .filter a:hover,
.Vlist .pagemenu .filter a.hover{ border-bottom: 2px var(--background-color) solid; background-color: #f3f3f3; color: var(--background-color);}

@media screen and (max-width: 1366px) {
.Vlist{ margin: 1% auto 3%; padding-left: 1.5%; padding-right: 1.5%;}
.Vlist .title{ font-size: 220%;}
.Vlist .title .more { font-size: 50%; bottom: 5px;}
.Vlist .pagemenu .page {font-size: 90%;}
.Vlist .pagemenu .filter {font-size: 90%;}
.Vlist .pagemenu .calendar {font-size: 90%;}
}
@media screen and (max-width: 920px) {
.Vlist{ margin:auto; padding: 3.5% 1.5%;}
.Vlist:first-of-type { padding-top: 0; }
.Vlist.nof:first-of-type{padding-top: 27px;}
.Vlist:nth-child(2n){background-color:#f3f3f3;}
.Vlist .title{ font-size: 200%;}
.Vlist .title.Lh { font-size:170%;}
.Vlist:first-of-type .title { margin-top: 2%;}
.Vlist .pagemenu {overflow: hidden; margin-top: 1.5%; margin-bottom: auto;; }
.Vlist .pagemenu.Lh { }
.Vlist .pagemenu .page { padding-right: 0; font-size: 85%; margin-right: 0px; margin-bottom: 5px; }
.Vlist .pagemenu .page a,
.Vlist .pagemenu .page span{ min-width: 30px; font-size: 110%;line-height: 30px; height: 30px; padding:0 8px; }
.Vlist .pagemenu .filter {font-size: 80%; margin-left: 10px; margin-right: 0px;}
.Vlist .pagemenu .filter a,
.Vlist .pagemenu .filter span{ min-width: 27px; font-size: 100%; line-height: 27px; height: 27px; padding:0 10px;}
.Vlist .pagemenu .calendar {font-size: 80%; margin-left: 10px; }
.Vlist .pagemenu .calendar a,
.Vlist .pagemenu .calendar span{ min-width: 27px; font-size: 100%; line-height: 27px; height: 27px; padding:0 10px;}
}
@media screen and (max-width: 540px) {
.Vlist.nof:first-of-type{padding-top: 0; margin-top: 5%;}
.Vlist.nof>.title{text-align: center; }
.Vlist .pagemenu .page { float: right; margin-left:10px; }
}

/*內容區-影片列表*/
.Vlist .listA{ overflow: hidden; width: 100%;}
.Vlist .listA a{ display: block; position: relative; overflow: hidden; color: #000000; width: 24.7%; box-sizing: border-box; float: left;  margin-top: 0.4%; margin-right: 0.4%; padding-bottom: 0.4%; border-bottom: 1px #cdcdcd solid;}
.Vlist .listA a:hover{border-bottom: 1px #ea6f6f solid;}
.Vlist .listA a:nth-child(4n){margin-right: 0;}
.Vlist .listA a img {width:100%; height: 253.3px; margin-bottom: 0.8%; }
.Vlist .listA a .ds{position: absolute; display: inline-table; box-sizing: border-box; padding: 3px 20px; width: 100%;  background: rgba(0,0,0,0.3); text-align: center; color: #ffffff; font-size: 70%; top: 253.3px; left: 0px;transform: translate(0,-100%);}
.Vlist .listA a .ds span{display: table-cell; opacity: 0.9;}
.Vlist .listA a .ds span:last-child{margin-right: auto;}
.Vlist .listA a .ds span::before{ margin-right: 3px;}

.Vlist .listA a .name{ position:relative;box-sizing: border-box; display:table-cell; padding-left: 2%;  height: 45px; max-height:45px; vertical-align:middle;}
.Vlist .listA a .name span{ display:block; width:100%;line-height: 22px; max-height:43px; overflow:hidden;}
.Vlist .listA a .name span::before{font-size:120%; margin-right: 3px;color: #ea6f6f; }
.Vlist .listA a:hover .name{color: #ea6f6f }


.Vlist .listA a .gs{box-sizing: border-box; display:table-cell; font-size: 70%;padding-top: 7px; height: 45px; width: 10%; text-align: center;}
.Vlist .listA a .gs::before{ display:inline-table; width:100%; color: #69cd69;  font-size: 170%;}

.Vlist .listA a .vs{box-sizing: border-box; display:table-cell; font-size: 70%;padding-top: 7px; height: 45px; width: 10%; text-align: center;}
.Vlist .listA a .vs::before{ display:inline-table; width:100%; color: var(--background-color); font-size: 170%;}


/*內容區-影片直式列表*/
.Vlist .listB{ overflow: hidden; width: 100%;}
.Vlist .listB a{ display: block; position: relative; overflow: hidden; color: #000000; width: 19%; box-sizing: border-box; float: left;  margin-top: 0.8%; margin-right: 1%; border-bottom: 1px #cdcdcd solid;}
.Vlist .listB a:hover{border-bottom: 1px #ff0000 solid; background-color:#F5F5F5;}
.Vlist .listB a:nth-child(5n){margin-right: 0;}
.Vlist .listB a .img {position: relative; width:100%; height: 250px; margin-bottom: 0.8%; text-align: center; overflow: hidden; }
.Vlist .listB a .img img{ height: 100%; position: absolute; left:50%;top: 50%; transform: translate(-50%,-50%);-webkit-transition: height 100ms; transition: height 100ms;}
.Vlist .listB a:hover .img img{height: 105%;}
.Vlist .listB a .ds{ display: inline-table; box-sizing: border-box; padding: 5px 5px 0px; width: 100%; text-align: center; color: #bd3f41; font-size: 70%;}
.Vlist .listB a .ds span{display: table-cell; opacity: 0.9;}
.Vlist .listB a .ds span:last-child{margin-right: auto;}
.Vlist .listB a .ds span::before{ margin-right: 3px;}

.Vlist .listB a .name{ position:relative;box-sizing: border-box; display:table-cell; padding-left: 2%; font-size: 90%;  height: 30px; max-height:30px; vertical-align:middle;}
.Vlist .listB a .name span{ display:block; width:100%;line-height: 15px; max-height:30px; overflow:hidden;}
.Vlist .listB a .name span::before{font-size:120%; margin-right: 3px;color: #ff0000; }
.Vlist .listB a:hover .name{color: #ff0000; }


.Vlist .listB a .gs{box-sizing: border-box; display:table-cell; font-size: 70%;padding-top: 3px; height: 30px; padding-left: 5px; width: 10%;line-height: 140%; text-align: center;white-space: nowrap;}
.Vlist .listB a .gs i{ display:block; width:100%; color: #69cd69;  font-size: 120%;}

.Vlist .listB a .vs{box-sizing: border-box; display:table-cell; font-size: 70%;padding-top: 3px; height: 30px; padding-left: 5px; width: 10%; line-height: 140%; text-align: center; white-space: nowrap;}
.Vlist .listB a .vs i{ display:block; width:100%; color: #ea6f6f; font-size: 120%;}



@media screen and (max-width: 1366px) {
.Vlist .listA{ font-size: 95%;}
.Vlist .listA a img{height: 17.745vw;}
.Vlist .listA a .ds{top: 17.745vw; padding: 3px 10px;}

.Vlist .listB{ margin: 1% auto 2%; }
.Vlist .listB.girl a .pic { height: 150px;}
.Vlist .listB a .gs{padding-top: 3px; font-size: 70%; height: 30px; line-height: 140%; text-align: center;}
.Vlist .listB a .vs{padding-top: 3px; font-size: 70%; height: 30px; line-height: 140%; text-align: center;}
.Vlist .listB a .img {height:240px;}
.Vlist .listB a .ds span:first-child::before{display:inline-table; }
.Vlist .listB a .ds span::before{display:inline-table; margin-right: 5px;}
.Vlist .listB a .ds span{display: block; text-align: left;}
}



@media screen and (max-width: 920px) {
.Vlist .listA{ margin: 1% auto 2%; font-size: 85%;}
.Vlist .listA a{ display: block; position: relative; overflow: hidden; color: #000000; width: 32.93%; box-sizing: border-box; float: left;  margin-top: 0.4%; margin-right: 0.4%; padding-bottom: 0.4%; border-bottom: 1px #cdcdcd solid;}
.Vlist .listA a img {height:23.48vw; margin-bottom: 0%;}
.Vlist .listA a .ds{top: 23.48vw; padding: 3px 5px; }
.Vlist .listA a:nth-child(4n){margin-right: 0.4%;}
.Vlist .listA a:nth-child(3n){margin-right: 0;}
.Vlist .listA a .name {height: 40px; max-height:40px;  line-height: 20px; vertical-align: middle;}
.Vlist .listA a .name span{ line-height: 20px; max-height:40px; overflow:hidden;}

.Vlist .listA a .gs{padding-top: 5px; font-size: 80%; height: 40px; width: 12%;text-align: center;}
.Vlist .listA a .vs{padding-top: 5px; font-size: 80%; height: 40px; width: 12%;text-align: center;}

.Vlist .listB{font-size: 85%;}
.Vlist .listB a{ display: block; position: relative; overflow: hidden; color: #000000; width: 24.4%; box-sizing: border-box; float: left;  margin-top: 0.8%; margin-right: 0.8%; padding-bottom: 0.4%; border-bottom: 1px #cdcdcd solid;}
.Vlist .listB a .img {height:240px; margin-bottom: 0%;}
.Vlist .listB a:nth-child(5n){margin-right: 0.8%;}
.Vlist .listB a:nth-child(4n){margin-right: 0;}
}

@media screen and (max-width: 540px) {
.Vlist .listA{ margin: 1% auto 2%; font-size: 85%;}
.Vlist .listA a{ display: block; position: relative; overflow: hidden; color: #000000; width: 49.5%; box-sizing: border-box; float: left;  margin-top: 1%; margin-right: 1%; margin-bottom:1%; padding-bottom: 0.6%; border-bottom: 1px #cdcdcd solid; }
.Vlist .listA a img {height:34.79vw; margin-bottom: 0%;}
.Vlist .listA a .ds{top: 34.79vw; }
.Vlist .listA a:nth-child(3n){margin-right: 1%;}
.Vlist .listA a:nth-child(2n){margin-right: 0;}
.Vlist .listA a .name {box-sizing: border-box; display:table-cell; padding-left: 2%;  height: 34px;  line-height: 17px; vertical-align: middle;}
.Vlist .listA a .name span{ display:block; width:100%;line-height: 16px; max-height:32px; overflow:hidden;font-size:95%;}
.Vlist .listA a .name span::before{ margin-right: 2px; color: #ea6f6f;font-size: 120%; line-height: 17px;}
.Vlist .listA a .gs{box-sizing: border-box; display:table-cell;padding-top: 5px; font-size: 70%; height: 34px; width: 14%;text-align: center;}
.Vlist .listA a .vs{box-sizing: border-box; display:table-cell;padding-top: 5px; font-size: 70%; height: 34px; width: 14%;text-align: center;}

.Vlist .listB a{ display: block; position: relative; overflow: hidden; color: #000000; width: 49%; box-sizing: border-box; float: left;  margin-top: 1%; margin-right: 2%; margin-bottom:1%; padding-bottom: 0.6%; border-bottom: 1px #cdcdcd solid; }
.Vlist .listB a .img {height:250px; margin-bottom: 0%;}
.Vlist .listB a:hover .img img{height: 100%;}
.Vlist .listB a .ds{ padding: 3px 0 0; }
.Vlist .listB a .ds span{display:table-cell; text-align:center;}
.Vlist .listB a:nth-child(3n){margin-right: 2%;}
.Vlist .listB a:nth-child(2n){margin-right: 0;}
.Vlist .listB a .name {box-sizing: border-box; display:table-cell; padding-left: 2%;  height: 34px;  line-height: 17px; vertical-align: middle;}
.Vlist .listB a .name span{ display:block; width:100%;line-height: 16px; max-height:32px; overflow:hidden;font-size:95%;}
.Vlist .listB a .name span::before{ margin-right: 2px; color: #ea6f6f;font-size: 120%; line-height: 17px;}
.Vlist .listB a .gs{box-sizing: border-box; display:table-cell;padding-top: 5px; font-size: 70%; height: 34px; width: 14%;line-height: 130%;text-align: center;}
.Vlist .listB a .vs{box-sizing: border-box; display:table-cell;padding-top: 5px; font-size: 70%; height: 34px; width: 14%;line-height: 130%;text-align: center;}

}

.linkc{ max-width: 1366px; height: 3px; background-color: #74b9d7; box-sizing: border-box; margin: auto ;}
@media screen and (max-width: 1366px) {
.linkc{width: 97%;}
}

/*內容區-影片頁*/
.Vview{ padding: 0.8% 0 3%;}
.Vview>.name{ box-sizing: border-box;font-size: 210%; color: #246f91; line-height: 110%;}
.Vview .intro{ box-sizing: border-box;font-size: 100%; color: #333333; line-height: 130%; margin-top: 1.5%;}
.Vview .playA{position: relative; background-color: #000000; margin-top: 0.8%;}
/*.Vview .playA .video{position: relative; display:inline-table; width: 800px; height: 360px; background: center center; background-size: cover;}//*/
.Vview .playA .video{position: relative; display:inline-table; width: 800px; height: 533px; background: center center no-repeat; background-size: auto 100%;}
.Vview .playA .playcircle{position: absolute;top:50%; left: 50%; transform: translate(-50%,-50%); display: inline-table; font-size: 800%; opacity: 0.6; color: #ffffff;}
.Vview .playA .playW{position: absolute; bottom: 23%; left: 0%; width: 100%;  }
.Vview .playA .playW a{margin: auto 5px; padding: 2px 10px; border-radius: 20px; background: rgba(255,255,255,0.6);display: inline-table; font-size: 100%; color: #ff0000; text-shadow: 1px 1px 0 #ffffff;}

.Vview .playleft,
.Vview .playright{position: fixed;display: inline-table; box-sizing: border-box; color: #ffffff; text-align: right;  bottom: 1%; z-index: 1; background:rgba(0,0,0,0.6); border-radius: 15px; padding: 5px 10px; max-width: 49%;}
.Vview .playleft.open,
.Vview .playright.open{ bottom: 73px;}

.Vview .playleft span::before{margin-right: 10px; }
.Vview .playleft{text-align: left;}
.Vview .playright span::before{margin-left: 10px; float: right;}
.Vview .playleft{ left: 0%; border-radius:0 10px 10px 0;}
.Vview .playright{ right: 0%; border-radius: 10px 0 0 10px;}
.Vview .playleft span,
.Vview .playright span{ display: block; font-size: 110%; overflow: hidden; color:#ffc7c7; line-height: 150%; text-shadow: 1px 1px 0px #000000; }
.Vview .playleft span.name,
.Vview .playright span.name{ display:none;font-size: 100%; line-height: 100%; text-align: left;}
.Vview .playleft span.name.open,
.Vview .playright span.name.open{ display: block; color: #ffffff;}

.Vview .playleft:hover span.name,
.Vview .playright:hover span.name{ display: block; color: #ffffff;}



.Vview .details{position: relative; box-sizing: border-box; font-size:120%; text-align: left; line-height: 110%; margin-top: 0.8%;color: #666666;}
.Vview .details a{color: #9b9b9b;}
.Vview .details div::before,
.Vview .details a::before,
.Vview .details span::before{ margin-right: 4px;}


.Vview .details .num {display: inline-table; float: left; margin-right: 15px;}

.Vview .details .playpoint{display: inline-table; float: left;}
.Vview .details .playpoint a,
.Vview .details .playpoint span{display: inline-table;box-sizing: border-box; border: 1px #d0d0d0 solid; color: #666666 ; text-align: center;  float: left; min-width: 35px; height: 34px; line-height: 34px;}
.Vview .details .playpoint span{padding: 0 8px;}
.Vview .details .playpoint a{ border-left: 0;}
.Vview .details .playpoint a:last-child{margin-right: 15px;}
.Vview .details .playpoint a.hover,
.Vview .details .playpoint a:hover{background-color: #83bcd6; color: #ffffff;}

.Vview .details a.type{ border-left: 1px #d0d0d0 solid; margin-right: 15px; padding: 0 8px;}

.Vview .details .count{display: inline-table;box-sizing: border-box; margin-right: 15px;  float: left; padding: 0 8px; min-width: 35px; height: 35px; line-height: 34px; border: 1px #d0d0d0 solid;}

.Vview .details .score{ display: inline-table; float: left;width: auto; padding: 0 0 0 1px; margin-right: 15px;}
.Vview .details .score a,
.Vview .details .score span{ display: inline-table; box-sizing: border-box; text-align: center; float: left; padding: 0 9px; min-width: 35px; height: 35px; line-height: 34px; border: 1px #d0d0d0 solid; margin-left: -1px;}


.Vview .details .score a::before{margin-right: auto; font-size: 130%;}
.Vview .details .score span.g1{color:#e93d3d;}
.Vview .details .score span.g2{color:#008C00;}
.Vview .details .score a.g.hover,
.Vview .details .score a.g:hover{color: #e93d3d;}
.Vview .details .score a.f.hover,
.Vview .details .score a.f:hover{color: #008C00;}

.Vview .details .favorites{ display: inline-table; float: left; margin-right: 15px; box-sizing: border-box; border: 1px #d0d0d0 solid; padding: 0 8px; min-width: 35px; height: 35px; line-height: 34px;}
.Vview .details .favorites:hover,
.Vview .details .favorites.hover{color: #666666;}
.Vview .details .favorites.hover::before,
.Vview .details .favorites:hover::before{color:#e93d3d;}

.Vview .details .detailslist{display: inline-table;}
.Vview .details .detailslist span{ display: inline-table;  box-sizing: border-box; float: left; padding: 0 8px; min-width: 35px; height: 35px; line-height: 34px; border: 1px #d0d0d0 solid; border-right: 0;}
.Vview .details .detailslist span:last-child{border-right: 1px #d0d0d0 solid;}

.Vview .details .actorlist{margin-top: 1.5%;}
.Vview .details .actorlist,
.Vview .details .tagslist{display:block; width: 100%; font-size: 80%;  overflow: hidden; box-sizing: border-box; padding-left: 1px; }
.Vview .details .actorlist span,
.Vview .details .actorlist a,
.Vview .details .tagslist span,
.Vview .details .tagslist a{display: inline-table;  box-sizing: border-box; float: left; padding: 0 8px; margin-bottom: 0.8%; min-width: 35px; height: 35px; line-height: 34px; border: 1px #d0d0d0 solid; }
.Vview .details .actorlist a,
.Vview .details .tagslist a{ margin-left: -1px;}
.Vview .details .actorlist a:hover,
.Vview .details .tagslist a:hover{color: #666666;}
.Vview .details .actorlist a::before{color: #6cb66c;}
.Vview .details .tagslist a::before{ color:#ea6f6f;}


.Vview .details .pics{display:block; width: 100%; margin-top: 10px; overflow: hidden;}

.Vview .details .pics a{display:inline-table; overflow: hidden;float: left; position: relative; width: 24.7%; margin-right: 0.4%; }
.Vview .details .pics a::before{position: absolute; color: #ffffff;top: 2%; right: 2%; text-shadow: 0 0 3px #000000; }
.Vview .details .pics a:last-child{margin-right: auto;}
.Vview .details .pics a img { box-sizing: border-box;width: 100%; height: 253.3px; -webkit-transition: 200ms; transition: 200ms; }

.Vview .details .pics a.open{ position:static;  height: 253.3px;}
.Vview .details .pics a.open img{ position:fixed; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto; max-width: 1300px; max-height: 70vh; box-shadow: 0 0 5px 0px #000000; border: 7px #ffffff solid;}


@media screen and (max-width: 1366px) {
.Vview>.name{ font-size: 190%;padding: 0 1.5%;}
.Vview .intro{ font-size:95%; }
.Vview .playleft,
.Vview .playright{font-size: 95%;}
.Vview .details{padding: 0 1.5%; font-size: 105%;}
.Vview .details .pics a.open,
.Vview .details .pics a img {height: 17.745vw;}
.Vview .details .pics a.open img{max-width: 95%;}
.Vview .details .detailslist{ margin-top: 0.8%; /** width: 100%; **/ }
}
@media screen and (max-width: 920px) {
.Vview .playA .video{width: 100%; height: 300px;}
.Vview .playA .playW{bottom: 20%}
.Vview>.name{ font-size: 160%;}
.Vview .intro{ font-size: 90%;}
.Vview .details{ font-size: 95%;}
.Vview .details .num { margin-right: 8px;}
.Vview .details .score{ margin-right: 8px; }
.Vview .details .count{ margin-right: 8px; }
.Vview .details .playpoint a:last-child{margin-right: 8px;}
.Vview .details .favorites{ margin-right: 8px;}
.Vview .details a.type{  margin-right: 8px;}


.Vview .details .pics a {width: 32.93%; margin-bottom: 0.4%;}
.Vview .details .pics a:nth-child(3n){}
.Vview .details .pics a.open,
.Vview .details .pics a img { height: 23.48vw; }
}

@media screen and (max-width: 540px) {
.Vview{ padding: 3% 0 5%;}
.Vview .playA{min-height: auto; margin-top: 3%;}
.Vview .playA .video{ height: 56.25vw;  }
.Vview .playA .playcircle{ font-size: 600%; }
.Vview .playA .playW{bottom: 15%}
.Vview .playleft,
.Vview .playright{display: table-cell; vertical-align: middle; font-size: 90%; bottom: 0%; padding: 5px 8px}
.Vview .playleft.open,
.Vview .playright.open{height: 60px; }
.Vview .playleft{border-radius:0 6px 6px 0;}
.Vview .playright{border-radius: 6px 0 0 6px;}
.Vview .playleft span.name.open,
.Vview .playright span.name.open{ height: 28px; overflow: hidden; }


.Vview>.name{ font-size: 120%; text-align: left; }
.Vview .intro{ font-size: 90%; line-height:130%; text-align: left; margin-top: 5%;}

.Vview .details .playpoint{display: block; width: 100%; float: none; overflow:hidden; margin-bottom: 0.8%; }
.Vview .details .playpoint span{padding: 0 4px;}
.Vview .details a.type{padding: 0 4px;}
.Vview .details .count{padding: 0 8px;}

.Vview .details .score span,
.Vview .details .score a{padding: 0 8px;}
.Vview .details .favorites{ padding: 0 8px;}
.Vview .details .detailslist{ font-size: 90%;}
.Vview .details .detailslist span{ padding: 0 8px; height: 25px; line-height: 24px; }
.Vview .details .tagslist{ font-size: 85%;  }
.Vview .details .actorlist a{padding: 0 5px;}
.Vview .details .tagslist a{height: 28px; line-height: 27px; padding: 0 5px;}
.Vview .details .pics{ padding-top: 5%;}
.Vview .details .pics a {width: 49.5%; margin: auto; margin-bottom: 1%;}
.Vview .details .pics a.open,
.Vview .details .pics a img {height:34.79vw; }

.Vview .details .pics a:nth-child(odd){margin-right: 1%;}
}

/*內容區-購買點數*/
.Vlist .buyA{overflow: hidden;}
.Vlist .buy { position: relative; box-sizing: border-box; width: 32%; padding: 1.5%; float:left; border:1px #999999 solid; margin: 2% 2% auto auto; text-align: center;}
.Vlist .buy:nth-child(3n){margin-right: auto;}
.Vlist .buy img {width: 60%; margin: 2% auto;}
.Vlist .buy .name{font-size: 190%;}
.Vlist .buy .name .s{font-size: 55%; color: #777777;}

/*統一表格*/
.tab {display: inline-table; width: 100%; }
.tab .tr {display:table-row;font-size: 120%;}
.tab .tr:nth-child(odd){background-color: #f1f1f1;}
.tab .tr:first-child{background-color: #a4a4a4; color: #ffffff;font-size: 100%; }
.tab .tr .td{ display: table-cell; vertical-align: middle; padding: 10px;}

/*點數表格*/
.buy .tab .tr .td:nth-child(1){color: #B4272A; font-size: 120%;}
.buy .tab .tr .td:nth-child(2){font-size: 120%; color: #545454;}
.buy .tab .tr:nth-child(1) .td{color: #ffffff; font-size: 100%}
.buy .tab .tr .td:last-child{}
.buy .tab .tr .td a{ display: inline-table; background-color: #ea6f6f; color: #ffffff; border-radius: 5px; padding: 2px 15px;}

/*紀錄表格*/
.record .tab .tr {display:table-row;font-size: 100%;}
.record .tab .tr .td.r{color: #F00;}
.record .wr { display:block; margin:3% auto; font-size:150%; color:#F00;}
.record .ws { width:15%;}
.record a {color:#333; display:block; overflow:hidden;}
.record a .name{color:var(--background-color); font-size:100%; font-weight:500;}
.record a .time{font-size:90%;}
.record a img { float:left; margin-right:10px; width:150px;}
.record a.del { display: inline-table; color: #ffffff; background-color: #ea6f6f; padding: 5px 15px;}

@media screen and (max-width: 1366px) {
.Vlist .buy{font-size: 90%;}
.Vlist .buy img{ width: 50%;}
.buy .tab .tr .td{ padding: 6px;}
.buy .tab .tr .td a{ padding: 2px 10px;}
}
@media screen and (max-width: 920px) {
.Vlist .buy { width: 49%; margin: 2% 2% auto auto;}
.Vlist .buy:nth-child(3n){margin-right: 2%;}
.Vlist .buy:nth-child(2n){margin-right: auto;}
.record .tab {font-size:80%;}
.record .tab .tr {}
.record .tab .tr .td{ padding:10px 2px;}
.record .tab .tr .td.s{font-size: 75%;}
}

@media screen and (max-width: 540px) {
.Vlist .buy { width: 100%; float: inherit; margin: 3% auto 6% auto; padding: 1.5% 5%;}
.Vlist .buy .name{text-align:right; font-size: 140%; position: relative; }
.Vlist .buy img{ width: auto; height: 80%; position: absolute; left:0; top: 50%; margin: auto; transform: translateY(-50%);}
.Vlist .buy:nth-child(3n){margin-right:auto;}
.Vlist .buy:nth-child(2n){margin-right: auto;}
.Vlist .buy .tab{width: 100%;}
.buy .tab .tr .td:nth-child(1){font-size: 100%;}
.buy .tab .tr .td:nth-child(2){font-size: 100%;}
.buy .tab .tr .td{ padding: 3px;}
.buy .tab .tr .td a{ padding: 1px 6px; font-size: 90%;}
.record a img { width:120px;}
}

/*內容區-客服中心*/
.Vlist .serviceA{ width: 100%;  }
.Vlist .fromA{ overflow: hidden;padding-bottom: 2%; border-bottom: 1px #999999 solid;}
.Vlist .fromA.help{ padding-top: 2%;}
.Vlist .fromW{ box-sizing: border-box; width: 40%;  float: left; vertical-align: middle; padding: 0 3% 0 0; text-align: right;}
.Vlist .fromW b{display: block; font-size: 130%; color: #FF4C4F; margin-top: 10%;}
.Vlist .help .fromW b{color: #FF4C4F; margin-top: 0%;}
.Vlist .fromW b::before{display: block; font-size: 350%; color: var(--background-color);}

.Vlist .from{ box-sizing: border-box; border-left: 1px #999999 solid;padding: 0 0 0 3%; float: right; width: 60%; }
.Vlist .from .ftitle{font-size: 110%;}
.Vlist .from input,
.Vlist .from textarea{display: block; box-sizing: border-box; padding: 4px 7px; border-radius: 8px; border: 1px #999999 solid; background-color: #ffffff; margin-top: 5px; margin-bottom: 12px;}
.Vlist .from input:focus,
.Vlist .from textarea:focus{outline:none}
.Vlist .from input::placeholder,
.Vlist .from textarea::placeholder{color: #cccccc;}

.Vlist .from textarea{height: 80px;}
.Vlist .from a{ display: inline-table; padding: 5px 15px; background-color: var(--background-color); color: #ffffff; font-size: 110%; margin-top: 0px;}
.Vlist .from .W100{width: 100%;}
.Vlist .from .W80{width: 80%;}
.Vlist .from .W30{width: 300px;}
.Vlist .from .W60{width: 150px;}

.Vlist .serviceA .record{ padding-top: 2%;}
.Vlist .serviceA .record .title{font-size: 180%;}
.Vlist .serviceA .record .title::before{margin-right: 5px; color:var(--background-color); }
.Vlist .serviceA .record .msgA{font-size: 105%; margin-top: 30px; padding-bottom: 3%; border-bottom: 1px #999999 solid;}
.Vlist .serviceA .record .time{color: #ea6f6f;}
.Vlist .serviceA .record .to {display: block; padding-left: 50px; position: relative;}
.Vlist .serviceA .record .to::before{font-size: 230%; color: #CCCCCC; position: absolute; left: 0; display: inline-table; }
.Vlist .serviceA .record .to .time{color: #ea6f6f;}
.Vlist .serviceA .record .time::before{color: #ea6f6f; font-size: 130%; margin-right: 10px;}
.Vlist .serviceA .record .msgA .Reply{ padding-left: 10%; margin-top: 20px;}

.Vlist .serviceA .qqA{margin-top: 15px; padding-top: 15px; line-height: 120%; min-width: 55%; text-align: right;display:inline-table; border-top: 1px #999999 solid;}
.Vlist .serviceA .qqA span{ font-size: 110%; color: #FF4C4F; display: block; margin-bottom: 7px;}
.Vlist .serviceA .qqA a {margin-left: 10px; margin-bottom: 5px; display: inline-table;background-color: #6187b6; color: #ffffff; padding: 3px 7px; border-radius: 5px;}
.Vlist .serviceA .qqA img{height: 25px; vertical-align: middle;}

.Vlist .serviceA .serv{margin-top: 15px; padding-top: 15px; line-height: 120%; min-width: 100%; text-align: right;display:inline-table; border-top: 1px #999999 solid;}
.Vlist .serviceA .serv span{ font-size: 110%; color: #FF4C4F; display: block; margin-bottom: 7px;}
.Vlist .serviceA .serv a {margin-left: 10px; margin-bottom: 5px; display: inline-table;background-color: #6187b6; color: #ffffff; font-size:24px; padding: 10px 7px; border-radius: 5px;}
.Vlist .serviceA .serv img{height: 25px; vertical-align: middle;}


@media screen and (max-width: 1366px) {
.Vlist .fromW{font-size: 95%}
.Vlist .from{width: 60%;}
.Vlist .from .ftitle{font-size: 100%;}
.Vlist .serviceA .from input,
.Vlist .serviceA .from textarea{font-size: 100%;}
.Vlist .serviceA .from a{ font-size: 100%;}
.Vlist .serviceA .record .msgA{font-size: 100%;}
}
@media screen and (max-width: 920px) {
.Vlist .serviceA{ width: 100%;margin: auto;  }
.Vlist .fromW{ width: 40%;}
.Vlist .from{width: 60%;}
.Vlist .from .W80{width: 100%;}
.Vlist .serviceA .record .msgA .Reply{ padding-left: 20%; margin-top: 10px; }
}
@media screen and (max-width: 540px) {
.Vlist .serviceA{ width: 90%  }
.Vlist .serviceA .fromA {border-bottom: 0;}
.Vlist .serviceA .fromA.help {border-bottom: 1px #999999 solid;}
.Vlist .serviceA .fromW{float: inherit; position: relative;  padding-left:45px; font-size: 80%; width: 100%; text-align: left; padding-bottom: 3%; padding-top: 3%;  border-bottom: 1px #999999 solid;}
.Vlist .serviceA .help .fromW{border-bottom: 0; padding-bottom: 0;}
.Vlist .serviceA .fromW b{ margin-top: auto;}
.Vlist .serviceA .fromW b::before {position: absolute; left: 0; display: inline-table; font-size: 240%;}

.Vlist .help .fromW{  padding-left:30px;}
.Vlist .help .fromW b::before {position: absolute; left: 0; display: inline-table; font-size: 170%;}

.Vlist .serviceA .from {border-left:0; padding: 3% 0; width: 100%; float: inherit; margin: auto; font-size: 95%;}
.Vlist .serviceA .from textarea{height: 70px;}
.Vlist .serviceA .from a{ margin: auto; font-size: 110%; display: block; text-align: center; width: 100px;}
.Vlist .serviceA .record .msgA{font-size: 90%;  margin-top: auto; padding-top: 5%; padding-bottom: 5%; margin-bottom: auto;}
.Vlist .serviceA .record .msgA:first-of-type{border-top: 1px #999999 solid; margin-top: 5%; }

.Vlist .serviceA .record {padding-top: 5%;}
}

/*內容區-登入*/
.Vlist .loginA .fromA {padding-top: 2%; margin-top: 2%; border-top: 1px #999999 solid;}
.Vlist .loginA .fromW b{display: block; font-size: 130%;  margin-top: 7%;color: #000000; font-weight: 300;}
.Vlist .loginA .fromW b::before{display: block; font-size: 250%; color: var(--background-color);}
.Vlist .loginA .fromW a{display: inline-table; color: #ffffff; background-color: #ea6f6f; padding: 5px 15px; margin-top: 8px; border-radius: 5px;}
/*內容區-卡密*/
.Vlist .loginA .fromC b{display: block; font-size: 130%;  margin-top: 7%;color: #000000; font-weight: 300;}
.Vlist .loginA .fromC b::before{display: block; font-size: 250%; color: var(--background-color);}
.Vlist .loginA .fromC a{display: inline-table; color: #ffffff; background-color: #ea6f6f; font-size:24px; padding: 10px 15px; margin-top: 8px; border-radius: 5px;}

@media screen and (max-width: 920px) {
.Vlist .loginA .fromW{width: 30%;}
.Vlist .loginA .from{width: 70%;}
.Vlist .loginA.join .fromW{width: 30%;}
.Vlist .loginA.join .from{width: 70%;}
}
@media screen and (max-width: 540px) {
.Vlist .loginA .fromA{ width: 90%; margin: 5% auto auto auto; padding-bottom: 3%; padding-top: 3%; }
.Vlist .loginA.join .fromA{ width: 95%; }
.Vlist .loginA.record .fromA{ width: 100%; }
.Vlist .loginA .W30{width: 100%;}
.Vlist .loginA .from { font-size: 95%;}
.Vlist .loginA .fromW{font-size: 70%;}
.Vlist .loginA .fromW b::before{font-size: 300%; }
.Vlist .loginA .fromW b{ margin-top: 10%;}
.Vlist .loginA .fromW b.b::before{font-size: 400%; }
.Vlist .loginA .fromW a{display: inline-table; color: #ffffff; background-color: #ea6f6f; padding: 5px 5px; margin-top: 8px;}
.Vlist .loginA .from a{margin: 20px auto auto; display: block; width: 100px; text-align: center;}
.Vlist .loginA .fromA.login .from { float: none; font-size: 90%; margin: auto; padding-left: 0;  width: 80%; border-left: 0; padding-bottom: 5%;}
.Vlist .loginA .fromA.login .from input{ height: 32px; margin-top: 3px; margin-bottom: 7px; font-size: 105%;}
.Vlist .loginA .fromA.login .fromW{font-size: 90%; width: 100%; text-align: center; padding: 5% 0 0; border-top: 1px #999999 solid; font-weight: 300;  }
.Vlist .loginA .fromA.login .fromW a{ display: block;width: 100px; text-align: center; margin: 1% auto 0%;font-size: 110%; padding: 5px 10px;}
.Vlist .loginA .fromA.login .fromW b{ margin-top: 0; color: #999999; font-size: 170%; }

}

.Vlist .loginA .from .Ws{color:#E95E60; font-size: 80%;}

/*foot var(--background-color)*/
.foot{position: relative; display:flex;justify-content: center; align-items: center; margin-top: 40px; box-sizing: border-box; width: 100%; height: 70px; background-color: var(--background-color);; color: #ffffff;}

@media screen and (max-width: 920px) {
.foot{font-size: 90%;}
}