@charset "UTF-8";

body {margin: 0px;font-family: "Microsoft JhengHei",serif;}

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;font-family: "Microsoft JhengHei",serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
a:hover {
    outline:0;
    text-decoration:none!important;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

h1, h2, h3, h4, h5, h6, .heading {
    margin: 0 0 20px 0;
    font-size: 22px;
    line-height: normal;
    font-weight: normal;
    text-transform: capitalize;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: .5rem;margin-top: 0;
    font-weight: 500;
    font-family: "Microsoft JhengHei",serif;
}

.h1, h1 {
    font-size: 2.5rem;
}

.h2, h2 {
    line-height: 2em;
    font-size: 2rem;
    font-weight: 600; color: #333; margin: 2%;
}

.h3, h3 {
    font-size: 1.75rem;
}

.h4, h4 {
    font-size: 1.5rem;
}

.h5, h5 {
    font-size: 1.25rem;
}

.h6, h6 {
    font-size: .8rem;
}

.p, p {
    font-size: 1rem;
}


.tw{color: #fff;}
.container {
    background-color: #fff;
    width: 100%;
    margin: 0px;
    border-bottom-width: 0px;
    padding: 0px;
    overflow: hidden;
}

.content {
    width: 1080px;
    margin:0 auto;
    overflow: hidden;

}

.primary_header {
    width: 100%;
    background-color: #fff;
    padding: 10px 10%;
    clear: left;
    margin: 0px;
    border-bottom: 3px solid #bf0000; overflow: hidden;


}


.logo {
    background: url(https://image.card.tw.r10s.com/images/common/logo/ttl_rc_c.gif) no-repeat;
    float: left;
    margin: 10px 0 0 30px;
    width: 228px;
    height: 32px;
    text-indent: -9999px;
    background-size: 228px 32px;
}

.secondary_header {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: #fff;
    clear: left;
}


<--rakuten-->

.w3-black, .w3-hover-black:hover {
    color: #bf0000!important;
    background-color: #fff!important;
}

.w3-bar {margin: 0px; padding: 0px;
    overflow: hidden; 
}

.w3-bar .w3-button {
    white-space: normal;
    padding: 20px;
    width: 185px;
}
.w3-bar .w3-bar-item {
    /*--float: left;*/
    width: auto;
    width: 14.2%;
    display: block;
    padding: 20px 16px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: 0px;
}

.w3-bar .w3-bar-items {
    width: auto;
    display: block;
    padding: 16px 16px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: 0px;
    width: 185px;
}


.w3-service-bar, .w3-hover-service-bar:hover {
    color: #fff;
    background-color:#bf0000;
}

.w3-clear:after, .w3-clear:before, .w3-bar:before, .w3-bar:after {
    content: "";
    display: table;
    clear: both;
}

.w3-bar:before, .w3-bar:after {
    content: "";
    display: table;
    clear: both;
}
.w3-btn, .w3-button {
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    background-color: inherit;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    padding: 16px 16px;
    overflow: hidden;
    text-decoration: none;
}

.w3-dropdown-click, .w3-dropdown-hover {
    display: inline-block;
    cursor: pointer;
}

.w3-dropdown-content {
    cursor: auto;
    color: #bf0000;
    background-color: #fff;
    display: none;
    position: absolute;
    min-width: 160px;
    margin: 0;
    padding: 0;
    z-index: 2;
}

.w3-black,.w3-hover-black:hover{color: #515151!important;background-color: #fff!important;}
.w3-white, .w3-hover-white:hover, .w3-dark-gray, .w3-hover-white:hover {
    color: #bf0000!important;
    background-color: white!important;
}
<--rakuten-->



.row {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: inline-block; overflow: hidden;
}
.row.blockDisplay {
    display: block;
}

.thumbnail_align {
    text-align: center;
}

.small{font-size: 80%}
.small a{text-decoration: none;}

.campaignad{padding-top: 25px}
.campaignad h4{font-size: 1.25rem;line-height: 1.1;color: #fff;padding-left: 25px;font-family: "Microsoft JhengHei",serif;}

.campaignad p{font-size: 1rem;line-height: 1.1;color: #fff;padding-left: 25px;font-family: "Microsoft JhengHei",serif;}



.newcampaign{background-image: url("https://image.card.tw.r10s.com/images/common/campaign_list.jpg"); background-position: right;background-repeat: no-repeat; height: 130px; display: block; padding-top: 10px;}
.japan{background-image: url("https://image.card.tw.r10s.com/images/common/japan.jpg"); background-position: right;background-repeat: no-repeat; height: 130px; display: block; padding-top: 10px;}
.merchant{background-image: url("https://image.card.tw.r10s.com/images/common/merchant.jpg"); background-position: right;background-repeat: no-repeat; height: 130px; display: block; padding-top: 10px;}

.eventcontainer h2 {
    line-height: 2em;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    margin: 2%;
}

.content h2 {
    line-height: 2em;
    font-size: 1.6rem;
    font-weight: 600;
    color: #333;
    margin: 2%;
}


.rc_campaignad{align-self: center;padding-left: 20px;float: left;}
.rc_campaignad h4{font-size: 1.3rem;color: #fff;padding: 30px 0 0 15px;font-family: "Microsoft JhengHei",serif;font-weight: 900;}
.rc_campaignad p{font-size: 1.1rem;line-height: 1.5;color: #fff;padding-left: 15px;font-family: "Microsoft JhengHei",serif;}
.rc_campaign_list{width: 350px;background-image: url("https://image.card.tw.r10s.com/images/common/campaign_list.jpg");background-position: right;background-color: #c4a054;background-repeat: no-repeat;height: 130px;display: block;padding-top: 10px;}
.rc_japan{width: 350px; background-image: url("https://image.card.tw.r10s.com/images/common/japan.jpg");background-color: #302318;background-position: right;background-repeat: no-repeat;height: 130px;display: block;padding-top: 10px;margin:0 auto;}
.rc_merchant{width: 350px;float: right;background-image: url("https://image.card.tw.r10s.com/images/common/merchant.jpg");background-color: #6c5e59;background-position: right;background-repeat: no-repeat;height: 130px;display: block;padding-top: 10px;}


.column_half {
    width: 50%;
    float: left;
    margin-top: 0px;
    display: block;
}
.column_3 {
    width: 33%;
    float: left;
    display: inline-block;
    text-align: center;
    display: block;
}
.right{

    border-right: 1px solid #aeaeae;
}
.right_half{float: right;width: 50%;margin-top: 0px;}



.column_3 {
    width: 33.33333%;
    float: left;
    margin: 2% auto;
}

.column_4 {
    width: 25%;
    float: left;
    margin: 2% auto;
    padding: 25px;
}


.column_3 a{text-decoration: none;}

.columns4{
    width: 25%;
    float: left;
    font-family: "Source Sans Pro";
    line-height: 24px;
    text-align: justify;
    padding: 10px 0px;
    margin: 15px 0px;
}

#top{ background-color:#E7E7E7; background-image: url("https://image.card.tw.r10s.com/images/common/card_bg.jpg");background-position: center top; background-repeat: no-repeat; height: auto;padding: 0px; overflow: hidden; height: 420px;}
#top .left_article {
    width: 760px;
    float: left;
}
#top .right_article {
    text-align: center;
    width: 315px;
    float: right;
    background-color: #fff;
    box-shadow: 3px 3px 15px #d0d0d069;
    padding: 5px 20px;
    border-radius: 10px;
    margin-top: 0.8%;
    margin-right:5px;
    border: #f6f6f6 1px solid;
}

.right_article2 {
    text-align: center;
    width: 315px;
    float: right;
    background-color: #fff;
    box-shadow: 3px 3px 15px #d0d0d069;
    padding: 5px 20px;
    border-radius: 10px;
    margin-top: 0.8%;
    margin-right: 0px;
    border: #f6f6f6 1px solid;
    top: -430px;
    margin-bottom: -430px;
    position: relative;
    z-index: 10;
    display: none;
}
.rakuten-title{margin: 0 0 .1em;
    font-size: 2.6em;
    line-height: 1.4;
    letter-spacing: .05em;
    font-weight: 400;  position: absolute;

}

.rakuten-title-sub{
    font-size: .8em;
    display: block;  

}

.column_6 {
    width: 16.6%;
    float: left;
    margin: 0 auto;
    padding: 10px;
}


.column_6 h4{ text-align:center;padding:10px 5px; color:#333;}
.column_6:hover{opacity: 0.7;}
.column_6:visited{text-decoration:none;}



#sec001{background-color:#f4f4f4;/background-position: top right;background-repeat: no-repeat;height: auto;padding: 0px;background-size: 25%;overflow: hidden;margin-top: 3%;}

#sec001 h4 {text-align: center;font-weight: 900;line-height: 1.8;padding-top: 10px;color:#333;}

#sec001 p {
    color:#333;font-size:12px;padding:10px;
}



#sec002{ background-color:#fff; background-image: url("https://image.card.tw.r10s.com/images/common/login.jpg");background-position: center left; background-repeat: no-repeat; height: auto;padding: 30px 0px;overflow: hidden;}

#sec003{ background-color:#f5f5f7; background-image: url("https://image.card.tw.r10s.com/images/common/customer_service.jpg");background-position: center right; background-repeat: no-repeat; height: auto;padding: 50px 0px;overflow: hidden; margin-bottom: 3%;}

hr{border:0;border-top: 1px solid #e6e6e6;margin: 10px 0;}


.footer {background-color: #f5f5f5;margin-bottom: -15px;}
.footer { font-size: .8em; font-weight: normal; color: #A5A5A5;}

.footer h5{font-size: 1rem; font-weight: bold; color: #868686;}

.footer ul li {
    padding-bottom: 5%;
    list-style: none;
    font-size: .8rem;
    line-height: 1.4;
}

.footer  a{ text-decoration: none;}

.footer .ml {padding-left: 100px; display: block;}


.copyright {
    text-align: left;
    color: #a5a5a5;
    text-transform: uppercase;
    font-weight: lighter; clear: both;
    font-size: .8rem;
    padding-bottom: 10px;

}


/* Style The Dropdown Button */
.dropbtn {
    background-image: url(https://intl.rakuten-static.com/b/tw/assets/common/rakuten-logo-v-192x192-new.png);
    background-repeat: no-repeat;
    background-color: #fff;
    background-position: left 5px center;
    background-size: 20%;
    width: 130px;
    font-size: 14px;
    line-height: 30px;
    border: none;
    cursor: pointer;
    color: #bf0000;
    padding: 10px 10px 10px 30px;
    z-index: 10; 
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom:5%;
}

.dropdown a{
    text-decoration:none;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 130px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 5px 10px;
    text-decoration: none;
    display: block; font-size:.8rem;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {

    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #fff; }

/*dropdown*/


.list-group {
    padding-left: 0;
    margin-bottom: 20px;
}

a.list-group-item, button.list-group-item {
    color: #555;
    text-decoration: none;
    border: 0px solid #ddd;
    border-bottom: 1px solid #ddd;
    background-color: initial;
}


.list-group-item {
    position: relative;
    display: block!important;
    padding: 20px 0px!important;
    margin-bottom: -1px!important;
    background-color: initial!important;
    border: 0px solid #ddd!important;
    border-bottom: 1px solid #ddd!important;
}

.list-group img{width: 60px;  float: left;}
.list-group h4{padding-left:80px;line-height: initial;}
.list-group p{padding-left:80px;}

.next_icon{ background-image: url(https://image.flaticon.com/icons/svg/709/709586.svg); background-position: center right; background-size: 20px; background-repeat: no-repeat; }

.label-hot {
    background-color: #bf0000; color: #fff; margin: 0 5px;
}

.label {
    display: inline;
    padding: .1em .6em .2em;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
}

.news{display: block; width: 95%;}

.news h6{font-size: .8rem;}

.news ul li{color: #555;width: 100%;margin-bottom: 3.7%;border-bottom: 1px #ddd solid;list-style: none;font-size: 1rem;background-image: url("https://image.card.tw.r10s.com/images/common/download.svg");background-size: 25px;background-position: right;background-repeat: no-repeat;padding: 10px;padding-right: 30px;padding-bottom: 15px;}

.news ul li a{text-decoration: none;}

.legal_left {
    width: 380px;
    float: left;
    font-size: 1.6em;
    text-align: center;
    line-height: 1.3em;
    margin: 5% 0;
    letter-spacing: 0.3em;
    color: #707070;
    display:flex;
    align-items:center;
}

.legal_right {
    width: 700px;
    float: right;
    font-size: .8rem;
    margin: 5% 0;
    line-height: 1.5;
    color: #707070;
    display:flex;
    align-items:center;
}



.btnApply_box{margin:2% auto;  display:flex;}

.btnApply_application{
    padding: 10px;
    width: 100%;
    display: inline-table;
    float: left;
    position: relative;
    text-align: center;
    color: #fff;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 2% auto 10% auto;
    border:2px solid #bf0000;
    border-radius: 3em;
    letter-spacing: 0px;
    background: #CC1313;
    box-sizing: border-box;
    font-size: 23px;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.btnApply_application:hover,.btnApply:active {
    text-decoration: none;
    background: #fff;color: #bf0000;
    border:2px solid #bf0000;
    box-shadow: none;
    position: relative;
}


.btnApply_c{
    padding: 5px;
    width: 100%;
    display: inline-table;
    float: left;
    /* line-height: 2.5; */
    position: relative;
    text-align: center;
    color: #bf0000;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 2% auto;
    border:2px solid #bf0000;
    border-radius: 3em;
    letter-spacing: 0px;
    box-sizing: border-box;
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.btnApply_c:hover,.btnApply:active {
    text-decoration: none;
    background: #bf0000;color: #fff;
    border:2px solid #bf0000;
    box-shadow: none;
    position: relative;
}


.btnApply {
    padding: 5px;
    width: 48%;
    display: inline-table;
    float: left;
    position: relative;
    text-align: center;
    color: #fff;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 2% 1%;
    border:2px solid #bf0000;
    border-radius: 3em;
    letter-spacing: 0px;
    background: #CC1313;
    box-sizing: border-box;
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.btnApply_b {
    padding: 5px;
    width: 48%;
    display: inline-table;
    float: left;
    position: relative;
    text-align: center;
    color: #bf0000;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 2% 1%;
    border:2px solid #bf0000;
    border-radius: 3em;
    letter-spacing: 0px;
    box-sizing: border-box;
    font-size: 20px;
    text-decoration: none;
    transition: background-color .2s ease-out;
}

.btnApply_b:hover,.btnApply:active {
    text-decoration: none;
    background: #bf0000;color: #fff;
    border:2px solid #bf0000;
    box-shadow: none;
    position: relative;
}

.btnApply:visited{
    text-decoration: none;color: #fff;
}
.btnApply:hover,.btnApply:active {
    text-decoration: none;
    background: #fff;color: #bf0000;
    border:2px solid #bf0000;
    box-shadow: none;
    position: relative;
}

.btnApply > span {
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #ffffff59;
    padding: 0 0 5px 2px;
    margin-bottom: 5px;
}

.login{
    text-decoration: none;
    color: #fff;
    background-color: #bf0000;
}


.btnApplyB {
    padding: 10px 0;
    display: block;
    float: left;
    position: relative;
    text-align: center;
    color: #bf0000;
    font-family: "Microsoft JhengHei";
    font-weight: bold;
    margin: 0 auto;
    border: 2px solid #bf0000;
    border-radius: 3em;
    letter-spacing: 0px;
    background: #fff;
    box-sizing: border-box;
    font-size: 20px;
    text-decoration: none;
    width: 100%;
    margin-bottom: 5%;
    transition: background-color .2s ease-out;
}

.btnApplyB:visited{
    text-decoration: none;
    color: #fff;
    background-color: #bf0000;
}

.btnApplyB:hover,.btnApplyB:active {
    text-decoration: none;
    background: #bf0000;color: #fff;
    border:2px solid #fff;
    box-shadow: none;
    position: relative;
}

.btnApplyB > span {
    display: block;
    font-size: 18px;
    border-bottom: 1px solid #bf0000;
    padding: 0 0 5px 2px;
    margin-bottom: 5px;
}

#container {
    font-size:20px;
    overflow: hidden;
}

.swiper-container2 h1 {
    font-family: "Helvetica Neue", "Microsoft YaHei", sans-serif;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 2.3rem;
    color: #bf0000;
    padding: 10px;
    text-align: left;
}
.swiper-container2 ul li{list-style: none;color: #333;font-size: 1.5em;text-align:left;}
.swiper-container2 ul li img {width: 30px;margin-right:3%;}

.event_no_list{background-color: #fff;width: 300px;height: 210px;border-radius: 8px;}
.event_no_list a{text-decoration: none;}

.event_no_list img{width: 100%;height: auto;border-radius: 8px 8px 0px 0px;}
.event_no_list_info{font-size: 1rem;color: #333;padding: 10px 25px 20px 10px;font-weight: bold;height: 5px;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}


.event_no_list2{width: 270px;text-align: center;}
.event_no_list2 a{text-decoration: none;}

.event_no_list2 img{width: 100%;margin-top: -20px;margin-bottom: -20px;}
.event_no_list_info2{}
.event_no_list_info2{font-size: 1rem;color: #333;font-weight: bold;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;overflow: hidden;}


ul.merchant_tabs {
    margin: 0px auto;
    text-align: center;
    width: auto;
}

li.merchant_city2.active {
    background: #bf0000;
    color: #fff;
    margin-right: -6px;
    margin-left: 0px;
}

li.merchant_city2 {
    display: inline-block;
    float:left;
    padding: 6px 20px;
    font-size: 17px;
    font-weight: 900;
    font-family: Microsoft JhengHei ,sans-serif;
    cursor: pointer;
    margin-right: -6px;
    border-radius: 50px;
}

.nonactive{
    display:none;
}


.swiper-button-next-6, .swiper-button-next-7, .swiper-button-next-8, .swiper-button-next-9 {
    position: absolute;
    top: 30%;
    right:0%;
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #383838;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
}

.swiper-button-prev-6, .swiper-button-prev-7, .swiper-button-prev-8, .swiper-button-prev-9 {
    position: absolute;
    top: 30%;
    margin-top: calc(-1 * var(--swiper-navigation-size) / 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #383838;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    -webkit-box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 15px 20px 0px rgba(0,0,0,0.1);
}


.swiper-button-prev-6:after,.swiper-button-prev-7:after,.swiper-button-prev-8:after,.swiper-button-prev-9:after  {
    content: ' \25C2';
    color: #ffffff;
    font-size: 24px;
    padding-bottom: 3px;
}

.swiper-button-next-6:after, .swiper-button-next-7:after, .swiper-button-next-8:after, .swiper-button-next-9:after {
    content: ' \25B8';
    color: #ffffff;
    font-size: 24px;
    padding-bottom: 3px;
}


.apply-box {
    position: fixed;
    right: 20px;
    bottom: 0;
    width: 270px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    box-sizing: border-box;
    padding-top: 15px;
    color: #ffffff;
    background-color: #2D2D2D;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 999;
}

.apply-box h3 {
    font-size: 20px;
}

.apply-box .btn-apply {
    width: 240px;
    height: 50px;
    display: block;
    margin: 0 auto;
    font-size: 18px;
    line-height: 50px;
    color: #ffffff;
    background-color: #c31010;
    border-radius: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: none;
}