@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,700,900&display=swap");
a {
    text-decoration: none;
}

html,
body,
.article,
ul {
    margin: 0;
    padding: 0;
    height: 100%;
    box-sizing: border-box;
}

body {
    line-height: 1.5;
    font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
}

.mask {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.8);
    margin-top: -35px;
    display: none;
}

.mask_info {
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

#ps,
.gift3,
.gift4,
.gift5,
.gift6,
.gift7,
.gift8 {
    cursor: pointer;
    position: relative;
}

#ps::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-size: 100%;
    z-index: 1;
    left: -8px;
    top: 2px;
    background: url(../img/microscope.jpg) no-repeat center top;
}

.timecontent2_left::after {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background-size: 100%;
    z-index: 1;
    left: 2px;
    top: 2px;
    background: url(../img/microscope_s.jpg) no-repeat center top;
}

.gift1pic,
.gift2pic,
.gift3pic,
.gift4pic,
.gift5pic,
.gift6pic,
.gift7pic,
.gift8pic {
    width: 560px;
    height: 449px;
    display: block;
}

.close {
    font-size: 21px;
    width: 30px;
    line-height: 1.5;
    text-align: center;
    height: 30px;
    background-color: #ffffff;
    border-radius: 50px;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    min-height: 100%;
    position: relative;
    overflow-x: hidden;
}

.header {
    width: 100%;
    height: 900px;
    background: url(../img/header_bg.jpg) no-repeat center top;
    position: relative;
}

.headerbox {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    padding: 180px 0 0 0;
}

.doublelogo {
    width: 728px;
    height: auto;
    margin: 0 auto 0 auto;
    padding-right: 70px;
}

.doublelogo ul.logo li {
    float: left;
}

.doublelogo ul.logo li.ro1logotop {
    margin-left: -20px;
}

.doublelogo ul.logo li.x_jointevent {
    margin-left: -30px;
    padding: 10px 0 0 0;
}

#slogan {
    width: 495px;
    height: auto;
    margin: 0 auto;
    clear: both;
    padding: 15px 0 0 0;
}

#header_date {
    width: 463px;
    height: auto;
    margin: 0 auto;
    padding: 30px 0 0 0;
}

.header_joinnow {
    width: 215px;
    height: auto;
    margin: 35px auto 0 auto;
    cursor: pointer;
}

.header_joinnow a:hover {
    opacity: 0.92;
}

.header_bottombtn {
    width: 686px;
    height: auto;
    margin: 0 auto;
}

.header_bottombtn ul {
    margin-top: 30px;
}

.header_bottombtn ul li {
    float: left;
    margin: 0 5px;
}

.article {
    width: 100%;
    height: auto;
    position: relative;
    padding: 0 0 0 0;
}

.main1 {
    width: 100%;
    height: auto;
    position: relative;
    background: url(../img/registration_bg.jpg) no-repeat center center;
    background-attachment: fixed;
    padding: 50px 0 90px 0;
}

.main1content {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    padding: 50px 0 0 0;
}

.main1title {
    width: 285px;
    height: auto;
    margin: 0 auto 40px auto;
}

.main1step {
    width: 660px;
    height: auto;
    margin: 0 auto;
}

.main1step ul {}

.main1step ul li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    clear: both;
    border: 1px solid #ffffff;
    margin: 0 0 20px 0;
    font-size: 18px;
    position: relative;
}

.step {
    float: left;
    color: #ee8785;
    background-color: #ffffff;
    margin-right: 10px;
    line-height: 2;
    padding: 7px 12px;
    box-sizing: border-box;
}

p.left {
    float: left;
    margin-right: 30px;
}

p.right {}

.fb {
    position: absolute;
    right: 20px;
    top: -15px;
}

p.right img {
    width: 19%;
    margin: -4px 12px 0 0;
}

.playerlogin {
    text-align: center;
    color: #ffffff;
    /* display: none; */
}

p.playerbgcolor {
    background-color: #7c8cee;
    padding: 5px 10px;
    display: inline-block;
    margin-right: 10px;
}

.playerattention {
    width: 640px;
    height: auto;
    clear: both;
    margin: 50px auto 0 auto;
    text-align: center;
}

p.playerattention {
    background-color: #ffffff;
    line-height: 2;
    color: #ee8785;
    display: block;
    padding: 0;
    margin: 0 0 10px 0;
    font-size: 19px;
}

p.playerattention::before,
p.playerattention::after {
    content: '◆';
    color: #ee8785;
    font-size: 12px;
    margin: 0 8px;
}

.playeroutbtn {}

.playeroutbtn a {
    color: #ffffff;
    display: inline-block;
    padding: 5px 12px;
    border-radius: 5px;
    background-color: #5d6fd4;
}

.playeroutbtn a:hover {
    background-color: #3c5b9b;
    transition: all 0.3s ease-in-out;
}

.playerrule {
    width: 1024px;
    height: auto;
    margin: 40px auto 0 auto;
    /* display: none; */
}

.playerrule ul {
    width: 80%;
    margin: 0 10%;
}

.playerrule ul li {
    float: left;
    width: 49%;
    margin: 0 0.5%;
    background-color: #ffffff;
    text-align: center;
    padding: 10px 0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
}

.ro1rule,
.rodrule {
    clear: both;
    width: 944px;
    height: auto;
    margin: 0 auto;
    padding: 40px;
    border-radius: 8px;
    display: inline-block;
    background-color: #ffffff;
}

.redbtn {
    color: #ffffff;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3297e5+0,5e6fe0+100 */
    background: rgb(50, 151, 229);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3297e5', endColorstr='#5e6fe0', GradientType=0);
    /* IE6-9 */
}

.gameform {
    border-bottom: 1px dotted #d26766;
    display: inline-block;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.gameform1 {
    display: inline-block;
    width: 100%;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.gameform p,
.gameform1 p {
    float: left;
    margin-right: 20px;
}

.select {
    color: #d26766;
}

.account_number {
    margin-right: 10px;
}

.account {
    width: 250px;
    height: 25px;
    margin-right: 30px;
    font-size: 15px;
    font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
}

.server,
.rolename {
    margin-right: 10px;
}

.serverbox,
.rolenamebox {
    width: 200px;
    height: 25px;
    margin-right: 30px;
    font-size: 15px;
    font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
}

.option {
    background-color: #ffffff;
}

.option:hover {
    border: none;
}

p.red {
    color: #d26766;
    margin: 5px 0;
}

p.red1 {
    color: #d26766;
    margin: 0 0 5px 0;
}

p.blue {
    color: #7c8cee;
    margin: 5px 0;
    font-size: 15px;
}

/*.nodate {
    display: none;
}*/

.confirmbox,
.unconfirmbox {
    width: 96%;
    height: auto;
    background-color: #e5f2ff;
    padding: 2%;
    text-align: center;
}

.confirmbox img,
.unconfirmbox img {
    width: 215px;
    height: auto;
    margin: 0 auto;
}

.unconfirmbtnbox img {
    display: block;
}

.confirmbtnbox img {
    display: block;
}

.confirmbtnbox img,
.unconfirmbtnbox img {
    margin-top: 20px;
}

.notice {
    width: 600px;
    text-align: center;
    margin: 20px auto 0 auto;
}

.notice ul {
    width: 280px;
    display: block;
    margin: 10px auto 0 auto;
}

.noticerod {
    width: 600px;
    text-align: center;
    margin: 20px auto 0 auto;
}

.noticerod a {
    color: #3c5b9b;
}

.noticerod a:hover {
    color: #7c8cee;
}

.noticerod_bottombtn {
    padding-top: 15px;
}

.jointbox {
    width: 100%;
    height: auto;
    padding-bottom: 170px;
    background: url(../img/event1bg.jpg)no-repeat center top;
    display: inline-block;
}

.joint_roonline {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding: 110px 0 0 0;
}

#joint_roonline_title {
    width: 380px;
    height: auto;
    margin: 0 auto;
}

.ro1event1box {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    display: block;
    padding: 110px 0 0 0;
    position: relative;
    clear: both;
}

#ro1eventleft {
    float: left;
    width: 60%;
    height: auto;
}

