@charset "utf-8";
body,html { margin:0; padding:0; height:100%;}
@media screen and (min-width: 768px) {
html{overflow-y:scroll;}
}
a { text-decoration:none;outline:none;}
* { font-family:"微軟正黑體", Tahoma ,simhei; margin:0; padding:0;}
img {border:0;}
input { font-size:100%;}


.is_sp,.deskH  { display: none; }
@media screen and (max-width: 768px) {

.is_sp,.deskH { display: block; }
}

.header__logo img, .gnav__logo img {
display: block;
max-width: 100%;
height: auto;
width: auto;
margin: 0 auto;
}
.header__logo a, .gnav__logo a {
display: block;color:rgba(255,255,255,1);font-size: 180%; text-align: center;font-weight: 300;
}
.gnav__logo a{font-size: 140%; line-height: 110%; padding: 10px 0;}
.layer {
position: fixed;
display: block;
width: 0%;
height: 100%;
right: 0;
top:50px;
background: rgba(0, 0, 0, 0.75);
z-index: 9998;
	-webkit-transition: right 300ms; transition: right 300ms;
}

.infolayer {
position: fixed;
display:inline-block;
height: 100%;
right: 0;
top:0;
background: rgba(0, 0, 0, 0);
z-index: 9998;
-webkit-transition: background 300ms; transition: background 300ms;
}
.infolayer.open{width: 100%;background: rgba(0, 0, 0, 0.55);}

