/*
Theme Name: SMO Short Video
Theme URI: https://www.era-mark.com/
Author: SMO
Author URI: Short Video
Description: A WordPress theme based on Short Video Theme
Version: 1.1
*/

@charset "utf-8";
body,html { margin:0; padding:0; height:100%; font-size: 100%; background-color: #111111; color: #ffffff; }
.is_m{display: none;position: absolute;}

@media screen and (max-width: 1366px) {
body,html {  font-size: 95%;  }
}
@media screen and (max-width: 1150px) {
body,html {  font-size: 90%; }
}
@media screen and (max-width: 980px) {

}
@media screen and (max-width: 720px) {
body,html {  font-size: 100%; }
.is_m{display:block;}
}

/*內容區*/
.main{ box-sizing: border-box; min-height:calc(100% ); padding-bottom: 7%; padding-top: 58px; background-color: #333333;}

@media screen and (max-width: 1366px) {
.main{ padding-top: 53px;}
}
@media screen and (max-width: 980px) {
.main{ padding-top: 50px;}
}
@media screen and (max-width: 720px) {
.main{ padding-bottom: 100px; padding-top: 100px; }
}

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





/*上方橫條*/
.topmenu{position: fixed; top: 0; box-sizing: border-box; display: flex; height: 58px; align-items: center;justify-content:space-between; z-index: 2; background-color: #111111; width: 100%; border-bottom: 1px #444444 solid;}
.topmenu .logoL{display: flex; align-items: center; margin-left: 20px;}
.topmenu .logoL img{ height: 50px;}
.topmenu .WebsiteName{font-size: 175%; font-weight: 600; color: #ffffff; margin-left: 5px;}
.topmenu .WebsiteName b{color: #f78ca0;}
.topmenu .TopSearch{position: relative;white-space: nowrap;text-align: right; text-align: center; font-size: 95%; margin-right: 30px; margin-left: auto; }
.topmenu .TopSearch .searchtext{border: 0; color: #333333; outline:none;padding: 6px 5px 6px 35px;border-radius: 20px 0px 0px 20px;width: 130px;background: #ffffffee url(images/search-icon.svg) no-repeat 5px center;background-size: auto 80%;}
.topmenu .TopSearch .searchbut {border: 0; width: auto;margin-left: 0%; padding: 6px 12px 6px 6px;background-color: #f4596e;color: #FFF;border-radius: 0px 20px 20px 0px;-webkit-appearance: none;-moz-appearance: none;appearance: none;}
.topmenu .TopSearch .hotlist {display: none; width: 100%; border-radius: 0px 0px 10px 10px;position: absolute;background: rgba(0, 0, 0, 0.75);border: 1px #000000 solid;border-top: none;left: 0;top: 32px; padding: 5px; box-sizing: border-box;}
.topmenu .TopSearch .hotlist div{ width:min-content ; text-align: left; margin: 10px auto auto; }
.topmenu .TopSearch .hotlist a{display: block; color: #ffffff; margin-bottom: 10px; font-weight: 600;}
.topmenu .TopSearch .hotlist a:hover{color: #f78ca0;}
.topmenu .TopSearch .hotlist a i{color: #f78ca0; margin-right: 3px; font-size: 90%;}
.topmenu .TopSearch .hotlist a b{font-size: 80%; font-weight: 400; margin-left: 2px;}

.topmenu .TopChannelBnt{position: relative; padding-left:20px;}
.topmenu .TopChannelBnt a{ color: #ffffff; white-space: nowrap; font-size: 95%; font-weight: 400; padding: 6px 5px;border-radius: 0px 0px 10px 10px;border: 1px #f78ca0 solid;}
.topmenu .TopChannelBnt a:hover,
.topmenu .TopChannelBnt a.is-active{ border: 2px #f4596e solid;}

.topmenu .TopMemberBnt{position: relative}
.topmenu .TopMemberBnt a{ color: #ffffff; white-space: nowrap; font-size: 95%; font-weight: 400;border-radius: 20px; padding: 6px 5px;}
.topmenu .TopMemberBnt .joinbnt{ border: 1px #ffffff solid; color: #ffffff; margin-right: 10px;}
.topmenu .TopMemberBnt .loginbnt{ border: 1px #f4596e solid; background-color: #f4596e; color: #ffffff; margin-right: 20px;}
.topmenu .TopMemberBnt .memberbnt{ border: 1px #f4596e solid; background-color: #f4596e; color: #ffffff; margin-right: 20px; padding: 6px 5px 6px 8px;}
.topmenu .TopMemberBnt .memberbnt i{margin:auto 2px;}
.topmenu .TopSearch .hotlist {display: none; width: 100%; border-radius: 0px 0px 10px 10px;position: absolute;background: rgba(0, 0, 0, 0.75);border: 1px #000000 solid;border-top: none;left: 0;top: 32px; padding: 5px; box-sizing: border-box;}
.topmenu .TopSearch form span{ width:min-content ; text-align: left; margin: 10px auto auto; }
.topmenu .TopSearch form a{display: block; color: #ffffff; margin-bottom: 10px; font-weight: 600;}
.topmenu .TopSearch form a:hover{color: #f78ca0;}
.topmenu .TopSearch form a i{color: #f78ca0; margin-right: 3px; font-size: 90%;}
.topmenu .TopSearch form a b{font-size: 80%; font-weight: 400; margin-left: 2px;}

.topmenu .mymain{display: none; position: absolute; background-color: #000000aa;right: 0; color: #ffffff; padding: 10px 25px; align-items: center; top:30px; flex-direction: column; border-radius:  0px 0px 10px 10px;}
.topmenu .mymain a{font-weight: 600; }
.topmenu .mymain a i{color:#f78ca0;margin-right: 2px;}
.topmenu .mymain a:hover{color:#f78ca0; }

@media screen and (max-width: 1366px) {
.topmenu{height: 53px}
.topmenu .logoL img{ height: 45px;}
.topmenu .TopSearch .hotlist {top: 30px;}
}
@media screen and (max-width: 1150px) {
.topmenu{height: 50px}
.topmenu .logoL img{ height: 40px;}
.topmenu .TopSearch .hotlist {top: 29px;}
}
@media screen and (max-width: 980px) {
}
@media screen and (min-width: 721px) {
	.topmenu .showmoreM{display: none!important;}
	.topmenu .hidemoreM{display: none!important;}
	.topmenu .TopSearch{display: block!important;}
}
@media screen and (max-width: 720px) {
	.topmenu{height: 58px}
	.topmenu .logoL{margin-left: 5px;}
	.topmenu .WebsiteName{font-size: 155%;margin-left: 2px;}
	.topmenu .TopSearch{position: absolute; right: 10px; top: 63px; margin-right: auto;}
	.topmenu .TopSearch .searchtext{width: 120px; height: 35px; padding: 0px 6px 0px 6px; border-radius: 0; background-position: 1px center; padding-left: 25px;}
	.topmenu .TopSearch .searchbut{border-radius: 0; height: 35px; padding: 0px 6px 0px 6px;}
	.topmenu .TopSearch .hotlist {top:35px;}
	.topmenu .showmoreM,.topmenu .hidemoreM{position: absolute; top: 63px; left: 10px; height: 35px; cursor: pointer; font-size: 100%; display: flex; align-items: center; background-color: #666666; color: #ffffff; padding: 0 10px;}
	.topmenu .hidemoreM{display: none;}
	.topmenu .showmoreM i,.topmenu .hidemoreM i{margin-right: 4px; font-size: 120%; line-height: 100%;}
	.topmenu .TopMemberBnt a{padding: 6px 5px; font-size:12px;}
	.topmenu .TopMemberBnt .joinbnt{margin-right: 5px;}
	.topmenu .TopMemberBnt .loginbnt{margin-right: 5px;}
	.topmenu .TopMemberBnt .memberbnt{margin-right: 5px;}

}


.typeMain{ background-color:#333333;color: #f78ca0; text-align: center;padding: 5px; font-size: 98%;}
.typeMain div{position: relative;width: 100%; max-width: 1280px; margin: 10px auto auto; padding-bottom: 5px; height: 45px; overflow: hidden;}
.typeMain div::after {content: "55555"; position: absolute; bottom: 0; left: 50%; transform:translateX(-50%); height: 1px; width: 50%; background: radial-gradient(ellipse,#666666,#66666600 90%);}
.typeMain div::before {content: "";position: absolute;bottom: 0;left: 0;height: 15px;width: 100%;background: linear-gradient(180deg, #33333300 0%, #333333aa 40%, #333333 80%);}
.typeMain div.open{ height:auto;}
.typeMain div.open::before {background: linear-gradient(180deg, transparent, transparent);}
.typeMain a{display: inline-table; padding: 3px 8px; margin: 3px; color: #ffffff;background-color: #666666;   border-radius: 15px; }
.typeMain a:hover,.typeMain a.hover{background-color:#f4596e; }
.typeMain a b{font-size: 80%;}
.typeMain span{cursor: pointer; font-size: 90%; display: flex; align-items: center; margin: auto;width: fit-content; background-color: #666666; color: #ffffff; padding: 3px 8px; border-radius: 0 0 10px 10px;}
.typeMain span i{margin-right: 3px;}
.typeMain span.hidemore{display: none; background-color: #f4596e;}

.title{font-size: 210%; margin: auto; text-align: center; margin-top: 2%;}

.pagelist{width: 100%;max-width: 1280px;display: flex; justify-content: center;margin: 1% auto;}
.pagelist a {display: flex;min-width: 36px; justify-content: center; align-items: center; color: #ffffff; margin-bottom: 1%;box-sizing: border-box;padding: 5px 10px; margin: 3px; border-radius: 5px; border:1px #ffffff solid;}
.pagelist a:hover,.pagelist a.hover{background-color:#f4596e; }


@media screen and (min-width: 721px) {
	.typeMain{display: block!important;}
}
@media screen and (max-width: 720px) {
	.title{ margin-top: 5%;}
.pagelist{margin: 5% auto}
	.typeMain {display: none; position:fixed; top: 50px; background-color: #000000aa; padding: 60px 5px 30px;z-index: 1}
	.typeMain span{display: none !important;}
	.typeMain div{height: auto;}
	.typeMain div::after,.typeMain div::before{display: none;}
}

.movielist{width: 100%; max-width: 1280px; display: flex; flex-wrap: wrap;  margin: auto;}

.movielist a{display: flex; flex-direction:column; background-color: #ffffff; width: 19%; margin: 0.5%; box-sizing: border-box;  border-radius: 13px 13px 10px 10px;}
.movielist a .movie_pic {position: relative; width: 100%;}
.movielist a .movie_pic img{width: 100%; border-radius: 10px 10px 0 0;  aspect-ratio: 3 / 4; object-fit: cover;}
.movielist a .movie_pic .now_ep{ font-size: small; color: #ffffff; padding: 2px 2px; background: rgba(13, 13, 13, 0.4); border-radius: 4px; white-space: nowrap; font-weight: 600; position: absolute; top: 5px; left: 5px; }
.movielist a .movie_pic .start_date{ font-size: small; color: #ffffff; padding: 2px 2px; background: rgba(13, 13, 13, 0.4); border-radius: 4px; white-space: nowrap; font-weight: 600; position: absolute; bottom: 5px; right: 5px; }
.movielist a .name{font-size: 105%; color: #333333;padding: 5px 10px;  font-weight: 600; line-height: 110%;}
.movielist a .info{display: flex; flex-direction: row; justify-content: space-between; width: 100%; box-sizing: border-box; color: #999999;font-size: 90%; padding: 0px 10px 8px;}
@media screen and (max-width: 1366px) {
.movielist{width: 90%;}
}
@media screen and (max-width: 1150px) {
.movielist a{width: 24%;}
}
@media screen and (max-width: 720px) {
.movielist{width: 98%;}
.movielist a{width: 49%;}
}

.viewmain{width: 95%; max-width: 1280px; display: flex; flex-direction: row; margin: 2% auto auto; padding-bottom: 1%; border-bottom: 1px #666 solid;}
.viewmain .pic {margin-right: 1%;}
.viewmain .pic img {border-radius: 10px; max-width:300px;}
.viewmain .info{display: flex; flex-direction:column;}
.viewmain .info a{display: inline-table; padding: 3px 8px; margin: 3px; color: #ffffff;background-color: #666666;   border-radius: 15px; }
.viewmain .info a:hover{background-color:#f4596e; }
.viewmain .info div{margin-bottom: 10px;}
.viewmain .info .name{font-size: 190%; line-height: 110%; color: #d8e3ff; font-weight: 600; margin-bottom: 15px;}
.viewmain .info .directions{font-size: 105%; margin: 2% auto; line-height: 150%;}
.viewmain .info .allplay{display: flex; align-items: flex-end; height: -webkit-fill-available;}
.viewmain .info .allplay a{font-size: 110%; font-weight: 600; background-color:#f4596e; padding:8px 15px; border-radius: 10px; }
.viewmain .info .allplay a i{margin-right: 3px;}

@media screen and (max-width: 720px) {
	.viewmain{display: flex; flex-direction:column;padding-bottom: 5%;}
	.viewmain .pic {text-align: center; margin: 2% auto;}
	.viewmain .info div{margin-bottom: 3%;}
	.viewmain .info .name{font-size: 160%; text-align: center }
	.viewmain .info .directions{font-size: 105%; margin: 2% auto;}
	.viewmain .info .allplay{justify-content: center; margin: 2% auto; height: auto;}
}

.playmain{width: 95%; height:100svh; max-width: 1280px; display: flex;flex-direction: column; margin: auto auto; /*border-bottom: 1px #666 solid;*/}
.playmain .playM{position: relative; height: 100svh; width: 100%; background-color: #000000;}
.playmain .direction{display: flex;justify-content: space-between; margin-bottom: 1%; padding: 1% 0;}
.playmain .direction a{position: relative; display: flex; flex-direction:row; justify-content: center; align-items: center; border-radius: 10px; border: 1px #666 solid; box-sizing: border-box; color: #ffffff; padding: 8px 15px; background-color: #555555;}
.playmain .direction a:hover,.playmain .direction a.hover{background-color:#777777; border: 1px #aaa solid;  }
.playmain .direction a.previous i{font-size: 120%; margin-right: 10px;}
.playmain .direction a.next i{font-size: 120%; margin-left: 10px;}
.playmain .direction a b{font-weight: 600; margin-right: 10px;}
.playmain .info{display: flex; flex-direction:row; flex-wrap: wrap;}
.playmain .info a{display: inline-table; padding: 3px 8px; margin: 3px; color: #ffffff;background-color: #666666;   border-radius: 15px; }
.playmain .info a:hover{background-color:#f4596e; }
.playmain .info div{ margin-bottom: 10px; width: 50%;}
.playmain .info .name{text-align: center;width: 100%; line-height: 110%; font-size: 190%; color: #d8e3ff; font-weight: 600; margin-bottom: 15px;}
.playmain .info .name b::before{content: " - ";}
.playmain .info .actor,.playmain .info .type{width: 100%;}
.playmain .info .directions{font-size: 105%; margin: 2% auto; line-height: 150%;}
.playmain .info .allplay{display: flex; align-items: flex-end;width: 100%; justify-content: center;}
.playmain .info .allplay a{font-size: 110%; font-weight: 600; background-color:#f4596e; padding:8px 15px; border-radius: 10px; }
.playmain .info .allplay a i{margin-right: 3px;}

@media screen and (max-width: 720px) {
	.playmain{/*padding-bottom: 5%;*/ width: 100%;}
	.playmain .direction{ width: 95%; margin: auto auto 2%;}
	.playmain .info{width: 95%;margin: auto;}
	.playmain .info div{margin-bottom: 3%;}
	.playmain .info .name{font-size: 160%; text-align: center }
	.playmain .info .name b{display: block;}
	.playmain .info .name b::before{content: "";}
	.playmain .info .directions{font-size: 105%; margin: 2% auto;}
	.playmain .info .allplay{justify-content: center; margin: 2% auto; height: auto;}
}


.episodes{width: 95%; max-width: 1280px; margin: auto; padding: 2%; border-radius: 20px;}
.episodes .title{font-size: 160%; margin: auto auto 1%;}
.episodes .title i{margin-right: 5px;}

.episodes .episodeslist{display: flex; flex-wrap: wrap; margin: auto;}
.episodes .episodeslist a{position: relative; display: flex; flex-direction:column; justify-content: center; align-items: center; width: 15.66%; margin: 0.5%; border-radius: 10px; border: 1px #666 solid; box-sizing: border-box; color: #ffffff; padding: 5px; background-color: #555555;}
.episodes .episodeslist a:hover,.episodes .episodeslist a.hover{background-color:#777777; border: 1px #aaa solid;  }
.episodes .episodeslist a i{position: absolute; font-size: 150%; left: 10px;}
.episodes .episodeslist a b{font-size: 80%; color: #aaaaaa;}
@media screen and (max-width: 720px) {
.episodes{width: 98%; padding: 5% 0;}
	.episodes .title{font-size: 150%;}
	.episodes .episodeslist a{width: 31.33%; margin: 1%}
	.episodes .episodeslist a i{ font-size: 130%; left: 5px;}
	.episodes .episodeslist a b{line-height: 100%;}
}

.membertab{width: 95%; max-width: 640px; display: flex;flex-direction: column; margin: auto auto; padding-bottom: 1%; padding-top: 1%; }
.membertab>div{display: flex; flex-direction:column; margin-bottom: 4%;}
.membertab input{border: 0;color: #222222; font-weight: 600; outline: none;padding: 7px 15px;border-radius: 20px; opacity: 0.9;}
.membertab input[type=checkbox]{ border-radius:10px; width: 20px;  height: 20px; margin-right: 3px;}
.membertab input:focus{opacity: 1;}
.membertab>div>span{display: none; font-size: 95%;color: #FFDCDD;}
.membertab>div.err input{background-color: #FFD7D8; border: 2px #FF5154 solid;}
.membertab>div.err>span{display: block;}
.membertab button{font-size: 110%; padding: 7px 0; margin-top: 1%;border: 1px #f4596e solid; background-color: #f4596e; color: #ffffff;border-radius: 20px;}
.membertab .word{ border: 1px #00ff00 solid; text-align: center;}
.membertab>div.remember{display: flex; flex-direction: row;}
.membertab>div.linkM{display: flex; flex-direction: row; justify-content: flex-end;}
.membertab>div.linkM a{color: #ffffff; margin-left: 15px; text-decoration: underline;}
.membertab>div.vip a{ border-radius: 20px; padding: 7px 10px; background-color: #f4596e; color: #ffffff;  margin-right: 20px}
.membertab>div.vip b{margin-right: 10px; color: #8ae3ff; font-size: 110%;}
@media screen and (max-width: 720px) {
	.membertab>div{margin-bottom: 6%;}
	.membertab input{padding: 9px 15px;}
	.membertab button{padding: 9px 0;}
}

.subscriptions{width: 95%; max-width: 700px; display: flex;flex-direction: column; margin: 1% auto; padding:1% 2%; background: rgba(0,0,0,0.2); border-radius: 20px; }
.subscriptions .subscriptionsList{display: flex; flex-direction: row;margin: 2% 0; justify-content: space-between; border: 1px #f4596e solid; padding: 10px 30px; border-radius: 10px;}
.subscriptions .subscriptionsList:hover{background-color: #000000;}
.subscriptions .subscriptionsList .L .aging{font-size: 150%; font-weight: 600;}
.subscriptions .subscriptionsList .L .aging i{margin-right: 5px;}
.subscriptions .subscriptionsList .L .discount{font-size: 160%; font-weight: 600;}
.subscriptions .subscriptionsList .L .discount b{font-size: 70%; margin-left: 10px; color: #79FFF0}
.subscriptions .subscriptionsList .L .discount b i{margin-left: 10px; margin-right: 3px;}
.subscriptions .subscriptionsList .R{display: flex; flex-direction: column;}
.subscriptions .subscriptionsList .R a{font-size: 100%; padding: 5px 12px; margin:5px auto; background-color: #f4596e; color: #ffffff;border-radius: 20px;}
@media screen and (max-width: 720px) {
	.subscriptions{background: 0;}
	.subscriptions .subscriptionsList{flex-direction:column; padding: 10px 15px;}	
	.subscriptions .subscriptionsList .R{ flex-direction: row; margin-top: 2%;}
	.subscriptions .subscriptionsList .R a{ margin: 0 5px 0 0; padding: 6px 10px;}
}


.footer{ position: fixed; bottom: 0px; width: 100%; padding: 7px 0; z-index: 1; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; box-sizing: border-box; font-size: 100%; background-color: #111111; color: #ffffff;}
.footer a{display: flex;flex-direction:column; justify-content: center; align-items: center;  text-decoration:none; color: #ffffff; font-size: 90%;}
.footer a:hover{color: #f78ca0;}

.footer a i{font-size: 130%;}

.footer .gotop{ position:fixed; display: none; align-items: center; justify-content: center; text-decoration: none; width: 50px; height: 50px;border-radius: 50%; right: 20px; bottom:70px; color: #ffffff; background-color: #f4596e; font-size: 120%; z-index:1; line-height:100%; box-sizing: border-box; padding: 0; box-shadow: 0px 0px 5px #000000;}
.footer a.gotop:hover{color: #ffffff;}
.footer .gotop.hover{ display: flex;}
@media screen and (max-width: 730px) {
.footer{padding: 5px 0; }
.footer .gotop{width: 40px; height: 40px; right: 20px; bottom:70px;}
}