p.player {
    padding-top: 10px;
}

.pink {
    color: #d26766;
}

#ro1event1_title {
    width: 371px;
    height: auto;
    margin-bottom: 30px;
}

.ro1gamerule {
    width: 94%;
    height: auto;
    margin: 20px 0 0 0;
    padding: 3%;
    display: inline-block;
    border: 1px solid #ffffff;
    background: url(../img/roonline_eventbg.jpg);
    box-shadow: 10px 10px 0 rgba(242, 120, 120, 0.3);
}

ul.redbg {
    width: 100%;
    padding-top: 30px;
}

ul.redbg li {
    width: 100%;
    clear: both;
    display: inline-block;
    font-size: 15px;
}

.lv,
.lv1 {
    float: left;
    background-color: #ffffff;
    height: 71px;
    line-height: 71px;
    padding: 0 20px;
    position: relative;
    width: 24%;
    text-align: center;
    margin-right: 6%;
}

.rodlv1,
.rodlv {
    float: left;
    background-color: #ffffff;
    height: 71px;
    line-height: 71px;
    padding: 0 20px;
    position: relative;
    width: 38%;
    text-align: center;
    margin-right: 6%;
}

.lv1_1 {
    float: left;
    background-color: #ffffff;
    height: 71px;
    line-height: 71px;
    padding: 0 20px;
    position: relative;
    width: 35%;
    text-align: center;
    margin-right: 6%;
}

.lv1_2 {
    float: left;
    background-color: rgba(255, 246, 246, 1);
    height: auto;
    padding: 62px 20px;
    position: relative;
    width: 35%;
    text-align: center;
    margin-right: 6%;
}

.lv1_3 {
    float: left;
    background-color: #ffffff;
    height: auto;
    padding: 62px 20px;
    position: relative;
    width: 35%;
    text-align: center;
    margin-right: 6%;
}

.lv1::before {
    content: 'RO仙境傳說：我的戰術';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -55px;
    width: 100%;
    text-align: center;
}

.lv1_1::before {
    content: 'RO仙境傳說：我的戰術';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -39px;
    width: 100%;
    text-align: center;
}

.rodlv1::before {
    content: 'RO仙境傳說Online';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -62px;
    width: 100%;
    text-align: center;
}

.lv1_3::before {
    content: 'RO仙境傳說：我的戰術';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -94px 0 0 -30px;
    width: 100%;
    text-align: center;
}

.gift_right5_1::before {
    content: 'RO仙境傳說：我的戰術獎勵';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -12px;
    width: 100%;
    text-align: center;
}

.lv1_2::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    margin: 5px 0 0 230px;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.lv1_3::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    margin: 3px 0 0 44px;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.gift_right::before,
.gift_right1::before,
.gift_right3::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    left: -20px;
    margin: 30px 0 0 0;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.gift_right2::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    margin: 30px 0 0 -30px;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.gift_right5::before {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    margin: 30px 0 0 -28px;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.gift_right5_1::after {
    content: '';
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    left: -20px;
    margin: 30px 0 0 0;
    border-style: solid solid solid solid;
    border-width: 7px;
    border-color: transparent transparent transparent #ffffff;
}

.gift_right,
.gift_right1,
.gift_right2 {
    width: 57.7%;
    float: left;
    position: relative;
    background-color: #ffffff;
    height: 71px;
    line-height: 71px;
    padding: 0 20px 0 10px;
}

.gift_right3 {
    width: 46.5%;
    float: left;
    position: relative;
    background-color: #ffffff;
    height: auto;
    line-height: 70px;
    padding: 0 20px 0 10px;
}

.gift_right3_1 {
    width: 46.5%;
    float: left;
    position: relative;
    background-color: rgba(255, 246, 246, 1);
    height: auto;
    line-height: 71px;
    padding: 0 20px 0 10px;
    margin-bottom: 5px;
}

.gift_right3_2 {
    width: 46.5%;
    float: left;
    position: relative;
    background-color: #ffffff;
    height: auto;
    line-height: 71px;
    padding: 0 20px 0 10px;
    margin-top: 5px;
}

.gift_right3_3 {
    width: 46.5%;
    float: left;
    position: relative;
    background-color: #ffffff;
    height: auto;
    line-height: 71px;
    padding: 0 20px 0 10px;
}

.gift_right5,
.gift_right5_1 {
    width: 41.5%;
    float: left;
    position: relative;
    background-color: #ffffff;
    height: auto;
    line-height: 71px;
    padding: 0 20px 0 10px;
}

.gift_right img,
.gift_right1 img,
.gift_right2 img,
.gift_right3 img,
.gift_right3_1 img,
.gift_right3_2 img,
.gift_right3_3 img,
.gift_right4 img,
.gift_right5 img,
.gift_right5_1 img {
    padding-right: 12px;
    float: left;
    position: relative;
}

.gift_right p,
.gift_right1 p,
.gift_right2 p,
.gift_right3 p,
.gift_right3_1 p,
.gift_right3_2 p,
.gift_right3_3 p,
.gift_right5 p,
.gift_right5_1 p {
    float: left;
    text-align: left;
    display: block;
}

.gift_right1::after {
    content: 'RO仙境傳說Online獎勵';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -178px;
}

.gift_right3::after {
    content: 'RO仙境傳說Online獎勵';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -178px;
}

.gift_right3_3::after {
    content: 'RO仙境傳說Online獎勵';
    position: absolute;
    z-index: 1;
    color: #ffffff;
    margin: -55px 0 0 -150px;
}

p.event1_senitem {
    width: 75%;
    float: left;
    padding-top: 12px;
    line-height: 1.5;
}

p.event2_senitem {
    width: 66%;
    float: left;
    padding-top: 12px;
    line-height: 1.5;
}

.cantsale {
    font-size: 12px;
    background-color: #d26766;
    color: #ffffff;
    margin-left: 8px;
    padding: 0 5px;
}

.cantsale1 {
    font-size: 12px;
    background-color: #d26766;
    color: #ffffff;
    padding: 0 5px;
}

.cantsale2 {
    font-size: 12px;
    background-color: #d26766;
    color: #ffffff;
    margin-left: 8px;
    padding: 0 5px;
}

#ro1eventright {
    float: left;
    width: 40%;
    height: auto;
    display: block;
    padding-top: 100px;
}

#ro1event2right {
    float: left;
    width: 40%;
    height: auto;
    display: block;
    padding-top: 230px;
}

#ro1eventright ul li,
#ro1event2right ul li {
    float: left;
}

#ro1eventright ul li#eventman01 {
    position: absolute;
    margin: -50px 0 0 150px;
}

#ro1event2right ul li#eventman01 {
    position: absolute;
    margin: 0 0 0 180px;
}

#ro1eventright ul li#eventman02,
#ro1event2right ul li#eventman02 {
    margin: 70px 0 0 -40px;
    position: absolute;
}

#ro1eventright ul li#eventman01 {
    position: absolute;
    margin: -40px 0 0 154x;
}

#ro1eventright ul li#eventman03 {
    margin: -80px 0 0 -40px;
    position: absolute;
}

#ro1eventright ul li#eventman04 {
    margin: -180px 0 0 136px;
    position: absolute;
}

.ro1event2box {
    width: 1024px;
    height: auto;
    margin: 0 auto 30px auto;
    display: inline-block;
    padding: 130px 0 0 0;
    position: relative;
    clear: both;
}

.lv2 {
    float: left;
    background-color: #ffffff;
    height: auto;
    padding: 52px 20px;
    position: relative;
    width: 24%;
    text-align: center;
    margin-right: 6%;
}

#ro1event2left {
    float: right;
    width: 60%;
    height: auto;
}

.gift_right4 {
    width: 57.7%;
    float: right;
    margin: 5px 1px 0 0;
    position: relative;
    background-color: #ffffff;
    height: auto;
    line-height: 70px;
    padding: 0 20px 0 10px;
}

a.blue {
    color: #6372d3;
    margin: 5px 0;
}

a.blue:hover {
    color: #7c8cee;
    ;
    margin: 5px 0;
    transition: all .2s ease-in-out;
}

p.white {
    color: #ffffff;
}

