/*
  Note: Please update this info to manage this file.
  Created date: 2017-01-27
  Last updated: 2018-05-10, Updated by Lim
*/
/* 
  http://meyerweb.com/eric/tools/css/reset/ 
  v2.0 | 20130620
  License: none (public domain)
*/
@import url("//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css");
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,
small, 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%;
  vertical-align: baseline;
  line-height: 1.5; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

table {
  border-spacing: 0; }

html {
  background-color: white;
  font-size: 1em; }

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  -webkit-text-size-adjust: none; }

html, body {
  /*height: 100%; min-height: 100%;*/
  margin: 0px;
  padding: 0px;
  font-family: Helvetica, Arial, sans-serif; }

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1em;
  text-decoration: none; }

a {
  color: #3C9A62;
  text-decoration: none; }

a:hover {
  color: #3C9A62;
  text-decoration: underline; }

/*
  Note: Please update this info to manage this file.
  Created date: 2017-01-27
  Last updated: 2017-02-15, Updated by Lim
*/
/*------------------------- Media Quary -------------------------*/
.desktop {
  display: block; }
  @media only screen and (max-device-width: 599px) {
    .desktop {
      display: none !important; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .desktop {
      display: none !important; } }

.mobile {
  display: none; }
  @media only screen and (max-device-width: 599px) {
    .mobile {
      display: block !important; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .mobile {
      display: block !important; } }

.desktop-table-row {
  display: table-row; }
  @media only screen and (max-device-width: 599px) {
    .desktop-table-row {
      display: none !important; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .desktop-table-row {
      display: none !important; } }

.mobile-table-row {
  display: none; }
  @media only screen and (max-device-width: 599px) {
    .mobile-table-row {
      display: table-row !important; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .mobile-table-row {
      display: table-row !important; } }

/*------------------------- Color, Font type -------------------------*/
/* Dark text on light backgrounds */
/* White text on dark background */
.primary-text, .text-black {
  color: rgba(0, 0, 0, 0.87); }

.secondary-text, .text-light-medium-black {
  color: rgba(0, 0, 0, 0.54) !important; }

.disabled-text, .text-light-black {
  color: rgba(0, 0, 0, 0.38); }

.text-active, .primary-color {
  color: #3A945E !important; }

/* surveyon green */
.text-color-red {
  color: #FF4242 !important; }

.text-color-white {
  color: white; }

.gray, .grey {
  color: #969696; }

/* for Light background */
.light-gray, .light-grey {
  color: #D0D0D0; }

/* for Dark background */
.red {
  color: #FF4242;
  font-weight: bold; }
  .red.mB20 {
    margin-top: 20px; }

.yellow {
  color: #FDD835;
  font-size: 20px;
  font-weight: bold; }

/* Font Family, Font Type, Typeface */
@font-face {
  font-family: Avenir;
  src: url("/font/Avenir.ttc"); }

@font-face {
  font-family: ecouponTH1;
  src: url("/font/DBFongNamX.ttf"); }

@font-face {
  font-family: ecouponTH2;
  src: url("/font/DBFongNamXB.ttf"); }

.text-14px {
  font-size: 14px; }

.text-16px {
  font-size: 16px; }

.smallText {
  font-size: small; }

.font-medium-size {
  font-size: medium; }

.font-large-size {
  font-size: large; }

.font-size-reset {
  font-size: inherit !important; }

.font-xlarge-size {
  font-size: x-large !important; }
  @media only screen and (max-device-width: 599px) {
    .font-xlarge-size {
      font-size: 20px !important; } }

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeSpeed; }

h1 {
  line-height: 1.5em;
  font-size: xx-large; }

h2.red {
  font-size: large;
  padding: 10px 0;
  display: inline-block;
  border-top: 2px solid #eb402d;
  color: #323232; }

h3 {
  font-size: 16px; }
  h3.mB10 {
    font-size: large;
    font-weight: bold;
    color: #3A945E !important; }

/* Placeholder of style definition frequently */
.conerBorder5, .border-radius-5, .bonus-mail-setting .precaution, .boxStylelightG, .box, .user-info, .navbar .navbar-inner, .signBox, .table-bordered.sp2, .landing-welcome section, .landing-welcome section ul, .pointBox > .exchange-wrapper, .pointBox > span, .pointBox .Itemdescription .important, .pointExchangeTable, .content-list, .quickpoll-list-item-delete, .trend-layout .btn-trend, .trend-layout .btn-red, form .row-fluid:nth-child(odd) {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px; }

/* Align Definition */
.inline-block-base {
  display: inline-block; }

.txt-align-center {
  text-align: center !important; }

.margin-center {
  margin-left: auto;
  margin-right: auto; }

.v-align-middle {
  display: table-cell;
  vertical-align: middle; }

.tCenter {
  text-align: center;
  margin-bottom: 20px; }
  .tCenter strong {
    font-size: 1.5em;
    font-weight: bold;
    color: #232323;
    display: block;
    padding: 20px; }
  .tCenter span {
    display: block;
    text-align: left; }

.fl {
  float: left;
  display: inline-block; }

.fr {
  float: right;
  display: inline-block; }

.tRight {
  text-align: right;
  margin-top: 10px; }

.relative-top-1px {
  position: relative;
  top: 1px; }

.relative-top-4px {
  position: relative;
  top: 4px; }

.checkbox, .radio {
  margin-top: 0;
  margin-bottom: 0; }

/*------------------------- Selected Section Color -------------------------*/
::-moz-selection {
  color: #3A945E;
  background: #C6C6C6; }

::selection {
  color: #3A945E;
  background: #bfc1bf; }

/*------------------------- Padding, Margin -------------------------*/
.cleaR {
  clear: both; }

.w100 {
  width: 100%; }

.w90 {
  width: 90%; }

.w80 {
  width: 80%; }

.w70 {
  width: 70%; }

.w60 {
  width: 60%; }

.w50 {
  width: 50%; }

.w40 {
  width: 40%; }

.w30 {
  width: 30%; }

.w20 {
  width: 20%; }

.w10 {
  width: 10%; }

@media only screen and (max-device-width: 599px) {
  .w10, .w20, .w30, .w40, .w50, .w60, .w70, .w80, .w90, select {
    width: 100%; } }

.row {
  margin: 0; }

/* last content */
.mT3 {
  margin-top: 3px; }

.mT5 {
  margin-top: 5px; }

.mT10 {
  margin-top: 10px; }

.mT15 {
  margin-top: 15px; }

.mT20 {
  margin-top: 20px; }

.mT30 {
  margin-top: 30px; }

.mT40 {
  margin-top: 40px; }

.margin-top-dot5em {
  margin-top: .5em; }

.margin-top-dot3em {
  margin-top: .3em; }

.margin-top-1em {
  margin-top: 1em; }

.margin-top-2em {
  margin-top: 2em; }

.margin-top-4em {
  margin-top: 4em; }

.mR5 {
  margin-right: 5px; }

.mR10 {
  margin-right: 10px; }

.mR20 {
  margin-right: 20px; }

.margin-right-1em {
  margin-right: 1em; }

.margin-right-dot5em {
  margin-right: .5em; }

.mL5 {
  margin-left: 5px; }

.mL10 {
  margin-left: 10px; }

.mL20 {
  margin-left: 20px; }

.margin-left-1em {
  margin-left: 1em; }

.margin-left-dot-5em, .margin-left-dot5em {
  margin-left: 0.5em; }

.margin-left-reset {
  margin-left: 0 !important; }

.mB5 {
  margin-bottom: 5px; }

.mB10 {
  margin-bottom: 10px; }

.mB15 {
  margin-bottom: 15px; }

.mB20 {
  margin-bottom: 20px; }

.mB30 {
  margin-bottom: 30px; }

.margin-bottom-0em {
  margin-bottom: 0 !important; }

.margin-bottom-dot5em {
  margin-bottom: .5em !important; }

.margin-bottom-1em {
  margin-bottom: 1em; }

.margin-bottom-3em {
  margin-bottom: 3em; }

.padding-dot5em {
  padding: .5em; }

.padding-1-dot-5em {
  padding: 1.5em; }

.padding-1em {
  padding: 1em; }

.padding-2em {
  padding: 2em; }

.padding-top-1em {
  padding-top: 1em; }

.padding-top-2em {
  padding-top: 2em; }

.padding-top-3em {
  padding-top: 3em; }

.padding-right-2em {
  padding-right: 2em; }

.padding-right-5em {
  padding-right: 5em; }

.padding-left-1em {
  padding-left: 1em; }

.padding-left-2em {
  padding-left: 2em; }

.padding-left-5em {
  padding-left: 5em; }

.padding-bottom-1em {
  padding-bottom: 1em; }

.padding-bottom-2em {
  padding-bottom: 2em; }

.padding-hor-reset {
  padding-left: 0;
  padding-right: 0; }

/* Compass mixins for CSS keyframe animations */
/* Mixins for Cross-browser*/
/*------------------------- Icon, Image, Background (Updated 2017-03-22 by Lim) -------------------------*/
.ico16 {
  background: url("../img/bg.png?ver20200505") no-repeat;
  width: 16px;
  height: 16px;
  text-indent: -5000px !important;
  position: relative;
  margin: 0;
  display: -moz-inline-stack;
  display: inline-block;
  text-decoration: none !important;
  border: 0; }
  .ico16 * {
    vertical-align: middle; }
  .ico16.sign-up-step-02 {
    background-position: -885px -106px;
    width: 149px;
    height: 28px; }
  .ico16.sign-up-step-03 {
    background-position: -726px -106px;
    width: 149px;
    height: 28px; }
  .ico16.arrow-white-down {
    background-position: -1449px -73px !important;
    width: 34px;
    height: 19px; }
  .ico16.arrow-green-down {
    background-position: -739px -5px;
    width: 12px;
    height: 7px; }
  .ico16.apologize-yoko {
    background-position: -0px -786px;
    width: 265px;
    height: 125px; }
  .ico16.survey-yoko {
    background-position: -1089px -640px;
    width: 219px;
    height: 128px; }
  .ico16.mail-yoko {
    background-position: -1311px -665px;
    width: 139px;
    height: 97px; }
  .ico16.gold-point {
    background-position: -2516px -719px;
    width: 49px;
    height: 49px; }
  .ico16.letter-green {
    background-position: -698px -107px;
    width: 18px;
    height: 12px; }
  .ico16.more-plus {
    background-position: -645px -3px;
    width: 13px;
    height: 13px; }
  .ico16.question-help {
    background-position: -640px -105px;
    width: 10px;
    height: 20px; }
  .ico16.event-icon {
    background-position: -571px -105px;
    width: 24px;
    height: 24px; }
  .ico16.double-point {
    background-position: -939px -657px;
    width: 132px;
    height: 53px; }
  .ico16.refresh-white {
    background-position: -387px -108px;
    width: 20px;
    height: 20px; }
  .ico16.arrow-double {
    background-position: -526px -1px; }
  .ico16.arrow-dotted-right {
    background-position: -520px -110px;
    width: 20px;
    height: 20px; }
  .ico16.arrow-dotted-left {
    background-position: -499px -110px;
    width: 20px;
    height: 20px; }
  .ico16.arrow-dotted-close {
    background-position: -546px -114px;
    width: 12px;
    height: 12px; }
  .ico16.arrow-dotted-close-gray {
    background-position: -546px -141px;
    width: 12px;
    height: 12px; }
  .ico16.large-circle-survey {
    background-position: -1063px -535px;
    width: 100px;
    height: 100px; }
  .ico16.large-share {
    background-position: -1197px -63px;
    width: 35px;
    height: 35px; }
  .ico16.large-invitation {
    background-position: -1238px -63px;
    width: 35px;
    height: 35px; }
  .ico16.face-icon-top {
    background-position: -415px -102px;
    width: 76px;
    height: 28px; }
  .ico16.blue-icon-gender {
    background-position: -478px 0px; }
  .ico16.blue-icon-age {
    background-position: -505px 0px; }
  .ico16.blue-icon-answer {
    background-position: -432px 0px; }
  .ico16.blue-icon-comment {
    background-position: -453px 0px; }
  .ico16.toggle-arrow {
    background-position: -391px -1px; }
  .ico16.toggle-small-arrow {
    background-position: -696px 3px; }
  .ico16.toggle-small-arrow.close {
    background-position: -715px 3px; }
  .ico16[class*="country-"] {
    width: 24px;
    height: 24px; }
  .ico16.country-id {
    background-position: -252px -27px; }
  .ico16.country-vn {
    background-position: -288px -27px; }
  .ico16.country-ph {
    background-position: -325px -27px; }
  .ico16.country-hk {
    background-position: -142px -27px; }
  .ico16.country-kr {
    background-position: -362px -27px; }
  .ico16.country-jp {
    background-position: -398px -27px; }
  .ico16.country-th {
    background-position: -178px -27px; }
  .ico16.country-my {
    background-position: -215px -27px; }
  .ico16.country-sg {
    background-position: -69px -27px; }
  .ico16.country-tw {
    background-position: -105px -27px; }
  .ico16.country-us {
    background-position: -436px -27px; }
  .ico16.country-uk {
    background-position: -471px -27px; }
  .ico16.country-in {
    background-position: -508px -27px; }
  .ico16.country-no-image {
    background-position: -545px -27px;
    width: 24px;
    height: 24px; }
  .ico16.quickpoll-vote {
    background-position: -838px -536px;
    width: 100px;
    height: 100px; }
  .ico16.quickpoll-result {
    background-position: -1179px -536px;
    width: 100px;
    height: 100px; }
  .ico16.quickpoll-user-yoko {
    background-position: -1108px -62px;
    width: 36px;
    height: 36px; }
  .ico16.quickpoll-user-small-yoko {
    background-position: -355px -104px;
    width: 24px;
    height: 24px; }
  .ico16.quickpoll-user-icon-my {
    background-position: -1229px -109px;
    width: 100px;
    height: 101px; }
  .ico16.quickpoll-user-icon {
    background-position: -1109px -109px;
    width: 100px;
    height: 100px; }
  .ico16.quickpoll-icon-disable {
    background-position: -2218px -718px;
    width: 49px;
    height: 49px; }
  .ico16.quickpoll-icon-active {
    background-position: -2455px -718px;
    width: 49px;
    height: 49px; }
  .ico16.quickpoll-mark {
    background-position: -1370px -352px;
    width: 60px;
    height: 60px; }
  .ico16.quickpoll-pencil {
    background-position: -635px -542px;
    width: 87px;
    height: 87px; }
  .ico16.medal-gold {
    background-position: -1285px -60px;
    width: 36px;
    height: 36px; }
  .ico16.medal-silver {
    background-position: -1325px -60px;
    width: 36px;
    height: 36px; }
  .ico16.medal-bronze {
    background-position: -1366px -60px;
    width: 36px;
    height: 36px; }
  .ico16.quote-start {
    background-position: -760px 0;
    width: 12px;
    height: 12px; }
  .ico16.quote-end {
    background-position: -782px 0px;
    width: 12px;
    height: 12px; }
  .ico16.trend-report-see {
    background-position: -1179px -786px;
    width: 100px;
    height: 100px; }
  .ico16.fbLogo {
    background-position: -188px -141px;
    width: 18px;
    height: 19px;
    position: absolute;
    left: 13px;
    margin-top: 2px; }
  .ico16.appleLogo {
    background-position: -158px -141px;
    width: 18px;
    height: 23px;
    position: absolute;
    left: 13px;
    margin-top: -1px; }
  .ico16.infoGray {
    background-position: -368px -1px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    position: relative;
    top: 1px; }
  .ico16.blueArrow_left {
    background-position: -267px -105px;
    width: 20px;
    height: 20px; }
  .ico16.blueArrow_right {
    background-position: -297px -105px;
    width: 20px;
    height: 20px; }
  .ico16.circle_user {
    background-position: -585px 0;
    position: relative;
    top: 3px; }
  .ico16.circle_reply {
    background-position: -614px 0;
    position: relative;
    top: 3px; }
  .ico16.circle_user + em, .ico16.circle_reply + em {
    font-style: normal;
    font-size: 16px;
    margin-left: 0.5em; }
  .ico16.paypalMinilogo {
    background-position: -381px -720px;
    width: 67px;
    height: 19px; }
  .ico16.companyFirst {
    background-position: -336px -542px;
    width: 87px;
    height: 87px; }
  .ico16.companySecond {
    background-position: -436px -542px;
    width: 87px;
    height: 87px; }
  .ico16.companyThird {
    background-position: -536px -542px;
    width: 87px;
    height: 87px; }
  .ico16.pointVoucher {
    background-position: -2100px -719px;
    width: 48px;
    height: 48px; }
  .ico16.pointPaypal {
    background-position: -2159px -719px;
    width: 48px;
    height: 49px; }
  .ico16.pointLogoPaypal {
    background-position: -383px -675px;
    width: 135px;
    height: 34px; }
  .ico16.orangeArrow {
    background-position: -1022px -67px;
    width: 30px;
    height: 30px; }
  .ico16.circle_pencil {
    background-position: -1060px -67px;
    width: 39px;
    height: 39px; }
  .ico16.yellowBackuser {
    background-position: -667px -641px;
    width: 75px;
    height: 75px; }
  .ico16.yellowBackNotuser {
    background-position: -757px -640px;
    width: 75px;
    height: 75px; }
  .ico16.yokoIcon {
    background-position: -977px -62px;
    width: 36px;
    height: 36px; }
  .ico16.checkRedArrow {
    background-position: -663px 0px;
    width: 16px;
    height: 16px;
    margin: 0 .5em 0 0; }
  .ico16.pointIconYellow {
    background-position: -2099px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconGreen {
    background-position: -2189px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconRed {
    background-position: -2279px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconEmerald {
    background-position: -2369px -637px;
    width: 81px;
    height: 81px; }
  .ico16.infoGray {
    background-position: -368px -1px;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    position: relative;
    top: 1px; }
  .ico16.pointVoucher {
    background-position: -2100px -719px;
    width: 48px;
    height: 48px; }
  .ico16.yokoIcon {
    background-position: -977px -62px;
    width: 36px;
    height: 36px; }
  .ico16.checkArrow {
    background-position: -350px 5px;
    width: 16px;
    height: 16px;
    margin-right: 0.5em; }
  .ico16.pointIconYellow {
    background-position: -2099px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconGreen {
    background-position: -2189px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconRed {
    background-position: -2279px -637px;
    width: 81px;
    height: 81px; }
  .ico16.pointIconEmerald {
    background-position: -2369px -637px;
    width: 81px;
    height: 81px; }
  .ico16.recommendSmall {
    background-position: -773px -63px;
    width: 35px;
    height: 35px;
    padding: 4px;
    margin-left: 10px; }
  .ico16.whiteArrow {
    background-position: -814px -67px;
    width: 35px;
    height: 35px; }
  .ico16.separator-bar {
    background-position: -331px top;
    width: 2px; }
  .ico16.face {
    background-position: -40px top; }
  .ico16.facebook-page {
    background-position: -327px -105px;
    width: 24px;
    height: 24px; }
  .ico16.googleLogo {
    background-position: -133px -103px;
    width: 32px;
    height: 32px;
    position: absolute;
    left: 4px;
    top: 6px; }
  .ico16.mandatoryIcon {
    background-position: -96px -100px; }
  .ico16.share {
    background-position: left top; }
  .ico16.arrowBrown {
    background-position: -311px 0px; }
  .ico16.setting {
    background-position: -605px -104px;
    width: 19px;
    height: 19px; }
  .ico16.point {
    background-position: left -60px; }
  .ico16.mypoint {
    background-position: left -541px;
    width: 70px;
    height: 16px; }
  .ico16.user-person {
    background-position: -668px -102px;
    width: 19px;
    height: 19px; }
  .ico16.pointCircle {
    background-position: -146px top; }
  .ico16.info {
    background-position: -116px top; }
  .ico16.arrow {
    background-position: -61px top; }
  .ico16.footerShare {
    background-position: left -662px;
    width: 43px;
    height: 43px; }
  .ico16.pointP {
    background-position: -286px 0px; }
  .ico16.logo {
    background-position: left -722px;
    width: 175px;
    height: 46px;
    padding: 0;
    margin-right: 18px; }
  .ico16.small-logo {
    background-position: -184px -723px;
    width: 115px;
    height: 30px; }
  .ico16.titleBg {
    background-position: -156px -662px;
    width: 70px;
    height: 43px; }
  .ico16.titleS {
    background-position: left -26px;
    width: 30px;
    height: 30px; }
  .ico16.arrowBrush {
    background-position: -231px -636px;
    width: 50px;
    height: 13px;
    text-align: left;
    display: inline-block; }
  .ico16.faq-question {
    background-position: -1406px -61px;
    width: 35px;
    height: 35px; }
  .ico16.dotblack {
    background-position: -18px -98px;
    padding-right: 10px;
    width: 5px;
    height: 16px; }
  .ico16.dot-white {
    background-position: -683px 2px; }
  .ico16.dot-green {
    background-position: -545px -2px; }

.country-flag {
  text-transform: uppercase;
  font-weight: bold;
  line-height: 22px; }
  .country-flag span[class*="country"] {
    margin-right: .5em; }
    .country-flag span[class*="country"]:after {
      padding-right: .5em; }

.icoLogin {
  width: 30px;
  height: 30px;
  text-indent: -5000px !important;
  position: absolute;
  margin: 0;
  display: -moz-inline-stack;
  display: inline-block;
  text-decoration: none !important;
  border: 0; }
  .icoLogin * {
    vertical-align: middle; }
  .icoLogin.facebookLogin {
    background: url("../img/ico_fb_2022.svg") no-repeat;
    top: 6px;
    left: 8px; }
  .icoLogin.appleLogin {
    background: url("../img/ico_apple_2022.svg") no-repeat;
    top: 8px;
    left: 11px; }
  .icoLogin.huaweiLogin {
    background: url("../img/ico_huawei_2022.svg") no-repeat;
    top: 7px;
    left: 9px; }

/* SSI */
.enquete-ssi {
  background: url("../img/bg_ssi.png") no-repeat; }
  .enquete-ssi.permission {
    background-position: 0 -149px;
    width: 381px;
    height: 227px; }
    @media only screen and (max-device-width: 599px) {
      .enquete-ssi.permission {
        width: 100%; } }
  .enquete-ssi.permission-notice1 {
    background-position: 0 -388px;
    width: 49px;
    height: 49px; }
  .enquete-ssi.permission-notice2 {
    background-position: -58px -388px;
    width: 49px;
    height: 49px; }
  .enquete-ssi.permission-notice3 {
    background-position: -117px -388px;
    width: 49px;
    height: 49px; }
  .enquete-ssi.pre-screen {
    background-position: 0 0;
    width: 241px;
    height: 140px; }
  .enquete-ssi.done {
    background-position: -248px -5px;
    width: 241px;
    height: 134px; }
  .enquete-ssi.cover {
    background-position: -514px -20px;
    width: 144px;
    height: 116px; }

/* Devices icons on Survey List */
.icon-pc {
  background: url("../img/ico_pc.svg") no-repeat;
  background-size: 100%;
  display: inline-block;
  text-decoration: none !important;
  border: 0;
  margin: 0; }

.icon-tablet {
  background: url("../img/ico_tablet.svg") no-repeat;
  background-size: 100%;
  display: inline-block;
  text-decoration: none !important;
  border: 0;
  margin: 0; }

.icon-mobile {
  background: url("../img/ico_mobile.svg") no-repeat;
  background-size: 100%;
  display: inline-block;
  text-decoration: none !important;
  border: 0;
  margin: 0; }

/* Quickpoll category graphic */
.quickpoll-category-item {
  width: 100px;
  height: 100px;
  display: inline-block;
  text-indent: -5000px !important;
  background: url("../img/gp-quickpoll-category.png?ver20181207");
  background: url("../img/gp-quickpoll-category.svg?ver20181207"), linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 2004px 100px; }
  .quickpoll-category-item.category-love {
    background-position: 0 -4px; }
  .quickpoll-category-item.category-business {
    background-position: -100px -4px; }
  .quickpoll-category-item.category-travel {
    background-position: -200px -4px; }
  .quickpoll-category-item.category-fashion {
    background-position: -300px 0; }
  .quickpoll-category-item.category-study {
    background-position: -400px -4px; }
  .quickpoll-category-item.category-school {
    background-position: -500px 0; }
  .quickpoll-category-item.category-family {
    background-position: -600px -12px; }
  .quickpoll-category-item.category-child {
    background-position: -700px 0; }
  .quickpoll-category-item.category-beauty {
    background-position: -800px -4px; }
  .quickpoll-category-item.category-computers {
    background-position: -900px -12px; }
  .quickpoll-category-item.category-pets {
    background-position: -1000px -12px; }
  .quickpoll-category-item.category-health {
    background-position: -1100px 0; }
  .quickpoll-category-item.category-sports {
    background-position: -1200px 0; }
  .quickpoll-category-item.category-dining {
    background-position: -1300px 0; }
  .quickpoll-category-item.category-music {
    background-position: -1400px -12px; }
  .quickpoll-category-item.category-others {
    background-position: -1500px -4px; }
  .quickpoll-category-item #ico-quickpoll-bg {
    display: none; }

.quickpoll-category-graphic {
  width: 100px;
  height: 100px;
  position: relative; }
  .quickpoll-category-graphic:before, .quickpoll-category-graphic:after {
    content: '';
    width: 100px;
    height: 100px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: url("../img/gp-quickpoll-category.png?ver20181207");
    background: url("../img/gp-quickpoll-category.svg?ver20181207"), linear-gradient(transparent, transparent);
    background-repeat: no-repeat;
    background-size: 2004px 100px; }
  .quickpoll-category-graphic.category-love:before {
    background-position: -1601px 0; }
  .quickpoll-category-graphic.category-love:after {
    background-position: 0 0; }
  .quickpoll-category-graphic.category-business:before {
    background-position: -1702px 0; }
  .quickpoll-category-graphic.category-business:after {
    background-position: -100px 0; }
  .quickpoll-category-graphic.category-travel:before {
    background-position: -1702px 0; }
  .quickpoll-category-graphic.category-travel:after {
    background-position: -200px 1px; }
  .quickpoll-category-graphic.category-fashion:before {
    background-position: -1904px 0; }
  .quickpoll-category-graphic.category-fashion:after {
    background-position: -300px 0; }
  .quickpoll-category-graphic.category-study:before {
    background-position: -1803px 0; }
  .quickpoll-category-graphic.category-study:after {
    background-position: -400px 0; }
  .quickpoll-category-graphic.category-school:before {
    background-position: -1601px 0; }
  .quickpoll-category-graphic.category-school:after {
    background-position: -500px 0; }
  .quickpoll-category-graphic.category-family:before {
    background-position: -1904px 0; }
  .quickpoll-category-graphic.category-family:after {
    background-position: -600px 2px; }
  .quickpoll-category-graphic.category-child:before {
    background-position: -1601px 0; }
  .quickpoll-category-graphic.category-child:after {
    background-position: -700px 0; }
  .quickpoll-category-graphic.category-beauty:before {
    background-position: -1601px 0; }
  .quickpoll-category-graphic.category-beauty:after {
    background-position: -800px 0; }
  .quickpoll-category-graphic.category-computers:before {
    background-position: -1904px 0; }
  .quickpoll-category-graphic.category-computers:after {
    background-position: -900px 2px; }
  .quickpoll-category-graphic.category-pets:before {
    background-position: -1803px 0; }
  .quickpoll-category-graphic.category-pets:after {
    background-position: -1000px 2px; }
  .quickpoll-category-graphic.category-health:before {
    background-position: -1702px 0; }
  .quickpoll-category-graphic.category-health:after {
    background-position: -1100px 0; }
  .quickpoll-category-graphic.category-sports:before {
    background-position: -1601px 0; }
  .quickpoll-category-graphic.category-sports:after {
    background-position: -1200px 0; }
  .quickpoll-category-graphic.category-dining:before {
    background-position: -1702px 0; }
  .quickpoll-category-graphic.category-dining:after {
    background-position: -1300px 4px; }
  .quickpoll-category-graphic.category-music:before {
    background-position: -1803px 0; }
  .quickpoll-category-graphic.category-music:after {
    background-position: -1400px 2px; }
  .quickpoll-category-graphic.category-others:before {
    background-position: -1904px 0; }
  .quickpoll-category-graphic.category-others:after {
    background-position: -1500px 0; }

/*------------------------- Hack for IE (Updated 2017-01-31 by Lim) -------------------------*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .modal-body .ballonwhite.balloon {
    background-size: contain !important; }
  .radio input[type="radio"] {
    position: relative;
    top: 3px; }
  .pointVoucherStep li.span6 dt {
    width: auto; }
  .pointVoucherStep li.span6 dd {
    width: auto;
    min-height: 9em; }
  .form-horizontal.pointform .control-group label {
    width: auto; }
  .user b:last-child {
    top: 7px !important; } }

html, body {
  background-color: #e5e5e5 \9;
  height: 100% \9; }

.ie8 header nav .nav-pills li a {
  font-size: 14px; }

.ie8 header .dropdown ul {
  position: absolute; }

.ie8 div.wrapped header.container {
  border-bottom: 1px solid #d7d7d7; }

.ie8 .container {
  width: 1124px; }

.ie8 .itemrow .pointBox.span6 {
  float: right;
  margin-left: 0.5% !important;
  margin-right: 0.5% !important; }
  .ie8 .itemrow .pointBox.span6:first-child {
    float: left; }

.ie8 footer .container {
  padding: 10px 0 40px 0; }

.ie8 .myBanner a.yahoo-mail-notice {
  background-image: url(../img/banner/open_1410_yahoo_mail_ie8.png); }
  .ie8 .myBanner a.yahoo-mail-notice b span {
    font-size: 0.75em !important;
    width: 100%; }
  .ie8 .myBanner a.yahoo-mail-notice b span.rwd-control:first-child {
    font-size: 1.1em !important;
    width: 60%;
    line-height: 0.8em;
    margin-bottom: 0.2em; }

.ie8 .myBanner a.double-point b {
  margin-right: 30px;
  margin-top: 10px; }
  .ie8 .myBanner a.double-point b:first-child {
    margin-left: 30px;
    margin-top: 10px; }

.ie8 .span8.signBox input {
  width: 400px; }

.ie8 .setting.ico16 {
  background-position: -605px -105px;
  height: 24px; }

.ie8 .ico16.setting {
  position: relative;
  left: -2px;
  margin-top: 3px;
  margin-left: 5px;
  padding-left: 0;
  padding-right: 3px; }

.ie8 .question-help.ico16 {
  background-position: -640px -103px; }

.ie8 .list01 span.faq-question.ico16 {
  margin-right: 0; }

.ie8 .balloon span strong {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: 20px 20px !important; }

.ie8 .modal-body .balloon span strong {
  padding: 20px \9  !important;
  display: table-cell;
  vertical-align: middle;
  text-align: center; }

.ie8 .modal-body .balloon.ballonwhite span strong {
  left: -0.8em !important; }

.ie8 .user-info-area .dropdown .btn {
  height: 22px; }

.ie8 .user.fl {
  top: 1px; }

.ie8 .tick-flip {
  color: #323232 \9  !important;
  letter-spacing: 0.28em \0/IE9;
  top: 19px \0/IE9; }

.ie8 .frame {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

.ie8 .ranking-top {
  background: none;
  border-collapse: collapse;
  filter: alpha(opacity=100);
  outline: 2px solid #2dc3cc;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; }
  .ie8 .ranking-top:hover, .ie8 .ranking-top:focus, .ie8 .ranking-top:active {
    display: block; }

.ie8 .topBanner a.monthly-event span {
  top: 2px;
  position: relative; }
  .ie8 .topBanner a.monthly-event span:first-child {
    top: 0 !important; }

.ie8 .quickpoll-list-item .frame-vote {
  display: none; }

.ie8 .quickpoll-list-item .frame:hover, .ie8 .quickpoll-list-item .frame:focus, .ie8 .quickpoll-list-item .frame:active {
  border: 1px solid #d7d7d7; }

.ie8 .quickpoll-event .vertical-text-block {
  width: 700px !important; }

.ie8 .quickpoll-event .fr.event-description {
  width: 360px !important; }

.ie8 .quick-poll-category li:hover .frame {
  background-color: #3fc5f3;
  opacity: 0.5;
  background-image: none; }

.ie8 .quickpoll-choices-remove-trigger {
  padding: 0; }

.ie8 .pointVoucherStep li.span6 dt {
  width: auto; }

.ie8 .pointVoucherStep li.span6 dd {
  width: auto;
  min-height: 9em; }

.ie8 .form-horizontal.pointform .control-group label {
  width: auto; }

.ie8 .radio input[type="radio"] {
  position: relative;
  top: 3px  \0/IE9;
  top: 4px \9  !important; }

.ie8 .boxRecommend article dl h2 {
  display: block; }

.ie8 .recommendVisual {
  padding-top: 0px \9;
  padding-bottom: 0px \9; }

.ie8 #recommnedMail .modal-body {
  overflow: hidden; }

.ie8 #recommnedMail input.input-large {
  width: 286px; }

.ie8 #recommnedNickname .modal-body {
  overflow-y: scroll; }

.ie8 .commentBaloon span {
  text-align: right; }

.ie8 .eCoupon .row-fluid {
  border: none !important;
  backgorund: none; }

.ie8 .eCoupon .radio input[type="radio"] {
  position: relative;
  top: 3px; }

.ie8 .stepper-wrap input {
  position: relative;
  top: 1px; }

.ie8 .stepper-btn-wrap {
  position: relative;
  top: -3px; }

.ie8 .calculateBox input {
  width: 20px;
  position: relative;
  top: 2px;
  padding: 5px;
  text-align: center; }

.boxStyle {
  border-bottom: 1px solid #717171 \9;
  border-right: 1px solid #c1c1c1 \9;
  border-left: 1px solid #c1c1c1 \9; }
  .boxStyle span.ico16 {
    bottom: 1px \9; }

/*------------------------- Blink Icon on Header -------------------------*/
.blinkView {
  margin-right: 0.5em;
  height: 30px; }
  .blinkView a {
    display: inline-block;
    cursor: pointer;
    height: 30px; }
  @media only screen and (max-device-width: 599px) {
    .blinkView {
      margin: 0;
      position: absolute;
      right: 1.2em; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .blinkView {
      margin: 0;
      position: absolute;
      right: 2em; } }
  @media only screen and (max-device-width: 599px) {
    .blinkView img {
      height: 26px;
      width: auto; } }

/*------------------------- Float Icon on Header -------------------------*/
.float-icon {
  position: relative; }
  .float-icon span {
    position: absolute;
    top: -15px;
    right: -22px;
    width: inherit; }

/*------------------------- Banner at Home -------------------------*/
.common-banner {
  max-width: 917px; }
  .common-banner .gallery-cell {
    width: 100%;
    height: 100px; }
    @media only screen and (max-device-width: 599px) {
      .common-banner .gallery-cell {
        height: 200px; } }
    .common-banner .gallery-cell a {
      width: inherit;
      height: inherit;
      display: table; }
      .common-banner .gallery-cell a:hover {
        cursor: pointer;
        text-decoration: none; }
      @media only screen and (max-device-width: 599px) {
        .common-banner .gallery-cell a {
          display: block; } }
      .common-banner .gallery-cell a h1 {
        font-size: 1.4em;
        line-height: 1.3em;
        font-weight: bold; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a h1 {
            font-size: 1.2em;
            line-height: 1.2em;
            margin-bottom: 4px; } }
      .common-banner .gallery-cell a.quickpoll-double-point {
        background: #b3e2fa url("../img/banner/double_event-banner.png") top right no-repeat;
        background-size: cover; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.quickpoll-double-point {
            background: #b3e2fa url("../img/banner/double_event-banner-mobile.png") top right no-repeat; } }
        .common-banner .gallery-cell a.quickpoll-double-point h1 {
          color: #b11d11; }
        .common-banner .gallery-cell a.quickpoll-double-point p {
          color: rgba(0, 0, 0, 0.87); }
      @media only screen and (max-device-width: 599px) {
        .common-banner .gallery-cell a.point-decrease {
          text-align: center;
          background: #3A945E url("../img/banner/open_2302_event_point_mypage_th-mobile.png") top right no-repeat; } }
      .common-banner .gallery-cell a.point-decrease h1 {
        max-width: 50%; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.point-decrease h1 {
            vertical-align: top;
            max-width: 100%; } }
        @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
          .common-banner .gallery-cell a.point-decrease h1 {
            max-width: 40%;
            line-height: 1.1em; } }
      .common-banner .gallery-cell a.point-decrease p {
        font-size: 18px; }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .common-banner .gallery-cell a.point-decrease.sg-bg, .common-banner .gallery-cell a.point-decrease.hk-bg, .common-banner .gallery-cell a.point-decrease.tw-bg, .common-banner .gallery-cell a.point-decrease.my-bg, .common-banner .gallery-cell a.point-decrease.id-bg, .common-banner .gallery-cell a.point-decrease.vn-bg {
          background-position: bottom right;
          background-size: 100%; } }
      .common-banner .gallery-cell a.monthly-event.monthly-event-survey {
        background: #FFF8EB url("../img/banner/monthly-desktop.png?ver20231218") top right no-repeat;
        background-size: cover;
        height: -webkit-fill-available;
        height: -moz-available;
        height: stretch; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.monthly-event.monthly-event-survey {
            background: #FFF8EB url("../img/banner/monthly-mobile.png?ver20231218") top right no-repeat;
            background-size: 376px; } }
      .common-banner .gallery-cell a.monthly-event h1 {
        padding-right: 50px; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.monthly-event h1 {
            padding-right: 0px; } }
      .common-banner .gallery-cell a.monthly-event p {
        font-size: 14px;
        line-height: 1.4em; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.monthly-event p {
            font-size: 13px; } }
      .common-banner .gallery-cell a.special-event.special-event-survey {
        background: #d34f42 url("../img/banner/special-survey-desktop_winner.png") top right no-repeat;
        background-size: cover; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.special-event.special-event-survey {
            background: #d34f42 url("../img/banner/special-survey-mobile_winner.png") top right no-repeat;
            background-size: 376px; } }
      .common-banner .gallery-cell a.special-event p {
        font-size: 14px;
        line-height: 1.4em; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.special-event p {
            font-size: 13px; } }
      .common-banner .gallery-cell a.paypal-th-notification {
        background: #84b5ff url("../img/th_TH/paypal/paypal-banner-desktop.png") top left no-repeat;
        background-size: cover; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a.paypal-th-notification {
            background: #84b5ff url("../img/th_TH/paypal/paypal-banner-mobile.png") top left no-repeat;
            background-size: 376px; } }
        .common-banner .gallery-cell a.paypal-th-notification h1 {
          padding-left: 80px; }
          @media only screen and (max-device-width: 599px) {
            .common-banner .gallery-cell a.paypal-th-notification h1 {
              padding-left: 105px;
              font-size: 19px; } }
      .common-banner .gallery-cell a div.monthly-event-img {
        position: absolute;
        left: 20px;
        z-index: 9999; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a div.monthly-event-img {
            position: relative;
            top: .5em;
            left: 0;
            width: 100%;
            margin-bottom: -20px;
            text-align: center; } }
        .common-banner .gallery-cell a div.monthly-event-img img {
          display: block;
          width: 65px;
          max-width: 65px; }
          @media only screen and (max-device-width: 599px) {
            .common-banner .gallery-cell a div.monthly-event-img img {
              width: 45px;
              display: inline-block; } }
      .common-banner .gallery-cell a div.content-wrapper {
        display: table-cell;
        vertical-align: middle;
        width: inherit;
        height: inherit;
        padding: 0 200px 0 30px;
        line-height: 1.1em;
        color: white; }
        @media only screen and (max-device-width: 599px) {
          .common-banner .gallery-cell a div.content-wrapper {
            display: block;
            padding: 1em 3em 1em 1em;
            height: auto; } }
  .common-banner .flickity-page-dots {
    bottom: 5px;
    /* position dots in gallery */ }
    .common-banner .flickity-page-dots .dot {
      /* white circles */
      width: 12px;
      height: 12px;
      opacity: 1;
      background: rgba(0, 0, 0, 0.2);
      border: 2px solid white;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
      .common-banner .flickity-page-dots .dot:first-child:nth-last-child(1) {
        opacity: 0;
        /* Hide dot if only one slider */ }
      .common-banner .flickity-page-dots .dot.is-selected {
        background: white;
        /* fill-in selected dot */ }

/*------------------------- Survey Cover -------------------------*/
/* Event December */
.survey-event-container {
  margin: -2em;
  padding: 70px 20px 80px;
  background: #FFF8EB url("../img/banner/monthly-cover.png?ver20231218") center no-repeat;
  background-size: cover;
  position: relative; }
  @media only screen and (max-device-width: 599px) {
    .survey-event-container {
      margin: -1.2em;
      padding: 0px 20px 60px;
      background-color: #FFF8EB;
      background-image: none; } }
  .survey-event-container .event-content {
    background: none;
    text-align: center;
    position: relative;
    height: auto;
    margin: 0px 250px; }
    @media only screen and (max-device-width: 599px) {
      .survey-event-container .event-content {
        width: 100%;
        padding: 20px 0;
        margin: 0; } }
    .survey-event-container .event-content .event-main-message {
      font-size: 32px;
      font-weight: bold;
      color: #37759A;
      position: relative;
      z-index: 10;
      margin: auto; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-main-message {
          font-size: 30px;
          padding: 10px 0;
          line-height: 1.4; } }
    .survey-event-container .event-content .event-sub-message {
      font-size: 24px;
      color: #FF8373;
      margin: auto;
      text-align: center;
      font-weight: bold;
      padding: 30px 0; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-sub-message {
          font-size: 20px;
          padding: 20px 0;
          width: auto; } }
    .survey-event-container .event-content .event-description-message {
      font-size: 20px;
      color: #545756;
      font-weight: bold;
      padding: 20px 0; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-description-message {
          font-size: 20px;
          margin: 0;
          padding: 0; } }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-description-message img {
          display: none; } }
    .survey-event-container .event-content .event-trend-report {
      font-size: 16px;
      color: #282828;
      padding-top: 15px;
      font-weight: bold; }
    .survey-event-container .event-content .submitButton {
      background: none;
      margin-top: 0;
      padding: 20px 0;
      position: relative;
      z-index: 10;
      text-align: center; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .submitButton {
          padding: 10px 0; } }
      .survey-event-container .event-content .submitButton .btn {
        color: #fff;
        font-weight: bold;
        background-color: #37759A;
        box-shadow: 0px 4px #26526C;
        padding: 8px 30px;
        min-width: 200px;
        margin: 0;
        text-shadow: none; }
        @media only screen and (max-device-width: 599px) {
          .survey-event-container .event-content .submitButton .btn {
            width: 100%;
            min-width: 240px;
            height: 40px;
            box-shadow: none; } }
    .survey-event-container .event-content .event-period {
      font-size: 16px;
      color: #545756;
      padding: 0;
      margin: 30px 0;
      text-align: center; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-period {
          font-size: 15px;
          padding: 0;
          margin: 20px 0; } }
    .survey-event-container .event-content .event-precaution {
      font-size: 13px;
      display: inline-block;
      color: #ffffff;
      background: rgba(62, 134, 155, 0.4);
      padding: 15px;
      margin: 20px 20px 20px 0; }
      @media only screen and (max-device-width: 599px) {
        .survey-event-container .event-content .event-precaution {
          font-size: 12px;
          margin: 20px 0;
          text-align: left; } }
  .survey-event-container .event-img {
    text-align: center;
    padding-right: 0px; }
    @media only screen and (max-device-width: 599px) {
      .survey-event-container .event-img {
        text-align: center;
        width: 100vw;
        margin-left: -20px;
        margin-bottom: -90px; } }

ul .check-list-icon {
  list-style-image: url("../img/check_special_sur.png");
  list-style-position: outside;
  display: inline-block;
  padding-left: 26px;
  font-size: 14px; }
  ul .check-list-icon li {
    text-align: left;
    padding-bottom: 10px; }

.special-survey-background {
  text-align: center;
  padding: 15px 120px 50px; }
  @media only screen and (max-device-width: 599px) {
    .special-survey-background {
      padding: 15px 15px 300px;
      min-height: 100vh; } }

.survey-event-errorIcon {
  background: url("../img/bg_survey-event.png?ver20180521") no-repeat;
  display: inline-block;
  width: 269px;
  height: 151px; }

/*------------------------- Event Area at Home -------------------------*/
.event-area span {
  height: inherit;
  display: table-cell;
  vertical-align: middle;
  line-height: 1.2em; }

.event-area.monthly-lucky {
  background: url("../img/bg_event_monthly.png") top left;
  background-size: cover;
  color: white; }
  .event-area.monthly-lucky a {
    color: #EFF0B4 !important;
    font-size: small;
    text-decoration: underline; }
  .event-area.monthly-lucky h3 {
    line-height: 1em;
    font-size: 20px;
    padding-bottom: 4px; }
    @media only screen and (max-device-width: 599px) {
      .event-area.monthly-lucky h3 {
        font-size: 18px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); } }
  .event-area.monthly-lucky.reward {
    background: url("../img/bg_event_monthly_reward.png") top left;
    background-size: cover;
    color: white; }

.event-area.facebook-result {
  background: url("../img/bg_event_result.png") top left;
  background-size: cover; }
  .event-area.facebook-result span {
    font-size: 14px; }
  .event-area.facebook-result a {
    display: inline-block;
    height: inherit; }

.event-area.mainBox {
  height: 72px;
  padding: 0;
  text-align: center; }

.event-area > section {
  width: 70%;
  display: table;
  height: inherit;
  line-height: 0.7em;
  vertical-align: middle;
  margin: 0 auto; }

/*------------------------- Quickpoll Event -------------------------*/
@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .quickpoll-event .fl {
    width: 60%; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .quickpoll-event .fr {
    width: 40% !important;
    padding: 14px !important; } }

.quickpoll-event .event-visual {
  line-height: 0;
  width: 718px;
  height: 314px;
  padding: 30px;
  background: #00958f url("/img/banner/monthly-quickpoll-visual.png?ver20190617") top center no-repeat;
  background-size: cover; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-event .event-visual {
      width: 100%;
      height: auto;
      min-height: 210px;
      padding: 10px; } }
  .quickpoll-event .event-visual .event-quicksurvey-title {
    font-size: 22px;
    color: #00948f;
    text-align: center;
    font-weight: bold;
    padding: 0 100px 20px; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-event .event-visual .event-quicksurvey-title {
        font-size: 16px;
        padding: 10px 0; } }
  .quickpoll-event .event-visual .event-reward {
    margin: 0 20px;
    display: inline-block; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-event .event-visual .event-reward {
        margin: 0 10px 10px; } }
    .quickpoll-event .event-visual .event-reward .event-reward-text {
      font-size: 16px;
      color: #702f05;
      font-weight: bold;
      line-height: 22px;
      margin: auto; }
    .quickpoll-event .event-visual .event-reward img {
      display: block;
      width: 110px;
      height: 112px;
      margin: 10px auto; }

.quickpoll-event .event-description {
  height: 314px;
  width: 388px;
  padding: 24px;
  background: #363636 url("/img/banner/monthly-quickpoll-info.png?ver20180618") top center no-repeat;
  color: white;
  text-align: center;
  background-size: cover; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-event .event-description {
      float: none;
      width: 100%;
      height: 260px;
      padding: 0; } }
  .quickpoll-event .event-description .text-box {
    font-size: 16px;
    line-height: 22px;
    padding: 20px 0;
    color: #f9df5c; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-event .event-description .text-box {
        text-align: center; } }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-event .event-description .text-box strong {
        display: inline; } }
    .quickpoll-event .event-description .text-box strong:before, .quickpoll-event .event-description .text-box strong:after {
      content: '"'; }
  .quickpoll-event .event-description .event-content {
    background-color: #222222;
    padding: 12px;
    text-align: center;
    font-size: small; }
    .quickpoll-event .event-description .event-content span {
      color: rgba(255, 255, 255, 0.7); }

/*------------------------- Quickpoll Bonus Event -------------------------*/
.quickpoll-bonus-event {
  background-color: #2dc3cc;
  text-align: center;
  color: white;
  height: 50px; }
  .quickpoll-bonus-event a {
    display: block;
    background: #2dc3cc;
    line-height: 50px;
    text-decoration: none;
    width: 100%;
    vertical-align: top;
    color: white; }
    .quickpoll-bonus-event a:hover {
      background: #57cfd6;
      color: white; }
  .quickpoll-bonus-event span {
    line-height: 50px;
    vertical-align: top;
    padding: 0 30px; }

/*------------------------- Quickpoll Double Point Days -------------------------*/
.quickpoll-banner {
  display: none; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-banner {
      display: block;
      height: 60px;
      margin: -1.2em -2em 1.2em -2em; } }
  .quickpoll-banner a.quickpoll-double-point {
    width: inherit;
    height: inherit;
    display: block;
    background: #b3e2fa url("../img/banner/double_event-banner-quickpoll.png") top right no-repeat;
    background-size: cover; }
    .quickpoll-banner a.quickpoll-double-point:hover {
      cursor: pointer;
      text-decoration: none; }
    .quickpoll-banner a.quickpoll-double-point div.content-wrapper {
      display: table-cell;
      vertical-align: middle;
      width: inherit;
      height: inherit;
      padding: 0 2em; }
      .quickpoll-banner a.quickpoll-double-point div.content-wrapper h1 {
        font-size: 0.9em;
        line-height: 1.3em;
        font-weight: bold;
        color: #b11d11; }
      .quickpoll-banner a.quickpoll-double-point div.content-wrapper p {
        font-size: 12px;
        margin-top: 5px;
        line-height: 1.3em;
        color: rgba(0, 0, 0, 0.54); }

/*------------------------- Event list in App (web-view) -------------------------*/
@media only screen and (max-device-width: 599px) {
  .event-list-container {
    min-height: 100vh; } }

.event-list-container .visual-wrap .visual-winner {
  margin: -2em -2em 2em;
  padding: 8em 2em 2em 2em;
  height: 220px;
  text-align: center;
  background: #f7ce5c url("../img/bg_event_list_winners.png") top right no-repeat; }
  .event-list-container .visual-wrap .visual-winner h1 {
    font-size: x-large;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); }

.event-list-container .tab {
  text-align: center;
  line-height: 0;
  padding-bottom: 1.2em; }
  .event-list-container .tab ul.nav li {
    border: 1px solid #3A945E;
    font-size: small;
    border-right: none; }
    .event-list-container .tab ul.nav li:last-child {
      border-right: 1px solid #3A945E; }
    .event-list-container .tab ul.nav li a {
      padding: 5px 12px; }
      .event-list-container .tab ul.nav li a:hover, .event-list-container .tab ul.nav li a:focus {
        background: none; }
    .event-list-container .tab ul.nav li.active {
      background: #3A945E; }
      .event-list-container .tab ul.nav li.active a {
        color: white; }
    .event-list-container .tab ul.nav li:first-child {
      -webkit-border-radius: 6px 0 0 6px;
      -moz-border-radius: 6px 0 0 6px;
      -ms-border-radius: 6px 0 0 6px;
      border-radius: 6px 0 0 6px; }
    .event-list-container .tab ul.nav li:last-child {
      -webkit-border-radius: 0 6px 6px 0;
      -moz-border-radius: 0 6px 6px 0;
      -ms-border-radius: 0 6px 6px 0;
      border-radius: 0 6px 6px 0; }

.event-list-container .tab-content {
  margin: 0;
  /* Archived */ }
  @media only screen and (max-device-width: 599px) {
    .event-list-container .tab-content {
      margin: 0 -1.2em; } }
  .event-list-container .tab-content h1 {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.4em; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content h1 {
        font-size: 16px; } }
  .event-list-container .tab-content p {
    color: rgba(0, 0, 0, 0.87); }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content p {
        font-size: small; } }
  .event-list-container .tab-content #ongoing a {
    display: block;
    text-decoration: none;
    padding: 1.2em;
    height: 100px;
    margin-bottom: 1px;
    background-size: cover; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content #ongoing a {
        height: 130px;
        background-size: 500px; } }
    .event-list-container .tab-content #ongoing a.theme-bright p {
      text-shadow: 0 1px 1px white; }
  .event-list-container .tab-content .event-winner-list .desktop {
    margin: -2em; }
  .event-list-container .tab-content .event-winner-list .accordion-group {
    font-size: 14px;
    border-right: none;
    border-left: none;
    border-bottom: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border-color: #D0D0D0;
    margin-bottom: 0; }
    .event-list-container .tab-content .event-winner-list .accordion-group:nth-child(odd) .accordion-heading {
      background-color: #F5F5F5; }
    .event-list-container .tab-content .event-winner-list .accordion-group:last-child {
      border-bottom: 1px solid #D0D0D0; }
    .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle {
      text-decoration: none;
      color: #3A945E;
      font-weight: bold;
      padding: 12px 0 12px 15px; }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle:after {
        font-family: 'Glyphicons Halflings';
        content: "\e113";
        position: absolute;
        right: 4em;
        color: #3A945E;
        font-size: 12px;
        line-height: 20px; }
        @media only screen and (max-device-width: 599px) {
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle:after {
            right: 15px; } }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle.collapsed {
        color: rgba(0, 0, 0, 0.87);
        font-weight: normal; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle.collapsed:after {
          content: "\e114";
          line-height: 22px; }
      @media only screen and (max-device-width: 599px) {
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-heading a.accordion-toggle {
          width: calc(100% - 27px);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 15px; } }
    .event-list-container .tab-content .event-winner-list .accordion-group .certificate-border {
      border: 6px solid #36955c;
      padding: 4px; }
    .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner {
      padding: 15px 15px 45px;
      color: rgba(0, 0, 0, 0.54);
      background: #FFFFFF; }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner.certificate-inner {
        border: 1px solid #36955c;
        text-align: center; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner.certificate-inner .certificate-deco {
          color: #36955c;
          font-size: 24px; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner.certificate-inner .certificate-record {
          color: #282828; }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p {
        color: rgba(0, 0, 0, 0.54);
        padding-bottom: 1em; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p:last-child {
          padding-bottom: 0; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p.certificate-title {
          font-size: 40px;
          padding-bottom: 16px;
          padding-top: 30px;
          font-weight: 700;
          color: #36955c;
          text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff, 2px 2px 0 #36955c;
          letter-spacing: 0.1em; }
          @media only screen and (max-device-width: 599px) {
            .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p.certificate-title {
              font-size: 24px;
              padding-top: 0; } }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p.certificate-subtitle {
          font-size: 16px;
          font-style: italic;
          color: #36955c;
          padding-bottom: 60px; }
          @media only screen and (max-device-width: 599px) {
            .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p.certificate-subtitle {
              font-size: 16px;
              padding-bottom: 1em; } }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner p span.ico16 {
          display: inline-block;
          vertical-align: middle; }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner ul {
        list-style: disc;
        margin-bottom: 1em; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner ul li {
          padding-bottom: .5em; }
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner ul li:last-child {
            padding-bottom: 0; }
      @media only screen and (max-device-width: 599px) {
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrolling-list {
          line-height: 1.8em;
          margin: 0 auto 1.5em;
          height: 248px;
          overflow-y: scroll;
          width: 90%;
          background-color: #f3f3f3;
          padding: 0.8em 1em 0; }
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrolling-list::-webkit-scrollbar {
            -webkit-appearance: none; }
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrolling-list::-webkit-scrollbar:vertical {
            width: 9px; }
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrolling-list::-webkit-scrollbar:horizontal {
            height: 9px; }
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrolling-list::-webkit-scrollbar-thumb {
            border-radius: 8px;
            border: 2px solid #f3f3f3;
            /* should match background, can't be transparent */
            background-color: rgba(0, 0, 0, 0.2); } }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrabble-answer {
        margin-bottom: 1em;
        padding-right: 40px;
        display: block;
        float: left;
        width: 50%;
        color: #80151d; }
        .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrabble-answer img {
          padding-top: 10px; }
        @media only screen and (max-device-width: 599px) {
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .scrabble-answer {
            width: 100%;
            padding: 0; } }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .mobileShow {
        display: none; }
        @media only screen and (max-device-width: 599px) {
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .mobileShow {
            display: inline; } }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .mobileHide {
        display: inline; }
        @media only screen and (max-device-width: 599px) {
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .mobileHide {
            display: none; } }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .wishes-item {
        margin-bottom: 1em;
        font-weight: bold; }
      .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .wishes-winner-top {
        background: #324c5d url("../img/banner/winner-annoucement.png") 0px -100px no-repeat;
        height: 150px;
        background-size: cover;
        margin: 20px 0;
        padding: 20px; }
        @media only screen and (max-device-width: 599px) {
          .event-list-container .tab-content .event-winner-list .accordion-group .accordion-inner .wishes-winner-top {
            background: #324c5d url("../img/banner/winner-annoucement-mobile.png") no-repeat;
            height: 200px;
            background-size: cover; } }
  .event-list-container .tab-content #archived div {
    margin-bottom: 1px;
    background-size: cover; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content #archived div {
        background-size: 500px; } }
    .event-list-container .tab-content #archived div .archived-layer {
      background: rgba(0, 20, 0, 0.4);
      padding: 1.2em;
      height: 100px; }
      @media only screen and (max-device-width: 599px) {
        .event-list-container .tab-content #archived div .archived-layer {
          padding: 1em;
          height: 130px; } }
  .event-list-container .tab-content .quickpoll-double-point {
    background: #b3e2fa url("../img/banner/double_event-banner.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .quickpoll-double-point {
        background: #b3e2fa url("../img/banner/double_event-banner-app.png") bottom right no-repeat; } }
  .event-list-container .tab-content .paypal-th-notification {
    background: #84b5ff url("../img/th_TH/paypal/paypal-banner-desktop.png") top left no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .paypal-th-notification {
        background: #84b5ff url("../img/th_TH/paypal/paypal-banner-app.png") top left no-repeat; } }
  .event-list-container .tab-content .dec2023-monthly {
    background: #FFF8EB url("../img/banner/monthly-desktop.png?ver20231218") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .dec2023-monthly {
        background: #FFF8EB url("../img/banner/monthly-app.png?ver20231218") top right no-repeat; } }
  .event-list-container .tab-content .exchange-starbucks-ecoupon {
    background: #3A945E url("../img/banner/open_2302_event_point_mypage_th.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .exchange-starbucks-ecoupon {
        background: #3A945E url("../img/banner/open_2302_event_point_mypage_th-app.png") top right no-repeat; } }
  .event-list-container .tab-content .special-survey-app {
    background: #b3e2fa url("../img/banner/special-survey-desktop_winner.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .special-survey-app {
        background: #b3e2fa url("../img/banner/special-survey-app_winner.png") bottom right no-repeat; } }
  .event-list-container .tab-content .archived-nov2022-holiday {
    background: #1e3a4c url("../img/banner/archived-20221208-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-nov2022-holiday {
        background: #1e3a4c url("../img/banner/archived-20221208-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-dec2022-awards {
    background: #0a0336 url("../img/banner/archived-20230102-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-dec2022-awards {
        background: #0a0336 url("../img/banner/archived-20230102-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-jan2023-bucketlist {
    background: #e3caaf url("../img/banner/archived-20230207-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-jan2023-bucketlist {
        background: #e3caaf url("../img/banner/archived-20230207-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-feb2023-selflove {
    background: #e9dcf7 url("../img/banner/archived-202303-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-feb2023-selflove {
        background: #e9dcf7 url("../img/banner/archived-202303-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-mar2023-eyecare {
    background: #6876dd url("../img/banner/archived-20230330-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-mar2023-eyecare {
        background: #6876dd url("../img/banner/archived-20230330-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-apr2023-mission {
    background: #d2806f url("../img/banner/archived-20230427-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-apr2023-mission {
        background: #d2806f url("../img/banner/archived-20230427-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-may2023-guide {
    background: #10813d url("../img/banner/archived-20230602-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-may2023-guide {
        background: #10813d url("../img/banner/archived-20230602-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-jun2023-guide {
    background: #ffaaaa url("../img/banner/archived-20230706-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-jun2023-guide {
        background: #ffaaaa url("../img/banner/archived-20230706-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-jul2023-toy {
    background: #bff4dd url("../img/banner/archived-20230801-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-jul2023-toy {
        background: #bff4dd url("../img/banner/archived-20230801-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-aug2023-illusion {
    background: #3c51c7 url("../img/banner/archived-20230831-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-aug2023-illusion {
        background: #3c51c7 url("../img/banner/archived-20230831-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-sep2023-haircare {
    background: #faf7ed url("../img/banner/archived-20231003-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-sep2023-haircare {
        background: #faf7ed url("../img/banner/archived-20231003-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-oct2023-halloween {
    background: #FF951D url("../img/banner/archived-20231101-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-oct2023-halloween {
        background: #FF951D url("../img/banner/archived-20231101-app.png") top right no-repeat; } }
  .event-list-container .tab-content .archived-nov2023-gift {
    background: #C6DAFD url("../img/banner/archived-20231204-desktop.png") top right no-repeat; }
    @media only screen and (max-device-width: 599px) {
      .event-list-container .tab-content .archived-nov2023-gift {
        background: #C6DAFD url("../img/banner/archived-20231204-app.png") top right no-repeat; } }

/*------------------------- Yahoo Detection Event (JAN.2015) -------------------------*/
.bonus-mail-setting {
  text-align: center; }
  .bonus-mail-setting img {
    width: 140px;
    height: 130px; }
  .bonus-mail-setting h3 {
    font-size: 18px;
    padding-top: 20px; }
  .bonus-mail-setting p {
    font-size: 16px;
    padding-top: 10px; }
  .bonus-mail-setting .bonus-mail-setting-button {
    margin: 20px auto 30px; }
  .bonus-mail-setting .precaution {
    background-color: #b6d1cd;
    padding: 1em;
    display: inline-block; }
    .bonus-mail-setting .precaution li {
      text-align: left;
      margin-left: 1em;
      list-style-type: disc;
      font-size: 14px; }

/*------------------------- Essential Email Tip Event for TW (Feb.2015) -------------------------*/
.campaign-mail-add-warp {
  background: transparent url("/img/banner/zh_TW/open_1502_event_mail_add_main_visual.png") top left no-repeat;
  position: relative;
  display: table;
  min-height: 460px;
  height: 460px;
  color: white;
  margin: -2em -2em 0 -2em !important;
  padding: 0 2em;
  width: 100%; }
  .campaign-mail-add-warp .txt-align-center {
    height: 96px;
    vertical-align: middle;
    display: table-cell; }
    .campaign-mail-add-warp .txt-align-center h1 {
      font-size: 40px;
      margin-top: -1.5em; }
    .campaign-mail-add-warp .txt-align-center p {
      font-size: 16px; }

.campaign-mail-add-messenger figcaption {
  margin-left: 230px;
  margin-top: 100px;
  font-size: 16px;
  font-weight: bold;
  display: block; }
  .campaign-mail-add-messenger figcaption .btn-mini {
    font-size: 12px; }

.campaign-mail-add-messenger span, .campaign-mail-add-messenger b {
  color: #369339; }

.campaign-mail-add-messenger figure {
  display: block; }
  .campaign-mail-add-messenger figure .btn.btn-primary {
    margin-left: 22px;
    margin-top: 1em; }

.campaign-mail-add-footer {
  background-color: #6ab66d;
  padding: 2em 2em 60px 2em; }
  .campaign-mail-add-footer p {
    color: #454545;
    font-size: 18px;
    font-weight: bold; }
  .campaign-mail-add-footer .btn.btn-warning {
    background: #ffd637;
    color: #454545;
    font-weight: bold;
    -webkit-box-shadow: 0 3px 0 0 #457647;
    -moz-box-shadow: 0 3px 0 0 #457647;
    box-shadow: 0 3px 0 0 #457647;
    padding-left: 45px;
    padding-right: 45px; }
    .campaign-mail-add-footer .btn.btn-warning:hover {
      opacity: 0.95;
      filter: alpha(opacity=95); }

.campaign-mail-add-body {
  margin-top: 60px; }
  .campaign-mail-add-body figure .btn.btn-primary {
    -webkit-box-shadow: 0 3px 0 0 #a6a6a6;
    -moz-box-shadow: 0 3px 0 0 #a6a6a6;
    box-shadow: 0 3px 0 0 #a6a6a6; }
  .campaign-mail-add-body .btn.btn-primary {
    background: #569c59; }
    .campaign-mail-add-body .btn.btn-primary:hover {
      opacity: 0.95;
      filter: alpha(opacity=95); }

/*------------------------- Mission Mail Setting Event (Nov.2014) -------------------------*/
.campaign-mail-warp {
  background: #03a795 url("/img/banner/open_1411_event_mission_newpage.png") top left no-repeat;
  position: relative;
  min-height: 507px;
  height: 507px;
  color: #454545;
  margin-bottom: 0 !important; }
  .campaign-mail-warp hgroup {
    text-align: center;
    padding-top: 45px;
    text-transform: capitalize; }
    .campaign-mail-warp hgroup h2 {
      font-size: 2.8em;
      color: white;
      text-shadow: 1px 2px 1px #00826c; }
    .campaign-mail-warp hgroup h3 {
      font-size: 1.25em;
      color: #EE1B24;
      background-color: #FCDD06;
      padding: 0 0.5em;
      font-style: italic;
      font-weight: 500;
      display: inline-block; }
  .campaign-mail-warp .delay-balloon {
    background: transparent url("/img/banner/bg_delay_balloon_down.png") top left no-repeat;
    position: absolute;
    top: 195px;
    right: 275px;
    width: 214px;
    height: 82px; }
    .campaign-mail-warp .delay-balloon span {
      position: absolute;
      display: inline-block;
      top: 20px;
      left: 18px;
      width: 183px;
      height: 26px;
      text-align: center;
      color: #ee1b24;
      font-weight: bold; }
  .campaign-mail-warp .facebook-campaign {
    position: absolute;
    top: 1em;
    right: 1em; }
  .campaign-mail-warp .campaign-mail-balloon {
    position: absolute;
    bottom: -86px;
    left: 50%;
    width: 715px;
    height: 195px;
    margin-left: -359px;
    background: transparent url("/img/banner/open_1411_event_mission_balloon.png") top left no-repeat; }
    .campaign-mail-warp .campaign-mail-balloon span {
      display: table;
      position: relative;
      top: 75px;
      left: 60px;
      height: 80px;
      width: 597px; }
      .campaign-mail-warp .campaign-mail-balloon span span {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
        text-align: center; }

.campaign-mail-mission-box {
  margin-bottom: 0 !important; }
  .campaign-mail-mission-box .w50 {
    padding-top: 120px;
    background-color: #d4ceb9;
    text-align: center;
    height: inherit; }
    .campaign-mail-mission-box .w50 h3 {
      font-size: 1.5em;
      color: #454545;
      padding-top: 6px; }
    .campaign-mail-mission-box .w50 h4 {
      font-size: 1.1em;
      font-weight: 500; }
    .campaign-mail-mission-box .w50:first-child {
      background-color: #FFFFFF; }
      .campaign-mail-mission-box .w50:first-child h4 {
        color: #dda400; }
      .campaign-mail-mission-box .w50:first-child article {
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        background-color: #e6e0cd; }
    .campaign-mail-mission-box .w50 article {
      border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      padding: 1em;
      margin: 1em 2em 2em 2em;
      background-color: #FFFFFF; }
      .campaign-mail-mission-box .w50 article ul {
        width: 90%;
        display: block;
        margin: 0 auto; }
        .campaign-mail-mission-box .w50 article ul li {
          height: 148px;
          padding-bottom: 5px; }
          .campaign-mail-mission-box .w50 article ul li h5 {
            margin-top: 5px;
            color: #454545;
            line-height: 1em; }
    .campaign-mail-mission-box .w50 .campaign {
      margin-top: 13px; }

.campaign-mail-summary {
  margin-top: 0 !important;
  background: #f9bd0f url("/img/banner/open_1411_event_mission_balloon_footer.png") top center no-repeat; }
  .campaign-mail-summary div {
    width: 730px;
    text-align: center;
    color: #454545;
    font-size: 1.2em;
    padding-top: 195px;
    padding-bottom: 30px;
    margin: auto; }
  .campaign-mail-summary p {
    display: inline-block;
    font-size: 0.7em;
    font-weight: normal;
    padding-top: 22px; }
    .campaign-mail-summary p:first-child {
      display: inline-block;
      font-size: inherit;
      font-weight: 600;
      padding-top: 0; }
  .campaign-mail-summary .black-radius-bg {
    background-color: black;
    color: white;
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    font-size: 0.75em;
    font-weight: normal;
    padding: 5px 15px;
    text-transform: capitalize;
    margin-top: 1em;
    margin-bottom: 1em;
    display: inline-block; }
    .campaign-mail-summary .black-radius-bg b {
      color: #f5bb0e;
      font-weight: normal; }
      .campaign-mail-summary .black-radius-bg b:first-child {
        color: white; }
    .campaign-mail-summary .black-radius-bg span {
      display: inline-block;
      margin-left: 7px;
      margin-right: 7px;
      position: relative;
      top: -1px;
      color: #F5BB0E; }
    .campaign-mail-summary .black-radius-bg dl {
      display: inline-block;
      text-align: center;
      margin: 0 auto 6px auto; }
      .campaign-mail-summary .black-radius-bg dl dt, .campaign-mail-summary .black-radius-bg dl dd {
        font-weight: normal;
        display: inline-block;
        line-height: 1em;
        height: 20px; }
      .campaign-mail-summary .black-radius-bg dl dt {
        position: relative;
        top: -3px;
        padding-right: 5px; }
        .campaign-mail-summary .black-radius-bg dl dt .ico16 {
          position: relative;
          top: 6px; }
      .campaign-mail-summary .black-radius-bg dl dd {
        text-decoration: underline; }

/*------------------------- Layouts -------------------------*/
html, div.wrapped {
  width: 100%;
  padding: 0;
  color: rgba(0, 0, 0, 0.87); }

@media only screen and (max-device-width: 599px) {
  html {
    overflow-x: hidden; } }

html, body {
  background: #E5E5E5; }

div.wrapped {
  overflow-y: auto; }
  @media only screen and (max-device-width: 599px) {
    div.wrapped {
      overflow-x: hidden; } }
  div.wrapped .container {
    background-color: #FFFFFF;
    margin: 0 auto;
    box-shadow: 0 0 10px #bebebe;
    -webkit-box-shadow: 0 0 10px #bebebe;
    -moz-box-shadow: 0 0 10px #bebebe; }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      div.wrapped .container {
        width: auto; } }
  div.wrapped header.container {
    z-index: 999;
    box-shadow: 0 2px 4px #cecece;
    -webkit-box-shadow: 0 2px 4px #cecece;
    -moz-box-shadow: 0 2px 4px #cecece; }
  div.wrapped div.container {
    position: relative; }

div.wrapped-table {
  display: table; }
  div.wrapped-table .container-fluid {
    display: table-cell;
    vertical-align: middle;
    padding-bottom: 90px; }
    @media only screen and (max-device-width: 599px) {
      div.wrapped-table .container-fluid {
        display: block;
        padding-bottom: 0; } }
  @media only screen and (max-device-width: 599px) {
    div.wrapped-table {
      display: block !important; } }

.container {
  padding-left: 0;
  padding-right: 0; }
  @media only screen and (max-device-width: 599px) {
    .container {
      width: 100% !important;
      -moz-box-sizing: border-box;
      box-sizing: border-box; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .container {
      width: 100% !important;
      -moz-box-sizing: border-box;
      box-sizing: border-box; } }

.container-fluid {
  background-color: #FFFFFF; }

/* Canvas Padding */
.gridLayout, .survey-info, .trend-header .span12 {
  padding: 2em; }

.imgLayout, .trend-layout {
  margin: -2em; }

@media only screen and (max-device-width: 599px) {
  .gridLayout {
    padding: 1.2em; } }

.gridLayout .row-fluid:last-child {
  margin-bottom: 0px !important; }
  .gridLayout .row-fluid:last-child .span12 {
    margin-bottom: 0; }

@media only screen and (max-device-width: 599px) {
  .row-fluid [class*="span"] {
    width: 100%;
    margin-left: 0; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .row-fluid .span10 {
    width: 100%;
    margin-left: 0; } }

.row-fluid .progressList [class*="span"] {
  margin-left: 0; }

.span12 label {
  display: block; }

@media only screen and (max-device-width: 599px) {
  .imgLayout {
    margin: -1.2em; } }

.imgLayout img, .imgLayout a {
  max-width: 100%;
  width: 100%;
  min-width: 100%; }

.boxStylelightG {
  background: #f2f2f2;
  padding: 1em;
  line-height: 1.3em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }
  .boxStylelightG strong {
    font-size: 13px; }

.box {
  width: 100%;
  margin: 20px 0 0 0;
  display: table;
  border: 1px solid #dddddd;
  border-left: 0;
  border-collapse: separate; }
  .box strong {
    margin: 0 5px; }
    .box strong img {
      vertical-align: baseline; }
  .box span.yellow {
    font-size: 16px;
    font-weight: bold; }
  .box .span4, .box .span2 {
    float: none;
    vertical-align: middle;
    display: table-cell;
    border-left: solid 1px #ddd;
    text-align: center; }
  .box .span6 {
    float: none;
    vertical-align: middle;
    display: table-cell;
    border-left: solid 1px #ddd; }
    .box .span6 ul {
      margin: 0 0 0 25px;
      padding: 10px; }
    .box .span6 li {
      text-align: left; }

/*------------------------- Button Definition -------------------------*/
.submitButton {
  padding: 0;
  background: #FFFFFF;
  text-align: center;
  display: block;
  margin-top: 2em; }

.btn {
  background-color: #DFDFDF;
  padding: 4px 12px;
  margin-bottom: 3px;
  border: none;
  background-image: none;
  white-space: normal;
  box-shadow: 0 3px 0 #C5C5C5;
  -webkit-box-shadow: 0 3px 0 #C5C5C5;
  -moz-box-shadow: 0 3px 0 #C5C5C5; }
  .btn:hover, .btn:focus {
    cursor: pointer;
    background-color: #E8E8E8;
    border: none;
    background-image: none;
    box-shadow: 0 3px 0 #D1D1D1;
    -webkit-box-shadow: 0 3px 0 #D1D1D1;
    -moz-box-shadow: 0 3px 0 #D1D1D1; }
  .btn:active, .btn.active, .btn.active.focus, .btn.active:focus, .btn.active:hover, .btn:active.focus, .btn:active:focus, .btn:active:hover {
    cursor: pointer;
    background-color: #D1D1D1;
    border: none;
    background-image: none;
    box-shadow: 0 3px 0 #D1D1D1;
    -webkit-box-shadow: 0 3px 0 #D1D1D1;
    -moz-box-shadow: 0 3px 0 #D1D1D1; }
  .btn.btn-large {
    font-size: 1.2em;
    padding: 6px 18px; }
    @media only screen and (max-device-width: 599px) {
      .btn.btn-large {
        font-size: 1.1em;
        width: 100%;
        height: auto;
        padding: 10px; } }

.btn-mini {
  font-size: 0.9em !important; }
  .btn-mini .icon-chevron-down, .btn-mini .icon-chevron-up {
    margin-top: 1px !important; }
  .btn-mini .more-plus {
    position: relative;
    top: 3px; }

.btn-small {
  font-size: 12px; }

.btn-primary, .btn-success {
  background-color: #3A945E;
  color: white;
  border: none;
  background-image: none;
  box-shadow: 0 3px 0 #2E794C;
  -webkit-box-shadow: 0 3px 0 #2E794C;
  -moz-box-shadow: 0 3px 0 #2E794C; }
  .btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-success:focus {
    background-color: #3E9D64;
    border: none;
    background-image: none;
    box-shadow: 0 3px 0 #318151;
    -webkit-box-shadow: 0 3px 0 #318151;
    -moz-box-shadow: 0 3px 0 #318151; }
  .btn-primary:active, .btn-primary.active, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .btn-success:active, .btn-success.active, .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover {
    background-color: #318151;
    border: none;
    background-image: none;
    box-shadow: 0 3px 0 #318151;
    -webkit-box-shadow: 0 3px 0 #318151;
    -moz-box-shadow: 0 3px 0 #318151; }

.btn-primary-light, .btn-primary-inverse {
  background-color: #FFFFFF;
  color: #3A945E;
  border: none;
  background-image: none;
  box-shadow: 0 3px 0 #D4D4D4;
  -webkit-box-shadow: 0 3px 0 #D4D4D4;
  -moz-box-shadow: 0 3px 0 #D4D4D4; }
  .btn-primary-light:hover, .btn-primary-light:focus, .btn-primary-light:active, .btn-primary-inverse:hover, .btn-primary-inverse:focus, .btn-primary-inverse:active {
    background-color: #FFFFFF;
    color: #3E9D64;
    border: none;
    background-image: none;
    box-shadow: 0 3px 0 #DEDEDE;
    -webkit-box-shadow: 0 3px 0 #DEDEDE;
    -moz-box-shadow: 0 3px 0 #DEDEDE; }

.btn-disable, .btn.disabled, .btn[disabled] {
  color: rgba(0, 0, 0, 0.54);
  background-color: #E5E5E5;
  -webkit-box-shadow: 0 3px 0 #C5C5C5;
  -moz-box-shadow: 0 3px 0 #C5C5C5;
  box-shadow: 0 3px 0 #C5C5C5;
  cursor: not-allowed; }

.btn-danger {
  background-color: #F06A5C;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f06a5c), to(#e83724));
  background-image: -webkit-linear-gradient(top, #f06a5c, #e83724);
  background-image: -moz-linear-gradient(top, #f06a5c, #e83724);
  background-image: -ms-linear-gradient(top, #f06a5c, #e83724);
  background-image: -o-linear-gradient(top, #f06a5c, #e83724);
  background-image: linear-gradient(to bottom, #f06a5c, #e83724);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f06a5c, endColorstr=#e83724); }
  .btn-danger:hover, .btn-danger:active, .btn-danger:focus {
    background-color: #ec5343;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f27c6f), to(#ec5343));
    background-image: -webkit-linear-gradient(top, #f27c6f, #ec5343);
    background-image: -moz-linear-gradient(top, #f27c6f, #ec5343);
    background-image: -ms-linear-gradient(top, #f27c6f, #ec5343);
    background-image: -o-linear-gradient(top, #f27c6f, #ec5343);
    background-image: linear-gradient(to bottom, #f27c6f, #ec5343);
    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#f27c6f, endColorstr=#ec5343); }

.btn-last-margin {
  margin-left: 0.5em; }
  @media only screen and (max-device-width: 599px) {
    .btn-last-margin {
      margin-left: 0; } }

.facebook-login-button, .google-login-button, .huawei-login-button, .apple-login-button {
  font-family: "Roboto", "Noto Sans", "Helvetica" , "Helvetica Neue", Tahoma, Arial, sans-serif;
  font-size: 15px;
  display: inline-block;
  border: 0;
  padding-top: .8em;
  padding-bottom: .8em;
  background-image: none;
  text-decoration: none;
  text-shadow: none;
  position: relative; }

/* Facebook */
.facebook-login-button {
  color: #444;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1877F2;
  margin-right: 18px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); }
  .facebook-login-button:hover, .facebook-login-button:focus, .facebook-login-button:active {
    background-color: #1877F2 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important; }
  .facebook-login-button img {
    position: relative;
    top: 4px; }

/* Google */
.google-login-button {
  color: #444;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #FFF;
  padding: 0px;
  margin-right: 18px;
  /* Google official color rule */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); }
  .google-login-button:hover, .google-login-button:focus, .google-login-button:active {
    background-color: #fff !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important; }

/* Huawei */
.huawei-login-button {
  color: #444;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #D13A53;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); }
  .huawei-login-button:hover, .huawei-login-button:focus, .huawei-login-button:active {
    background-color: #D13A53 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important; }

/* AppleID */
.apple-login-button {
  color: #444;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000;
  margin-right: 18px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0); }
  .apple-login-button:hover, .apple-login-button:focus, .apple-login-button:active {
    background-color: #000 !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important;
    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0) !important; }
  .apple-login-button #appleid-signin {
    position: absolute;
    width: 100%;
    height: 44px;
    top: 0;
    left: 0; }
    .apple-login-button #appleid-signin > div {
      display: none; }

.or-divider {
  border-top: 1px solid #ccc;
  margin-top: 24px; }

.or-text {
  background-color: #fff;
  color: #707070;
  width: 40px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
  position: relative;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  text-transform: uppercase; }

.dropdown-menu {
  padding: 0; }
  .dropdown-menu li a {
    padding: 5px 10px; }
    .dropdown-menu li a:hover, .dropdown-menu li a:focus {
      text-decoration: none;
      color: white;
      background-color: #3A945E;
      background-image: none; }

.quickpoll-shorten-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 550px;
  display: inline-block;
  margin-right: 15px; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-shorten-text {
      white-space: normal;
      text-overflow: unset;
      width: 100%; } }

/*------------------------- Header -------------------------*/
header {
  background-color: #FFFFFF;
  position: relative; }
  header .headTop {
    position: relative;
    max-height: 78px; }
    header .headTop .mobile {
      text-align: center;
      padding: 16px 0 8px 0; }
    header .headTop .desktop {
      display: inline-block; }
      header .headTop .desktop.menu {
        padding: 1em 2em; }
    header .headTop .nav {
      margin-top: 18px; }
    header .headTop div > a.logo-link {
      line-height: 0; }
  header .dropdown ul {
    position: absolute;
    right: 0;
    left: inherit;
    min-width: 120px; }
    header .dropdown ul li {
      font-size: 14px; }
  header .fr div.fr:first-child {
    position: relative;
    right: 15px; }
  header mark {
    padding: 5px;
    font-size: small; }
    header mark span {
      margin: 0 3px 5px 0 !important;
      letter-spacing: -0.01em; }
  header nav {
    font-size: medium; }
    header nav a {
      font-weight: bold;
      color: #323232;
      -webkit-border-radius: 0;
      border-radius: 0 !important; }
      header nav a:hover, header nav a:active, header nav a:focus {
        color: #3A945E; }
      header nav a:hover {
        background: none !important; }
    header nav .nav-pills li {
      float: left;
      margin-top: 0;
      margin-bottom: 0;
      margin-left: 24px; }
      header nav .nav-pills li:first-child {
        margin-left: 8px; }
      header nav .nav-pills li a {
        margin: 0;
        border-radius: 0;
        line-height: 1.7em !important;
        -webkit-border-radius: 0;
        border-radius: 0;
        padding: 0; }
    header nav .nav-pills .active a, header nav .nav-pills .active a:hover {
      color: #3A945E;
      background-color: transparent !important; }
  header row:first-child {
    height: 85px;
    min-height: 85px;
    padding: 0;
    margin: 0; }

.header-notify-container {
  float: right;
  padding-right: 6px;
  margin-top: 26px;
  position: relative;
  cursor: pointer; }
  @media only screen and (max-device-width: 599px) {
    .header-notify-container {
      float: none;
      position: absolute;
      right: 15px;
      margin-top: -40px; } }
  .header-notify-container .notify-icon {
    width: 26px;
    height: 26px;
    position: relative;
    top: 4px;
    background: url("/img/ico_menu_notification_inactive.svg"), linear-gradient(transparent, transparent);
    background-size: 26px; }
    .header-notify-container .notify-icon:hover {
      opacity: 0.7; }
    @media only screen and (max-device-width: 599px) {
      .header-notify-container .notify-icon {
        width: 26px;
        height: 26px;
        top: 0; } }
    .header-notify-container .notify-icon.active {
      background: url("/img/ico_menu_notification_active.svg"), linear-gradient(transparent, transparent);
      background-size: 26px; }
  .header-notify-container #notify-number {
    width: 17px;
    height: 17px;
    line-height: 17px;
    background: #41a66a;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;
    font-size: 10px;
    color: white;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 6px;
    right: 0; }
    @media only screen and (max-device-width: 599px) {
      .header-notify-container #notify-number {
        top: 2px; } }
  .header-notify-container .dropdown-menu {
    width: 250px;
    left: -110px;
    margin-top: 8px; }
    @media only screen and (max-device-width: 599px) {
      .header-notify-container .dropdown-menu {
        left: -218px; } }
    .header-notify-container .dropdown-menu #notify-box span.message {
      display: inline-block;
      padding: 8px 10px;
      color: rgba(0, 0, 0, 0.38); }
    .header-notify-container .dropdown-menu .notify-item {
      position: relative;
      padding: 8px 10px;
      border-bottom: 1px solid #D0D0D0;
      color: rgba(0, 0, 0, 0.87);
      display: block;
      text-decoration: none; }
      .header-notify-container .dropdown-menu .notify-item:last-child {
        border-bottom: 0; }
      .header-notify-container .dropdown-menu .notify-item:hover {
        background: #dcf1e4; }
      .header-notify-container .dropdown-menu .notify-item img {
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
        width: 24px;
        height: 24px; }
      .header-notify-container .dropdown-menu .notify-item span {
        display: inline-block;
        vertical-align: middle;
        width: 194px;
        font-size: small;
        line-height: 1.5em; }
      .header-notify-container .dropdown-menu .notify-item.checked img, .header-notify-container .dropdown-menu .notify-item.checked span {
        opacity: 0.3; }

.user-info-area {
  margin-top: 11px;
  padding: 1em 2em 1em 5px; }
  .user-info-area .dropdown {
    margin-left: 0.5em; }
    .user-info-area .dropdown .btn {
      width: 35px;
      padding: 4px 0; }

.user-info {
  border: 1px solid #d7d7d7;
  padding: 4px 10px 3px 10px;
  font-size: 14px;
  background-color: #ebebeb; }
  .user-info div.fl {
    border-left: 1px solid #FFF;
    padding: 4px 10px 3px 10px;
    margin: -4px -10px -3px 10px;
    background-color: #FFF;
    -webkit-border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-bottom-right-radius: 5px;
    border-bottom-right-radius: 5px; }
  .user-info .pointCircle {
    background-position: -146px 2px !important;
    height: 20px;
    margin-right: 0.5em; }
    .user-info .pointCircle + a {
      font-weight: bold;
      font-size: 15px;
      color: #FF4242;
      text-decoration: underline; }

.user.fl > a:first-child {
  margin-right: 0.25em; }

.optimize-font a {
  font-size: 15px;
  letter-spacing: -0.01em; }

.header_green {
  background-color: #3A945E;
  padding: 10px 0 15px 0;
  margin: -2em -2em 2em -2em; }
  @media only screen and (max-device-width: 599px) {
    .header_green {
      margin-top: -1.2em;
      margin-bottom: 1.2em; } }
  .header_green h1 {
    font-size: 28px;
    font-weight: 300; }
    @media only screen and (max-device-width: 599px) {
      .header_green h1 {
        font-size: 24px; } }

.nav {
  margin-bottom: 0; }

/* Admin Menu */
.navbar .nav .active a, .navbar .nav .active a:hover {
  color: white;
  text-decoration: none;
  background-color: #222222; }

.navbar .nav > li:first-child a:hover {
  background: none; }

.navbar .nav > li > a {
  float: none;
  padding: 3px 15px;
  line-height: 17px;
  color: white;
  text-decoration: none;
  border-left: solid 1px #68ad6b;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
  .navbar .nav > li > a:hover {
    background: #3A945E;
    color: white; }
  .navbar .nav > li > a:focus {
    color: white; }
  .navbar .nav > li > a.loginTxt {
    border: none;
    cursor: default; }
    .navbar .nav > li > a.loginTxt:focus {
      color: white; }

.navbar .navbar-inner {
  min-height: inherit;
  padding: 5px 20px;
  background: #3A945E;
  background-image: none !important;
  border: 1px solid #D0D0D0;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
  *zoom: 1; }

/*------------------------- Mobile Header -------------------------*/
#mobile-menu-close {
  display: none;
  background: rgba(36, 42, 52, 0.5);
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow-x: hidden; }

#mobile-menu {
  display: none;
  background: #353535;
  color: white;
  position: fixed;
  z-index: 10000;
  width: 65%;
  height: 100vh;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.25);
  box-shadow: inset -3px 0px 5px 0px rgba(0, 0, 0, 0.25);
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%); }
  @media only screen and (max-device-width: 599px) {
    #mobile-menu {
      display: block; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    #mobile-menu {
      display: block; } }
  #mobile-menu ul li {
    margin-left: 18px;
    margin-right: 18px;
    border-bottom: 1px solid #505050; }
    #mobile-menu ul li img {
      height: 18px;
      position: relative;
      top: 3px;
      padding-right: 14px; }
    #mobile-menu ul li a {
      color: white;
      font-size: 14px;
      font-weight: 100;
      padding: 12px 0;
      display: inline-block; }
    #mobile-menu ul li.active a {
      color: #3A945E; }

#show-mobile-menu {
  position: absolute;
  left: 1.2em; }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    #show-mobile-menu {
      left: 2em; } }

/* Transition of mobile menu */
@-webkit-keyframes mobile-menu-slideIn {
  100% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%); } }

@keyframes mobile-menu-slideIn {
  100% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%); } }

.mobile-menu-slideIn {
  overflow-x: hidden;
  position: relative;
  animation: mobile-menu-slideIn 0.5s forwards;
  -webkit-animation: mobile-menu-slideIn 0.5s forwards; }

@-webkit-keyframes mobile-menu-slideOut {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%); }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%); } }

@keyframes mobile-menu-slideOut {
  0% {
    transform: translateX(0%);
    -webkit-transform: translateX(0%); }
  100% {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%); } }

.mobile-menu-slideOut {
  animation: mobile-menu-slideOut 0.5s forwards;
  -webkit-animation: mobile-menu-slideOut 0.5s forwards; }

/*------------------------- Banner on Header -------------------------*/
.topBanner {
  position: relative;
  display: block;
  line-height: 1em; }
  .topBanner .close {
    position: absolute;
    top: 14px;
    color: #FFF;
    right: 1.9em;
    font-weight: lighter;
    text-shadow: none;
    opacity: 1; }
    @media only screen and (max-device-width: 599px) {
      .topBanner .close {
        top: 0.9em;
        right: 0.9em; } }
  .topBanner .banner-announcement {
    color: #ffffff;
    font-size: small;
    padding: 1em 2em;
    background: #464747; }
    .topBanner .banner-announcement span, .topBanner .banner-announcement img {
      display: inline-block;
      vertical-align: middle; }
    .topBanner .banner-announcement span {
      width: 90%;
      padding-left: 10px; }
    @media only screen and (max-device-width: 599px) {
      .topBanner .banner-announcement {
        padding: 1em 1em; }
        .topBanner .banner-announcement span {
          width: 85%;
          vertical-align: top; }
        .topBanner .banner-announcement img {
          vertical-align: text-top; } }
    .topBanner .banner-announcement strong {
      color: #fff306; }
    .topBanner .banner-announcement .banner-announcement-link {
      position: relative;
      display: inline-block;
      color: #ffffff;
      text-decoration: underline; }
    .topBanner .banner-announcement .banner-announcement-link:hover {
      color: #fff306;
      cursor: pointer; }

/*------------------------- Footer  -------------------------*/
footer ul {
  list-style: none;
  margin: 0px;
  padding-bottom: 5px; }
  footer ul li {
    list-style-type: none;
    display: inline-block;
    padding-right: 5px; }
    footer ul li:last-child {
      padding-right: 0; }
      footer ul li:last-child a {
        background: none;
        padding-right: 0;
        margin-right: 0; }
    footer ul li a {
      float: left;
      display: inline-block;
      cursor: pointer;
      z-index: 99999999;
      margin-right: .5em;
      padding-right: .9em;
      background: url("../img/bg_dot.png") center right no-repeat;
      color: rgba(255, 255, 255, 0.7);
      font-style: normal; }
      footer ul li a:hover, footer ul li a:focus, footer ul li a:active {
        color: white;
        text-decoration: none; }

footer.container {
  font-size: small;
  background-color: #424242 !important;
  min-height: 4em;
  padding: 2em;
  position: relative; }

.footer-simple {
  width: 100%;
  bottom: 1em;
  left: 0;
  text-align: center;
  color: white;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  position: absolute;
  font-size: small; }
  .footer-simple p, .footer-simple a {
    font-size: small;
    color: white; }
  @media only screen and (max-device-width: 599px) {
    .footer-simple {
      position: relative; } }
  @media only screen and (max-device-width: 599px) {
    .footer-simple ul {
      padding: 1em 0; } }
  .footer-simple ul li {
    list-style-type: none;
    display: inline-block;
    padding-right: 6px; }
    @media only screen and (max-device-width: 599px) {
      .footer-simple ul li {
        display: block !important;
        padding-right: 0; } }
    .footer-simple ul li:last-child a:after {
      content: '';
      padding-left: 0; }
    .footer-simple ul li a {
      float: left;
      cursor: pointer;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); }
      @media only screen and (max-device-width: 599px) {
        .footer-simple ul li a {
          float: none !important; } }
      .footer-simple ul li a:hover {
        text-decoration: none;
        color: #F5F5F5; }
      .footer-simple ul li a::after {
        content: '|';
        padding-left: 12px; }
        @media only screen and (max-device-width: 599px) {
          .footer-simple ul li a::after {
            content: '' !important;
            padding-left: 0; } }

.footer_gray {
  background-color: #C0C0C0;
  padding: 1em;
  margin: 0 -2em -2em -2em;
  position: relative;
  top: 1em; }
  @media only screen and (max-device-width: 599px) {
    .footer_gray {
      margin: 0 -1.2em -1.2em -1.2em;
      text-align: center; } }
  .footer_gray .leftA {
    float: left;
    left: 20px;
    position: relative; }
    @media only screen and (max-device-width: 599px) {
      .footer_gray .leftA {
        float: none;
        left: auto; } }
  .footer_gray .rightA {
    float: right;
    right: 20px;
    display: inline-block;
    position: relative;
    padding: 0;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.54);
    text-align: right; }
    @media only screen and (max-device-width: 599px) {
      .footer_gray .rightA {
        float: none;
        right: auto;
        text-align: center;
        margin-top: 1em; } }

/*------------------------- Sign up & Log in  -------------------------*/
.signBox {
  max-width: 408px;
  background: white;
  padding: 1.5em; }
  @media only screen and (max-device-width: 599px) {
    .signBox {
      padding: 1.0em; } }
  .signBox .addtional-info {
    padding: 0 0 0 1.2em;
    background: none; }
    .signBox .addtional-info ol li {
      list-style-type: disc; }

.bubble-right-dark {
  z-index: 1000;
  position: relative;
  width: 298px;
  padding: 0;
  color: white;
  background: rgba(0, 0, 0, 0.8);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0; }
  .bubble-right-dark:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 11px 0 11px 1em;
    border-color: transparent rgba(0, 0, 0, 0.8);
    display: block;
    width: 0;
    z-index: 1;
    right: -1em;
    top: 30px; }

.banner-right-bottom {
  position: absolute;
  bottom: 1em;
  right: 1em; }
  @media only screen and (max-device-width: 599px) {
    .banner-right-bottom {
      position: relative;
      bottom: 0;
      right: 0;
      width: auto;
      margin-top: 1em; } }

.captcha {
  padding: 10px 0 0 0;
  background: none !important;
  border: none; }

.label {
  background-color: #828282;
  font-weight: normal;
  text-shadow: none;
  font-size: 12px;
  padding: 1px 8px; }

.mandatory {
  color: #FF4242;
  font-weight: normal; }

@media only screen and (max-device-width: 599px) {
  #copyBtn {
    display: none; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  #copyBtn {
    display: none; } }

/* Background Image  (ex. Login page, Introduction page)  */
.bg-first, .bg-second, .bg-third, .bg-fourth, .bg-fifth {
  background-attachment: fixed; }

.bg-first {
  background: url("../img/bg_cover_01.jpg?ver20180419") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_01.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_01.jpg',sizingMethod='scale')"; }

.bg-second {
  background: url("../img/bg_cover_02.jpg?ver20180419") no-repeat center center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_02.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_02.jpg',sizingMethod='scale')"; }

.bg-third {
  background: url("../img/bg_cover_03.jpg?ver20180419") no-repeat top center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_03.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_03.jpg',sizingMethod='scale')"; }

.bg-fourth {
  background: url("../img/bg_cover_07.jpg?ver20200514") no-repeat 20% top;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_04.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_04.jpg',sizingMethod='scale')"; }

.bg-fifth {
  background: url("../img/bg_cover_05.jpg") no-repeat center;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_05.jpg',sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_cover_05.jpg',sizingMethod='scale')"; }
  @media only screen and (max-device-width: 599px) {
    .bg-fifth {
      background-position: right center; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .bg-fifth {
      background-position: right bottom; } }

/*------------------------- Form validation ------------------*/
.input-password input[type="password"], .input-password input[type="text"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-bottom: 0; }

.input-password .input-group-addon {
  padding: 0; }

.input-password .show-password-btn {
  width: 40px;
  height: 40px; }
  .input-password .show-password-btn.show-password-btn-show {
    background: url("../img/ico_eye_dark.svg") center center no-repeat; }
  .input-password .show-password-btn.show-password-btn-hide {
    background: url("../img/ico_eye_dark_disabled.svg") center center no-repeat; }

.validation-wrapper {
  margin-top: 5px; }
  .validation-wrapper label {
    font-size: small;
    font-weight: 400;
    display: block; }
    .validation-wrapper label.validate-hint-item:before {
      content: '-';
      width: 12px;
      height: 12px;
      display: inline-block; }
    .validation-wrapper label.validate-success {
      color: #3A945E; }
      .validation-wrapper label.validate-success:before {
        margin-right: 3px;
        content: '';
        background: url("../img/ico_success.svg") no-repeat; }
    .validation-wrapper label.validate-error {
      color: #FF4242; }
      .validation-wrapper label.validate-error:before {
        width: 16px;
        height: 16px;
        vertical-align: -4px;
        margin-right: 3px;
        content: '';
        background: url("../img/ico_error.svg") no-repeat; }
  .validation-wrapper.validate-password label.validate-error:before {
    background: url("../img/ico_error_x.svg") no-repeat; }
  .validation-wrapper.inline-block-base {
    margin-top: 0;
    vertical-align: middle;
    margin-left: 10px; }
    @media only screen and (max-device-width: 599px) {
      .validation-wrapper.inline-block-base {
        display: block;
        margin-left: 0;
        margin-top: 5px; } }

.radio-inline.profile-form-radio {
  padding-top: 0; }
  .radio-inline.profile-form-radio input {
    width: 16px;
    height: 16px;
    margin-top: -1px; }
  .radio-inline.profile-form-radio label {
    line-height: 16px; }

/*------------------------- Side bar -------------------------*/
.side-bar {
  background-color: #f6f6f8;
  border-right: 1px solid #e8e8ea; }
  .side-bar ul.nav-stacked {
    background-color: #FFFFFF;
    position: relative;
    top: 1em; }
    .side-bar ul.nav-stacked li:first-child a {
      -webkit-border-top-left-radius: 0;
      -moz-border-radius-topleft: 0;
      border-top-left-radius: 0;
      -webkit-border-top-right-radius: 0;
      -moz-border-radius-topright: 0;
      border-top-right-radius: 0; }
    .side-bar ul.nav-stacked li a {
      margin-right: 0;
      padding: 8px 12px;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.87);
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0; }
      .side-bar ul.nav-stacked li a:hover {
        text-decoration: underline; }
    .side-bar ul.nav-stacked li .collapse-menu-li {
      background: #f6f6f8; }
      .side-bar ul.nav-stacked li .collapse-menu-li ul {
        padding-left: 10px; }
      .side-bar ul.nav-stacked li .collapse-menu-li li {
        list-style: disc;
        font-size: 8px;
        color: #D7D7D7;
        padding-top: 7px; }
        .side-bar ul.nav-stacked li .collapse-menu-li li:first-child {
          padding-top: 0; }
        .side-bar ul.nav-stacked li .collapse-menu-li li a {
          padding: 0;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.87); }
          .side-bar ul.nav-stacked li .collapse-menu-li li a:hover {
            text-decoration: underline; }
        .side-bar ul.nav-stacked li .collapse-menu-li li span {
          width: 10px; }
    .side-bar ul.nav-stacked li + li {
      margin-top: 0; }
    .side-bar ul.nav-stacked .accordion {
      margin-bottom: 0; }
      .side-bar ul.nav-stacked .accordion .accordion-group {
        margin-bottom: 0;
        border: 1px solid #DDD;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        font-size: 14px; }
      .side-bar ul.nav-stacked .accordion .accordion-heading .accordion-toggle {
        padding: 8px 12px;
        color: rgba(0, 0, 0, 0.87); }

.collapse-menu {
  color: rgba(0, 0, 0, 0.87); }
  .collapse-menu:hover, .collapse-menu:focus {
    color: rgba(0, 0, 0, 0.87); }

/*------------------------- Breadcrumb -------------------------*/
.breadcrumb {
  padding: 10px 2em 0 2em;
  margin: -2em -2em 0 -2em;
  background: none;
  color: rgba(0, 0, 0, 0.54);
  font-size: small; }
  .breadcrumb .divider {
    color: #D0D0D0;
    padding: 0 6px; }
  .breadcrumb .active {
    color: white;
    font-weight: bold; }
  @media only screen and (max-device-width: 599px) {
    .breadcrumb {
      padding-top: 0;
      margin-top: 0; } }

/*------------------------- Page Title -------------------------*/
.titles {
  padding: 20px 10px;
  font-weight: bold;
  color: #3A945E;
  font-size: x-large; }
  .titles.middleTitle {
    padding: 20px 0 0 0;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: x-large;
    line-height: 1.2em; }
    .titles.middleTitle a {
      text-decoration: none; }
  .titles.largeTitle {
    padding: 0;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.87);
    font-size: xx-large;
    line-height: 1.2em;
    margin-bottom: .5em; }

.titleLine {
  font-size: 1.4em;
  display: block;
  border-top: none !important;
  padding: .3em 32px;
  border-bottom: 1px solid #E5E5E5;
  color: #565656;
  position: relative;
  margin: -1.45em -1.45em 1em -1.4em; }
  @media only screen and (max-device-width: 599px) {
    .titleLine {
      font-size: 20px;
      padding: 0.3em 1.3em;
      margin-top: -0.8em; } }
  .titleLine small {
    float: right;
    display: inline-block;
    margin: .6em; }

.pageTitle {
  font-size: 1.4em;
  line-height: 1.3em;
  color: #565656;
  padding: .3em 0;
  margin-bottom: 1em;
  border-bottom: 1px solid #E5E5E5; }

h2.titleLine p {
  font-size: medium;
  line-height: 1.3em; }

h2.titleLine span {
  letter-spacing: -0.01em;
  font-weight: bold;
  display: block;
  line-height: 1.2em; }

h2.pageTitle-dark {
  font-size: 32px;
  color: rgba(0, 0, 0, 0.54); }
  @media only screen and (max-device-width: 599px) {
    h2.pageTitle-dark {
      font-size: 28px; } }

h2.pageTitle-light {
  color: white;
  font-size: 2em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }

/*------------------------- Home -------------------------*/
.mainBox {
  border: 1px solid #d7d7d7;
  padding: 1em; }
  @media only screen and (max-device-width: 599px) {
    .mainBox:not(.quickpoll-home-container) {
      border: none;
      padding: 0; } }
  .mainBox table {
    margin-bottom: 0;
    font-size: 14px; }
    .mainBox table th {
      color: #5c5c5c !important; }
    .mainBox table td {
      padding: 5px;
      vertical-align: middle;
      line-height: 1.5em !important; }
  .mainBox .table-bordered thead {
    background-color: #dcdcdc; }
  .mainBox .table-bordered tbody tr {
    background: #FFFFFF; }
    .mainBox .table-bordered tbody tr:hover {
      background: #F5F5F5; }
    .mainBox .table-bordered tbody tr:nth-child(odd) td, .mainBox .table-bordered tbody tr:nth-child(even) td {
      background: none; }
  .mainBox ul li {
    font-size: 14px; }
  .mainBox h2 {
    font-size: 18px;
    font-weight: 600;
    color: #3A945E;
    text-align: left;
    line-height: 1em;
    margin-bottom: 0.6em; }
  .mainBox .quickpoll-home-text {
    position: relative;
    top: 3px;
    word-break: break-word; }
  @media only screen and (max-device-width: 599px) {
    .mainBox .quickpoll-home-btn {
      margin-top: 0.8em;
      width: 100%;
      float: none; } }
  .mainBox .quickpoll-home-btn a {
    width: 100%; }
  .mainBox .btn-mini {
    padding: 0.07em 0.3em; }

.carousel-indicators {
  width: auto;
  top: inherit;
  right: inherit;
  margin-left: -25px;
  bottom: 10px; }
  @media only screen and (max-device-width: 599px) {
    .carousel-indicators {
      top: 90% !important;
      left: 48% !important; } }
  .carousel-indicators li {
    cursor: pointer;
    margin: 1px 5px;
    background-color: rgba(255, 255, 255, 0.25);
    border: 0; }
  .carousel-indicators .active {
    width: 10px;
    height: 10px;
    margin: 1px 5px; }

/*------------------------- Notification -------------------------*/
.ul-striped li {
  background-color: #FFFFFF;
  padding: 10px 16px;
  border-bottom: 1px solid #D0D0D0; }
  .ul-striped li a {
    color: rgba(0, 0, 0, 0.87);
    cursor: pointer; }
  .ul-striped li:nth-child(odd) {
    background: #F9F9F9; }
  .ul-striped li:last-child {
    border: none !important; }
  .ul-striped li input[type="radio"], .ul-striped li input[type="radio"], .ul-striped li input[type="checkbox"] {
    margin-top: 4px; }

ul.unstyled {
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0; }
  ul.unstyled + p a {
    position: relative;
    top: -1px; }

ol.unstyled {
  list-style: none;
  background-color: #FFFFFF;
  border: 1px solid #D0D0D0; }

.notification-item {
  margin: 0; }
  .notification-item a {
    display: inline-block;
    min-width: 200px;
    max-width: 85%;
    text-decoration: underline; }
    @media only screen and (max-device-width: 599px) {
      .notification-item a {
        width: 220px; } }
  .notification-item dt {
    font-weight: normal;
    margin: 5px 0;
    position: relative; }
  .notification-item .notification-date {
    margin-right: 20px;
    position: relative;
    display: inline-block;
    vertical-align: top; }
  .notification-item .notification-body {
    margin: 20px -12px -10px -12px;
    padding: 30px 10px 10px 10px;
    background-color: #EFEFEF; }
  .notification-item .pright {
    position: absolute;
    right: 0; }

.page-index .notification-item a {
  width: 250px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap; }

/*------------------------- Survey List -------------------------*/
.surveyList h2 {
  font-weight: 600;
  display: inline-block; }

.surveyList b {
  display: inline-block; }
  .surveyList b.guidance {
    line-height: 1.2em;
    font-size: small;
    color: #5c5c5c;
    display: block;
    margin-bottom: 0.5em;
    font-weight: normal; }

.surveyList table {
  /* Answer Button on Survey List */ }
  .surveyList table a.btn-mini, .surveyList table button.btn-mini {
    padding: 3px 10px; }
  .surveyList table a.disable-trigger-answer, .surveyList table button.disable-trigger-answer {
    box-shadow: none; }
    .surveyList table a.disable-trigger-answer:hover, .surveyList table button.disable-trigger-answer:hover {
      box-shadow: none;
      cursor: default; }
  .surveyList table th div {
    position: relative; }

.surveyList.table td {
  vertical-align: middle; }

.surveyList.table-bordered thead tr th {
  border-left: 0;
  border-right: 0; }

.surveyList.table-bordered tr td:first-child {
  color: #aaaaaa; }

.surveyList.table-bordered tr td:nth-child(2) {
  text-align: left; }

.surveyList.table-bordered tr.mandatory td:last-child {
  border-bottom: 2px solid #8ecc2d; }

.surveyList .ico16.separator-bar {
  position: absolute;
  background-position: -565px top !important;
  width: 2px;
  right: -5px;
  bottom: 2px; }

/* Force table to not be like tables anymore */
@media only screen and (max-device-width: 599px) {
  #survey-list-app table, #survey-list-app tbody, #survey-list-app th, #survey-list-app td, #survey-list-app tr {
    display: block; }
  #survey-list-app table thead {
    display: none; }
    #survey-list-app table thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px; }
  #survey-list-app table tr {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px; }
    #survey-list-app table tr td {
      border: none !important;
      position: relative;
      padding: 4px 5%;
      text-align: left; }
      #survey-list-app table tr td:nth-of-type(1) {
        /* Survey No. */
        padding-top: 5%;
        color: rgba(0, 0, 0, 0.54); }
      #survey-list-app table tr td:nth-of-type(2) {
        /* Survey Title */
        font-size: 16px; }
      #survey-list-app table tr td:nth-of-type(3) {
        /* Point */
        display: inline-block;
        width: 50%;
        padding-bottom: 5%; }
        #survey-list-app table tr td:nth-of-type(3) .surveyPoint {
          border: none;
          background: none;
          box-shadow: none;
          padding-left: 0;
          color: #FF4242; }
      #survey-list-app table tr td:nth-of-type(4) {
        /* Answer */
        display: inline-block;
        width: 50%;
        padding-bottom: 5%;
        text-align: right; }
  #survey-list-app table.table tbody + tbody {
    border: none;
    padding-bottom: 5px; }
  #survey-list-app table.table-bordered {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; }
    #survey-list-app table.table-bordered tbody tr {
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      border: 1px solid #ddd;
      margin-top: 5px; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  #survey-list-app table thead tr th:first-child {
    /* Survey No. */
    width: 22%; }
  #survey-list-app table thead tr th:last-child {
    /* Answer */
    width: 15%; } }

/*------------------------- Table Definition -------------------------*/
.table {
  display: table;
  width: 100%;
  clear: both; }
  .table thead tr th {
    padding: 8px;
    vertical-align: middle;
    text-align: center; }
  .table tbody tr td {
    padding: 8px;
    vertical-align: middle; }
  .table tbody tr:hover th, .table tbody tr:hover td {
    background-color: #F5F5F5; }
    @media only screen and (max-device-width: 599px) {
      .table tbody tr:hover th, .table tbody tr:hover td {
        background-color: inherit; } }
  .table th, .table td {
    border-collapse: collapse;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd !important; }
  .table.sp2 th, .table.sp2 td {
    text-align: center;
    vertical-align: middle; }
  .table.sp2 td.lp {
    text-align: left; }

.table-bordered {
  border-collapse: separate;
  background-color: #FFFFFF;
  -webkit-box-shadow: #C2C2C2 0 0 1px;
  -moz-box-shadow: #C2C2C2 0 0 1px;
  box-shadow: #C2C2C2 0 0 1px;
  border: 0; }
  .table-bordered thead, .table-bordered tfoot {
    border-bottom: 3px solid #343434;
    border-collapse: separate;
    background-color: #464646; }
  .table-bordered thead tr th, .table-bordered thead tr td {
    color: white;
    border-left: 0;
    border-right: 0;
    line-height: 1.5em; }
  .table-bordered tbody tr th, .table-bordered tbody tr td {
    position: relative;
    line-height: 1.5em;
    border-collapse: separate;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    text-align: center;
    color: white; }
  .table-bordered tbody tr td {
    color: #323232; }
  .table-bordered tbody tr:last-child td:first-child {
    -webkit-border-bottom-left-radius: 4px;
    border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px; }
  .table-bordered tbody tr:last-child td:last-child {
    -webkit-border-bottom-right-radius: 4px;
    border-bottom-right-radius: 4px;
    -moz-border-radius-bottomright: 4px; }
  .table-bordered.sp2 {
    background-color: #FFFFFF;
    border: 1px solid #dddddd;
    border-collapse: separate;
    *border-collapse: collapsed; }
    .table-bordered.sp2 th, .table-bordered.sp2 td {
      border-left: none; }

.table-striped.sp th, .table-striped.sp td {
  border: none;
  border-bottom: solid 1px #DDDDDD;
  vertical-align: middle; }

.table-striped.sp tbody tr:nth-child(odd) th, .table-striped.sp tbody tr:nth-child(odd) td {
  background: none; }

.table-striped.sp tbody tr:nth-child(even) th, .table-striped.sp tbody tr:nth-child(even) td {
  background: none !important;
  background-color: #f9f9f9; }

/*------------------------- Survey Pages -------------------------*/
.survey-info {
  margin: -2em -2em 0 -2em;
  background: #424242;
  color: rgba(255, 255, 255, 0.7); }
  @media only screen and (max-device-width: 599px) {
    .survey-info {
      padding: 1.2em;
      margin: -1.2em -1.2em 0 -1.2em; } }
  .survey-info h2 {
    font-size: xx-large;
    color: white;
    padding-bottom: 0.5em; }
  .survey-info ul li {
    padding-top: 1em; }
    .survey-info ul li img {
      vertical-align: top;
      margin-right: 10px;
      width: 22px;
      height: 22px; }
  @media only screen and (max-device-width: 599px) {
    .survey-info .col-xs-12 {
      padding-left: 0;
      padding-right: 0;
      padding-top: 10px; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .survey-info .col-xs-12 {
      padding-left: 0;
      padding-right: 0;
      padding-top: 10px; } }
  .survey-info .survey-description-item {
    display: list-item;
    margin-left: 1em; }

.important-info img {
  vertical-align: top;
  margin-right: 10px;
  width: 22px;
  height: 22px; }

.important-info h2 {
  font-size: 1.1em;
  font-weight: bold;
  color: #3A945E; }

.important-info ul {
  margin-left: 1.5em;
  text-align: left; }
  .important-info ul li {
    font-size: 14px;
    list-style: disc;
    color: rgba(0, 0, 0, 0.54);
    padding-top: 0.5em;
    padding-left: 0.5em; }
    .important-info ul li span {
      color: rgba(0, 0, 0, 0.87); }

.surveyPoint {
  color: rgba(0, 0, 0, 0.87);
  display: inline-block;
  background-color: #F5F5F5;
  -webkit-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.26);
  -moz-box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.26);
  box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.26);
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  padding: 1px 0 0 9px; }
  .surveyPoint > span {
    height: 24px;
    display: inline-block;
    padding-top: 2px;
    padding-right: 9px; }

/* Used in Tutorial Survey, Profile Survey */
.profileLayoutChild {
  margin-bottom: 20px; }
  .profileLayoutChild label {
    margin: .5em 0em; }
  .profileLayoutChild .span12, .profileLayoutChild .unstyled {
    padding: 1em; }

/* Survey Ending page for mobile view */
@media only screen and (max-device-width: 599px) {
  .mobile-h-100vh {
    min-height: calc(100vh - 2.4em); } }

/*------------------------- Point History -------------------------*/
.monthly-history-container {
  width: 95%;
  margin: 1em auto; }
  @media only screen and (max-device-width: 599px) {
    .monthly-history-container {
      width: 100%;
      margin: 1em 0 0; }
      .monthly-history-container .transaction-info {
        vertical-align: top;
        text-align: left;
        width: 60%; }
      .monthly-history-container .transaction-detail-value {
        vertical-align: top;
        text-align: right;
        width: 40%; }
      .monthly-history-container .transaction-content {
        font-size: 14px; }
      .monthly-history-container .transaction-value span {
        font-size: 14px;
        font-weight: bold; }
      .monthly-history-container .transaction-time, .monthly-history-container .total-value {
        font-size: small;
        color: rgba(0, 0, 0, 0.54); } }
  .monthly-history-container h3 {
    font-size: large;
    font-weight: bold; }

/*------------------------- Ann and Kate Landing -------------------------*/
.landing-welcome {
  background: url("/img/bg_landing_welcome.png") top right no-repeat;
  background-size: cover;
  position: relative;
  margin: -2em;
  padding: 2em; }
  @media only screen and (max-device-width: 599px) {
    .landing-welcome {
      padding: 1.2em;
      margin: -1.2em; }
      .landing-welcome p {
        font-size: 14px; } }
  .landing-welcome section {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3);
    margin: 2em;
    padding: 5%; }
    @media only screen and (max-device-width: 599px) {
      .landing-welcome section {
        margin: 0;
        padding: 2em 1em; } }
    .landing-welcome section h1 {
      font-size: 2.2em; }
      @media only screen and (max-device-width: 599px) {
        .landing-welcome section h1 {
          font-size: 1.5em; } }
    .landing-welcome section ul {
      background: #FFFFFF;
      border: 1px solid #D0D0D0;
      padding: 0.5em 1em 0.5em 2em;
      text-align: left;
      list-style: disc; }
    .landing-welcome section .btn-larget {
      min-width: 136px;
      font-size: 14px; }

/*------------------------- Introduction Page (Landing) -------------------------*/
.introduction {
  color: rgba(0, 0, 0, 0.87); }
  @media only screen and (max-device-width: 599px) {
    .introduction div[class*="col-"] {
      padding-left: 1.2em;
      padding-right: 1.2em; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .introduction div[class*="col-"] {
      padding-left: 2em;
      padding-right: 2em; } }
  .introduction h1 {
    font-size: 2.2em;
    padding: 10px 0;
    color: white;
    text-shadow: 0 1px 2px #513e24; }
    @media only screen and (max-device-width: 599px) {
      .introduction h1 {
        font-size: 1.6em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction h1 {
        font-size: 1.8em; } }
  .introduction h2 {
    font-size: 2em;
    padding-bottom: 0.5em; }
    @media only screen and (max-device-width: 599px) {
      .introduction h2 {
        font-size: 1.4em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction h2 {
        font-size: 1.5em; } }
  .introduction p {
    color: rgba(0, 0, 0, 0.54); }
  .introduction .w100 {
    max-width: 1170px; }
  .introduction section form > div {
    width: 90%;
    margin-left: 10%; }
    @media only screen and (max-device-width: 599px) {
      .introduction section form > div {
        width: 100%;
        margin-left: 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section form > div {
        max-width: 408px;
        padding-top: 2em;
        margin-left: auto;
        margin-right: auto; } }
  .introduction section.row {
    margin-left: 0; }
  .introduction section.rotate {
    background-color: #FFFFFF;
    transform: rotate(-1.5deg);
    margin: -2.5em; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.rotate {
        transform: none;
        margin: 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.rotate {
        transform: none;
        margin: 0; } }
    .introduction section.rotate > div {
      transform: rotate(1.5deg); }
      @media only screen and (max-device-width: 599px) {
        .introduction section.rotate > div {
          transform: none; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.rotate > div {
          transform: none; } }
  .introduction section.main-visual {
    padding: 0;
    background-attachment: fixed; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.main-visual {
        background-attachment: scroll; } }
    .introduction section.main-visual .clearfix {
      padding: 5em 0 8em 0; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.main-visual .clearfix {
          padding: 4em 0; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.main-visual .clearfix {
          padding: 4em 0;
          text-align: center; } }
    .introduction section.main-visual .signBox {
      max-width: 100%;
      background: white;
      margin-bottom: 5px; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.main-visual .signBox {
          margin-top: 2em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.main-visual table {
        text-align: left;
        margin-left: auto;
        margin-right: auto; } }
    .introduction section.main-visual table tr td {
      padding: 5px 0;
      vertical-align: middle; }
      .introduction section.main-visual table tr td:nth-child(2) {
        padding-left: 12px;
        color: #ffe5c1;
        font-size: 1.4em;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
        @media only screen and (max-device-width: 599px) {
          .introduction section.main-visual table tr td:nth-child(2) {
            font-size: 1.2em; } }
        @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
          .introduction section.main-visual table tr td:nth-child(2) {
            font-size: 1.2em; } }
      .introduction section.main-visual table tr td img {
        width: 32px;
        height: 32px;
        margin-top: 7px; }
  .introduction section.why-surveyon {
    padding: 5em 0 6em 0; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.why-surveyon {
        padding: 4em 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.why-surveyon {
        padding: 4em 0; } }
    .introduction section.why-surveyon h4 {
      color: #3A945E;
      font-size: 20px;
      font-weight: bold;
      padding-top: 1em; }
    .introduction section.why-surveyon p {
      font-size: 18px;
      padding: 0 1em 1em 1em; }
    .introduction section.why-surveyon .clearfix {
      padding-top: 4em; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.why-surveyon .clearfix {
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.why-surveyon .clearfix {
          padding-top: 2em; } }
    @media only screen and (max-device-width: 599px) {
      .introduction section.why-surveyon .col-md-4 {
        padding-top: 2em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.why-surveyon .col-md-4 {
        padding-top: 2em; } }
  .introduction section.get-rewards {
    padding: 8em 0 5em 0;
    background-color: #F5F5F5;
    margin: -2.5em; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.get-rewards {
        margin: 0;
        padding: 3em 0 4em 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.get-rewards {
        margin: 0;
        padding: 3em 0 4em 0;
        text-align: center; } }
    .introduction section.get-rewards h2 {
      font-size: 1.7em; }
    .introduction section.get-rewards h3 {
      padding: 1.5em 0 0.7em 0;
      font-size: 1.2em; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.get-rewards h3 {
          padding: 0.5em 0; } }
    .introduction section.get-rewards .img-wrap {
      text-align: right; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.get-rewards .img-wrap {
          text-align: center;
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.get-rewards .img-wrap {
          text-align: center;
          padding-top: 4em; } }
    .introduction section.get-rewards img {
      margin-bottom: -40px;
      width: 340px; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.get-rewards img {
          width: 70%;
          margin-bottom: -70px; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.get-rewards img {
          width: 320px;
          margin-bottom: -70px;
          margin-right: -52px; } }
  .introduction section.how-to-do {
    padding: 5em 0 6em 0; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.how-to-do {
        padding: 4em 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .introduction section.how-to-do {
        padding: 4em 0; } }
    .introduction section.how-to-do .how-box {
      border-radius: 50%;
      width: calc(100%/4 - 30px);
      height: auto;
      margin-right: 40px; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.how-to-do .how-box {
          width: 280px;
          min-height: 280px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 1em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.how-to-do .how-box {
          width: 360px;
          min-height: 360px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 1em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.how-to-do .how-box:nth-child(odd) {
          float: left; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.how-to-do .how-box:nth-child(even) {
          float: right; } }
      .introduction section.how-to-do .how-box:first-child {
        background: #50aee2; }
      .introduction section.how-to-do .how-box:nth-child(2) {
        background: #56a6c4; }
      .introduction section.how-to-do .how-box:nth-child(3) {
        background: #51af9c; }
      .introduction section.how-to-do .how-box:last-child {
        background: #51af77;
        float: right;
        margin-right: 0; }
        @media only screen and (max-device-width: 599px) {
          .introduction section.how-to-do .how-box:last-child {
            float: none;
            margin-right: auto; } }
      .introduction section.how-to-do .how-box img {
        width: 50px;
        padding-top: 40px; }
      .introduction section.how-to-do .how-box p {
        padding-top: 20px;
        color: white;
        font-size: 18px; }
        @media only screen and (max-device-width: 599px) {
          .introduction section.how-to-do .how-box p {
            font-size: 16px;
            padding-top: 2em; } }
        @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
          .introduction section.how-to-do .how-box p {
            padding-top: 4em; } }
  .introduction section.do-it-now {
    color: white;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    padding: 0;
    background-attachment: fixed; }
    @media only screen and (max-device-width: 599px) {
      .introduction section.do-it-now {
        background-attachment: scroll; } }
    .introduction section.do-it-now .clearfix {
      padding: 8em 0 5em 0; }
      @media only screen and (max-device-width: 599px) {
        .introduction section.do-it-now .clearfix {
          padding: 4em 0; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .introduction section.do-it-now .clearfix {
          padding: 4em 0; } }
    .introduction section.do-it-now ul li {
      font-size: 1.1em;
      font-weight: normal;
      padding-top: 1em; }
      .introduction section.do-it-now ul li b {
        color: #FDD835;
        padding-right: 0.5em; }

/* Animated icons of Why survey section */
#ico-worker {
  position: relative;
  animation: worker-movement 7s ease infinite; }

@-webkit-keyframes worker-movement {
  0% {
    transform: translate(-8px, 40px); }
  75% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes worker-movement {
  0% {
    transform: translate(-8px, 40px); }
  75% {
    transform: translate(0, 0); }
  100% {
    transform: translate(0, 0); } }

#ico-box {
  position: relative;
  animation: box-movement 7s ease infinite; }

@-webkit-keyframes box-movement {
  0% {
    transform: translate(-10px, 40px); }
  75% {
    transform: translate(-2px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes box-movement {
  0% {
    transform: translate(-10px, 40px); }
  75% {
    transform: translate(-2px, 0); }
  100% {
    transform: translate(0, 0); } }

#ico-cloud1, #ico-cloud2, #ico-cloud3 {
  position: relative;
  animation: clouds-movement 10s ease infinite; }

@-webkit-keyframes clouds-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(5px, -15px); } }

@keyframes clouds-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(5px, -15px); } }

#ico-cloud4 {
  position: relative;
  animation: cloud-one-movement 10s ease infinite; }

@-webkit-keyframes cloud-one-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(-5px, -10px); } }

@keyframes cloud-one-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(-5px, -10px); } }

#ico-balloon {
  position: relative;
  animation: balloon-movement 10s ease infinite; }

@-webkit-keyframes balloon-movement {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(3px, 13px); }
  100% {
    transform: translate(0, 0); } }

@keyframes balloon-movement {
  0% {
    transform: translate(0, 0); }
  50% {
    transform: translate(3px, 13px); }
  100% {
    transform: translate(0, 0); } }

#ico-coin3 {
  position: relative;
  animation: coin3-movement 3s ease infinite; }

@-webkit-keyframes coin3-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(3px, 20px); } }

@keyframes coin3-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(3px, 20px); } }

#ico-coin2 {
  position: relative;
  animation: coin2-movement 3s ease infinite; }

@-webkit-keyframes coin2-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(6px, 25px); } }

@keyframes coin2-movement {
  from {
    transform: translate(0, 0); }
  to {
    transform: translate(6px, 25px); } }

#ico-coin1 {
  animation: coin-movement 3s infinite; }

@-webkit-keyframes coin-movement {
  0% {
    transform: translate(0, 0); }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(10px, 17px); } }

@keyframes coin-movement {
  0% {
    transform: translate(0, 0); }
  75% {
    opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(10px, 17px); } }

/* Top button */
.go-top {
  display: none;
  position: fixed;
  bottom: 1em;
  right: 1em;
  margin: 0;
  padding: 10px 12px 5px 12px;
  z-index: 1;
  font-size: 12px;
  text-decoration: none;
  color: white;
  background-color: rgba(58, 148, 94, 0.6); }
  .go-top:hover {
    background-color: #3a945e;
    color: white;
    text-decoration: none; }

/*------------------------- Index (root) -------------------------*/
.index-wrapped {
  color: rgba(0, 0, 0, 0.87);
  border-top: 1px solid #D0D0D0; }
  @media only screen and (max-device-width: 599px) {
    .index-wrapped div[class*="col-"] {
      padding-left: 1.2em;
      padding-right: 1.2em; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .index-wrapped div[class*="col-"] {
      padding-left: 2em;
      padding-right: 2em; } }
  .index-wrapped h1 {
    font-size: 2.2em;
    padding: 1em 0 10px 0;
    color: white;
    text-shadow: 0 1px 2px #513e24; }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped h1 {
        font-size: 1.6em;
        padding: 0 0 10px 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped h1 {
        font-size: 1.8em;
        padding: 0 0 10px 0; } }
  .index-wrapped h2 {
    font-size: 2em;
    padding-bottom: 0.5em; }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped h2 {
        font-size: 1.4em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped h2 {
        font-size: 1.5em; } }
  .index-wrapped p {
    color: rgba(0, 0, 0, 0.54); }
  .index-wrapped .w100 {
    max-width: 1170px;
    padding-left: 2em;
    padding-right: 2em; }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped .w100 {
        padding-left: 0;
        padding-right: 0; } }
  .index-wrapped section.row {
    margin-left: 0;
    border-bottom: 1px solid #D0D0D0; }
  .index-wrapped section.main-visual {
    padding: 0;
    background-attachment: fixed; }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped section.main-visual {
        background-attachment: scroll; } }
    .index-wrapped section.main-visual .clearfix {
      padding: 4em 0; }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.main-visual .clearfix {
          text-align: center; } }
    .index-wrapped section.main-visual .form-wrapped {
      width: 90%;
      margin-left: 10%; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.main-visual .form-wrapped {
          max-width: 408px;
          width: 100%;
          margin-left: auto;
          margin-right: auto;
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.main-visual .form-wrapped {
          width: 408px;
          margin-left: auto;
          margin-right: auto;
          padding-top: 2em; } }
    .index-wrapped section.main-visual .nav-tabs li a {
      color: rgba(0, 0, 0, 0.54); }
    .index-wrapped section.main-visual .nav-tabs li.active a, .index-wrapped section.main-visual .nav-tabs li.active a:focus, .index-wrapped section.main-visual .nav-tabs li.active a:hover {
      color: rgba(0, 0, 0, 0.87);
      background: white; }
    .index-wrapped section.main-visual .signBox {
      background: white;
      max-width: 100%;
      margin-bottom: 5px;
      border: none !important;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0; }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped section.main-visual table {
        text-align: left;
        margin-left: auto;
        margin-right: auto; } }
    .index-wrapped section.main-visual table tr td {
      padding: 5px 0;
      vertical-align: middle; }
      .index-wrapped section.main-visual table tr td:nth-child(2) {
        padding-left: 12px;
        color: #ffe5c1;
        font-size: 1.4em;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }
        @media only screen and (max-device-width: 599px) {
          .index-wrapped section.main-visual table tr td:nth-child(2) {
            font-size: 1.2em; } }
        @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
          .index-wrapped section.main-visual table tr td:nth-child(2) {
            font-size: 1.2em; } }
      .index-wrapped section.main-visual table tr td img {
        width: 32px;
        height: 32px;
        margin-top: 7px; }
  .index-wrapped section.why-surveyon {
    padding: 4em 0; }
    .index-wrapped section.why-surveyon h4 {
      color: #3A945E;
      font-size: 20px;
      font-weight: bold;
      padding-top: 1em; }
    .index-wrapped section.why-surveyon p {
      font-size: 18px;
      padding: 0 1em 1em 1em; }
    .index-wrapped section.why-surveyon .clearfix {
      padding-top: 4em; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.why-surveyon .clearfix {
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.why-surveyon .clearfix {
          padding-top: 2em; } }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped section.why-surveyon .col-md-4 {
        padding-top: 2em; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped section.why-surveyon .col-md-4 {
        padding-top: 2em; } }
  .index-wrapped section.menu-introduction {
    padding: 4em 0;
    background-color: #F5F5F5;
    background: url("../img/bg_cover_06.jpg") no-repeat center;
    background-attachment: fixed;
    background-size: cover; }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped section.menu-introduction {
        margin: 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped section.menu-introduction {
        margin: 0;
        text-align: center; } }
    .index-wrapped section.menu-introduction .w100:last-child {
      text-align: right;
      padding-top: 4em; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.menu-introduction .w100:last-child {
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.menu-introduction .w100:last-child {
          text-align: center;
          padding-top: 0; } }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.menu-introduction .w100:last-child h2 {
          padding-top: 1em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.menu-introduction .w100:last-child h2 {
          padding-top: 2em; } }
    .index-wrapped section.menu-introduction h2 {
      color: #3A945E;
      font-weight: bold;
      text-shadow: 0 1px 1px white;
      padding-bottom: 0; }
    .index-wrapped section.menu-introduction h3 {
      padding: 1.5em 0 0.7em 0;
      font-size: 1.2em; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.menu-introduction h3 {
          padding: 0.5em 0; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.menu-introduction h3 {
          padding: 0.5em 0; } }
    @media only screen and (max-device-width: 599px) {
      .index-wrapped section.menu-introduction .fr {
        float: none; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .index-wrapped section.menu-introduction .fr {
        float: none; } }
    .index-wrapped section.menu-introduction .img-wrap {
      text-align: right; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.menu-introduction .img-wrap {
          text-align: center;
          padding-top: 2em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.menu-introduction .img-wrap {
          text-align: center;
          padding-top: 2em; } }
  .index-wrapped section.how-to-do {
    padding: 4em 0; }
    .index-wrapped section.how-to-do .how-box {
      border-radius: 50%;
      width: calc(100%/4 - 20px);
      height: auto;
      margin-right: 20px; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.how-to-do .how-box {
          width: 280px;
          min-height: 280px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 1em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.how-to-do .how-box {
          width: 360px;
          min-height: 360px;
          margin-left: auto;
          margin-right: auto;
          margin-top: 1em; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.how-to-do .how-box:nth-child(odd) {
          float: left; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .index-wrapped section.how-to-do .how-box:nth-child(even) {
          float: right; } }
      .index-wrapped section.how-to-do .how-box:first-child {
        background: #50aee2; }
      .index-wrapped section.how-to-do .how-box:nth-child(2) {
        background: #56a6c4; }
      .index-wrapped section.how-to-do .how-box:nth-child(3) {
        background: #51af9c; }
      .index-wrapped section.how-to-do .how-box:last-child {
        background: #51af77;
        float: right;
        margin-right: 0; }
        @media only screen and (max-device-width: 599px) {
          .index-wrapped section.how-to-do .how-box:last-child {
            float: none;
            margin-right: auto; } }
      .index-wrapped section.how-to-do .how-box img {
        width: 50px;
        padding-top: 40px; }
      .index-wrapped section.how-to-do .how-box p {
        padding-top: 1em;
        color: white;
        font-size: 16px; }
        @media only screen and (max-device-width: 599px) {
          .index-wrapped section.how-to-do .how-box p {
            padding-top: 2em; } }
        @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
          .index-wrapped section.how-to-do .how-box p {
            padding-top: 4em; } }
  .index-wrapped section.researcher-contact {
    padding: 4em 0;
    color: white;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    background-color: #3A945E;
    text-align: center; }
    .index-wrapped section.researcher-contact h3 {
      font-size: 1.6em;
      padding-bottom: 1em; }
      @media only screen and (max-device-width: 599px) {
        .index-wrapped section.researcher-contact h3 {
          font-size: 1.4em; } }
    .index-wrapped section.researcher-contact p {
      color: rgba(255, 255, 255, 0.7); }

/*------------------------- Point Exchange -------------------------*/
.pointExchangeBlock {
  padding: 1.5em;
  background-color: #ececec;
  clear: both;
  display: inline-block;
  margin: 0 !important; }
  @media only screen and (max-device-width: 599px) {
    .pointExchangeBlock {
      padding: 1em; } }
  .pointExchangeBlock aside {
    position: relative;
    top: -40px;
    display: block;
    text-align: center;
    margin: 0 62px; }
    .pointExchangeBlock aside p {
      min-width: 400px;
      padding: 0 2px;
      margin: 0 -5px;
      display: block;
      width: 100%;
      height: 51px;
      background-color: #eb410b;
      display: inline-block; }
    .pointExchangeBlock aside b {
      position: relative;
      top: 6px;
      color: white;
      font-size: x-large; }
      .pointExchangeBlock aside b:first-child {
        font-weight: bold;
        font-size: medium; }
  .pointExchangeBlock .itemrow {
    clear: both;
    display: inline-block; }
  .pointExchangeBlock.conerBorder5 {
    margin-bottom: 1em !important;
    padding: 0;
    background: none; }
    .pointExchangeBlock.conerBorder5 em {
      font-style: normal;
      font-size: small;
      color: rgba(0, 0, 0, 0.54);
      display: block;
      margin-top: 1em;
      padding: 0; }
    .pointExchangeBlock.conerBorder5 ul {
      margin-left: 1em; }
      .pointExchangeBlock.conerBorder5 ul li {
        color: rgba(0, 0, 0, 0.54); }
        .pointExchangeBlock.conerBorder5 ul li span.ico16 {
          position: relative;
          top: 6px; }
    .pointExchangeBlock.conerBorder5 h2 {
      padding: 0 0 0.5em 0;
      box-shadow: none;
      text-align: center; }
      .pointExchangeBlock.conerBorder5 h2 span.ico16 {
        display: inline-block;
        margin-top: -0.25em; }
    .pointExchangeBlock.conerBorder5 .noteLine {
      padding: 1em 2em;
      background: #FBFBFC url("../img/bg_note_line.png") 0 52px repeat;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.2); }
      @media only screen and (max-device-width: 599px) {
        .pointExchangeBlock.conerBorder5 .noteLine {
          padding: 1em; } }
      .pointExchangeBlock.conerBorder5 .noteLine * {
        line-height: 2.25em; }
      .pointExchangeBlock.conerBorder5 .noteLine a {
        color: rgba(0, 0, 0, 0.87); }
        .pointExchangeBlock.conerBorder5 .noteLine a:hover {
          color: rgba(0, 0, 0, 0.54);
          text-decoration: none; }
      .pointExchangeBlock.conerBorder5 .noteLine center {
        height: 35px; }
        .pointExchangeBlock.conerBorder5 .noteLine center strong {
          font-size: larger;
          position: relative;
          top: -5px; }
        .pointExchangeBlock.conerBorder5 .noteLine center .orangeArrow {
          position: realtive;
          top: -2px;
          margin: 0 0.5em; }
  .pointExchangeBlock + p {
    font-size: large;
    font-weight: bold;
    display: inline-block; }
  .pointExchangeBlock .calculate-wrap {
    border-top: 1px solid #d7d7d7;
    text-align: right;
    padding-top: 0.5em;
    margin-top: 0.5em; }
    .pointExchangeBlock .calculate-wrap .calculateBox b {
      color: rgba(0, 0, 0, 0.54);
      font-size: x-large;
      position: relative; }
    .pointExchangeBlock .calculate-wrap .calculateResult {
      width: 100%;
      text-align: right;
      padding-left: 5px;
      color: rgba(0, 0, 0, 0.54); }
      .pointExchangeBlock .calculate-wrap .calculateResult span {
        margin: 0;
        padding: 0;
        text-align: right; }
    .pointExchangeBlock .calculate-wrap h3 {
      display: inline-block;
      color: rgba(0, 0, 0, 0.54);
      margin-bottom: 0; }
    .pointExchangeBlock .calculate-wrap .ico16.arrowBrown {
      display: inline-block;
      vertical-align: middle; }
  .pointExchangeBlock .calculateGrayBox {
    height: 48px;
    background: #8d8d8d; }
    .pointExchangeBlock .calculateGrayBox b {
      float: right;
      display: inline-block;
      height: 48px;
      font-size: x-large;
      position: relative;
      top: 4px;
      right: 10px;
      color: white; }
      .pointExchangeBlock .calculateGrayBox b:first-child {
        color: white;
        font-size: x-large;
        font-weight: bold;
        line-height: 1.6em;
        letter-spacing: 0.5px;
        float: left;
        display: inline-block;
        position: relative;
        top: 4px;
        right: 0;
        left: 10px;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
        .pointExchangeBlock .calculateGrayBox b:first-child sub {
          display: inline-block;
          position: relative;
          top: -2px;
          left: 5px;
          margin-left: 3px;
          font-size: small;
          color: #C9CDCF; }

.pointBox {
  display: inline-block;
  float: left;
  text-align: left;
  width: 50%;
  margin: 0 0 10px 0 !important;
  padding: 0; }
  .pointBox figure {
    text-align: center;
    padding: 10px;
    margin: 0 auto; }
    .pointBox figure figcaption {
      text-align: left;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.54);
      font-weight: bold;
      text-align: center; }
  @media only screen and (max-device-width: 599px) {
    .pointBox .fl, .pointBox .fr {
      float: none; }
    .pointBox .btn {
      width: 100%;
      padding: 10px;
      font-size: 16px;
      font-weight: bold; } }
  .pointBox > .exchange-wrapper {
    display: inline-block;
    width: 100%;
    position: relative;
    background: #F5F5F5;
    box-shadow: 0 1px 1px #cfcfcf;
    padding: 2%; }
    @media only screen and (max-device-width: 599px) {
      .pointBox > .exchange-wrapper {
        padding: 5%; } }
    .pointBox > .exchange-wrapper .e-coupon-image {
      display: table-cell;
      padding-right: 20px; }
      .pointBox > .exchange-wrapper .e-coupon-image img {
        width: 250px;
        height: auto;
        display: block; }
        @media only screen and (max-device-width: 599px) {
          .pointBox > .exchange-wrapper .e-coupon-image img {
            width: 100%; } }
      @media only screen and (max-device-width: 599px) {
        .pointBox > .exchange-wrapper .e-coupon-image {
          display: block;
          width: 100%;
          margin-bottom: 15px;
          padding-right: 0; } }
    .pointBox > .exchange-wrapper .e-coupon-content {
      display: table-cell;
      vertical-align: top;
      width: 75%; }
      @media only screen and (max-device-width: 599px) {
        .pointBox > .exchange-wrapper .e-coupon-content {
          width: 100%;
          display: block; } }
  .pointBox > span {
    display: inline-block;
    width: 100%;
    position: relative;
    background: #F5F5F5;
    box-shadow: 0 1px 1px #cfcfcf;
    padding: 2%; }
    @media only screen and (max-device-width: 599px) {
      .pointBox > span {
        padding: 5%; } }
    .pointBox > span.tw {
      background: none;
      box-shadow: none; }
      .pointBox > span.tw figure {
        background: #F5F5F5;
        box-shadow: 0px 1px 1px #cfcfcf;
        -moz-border-top-left-radius: 5px;
        -webkit-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-top-right-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px; }
    .pointBox > span.itemBox {
      width: 100%;
      padding: 0; }
      .pointBox > span.itemBox .itemLogo {
        position: absolute;
        z-index: 999;
        left: 10px;
        top: 10px; }
  .pointBox.span6 p {
    text-align: center; }
  .pointBox .Itemdescription {
    clear: both;
    display: inline-block;
    padding: 1em; }
    .pointBox .Itemdescription figure {
      display: inline-block;
      padding: 0;
      min-height: 150px;
      clear: both; }
      .pointBox .Itemdescription figure img {
        margin: 10px 0; }
    .pointBox .Itemdescription ul {
      float: left;
      text-align: left;
      display: inline-block;
      font-size: small;
      font-weight: normal;
      min-height: 100px;
      margin-top: 10px;
      background: none;
      color: rgba(0, 0, 0, 0.87); }
      .pointBox .Itemdescription ul li {
        float: none;
        margin-top: 0;
        padding: 0;
        line-height: 1.5em;
        list-style: circle;
        letter-spacing: -0.06em; }
        .pointBox .Itemdescription ul li dd {
          padding-left: 10px; }
        .pointBox .Itemdescription ul li ul {
          float: none;
          min-height: 0;
          margin-top: 0;
          padding-left: 10px; }
          .pointBox .Itemdescription ul li ul li {
            list-style: decimal; }
    .pointBox .Itemdescription dl, .pointBox .Itemdescription dd, .pointBox .Itemdescription dt {
      display: inline-block; }
    .pointBox .Itemdescription h5 {
      margin-top: 15px;
      margin-bottom: 3px;
      font-size: 14px;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.54); }
    .pointBox .Itemdescription .important {
      padding: 10px 20px;
      background: #F5F5F5;
      border: 1px solid #d7d7d7;
      margin-bottom: 10px;
      margin-top: 10px; }
  .pointBox .pointNumber {
    top: 0;
    right: 0;
    border-top-right-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    position: absolute;
    display: inline-block;
    background: #eb410b;
    color: white;
    padding: 5px 10px;
    font-size: large; }
    .pointBox .pointNumber span.ico16 {
      position: relative;
      top: 4px; }
  .pointBox > .pageTop > .Itemdescription {
    padding: 4px 10px 32px 26px; }

.itemrow {
  width: 100%;
  display: inline-block; }
  .itemrow:last-child {
    float: right; }
  .itemrow .pointBox.span6 {
    float: left;
    margin-left: 0.5% !important;
    margin-right: 0.5% !important; }

.stepper-wrap {
  position: relative;
  display: inline-block;
  margin: 0 0 0 0 !important; }
  .stepper-wrap input {
    text-align: right; }
  .stepper-wrap > input[type=number]::-webkit-inner-spin-button,
  .stepper-wrap > input[type=number]::-webkit-outer-spin-button {
    opacity: 0; }

.stepper-btn-wrap {
  position: relative;
  top: -3px;
  right: -40px;
  width: 20px;
  height: 32px;
  margin-top: -30px;
  background: #535356;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; }
  .stepper-btn-wrap a {
    display: block;
    font-size: 14px;
    height: 50%;
    overflow: hidden;
    color: white;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    line-height: 1; }
    .stepper-btn-wrap a:hover {
      color: rgba(255, 255, 255, 0.7); }

.stepper-btn-up {
  padding-right: 1px;
  display: block;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); }

.eCoupon input[type="number"] {
  text-align: center;
  padding: 6px 10px;
  border: 1px solid #34343c;
  margin-top: 1px !important;
  background-color: #535356;
  color: white;
  font-weight: bold;
  width: 40px;
  box-sizing: content-box; }

.eCoupon .row-fluid {
  border: none !important;
  background: none;
  padding: 0 !important; }

.eCoupon .span12 h3 {
  margin-top: 0; }

.gray-box {
  padding: 1.5em;
  background-color: #ececec;
  clear: both;
  display: inline-block;
  margin: 0 !important; }
  .gray-box .warningText {
    margin-top: 0em; }
    .gray-box .warningText b.font-medium-size {
      font-size: 14px; }
  .gray-box.box-ssi {
    border-top: 4px solid #5A966E;
    padding-top: 55px;
    display: block; }
    .gray-box.box-ssi dl {
      position: relative;
      color: rgba(0, 0, 0, 0.54); }
      .gray-box.box-ssi dl dd {
        font-size: 15px; }
        .gray-box.box-ssi dl dd ul {
          margin-top: 15px; }
      .gray-box.box-ssi dl dt {
        text-align: center; }
        .gray-box.box-ssi dl dt b {
          display: block;
          width: inherit;
          text-align: left;
          font-size: 15px; }
        .gray-box.box-ssi dl dt .enquete-ssi {
          margin-bottom: 25px;
          margin-top: 14px; }
        .gray-box.box-ssi dl dt .green-band {
          text-align: center;
          display: inline-block;
          background-color: #5a966e;
          padding: 7px 0;
          font-weight: bold;
          position: absolute;
          top: 0;
          left: 50%;
          color: #FFF;
          margin-left: -70px;
          width: 140px; }

.pageTop .pointTitle {
  background: #3A945E;
  margin: -2em -2em 2em -2em;
  padding: 1.6em 2em 2em 2em;
  position: relative;
  text-align: center;
  color: white; }
  @media only screen and (max-device-width: 599px) {
    .pageTop .pointTitle {
      margin-top: -1.2em; } }
  .pageTop .pointTitle a {
    color: white;
    text-decoration: underline; }
    .pageTop .pointTitle a:hover {
      color: rgba(255, 255, 255, 0.7); }
    .pageTop .pointTitle a.phone {
      text-decoration: none; }
      .pageTop .pointTitle a.phone:hover {
        color: white;
        cursor: default; }
  .pageTop .pointTitle dt {
    font-size: 32px;
    font-weight: 500;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
    @media only screen and (max-device-width: 599px) {
      .pageTop .pointTitle dt {
        font-size: 24px; } }
  .pageTop .pointTitle dd {
    margin-top: 0;
    display: inline-block;
    font-size: 11px;
    color: #5F6D7B; }
    .pageTop .pointTitle dd p {
      color: white; }
      .pageTop .pointTitle dd p:first-child {
        color: rgba(255, 255, 255, 0.7);
        font-style: italic;
        font-size: medium;
        margin-top: 8px; }
  .pageTop .pointTitle table.subInfo {
    width: 80%;
    text-align: left;
    border-spacing: 0;
    border-collapse: separate;
    margin: 0 auto;
    font-size: 13px;
    color: white; }
    @media only screen and (max-device-width: 599px) {
      .pageTop .pointTitle table.subInfo {
        width: 100%; } }
    .pageTop .pointTitle table.subInfo tr td {
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-top: 0;
      padding: 8px 10px;
      vertical-align: middle; }
      .pageTop .pointTitle table.subInfo tr td:first-child {
        width: 170px;
        text-align: right; }
      .pageTop .pointTitle table.subInfo tr td:last-child {
        border-left: 0; }
    .pageTop .pointTitle table.subInfo tr:first-child td:first-child {
      border: 1px solid rgba(255, 255, 255, 0.4);
      -moz-border-top-left-radius: 10px;
      -webkit-border-top-left-radius: 10px;
      border-top-left-radius: 10px;
      background: rgba(255, 255, 255, 0.25); }
    .pageTop .pointTitle table.subInfo tr:first-child td:last-child {
      border: 1px solid rgba(255, 255, 255, 0.4);
      -moz-border-top-right-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      border-top-right-radius: 10px;
      border-left: 0; }
    .pageTop .pointTitle table.subInfo tr:nth-child(2) td:first-child {
      background: rgba(255, 255, 255, 0.15); }
    .pageTop .pointTitle table.subInfo tr:nth-child(3) td:first-child {
      background: rgba(255, 255, 255, 0.05); }
    .pageTop .pointTitle table.subInfo tr:nth-child(4) td:first-child {
      background: rgba(255, 255, 255, 0.01); }
    .pageTop .pointTitle table.subInfo tr:last-child td:first-child {
      border: 1px solid rgba(255, 255, 255, 0.4);
      -moz-border-bottom-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      border-bottom-left-radius: 10px;
      border-top: 0; }
    .pageTop .pointTitle table.subInfo tr:last-child td:last-child {
      border: 1px solid rgba(255, 255, 255, 0.4);
      -moz-border-bottom-right-radius: 10px;
      -webkit-border-bottom-right-radius: 10px;
      border-bottom-right-radius: 10px;
      border-left: 0;
      border-top: 0; }
    .pageTop .pointTitle table.subInfo span {
      display: inline-block;
      margin-top: 10px;
      border: 1px solid #7b8187; }
      .pageTop .pointTitle table.subInfo span b {
        display: inline-block;
        padding: 3px 9px 3px 6px;
        font-style: normal;
        border: 2px solid #FF4242;
        background: url("../img/bg.png") 0px -440px repeat-x;
        color: white; }
        .pageTop .pointTitle table.subInfo span b input {
          width: 40px;
          margin: 0;
          padding: 0;
          text-align: center;
          border: 1px solid #34343c;
          background-color: #535356;
          color: white;
          font-weight: bold; }
      .pageTop .pointTitle table.subInfo span em {
        display: inline-block;
        padding: 3px 6px;
        font-style: normal; }

.point-decrease.th-bg {
  background: #3A945E url(../img/banner/open_2302_event_point_mypage_th.png) top right no-repeat; }
  @media only screen and (max-width: 1000px) {
    .point-decrease.th-bg {
      background-size: 700px;
      background-position: bottom right; } }
  @media only screen and (max-device-width: 599px) {
    .point-decrease.th-bg {
      background: #3A945E url(../img/banner/open_2302_event_point_mypage_th_mobile.png) bottom right no-repeat;
      background-size: 280px; } }

.point-decrease.sg-bg {
  background: #3A945E url(../img/banner/open_1702_event_point_mypage_sg.png) top right no-repeat; }

.point-decrease.hk-bg, .point-decrease.my-bg {
  background: #3A945E url(../img/banner/open_1702_event_point_mypage_hk.png) top right no-repeat; }

.point-decrease.tw-bg {
  background: #3A945E url(../img/banner/open_1702_event_point_mypage_tw.png) top right no-repeat; }

.point-decrease.id-bg {
  background: #569c59 url(../img/banner/open_1510_event_point_mypage_id.png) top right no-repeat; }

.point-decrease.vn-bg {
  background: #569c59 url(../img/banner/open_1510_event_point_mypage_vn.png) top right no-repeat; }

@media only screen and (max-device-width: 599px) {
  .point-decrease.sg-bg, .point-decrease.hk-bg, .point-decrease.tw-bg, .point-decrease.my-bg, .point-decrease.id-bg {
    background-position: bottom right;
    background-size: 220%; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .point-decrease.sg-bg, .point-decrease.hk-bg, .point-decrease.tw-bg, .point-decrease.my-bg, .point-decrease.id-bg {
    background-position: bottom right;
    background-size: 200%; } }

@media only screen and (max-device-width: 599px) {
  .point-decrease.vn-bg {
    background-position: bottom right;
    background-size: 180%; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .point-decrease.vn-bg {
    background-position: bottom right;
    background-size: 180%; } }

@media only screen and (max-device-width: 599px) {
  .point-decrease.my-bg h1 {
    font-size: 1.4em; } }

.point-exchange-info {
  width: 100%;
  height: 100px;
  background: #3A945E; }
  @media only screen and (max-device-width: 599px) {
    .point-exchange-info {
      height: 200px; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .point-exchange-info {
      height: 200px; } }
  .point-exchange-info .point-decrease {
    width: inherit;
    height: inherit;
    display: table; }
    @media only screen and (max-device-width: 599px) {
      .point-exchange-info .point-decrease {
        display: block;
        text-align: center; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .point-exchange-info .point-decrease {
        display: block;
        text-align: center; } }
    .point-exchange-info .point-decrease h1 {
      max-width: 60%;
      font-size: 1.5em;
      text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
      @media only screen and (max-width: 1000px) {
        .point-exchange-info .point-decrease h1 {
          max-width: 50%; } }
      @media only screen and (max-device-width: 599px) {
        .point-exchange-info .point-decrease h1 {
          vertical-align: top;
          max-width: 100%; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .point-exchange-info .point-decrease h1 {
          vertical-align: top;
          max-width: 100%; } }
    .point-exchange-info .point-decrease div.content-wrapper {
      display: table-cell;
      vertical-align: middle;
      width: inherit;
      height: inherit;
      padding: 0 30px;
      line-height: 1.1em;
      color: white; }
      @media only screen and (max-device-width: 599px) {
        .point-exchange-info .point-decrease div.content-wrapper {
          display: block;
          padding: 16px; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .point-exchange-info .point-decrease div.content-wrapper {
          display: block;
          padding: 16px; } }

.form-horizontal .control-label {
  width: 220px;
  text-align: right;
  font-weight: bold; }
  @media only screen and (max-device-width: 599px) {
    .form-horizontal .control-label {
      width: 100%;
      text-align: left;
      padding-bottom: 5px;
      float: none; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .form-horizontal .control-label {
      width: 100%;
      text-align: left;
      float: none; } }
  .form-horizontal .control-label.sp {
    text-align: left;
    font-size: 18px; }

.form-horizontal p.control-label {
  text-align: left; }

.form-horizontal .control-group {
  margin-bottom: 15px; }
  .form-horizontal .control-group .controls {
    margin-left: 260px; }
    @media only screen and (max-device-width: 599px) {
      .form-horizontal .control-group .controls {
        margin-left: 0; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .form-horizontal .control-group .controls {
        margin-left: 0; } }
    @media only screen and (max-device-width: 599px) {
      .form-horizontal .control-group .controls select.span2 {
        margin-bottom: 5px; } }
    .form-horizontal .control-group .controls > .radio:first-child, .form-horizontal .control-group .controls > .checkbox:first-child {
      padding-top: 0; }
    .form-horizontal .control-group .controls.sp {
      padding: 5px 0 0 0; }
    .form-horizontal .control-group .controls.span10 {
      margin-left: 0; }
  .form-horizontal .control-group.sp {
    margin-bottom: 10px; }
    .form-horizontal .control-group.sp .control-label {
      margin-right: 10px;
      padding: 0; }

.form-horizontal .radio {
  padding-top: 0; }

.form-horizontal.pointform .control-group label {
  padding-top: 0;
  margin-right: 1em;
  vertical-align: middle;
  text-align: left;
  width: initial;
  color: rgba(0, 0, 0, 0.54);
  line-height: 42px; }
  @media only screen and (max-device-width: 599px) {
    .form-horizontal.pointform .control-group label {
      line-height: 1.5em; } }

.form-horizontal.pointform .control-group .controls {
  margin-left: initial;
  vertical-align: middle;
  text-align: left;
  width: initial;
  color: #808080;
  line-height: 42px; }
  .form-horizontal.pointform .control-group .controls input {
    max-width: 500px;
    min-width: 250px;
    height: 35px;
    position: relative; }

.pointBoxSelect div {
  display: inline-block;
  padding: 1em;
  margin-bottom: 0.5em; }
  .pointBoxSelect div:last-child {
    padding-top: 1.5em;
    padding-left: 0; }

.pointBoxSelect h3 {
  display: inline-block;
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 0; }

.pointBoxSelect select {
  display: inline-block;
  color: rgba(0, 0, 0, 0.54);
  margin-bottom: 0;
  height: 35px; }

.pointBoxSelect span {
  top: 4px; }

.pointBoxSelect .help-block .cleaR {
  color: #FF4242;
  display: block;
  font-size: small;
  padding: 0 0 0 1em;
  position: relative;
  text-align: left;
  top: -5px; }

.point-exchange-step-header {
  margin: -2em -2em 2em -2em;
  padding: 2.8em 2em 3em 2em;
  text-align: center;
  color: white; }
  @media only screen and (max-device-width: 599px) {
    .point-exchange-step-header {
      margin: -1.2em -2em 2em -2em;
      padding: 2em; } }
  .point-exchange-step-header h2 {
    font-size: 2em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
    @media only screen and (max-device-width: 599px) {
      .point-exchange-step-header h2 {
        font-size: 24px; } }
  .point-exchange-step-header a:hover {
    color: #3A945E; }
  .point-exchange-step-header .point-exchange-step-container {
    width: 80%;
    margin: 2em auto 0; }
    .point-exchange-step-header .point-exchange-step-container img {
      width: 300px;
      display: inline-block;
      border-radius: 10px;
      vertical-align: top; }
      @media only screen and (max-device-width: 599px) {
        .point-exchange-step-header .point-exchange-step-container img {
          width: 100%; } }
    .point-exchange-step-header .point-exchange-step-container table {
      width: 550px;
      display: inline-block;
      margin-left: 30px; }
      @media only screen and (max-device-width: 599px) {
        .point-exchange-step-header .point-exchange-step-container table {
          width: 100%;
          margin-left: 0;
          margin-top: 2em; } }
    @media only screen and (max-device-width: 599px) {
      .point-exchange-step-header .point-exchange-step-container {
        width: 100%; } }
  .point-exchange-step-header table {
    text-align: left;
    border-spacing: 0;
    border-collapse: separate;
    margin: 0 auto;
    font-size: 16px; }
    .point-exchange-step-header table tr td {
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-top: 0;
      padding: 8px 10px; }
      .point-exchange-step-header table tr td:first-child {
        width: 100px;
        text-align: center;
        vertical-align: middle; }
      .point-exchange-step-header table tr td:last-child {
        border-left: 0; }
    .point-exchange-step-header table tr:first-child td:first-child {
      border: 1px solid rgba(255, 255, 255, 0.7);
      background: rgba(60, 154, 98, 0.2);
      -moz-border-top-left-radius: 10px;
      -webkit-border-top-left-radius: 10px;
      border-top-left-radius: 10px; }
    .point-exchange-step-header table tr:first-child td:last-child {
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-left: 0;
      -moz-border-top-right-radius: 10px;
      -webkit-border-top-right-radius: 10px;
      border-top-right-radius: 10px; }
    .point-exchange-step-header table tr:nth-child(2) td:first-child {
      background: rgba(60, 154, 98, 0.4); }
    .point-exchange-step-header table tr:nth-child(3) td:first-child {
      background: rgba(60, 154, 98, 0.55); }
    .point-exchange-step-header table tr:last-child td:first-child {
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-top: 0;
      background: rgba(60, 154, 98, 0.75);
      -moz-border-bottom-left-radius: 10px;
      -webkit-border-bottom-left-radius: 10px;
      border-bottom-left-radius: 10px; }
    .point-exchange-step-header table tr:last-child td:last-child {
      border: 1px solid rgba(255, 255, 255, 0.7);
      border-left: 0;
      border-top: 0;
      -moz-border-bottom-right-radius: 10px;
      -webkit-border-bottom-right-radius: 10px;
      border-bottom-right-radius: 10px; }
  .point-exchange-step-header.bg-voucher {
    background-image: url("../img/point/bg_point_exchange.png");
    background-size: cover;
    background-position: center bottom; }
  .point-exchange-step-header.bg-paypal {
    background-image: url("../img/point/bg_point_exchange_paypal.png");
    background-size: cover;
    background-position: center bottom; }
  .point-exchange-step-header.bg-starbucks {
    background-image: url("../img/point/bg_point_exchange.png");
    background-size: cover;
    background-position: center bottom; }

.pointExchangeTable {
  border-collapse: separate;
  width: 100%;
  background-color: #F5F5F5;
  box-shadow: 0 1px 0 #cfcfcf; }
  @media only screen and (max-device-width: 599px) {
    .pointExchangeTable {
      display: block; } }
  .pointExchangeTable a {
    color: #3A945E; }
  .pointExchangeTable tr td:last-child {
    text-align: right;
    padding-right: 10px; }
  .pointExchangeTable thead {
    padding: 10px;
    border-bottom: 1px solid #ededed;
    color: rgba(0, 0, 0, 0.54);
    line-height: 2px;
    font-size: large;
    font-weight: bold;
    text-align: center; }
    @media only screen and (max-device-width: 599px) {
      .pointExchangeTable thead {
        display: none; } }
    .pointExchangeTable thead tr td {
      padding: 10px;
      text-align: center; }
  @media only screen and (max-device-width: 599px) {
    .pointExchangeTable tbody {
      display: block; } }
  .pointExchangeTable tbody tr td {
    border-top: 1px solid #d7d7d7;
    background: #FFFFFF;
    padding: 10px 20px;
    color: rgba(0, 0, 0, 0.87);
    font-size: medium; }
    @media only screen and (max-device-width: 599px) {
      .pointExchangeTable tbody tr td {
        display: inline-block;
        border: none;
        width: 100%;
        padding: 5px 10px; } }
    @media only screen and (max-device-width: 599px) {
      .pointExchangeTable tbody tr td:first-child {
        color: #3A945E; } }
    @media only screen and (max-device-width: 599px) {
      .pointExchangeTable tbody tr td:nth-of-type(2) {
        font-weight: bold; } }
    @media only screen and (max-device-width: 599px) {
      .pointExchangeTable tbody tr td:nth-of-type(3) {
        width: 50%;
        text-align: left !important;
        border-bottom: 1px solid #d7d7d7; } }
    .pointExchangeTable tbody tr td:last-child {
      border-right: none !important;
      color: #FF4242;
      font-size: large; }
      @media only screen and (max-device-width: 599px) {
        .pointExchangeTable tbody tr td:last-child {
          width: 50%;
          border-bottom: 1px solid #d7d7d7;
          font-size: medium; } }
  .pointExchangeTable tfoot tr td {
    padding: 3px; }
  .pointExchangeTable tfoot tr.calcurateNumber td {
    background-color: #F5F5F5;
    font-weight: bold;
    line-height: 1.2em;
    color: white;
    font-size: x-large;
    padding: 5px 10px 10px 10px; }
    .pointExchangeTable tfoot tr.calcurateNumber td:first-child {
      font-size: 16px;
      text-align: right;
      background: #F5F5F5;
      color: rgba(0, 0, 0, 0.54);
      border-top: 1px solid #d7d7d7; }
      @media only screen and (max-device-width: 599px) {
        .pointExchangeTable tfoot tr.calcurateNumber td:first-child {
          border-top: none; } }
    .pointExchangeTable tfoot tr.calcurateNumber td:last-child {
      background: #F5F5F5;
      color: #FF4242;
      border-top: 1px solid #d7d7d7; }
      @media only screen and (max-device-width: 599px) {
        .pointExchangeTable tfoot tr.calcurateNumber td:last-child {
          border-top: none; } }
  .pointExchangeTable tfoot tr.comment {
    text-align: left;
    font-size: small;
    background-color: #B5BAC2; }
    .pointExchangeTable tfoot tr.comment td {
      text-align: left;
      line-height: 1.2em;
      padding: 0.5em;
      color: rgba(0, 0, 0, 0.87);
      border-bottom: none;
      -moz-border-radius: 0 0 4px 4px;
      -webkit-border-radius: 0 0 4px 4px;
      border-radius: 0 0 4px 4px; }
      @media only screen and (max-device-width: 599px) {
        .pointExchangeTable tfoot tr.comment td {
          padding: 1em; } }
    .pointExchangeTable tfoot tr.comment .fl {
      width: 59%;
      text-align: left;
      letter-spacing: -0.05em; }
      .pointExchangeTable tfoot tr.comment .fl span {
        position: relative;
        top: 1px;
        display: inline-block; }
      .pointExchangeTable tfoot tr.comment .fl b {
        font-weight: normal;
        position: relative;
        top: -2px;
        display: inline-block; }
      .pointExchangeTable tfoot tr.comment .fl p i {
        font-style: normal;
        margin-left: 10px;
        display: inline-block; }
      .pointExchangeTable tfoot tr.comment .fl p a {
        margin-bottom: 1px;
        display: inline-block;
        text-decoration: underline;
        color: rgba(0, 0, 0, 0.87); }
    .pointExchangeTable tfoot tr.comment .fr {
      width: 41%;
      text-align: right;
      letter-spacing: -0.03em; }
    .pointExchangeTable tfoot tr.comment .ico16 {
      margin-right: 5px; }
  .pointExchangeTable caption {
    display: none; }

.pointVoucherWarning {
  padding: 1em;
  margin: 0;
  background: url("../img/bg_pattern_line.png") top left repeat; }
  .pointVoucherWarning > div {
    background: #FFFFFF;
    padding: 1.3em; }
  .pointVoucherWarning h2.middleTitle {
    padding: 0 0 0.5em 0; }
  .pointVoucherWarning ul {
    font-size: small;
    line-height: inherit;
    margin-top: .5em; }
    .pointVoucherWarning ul li {
      margin-bottom: 0.3em; }
    .pointVoucherWarning ul span {
      width: 5%;
      display: inline-block;
      margin-left: 0;
      vertical-align: top; }
    .pointVoucherWarning ul p {
      width: 95%;
      display: inline-block; }

.pointVoucherStep dl {
  width: 40%;
  min-height: 218px;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.7);
  margin: 0 1em 1em 1em;
  vertical-align: top;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px; }
  .pointVoucherStep dl:nth-child(2) dt {
    background: rgba(60, 154, 98, 0.75); }
  @media only screen and (max-device-width: 599px) {
    .pointVoucherStep dl {
      width: auto;
      min-height: auto;
      margin-left: 0;
      margin-right: 0; } }
  .pointVoucherStep dl dt {
    padding: 1em;
    background: rgba(60, 154, 98, 0.2);
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7); }
  .pointVoucherStep dl dd {
    font-size: 14px;
    padding: 1.2em; }

.point-exchange-warning {
  width: 80%;
  text-align: left;
  font-size: 14px;
  margin: 0 auto; }
  @media only screen and (max-device-width: 599px) {
    .point-exchange-warning {
      width: 100% !important; } }
  .point-exchange-warning h3 {
    font-weight: 500;
    padding-bottom: 5px; }
  .point-exchange-warning ul li {
    padding-bottom: 5px; }
    .point-exchange-warning ul li:last-child {
      padding-bottom: 0; }
  .point-exchange-warning span {
    display: inline-block;
    margin-left: 0;
    vertical-align: top; }
  .point-exchange-warning p {
    width: 90%;
    display: inline-block; }

.point-exchange-mypoint-info {
  color: rgba(0, 0, 0, 0.54);
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 0.5em; }

.point-exchange-continue {
  clear: both;
  color: rgba(0, 0, 0, 0.54);
  text-align: center;
  font-weight: bold;
  font-size: 22px;
  padding-top: 2em;
  padding-bottom: 0.4em; }

.point-exchange-complete {
  clear: both;
  color: rgba(0, 0, 0, 0.54);
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding-top: 0.8em;
  padding-bottom: 0.4em; }

.resultPoint {
  font-size: 12px;
  text-align: center; }

.commentBox {
  font-size: 14px;
  margin: 0 auto; }

/* KR and Entropay */
.content-title {
  font-size: x-large;
  font-weight: bold;
  display: block;
  margin-bottom: .5em; }

.content-list {
  background: #f2f2f2;
  padding: 10px; }

/* Starbucks e-coupon detail page */
.starbucks-ecoupon-detail {
  width: 500px;
  height: 500px;
  background: #bf946b url("../img/point/starbucks_coupon_bg.png") no-repeat;
  margin: auto;
  color: #ffffff; }
  @media only screen and (max-device-width: 599px) {
    .starbucks-ecoupon-detail {
      width: 100vw;
      height: 100vw;
      margin: -1.2em; } }
  .starbucks-ecoupon-detail .ecoupon-img img {
    width: 100%;
    height: auto; }
  .starbucks-ecoupon-detail .ecoupon-detail {
    padding: 0 5px 0 30px;
    font-size: 10px; }
    @media only screen and (max-device-width: 599px) {
      .starbucks-ecoupon-detail .ecoupon-detail {
        font-size: 2vw;
        padding: 0 2em;
        margin-top: -5px; } }
    .starbucks-ecoupon-detail .ecoupon-detail .en {
      font-family: Avenir; }
    .starbucks-ecoupon-detail .ecoupon-detail .th {
      font-family: ecouponTH1; }
    .starbucks-ecoupon-detail .ecoupon-detail h1 {
      font-size: 4em;
      line-height: 1em; }
    .starbucks-ecoupon-detail .ecoupon-detail h2 {
      font-size: 2em;
      line-height: 1em;
      margin-top: 3px;
      font-weight: bold; }
    .starbucks-ecoupon-detail .ecoupon-detail h3 {
      font-family: ecouponTH2;
      font-size: 2.2em;
      line-height: 1em; }
    .starbucks-ecoupon-detail .ecoupon-detail p.en {
      font-size: 1em;
      line-height: 1.2em;
      position: relative; }
      .starbucks-ecoupon-detail .ecoupon-detail p.en.note {
        font-size: 1.1em;
        font-style: italic;
        margin-top: 3px;
        margin-bottom: 1px; }
    .starbucks-ecoupon-detail .ecoupon-detail p.th {
      font-size: 1.2em;
      line-height: 1.1em; }
    .starbucks-ecoupon-detail .ecoupon-detail p span {
      width: 1.5em;
      display: inline-block;
      position: absolute;
      left: -1.6em;
      top: 0; }
    .starbucks-ecoupon-detail .ecoupon-detail .qr-code {
      text-align: center; }
      @media only screen and (max-device-width: 599px) {
        .starbucks-ecoupon-detail .ecoupon-detail .qr-code {
          margin-top: -2.5em; } }
      .starbucks-ecoupon-detail .ecoupon-detail .qr-code img {
        max-width: 79px;
        height: auto;
        border: 1px solid #000000; }
        @media only screen and (max-device-width: 599px) {
          .starbucks-ecoupon-detail .ecoupon-detail .qr-code img {
            width: 10em; } }
      .starbucks-ecoupon-detail .ecoupon-detail .qr-code p {
        font-size: 1.1em;
        margin-top: -2px; }
        @media only screen and (max-device-width: 599px) {
          .starbucks-ecoupon-detail .ecoupon-detail .qr-code p {
            font-size: 1.3em; } }
    .starbucks-ecoupon-detail .ecoupon-detail .bottom {
      padding-right: 25px; }
      @media only screen and (max-device-width: 599px) {
        .starbucks-ecoupon-detail .ecoupon-detail .bottom {
          padding-right: 0; } }

/*------------------------- Quickpoll -------------------------*/
.frame {
  display: block;
  position: absolute;
  z-index: 1;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  border: 1px solid #d7d7d7;
  margin-left: 0 !important;
  margin-right: 0 !important; }
  .frame:hover, .frame:focus, .frame:active {
    border: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5); }

.frame-vote {
  margin: .8em auto; }
  .frame-vote a, .frame-vote a:hover, .frame-vote a:focus, .frame-vote a:active {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute; }
  .frame-vote .ico16 {
    padding: 0;
    margin: 0; }
  .frame-vote .ico16.quickpoll-vote, .frame-vote .ico16.quickpoll-result {
    margin: 4em auto 0.8em auto; }

.grid-list-type {
  background: #FFFFFF;
  margin-left: -0.55766666666666667%;
  margin-right: -0.55766666666666667%; }
  .grid-list-type .span3:nth-child(4n+1), .grid-list-type .span4:nth-child(3n+1) {
    margin-left: 0; }

.grid-list-type-item {
  position: relative;
  float: left;
  text-align: left;
  width: 32.2%;
  min-height: 150px;
  display: inline-block;
  padding: 0;
  margin-top: 0;
  margin-bottom: 1.6em;
  margin-left: .55766666666666667%;
  margin-right: .55766666666666667%; }
  @media only screen and (max-device-width: 599px) {
    .grid-list-type-item {
      width: 100%;
      margin-left: 0;
      margin-right: 0; } }
  .grid-list-type-item img {
    width: 100%; }
  .grid-list-type-item p {
    line-height: 0; }
  .grid-list-type-item:hover .frame-vote {
    opacity: 1; }
  .grid-list-type-item .frame:hover, .grid-list-type-item .frame:focus, .grid-list-type-item .frame:active {
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .grid-list-type-item .frame-vote {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    color: white;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out; }
    .grid-list-type-item .frame-vote * {
      color: white;
      display: inline-block;
      text-align: center;
      padding: 3.2em 0 0 0;
      text-decoration: none; }
    .grid-list-type-item .frame-vote a:focus, .grid-list-type-item .frame-vote a:active {
      color: #EFEFEF; }
    .grid-list-type-item .frame-vote span:last-child {
      position: relative;
      top: 50px;
      font-size: x-large;
      height: inherit; }
    .grid-list-type-item .frame-vote div {
      font-size: x-large;
      margin-top: 0.3em;
      display: block; }
  .grid-list-type-item a.frame {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
    .grid-list-type-item a.frame:hover, .grid-list-type-item a.frame:focus, .grid-list-type-item a.frame:active {
      border: 1px solid #55bf7f;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1); }

.progressList {
  margin: 0;
  padding: 0; }
  .progressList strong {
    position: relative; }
  .progressList li {
    list-style: none;
    margin: 0;
    padding: 0; }
  .progressList label {
    float: left;
    margin-right: 10px; }
  .progressList div.span2 {
    padding: 0 0 0 10px; }

.progress {
  background-color: #FFFFFF;
  border: 1px solid #F2F2F2;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#FBFBFB));
  background-image: -webkit-linear-gradient(top, #FFFFFF, #FBFBFB);
  background-image: -o-linear-gradient(top, #FFFFFF, #FBFBFB);
  background-image: linear-gradient(to bottom, #FFFFFF, #FBFBFB); }

.quickpoll-list-item {
  position: relative;
  float: left;
  width: 32.2%;
  margin: 0.8em 0.55766666666666667% 0.8em 0.55766666666666667%;
  padding: 0;
  display: inline-block;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3); }
  .quickpoll-list-item:hover .frame-vote {
    opacity: 1; }
  .quickpoll-list-item .frame:hover, .quickpoll-list-item .frame:focus, .quickpoll-list-item .frame:active {
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    -o-transition: all 0.45s ease-in-out;
    -ms-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; }
  .quickpoll-list-item .frame-vote {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    color: white;
    z-index: 100;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    transition: all 300ms ease-out; }
    .quickpoll-list-item .frame-vote a {
      color: white;
      text-align: center;
      display: inline-block; }
      .quickpoll-list-item .frame-vote a:hover, .quickpoll-list-item .frame-vote a:focus, .quickpoll-list-item .frame-vote a:active {
        text-decoration: none;
        color: white; }
    .quickpoll-list-item .frame-vote span:last-child {
      position: relative;
      top: 50px;
      font-size: x-large;
      height: inherit; }
    .quickpoll-list-item .frame-vote div {
      font-size: x-large;
      margin-top: 0.3em;
      display: block; }
  .quickpoll-list-item h3 {
    display: inline-block;
    color: #3A945E;
    font-size: 14px; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-list-item {
      width: 100%; } }

.quickpoll-list-item-delete {
  color: #b94a48;
  text-align: center;
  display: inline-style;
  background-color: #f2dede;
  width: auto;
  padding: 2em 4em;
  position: relative;
  text-align: center;
  border: 1px solid #eed3d7;
  top: 8em;
  left: 6em;
  z-index: 1; }

.quickpoll-list-sort {
  display: block;
  text-align: center;
  text-transform: capitalize;
  margin-top: 1em; }
  .quickpoll-list-sort a {
    height: inherit;
    vertical-align: middle;
    padding: 0;
    text-align: center;
    color: #323232; }
    .quickpoll-list-sort a.btn-link:hover, .quickpoll-list-sort a.btn-link:focus, .quickpoll-list-sort a.btn-link:active {
      text-decoration: none !important;
      color: #3A945E; }
  .quickpoll-list-sort span {
    height: inherit; }
  .quickpoll-list-sort .new-sort:after {
    content: "|";
    font-weight: normal;
    margin-left: 1em;
    margin-right: .5em; }

.quickpoll-btn-set div[class*="col-"] {
  padding-left: 0;
  padding-right: 0; }

@media only screen and (max-device-width: 599px) {
  .quickpoll-btn-set .col-xs-12 {
    text-align: center; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .quickpoll-btn-set .col-xs-12 {
    width: 50%; } }

@media only screen and (max-device-width: 599px) {
  .quickpoll-btn-set .col-xs-12 .btn {
    display: block; } }

@media only screen and (max-device-width: 599px) {
  .quickpoll-btn-set .col-xs-12 .fr {
    float: none;
    display: block;
    margin-top: 0.5em; } }

.quickpoll-title {
  display: block;
  word-wrap: break-word;
  text-align: center;
  padding-top: 1.4em;
  padding-bottom: 0; }
  .quickpoll-title a {
    color: #232323;
    display: block;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    line-height: 1.4em;
    text-align: center;
    min-height: 144px; }

.quickpoll-label {
  display: block;
  margin: 0;
  padding: 0; }
  .quickpoll-label.mobile a {
    text-decoration: none; }
    .quickpoll-label.mobile a:hover, .quickpoll-label.mobile a:active, .quickpoll-label.mobile a:focus, .quickpoll-label.mobile a:checked {
      text-decoration: none; }
    .quickpoll-label.mobile a > div {
      background-color: #F9F9F9;
      border-bottom: 1px solid #D0D0D0; }
      .quickpoll-label.mobile a > div .category-name {
        font-weight: bold;
        padding-left: 10px; }
    .quickpoll-label.mobile a:nth-child(2) > div {
      background-color: #FFFFFF; }

.quickpoll-label-group {
  font-size: small;
  margin-top: 1em; }
  .quickpoll-label-group label {
    display: inline-block; }
    .quickpoll-label-group label span {
      display: inline-block;
      vertical-align: bottom; }

.quickpoll-label-box {
  text-align: center; }

.quickpoll-label-item {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: #F5F5F5;
  padding: 2px 6px;
  font-size: 12px;
  display: block;
  margin: 0.5em 4em; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-label-item {
      margin: 0.5em 2em; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .quickpoll-label-item {
      margin: 0.5em 2em; } }
  .quickpoll-label-item .ico {
    margin-right: .3em; }
  .quickpoll-label-item label {
    display: inline-block !important;
    margin-right: .6em; }
    .quickpoll-label-item label:last-child {
      margin-right: 0; }

.quickpoll-category {
  width: 100%;
  padding: 0;
  list-style: none;
  background-color: #FFFFFF; }
  .quickpoll-category li {
    width: 12.5%;
    float: left;
    display: inline-block;
    position: relative;
    list-style: none;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    cursor: pointer; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-category li {
        width: 33.333333%; } }
  .quickpoll-category .accordion-group {
    border: 0;
    margin-left: -1px;
    margin-right: -1px; }
  .quickpoll-category .accordion-heading {
    border-top: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
    height: 42px;
    overflow: hidden;
    width: 100%;
    text-decoration: none; }
  .quickpoll-category .accordion-inner {
    border-top: 0; }
  .quickpoll-category .accordion-toggle {
    height: 42px;
    padding: 0;
    color: rgba(0, 0, 0, 0.54);
    font-weight: bold;
    text-decoration: none; }
    .quickpoll-category .accordion-toggle:hover {
      text-decoration: none;
      background-color: #f9f9f9; }
  .quickpoll-category .ico16.toggle-arrow {
    top: 5px; }

.quickpoll-category-menu li:nth-child(9n+1) {
  background-color: #F9D8C5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+1) {
      background-color: #A0EEF2; } }

.quickpoll-category-menu li:nth-child(9n+2) {
  background-color: #F5F5F5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+2) {
      background-color: #F9D8C5; } }

.quickpoll-category-menu li:nth-child(9n+3) {
  background-color: #A0EEF2; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+3) {
      background-color: #F5F5F5; } }

.quickpoll-category-menu li:nth-child(9n+4) {
  background-color: #F9D8C5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+4) {
      background-color: #F5F5F5; } }

.quickpoll-category-menu li:nth-child(9n+5) {
  background-color: #F5F5F5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+5) {
      background-color: #A0EEF2; } }

.quickpoll-category-menu li:nth-child(9n+6) {
  background-color: #A0EEF2; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+6) {
      background-color: #F9D8C5; } }

.quickpoll-category-menu li:nth-child(9n+7) {
  background-color: #F9D8C5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+7) {
      background-color: #F9D8C5; } }

.quickpoll-category-menu li:nth-child(9n+8) {
  background-color: #F5F5F5; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+8) {
      background-color: #F5F5F5; } }

.quickpoll-category-menu li:nth-child(9n+9) {
  background-color: #A0EEF2; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(9n+9) {
      background-color: #A0EEF2; } }

.quickpoll-category-menu li:nth-child(even+1) {
  background-color: #A0EEF2; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-category-menu li:nth-child(even+1) {
      background-color: #F9D8C5; } }

.quickpoll-category-menu li .frame {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: none;
  text-indent: -5000px; }
  .quickpoll-category-menu li .frame span {
    position: absolute;
    height: inherit;
    top: 50%;
    right: 0;
    left: 0;
    margin-top: -0.8em;
    color: white;
    font-size: large;
    text-align: center; }

.quickpoll-category-menu li:hover .frame {
  background-color: rgba(0, 0, 0, 0.6);
  color: #ea3825;
  text-indent: 0; }

#quickpoll-choices-container li {
  margin-bottom: 0.5em;
  display: block; }

#quickpoll-choices-container ol li div {
  display: inline-block;
  background-color: #FFFFFF;
  border: 1px solid #CCC;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border linear .2s,box-shadow linear .2s;
  -moz-transition: border linear .2s,box-shadow linear .2s;
  -o-transition: border linear .2s,box-shadow linear .2s;
  transition: border linear .2s,box-shadow linear .2s;
  padding-right: 3em; }
  #quickpoll-choices-container ol li div input {
    background-color: none;
    box-shadow: none;
    border: 0; }

#quickpoll-choices-container ol li .btn-danger {
  position: relative;
  right: 3.2em;
  padding: 5px 10px; }

#quickpoll-comment-container p {
  word-wrap: break-word; }

#quickpoll-answer-container {
  word-wrap: break-word; }

.quickpoll-reply-container textarea {
  margin: 20px 0 0 0; }

.quickpoll-reply-container ul.quickpoll-reply-comments {
  margin: 0 0 0 50px; }
  .quickpoll-reply-container ul.quickpoll-reply-comments li {
    list-style-image: url("../img/reply_comment.gif"); }

.quick-date {
  color: #6D6D6D;
  font-size: small; }

.quickpoll-visual-area {
  background-color: #3A945E;
  margin: -2em -2em 2em -2em;
  padding: 1.6em 2em 2em 2em;
  position: relative;
  text-align: center;
  color: white; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-visual-area {
      margin-top: -1.2em; } }
  .quickpoll-visual-area p span {
    height: 60px;
    padding-left: 1em;
    color: white;
    font-size: 1.6em;
    font-weight: bold;
    line-height: 0.9em; }
  .quickpoll-visual-area h2 {
    color: white;
    font-size: 2em;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-visual-area h2 {
        font-size: 24px; } }
  .quickpoll-visual-area h4 {
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
    color: rgba(255, 255, 255, 0.7); }
  .quickpoll-visual-area .quickpoll-guide {
    font-size: 0.9em; }

.quickpoll-image {
  background-color: #eaebeb;
  padding: 1em;
  display: none; }

.quickpoll-gray-box {
  padding: 0.9em;
  border-top: 1px solid #e7e7e7;
  background-color: #F5F5F5;
  color: #6D6D6D; }
  .quickpoll-gray-box td {
    vertical-align: middle; }

.quickpoll-content {
  position: relative; }
  .quickpoll-content .quickpoll-info-wrap {
    float: left;
    padding-left: 0; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-content .quickpoll-info-wrap {
        float: none; } }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .ico16 {
      display: inline-block;
      vertical-align: top; }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set label {
      font-size: 14px;
      font-weight: 400;
      display: inline-block;
      vertical-align: middle;
      padding: 0 10px;
      line-height: 1em;
      margin-top: 4px;
      border-right: 1px solid #101010;
      cursor: default; }
      .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set label:last-child {
        border-right: 0; }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-creator {
      display: inline-block;
      vertical-align: middle;
      border-right: 1px solid #101010;
      padding: 0 10px;
      line-height: 1em;
      font-size: 14px;
      font-weight: 700;
      margin-top: 4px; }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-fixed {
      float: left;
      font-size: 0; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-fixed {
          width: 100%; } }
      .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-fixed label {
        border-right: 1px solid #101010; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-fixed label {
            border-right: 0; } }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-flex {
      float: left;
      font-size: 0; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-flex {
          width: 100%; } }
      .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-flex label:last-child {
        border-right: 0; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-flex label:last-child {
            border-right: 1px solid #727272; } }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-content .quickpoll-info-wrap .quickpoll-info-set .quickpoll-info-flex label {
          border: 1px solid #727272;
          padding: 3px;
          border-radius: 5px;
          margin-right: 5px;
          margin-top: 15px;
          font-size: 12px;
          color: rgba(0, 0, 0, 0.54); } }
    .quickpoll-content .quickpoll-info-wrap .quickpoll-question {
      padding: 15px 0 25px;
      word-wrap: break-word; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-content .quickpoll-info-wrap .quickpoll-question {
          padding: 15px 0; } }
  .quickpoll-content .quickpoll-action-top {
    text-align: right;
    padding-right: 0; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-content .quickpoll-action-top {
        margin-bottom: 20px;
        text-align: left;
        padding-left: 0; } }
    .quickpoll-content .quickpoll-action-top .quickpoll-report {
      display: inline-block;
      position: relative; }
      .quickpoll-content .quickpoll-action-top .quickpoll-report .btn-report {
        line-height: 100%;
        font-size: 14px;
        background: #dfdfdf;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        -ms-border-radius: 3px;
        border-radius: 3px;
        width: 20px;
        height: 20px;
        margin-top: 2px;
        text-shadow: 0; }
        .quickpoll-content .quickpoll-action-top .quickpoll-report .btn-report .glyphicon {
          vertical-align: sub; }
    .quickpoll-content .quickpoll-action-top .dropdown-menu {
      position: absolute;
      top: 23px;
      left: -35px;
      right: -35px;
      min-width: auto;
      text-align: center;
      padding: 3px 10px; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-content .quickpoll-action-top .dropdown-menu {
          top: -2px;
          left: 22px;
          right: -92px; } }
      .quickpoll-content .quickpoll-action-top .dropdown-menu a {
        color: rgba(0, 0, 0, 0.87); }
        .quickpoll-content .quickpoll-action-top .dropdown-menu a:hover {
          color: #3A945E;
          text-decoration: none; }
  .quickpoll-content .quickpoll-graphic {
    position: absolute;
    bottom: 0;
    right: 100px; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-content .quickpoll-graphic {
        display: none; } }

/* Quickpoll Result Graph */
.quickpoll-result {
  border-top: 2px solid #282828;
  border-bottom: 1px solid #727272;
  /* voteResult : start */
  /* voteResult : end */ }
  .quickpoll-result .voteResult {
    padding: 2em 0 1em;
    color: rgba(0, 0, 0, 0.87);
    border-bottom: 1px dotted #727272; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-result .voteResult {
        padding: 1em 0; } }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-result .voteResult .col-md-12 {
        padding-left: 0;
        padding-right: 0; } }
    .quickpoll-result .voteResult [class*="voteProblem"] {
      display: inline-block;
      width: 100%;
      margin-bottom: 1em;
      line-height: 24px; }
      .quickpoll-result .voteResult [class*="voteProblem"] .choice-name {
        padding-right: 14px;
        word-wrap: break-word; }
        .quickpoll-result .voteResult [class*="voteProblem"] .choice-name a {
          text-decoration: underline; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteResult [class*="voteProblem"] .choice-name {
            padding-right: 0;
            padding-bottom: 5px;
            line-height: 1.3em; } }
      .quickpoll-result .voteResult [class*="voteProblem"] .demographic {
        background-color: #ebebeb;
        height: 24px; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic [class*="result-bar"] {
          height: 24px; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar1 {
          background-color: #38c8ef; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar2 {
          background-color: #4c94f7; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar3 {
          background-color: #23b26a; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar4 {
          background-color: #7cdea3; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar5 {
          background-color: #ffe883; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar6 {
          background-color: #fec86a; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar7 {
          background-color: #ff9eb5; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar8 {
          background-color: #ec6d8b; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar9 {
          background-color: #be78dd; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-bar10 {
          background-color: #dba6f4; }
        .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap {
          position: absolute;
          right: 0;
          bottom: 0; }
          @media only screen and (max-device-width: 599px) {
            .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap {
              bottom: 2px; } }
          .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap .result-num {
            text-align: right;
            padding-right: 8px; }
            @media only screen and (max-device-width: 599px) {
              .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap .result-num {
                font-size: smaller; } }
            .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap .result-num strong {
              font-weight: bold; }
            .quickpoll-result .voteResult [class*="voteProblem"] .demographic .result-num-wrap .result-num span {
              color: rgba(0, 0, 0, 0.54); }
  .quickpoll-result .voteDemographic {
    padding: 2em 0; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-result .voteDemographic {
        padding: 1em 0; } }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-result .voteDemographic .voteGender {
        margin-bottom: 1em; } }
    .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap, .quickpoll-result .voteDemographic .voteGender .gender-num-wrap {
      display: inline-block;
      vertical-align: middle; }
    .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap {
      width: 40px;
      height: 89px;
      position: relative;
      background-color: #ebebeb; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap {
          width: 28px;
          height: 63px; } }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap .gender-bar {
        width: 40px;
        margin: auto;
        position: absolute;
        bottom: 0;
        z-index: 998; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap .gender-bar {
            width: 28px; } }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap .gender-graphic {
        width: 42px;
        height: 92px;
        position: absolute;
        top: -1px;
        left: -1px;
        z-index: 999;
        background: url("/img/gp-quickpoll-gender.svg") no-repeat;
        background-size: 84px; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap .gender-graphic {
            width: 30px;
            height: 66px;
            top: -2px;
            background-size: 60px; } }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap.gender-male .gender-bar {
        background-color: #38c8ef; }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap.gender-male .gender-graphic {
        background-position: 0 0; }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap.gender-female .gender-bar {
        background-color: #ff9eb5; }
      .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap.gender-female .gender-graphic {
        background-position: -42px 0; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteDemographic .voteGender .gender-bar-wrap.gender-female .gender-graphic {
            background-position: -30px 0; } }
    .quickpoll-result .voteDemographic .voteGender .gender-num {
      font-size: smaller; }
    .quickpoll-result .voteDemographic .voteAge .age-group {
      display: inline-block;
      vertical-align: bottom;
      position: relative;
      width: 50px; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-result .voteDemographic .voteAge .age-group {
          width: 44px; } }
      .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap {
        background-color: #ebebeb;
        width: 30px;
        height: 50px;
        margin: 0 auto 5px;
        position: relative; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap {
            height: 40px; } }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap [class*="age-bar"] {
          width: 30px;
          position: absolute;
          bottom: 0; }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap .age-bar-1 {
          background-color: #38c8ef; }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap .age-bar-2 {
          background-color: #4c94f7; }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap .age-bar-3 {
          background-color: #23b26a; }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap .age-bar-4 {
          background-color: #7cdea3; }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-bar-wrap .age-bar-5 {
          background-color: #ffe883; }
      .quickpoll-result .voteDemographic .voteAge .age-group .age-num-wrap {
        width: 50px; }
        @media only screen and (max-device-width: 599px) {
          .quickpoll-result .voteDemographic .voteAge .age-group .age-num-wrap {
            width: 44px; } }
        .quickpoll-result .voteDemographic .voteAge .age-group .age-num-wrap .age-num {
          margin: auto; }
          .quickpoll-result .voteDemographic .voteAge .age-group .age-num-wrap .age-num strong {
            font-weight: bold;
            font-size: smaller; }
      .quickpoll-result .voteDemographic .voteAge .age-group .age-label {
        font-size: smaller; }
    .quickpoll-result .voteDemographic .deactive {
      opacity: 0.3; }
      .quickpoll-result .voteDemographic .deactive .gender-num, .quickpoll-result .voteDemographic .deactive .age-num {
        opacity: 0; }

.quickpoll-action {
  padding: 2em 0;
  position: relative; }
  .quickpoll-action .share-quickpoll {
    text-align: center; }
  .quickpoll-action .back-to-quickpoll {
    position: absolute;
    top: 2.5em;
    left: 0; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-action .back-to-quickpoll {
        position: unset;
        text-align: center;
        padding-top: 1em; } }
    .quickpoll-action .back-to-quickpoll .glyphicon {
      font-size: small;
      top: 0;
      margin-right: 5px;
      -webkit-transform: scaleX(-1);
      -moz-transform: scaleX(-1);
      -ms-transform: scaleX(-1);
      -o-transform: scaleX(-1);
      transform: scaleX(-1); }

.hint02 label {
  display: inline-block;
  margin-right: 10px;
  cursor: default; }
  @media only screen and (max-device-width: 599px) {
    .hint02 label {
      margin-bottom: 3px; } }
  .hint02 label .label {
    margin-right: 5px;
    padding: 2px 8px;
    text-transform: uppercase; }

.ranking .surveyList.table {
  margin: 0;
  padding: 0;
  border-bottom: none;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none; }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .ranking .surveyList.table thead {
      display: none; } }
  .ranking .surveyList.table tr:first-child {
    line-height: 1.4em; }
    .ranking .surveyList.table tr:first-child th {
      background-color: #bfc1bf;
      color: white;
      font-weight: normal;
      font-size: 1em;
      text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2); }
      .ranking .surveyList.table tr:first-child th:first-child {
        border-top-left-radius: 0; }
      .ranking .surveyList.table tr:first-child th:last-child {
        border-top-right-radius: 0; }
    .ranking .surveyList.table tr:first-child .ico16.separator-bar {
      float: right;
      position: relative;
      top: 3px; }
  .ranking .surveyList.table tr:last-child td {
    padding: 3px 8px;
    border-bottom: 1px solid #d7d7d7; }
  .ranking .surveyList.table tr td {
    padding: 3px 8px;
    border-bottom: 1px solid #e7e7e7; }
    .ranking .surveyList.table tr td:nth-child(2) {
      color: #3A945E; }
    .ranking .surveyList.table tr td a {
      word-break: break-word; }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .ranking .surveyList.table .country-flag span[class*="country"] {
      margin-right: 0; } }

.ranking.mobile {
  word-break: break-word; }

.ranking-top {
  border: 1px solid #55bf7f; }
  .ranking-top:hover, .ranking-top:focus, .ranking-top:active {
    display: none; }

@media only screen and (max-device-width: 599px) {
  #quickpoll-load-trigger {
    padding: 10px 0; }
  #quickpoll-age_cond-container select {
    width: 40%; } }

/* Quickpoll Comment */
.quickpoll-comment-form {
  margin-bottom: 1em; }
  @media only screen and (max-device-width: 599px) {
    .quickpoll-comment-form {
      margin-bottom: 0;
      padding: 1em 0;
      border-top: 1px solid #cccccc;
      border-bottom: 1px solid #cccccc; } }
  .quickpoll-comment-form .quickpoll-comment-input {
    width: 100%;
    margin-bottom: 0; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-comment-form .quickpoll-comment-input {
        width: 100%; } }
  .quickpoll-comment-form .quickpoll-comment-submit {
    float: right; }
    @media only screen and (max-device-width: 599px) {
      .quickpoll-comment-form .quickpoll-comment-submit {
        width: 100%;
        float: none;
        margin-top: 1em; } }

.quickpoll-comment-container li {
  border-bottom: 1px solid #cccccc;
  padding: 1em 0; }
  .quickpoll-comment-container li .comment-creator {
    font-weight: bold;
    font-size: 14px; }
  .quickpoll-comment-container li .comment-content {
    font-size: 14px;
    padding: 0.5em 0; }
  .quickpoll-comment-container li .comment-date {
    font-size: 13px;
    font-weight: 400;
    display: inline-block;
    vertical-align: middle;
    border-right: 1px solid #101010;
    padding-right: 10px;
    line-height: 1em;
    color: #999999; }
  .quickpoll-comment-container li .comment-report {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 0 6px;
    border-right: 1px solid #101010;
    line-height: 1em;
    color: #999999;
    font-size: 13px;
    background: none; }
    .quickpoll-comment-container li .comment-report:hover {
      text-decoration: underline; }
  .quickpoll-comment-container li .comment-reply {
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px 0 6px;
    line-height: 1em;
    color: #3A945E;
    font-size: 13px;
    background: none; }
    .quickpoll-comment-container li .comment-reply:hover {
      text-decoration: underline; }
  .quickpoll-comment-container li .reply-comment-field {
    margin-top: 1em;
    margin-bottom: 0; }
    .quickpoll-comment-container li .reply-comment-field .reply-comment-input {
      margin-top: 0;
      padding: 4px 15px;
      width: 100%; }
    .quickpoll-comment-container li .reply-comment-field .reply-comment-submit {
      float: right; }
      @media only screen and (max-device-width: 599px) {
        .quickpoll-comment-container li .reply-comment-field .reply-comment-submit {
          width: 100%;
          float: none;
          margin-top: 1em; } }
  .quickpoll-comment-container li .quickpoll-reply-comments li:last-child {
    border-bottom: 0; }
  .quickpoll-comment-container li .quickpoll-reply-comments .comment-report {
    border-right: 0; }

.quickpoll-comment-container .ico16[class*="country-"] {
  vertical-align: middle; }

/*------------------------- Trend Report -------------------------*/
.arrow-wrap {
  position: absolute;
  left: 50%;
  margin-left: -22px;
  bottom: 20px; }

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

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

.bounce {
  -moz-animation: bounce 2s infinite;
  -webkit-animation: bounce 2s infinite;
  animation: bounce 2s infinite; }

.trend-layout {
  position: relative; }
  @media only screen and (max-device-width: 599px) {
    .trend-layout {
      margin: -1.2em; } }
  .trend-layout .btn-trend {
    background-color: #C47845;
    padding: 13px 0;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -114px;
    width: 228px;
    bottom: 125px;
    text-decoration: none; }
    .trend-layout .btn-trend:hover, .trend-layout .btn-trend:active {
      opacity: 1;
      filter: alpha(opacity=100);
      text-decoration: none; }
    @media only screen and (max-device-width: 599px) {
      .trend-layout .btn-trend {
        bottom: 85px; } }
  .trend-layout .btn-red {
    background-color: #EB410B;
    opacity: 0.8;
    filter: alpha(opacity=80);
    padding: 13px 0;
    color: white;
    font-weight: 500;
    font-size: 18px;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -114px;
    width: 228px;
    bottom: 100px;
    text-decoration: none; }
    .trend-layout .btn-red:hover, .trend-layout .btn-red:active {
      opacity: 1;
      filter: alpha(opacity=100);
      text-decoration: none; }
    @media only screen and (max-device-width: 599px) {
      .trend-layout .btn-red {
        bottom: 80px; } }

.trend-header {
  padding: 0;
  background: url("../img/trend/asia/main-visual.png?ver20231113");
  background-position: top left;
  background-repeat: repeat-x;
  min-height: 560px;
  height: 560px;
  color: white;
  cursor: pointer;
  margin-bottom: 4em; }
  @media only screen and (max-device-width: 599px) {
    .trend-header {
      height: 460px;
      min-height: 460px;
      background-position: 960px -60px;
      margin-bottom: 2.4em; } }
  @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
    .trend-header {
      height: 460px;
      min-height: 460px;
      background-position: center center; } }
  @media only screen and (max-device-width: 599px) {
    .trend-header .span12 {
      padding: 1.2em; } }
  .trend-header p {
    clear: both;
    text-align: center;
    line-height: 1.4em;
    margin-top: 15px;
    margin-bottom: 45px;
    font-size: 34px;
    padding-top: 120px;
    margin-left: auto;
    margin-right: auto;
    width: 750px;
    color: #553011;
    font-weight: bold; }
    @media only screen and (max-device-width: 599px) {
      .trend-header p {
        margin: auto;
        padding-top: 30px;
        width: 80%;
        font-size: 25px; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .trend-header p {
        margin: auto;
        padding-top: 60px;
        width: 50%; } }
  .trend-header header {
    border-bottom: 1px dashed #553011;
    padding: 0.2em 0.8em;
    color: #000000;
    background-color: rgba(214, 182, 144, 0.9); }
    .trend-header header h1 {
      font-size: 24px;
      font-weight: normal; }
    .trend-header header .fr {
      line-height: 1em;
      position: relative;
      top: 1.2em;
      font-size: 12px;
      opacity: 0.8;
      filter: alpha(opacity=80); }
      @media only screen and (max-device-width: 599px) {
        .trend-header header .fr {
          float: none;
          display: block;
          top: 0; } }
      @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
        .trend-header header .fr {
          float: none;
          display: block;
          top: 0; } }
    @media only screen and (max-device-width: 599px) {
      .trend-header header .fl {
        float: none; } }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .trend-header header .fl {
        float: none; } }

.gray-effect {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
  filter: gray;
  -webkit-filter: grayscale(100%);
  -webkit-transition: all .6s ease;
  -webkit-backface-visibility: hidden; }

.trend-contents .grid-description {
  padding: 13px; }
  .trend-contents .grid-description h2 {
    font-size: 16px;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    width: inherit;
    min-width: inherit;
    min-height: 58px;
    margin-bottom: 15px; }
    @media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
      .trend-contents .grid-description h2 {
        font-size: 14px;
        min-height: 72px; } }
  .trend-contents .grid-description .category {
    color: #3A945E;
    font-size: small;
    font-weight: bold; }
  .trend-contents .grid-description .date {
    color: rgba(0, 0, 0, 0.54);
    font-size: small; }

.trend-contents .grid-list-type-item a.frame {
  border: 0;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  padding: 4.2em 0em 0em 0em;
  text-decoration: none;
  text-align: center; }
  .trend-contents .grid-list-type-item a.frame .trend-item-show {
    display: none; }
  .trend-contents .grid-list-type-item a.frame:hover, .trend-contents .grid-list-type-item a.frame:active {
    border: 0;
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 300ms ease-out; }
  .trend-contents .grid-list-type-item a.frame:hover .trend-item-show {
    display: block;
    transition: all 300ms ease-out; }
    .trend-contents .grid-list-type-item a.frame:hover .trend-item-show div {
      color: white;
      font-size: x-large;
      margin-top: 0.8em; }

/*------------------------- Alert Definition, Error Definition, Help Message Definition -------------------------*/
.alert {
  font-size: 14px;
  line-height: 1.4em; }
  .alert strong {
    display: inline-block; }
    .alert strong > ul li {
      line-height: 1.6em; }
  .alert .close {
    font-family: sans-serif;
    font-size: 25px;
    top: 0;
    right: 0; }
  .alert.white-box {
    background-color: #FFFFFF;
    color: rgba(0, 0, 0, 0.54);
    border: 0;
    font-size: 0.8em; }
    .alert.white-box h5 {
      margin-left: 0.2em; }
    .alert.white-box ol {
      margin-top: 2px;
      margin-left: 1.4em;
      list-style: initial; }
    .alert.white-box.big-box {
      border: 14px solid #e9e9e9;
      padding: 18px;
      font-size: 0.9em; }
      .alert.white-box.big-box h5 {
        font-size: large; }
  .alert.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
    padding: 20px 10px 20px 20px;
    margin-bottom: 1em; }
    .alert.alert-error .close {
      font-weight: 100;
      color: #323232;
      opacity: 0.9; }
      .alert.alert-error .close:hover {
        color: #323232;
        opacity: 1; }
    .alert.alert-error.tableError {
      padding: 10px;
      margin-bottom: 10px;
      margin-top: 0; }
  .alert.alert-info ol li {
    list-style-type: square;
    margin-left: 1em;
    padding-left: 0;
    font-size: small; }
  .alert.alert-success {
    margin-top: 20px; }

.warningText {
  border: 0;
  padding: 2px 5px;
  margin-top: 5px;
  margin-bottom: 0;
  background: none;
  color: #FF4242;
  font-size: 12px;
  text-align: left; }
  .warningText b {
    top: -1px;
    margin: 0 0 0 5px;
    font-weight: normal;
    position: relative; }
  .warningText .ico16 {
    margin-right: .5em; }
  .warningText.text-large b {
    margin: 0;
    top: 0; }
  .warningText.darkBack {
    text-shadow: none;
    margin-bottom: -5px; }

.control-group button[type="submit"] {
  padding: 10px 40px;
  font-size: medium;
  font-weight: bold; }

.control-group.alert.error {
  background: none;
  border-left: 0;
  border-right: 0;
  border-bottom: 0; }

.control-group.error > label {
  color: #FF4242; }

.control-group.error input, .control-group.error select, .control-group.error textarea, .control-group.error .checkbox, .control-group.error .radio, .control-group.error .quickpoll-choices {
  color: #FF4242;
  border-color: #FDD835 !important;
  box-shadow: none; }

.control-group.warning input, .control-group.warning select, .control-group.warning textarea, .control-group.warning .control-label {
  color: #FF4242; }

.help-inline {
  color: #FF4242;
  font-size: small;
  padding-left: 0; }
  .help-inline:before {
    content: url("../img/ico_error.svg");
    padding-right: 10px;
    vertical-align: middle; }
  .help-inline.sp {
    padding-top: 5px; }

.help-block {
  color: #FF4242; }

/*------------------------- ETC -------------------------*/
@media only screen and (max-device-width: 599px) {
  .settings .btn {
    width: 100%;
    padding: 0.5em 0;
    font-size: 16px;
    font-weight: bold;
    float: none;
    margin-top: 0.5em; } }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  .settings .btn {
    margin-top: 1em; } }

.opt-in-out-settings {
  padding-bottom: 3em; }
  .opt-in-out-settings .opt-in-out-description {
    font-size: small;
    margin: 10px 0; }
  .opt-in-out-settings .row {
    border-bottom: 1px solid #D0D0D0;
    padding: 0.5em 1em; }
    @media only screen and (max-device-width: 599px) {
      .opt-in-out-settings .row {
        padding: 0.5em 0; }
        .opt-in-out-settings .row:nth-child(2) {
          border-top: 2px solid #D0D0D0; } }
    .opt-in-out-settings .row.table-header {
      background: #F5F5F5;
      font-weight: bold;
      border-top: 1px solid #D0D0D0;
      border-bottom: 2px solid #D0D0D0; }
    .opt-in-out-settings .row .col {
      padding: 0; }
      .opt-in-out-settings .row .col.opt-in-out-type {
        font-weight: bold;
        line-height: 31px; }
      .opt-in-out-settings .row .col.opt-in-out-btn {
        text-align: center; }
        @media only screen and (max-device-width: 599px) {
          .opt-in-out-settings .row .col.opt-in-out-btn {
            text-align: right; } }
      .opt-in-out-settings .row .col.opt-in-out-msg {
        line-height: 31px;
        text-align: center; }
        @media only screen and (max-device-width: 599px) {
          .opt-in-out-settings .row .col.opt-in-out-msg {
            line-height: 1.5em;
            text-align: left;
            padding-top: 0.5em; } }

.support-list li {
  margin: 5px 0;
  padding: .8em;
  border: 1px solid #E5E5E5; }
  .support-list li li {
    border: 0;
    margin: 5px 0 5px 30px;
    padding: 0;
    list-style-type: decimal; }
    .support-list li li li {
      list-style-type: disc; }

.support-list p > a {
  color: #323232;
  font-size: large;
  font-weight: bold;
  height: 20px;
  vertical-align: middle;
  line-height: 1.2em;
  width: calc(100% - 51px);
  padding-top: 5px;
  float: right;
  text-align: left;
  display: inline-table; }

.support-list .alert {
  margin-bottom: 0; }

@media only screen and (min-device-width: 600px) and (max-device-width: 1170px) and (-webkit-min-device-pixel-ratio: 1) {
  #terms li {
    margin-bottom: -2px; } }

@media only screen and (max-device-width: 599px) {
  #terms li:first-child {
    width: 40%; } }

@media only screen and (max-device-width: 599px) {
  #terms li:last-child {
    width: 60%; } }

.terms {
  color: rgba(0, 0, 0, 0.54); }
  .terms h3 {
    color: rgba(0, 0, 0, 0.87);
    font-weight: bold;
    padding: 25px 0 5px 0; }
  .terms a {
    word-wrap: break-word; }
  .terms ul {
    padding-left: 1em;
    padding-top: 0.5em; }
    .terms ul li {
      padding-top: 5px; }
    .terms ul.unstyled {
      padding: 1em;
      margin: 10px 0;
      background-color: #E5E5E5; }

.separator {
  margin-left: -2em;
  margin-right: -2em;
  padding: 0em; }
  .separator.dotted {
    border-top: 1px dotted #adadad;
    height: 1px;
    margin-left: 0;
    margin-right: 0; }

/* Againt bootsrap 3.3.7 */
.collapse {
  display: block; }

/*------------------ Form Defin, Input Defin, Textarea Defin, Radio Defin, Checkbox Definition ------------------*/
form h3 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  line-height: 1.4em; }

form .row-fluid:nth-child(odd) {
  border: 1px solid #dfdfdf; }

form .row-fluid:last-child {
  border: none;
  padding: 0;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0; }

form table td {
  padding: 10px;
  border-bottom: 1px solid #efefef; }

textarea, input[type="password"], input[type="datetime"], input[type="datetime-local"],
input[type="date"], input[type="month"], input[type="time"], input[type="week"],
input[type="number"], input[type="email"], input[type="url"], input[type="search"],
input[type="tel"], input[type="color"], .uneditable-input {
  padding: 10px 15px;
  margin-bottom: 5px; }

input[type="email"], input[type="password"], input[type="button"], input[type="submit"] {
  width: 100%;
  height: 42px !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none !important; }

input[type="checkbox"] {
  margin: 6px 0 0 0; }

input[type="text"] {
  width: 100%;
  height: 42px !important;
  padding: 10px 15px;
  margin-bottom: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: none;
  box-shadow: none !important; }
  input[type="text"].input-xxlarge {
    width: 100%;
    padding: 10px 1.8%; }
  input[type="text"].sp {
    padding: 0 2px;
    width: 50px;
    vertical-align: middle;
    margin-bottom: 0; }

select {
  height: 42px; }

/*------------------------- Tooltip Definition -------------------------*/
.tooltip.right .tooltip-arrow {
  border-right-color: #eb410b; }

.tooltip-inner {
  background-color: #eb410b; }

.dark-tooltip + .tooltip > .tooltip-inner {
  background-color: black; }

.dark-tooltip + .tooltip.right .tooltip-arrow {
  border-right-color: black; }

.dark-tooltip + .tooltip > .tooltip-inner {
  text-align: left; }

/*------------------------- Modal Definition -------------------------*/
.modal {
  left: 50%;
  bottom: auto;
  /* offend modal.less */ }
  @media only screen and (max-device-width: 599px) {
    .modal {
      width: 100%;
      margin-left: auto; } }
  @media only screen and (max-device-width: 599px) {
    .modal.fade.in {
      top: 5%; } }
  .modal .modal-header {
    padding: 0.5em 1em; }
    .modal .modal-header h3 {
      color: rgba(0, 0, 0, 0.54);
      font-size: medium;
      font-weight: bold;
      display: inline-block; }
    .modal .modal-header .close {
      top: 2px;
      position: relative;
      font-size: 24pt;
      color: #565656;
      font-family: sans-serif; }
  .modal .modal-body {
    position: relative;
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    overflow-y: auto;
    overflow-x: hidden; }
    .modal .modal-body h2 {
      color: rgba(0, 0, 0, 0.87);
      font-size: x-large; }
    .modal .modal-body h3 {
      color: rgba(0, 0, 0, 0.87);
      white-space: normal;
      margin-bottom: 20px; }
    .modal .modal-body .boxStyle {
      position: relative; }
      .modal .modal-body .boxStyle h3 {
        padding: 0; }
  .modal .modal-footer {
    border: none !important; }

/*------------------------- Plugin Configuration -------------------------*/
.fb-page,
.fb-page span,
.fb-page span iframe[style] {
  width: 100% !important; }