.infolayer .infolayerM {transform: translate(-50%, -50%); position:absolute; top:50%; left: 50%; font-size: 120%; display:block;width: 100%; box-sizing: border-box; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.75); padding: 5% 12% 5%; }
.infolayer .infolayerM .logo { width: 215px; height: 50px; display: block; margin: auto; margin-bottom: 20px;}
.infolayer .infolayerM .warning { margin-bottom:20px; color: #cccccc;}
.infolayer .infolayerM .warning a{ color: #40ffe9; font-weight: 600;}
.infolayer .infolayerM .warning div{display: inline-table;}
.infolayer .infolayerM .warning div b{ color:#cd9494}
.infolayer .infolayerM .info { font-size: 120%; border-top: 1px #e25682 solid; padding-top: 15px; padding-bottom: 15px;}
.infolayer .infolayerM .info b{color: #ECC335; font-weight: 500;}
.infolayer .infolayerM .infoS { font-size: 100%;color: #f0adad; padding-top: 15px;}
.infolayer .infolayerM .infoS b{color: #ffffff; font-weight: 500;}
.infolayer .infolayerM a.cancel{ padding: 5px 10px; color: #fff; background-color: #777; border-radius: 5px; margin-right: 15px;}
.infolayer .infolayerM a.confirm{ padding: 5px 10px; color: #fff; background-color: #e25682; border-radius: 5px; }

@media screen and (max-width: 1620px) {
	.infolayer .infolayerM {font-size: 110%; padding: 5% 8% 5%}
}
@media screen and (max-width: 1200px) {
	.infolayer .infolayerM .logo { width: 168px; height: 45px;}
	.infolayer .infolayerM {font-size: 105%; padding: 5% 6% 5%}
}
@media screen and (max-width: 768px) {
	.infolayer .infolayerM {font-size: 100%; padding: 10% 2% 10%}
	.infolayerM .warning {text-align: left;}
	.infolayerM .warning div{display: block;}
	.infolayer .infolayerM a{font-size: 110%;}
	.infolayer .infolayerM .info { font-size: 110%;}
}

.infolayerM .form {position: relative; max-width: 700px; width: 90%; text-align: left; margin: auto; padding-bottom: 15px;}
.infolayerM .form .title { padding-bottom: 10px;}
.infolayerM .form .title b{color: #ECC335; font-weight: 500;}
.infolayerM .item  { display: block; margin:10px auto 10px;position: relative;}
.infolayerM input {width:100%; box-sizing: border-box; padding: 21px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.infolayerM textarea {width:100%; box-sizing: border-box; height: 120px; padding: 30px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.infolayerM input:focus ,.infolayerM textarea:focus {border: 1px solid #a0a0a0;background-color: #ffffff;box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}
.infolayerM label  { position: absolute;font-size: 110%;left:10px;top:12px; color: #999;cursor: text; -webkit-transition: all 200ms; transition: all 200ms;}
.infolayerM .item.M label { top:5px;font-size:90%; color: #666;}
.infolayerM .textarea.M label {font-size:80%; color: #fff; box-sizing: border-box; border-radius: 5px; padding:3px 6px; top: 4px; left: 10px; display: block; width: auto; background:rgba(0,0,0,0.60);}
.infolayerM .item span {font-size: 80%; color: #aaa;}
.infolayerM #msg_valid_M {width: 30%;}

@media screen and (max-width: 1620px) {
.infolayerM textarea { height:90px; padding: 26px 7px 3px; font-size: 100%;}

.infolayerM input { padding: 15px 7px 3px;font-size: 100%;}
.infolayerM label {left:7px;font-size: 100%;top:10px;}
.infolayerM .item.M label{ top:1px;font-size:80%}
.infolayerM .textarea.M label{ top: 4px; left: 7px;padding:2px 5px;}
}
.item.M input ,.item.M textarea{background-color: #fff; color:rgba(14,118,188,1);}
/* ---------------------------------------------------------
default・option
----------------------------------------------------------*/
#wrapper {
position: relative;
margin: 0 auto;
left: 0;
z-index: 2;
-webkit-transition: left 300ms; transition: left 300ms;
}

#wrapper.open {left: -230px;overflow: visible;}

#wrapper.open .header {left: -230px;}

#wrapper.open .gnav { right: 0;}

#wrapper.open .layer { background: rgba(0, 0, 0, 0.75); width: 100%; right: 230px;}

#wrapper.open .memberarea {left: -230px;}

#wrapper.open .typeMain {left: -230px;}

@media screen and (max-width: 768px) {
#wrapper { min-width: inherit; }
}

/* ---------------------------------------------------------
header
----------------------------------------------------------*/
.header {
position: fixed;
z-index:999;
padding:3px 120px 3px 1%; top:0px; width:100%; background: rgba(0%,0%,0%,0.75); box-sizing: border-box;
-webkit-transition: all 300ms;
transition: all 300ms;
}
/*.hideUp .header {top: -60px;}*/

@media screen and (min-width: 1620px) {
.header {width:100%;padding:5px 120px 5px 1%;}
}
@media screen and (max-width: 1200px) {
/*.hideUp .header {top: -56px;}*/
}
@media screen and (max-width: 950px) {
.header {padding:3px 100px 3px 1%;}
}

@media screen and (max-width: 768px) {
.header {
position: fixed;
padding:2px 100px 2px 1%;
top: 0;
left: 0;
z-index: 9997;
overflow: visible;
}
/*.hideUp .header {top: -50px;}*/
}


/*
.typeMain {
position: fixed;
left: 0px;
z-index:99;
padding:3px 30px 0px ; top:60px; width:100%; background: rgba(100%,100%,100%,0.75); box-sizing: border-box; border-bottom: 1px rgba(0,0,0,0.3) solid;
text-align: center;
-webkit-transition: all 300ms;
transition: all 300ms;
overflow: visible;
}
*/
.typeMain {
position: fixed;
left: 0px;
z-index:99;
padding:0px 26px 1px 26px; top:60px; width:100%; background: rgba(0%,0%,0%,0.2); box-sizing: border-box;
text-align: center;
-webkit-transition: all 300ms;
transition: all 300ms;
overflow: visible;
}

/*
.typeMain a{ display:inline-table;position: relative; font-weight: 600; height: 40px; line-height: 40px; margin: auto 0px; color: rgba(0,0,0,1); box-sizing: border-box; border-bottom: 5px rgba(186,74,123,0) solid;
text-shadow: 0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff;
-webkit-transition: all 200ms;
transition: all 200ms;}
.typeMain a::after{content: " "; position: absolute; display: inline-table; background-color:rgba(0,0,0,0.3);  width: 1px; height: 10px; right: 0; bottom: -5px; }
*/

.typeMain a{ display:inline-table; position: relative; font-weight: 600; height: 40px; line-height: 40px; font-size: 95%; margin: auto 1px auto auto; color: rgba(0,0,0,1); box-sizing: border-box; border-bottom: 5px rgba(242,151,191,0) solid; background: rgba(100%,100%,100%,0.55);
text-shadow: 0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff,0px 0px 3px #ffffff;
-webkit-transition: all 200ms;
transition: all 200ms;
}

/*.hideUp .typeMain a{height: 48px; line-height: 48px; text-shadow: 0px 0px 3px rgba(186,74,123,1),0px 0px 3px rgba(186,74,123,1)}*/
.typeMain a:hover ,.typeMain a.hover{background: rgba(100%,100%,100%,0.75); border-bottom: 5px rgba(242,151,191,0.65) solid;}

.hideUp .typeMain { top: 20px; background: rgba(100%,100%,100%,0);border-bottom: 1px rgba(0,0,0,0.0) solid;}
/*
.hideUp .typeMain a:hover ,.hideUp .typeMain a.hover{ border-bottom: 5px rgba(216,134,170,1) solid;}
*/
.hideUp .typeMain a{ color: rgba(0,0,0,0); border-bottom: 5px rgba(255,255,255,0) solid;background: rgba(100%,100%,100%,0); text-shadow: none;}
.hideUp .typeMain a::after{background-color:rgba(0,0,0,0); }


@media screen and (max-width: 1620px) {
	.typeMain {top:52px;}
	.typeMain a{ font-weight: 400;}
}
@media screen and (max-width: 768px) {
	.typeMain {top:50px; font-size: 85%;}
	.typeMain a{height: 32px; line-height: 32px;}
	.typeMain a:hover{ border-bottom: 5px rgba(186,74,123,0) solid;}
/*	.hideUp .typeMain a:hover{border-bottom: 5px rgba(216,134,170,0) solid;}*/
}

.header__logo { display:block; float:left;max-width: 40%; overflow: hidden; white-space:nowrap;}
.header__logo img { width:215px; height: 50px; }
.header__logo a{height: 50px; line-height: 50px;}
.header__logo a.ltext:before{content:"▋ "; color: #d886aa; font-size: 80%;}
.header__menu {display:none;}
@media screen and (max-width: 1620px) {
.header__logo img { width:178px; height:46px; }
.header__logo a{height: 46px; line-height:46px;}
}
@media screen and (max-width: 1200px) {
.header__logo {max-width: 30%; }
.header__logo a{font-size: 150%;}
}
@media screen and (max-width: 768px) {
.header__logo {max-width: 70%; }
.header__logo img { width:168px; height:46px;}
.header__menu {
position:absolute;
display:block;
right:1%;
border-radius:5px;
width: 46px;
height: 46px;
padding-top: 32px;
box-sizing: border-box;
overflow: hidden;
background-color: #ba4a7b;
font-size: 10px;
color: #fff;
line-height: 1;
text-align: center;
font-weight: bold;
cursor: pointer;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.header__menu:before, .header__menu:after {
content: '';
position: absolute;
width: 60%;
top: 40%;
left: 20%;
height: 2px;
-webkit-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;
}

.header__menu::before {
height:6px;
margin-top:-9px;
transform: rotate(0deg);-webkit-transform: rotate(0deg);
border-top: 2px #FFF solid;
border-bottom: 2px #FFF solid;
}
.header__menu::after {
background: #ffffff;
margin-top:7px;
transform: rotate(0deg);-webkit-transform: rotate(0deg);
}
.header__menu.open{ right:0;border-radius:5px 0px 0px 5px;}
.header__menu.open::before {
margin-top:0;
border-top: 0px #FFF solid;
border-bottom: 2px #FFF solid;
height:0px;
transform: rotate(135deg);-webkit-transform: rotate(135deg);
}
.header__menu.open::after {margin-top:0;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
}
/* ---------------------------------------------------------
gnav
----------------------------------------------------------*/
.gnav {
margin-right: 5px;
float: right;
position: relative;
}

@media screen and (max-width: 768px) {
.gnav {
margin-right: 0;
position: fixed;
width: 230px;
height: 100%;
top: 0;
right: -230px;
float: none;
z-index: 90;
-webkit-transition: all 300ms;
transition: all 300ms;
}
}

.gnav__logo {
margin: 0 auto 0;
padding-top: 2px; padding-bottom: 2px;
background: rgba(0,0,0,0.75);
box-sizing: border-box;
}

.gnav__logo.open {padding-top: 2px;}
.gnav__logo img { width: 168px; height:46px;}
.gnav__logo.open img { height:46px;}

.gnav__list { list-style: none; margin:0; padding:0; }
.gnav__list { *zoom: 1;}
.gnav__list:before, .gnav__list:after {content: " "; display: table;}
.gnav__list:after { clear: both;}
@media screen and (max-width: 768px) {
.gnav__list {width: 230px;margin: 0 auto;}
}

@media screen and (max-width: 768px) {
.gnav__inner {
height: 100%;
height: calc(100% - 50px);
background: rgba(255,255,255,0.85);
padding:0;
overflow-y:auto;
overflow-x:hidden;
-webkit-overflow-scrolling: touch;
}
}

.gnav__item {
float: left;
font-weight: bold;
margin-top:12px;
margin-left: 40px;
white-space:nowrap;
}
@media screen and (max-width: 1600px) {
.gnav__item {  margin-left: 30px;}
}
@media screen and (max-width: 950px) {
.gnav__item {  margin-left: 15px;}
}
@media screen and (max-width: 768px) {
.gnav__item {
position:relative;
float: none;
text-align: center;
margin: 0px;

}
}

.gnav__item:first-child {margin-left: 0;}

.gnav__item .wrap {
display: block;
font-weight:600;
font-size:110%;
padding-bottom: 5px;
border-bottom: 5px solid transparent;
color:#EEE;
-webkit-transition: border,padding 300ms;
transition: border,padding 300ms;
}

@media screen and (min-width: 769px) {
.gnav__item .ICON_webcam {
-webkit-animation: sb1 0.5s infinite ease-in-out;
-moz-animation: sb1 0.5s infinite ease-in-out;
-o-animation: sb1 0.5s infinite ease-in-out;
animation: sb1 0.5s infinite ease-in-out;
}
@-webkit-keyframes sb1{
0%,50% { color:#ffffff;}
51%,100% { color:#ffff00;}
}
@keyframes sb1 {
0%,50% { color:#ffffff;}
51%,100% { color:#ffff00;}
}
}


@media screen and (max-width: 1200px) {
.gnav__item .wrap {font-size:100%;}
}
.gnav__item .wrap:hover,.gnav__item .hover {
color: #fff;
border-bottom: 4px solid #ba4a7b;
padding-bottom: 1px;
}

@media screen and (max-width: 768px) {
.gnav__item .wrap{
position:relative;
font-size:100%;
padding:10px 10px 10px 0px ;
border-bottom: 1px #aaa solid;
color:#333;

margin-left:50px;
text-align:left;
}
.gnav__item .wrap:hover {
color:#333;
border-bottom: 1px #aaa solid;
padding:10px 10px 10px 0px ;
}
.gnav__item .wrap:after { position:absolute; display:inline-table; top:10px; right:10px; color:#333; content: ">"; -webkit-transform: scale(0.5, 1); transform: scale(0.5, 1); }
.gnav__item .wrap:before,.gnav__list .search:before { position:absolute; display:inline-table; content: ""; left:-40px; margin-top:-4px; border-radius:5px; width:30px; height:30px; background-repeat:no-repeat; background-size:100%;}
.gnav__list .search:before{ left:10px; margin-top:6px; background-color:#000;}
.gnav__item .ICON_home:before { background-color:#6d99dd; background-image:url(../../images/RWD/ICON_home.svg);}
.gnav__item .ICON_buy:before { background-color:#f25369; background-image:url(../../images/RWD/ICON_buy.svg);}
.gnav__item .ICON_qa:before { background-color:#a6ce6d; background-image:url(../../images/RWD/ICON_qa.svg);}
.gnav__list .ICON_ticket:before { background-color:#a6ce6d; background-image:url(../../images/RWD/ICON_ticket.svg);}
.gnav__item .ICON_service:before { background-color:#f5923d; background-image:url(../../images/RWD/ICON_service.svg);}
.gnav__item .ICON_bb:before { background-color:#747474; background-image:url(../../images/RWD/ICON_bb.svg);}
.gnav__item .ICON_mm:before { background-color:#e457c4; background-image:url(../../images/RWD/ICON_mm.svg);}
.gnav__item .ICON_webcam:before { background-color:#e457c4; background-image:url(../../images/RWD/ICON_webcam.svg);}
.gnav__list .ICON_search:before { background-color:#747474; background-image:url(../../images/RWD/ICON_search.svg);}

}

/* --------------------
搜尋開始
--------------------- */
.gnav__list .search{position: relative;}
.gnav__list .search span {display: block; color: #ECC335; border-bottom: 1px #ECC335 solid; margin: auto auto 7px; text-align: center; padding-bottom: 5px;}
@media screen and (min-width: 769px) {
.gnav__list .search input { font-size:95%;}
.gnav__list .search .searchtext { border:0; margin-left:2%; padding:2px 5px 2px 25px; border-radius:5px 0px 0px 5px; width:40px;
background:#FFF url(../../images/RWD/search-icon.svg) no-repeat 0px 0px;
background-size:auto 100%;
-webkit-transition: all 300ms;
transition: all 300ms;
}
.gnav__list .search .searchtext:focus { width:40px;  outline: none;}
.gnav__list .search .searchtext::placeholder { color:#FFF;}
.gnav__list .search .searchtext:-ms-input-placeholder { color:#FFF;}
.gnav__list .search .searchtext::-ms-input-placeholder { color:#FFF;}
.gnav__list .search .searchbut { border:0; padding:2px 5px; background-color:#ba4a7b; color:#FFF; border-radius:0px 5px 5px 0px;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.gnav__list .search .avlist{display:none; 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:43px; padding: 5px; }
.gnav__list .search .avlist a{ color: #ffffff; display: block; text-align: center;  margin-bottom: 7px;}
.gnav__list .search .avlist a b{font-size: 80%;}
}
@media screen and (max-width: 1620px) {
.gnav__list .search .avlist{top:37px;}
}
@media screen and (min-width: 950px) {
.gnav__list .search input { font-size:100%;}
.gnav__list .search .searchtext { border:0; margin-left:2%; padding:2px 5px 2px 25px; border-radius:5px 0px 0px 5px; width:50px;
background:#FFF url(../../images/RWD/search-icon.svg) no-repeat 0px 0px;
background-size:auto 100%;
-webkit-transition: width 300ms;
transition: width 300ms;
}
.gnav__list .search .searchtext:focus { width:110px; }
.gnav__list .search .searchtext:not(:focus) {-webkit-transition-delay: 1s; transition-delay: 1s;}
.gnav__list .search .searchbut { border:0; padding:2px 5px; background-color:#ba4a7b; color:#FFF; border-radius:0px 5px 5px 0px;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
}
@media screen and (max-width: 768px) {
.gnav__list .search {padding:0px 10px 0px 50px ; text-align:left; }
.gnav__list .search .searchtext {background:none; font-size:100%;  color:#666; height:33px; line-height:33px; padding:5px 0; margin:0; width:145px; border:0; border-radius:0px;}
.gnav__list .search .searchtext:focus { outline: none;}
.gnav__list .search .searchbut {
 position:absolute; display:inline-table; right:0px;
 font-size:90%; border-color:#b03060; border-width: 0; height:43px; border-radius:0px; background-color:rgba(0,0,0,0.5); color:#FFF; padding:0px 5px; margin:0;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.gnav__list .search .avlist{display:none;width:230px; box-sizing: border-box; position: absolute; background: rgba(0,0,0,0.75); border: 1px #000000 solid; border-top: none; left: 0; top:43px; padding: 5px; z-index: 1; }
.gnav__list .search .avlist a{ color: #ffffff; display: block; text-align: center;  margin-bottom: 7px;}
.gnav__list .search .avlist a b{font-size: 80%;}
}
/* --------------------
搜尋結束
--------------------- */

/* --------------------
新消息開始
--------------------- */
.gnav__list .hidden {display: none;}
.gnav__list .news { position:fixed;  white-space:normal; padding:0; padding-bottom:5px; padding-top:5px; font-size:80%; text-align:left; height:auto; max-height:calc(100% - 310px); min-height:25px; overflow:hidden; right:5px; bottom:5px; margin-left:0; width:22%; border-radius:5px 5px 5px 5px; color:#FFF; background: rgba(0%,0%,0%,0.6);-webkit-transition: all 300ms;transition: all 300ms;}
.gnav__list .news:hover{background: rgba(0%,0%,0%,0.75);}
.gnav__list .newsH { bottom:153px;}

.gnav__list .news .title { position:relative; cursor:pointer; display:block; color:#FFF; background:rgba(186,74,123,1); margin:0 5px; border-radius:5px; padding:1px 5px; font-size:130%; border:0;-webkit-transition: all 300ms;transition: all 300ms;}
.gnav__list .news.hover .title { border:0; background:rgba(186,74,123,1);}

.gnav__list .news .title span  {
position:absolute;
top:50%;
margin-top:-10px;
right:3px;
display:inline-table;
width: 20px;
height: 20px;
box-sizing: border-box;
text-align:center;
content: '';
}

.gnav__list .news .title span::before,.gnav__list .news .title span::after {
content: '';
position: absolute;
width: 90%;
top: 20%;
left: 10%;
-webkit-transition: all 300ms;
transition: all 300ms;
-webkit-transition-delay: 300ms;
transition-delay: 300ms;}

.gnav__list .news .title span::before {
width: 0;
height: 0;
left:8px;
top:0;
border-left: 1px #FFF solid ;
border-right: 1px #FFF solid ;
border-top: 9px #FFF solid;
border-bottom: 9px #FFF solid;
transform: rotate(45deg);-webkit-transform: rotate(45deg);
}
.gnav__list .news .title span::after {
margin-top:4px;
left:0px;
background:rgba(255,255,255,1);
height: 2px;
transform: rotate(45deg);-webkit-transform: rotate(45deg);
}

.gnav__list .news.hover .title span::before {
width: 0;
height: 0;
left:1px;
top:20%;
border-top: 0px transparent solid;
border-left: 7px transparent solid ;
border-right: 7px transparent solid ;
border-bottom: 11px #FFF solid;
transform: rotate(360deg);-webkit-transform: rotate(360deg);
}
.gnav__list .news.hover .title span::after {
height: 0px;
background:rgba(255,255,255,0);
transform: rotate(-135deg);-webkit-transform: rotate(-135deg);
}

.gnav__list .news .lista { display:block; height:100%;}
.gnav__list .news .lista .list{ border-bottom: 1px #999 solid; width:95%; padding:10px 0; margin:auto;}
.gnav__list .news .titlel{ font-size:110%; color:#ECC335; }
.gnav__list .news b {color:#FFD6FA;font-size: 115%;}
.gnav__list .news a {color:#fff; text-decoration: underline;}

@media screen and (max-width: 768px) {
.gnav__list .hidden {display:block;}
.gnav__list .news { position:inherit; width:100%; border-radius:0px; margin:0 auto 0; padding:0; background: none; color:#333; font-size:90%;}
.gnav__list .news:hover{background: none;}
.gnav__list .news .title { margin:0; cursor:default; padding:15px 0 3px 10px; border-radius:0px; border-top:1px #aaa solid; border-bottom:1px #aaa solid; width:auto; background-color:rgba(0,0,0,0.1) ;color:#ba4a7b; font-size:110%; font-weight:600; }
.gnav__list .news.hover .title { background-color:rgba(0,0,0,0.1) ; border-top:1px #aaa solid; border-bottom:1px #aaa solid;}
.gnav__list .news .title span { display:none;}
.gnav__list .news .lista { display:block !important;}
.gnav__list .news .lista .list{font-weight:normal; color: #333; width:auto; margin-left:10px; margin-right:10px; border-bottom: 1px #aaa solid;}
.gnav__list .news .lista .list:last-child { margin-bottom:70px;}
.gnav__list .news .titlel{ font-size:110%; color:#777; font-weight: 600; padding-bottom: 40px; }
.gnav__list .news b {color:#000; font-weight: 600; font-size: 105%}
.gnav__list .news a {color:#333; font-weight: 600;}
}
@media screen and (min-width: 1300px) {
.gnav__list .news { width:300px; font-size:90%;}
}
@media screen and (min-width: 1620px) {
.gnav__list .news { width:400px; font-size:100%;}
}
/* --------------------
新消息結束
--------------------- */

/* --------------------
上方會員區按鈕開始
--------------------- */
.header .loginbtn{ position:absolute; right:1%; top:8px; color:#fff; padding:6px 20px 6px 30px; font-size:100%; border-radius:5px; border:1px #FFF solid; -webkit-transition: all 300ms; transition: all 300ms;}
.header .loginbtn:before { display:inline-table; position:absolute; left:0px; top:50%; margin-top:-15px; content: ''; width:30px; height:30px; background:url(../../images/RWD/setup.svg) no-repeat; background-size:100%; background-position:left center;transform: rotate(0deg);-webkit-transform: rotate(0deg);-webkit-transition: 300ms;
transition: 300ms;}
.header .loginbtn.hover:before{transform: rotate(135deg);-webkit-transform: rotate(135deg);}
@media screen and (min-width: 1620px) {
.header .loginbtn { top:11px;}
}
#logouttext { display:none;}


.header .loginbtn .new{ position:absolute; display:none; height:15px; width:15px; line-height:15px; overflow:hidden; left:-12px; top:-6px; border-radius:50%; background-color:#F00; color:#FFF; padding:3px; font-size:80%; text-align:center;
-webkit-animation: bounceZ 4s infinite ease-in-out 300ms ;
animation: bounceZ 4s infinite ease-in-out 300ms;}
@-webkit-keyframes bounceZ {
0%, 10%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
3% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
7% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
9% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}
@keyframes bounceZ {
0%, 15%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
3% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
7% {
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
9% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
}


.header .loginbtn .arr  {
position:absolute;
right:0;
top:50%;
margin-top:-10px;
display:inline-table;
width: 20px;
height: 20px;
box-sizing: border-box;
text-align:center;
-webkit-animation: bounceS 1.2s infinite ease-in-out 300ms ;
animation: bounceS 1.2s infinite ease-in-out 300ms;
}
.header .loginbtn.hover .arr {-webkit-animation:none;animation:none;}

.header .loginbtn .arr::before,.loginbtn .arr::after {
content: '';
position: absolute;
width: 90%;
top: 20%;
left: 10%;
-webkit-transition: all 300ms;
transition: all 300ms;}

.header .loginbtn .arr::before {
width: 0;
height: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 11px solid #fff;
transform: rotate(0deg);-webkit-transform: rotate(0deg);
}
.header .loginbtn .arr::after {
height: 0px;
background: #ffffff;
margin-top:4px;
transform: rotate(0deg);-webkit-transform: rotate(0deg);
}

.header .loginbtn.hover .arr::before {
left:8px;
top:0px;
border-left: 1px #FFF solid ;
border-right: 1px #FFF solid ;
border-top: 9px #FFF solid;
border-bottom: 9px #FFF solid;
height:0px;
transform: rotate(225deg);-webkit-transform: rotate(225deg);
}
.header .loginbtn.hover .arr::after {
left:0px;
height: 2px;
transform: rotate(-135deg);-webkit-transform: rotate(-135deg);
}

@-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: 768px) {
.header .loginbtn{ background-size:auto 100%; top:8px; right:65px; border:1px #FFF solid;}
.header .loginbtn:before {background:url(../../images/RWD/setup.svg); background-size: auto 100%;}
.header .loginbtn.open { top:-40px; }
.header .loginbtn.hover{ }
}
/* --------------------
上方會員區按鈕結束
--------------------- */


/* --------------------
會員區開始
--------------------- */
.memberarea {
position: fixed;
display:none;
z-index:999;
background-color:rgba(202,211,224,0.95);
padding:20px 5% 20px 4%; top:60px; width:100%; box-sizing: border-box;
-moz-box-shadow:0px 11px 9px -9px #000;
-webkit-box-shadow:0px 11px 9px -9px #000;
box-shadow:0px 11px 9px -9px #000;
}
@media screen and (max-width: 1620px) {
.memberarea {top:52px;}
}
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 768px) {
.memberarea {
left:0;
top:50px;
-webkit-transition: left 300ms;
transition: left 300ms;
}
#wrapper.open .memberarea {left: -230px;}
}

.memberarea .login,.memberarea .join,.memberarea .memberlink,.memberarea .logout{ position:relative; overflow:hidden; float:right; box-sizing: border-box; width:32%;border-left:1px #AAA solid; margin-right:2%; padding-left:2%; padding-bottom:12px;}



.memberarea .memberlink {border-left: none;padding-left:0;}
.memberarea .login { margin-right:0;}
.memberarea .logout { width:50%;  padding-left: 120px;}
.memberarea .logout .level { display: block; width: 100px; position: absolute; text-align: center; left: 10px; padding-top: 40px;}
.memberarea .logout .level img {width: 100%;}
.memberarea .logout .level .name ,.memberarea .logout .level .nameR{display: inline-table; font-size: 90%; font-weight: 400; color: #FF0000; background:#ffffff; border-radius: 10px;  padding: 2px 10px; line-height: 110%; margin-top: 3px;}
.memberarea .logout .level .nameR {color: #ffffff; background:#FF0000;}
.memberarea .logout .level .poit{position: absolute; display: inline-table; width: 25px; height: 25px; line-height: 25px; color: #ffffff; background:#FF0000; font-size: 70%; border-radius: 50%; top: 30px; right: 5px; }

.memberarea .line { display:block; background-color:#AAA; width:90%; height:1px; margin:20px 0 10px;}
.memberarea .title { font-size:150%; display:block; margin-bottom:10px; color:#000; }
@media screen and (min-width: 1620px) {
.memberarea { width:1600px; left:50%; margin-left:-800px;}
.memberarea .login,.memberarea .join,.memberarea .memberlink { padding-left:5%;}
.memberarea .title { font-size:170%; }
}
@media screen and (max-width: 950px) {
.memberarea { padding:20px 1% 30px 1%; border-bottom:1px #AAA solid;}

}

@media screen and (max-width: 768px) {
.memberarea { padding:10px 0 0; font-size:90%;}
.memberarea .login,.memberarea .join,.memberarea .memberlink,.memberarea .logout{ margin:0 0 10px; padding:2% 2% 2%;}
.memberarea .title { font-size:180%; margin-bottom:3px; font-weight:200; }
.memberarea .line {width:100%; }
.memberarea .login{ width:55%; border:0; padding-bottom:12px; border-left:1px #AAA solid;}
.memberarea .join{ width:45%; border:0; padding-bottom:12px;}
.memberarea .logout{ width:50%;padding:2% 0% 2% 100px; padding-bottom:12px;}
.memberarea .logout .level { width: 80px;}
.memberarea .logout .lpoint{ font-size:100%;}
.memberarea .memberlink{ float:none; background-color:#FFF; width:100%; text-align:center; margin-bottom:0; padding-top:10px; padding-left:2%; padding-bottom:30px; border-top:1px #AAA solid;}
.memberarea .memberlink.l{float:right; background:none; text-align:left; width:50%; margin:0 0 10px; padding:2% 1% 2%; border-top:0px; }
}
@media screen and (max-width: 520px) {
.memberarea .logout{ width:100%; padding:2% 2% 2% 120px; padding-bottom:12px; border: none;}
.memberarea .logout .level { width: 100px; left: 10px; padding-top: 35px;}
.memberarea .memberlink,.memberarea .memberlink.l{ float:none; background-color:rgba(255,255,255,0.80); width:100%; text-align:center; margin-bottom:0; padding-top:10px; padding-left:2%; padding-bottom:30px; border-top:1px #AAA solid;}
}

.memberarea .logout .submit{ position:relative; display:table; font-size:100%; margin-top:10px; background:rgba(100,100,100,0.8); border-radius:5px; color:#FFF; font-weight:bold; padding:5px 20px;-moz-box-shadow:0px 10px 10px -7px #999999; -webkit-box-shadow:0px 10px 10px -7px #999999; box-shadow:0px 10px 10px -7px #999999; -webkit-transition: all 300ms; transition: all 300ms;}
.memberarea .logout .submit:hover { background:rgba(100,100,100,1);}
.memberarea .logout .uname { font-size:115%; color:#069; font-weight:bold;}
.memberarea .logout .point { font-size:150%; color:#F00; margin-right:5px;}
.memberarea .logout .data { font-size:75%; white-space:nowrap; border-radius: 3px; background-color: #999; color: #fff; padding: 3px 6px;}
.memberarea .logout .btn_buy {position:relative; display:inline-table; margin-left:3px; font-size:90%; background:#e25682; border-radius:5px; color:#FFF; font-weight:bold; padding:3px 6px;}

.memberarea .join a { display:table; font-size:110%; margin-top:10px; background:rgba(14,118,188,0.8); border-radius:5px; color:#FFF; font-weight:bold; padding:5px 20px; -moz-box-shadow:0px 10px 10px -7px #999999; -webkit-box-shadow:0px 10px 10px -7px #999999; box-shadow:0px 10px 10px -7px #999999;}
.memberarea .join a:hover { background:rgba(14,118,188,1); }
@media screen and (max-width: 768px) {
.memberarea .join a { font-size:120%;}
}


/*
.memberarea .login .submit{ position:relative; display:table; font-size:110%; margin-top:10px; background:rgba(255,50,106,0.8); border-radius:5px; color:#FFF; font-weight:bold; padding:5px 20px;-moz-box-shadow:0px 10px 10px -7px #999999; -webkit-box-shadow:0px 10px 10px -7px #999999; box-shadow:0px 10px 10px -7px #999999; -webkit-transition: all 300ms; transition: all 300ms;}
.memberarea .login .submit:hover { background:rgba(255,50,106,1);}
.memberarea .login .submit::after  { position:absolute; top:50%; right:5px; content: '';box-sizing: border-box; display:inline-table; width:0px; height:0px; border-radius:50%; border:0px #FFF solid; border-bottom:0px solid transparent;
-webkit-transition: all 300ms; transition: all 300ms;}


.memberarea .login.verification .submit { background:rgba(163,50,80,1); padding:5px 30px 5px 20px;}
.memberarea .login.verification .submit::after { position:absolute; top:50%; margin-top:-10px;content: '';box-sizing: border-box; display:inline-table; width:20px; height:20px; border-radius:50%; border:0px solid transparent; border-top:0px solid transparent;
-webkit-animation: bounceR 1.2s infinite ease-in-out;
animation: bounceR 1.2s infinite ease-in-out;}
.memberarea .login.verification input { background-color:#E0E0E0; readonly}
@-webkit-keyframes bounceR {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% ,60%{border-top: 3px solid #FFFFFF; }
90% {border-top: 0px solid transparent}
100% {
-webkit-transform: rotate(560deg);
transform: rotate(560deg);
}
}
@keyframes bounceR {
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
40% ,60%{border-top: 3px solid #FFFFFF; }
90% {border-top: 0px solid transparent}
100% {
-webkit-transform: rotate(560deg);
transform: rotate(560deg);
}
}
.prompt { background-image:url(../../images/RWD/caveat.png); background-repeat:no-repeat; background-size:23px auto;  background-position:5px 5px; line-height:130%; display:inline-table; border-radius:5px; padding:5px 5px 5px 32px; color:#FFF; margin:0 0 10px; background-color:#F00;}

@media screen and (max-width: 768px) {
.memberarea .login .submit { font-size:120%;}
}
.memberarea .login .des { display:block; margin-bottom:10px;}

.memberarea .login .loginform { display:inline-table; font-size:100%; width:28%;}
.memberarea .login input { width:72%; border:1px #999 solid; margin-bottom:5px; background-color:#FFF; border-radius:5px; box-sizing: border-box; padding:5px;}
.memberarea .login input.code { width:35%; margin-right:5px;}
@media screen and (max-width: 768px) {
.memberarea .login .loginform { font-size:110%;}
}
@media screen and (min-width: 1300px) {
.memberarea .login .loginform { font-size:110%; display:block;}
.memberarea .login input { font-size:110%; width:300px;}
.memberarea .login input.code {}
}
*/

.memberarea .memberlink > a { position:relative; display:inline-table;box-sizing: border-box; margin:5px 3px 5px 0px; padding:5px; background-color:#FFF; color:#024b7c; font-size:105%; width:45%; text-align:center; border-radius:5px; border:1px #024b7c solid;}
.memberarea .memberlink > a:hover { background-color:#024b7c; color:#FFF;}

@media screen and (min-width: 769px) {
.memberarea .memberlink.l { width:45%;}
.memberarea .memberlink.l > a { width:31.5%;}
}

@media screen and (max-width: 950px) {
.memberarea .memberlink > a{ font-size:100%;margin:5px 2px 5px 0px;}
}
@media screen and (max-width: 768px) {
.memberarea .memberlink > a{ margin:1%; width:47%; font-size:110%;}
}
.memberarea .memberlink > a .new{}
.memberarea .memberlink > a .new{ position:absolute;  height:15px; width:15px; line-height:15px; overflow:hidden; right:-6px;  border-radius:50%; background-color:#F00; color:#FFF; padding:3px; content:'N'; font-size:65%; text-align:center;
-webkit-animation: bounceS 1.2s infinite ease-in-out;
animation: bounceS 1.2s infinite ease-in-out; }


.memberarea .loginbtn { position:absolute; right:10px; margin-top:-10px; border-radius:8px; width:40px; height:40px; background-image:none;  background-color:#555;  box-sizing:border-box; z-index:999;}
.memberarea .loginbtn::before,.memberarea .loginbtn::after {
content: '';
position: absolute;
display:block;
height:3px;
width: 70%;
left:15%;
top:45%;
background-color:#FFF;
transform: rotate(45deg);-webkit-transform: rotate(45deg);
}
.memberarea .loginbtn::before{  transform: rotate(-45deg);-webkit-transform: rotate(-45deg); }
@media screen and (max-width: 768px) {.memberarea .loginbtn { margin-top:0px;} }

/* --------------------
會員區結束
--------------------- */


/* --------------------
單元開始
--------------------- */
.topbanindex { position:relative; width:100%; height:330px;margin-top:0px; background-image:url(../../images/RWD/ban_indexTop.jpg); background-size:cover; background-repeat:no-repeat; background-position:20% 0% ; }
.topbanunit {position:relative; width:100%; height:176px;margin-top:0px; background-image:url(../../images/RWD/ban_index.jpg); background-size:cover; background-repeat:no-repeat; background-position:10% 40% ;}
/*.indexSlogan1 { position:absolute; right:7%; height:52%; top:37%;}*/
.indexSlogan1 { position:absolute; right:3%; height:65%; top:27%;}
.unitSlogan1 { position:absolute; right:1%; height:60%; top:40%;}
@media screen and (min-width: 1620px) {
.topbanindex {width:100%; }
.topbanunit {width:100%;height:190px; }
.unitSlogan1 {right:8%;}
}
@media screen and (max-width: 1366px) {
.indexSlogan1 {  right:2%; height:58%; top:34%;}
}
@media screen and (max-width: 768px) {
.topbanindex { margin-top:0px; height:300px; background-image:url(../../images/RWD/ban_indexTop_mobile.jpg); background-position:0% 40%;}
/*.indexSlogan1 {left:45%; height:auto; width:50%; top:auto; bottom:15%;}*/
.indexSlogan1 {display: none;}
.topbanunit { margin-top:0px; height:160px; }
.unitSlogan1 { height:auto; width:auto; height: 60%; top:auto; bottom:0%; right: 0%}
}
@media screen and (max-width: 520px) {
.topbanindex { margin-top:0px; height:300px; background-position:center 10%;}
.indexSlogan1 {left:25%; height:auto; width:70%; top:auto; bottom:20%;}
.topbanunit {  height: 105px; background: none;}
.unitSlogan1 {display: none;}
.listindexT { left:auto; right:5%; height:auto; width:70%; top:auto; bottom:15%;}
}
.topbanindex #fleche {
width: 100%;
position: absolute;
bottom:5%;
text-align: center;
-webkit-animation: bounce 1.5s infinite ease-in-out;
-moz-animation: bounce 1.5s infinite ease-in-out;
-o-animation: bounce 1.5s infinite ease-in-out;
animation: bounce 1.5s infinite ease-in-out;
z-index: 0;
}


@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
.bounce {
-webkit-animation-name: bounce;
animation-name: bounce;
}

.slidertitle { text-align:center; font-size:250%; padding-top:3%; font-weight:lighter;}
.more { text-align:center;}
.more a{font-size:110%; color:#ba4a7b;}
.slider {position: relative; width: 100%; margin:1% auto 5%; }
@media screen and (min-width: 1620px) {
.slider { width: 1600px; margin:1% auto 5%; }
.slidertitle {font-size:300%;}
}
@media screen and (max-width: 768px) {
.slidertitle {font-size:210%; padding-top: 8%;}
.more {  margin-bottom: 2%;}
.more a{font-size:130%;}
}
.slick-slide {margin: 0px 5px;}
@media screen and (max-width: 1300px) {
.slick-slide {margin: 0px 3px;}
}
@media screen and (max-width: 768px) {
.slick-slide {margin: 0px;}
}
.slick-slide img { width: 100%; margin-bottom:5px; }
.slick-slide { text-align:center; }
.slick-slide a{ color:#666; font-size:80%; position: relative; display: inline-table;}
@media screen and (max-width: 520px) {
.slick-slide a{ font-size:75%; }
}
@media screen and (min-width: 1620px) {
.slick-slide a{ font-size:95%;}
}


.banindex { position:relative; width:100%; margin-top:30px; text-align:center; background-image:url(../../images/RWD/ban_index.jpg); background-size:cover; background-repeat:no-repeat; background-position:center; background-attachment: fixed; color:#FFF; }
.banindex .logo {width:250px; margin:auto auto 20px;}
.banindex #fleche { width: 100%; text-align: center; padding:10px 0; z-index: 4; }
@media screen and (min-width: 1620px) {
.banindex{ width:1600px; margin:30px auto 0;}
}
@media screen and (max-width: 480px) {
.banindex #fleche img { width:35px;}
}
@media screen and (max-width: 1024px) {
.banindex { background-attachment:scroll;}
}
@media screen and (max-width: 768px) {
.banindex { background-image:url(../../images/RWD/ban_index_mobile.jpg); background-attachment:scroll ; margin-bottom: 8%;}
.banindex .logo {top:15%;}
}

.banindex .slg { font-size:26px; color:#FFF; padding-bottom:40px; text-align:center; width:100%; text-shadow:0px 0px 3px #000;}
.banindex .slg .slgb { display:inline-table; font-size:22px; background-color:#F0F;text-shadow:none; border-radius:50%; padding:3px 14px; background: rgba(255,50,106,0.6);}
.banindex .slg .b1{font-size:36px; line-height:160%;}
.banindex .slg .b1 b { font-size:58px; letter-spacing:-5px; margin:auto 4px; font-weight:100;}
@media screen and (max-width: 480px) {
.banindex .slg .slgb { font-size:21px;}
.banindex .slg .b1{ font-size:30px;}
.banindex .slg .b1 b { font-size:48px; font-weight:bold;}
}
.banindex .ba { position:absolute; left:49%; bottom:0; height:5%; width:2%;}
.banindex .lab { position:absolute; left:0; bottom:0; height:5%; width:49%; background-color:#FFF;}
.banindex .rab { position:absolute; right:0; bottom:0; height:5%; width:49%; background-color:#FFF;}
@media screen and (max-width: 768px) {
.ba,.lab,.rab { display:none;}
.banindex .slg { padding-bottom:20px;}
}



/* --------------------
返回按鈕開始
--------------------- */

.viewbackbnt {position: relative; width: 100%; margin: auto; box-sizing: border-box; padding: 10px 1%; text-align: right;}

a.ICON_back { display: inline-table; position: relative; height: 46px;line-height: 41px; font-size: 150%; box-sizing: border-box; color: #353535; border-radius: 10px; border: 1px #65b3ad solid; padding: 4px 30px 4px 50px;}
a.ICON_back:before {position:absolute; display:inline-table; content: ""; left:5px; border-radius:50%; width:35px; height:35px; background-repeat:no-repeat; background-size:100%; background-color:#65b3ad; border: 3px #65b3ad solid;  background-image:url(../../images/RWD/ICON_back.svg);}

@media screen and (min-width: 1620px) {
	.viewbackbnt { width: 1600px;}
}
@media screen and (max-width: 1200px) {
	a.ICON_back {font-size: 130%; height: 40px;line-height: 35px; padding: 4px 20px 4px 42px;}
	a.ICON_back:before{width:30px; height:30px;border: 2px #65b3ad solid;}
}
@media screen and (max-width: 950px) {
	.viewbackbnt { padding: 5px 1%; }
	a.ICON_back {font-size: 100%; height: 36px;line-height: 28px; padding: 4px 20px 4px 42px;}
	a.ICON_back:before{width:25px; height:25px;border: 2px #65b3ad solid;}
}
@media screen and (max-width: 520px) {
	.viewbackbnt { display: none;}
}
/* --------------------
z返回按鈕結束
--------------------- */


.listindextitle { text-align:center; font-size:250%; padding-top:3%; font-weight:lighter;}
.listindex { position:relative; margin:1% auto 5%; text-align:center; }
.girllist { max-width:1366px;}
.listindex .page { position:relative; width:100%; text-align:center; font-size:110%; margin-bottom:2%;}
.listindex .page a{color:#ba4a7b; margin:auto 3px; padding:4px 12px; font-size:110%; border-radius:5px; border:0; border: 1px solid #ba4a7b; white-space:nowrap;}
.listindex .page a:hover,.listindex .page a.hover { background: #ba4a7b; color: #fff; }
@media screen and (max-width: 768px) {
.listindextitle {font-size:210%; padding-top:3%; }
.listindex .page { margin-top: 0%; margin-bottom:1%;}
.listindex .page a {display: inline-table; box-sizing: border-box; font-size:100%;  margin:auto -1px; padding:3px 6px; min-width: 32px;}
}
@media screen and (max-width: 520px) {
.listindextitle { padding-top:0; }
}
@media screen and (min-width: 1300px) {
.listindex { width:100%; }
}
@media screen and (min-width: 1620px) {
.listindex { max-width:1600px; }
.girllist { width:1366px;}
.listindextitle {font-size:300%;}
}

.listindex .ListPicM { position:relative; display:inline-table; width: 31%; margin: 0.5% 0.9% 2%;}
.listindex .ListPicM img { width: 100%; box-shadow: 0px 0px 5px 0px #000000;  opacity: 0.85;  filter: alpha(opacity=85);  -webkit-transition: all 100ms; transition: all 100ms;}
.listindex .ListPicM .name { display: block;  color: #444444; font-size: 110%; margin-top: 20px; -webkit-transition: all 100ms; transition: all 100ms;}
.listindex .ListPicM:hover img { box-shadow: 0px 0px 7px 3px #ba4a7b; opacity: 1.0;  filter: alpha(opacity=100);}
.listindex .ListPicM:hover .name { color: #ba4a7b;}

@media screen and (max-width: 768px) {
.listindex .ListPicM img { opacity: 110;  filter: alpha(opacity=100); }
}
@media screen and (max-width: 1200px) {
	.listindex .ListPicM {width: 44%; margin: 1% 1.5% 4%;}
	.listindex .ListPicM .name {font-size: 105%; margin-top: 10px; }
}
@media screen and (max-width: 950px) {
	.listindex .ListPicM {width: 45%; margin: 3% 1% 1%;}
	.listindex .ListPicM .name {font-size: 105%;}
}
@media screen and (max-width: 520px) {
	.listindex .ListPicM {display:block; width: 95%; margin: 5% auto 6%;}
}

/* --------------------
影片介紹開始
--------------------- */
.view{ position:relative; width:100%; margin:2% auto 5%; text-align:center; }
.viewtitle{ text-align:center; font-size:240%; color: #ba4a7b; padding-top:0%; font-weight:300;}
.viewW { text-align:center; color: #ff0000;}
.viewinfoL {display:table-cell; width: 49%;}
.viewinfoL img { margin-bottom: 20px; width: 100%; max-width: 720px;}
.viewinfo1,.viewinfo2,.viewinfo3 { display:inline-table; width: auto; font-size: 120%; color: #464646;margin-top: 7px; padding: 0 50px 8px;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(90deg,#fff,#fff,#fff),linear-gradient(90deg,#fff,#bbb,#fff);
border:0px transparent solid; border-bottom: 1px transparent solid;

}
.viewinfo2 a{ color: #56b8ea; margin: auto 13px;}
.viewinfo3 a{font-size: 110%; margin: auto 13px; color: #f08661;}
.viewinfoR {display:table-cell; box-sizing: border-box; padding-left: 1%; vertical-align: top;width: 49%; text-align: left;}
.viewinfo {font-size: 150%; color: #333; margin: 20px auto 60px;}
/*#play_view {padding-bottom:62%;}*/
.embedPlayer {width: 800px; height: 533px; }
@media screen and (max-width: 820px) {
	.embedPlayer {width: 380px; height: 253px; }
}
@media screen and (max-width: 1200px) {
	.view {margin:2% auto 10%;}
	.viewtitle {font-size:200%; }
	.viewinfo1,.viewinfo2,.viewinfo3 { font-size: 110%;margin-top: 3px; padding: 0 0 4px;background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#fff,#DDD,#fff); }
	.viewinfoR {padding-left: 1%; }
	.viewinfo {font-size: 130%; margin: 20px auto 50px; width: 98%;}
}
@media screen and (max-width: 950px) {
	.viewW { display: none;}
	.viewtitle {font-size:190%; }
	.viewinfo1,.viewinfo2,.viewinfo3 { font-size: 100%;margin-top: 3px; padding: 0 0 4px;background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#fff,#DDD,#fff); }
	.viewinfoR {padding-left: 1%; }
	.viewinfo {font-size: 120%; margin: 20px auto 30px; width: 98%;}
}
@media screen and (max-width:768px) {
	.viewinfoR {padding-left: 0%; }
	.viewinfo {font-size: 115%; width: 96%;}
}
@media screen and (max-width: 520px) {
.view {margin:2% auto 15%;}
.viewtitle {font-size:150%; padding: 0 1% ; line-height: 120%; }
.viewinfoL ,.viewinfoR{display: block;width: 100%;}
	.viewinfoL img {margin-bottom: 10px;}
	.viewinfo1,.viewinfo2,.viewinfo3 { font-size: 105%;margin-top: 3px; padding: 0 0 4px;background-image:linear-gradient(90deg,#fff,#fff),linear-gradient(90deg,#fff,#DDD,#fff); }
	.viewinfo {font-size: 105%; margin: 10px auto 40px; padding-bottom: 10px;
background-clip:padding-box,border-box;
background-origin:padding-box,border-box;
background-image:linear-gradient(90deg,#fff,#fff,#fff),linear-gradient(90deg,#fff,#CCC,#fff);
border:0px transparent solid; border-bottom: 1px transparent solid;
	}
}
@media screen and (min-width: 1300px) {
.view { width:100%; }
}
@media screen and (min-width: 1620px) {
.view { width:1600px; }
.viewtitle {font-size:300%;}
}
/* --------------------
影片介紹結束
--------------------- */


/* --------------------
播放下載區開始
--------------------- */
.liveplayM{ margin: auto; width: 100%; text-align: center; min-height: 280px; background-color: #f0f0f0;}
.downlandM{ margin: auto; text-align: center; margin: 10px auto;}
.downlandM a{ position: relative; display: inline-table; padding: 9px 12px 9px 65px; color: #fff; border-radius: 10px; background-color: #f08661; font-size: 150%;box-shadow:0px 10px 10px -7px #999999;}
.downlandM a::before{ position: absolute; display:inline-table; content: ""; left: 12px; top: 50%; margin-top: -25px;  width: 50px; height: 50px; background-image: url(../../images/RWD/ICON_downland_w.svg); background-size: 100%;}
@media screen and (max-width: 1200px) {
.downlandM a{border-radius: 8px;font-size: 130%;}
}
@media screen and (max-width: 768px) {
.downlandM a{  padding: 9px 10px 9px 53px;font-size: 110%;}
.downlandM a::before{ left: 10px; top: 50%; margin-top: -20px;  width: 40px; height: 40px;}
}
/* --------------------
播放下載區結束
--------------------- */

/* --------------------
購買區開始
--------------------- */
.Pinfo{ position:relative; width:100%; text-align: center; font-size: 120%; color: #555; }
.Pinfo .r{ color: #FF5053;}
.Pinfo b{ font-size: 130%; color: #ff0000; margin-left: 5px;}
.Pinfo a{ display: inline-table; box-sizing: border-box; width:20px; height:20px; line-height: 16px; text-align: center; font-size: 110%; color: #ffffff; margin-left: 5px; border-radius: 50%; background-color: #999; margin-bottom: 8px;}
@media screen and (max-width: 1599px) {
	.Pinfo{width: 96%;}
}
@media screen and (max-width: 1200px) {
.Pinfo{ text-align: center; font-size: 110%; }
.Pinfo b{ font-size: 120%; color: #ff0000; margin-left: 5px;}
}
@media screen and (max-width: 768px) {
.Pinfo{ text-align: center; font-size: 100%; }
.Pinfo b{ font-size: 110%; color: #ff0000; margin-left: 5px;}

}

.Binfo{ position:relative; width:100%;}
.Binfo .live ,.Binfo .downland { position: relative; width: 100%; box-sizing: border-box; padding: 5px 15px 5px 115px; margin-bottom: 15px; border-radius: 10px; font-size: 200%; }
.Binfo .live{ border: 3px #e5769d solid; color: #e5769d;}
.Binfo .downland{ border: 3px #56b8ea solid; color: #56b8ea;}
.Binfo .live::before{ position: absolute; display:inline-table; content: ""; left: 15px; top: 50%; margin-top: -43px;  width: 86px; height: 86px; background-image: url(../../images/RWD/ICON_liveplay.svg); background-size: 100%;}
.Binfo .downland::before{ position: absolute; display:inline-table; content: ""; left: 15px; top: 50%; margin-top: -43px;  width: 86px; height: 86px; background-image: url(../../images/RWD/ICON_downland.svg); background-size: 100%;}
.Binfo .s50 {font-size: 75%;}
.Binfo .s { display: block; color: #555; font-size: 70%;}
.Binfo .r {color: #ea5656;}
.Binfo .isbuy .r { margin-left: 10px;}
.Binfo .isbuy::after {position: absolute; display: inline-table; content: ""; right: 5px; top:5px; width: 40px; height: 40px; background-image: url(../../images/RWD/ICON_isbuy.svg); background-size: 100%;}
.Binfo .info {display: table-cell;vertical-align:middle; width:100%;}
.Binfo .Buybat { display: table-cell;vertical-align: middle; padding-left: 15px; text-align: right; border-left: 1px #eee solid;}
.Binfo .Buybat a{position: relative; display: inline-table; box-sizing: border-box; width: 150px; text-align: left; font-size: 60%; padding: 8px 10px; font-weight: 600; color: #fff; border-radius: 6px; margin: 2px;}
.Binfo .Buybat a::after{position:absolute; content: ">"; right: 5px;}
.Binfo .live .Buybat a{background-color: #e5769d;}
.Binfo .downland .Buybat a{background-color: #56b8ea;}
@media screen and (max-width: 1599px) {
.Binfo .live ,.Binfo .downland {width: 98%; }
.Binfo .live{ border: 2px #e5769d solid; color: #e5769d;}
.Binfo .downland{ border: 2px #56b8ea solid; color: #56b8ea;}
}
@media screen and (max-width: 1200px) {
.Binfo .live ,.Binfo .downland {padding: 10px 10px 10px 90px; font-size: 180%; }
.Binfo .live::before{ left: 5px; top: 50%; margin-top: -40px;  width: 80px; height: 80px; }
.Binfo .downland::before{ left: 5px; top: 50%; margin-top: -40px;  width: 80px; height: 80px; }
.Binfo .Buybat { padding-left: 10px; }
.Binfo .Buybat a {width: 115px; }
	.Binfo .isbuy::after{ width: 35px; height: 35px;}
}
@media screen and (max-width: 950px) {
.Binfo .live ,.Binfo .downland { width: 96%; margin: auto auto 15px;  padding: 0px 10px 3px 10px; font-size: 170%; }
.Binfo .s {font-size: 65%; }
.Binfo .isbuy .r { display: block; margin-top: 3px; margin-left: auto;}
.Binfo .live::before{ left: 5px; top:0px; margin-top: auto; width: 63px; height: 63px; }
.Binfo .downland::before{ left: 5px; top:0px; margin-top: auto;  width: 63px; height: 63px; }
.Binfo .info {display:block; width: auto; margin-left: 65px;}
.Binfo .Buybat { display:block; width: auto; line-height: 100%; vertical-align: middle; margin:0;  padding-left: 0px; text-align: center; border-left: none;}
.Binfo .Buybat a {margin:0; padding: 6px 8px;width: 105px;   }
}
@media screen and (max-width: 768px) {
.Binfo .live ,.Binfo .downland { font-size: 150%; min-height: 59px; }
.Binfo .s {font-size: 60%;line-height: 100%;}
.Binfo .live::before{ left: 10px; top:0px; margin-top: auto; width: 55px; height: 55px; }
.Binfo .downland::before{ left: 10px; top:0px; margin-top: auto;  width: 55px; height:55px; }
.Binfo .info {display:block; width: auto; margin-left: 60px; margin-bottom: 2px;}
.Binfo .Buybat a {margin:0; padding: 6px 8px;width: 95px;   }
	.Binfo .isbuy::after{ width: 25px; height: 25px;}
}
@media screen and (max-width: 520px) {
.Binfo .live ,.Binfo .downland {  }
.Binfo .live::before{ left: 5px; top:50%; margin-top: -40px; width: 80px; height: 80px; }
.Binfo .downland::before{ left: 5px; top:50%; margin-top: -40px;  width: 80px; height: 80px; }
.Binfo .info {display:block; width: auto; margin-left: 80px;}
.Binfo .Buybat { display:block; width: auto; margin-left: 80px; padding-left: 0px; text-align: left; border-left: none;}
.Binfo .Buybat a {margin:0; padding: 4px 8px; text-align: center; width:auto;}
	.Binfo .Buybat a::after{display: none;}
	.Binfo .isbuy::after{ width: 30px; height: 30px;}
}

@media screen and (min-width: 1620px) {

}
/* --------------------
購買區結束
--------------------- */


/* --------------------
影片介紹頁-推薦開始
--------------------- */

.viewmore{position: relative; background: #fbecec; padding-bottom: 1px;}
/* --------------------
影片介紹頁-推薦結束
--------------------- */

.listindex .room_status { position:relative; display:inline-table; width:135px; margin:5px 3px 10px; padding:3px 5px 5px; text-align:left; font-size:75%;
-moz-box-shadow:0px 12px 10px -7px #999999;
-webkit-box-shadow:0px 12px 10px -7px #999999;
box-shadow:0px 14px 12px -11px #999999;
}
.listindex .room_status img { width:100%; height: 118px;}
.listindex .room_status .name { display:block; width:100%; text-align:center; color:#FFF; font-size:90%; margin:2px auto;}
@media screen and (min-width: 1620px) {
.listindex .room_status { font-size:95%;}
}
@media screen and (max-width: 768px) {
.listindex .room_status { width:124px; font-size:85%; margin:5px 2px 8px;}
}
@media screen and (max-width: 520px) {
.listindex .room_status { width:29%;height: auto; margin:5px 0px 0px; padding:3px 5px 3px;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;
}
}
.listindex .status1 { background-color:#ba4a7b;}
.listindex .status1:before {content:"秀舞中"; color:#FFF; text-shadow:1px 1px 0px #000;}
.listindex .status1 a.roomlink { display:block; width:100%; text-align:center; margin:auto auto 0; background-color:#FFF; color:#ba4a7b;}
.listindex .status1 {
-webkit-animation: s1 0.5s infinite ease-in-out;
-moz-animation: s1 0.5s infinite ease-in-out;
-o-animation: s1 0.5s infinite ease-in-out;
animation: s1 0.5s infinite ease-in-out;
}
@-webkit-keyframes s1{
0%,50% { background-color:#ba4a7b;}
51%,100% { background-color:#ff7198;}
}
@keyframes s1 {
0%,50% { background-color:#ba4a7b;}
51%,100% { background-color:#ff7198;}
}

.listindex .status2 { background-color:#7897c0;}
.listindex .status2:before {content:"等待中"; color:#FFF; text-shadow:1px 1px 0px #000;}
.listindex .status2 a.roomlink { display:block; width:100%; text-align:center; margin:auto auto 0; background: rgba(0, 0, 0, 0.3); color:#FFF;}
.listindex .status3 { background-color:#46bbae;}
.listindex .status3:before {content:"一對一等待中"; color:#FFF; text-shadow:1px 1px 0px #000;}
.listindex .status3 a.roomlink { display:block; width:100%; text-align:center; margin:auto auto 0; background-color:#FFF; color:#ba4a7b;}
.listindex .status4 { background-color:#ba4a7b;}
.listindex .status4:before {content:"一對一忙碌中"; color:#FFF; text-shadow:1px 1px 0px #000;}
.listindex .status4 a.roomlink { display:block; width:100%; text-align:center; margin:auto auto 0; background: rgba(0, 0, 0, 0.3); color:#FFF;}
.listindex .status5 { background-color:#999;}
.listindex .status5:before {content:"離線中"; color:#FFF; text-shadow:1px 1px 0px #000;}
.listindex .status5 a.roomlink { display:block; width:100%; text-align:center; margin:auto auto 0; background: rgba(0, 0, 0, 0.3); color:#FFF;}
@media screen and (max-width: 480px) {
.status1:after,.status2:after,.status3:after,.status4:after,.status5:after { font-size:120%;}
}
/* --------------------
單元結束
--------------------- */


/* --------------------
footer開始
--------------------- */

.footer{
position: relative;
display: block;
color: #FFFFFF;
padding:0 0 30px; margin: 70px auto 0; width:100%; background: rgba(0%,0%,0%,0.75); box-sizing: border-box; border-top: 1px rgba(0%,0%,0%,1) solid;
text-align: center;
-webkit-transition: all 300ms;
transition: all 300ms;
overflow: visible;
}
.footer img { width: 200px;}
.footer a {
  display: inline-table; margin: 30px auto 15px; color:#fed2e5;font-size: 160%; text-align: center;font-weight: 300;
}
@media screen and (max-width: 768px) {
	.footer{padding:0 0 15px; margin-top: 60px;}
	.footer img { width: 180px; }
}
.footer .code {position: absolute; left: 5px; top:5px; display: block;  font-size: 65%; color:rgba(255%,255%,255%,0.3); }
/* --------------------
footer結束
--------------------- */

/* --------------------
向上箭頭開始
--------------------- */
.gotop {position: fixed; box-sizing: border-box; left: -50px;bottom: 10px; display: inline-table; width: 50px; height: 50px; text-align: center; border-radius: 5px; background: rgba(0,0,0,0.6);
transform: rotate(180deg);-webkit-transform: rotate(180deg);
-webkit-transition: all 300ms;
transition: all 300ms;}
.show {left: 10px;}
.gotop img { height: 14px; margin-top: 18px;}
.gotopH {bottom:153px;}
@media screen and (max-width: 768px) {
.gotopH {bottom:115px;}
}
/* --------------------
向上箭頭結束
--------------------- */

/* --------------------
登入頁面開始
--------------------- */
.loginindex {position: relative; width: 100%; max-width: 950px; border-radius: 10px; box-sizing: border-box; border: 1px #d9d9d9 solid; margin: 5% auto 8%;background: linear-gradient(90deg, #f0e9ea 50%, #ffffff 50%);}
.logininfo ,.loginblock { display:inline-block; width: 49.5%; box-sizing: border-box; vertical-align: middle;}
.logininfo { padding: 0 0 0 10%;}
.logininfo a {color:#007dc5;}
.logininfo .title{display: block;font-size: 140%; font-weight: lighter; }
.logininfo .info{display: block;font-size: 105%; line-height: 170%;}
.logininfo .link{display: block;font-size: 105%; line-height: 170%;}

.loginblock { padding: 5% 5%; }
.loginblock .title{display: block;font-size: 180%; }
.loginblock .item ,.login .item  { display: block; margin:10px auto 10px;position: relative;}
.loginblock input ,.login input{width:100%; box-sizing: border-box; padding: 21px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.loginblock input:focus ,.login input:focus{border: 1px solid #a0a0a0;background-color: #ffffff;box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}
.loginblock label ,.login label{ position: absolute;font-size: 110%;left:10px;top:12px; color: #999;cursor: text; -webkit-transition: all 200ms; transition: all 200ms;}
.loginblock .item.M label ,.login .item.M label{ top:5px;font-size:90%; color: #666;}

.loginblock #login_valid_M ,.login #login_valid{width: 40%;}
.loginblock .submit ,.loginblock .submit:focus ,.login .submit ,.login .submit:focus{display:block;   border: none; padding: 12px 0; border-radius: 5px; background-color: #e25682; color: #fff; font-size: 130%;box-shadow: 0px 10px 10px -7px #999999;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
.login .submit ,.login .submit:focus{font-size: 120%; padding: 8px 0;}

.prompt { background-image:url(../../images/RWD/caveat.png); background-repeat:no-repeat; background-size:23px auto;  background-position:5px 5px; line-height:130%; display:inline-block; border-radius:5px; padding:5px 5px 5px 32px; color:#FFF; margin:0 0 10px; background-color:#F00;}
.memberlink .prompt { width: 97%; margin-top: 5px; box-sizing: border-box; background-color:#397298;}
.memberlink .prompt a ,.memberlink .prompt a:hover { color: #fff;  text-decoration: underline; font-weight: 600;}

@media screen and (max-width: 1600px) {
	.loginindex{max-width: 750px;margin: 3% auto;}
	.loginblock input ,.login input{ padding: 15px 7px 3px;font-size: 100%;}
	.loginblock label ,.login label{left:7px;font-size: 100%;top:10px;}
	.loginblock .item.M label ,.login .item.M label{ top:1px;font-size:80%}
	.loginblock .submit ,.loginblock .submit:focus {padding: 7px 0;font-size: 120%;}
	.login .submit ,.login .submit:focus{padding: 5px 0;font-size: 110%;}
}
@media screen and (max-width: 1200px) {
	.loginindex {max-width: 950px; }
	.login .item  { display: block; margin:5px auto 5px;position: relative;}
	.logininfo { padding: 0 0 0 8%;}
	.prompt {margin:0 0 5px;}
	.loginblock .prompt{margin:0 0 10px;}
}
@media screen and (max-width: 950px) {
	.loginindex { border-radius: 0px;  border-width:1px 0 1px 0px; }
}
@media screen and (max-width: 520px) {
	.loginindex {background:none; border: 0; margin-top: 0%;}
	.logininfo ,.loginblock { display:inline-block; width: 100%; padding: 5% 15%; }
	.loginblock .title{font-size: 210%; text-align: center; font-weight: lighter; }
	.loginblock .submit ,.loginblock .submit:focus{display:block; margin: auto;}
	.loginindex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    /* optional */
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
	.logininfo {order: 2; background-color: #f0e9ea;}
	.loginblock {order: 1; padding-top: 0%; }

}
/* --------------------
登入頁面結束
--------------------- */



/* --------------------
購點頁面開始
--------------------- */
.buypointindex {position:relative; text-align: center;}
.buypointindex .title { display: block; width: 100%; text-align: center; font-size: 300%;  padding-top: 3%; margin-bottom: 10px; font-weight: lighter;text-shadow: 1px 1px #fff;}
.buypointindex .warning{ display: block;width: 100%; color: #000; font-size: 110%; margin-bottom: 10px; text-shadow: 1px 1px #fff; }
.buypointindex .warning div{ display: inline-table; }
.buypointindex .warning a{font-weight: 600; color: #000; text-decoration: underline;}
.buypointindex .info { display: block; font-size: 110%; margin-top: 10px;}
.buypointindex .info a{ color: #5480ff;}

.buypointblock1 ,.buypointblock2 {position: relative;display: flex; flex-wrap: wrap; padding-top: 15px; padding-bottom: 50px; padding-left: 20%; padding-right: 20%;}
.buypointblock1 {}
.buypointblock2 { padding-top: 0px; margin-bottom: 10px; background-color: #f0e9ea ;  }
.buypointblock2.roc { background: url(../images/flag_roc.png) #f0e9ea no-repeat 0% 0%;background-size: 25%;   }
.buypointblock2 .info div { display: inline-table;}
.buypointblock2 .info { margin-bottom: 15px; margin-top: 0px;}

.buypointindex .typeblock { display: flex; box-sizing: border-box; width: 90%; max-width: 1100px; margin: 15px auto; border-radius: 10px; border: 1px #9C9C9C solid; padding: 25px; background-color: #FFFFFF;}
.buypointindex .typeblock>div:first-child{display: flex;justify-content: center; width: 40%; flex-direction: column; margin-right: 15px;}
.buypointindex .typeblock>div:first-child>.type{margin-top: 10px;}
.buypointindex .typeblock>div:first-child>.type>i{display:inline-block; border-radius: 10px ; margin: 3px 3px; padding: 1px 15px; font-style:normal; border:1px #e25682 solid; color: #e25682; white-space: nowrap;}
.buypointindex .typeblock .title { display: block; text-align: center;font-weight: 400; margin-bottom: 3px; font-size: 100%; padding-top: 0;   color: #dddddd}
.buypointindex .typeblock .typepic { width: 60%;  margin: 0 auto;}

.typetable {display: table;border-collapse:separate; width: 60%; font-size: 105%;}
.typerow {display: table-row;}

.tcl {display: table-cell;vertical-align: middle; padding: 8px 0;border-bottom: 1px #dddddd solid; }
.typetable .typerow.t { background-color: #838383; color: #fff; }
.typetable .typerow.t i{font-size: 50%;  margin-left: 5px; padding: 2px 5px; border-radius: 10px; background-color: #ffffff; font-style: normal; color: #aaaaaa;}
.typerow:nth-child(even) {}
.typerow:nth-child(odd) {background-color: #f1f1f1;}
.typetable .typerow .tcl.t1{color: #FF0004; font-size: 115%; width: 28%;}
.typetable .typerow .tcl.t2{font-size: 115%; width: 28%;}
.typetable .typerow .tcl.t3{font-size: 115%; width: 25%;}
.typetable .typerow .tcl a{font-size: 110%; border-radius: 5px; padding: 1px 5px; background-color: #e25682; color: #fff; white-space: nowrap;}
.typetable .typerow .tcl div{font-size: 80%;width: fit-content; color: #ffffff; border-radius: 10px; background-color: #bbbbbb; padding: 0 12px; margin: auto;white-space: nowrap;}
.typetable .typerow .tcl div i{font-style:normal; margin-right: 5px; }


@media screen and (max-width: 1600px){
	.buypointindex .warning{  font-size: 100%;  }
	.buypointindex .info { font-size: 100%}
	.buypointblock1 ,.buypointblock2 { padding-top: 15px; padding-bottom: 50px; padding-left: 15%; padding-right: 15%;}
	.buypointblock2 { padding-top: 0px;}
	.buypointindex .typeblock {}
	.typetable { font-size: 100%;}
}
@media screen and (max-width: 1200px){
	.buypointblock1 ,.buypointblock2 { padding-top: 10px; padding-bottom: 50px; padding-left: 5%; padding-right: 5%;}
	.buypointblock2 { padding-top: 0px;}
	.buypointindex .typeblock .typepic { width: 70%;  margin: 0 auto;}
	.typetable .typerow .tcl.t1 ,.typetable .typerow .tcl.t2 ,.typetable .typerow .tcl.t3 {font-size: 110%;}
}
@media screen and (max-width: 950px){
	.buypointindex .warning div{ display:block;}
	.buypointblock2 .info div{ display:block;}
}
@media screen and (max-width: 768px){

	.buypointblock1 ,.buypointblock2 { padding-top: 0px; padding-bottom: 50px; padding-left: 0%; padding-right: 0%;}
	.buypointblock1>.title ,.buypointblock2>.title{padding-top: 10%;}
	.buypointindex .warning{ display: block; font-size: 90%; margin-top: 5px; }
	.buypointindex .info { display: block; font-size: 90%; margin-top: 5px;}
	.buypointindex .w500 {width:80%; }
	.buypointindex .typeblock {width: 90%; margin: 10px auto;padding: 15px;}
	.buypointindex .typeblock .typepic {width: 80%; }
	.typetable { font-size: 100%;}
	.tcl { padding: 5px;}
	.typetable .typerow .tcl a { padding: 5px 8px; display: inline-block; margin: 2px auto;}
	.typetable .typerow .tcl div {font-size: 70%;}
}
@media screen and (max-width: 520px){
	.buypointindex .typeblock {flex-direction: column;}
	.buypointindex .typeblock>div{width: 100%}
	.buypointindex .typeblock>div:first-child{width: 100%}
	.buypointindex .typeblock .typepic {width: 50%; }
	.buypointindex .w200 {width:120px; }
	.buypointindex .typeblock {width: 90%;}
	.buypointindex .typeblock>div{margin-top: 8px;}
	.buypointindex .typeblock>div:first-child{ margin-top: 0px;}
	.buypointindex .typeblock>div:first-child>.type { margin-top: 5px; font-size: 90%; }
	.buypointindex .typeblock>div:first-child>.type>i { padding: 1px 10px;}
}



/* --------------------
購點頁面結束
--------------------- */

/* --------------------
購買套票開始
--------------------- */
.buyticketindex {position:relative; text-align: center; }
.buyticketindex > .title { display: block; text-align: center; font-size: 300%;  padding-top: 3%; font-weight: lighter;text-shadow: 1px 1px #fff;}
.buyticketindex .warning{ display: block; color: #000; font-size: 160%; margin-top: 10px;text-shadow: 1px 1px #fff; }
.buyticketindex .warning div{ display: inline-table; }
.buyticketindex > .info {color: #ff1c67; display: block; font-size: 110%; margin-top: 10px;}

.buyticketblock1 {position: relative; padding-top: 15px; padding-left: 10%; padding-right: 10%;}

.buyticketindex .typeblock { display: inline-table; box-sizing: border-box; width: 390px; margin: auto 5px 15px; border-radius: 10px; border: 1px #9C9C9C solid; padding: 15px; background-color: #FFFFFF;}
.buyticketindex .typeblock .title { display: block; text-align: center; font-size: 250%;  padding-top: 0; font-weight: 400; line-height: 100%;}
.buyticketindex .typeblock .title b{font-size: 160%;color: #df4e4e; font-family:Aldhabi; font-weight: 300;}
.buyticketindex .typeblock .ticketpic {width: 40%; margin-bottom: 20px;}
.buyticketindex .typeblock .info { background-color: #f2f2f2; padding: 15px 0 20px;}
.buyticketindex .typeblock .info1{font-size: 140%; display: block; color: #e25682; margin-bottom: 5px; font-style: italic;}
.buyticketindex .typeblock .info1 b{font-size: 150%; font-weight: 400;}
.buyticketindex .typeblock .info2{ display: block; color: #000;}
.buyticketindex .typeblock .warning { font-size: 100%; line-height: 200%; color: #333333;}
.buyticketindex .typeblock a,.buyticketindex .typeblock .isbuy { display: inline-block; font-size: 125%; border-radius: 6px; padding: 5px 15px; margin-top: 10px;  background-color: #e25682; color: #fff;}
.buyticketindex .typeblock .isbuy { background:#888888; font-size: 100%; padding: 5px 8px; line-height: 170%; }
.buyticketindex .warning2 {display: block; padding: 20px 0 10px; margin: 10px auto 0; background: rgba(0,0,0,0.03); max-width: 1200px; border-top: 1px #D8D8D8 solid; border-bottom: 1px #D8D8D8 solid;;font-size: 100%; color: #555555; }
.buyticketindex .warning2 div { margin-bottom: 15px; font-weight: 600;}
.buyticketindex .warning2 a{color: #e25682;}
.buyticketindex .warning2 .s{ font-size: 90%; color: #777777; font-weight: 400;}
.buyticketindex .warning2 .title{ display: block; font-size: 140%; margin: auto auto 10px;  padding: 0;  color: #000000;}



@media screen and (max-width: 1600px){
	.buyticketindex > .title {font-size: 250%;}
	.buyticketindex .warning{  font-size: 130%; margin-top: 5px;}
	.buyticketindex > .info { font-size: 100%;margin-top: 5px;}
	.buyticketblock1 { padding-top: 15px;  padding-left: 2%; padding-right: 2%;}
	.buyticketindex .typeblock {width: 350px;}
	.buyticketindex .typeblock .title { font-size: 220%; }
	.buyticketindex .typeblock .info {  padding: 10px 0 15px;}
	.buyticketindex .typeblock .info1{font-size: 125%; }
	.buyticketindex .typeblock .info1 b{font-size: 150%;}
	.buyticketindex .typeblock .warning {line-height: 170%;}
	.buyticketindex .warning2 {max-width: 1080px;}
}
@media screen and (max-width: 1200px){
	.buyticketblock1  { padding-top: 10px;  padding-left: 0%; padding-right: 0%;}
	.buyticketindex .buyticketblock1 .typeblock .title  { font-weight: 300; }
	.buyticketindex .typeblock {width: 300px;margin: auto 3px 15px; padding: 10px;}
	.buyticketindex .warning2 {max-width: 930px;}
}
@media screen and (max-width: 950px){
	.buyticketindex .typeblock {width: 250px;padding: 7px;}
	.buyticketindex .warning div{ display:block;}
	.buyticketindex .typeblock .warning {font-size: 90%; line-height: 170%;}
}
@media screen and (max-width: 768px){
/*
	.buyticketindex {background: none;}
	.buyticketblock2 ,.buyticketblock2.roc {background: #f0e9ea;}
*/
	.buyticketblock1 { padding-top: 0px; padding-left: 0%; padding-right: 0%;}
	.buyticketindex > .title { font-size: 210%;  padding-top: 0%; font-weight: lighter;}
	.buyticketindex .warning{ display: block; font-size: 95%; }
	.buyticketindex > .info { display: block; font-size: 90%;}
	.buyticketindex .typeblock {width: 31%; font-size: 90%; margin: 10px 2px;}
	.buyticketindex .typeblock .title { font-size: 170%; }
	.buyticketindex .typeblock .warning {font-size: 80%;line-height: 150%; color: #666;}
	.buyticketindex .typeblock a{margin-top: 5px; font-size: 115%;}
	.buyticketindex .warning2 { margin-bottom: 3%;}
}
@media screen and (max-width: 520px){
	.buyticketindex .typeblock .ticketpic {position: absolute; width: 40%; left: -7%; top: 50%; transform:translate(0%, -50%) rotate(-90deg); }
	.buyticketindex .typeblock .norot { width: 30%; left: 2%; top: 50%; transform:translate(0%, -50%) rotate(0deg)}
	.buyticketindex .typeblock .title { font-size: 200%; }
	.buyticketindex .typeblock .info {  padding: 3px 0 5px;}
	.buyticketindex .typeblock .info1{font-size: 125%; margin-bottom: 0px; }
	.buyticketindex .typeblock .info2{font-size: 115%; line-height: 120%;}
	.buyticketindex .typeblock {width: 90%; position: relative; padding-left: 24%; padding-top: 15px}
}


/* --------------------
購買套票結束
--------------------- */

/* --------------------
客服中心開始
--------------------- */

.serviceindex {position: relative; width: 100%; max-width: 1250px; border-radius: 10px; box-sizing: border-box; border: 1px #d9d9d9 solid; margin: 0.5% auto 1%;background: linear-gradient(90deg, #f0e9ea 50%, #ffffff 50%);}
.servicemore {position: relative; width: 100%; max-width: 950px; text-align: center;  margin: 0 auto 5%; font-size: 120%;}
.servicemore .link{color:#007dc5;}
.serviceinfo ,.serviceblock { display:inline-block; width: 49.5%; box-sizing: border-box;}
.serviceinfo { padding: 5% 4.5% 5% 5%; vertical-align: top; }
.serviceinfo .link a ,.serviceinfo .link {color:#007dc5;}
.serviceinfo .title{display: block;font-size: 140%; font-weight: lighter; }
.serviceinfo .warning{ color: #ff6e6e;font-size: 90%;}
.serviceinfo .info{display: block;font-size: 105%; line-height: 170%;}
.serviceinfo .link{display: block;font-size: 105%; line-height: 170%;}
.serviceinfo .msg {box-sizing: border-box; margin-top: 10px; padding: 10px; background: #fff; border-radius: 10px; }
.serviceinfo .msg hr{ margin: 15px auto; background-color: #A3A3A3;}
.serviceinfo .msg .s{ color: #999; font-size: 80%;}

.serviceblock { padding: 5% 3%; }
.serviceblock .title{display: block;font-size: 180%; font-weight: lighter;}
.serviceblock .warning{ color: #a0a0a0;font-size: 90%;}
.serviceblock .item { display: block; margin:10px auto 10px;position: relative;}
.serviceblock input{width:100%; box-sizing: border-box; padding: 21px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.serviceblock textarea {width:100%; box-sizing: border-box; height: 120px; padding: 30px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.serviceblock input:focus ,.serviceblock textarea:focus{border: 1px solid #a0a0a0;background-color: #ffffff;box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}
.serviceblock label{ position: absolute;font-size: 110%;left:10px;top:12px; color: #999;cursor: text; -webkit-transition: all 200ms; transition: all 200ms;}
.serviceblock .item.M label{ top:5px;font-size:90%}
.serviceblock .textarea.M  label{font-size:80%; color: #fff; box-sizing: border-box; border-radius: 5px; padding:3px 6px; top: 4px; left: 10px; display: block; width: auto; background:rgba(0,0,0,0.60);}
.serviceblock .item span {font-size: 80%; color: #aaa;}
.serviceblock #service_valid_M{width: 40%;}
.serviceblock .submit ,.serviceblock .submit:focus{display:block;   border: none; padding: 12px 0; border-radius: 5px; background-color: #e25682; color: #fff; font-size: 130%;box-shadow: 0px 10px 10px -7px #999999;-webkit-appearance: none; -moz-appearance: none; appearance: none;}


@media screen and (max-width: 1620px) {
	.serviceindex{max-width: 1050px;}
	.serviceblock .title{display: block;font-size: 150%; }
	.serviceblock input{ padding: 15px 7px 3px;font-size: 100%;}
	.serviceblock label{left:7px;font-size: 100%;top:10px;}
	.serviceblock .item.M label{ top:1px;font-size:80%}
	.serviceblock textarea { height:90px; padding: 26px 7px 3px; font-size: 100%;}
	.serviceblock .textarea.M label{ top: 4px; left: 7px;padding:2px 5px;}
	.serviceblock .submit ,.serviceblock .submit:focus {padding: 7px 0;font-size: 120%;}
}
@media screen and (max-width: 1200px) {
	.serviceindex {max-width: 950px; }
	.serviceinfo { padding: 5% 4.5% 5% 4.5%;}
	.serviceblock .prompt{margin:0 0 10px;}
	.servicemore {margin: 3% auto 5%; font-size: 110%;}
}
@media screen and (max-width: 950px) {
	.serviceindex { border-radius: 0px;  border-width:1px 0 1px 0px; }
}
@media screen and (max-width: 520px) {
	.serviceindex {background:none; border: 0; margin-top: 0%;}
	.serviceinfo ,.serviceblock { display:inline-block; width: 100%; padding: 5% 10%; }
	.serviceblock .title{ font-weight: lighter; }
	.serviceblock .submit ,.serviceblock .submit:focus{display:block; margin: auto;}
	.serviceinfo { background-color: #f0e9ea;}
	.servicemore {margin: 5% auto 5%;}
	.servicemore span{ display: block;}

}
/* --------------------
客服中心結束
--------------------- */

/* --------------------
會員頁面開始
--------------------- */
.memberindex {position:relative; text-align: center; min-height: 550px; }
.nominH {min-height: auto}
.memberindex .title { display: block; text-align: center; font-size: 300%;  padding-top: 3%; font-weight: lighter;}
.memberindex .warning{ display: block; color: #ff6e6e; font-size: 110%; margin-top: 10px; }
.memberindex .warning div{ display: inline-table;}
.memberindex .info { display: block; font-size: 110%; margin-top: 10px;}
.memberindex .info a{ color: #5480ff;}
.memberindex .page { position:relative; width:100%; text-align:center; font-size:110%; margin-bottom:1%; margin-top: 1%;}
.memberindex .page a{color:#ba4a7b; margin:auto 3px; padding:4px 12px; font-size:110%; border-radius:5px; border:0; border: 1px solid #ba4a7b; white-space:nowrap;}
.memberindex .page a:hover,.memberindex .page a.hover { background: #ba4a7b; color: #fff; }


.memberblock1 ,.memberblock2 {position: relative; padding-top: 15px; padding-bottom: 10px;}
.memberblock2 { background-color:#f0e9ea; margin-bottom: 10px; }
.memberblock2 .info div { display: inline-table;}
.memberblock2 .info { margin-bottom: 15px; margin-top: 0px;}
.memberindex .item  { display:table; width:300px; margin:10px auto 10px;position: relative; text-align: left;}
.memberindex .w500 {width:500px; }
.memberindex .w200 {width:200px; }
.memberindex .item span{ color: #aaa; display: block; margin-top: 3px; font-size: 90%;}
.memberindex input{width:100%; box-sizing: border-box; padding: 21px 10px 4px;font-size: 110%;outline: none;border: 1px solid #c3c3c3;background-color: #f5f5f5;border-radius: 5px;}
.memberindex input:focus{border: 1px solid #a0a0a0;background-color: #ffffff;box-shadow:0px 0px 0px 2px rgba(0,0,0,0.1);}
.memberindex label{ position: absolute;font-size: 110%;left:10px;top:12px; color: #999;cursor: text; -webkit-transition: all 200ms; transition: all 200ms;}
.memberindex .item.M label{ top:5px;font-size:90%;color: #666;}

.memberindex .submit ,.memberindex .submit:focus{ display: block; margin: auto; width: 300px; border: none; padding: 12px 0; border-radius: 5px; background-color: #e25682; color: #fff; font-size: 130%;box-shadow: 0px 10px 10px -7px #999999;-webkit-appearance: none; -moz-appearance: none; appearance: none;}

.memberindex .memberblock .warning{ font-size: 190%; color:#FF0000; margin: 7% auto;}
.memberblock {width: 100%; max-width: 1200px; margin: auto; box-sizing: border-box;}
.memberblock .typetable { display: table;border-collapse:separate; width: 100%; font-size: 100%;}
.memberblock .typerow {display: table-row;background-color: #ffffff;}
.memberblock .tcl {display: table-cell;vertical-align: middle; padding: 8px 0;font-size: 100%; border-bottom: 1px #D8D8D8 solid;}
.memberblock .typetable .typerow.t { background-color: #bc8298; color: #fff; }
.memberblock .typerow:first-child{}
.memberblock .typerow:nth-child(even) {}
.memberblock .typerow:nth-child(odd) {background-color: #f1f1f1;}
.memberblock .tcl.w05{width: 5%;}
.memberblock .tcl.w10{width: 10%;}
.memberblock .tcl.w15{width: 15%;}
.memberblock .tcl.w20{width: 20%;}
.memberblock .tcl.w25{width: 25%;}
.memberblock .tcl.w30{width: 30%;}
.memberblock .tcl.w40{width: 40%;}
.memberblock .tcl.w50{width: 50%;}
.memberblock .tcl.w55{width: 55%;}
.memberblock .tcl.w60{width: 60%;}
.memberblock .tcl .w100{width: 100%;}
.memberblock .tcl.MH{}
.memberblock .tcl.fontl{text-align: left;}
.memberblock .tcl.cb{ color:#3471B9; }
.memberblock .tcl.s110{ font-size: 110%; }
.memberblock .tcl.s120{ font-size: 120%; }
.memberblock .tcl.s130{ font-size: 130%; }
.memberblock .typetable .typerow .tcl a{display: table-row;background: none; padding: 0; font-size: 100%;   }
.memberblock .typetable .typerow .tcl a img{display:table-cell; width: 100%; }
.memberblock .typetable .typerow .tcl a span{display:table-cell; width:70%;vertical-align: middle; padding-left: 10px; color: #ba4a7b;}

@media screen and (max-width: 1620px){
	.memberindex { min-height: 450px; }
	.nominH {min-height: auto}
	.memberindex .page { margin-top: 1%; margin-bottom:1%;}
	.memberindex .page a{color:#ba4a7b; margin:auto 3px; padding:4px 12px; font-size:100%; border-radius:5px; border:0; border: 1px solid #ba4a7b; white-space:nowrap;}
	.memberindex .title {font-size: 250%;}
	.memberindex .warning{  font-size: 100%;  }
	.memberindex .info { font-size: 100%}
	.memberindex input{ padding: 15px 7px 3px;font-size: 100%;}
	.memberindex label{left:7px;font-size: 100%;top:10px;}
	.memberindex .item.M label{ top:1px;font-size:80%}
	.memberindex .submit ,.memberindex .submit:focus {padding: 7px 0;font-size: 120%;}
}
@media screen and (max-width: 950px){
	.memberindex { min-height: 300px; }
	.nominH {min-height: auto}
	.memberindex .warning div{ display:block;}
	.memberblock2 .info div{ display:block;}
	.memberblock .typetable { font-size: 90%;}
	.memberblock .tcl .w100{width: 200px;}
	.memberindex .memberblock .warning{font-size: 150%; margin: 10% auto;}
}
@media screen and (max-width: 768px){
	.memberindex .page { margin-top: 3%; margin-bottom:3%;}
	.memberindex .page a {display: inline-table; box-sizing: border-box; font-size:95%;  margin:auto 0px; padding:3px 6px; min-width: 32px;}
	.memberindex .title { font-size: 210%;  padding-top: 0%; font-weight: lighter;}
	.memberindex .warning{ display: block; color: #ff6e6e; font-size: 90%; margin-top: 5px; }
	.memberindex .info { display: block; font-size: 90%; margin-top: 5px;}
	.memberindex .w500 {width:80%; }
	.memberindex .prompt {margin:0 10% 5px; text-align: left;}
	.memberblock .tcl.MH{display: none;}
	.memberblock .tcl.s{font-size: 70%; width: 15%;}
}
@media screen and (max-width: 520px){
	.memberindex .reg_address { margin: auto 10% 10px;}
	.memberindex .w200 {width:120px; }
	.memberindex .memberblock .warning{ margin: 15% auto;}
	.memberblock .typetable .typerow .tcl a span{width:60%;}
}

/* --------------------
會員頁面結束
--------------------- */

/* --------------------
封面提示開始
--------------------- */
.class4::after{position: absolute; right: 7px; top: 5px; font-size: 100%; content: "中文字幕"; color: #ffffff; font-weight: 600; display: inline-table; border-radius: 10px; background: #ff0000; padding: 0 5px; }
/* --------------------
封面提示結束
--------------------- */

/* --------------------
等待效果開始
--------------------- */
div.circleM {display: none; position:fixed;top:0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9999;}
[data-loader='circle']
{
    width: 50px;
    height: 50px;
	position: absolute;
	top:50%;
	left: 50%;
    -webkit-animation: circle infinite .75s linear;
       -moz-animation: circle infinite .75s linear;
         -o-animation: circle infinite .75s linear;
            animation: circle infinite .75s linear;
    border: 3px solid #ffffff;
    border-top-color: transparent;
    border-radius: 100%;
}

@-webkit-keyframes circle
{
    0%
    {
        -webkit-transform: translate(-50%, -50%) rotate(0);
            -ms-transform: translate(-50%, -50%) rotate(0);
             -o-transform: translate(-50%, -50%) rotate(0);
                transform: translate(-50%, -50%) rotate(0);
    }
    100%
    {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
            -ms-transform: translate(-50%, -50%) rotate(360deg);
             -o-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
    }
}
@-moz-keyframes circle
{
    0%
    {
        -webkit-transform: translate(-50%, -50%) rotate(0);
            -ms-transform: translate(-50%, -50%) rotate(0);
             -o-transform: translate(-50%, -50%) rotate(0);
                transform: translate(-50%, -50%) rotate(0);
    }
    100%
    {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
            -ms-transform: translate(-50%, -50%) rotate(360deg);
             -o-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
    }
}
@-o-keyframes circle
{
    0%
    {
        -webkit-transform: translate(-50%, -50%) rotate(0);
            -ms-transform: translate(-50%, -50%) rotate(0);
             -o-transform: translate(-50%, -50%) rotate(0);
                transform: translate(-50%, -50%) rotate(0);
    }
    100%
    {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
            -ms-transform: translate(-50%, -50%) rotate(360deg);
             -o-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
    }
}
@keyframes circle
{
    0%
    {
        -webkit-transform: translate(-50%, -50%) rotate(0);
            -ms-transform: translate(-50%, -50%) rotate(0);
             -o-transform: translate(-50%, -50%) rotate(0);
                transform: translate(-50%, -50%) rotate(0);
    }
    100%
    {
        -webkit-transform: translate(-50%, -50%) rotate(360deg);
            -ms-transform: translate(-50%, -50%) rotate(360deg);
             -o-transform: translate(-50%, -50%) rotate(360deg);
                transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* --------------------
等待效果結束
--------------------- */

.serviceMW{text-align: center; width: 80%;max-width: 850px; margin: 20px auto; font-size: 105%; color: #ff5858; line-height: 150%;}
.serviceMW a{color: #577ca5;font-weight: 600; text-decoration: underline;}
@media screen and (max-width: 768px){
.serviceMW{text-align: center; width: 95%;font-size: 100%;}
}

.playblank{text-align: center; padding: 25px 0;}
.playblank a{ font-size: 170%; color: #ffffff; padding: 10px 100px; border-radius: 10px; background-color: #da4040; font-weight: 600; box-shadow: 2px 2px 5px #aaaaaa;text-shadow: 1px 1px 0px black; border: 3px #eb9898 solid; }
@media screen and (max-width: 768px){
.playblank a{ font-size: 150%; color: #ffffff; padding: 7px 50px; }
}