.timegiftbox {
    width: 98%;
    height: auto;
    margin: 30px 0 0 2%;
    clear: both;
    display: inline-block;
}

.timegift_left {
    width: 25%;
    float: left;
    position: relative;
}

.timegift_left p {
    text-align: center;
    position: absolute;
    margin: -28px 0 0 18px;
    text-shadow: 1px 1px 1px #ffffff;
}

.timegiftcontent_right {
    width: 72.2%;
    float: left;
    margin: 0 0 0 15px;
}

.timegiftcontent_right ul li {
    clear: both;
    margin-bottom: 1.2%;
}

.timecontent_left {
    background-color: #ffffff;
    padding: 1% 12.8%;
    display: inline-block;
    margin-left: 1.2%;
}

.timecontent_left_1 {
    background-color: #ffffff;
    padding: 1% 18%;
    display: inline-block;
    margin-left: 1.3%;
}

.timecontent1_left {
    background-color: rgba(255, 246, 246, 1);
    padding: 9% 5%;
    display: inline-block;
    margin-left: 1.2%;
    float: left;
}

.timecontent2_left {
    background-color: rgba(255, 246, 246, 1);
    padding: 1% 1% 1% 6%;
    display: inline-block;
    margin: 0 0 1.2% 1.2%;
    float: left;
    font-size: 14px;
    position: relative;
}

.fivepower {
    clear: both;
    width: 266px;
    height: auto;
    margin: 30px auto 20px auto;
}

.fivepower a {
    border-radius: 8px;
    border: 1px solid #ffffff;
    text-align: center;
    color: #ffffff;
    padding: 10px 20px;
    box-shadow: 0 2px 3px #c44440;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8c8c+1,ff7070+100 */
    background: rgb(255, 140, 140);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff8c8c', endColorstr='#ff7070', GradientType=0);
    /* IE6-9 */
}

.fivepower a:hover {
    transition: all .5s ease-in-out;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff9696+1,ff7070+100 */
    background: rgb(255, 150, 150);
    /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff9696', endColorstr='#ff7070', GradientType=0);
    /* IE6-9 */
}

.rodbox {
    width: 100%;
    height: auto;
    background: url(../img/event2bg.jpg) no-repeat center top;
    padding: 50px 0 160px 0;
    display: inline-block;
}

.rodeventtitle {
    width: 380px;
    height: auto;
    margin: 80px auto 80px auto;
}

.rodcontent {
    width: 700px;
    height: auto;
    margin: 0 auto;
    position: relative;
}

#fishman {
    position: absolute;
    margin: -200px 0 0 -600px;
}

#ybg {
    background-color: rgba(255, 252, 214, 1);
}

#rbg {
    background-color: rgba(255, 246, 246, 1);
}

.rodevent {
    width: 485px;
    height: auto;
    margin: 20px auto 0 auto;
    padding: 3%;
    display: block;
    border: 1px solid #ffffff;
    background: url(../img/rod_eventbg.jpg);
    box-shadow: 10px 10px 0 rgb(153, 145, 78, 0.3);
}

.attention {
    width: 100%;
    height: auto;
    clear: both;
    padding: 25px 0 0 0;
    background: url(../img/attentionbg.jpg) no-repeat center top;
}

.attentioncontent {
    width: 1024px;
    height: auto;
    margin: 0 auto;
    padding-bottom: 30px;
}

.att_title {
    width: 285px;
    height: auto;
    margin: 0 auto;
}

.att_con {
    width: 944px;
    height: auto;
    padding: 40px 30px 20px 50px;
    margin: 45px auto 35px auto;
    position: relative;
    border: 1px solid #2c2c2c;
    background: url(../img/attconbg.jpg)center top;
}

.att_con ol {}

.att_con ol li {
    margin-bottom: 20px;
    clear: both;
}

.att_poli {
    position: absolute;
    right: -15px;
    bottom: -15px;
}

@media screen and (min-width:768px) and (max-width:1024px) {
    #ps::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-size: 100%;
        z-index: 1;
        left: -4px;
        top: 2px;
        background: url(../img/microscope.jpg) no-repeat center top;
    }
    .timecontent2_left::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-size: 100%;
        z-index: 1;
        left: 2px;
        top: 2px;
        background: url(../img/microscope_s.jpg) no-repeat center top;
    }
    .header {
        width: 100%;
        height: auto;
        background: url(../img/header_ipad_bg.jpg) no-repeat center top;
        position: relative;
        background-size: 120%;
        background-color: #020431;
        padding-bottom: 15%;
    }
    .headerbox {
        width: 96%;
        height: auto;
        margin: 0 2%;
        padding: 2% 0;
    }
    .doublelogo {
        width: 62%;
        height: auto;
        margin: 0 17% 0 21%;
        padding-right: 0;
        position: absolute;
    }
    .doublelogo ul.logo li.rod {
        width: 40%;
        float: left;
    }
    .doublelogo ul.logo li img {
        width: 100%;
    }
    .doublelogo ul.logo li.ro1logotop {
        margin-left: 0;
    }
    .doublelogo ul.logo li.ro1 {
        width: 40%;
        float: left;
    }
    .doublelogo ul.logo li.ro1 img {
        width: 80%;
    }
    .doublelogo ul.logo li.x_jointevent {
        width: 20%;
        margin: 0;
        padding: 10px 0 0 0;
    }
    .doublelogo ul.logo li.x_jointevent img {
        width: 100%;
    }
    #slogan {
        width: 70%;
        height: auto;
        margin: 0 15%;
        clear: both;
        padding: 68% 0 0 0;
    }
    #slogan img {
        width: 100%;
    }
    #header_date {
        width: 60%;
        height: auto;
        margin: 0 20%;
        padding: 4% 0 0 0;
    }
    #header_date img {
        width: 100%;
    }
    .header_joinnow {
        width: 215px;
        height: auto;
        margin: 4% auto 0 auto;
        cursor: pointer;
    }
    .header_joinnow a:hover {
        opacity: 0.92;
    }
    .header_bottombtn {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .header_bottombtn ul {
        width: 86%;
        margin: 0 7%;
        margin-top: 4%;
    }
    .header_bottombtn ul li {
        width: 46%;
        float: left;
        margin: 0 2% 5% 2%;
        padding-bottom: 5%;
    }
    .header_bottombtn ul li img {
        width: 100%;
    }
    .article {
        width: 100%;
        height: auto;
        position: relative;
        padding: 0 0 0 0;
    }
    .main1 {
        width: 100%;
        height: auto;
        position: relative;
        background: url(../img/registration_bg.jpg) center center;
        background-attachment: fixed;
        padding: 10% 0 15% 0;
    }
    .main1content {
        width: 96%;
        height: auto;
        margin: 0 2%;
        padding: 7% 0 0 0;
    }
    .main1title {
        width: 285px;
        height: auto;
        margin: 0 auto 6% auto;
    }
    .main1step {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .main1step ul {}
    .main1step ul li {
        width: 96%;
        height: auto;
        line-height: 1.5;
        clear: both;
        border: 1px solid #ffffff;
        margin: 0 0 3% 0;
        font-size: 18px;
        position: relative;
        display: inline-block;
        padding: 0;
    }
    .step {
        float: left;
        color: #ee8785;
        background-color: #ffffff;
        margin-right: 2%;
        line-height: 2;
        padding: 0 3%;
        text-align: center;
        box-sizing: border-box;
    }
    p.left {
        float: left;
        margin: 0 2% 0 0;
        line-height: 2;
    }
    p.right {
        float: none;
        line-height: 2;
    }
    .fb {
        position: absolute;
        right: 5%;
        top: 5%;
    }
    p.right img {
        width: 17%;
        margin: -0.5% 0 0 1%;
    }
    .playerlogin {
        text-align: center;
        color: #ffffff;
        /* display: none; */
    }
    p.playerbgcolor {
        background-color: #7c8cee;
        padding: 5px 10px;
        display: inline-block;
        margin-right: 0;
    }
    p.playerattention::before,
    p.playerattention::after {
        display: none;
    }
    .playeroutbtn {}
    .playeroutbtn a {
        color: #ffffff;
        display: inline-block;
        padding: 5px 12px;
        margin: 2% 0 0 3%;
        border-radius: 5px;
        background-color: #5d6fd4;
    }
    .playeroutbtn a:hover {
        background-color: #3c5b9b;
        transition: all 0.3s ease-in-out;
    }
    .playerrule {
        width: 100%;
        height: auto;
        margin: 10% auto 0 auto;
        /* display: none; */
    }
    .playerrule ul {
        width: 94%;
        margin: 0 3%;
    }
    .playerrule ul li {
        float: left;
        width: 49%;
        margin: 0 0.5%;
        background-color: #ffffff;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
    }
    .ro1rule,
    .rodrule {
        clear: both;
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 5%;
        border-radius: 8px;
        display: inline-block;
        background-color: #ffffff;
    }
    .redbtn {
        color: #ffffff;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3297e5+0,5e6fe0+100 */
        background: rgb(50, 151, 229);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3297e5', endColorstr='#5e6fe0', GradientType=0);
        /* IE6-9 */
    }
    .gameform {
        border-bottom: 1px dotted #d26766;
        display: inline-block;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 4%;
    }
    .gameform1 {
        display: inline-block;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .gameform p,
    .gameform1 p {
        float: none;
        margin: 0 0 3% 0;
    }
    .select {
        color: #d26766;
    }
    .account_number {
        font-size: 17px;
        margin-right: 2%;
    }
    .account {
        width: 28%;
        height: auto;
        margin-right: 4%;
        margin-bottom: 4%;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .server {
        font-size: 17px;
        margin-right: 2%;
    }
    .rolename {
        font-size: 17px;
        margin: 0 2% 0 4%;
    }
    .serverbox {
        width: 37%;
        height: auto;
        margin: 0 0 0 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .rolenamebox {
        width: 27.5%;
        height: auto;
        margin: 0 0 2% 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .option {
        background-color: #ffffff;
    }
    .option:hover {
        border: none;
    }
    p.red {
        color: #d26766;
        margin: 5px 0;
    }
    p.red1 {
        color: #d26766;
        margin: 0 0 5px 0;
    }
    p.blue {
        color: #7c8cee;
        margin: 5px 0;
        font-size: 15px;
    }
    .nodate {
        display: none;
    }
    .confirmbox {
        width: 96%;
        height: auto;
        background-color: #e5f2ff;
        padding: 2%;
        text-align: left;
    }
    .confirmbtnbox img {
        display: none;
    }
    .unconfirmbtnbox {
        width: 215px;
        margin: 0 auto;
        margin-top: 0;
    }
    .notice {
        width: 100%;
        text-align: left;
        margin: 20px auto 0 auto;
    }
    .notice ul {
        width: 280px;
        display: block;
        margin: 10px auto 0 auto;
    }
    .noticerod {
        width: 100%;
        text-align: left;
        margin: 20px auto 0 auto;
    }
    .noticerod a {
        color: #3c5b9b;
        font-size: 13px;
    }
    .noticerod a:hover {
        color: #7c8cee;
    }
    .noticerod_bottombtn {
        width: 164px;
        margin: 0 auto;
        padding-top: 15px;
    }
    .jointbox {
        width: 100%;
        height: auto;
        padding-bottom: 15%;
        background: url(../img/event1bg.jpg)no-repeat center top;
        display: inline-block;
    }
    .joint_roonline {
        width: 96%;
        height: auto;
        margin: 0 2%;
        display: block;
        padding: 15% 0 0 0;
    }
    #joint_roonline_title {
        width: 380px;
        height: auto;
        margin: 0 auto;
    }
    .ro1event1box {
        width: 96%;
        height: auto;
        margin: 0 2%;
        display: block;
        padding: 10% 0 0 0;
        position: relative;
        clear: both;
    }
    #ro1eventleft {
        float: left;
        width: 100%;
        height: auto;
    }
    p.player {
        padding-top: 10px;
    }
    .pink {
        color: #d26766;
    }
    #ro1event1_title {
        width: 371px;
        height: auto;
        margin-bottom: 30px;
    }
    .ro1gamerule {
        width: 94%;
        height: auto;
        margin: 20px 0 0 0;
        padding: 3% 3% 1% 3%;
        display: inline-block;
        border: 1px solid #ffffff;
        background: url(../img/roonline_eventbg.jpg);
        box-shadow: 10px 10px 0 rgba(242, 120, 120, 0.3);
    }
    ul.redbg {
        width: 100%;
        padding-top: 30px;
    }
    ul.redbg li {
        width: 100%;
        clear: both;
        display: inline-block;
        font-size: 15px;
    }
    .lv,
    .lv1 {
        float: left;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 0.5%;
        position: relative;
        width: 38%;
        text-align: center;
        margin-right: 0;
    }
    .lv1_1 {
        float: left;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 0.5%;
        position: relative;
        width: 49%;
        text-align: center;
        margin-right: 0;
    }
    .rodlv1,
    .rodlv {
        float: left;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
        position: relative;
        width: 43%;
        text-align: center;
        margin-right: 6%;
    }
    .lv1_2 {
        float: left;
        background-color: rgba(255, 246, 246, 1);
        height: auto;
        padding: 61px 0.5%;
        position: relative;
        width: 49%;
        text-align: center;
        margin-right: 0;
    }
    .lv1_3 {
        float: left;
        background-color: #ffffff;
        height: auto;
        padding: 61px 0;
        position: relative;
        width: 44%;
        text-align: center;
        margin-right: 0;
    }
    .lv1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -55px 0 0 -95px;
        width: 100%;
        text-align: center;
    }
    .lv1_1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -54px 0 0 -84px;
        width: 100%;
        text-align: center;
    }
    .rodlv1::before {
        content: 'RO仙境傳說Online';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -53px 0 0 -49px;
        width: 100%;
        text-align: center;
    }
    .lv1_3::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -92px 0 0 -57px;
        width: 100%;
        text-align: center;
    }
    .gift_right5_1::before {
        content: 'RO仙境傳說：我的戰術獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -53px 0 0 -4px;
        width: 100%;
        text-align: center;
    }
    .lv1_2::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 4px 0 0 85%;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .lv1_3::after {
        display: none;
    }
    .gift_right::before,
    .gift_right1::before,
    .gift_right3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        left: -15px;
        margin: 28px 0 0 -10px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right3_3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 66px 0 0 -33px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right2::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 30px 0 0 -32px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right5::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 30px 0 0 -25px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right5_1::after {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 28px 0 0 0;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right,
    .gift_right1,
    .gift_right2 {
        width: 52%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
    }
    .gift_right3 {
        width: 41%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
    }
    .gift_right p,
    .gift_right1 p,
    .gift_right2 p,
    .gift_right3 p,
    .gift_right3_1 p,
    .gift_right3_2 p,
    .gift_right3_3 p,
    .gift_right5 p,
    .gift_right5_1 p {
        float: left;
        text-align: center;
        display: block;
        margin-right: 3%;
    }
    .gift_right3_1 {
        width: 41%;
        float: right;
        position: relative;
        background-color: rgba(255, 246, 246, 1);
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
        margin-bottom: 5px;
    }
    .gift_right3_2 {
        width: 46.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
        margin-top: 5px;
    }
    .gift_right3_3 {
        width: 46.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
    }
    .gift_right5,
    .gift_right5_1 {
        width: 44.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 70px;
        line-height: 70px;
        padding: 0 1%;
    }
    .gift_right img,
    .gift_right1 img,
    .gift_right2 img,
    .gift_right3 img,
    .gift_right3_1 img,
    .gift_right3_2 img,
    .gift_right3_3 img,
    .gift_right4 img,
    .gift_right5 img,
    .gift_right5_1 img {
        width: 70px;
        margin: 0 auto;
        padding-right: 3%;
        float: left;
        display: inline-block;
    }
    .gift_right1::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -54px 0 0 -175px;
    }
    .gift_right3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -53px 0 0 -171px;
    }
    .gift_right3_3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -52x 0 0 143px;
    }
    p.event1_senitem {
        float: left;
        padding-top: 4%;
        text-align: left;
        line-height: 1.5;
        margin-right: 3%;
        width: 70%;
    }
    p.event2_senitem {
        float: left;
        padding-top: 4%;
        text-align: left;
        line-height: 1.5;
        margin-right: 0;
        width: 65%;
    }
    .cantsale {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 3%;
        padding: 0 5px;
        margin: 0;
        text-align: left;
    }
    .cantsale1 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0;
        text-align: center;
    }
    .cantsale2 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0;
        text-align: center;
    }
    #ro1eventright,
    #ro1event2right {
        display: none;
    }
    #ro1eventright ul li,
    #ro1event2right ul li {
        float: left;
    }
    #ro1eventright ul li#eventman01 {
        position: absolute;
        margin: -50px 0 0 150px;
    }
    #ro1event2right ul li#eventman01 {
        position: absolute;
        margin: 0 0 0 180px;
    }
    #ro1eventright ul li#eventman02,
    #ro1event2right ul li#eventman02 {
        margin: 70px 0 0 -40px;
        position: absolute;
    }
    #ro1eventright ul li#eventman01 {
        position: absolute;
        margin: -40px 0 0 154x;
    }
    #ro1eventright ul li#eventman03 {
        margin: -80px 0 0 -40px;
        position: absolute;
    }
    #ro1eventright ul li#eventman04 {
        margin: -180px 0 0 136px;
        position: absolute;
    }
    .ro1event2box {
        width: 100%;
        height: auto;
        margin: 0 auto 30px auto;
        display: inline-block;
        padding: 14% 0 0 0;
        position: relative;
        clear: both;
    }
    .lv2 {
        float: left;
        background-color: #ffffff;
        height: auto;
        padding: 52px 20px;
        position: relative;
        width: 24%;
        text-align: center;
        margin-right: 6%;
    }
    #ro1event2left {
        float: none;
        width: 96%;
        height: auto;
        margin: 0 2%;
    }
    .gift_right4 {
        width: 57.7%;
        float: right;
        margin: 5px 1px 0 0;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 70px;
        padding: 0 20px 0 10px;
    }
    a.blue {
        color: #6372d3;
        margin: 5px 0;
    }
    a.blue:hover {
        color: #7c8cee;
        ;
        margin: 5px 0;
        transition: all .2s ease-in-out;
    }
    p.white {
        color: #ffffff;
    }
    .timegiftbox {
        width: 100%;
        height: auto;
        margin: 30px 0 0 0;
        clear: both;
        display: inline-block;
    }
    .timegift_left {
        width: 134px;
        float: left;
        margin: 1% 0 5% 5%;
        position: relative;
    }
    .timegift_left p {
        text-align: center;
        position: absolute;
        margin: -28px 0 0 18px;
        text-shadow: 1px 1px 1px #ffffff;
    }
    .timegiftcontent_right {
        width: 67%;
        float: left;
        margin: 0 0 0 5%;
    }
    .timegiftcontent_right ul li {
        clear: both;
        margin-bottom: 1%;
    }
    .timecontent_left {
        background-color: #ffffff;
        padding: 1% 0;
        width: 38%;
        text-align: center;
        display: inline-block;
        margin-left: 0;
        margin-bottom: 1%;
    }
    .timecontent_left_1 {
        background-color: #ffffff;
        padding: 1% 0;
        width: 59.5%;
        text-align: center;
        display: inline-block;
        margin-left: 1%;
        margin-bottom: 0;
    }
    .timecontent1_left {
        background-color: rgba(255, 246, 246, 1);
        padding: 8.4% 0;
        display: inline-block;
        margin-left: 0;
        width: 38%;
        text-align: center;
        float: left;
        margin-bottom: 1.2%;
    }
    .timecontent2_left {
        background-color: rgba(255, 246, 246, 1);
        padding: 1% 0;
        width: 29.3%;
        display: inline-block;
        margin: 0 0 1% 1%;
        float: left;
        text-align: center;
    }
    .fivepower {
        clear: both;
        width: 266px;
        height: auto;
        margin: 30px auto 20px auto;
    }
    .fivepower a {
        border-radius: 8px;
        border: 1px solid #ffffff;
        text-align: center;
        color: #ffffff;
        padding: 10px 20px;
        box-shadow: 0 2px 3px #c44440;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8c8c+1,ff7070+100 */
        background: rgb(255, 140, 140);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff8c8c', endColorstr='#ff7070', GradientType=0);
        /* IE6-9 */
    }
    .fivepower a:hover {
        transition: all .5s ease-in-out;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff9696+1,ff7070+100 */
        background: rgb(255, 150, 150);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff9696', endColorstr='#ff7070', GradientType=0);
        /* IE6-9 */
    }
    .rodbox {
        width: 100%;
        height: auto;
        background: url(../img/event2bg.jpg) no-repeat center top;
        padding: 50px 0 160px 0;
        display: inline-block;
    }
    .rodeventtitle {
        width: 380px;
        height: auto;
        margin: 12% auto 7% auto;
    }
    .rodcontent {
        width: 92%;
        height: auto;
        margin: 0 4%;
        position: relative;
    }
    #fishman {
        display: none;
    }
    #ybg {
        background-color: rgba(255, 252, 214, 1);
    }
    #rbg {
        background-color: rgba(255, 246, 246, 1);
    }
    .rodevent {
        width: 62%;
        height: auto;
        margin: 0 16%;
        padding: 3%;
        display: block;
        border: 1px solid #ffffff;
        background: url(../img/rod_eventbg.jpg);
        box-shadow: 10px 10px 0 rgb(153, 145, 78, 0.3);
    }
    .attention {
        width: 100%;
        height: auto;
        clear: both;
        padding: 10% 0;
        background: url(../img/attentionbg.jpg) no-repeat center bottom;
        background-size: cover;
    }
    .attentioncontent {
        width: 96%;
        height: auto;
        margin: 0 2%;
    }
    .att_title {
        width: 285px;
        height: auto;
        margin: 0 auto;
    }
    .att_con {
        width: 90%;
        height: auto;
        padding: 5% 2% 0 5%;
        margin: 10% auto 0 auto;
        position: relative;
        border: 1px solid #2c2c2c;
        background: url(../img/attconbg.jpg) no-repeat center top;
        background-size: cover;
    }
    .att_con ol {}
    .att_con ol li {
        margin-bottom: 3%;
    }
    .att_poli {
        display: none;
    }
}

@media screen and (max-width:767px) {
    .mask {
        margin-top: 0;
        display: none;
    }
    #ps::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-size: 100%;
        z-index: 1;
        left: -1px;
        top: 2px;
        background: url(../img/microscope.jpg) no-repeat center top;
    }
    .timecontent2_left::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-size: 100%;
        z-index: 1;
        left: 2px;
        top: 2px;
        background: url(../img/microscope_s.jpg) no-repeat center top;
    }
    .gift1pic,
    .gift2pic,
    .gift3pic,
    .gift4pic,
    .gift5pic,
    .gift6pic,
    .gift7pic,
    .gift8pic {
        width: 100%;
    }
    .gift1pic img,
    .gift2pic img,
    .gift3pic img,
    .gift4pic img,
    .gift5pic img,
    .gift6pic img,
    .gift7pic img,
    .gift8pic img {
        width: 100%;
        height: auto;
        display: block;
    }
    .header {
        width: 100%;
        height: auto;
        background: url(../img/header_mob_bg.jpg) no-repeat center top;
        position: relative;
        background-size: 150%;
        background-color: #020431;
    }
    .headerbox {
        width: 96%;
        height: auto;
        margin: 0 2%;
        padding: 2% 0;
    }
    .doublelogo {
        width: 98%;
        height: auto;
        margin: 0 auto 0 2%;
        padding-right: 0;
        position: absolute;
    }
    .doublelogo ul.logo li.rod {
        width: 40%;
        float: left;
    }
    .doublelogo ul.logo li img {
        width: 100%;
    }
    .doublelogo ul.logo li.ro1logotop {
        margin-left: 0;
    }
    .doublelogo ul.logo li.ro1 {
        width: 40%;
        float: left;
    }
    .doublelogo ul.logo li.ro1 img {
        width: 80%;
    }
    .doublelogo ul.logo li.x_jointevent {
        width: 20%;
        margin: 0;
        padding: 10px 0 0 0;
    }
    .doublelogo ul.logo li.x_jointevent img {
        width: 100%;
    }
    #slogan {
        width: 96%;
        height: auto;
        margin: 0 2%;
        clear: both;
        padding: 95% 0 0 0;
    }
    #slogan img {
        width: 100%;
    }
    #header_date {
        width: 84%;
        height: auto;
        margin: 0 8%;
        padding: 4% 0 0 0;
    }
    #header_date img {
        width: 100%;
    }
    .header_joinnow {
        width: 215px;
        height: auto;
        margin: 4% auto 0 auto;
        cursor: pointer;
    }
    .header_joinnow a:hover {
        opacity: 0.92;
    }
    .header_bottombtn {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .header_bottombtn ul {
        margin-top: 4%;
    }
    .header_bottombtn ul li {
        width: 80%;
        float: none;
        margin: 0 10% 5% 10%;
    }
    .header_bottombtn ul li img {
        width: 100%;
    }
    .article {
        width: 100%;
        height: auto;
        position: relative;
        padding: 0 0 0 0;
    }
    .main1 {
        width: 100%;
        height: auto;
        position: relative;
        background: url(../img/registration_bg.jpg) center center;
        background-attachment: fixed;
        padding: 10% 0;
    }
    .main1content {
        width: 96%;
        height: auto;
        margin: 0 2%;
        padding: 7% 0 0 0;
    }
    .main1title {
        width: 285px;
        height: auto;
        margin: 0 auto 10% auto;
    }
    .main1step {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }
    .main1step ul {}
    .main1step ul li {
        width: 96%;
        height: auto;
        line-height: 1.5;
        clear: both;
        border: 1px solid #ffffff;
        margin: 0 0 7% 0;
        font-size: 18px;
        position: relative;
        display: inline-block;
        padding: 2%;
    }
    .step {
        float: none;
        color: #ee8785;
        background-color: #ffffff;
        margin-right: 0;
        line-height: 2;
        padding: 0;
        text-align: center;
        display: block;
        box-sizing: border-box;
    }
    p.left {
        float: left;
        margin: 3% 0 0 0;
    }
    p.right {
        float: left;
    }
    .fb {
        position: absolute;
        right: 5%;
        top: 42%;
    }
    p.right img {
        width: 31%;
        margin: 1% 0.5%;
    }
    .playerlogin {
        text-align: center;
        color: #ffffff;
        /* display: none; */
    }
    p.playerbgcolor {
        background-color: #7c8cee;
        padding: 5px 10px;
        display: inline-block;
        margin-right: 0;
    }
    .playeroutbtn {}
    .playeroutbtn a {
        color: #ffffff;
        display: inline-block;
        padding: 5px 12px;
        margin-top: 4%;
        border-radius: 5px;
        background-color: #5d6fd4;
    }
    .playeroutbtn a:hover {
        background-color: #3c5b9b;
        transition: all 0.3s ease-in-out;
    }
    .playerrule {
        width: 100%;
        height: auto;
        margin: 17% auto 0 auto;
        /* display: none; */
    }
    .playerrule ul {
        width: 94%;
        margin: 0 3%;
    }
    .playerrule ul li {
        float: left;
        width: 49%;
        margin: 0 0.5%;
        background-color: #ffffff;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px 10px 0 0;
        cursor: pointer;
    }
    .ro1rule,
    .rodrule {
        clear: both;
        width: 90%;
        height: auto;
        margin: 0 auto;
        padding: 5%;
        border-radius: 8px;
        display: inline-block;
        background-color: #ffffff;
    }
    .redbtn {
        color: #ffffff;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3297e5+0,5e6fe0+100 */
        background: rgb(50, 151, 229);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(50, 151, 229, 1) 0%, rgba(94, 111, 224, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3297e5', endColorstr='#5e6fe0', GradientType=0);
        /* IE6-9 */
    }
    .gameform {
        border-bottom: 1px dotted #d26766;
        display: inline-block;
        width: 100%;
        padding-bottom: 2%;
        margin-bottom: 4%;
    }
    .gameform1 {
        display: inline-block;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .gameform p,
    .gameform1 p {
        float: none;
        margin: 0 0 5% 0;
    }
    .select {
        color: #d26766;
    }
    .account_number {
        font-size: 17px;
        margin-right: 4%;
    }
    .account {
        width: 72.2%;
        height: auto;
        margin-right: 0;
        margin-bottom: 4%;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .server,
    .rolename {
        font-size: 17px;
        margin-right: 4%;
    }
    .serverbox {
        width: 67%;
        height: auto;
        margin: 0 0 4% 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .rolenamebox {
        width: 72.2%;
        height: auto;
        margin: 0 0 4% 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .option {
        background-color: #ffffff;
    }
    .option:hover {
        border: none;
    }
    p.red {
        color: #d26766;
        margin: 5px 0;
    }
    p.red1 {
        color: #d26766;
        margin: 0 0 5px 0;
    }
    p.blue {
        color: #7c8cee;
        margin: 5px 0;
        font-size: 15px;
    }
    .nodate {
        display: none;
    }
    .confirmbox {
        width: 96%;
        height: auto;
        background-color: #e5f2ff;
        padding: 2%;
        text-align: left;
    }
    .unconfirmbtnbox {
        width: 215px;
        margin: 0 auto;
        margin-top: 0;
        display: block;
    }
    .confirmbtnbox {
        width: 215px;
        margin: 0 auto;
        margin-top: 0;
        display: none;
    }
    .notice {
        width: 100%;
        text-align: left;
        margin: 20px auto 0 auto;
    }
    .notice ul {
        width: 280px;
        display: block;
        margin: 10px auto 0 auto;
    }
    .noticerod {
        width: 100%;
        text-align: left;
        margin: 20px auto 0 auto;
    }
    .noticerod a {
        color: #3c5b9b;
        font-size: 13px;
    }
    .noticerod a:hover {
        color: #7c8cee;
    }
    .noticerod_bottombtn {
        width: 164px;
        margin: 0 auto;
        padding-top: 15px;
    }
    .jointbox {
        width: 100%;
        height: auto;
        padding-bottom: 15%;
        background: url(../img/event1bg.jpg)no-repeat center top;
        display: inline-block;
    }
    .joint_roonline {
        width: 96%;
        height: auto;
        margin: 0 2%;
        display: block;
        padding: 30% 0 0 0;
    }
    #joint_roonline_title {
        width: 94%;
        height: auto;
        margin: 0 3%;
    }
    #joint_roonline_title img {
        width: 100%;
    }
    .ro1event1box {
        width: 96%;
        height: auto;
        margin: 0 2%;
        display: block;
        padding: 20% 0 0 0;
        position: relative;
        clear: both;
    }
    #ro1eventleft {
        float: left;
        width: 100%;
        height: auto;
    }
    p.player {
        padding-top: 10px;
    }
    .pink {
        color: #d26766;
    }
    #ro1event1_title {
        width: 100%;
        height: auto;
        margin-bottom: 30px;
    }
    #ro1event1_title img {
        width: 100%;
    }
    .ro1gamerule {
        width: 94%;
        height: auto;
        margin: 20px 0 0 0;
        padding: 3% 3% 1% 3%;
        display: inline-block;
        border: 1px solid #ffffff;
        background: url(../img/roonline_eventbg.jpg);
        box-shadow: 10px 10px 0 rgba(242, 120, 120, 0.3);
    }
    ul.redbg {
        width: 100%;
        padding-top: 30px;
    }
    ul.redbg li {
        width: 100%;
        clear: both;
        display: inline-block;
        font-size: 15px;
    }
    .lv,
    .lv1 {
        float: left;
        background-color: #ffffff;
        height: 118px;
        line-height: 118px;
        padding: 0 0.5%;
        position: relative;
        width: 38%;
        text-align: center;
        margin-right: 0;
    }
    .lv1_1 {
        float: left;
        background-color: #ffffff;
        height: 118px;
        line-height: 118px;
        padding: 0 0.5%;
        position: relative;
        width: 50%;
        text-align: center;
        margin-right: 0;
    }
    .rodlv1,
    .rodlv {
        float: left;
        background-color: #ffffff;
        height: 92px;
        line-height: 92px;
        padding: 0 1%;
        position: relative;
        width: 43%;
        text-align: center;
        margin-right: 6%;
    }
    .lv1_2 {
        float: left;
        background-color: rgba(255, 246, 246, 1);
        height: auto;
        padding: 98px 0.5%;
        position: relative;
        width: 50%;
        text-align: center;
        margin-right: 6%;
    }
    .lv1_3 {
        float: left;
        background-color: #ffffff;
        height: auto;
        padding: 76px 0;
        position: relative;
        width: 43%;
        text-align: center;
        margin-right: 6%;
    }
    .lv1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -72px 0 0 -29px;
        width: 100%;
        font-size: 12px;
        text-align: center;
    }
    .lv1_1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
        margin: -73px 0 0 -7px;
        width: 100%;
        text-align: center;
    }
    .rodlv1::before {
        content: 'RO仙境傳說Online';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -60px 0 0 -30px;
        width: 100%;
        text-align: center;
    }
    .lv1_3::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -102px 0 0 -2px;
        width: 100%;
        text-align: center;
    }
    .gift_right5_1::before {
        content: 'RO仙境傳說：我的戰術獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
        margin: -23px 0 0 -4px;
        width: 100%;
        text-align: center;
    }
    .lv1_2::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 15px 0 0 103%;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .lv1_3::after {
        display: none;
    }
    .gift_right::before,
    .gift_right1::before,
    .gift_right3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        left: -15px;
        margin: 50px 0 0 -1px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right3_3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 91px 0 0 -21px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right2::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 52px 0 0 -18px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right5::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 30px 0 0 -20px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right5_1::after {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: -52px 0 0 3px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .gift_right,
    .gift_right1,
    .gift_right2 {
        width: 52%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 118px;
        line-height: 1.5;
        padding: 0 1%;
    }
    .gift_right3 {
        width: 39%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 118px;
        line-height: 1.5;
        padding: 0 1%;
    }
    .gift_right p,
    .gift_right1 p,
    .gift_right2 p,
    .gift_right3 p,
    .gift_right3_1 p,
    .gift_right3_2 p,
    .gift_right3_3 p,
    .gift_right5 p,
    .gift_right5_1 p {
        float: none;
        text-align: center;
        display: block;
    }
    .gift_right3_1 {
        width: 39%;
        float: right;
        position: relative;
        background-color: rgba(255, 246, 246, 1);
        height: 118px;
        line-height: 1.5;
        padding: 0 1%;
        margin-bottom: 5px;
    }
    .gift_right3_2 {
        width: 46.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 1.5;
        padding: 0 1% 1% 1%;
        margin-top: 5px;
    }
    .gift_right3_3 {
        width: 46.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 1.5;
        padding: 0 1% 1% 1%;
    }
    .gift_right5,
    .gift_right5_1 {
        width: 44.5%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 1.5;
        padding: 0 1%;
    }
    .gift_right img,
    .gift_right1 img,
    .gift_right2 img,
    .gift_right3 img,
    .gift_right3_1 img,
    .gift_right3_2 img,
    .gift_right3_3 img,
    .gift_right4 img,
    .gift_right5 img,
    .gift_right5_1 img {
        width: 70px;
        margin: 0 auto;
        padding-right: 0;
        float: none;
        display: block;
    }
    .gift_right1::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -114px 0 0 -144px;
    }
    .gift_right3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -115px 0 0 -126px;
    }
    .gift_right3_3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -118px 0 0 13px;
    }
    p.event1_senitem,
    p.event2_senitem {
        width: 100%;
        float: left;
        padding-top: 0;
        line-height: 1.5;
    }
    .cantsale {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0 32%;
        text-align: center;
    }
    .cantsale1 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0;
        text-align: center;
    }
    .cantsale2 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0 27%;
        text-align: center;
    }
    #ro1eventright,
    #ro1event2right {
        display: none;
    }
    #ro1eventright ul li,
    #ro1event2right ul li {
        float: left;
    }
    #ro1eventright ul li#eventman01 {
        position: absolute;
        margin: -50px 0 0 150px;
    }
    #ro1event2right ul li#eventman01 {
        position: absolute;
        margin: 0 0 0 180px;
    }
    #ro1eventright ul li#eventman02,
    #ro1event2right ul li#eventman02 {
        margin: 70px 0 0 -40px;
        position: absolute;
    }
    #ro1eventright ul li#eventman01 {
        position: absolute;
        margin: -40px 0 0 154x;
    }
    #ro1eventright ul li#eventman03 {
        margin: -80px 0 0 -40px;
        position: absolute;
    }
    #ro1eventright ul li#eventman04 {
        margin: -180px 0 0 136px;
        position: absolute;
    }
    .ro1event2box {
        width: 100%;
        height: auto;
        margin: 0 auto 30px auto;
        display: inline-block;
        padding: 130px 0 0 0;
        position: relative;
        clear: both;
    }
    .lv2 {
        float: left;
        background-color: #ffffff;
        height: auto;
        padding: 52px 20px;
        position: relative;
        width: 24%;
        text-align: center;
        margin-right: 6%;
    }
    #ro1event2left {
        float: none;
        width: 96%;
        height: auto;
        margin: 0 2%;
    }
    .gift_right4 {
        width: 57.7%;
        float: right;
        margin: 5px 1px 0 0;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 70px;
        padding: 0 20px 0 10px;
    }
    a.blue {
        color: #6372d3;
        margin: 5px 0;
    }
    a.blue:hover {
        color: #7c8cee;
        ;
        margin: 5px 0;
        transition: all .2s ease-in-out;
    }
    p.white {
        color: #ffffff;
    }
    .timegiftbox {
        width: 100%;
        height: auto;
        margin: 30px 0 0 0;
        clear: both;
        display: inline-block;
    }
    .timegift_left {
        width: 42%;
        float: none;
        margin: 0 29% 6% 29%;
        position: relative;
    }
    .timegift_left p {
        text-align: center;
        position: absolute;
        margin: -28px 0 0 18px;
        text-shadow: 1px 1px 1px #ffffff;
    }
    .timegiftcontent_right {
        width: 100%;
        float: none;
        margin: 0 0 0 0;
    }
    .timegiftcontent_right ul li {
        clear: both;
        margin-bottom: 1.2%;
    }
    .timecontent_left {
        background-color: #ffffff;
        padding: 1% 0;
        width: 100%;
        text-align: center;
        display: inline-block;
        margin-left: 0;
        margin-bottom: 1%;
    }
    .timecontent_left_1 {
        background-color: #ffffff;
        padding: 1% 0;
        width: 100%;
        text-align: center;
        display: inline-block;
        margin-left: 0%;
        margin-bottom: 3%;
    }
    .timecontent1_left {
        background-color: rgba(255, 246, 246, 1);
        padding: 1% 0;
        display: inline-block;
        margin-left: 0;
        width: 100%;
        text-align: center;
        float: none;
        margin-bottom: 1.2%;
    }
    .timecontent2_left {
        background-color: rgba(255, 246, 246, 1);
        padding: 1% 0;
        width: 49%;
        display: inline-block;
        margin: 0 0.5% 1.2% 0.5%;
        float: left;
        text-align: center;
    }
    .fivepower {
        clear: both;
        width: 266px;
        height: auto;
        margin: 30px auto 20px auto;
    }
    .fivepower a {
        border-radius: 8px;
        border: 1px solid #ffffff;
        text-align: center;
        color: #ffffff;
        padding: 10px 20px;
        box-shadow: 0 2px 3px #c44440;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff8c8c+1,ff7070+100 */
        background: rgb(255, 140, 140);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 140, 140, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff8c8c', endColorstr='#ff7070', GradientType=0);
        /* IE6-9 */
    }
    .fivepower a:hover {
        transition: all .5s ease-in-out;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff9696+1,ff7070+100 */
        background: rgb(255, 150, 150);
        /* Old browsers */
        background: -moz-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255, 150, 150, 1) 1%, rgba(255, 112, 112, 1) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff9696', endColorstr='#ff7070', GradientType=0);
        /* IE6-9 */
    }
    .rodbox {
        width: 100%;
        height: auto;
        background: url(../img/event2bg.jpg) no-repeat center top;
        padding: 50px 0 160px 0;
        display: inline-block;
    }
    .rodeventtitle {
        width: 94%;
        height: auto;
        margin: 15% 3%;
    }
    .rodeventtitle img {
        width: 100%;
    }
    .rodcontent {
        width: 92%;
        height: auto;
        margin: 0 4%;
        position: relative;
    }
    #fishman {
        display: none;
    }
    #ybg {
        background-color: rgba(255, 252, 214, 1);
    }
    #rbg {
        background-color: rgba(255, 246, 246, 1);
    }
    .rodevent {
        width: 94%;
        height: auto;
        margin: 0;
        padding: 3%;
        display: block;
        border: 1px solid #ffffff;
        background: url(../img/rod_eventbg.jpg);
        box-shadow: 10px 10px 0 rgb(153, 145, 78, 0.3);
    }
    .attention {
        width: 100%;
        height: auto;
        clear: both;
        padding: 15% 0 10% 0;
        background: url(../img/attentionbg.jpg) no-repeat center bottom;
        background-size: cover;
    }
    .attentioncontent {
        width: 96%;
        height: auto;
        margin: 0 2%;
    }
    .att_title {
        width: 285px;
        height: auto;
        margin: 0 auto;
    }
    .att_con {
        width: 90%;
        height: auto;
        padding: 5% 1% 5% 9%;
        margin: 10% auto 0 auto;
        position: relative;
        border: 1px solid #2c2c2c;
        background: url(../img/attconbg.jpg) no-repeat center top;
        background-size: cover;
    }
    .att_con ol {}
    .att_con ol li {
        margin-bottom: 5%;
    }
    .att_poli {
        display: none;
    }
}

@media screen and (max-width:320px) {
    #ps::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background-size: 100%;
        z-index: 1;
        left: 1px;
        top: 2px;
        background: url(../img/microscope.jpg) no-repeat center top;
    }
    .timecontent2_left::after {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-size: 100%;
        z-index: 1;
        left: 2px;
        top: 2px;
        background: url(../img/microscope_s.jpg) no-repeat center top;
    }
    .gameform {
        border-bottom: 1px dotted #d26766;
        display: inline-block;
        width: 100%;
        padding-bottom: 2%;
        margin-bottom: 4%;
    }
    .gameform1 {
        display: inline-block;
        width: 100%;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .gameform p,
    .gameform1 p {
        float: none;
        margin: 0 0 5% 0;
    }
    .select {
        color: #d26766;
    }
    .account_number {
        font-size: 17px;
        margin-right: 4%;
        width: 25%;
        float: left;
    }
    .account {
        width: 70.5%;
        height: auto;
        margin-right: 0;
        margin-bottom: 4%;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .server,
    .rolename {
        font-size: 17px;
        margin-right: 4%;
        float: left;
    }
    .serverbox {
        width: 65%;
        height: auto;
        margin: 0 0 4% 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .rolenamebox {
        width: 70.5%;
        height: auto;
        margin: 0 0 4% 0;
        font-size: 17px;
        font-family: "Noto Sans TC", serif, "Microsoft JhengHei", 微軟正黑體, PMingLiU, 新細明體, sans-serif;
    }
    .lv,
    .lv1 {
        float: left;
        background-color: #ffffff;
        height: 118px;
        line-height: 118px;
        padding: 0 0.5%;
        position: relative;
        width: 44%;
        text-align: center;
        margin-right: 0;
    }
    .lv1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        margin: -72px 0 0 -29px;
        width: 100%;
        font-size: 12px;
        text-align: center;
    }
    .gift_right,
    .gift_right1,
    .gift_right2 {
        width: 44%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: 118px;
        line-height: 1.5;
        padding: 0 1%;
    }
    .gift_right3 {
        width: 99%;
        float: right;
        position: relative;
        background-color: #ffffff;
        height: auto;
        line-height: 1.5;
        margin-top: 10%;
        padding: 5% 0.5%;
    }
    .gift_right1::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -113px 0 0 -124px;
    }
    .gift_right3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -108px 0 0 -151px;
    }
    .gift_right3_3::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -118px 0 0 2px;
    }
    .gift_right p,
    .gift_right1 p,
    .gift_right2 p,
    .gift_right3_2 p,
    .gift_right3_3 p,
    .gift_right5 p,
    .gift_right5_1 p {
        float: none;
        font-size: 14px;
        text-align: center;
        display: block;
    }
    .gift_right3 p {
        float: left;
        font-size: 14px;
        text-align: center;
        display: block;
        padding-left: 22%;
    }
    .gift_right3_1 p {
        float: left;
        padding-top: 0;
        line-height: 1.5;
        padding-left: 16%;
    }
    p.event1_senitem {
        width: 100%;
        float: left;
        font-size: 12px;
        padding-top: 0;
        line-height: 1.5;
    }
    p.event2_senitem {
        width: 100%;
        float: left;
        padding-left: 0;
        padding-top: 0;
        line-height: 1.5;
    }
    .cantsale {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0 26%;
        text-align: center;
    }
    .cantsale1 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0;
        text-align: center;
    }
    .cantsale2 {
        font-size: 12px;
        background-color: #d26766;
        color: #ffffff;
        margin-left: 0;
        padding: 0 5px;
        margin: 0 4%;
        text-align: center;
    }
    .lv1_1 {
        float: left;
        background-color: #ffffff;
        height: auto;
        line-height: 1.5;
        padding: 5% 0.5%;
        position: relative;
        width: 99%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 5%;
    }
    .lv1_2 {
        float: left;
        background-color: rgba(255, 246, 246, 1);
        height: auto;
        padding: 5% 0.5%;
        position: relative;
        width: 99%;
        text-align: center;
        margin: 25% 0 15% 0;
    }
    .lv1_3 {
        float: left;
        background-color: #ffffff;
        height: auto;
        padding: 74px 0;
        position: relative;
        width: 43%;
        text-align: center;
        margin-right: 6%;
    }
    .lv1_1::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
        margin: -38px 0 0 -60px;
        width: 99%;
        text-align: center;
    }
    .gift_right3_3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        margin: 91px 0 0 -18px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: transparent transparent transparent #ffffff;
    }
    .lv1_2::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -37px 0 0 -52px;
        width: 105%;
        text-align: center;
        border-width: 0;
    }
    .lv1_2::after {
        content: 'RO仙境傳說Online獎勵';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: 57px 0 0 -238px;
        width: 105%;
        text-align: center;
        border-width: 0;
    }
    .lv1_3::before {
        content: 'RO仙境傳說：我的戰術';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -102px 0 0 -10px;
        width: 105%;
        text-align: center;
    }
    .gift_right3::before {
        content: '';
        position: absolute;
        z-index: 1;
        width: 0;
        height: 0;
        left: 0;
        margin: -50px 0 0 135px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: #ffffff transparent transparent transparent;
    }
    .gift_right3_1 {
        width: 99%;
        float: left;
        position: relative;
        background-color: rgba(255, 246, 246, 1);
        height: 118px;
        line-height: 1.5;
        padding: 0;
        margin: 0 0.5% 5px 0.5%;
    }
    .gift_right3_1::before {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        left: 0;
        margin: -37px 0 0 131px;
        border-style: solid solid solid solid;
        border-width: 7px;
        border-color: rgba(255, 246, 246, 1) transparent transparent transparent;
    }
    .gift_right5_1::before {
        content: 'RO仙境傳說：我的戰術獎勵';
        position: absolute;
        z-index: 1;
        color: #ffffff;
        font-size: 12px;
        margin: -23px 0 0 -10px;
        width: 113%;
        text-align: center;
    }
    .rodlv1::before {
        content: 'RO仙境傳說Online';
        position: absolute;
        z-index: 1;
        font-size: 12px;
        color: #ffffff;
        margin: -60px 0 0 -13px;
        width: 100%;
        text-align: center;
    }
}