.modal-header:before, .modal-footer:before, .header_main:before, .footer-bottom:before, .row:before, .btn-group:before, .form-red .input:before, .form-red .select:before, .form-red .-verify:before, .form-red .-psw-send:before, .form-red .verify-account:before, .thumb-list:before, .reissue-mag:before, .thumb-video:before, .side-avatar:before, .side-button:before, .pic-texts:before, .program-main:before, .mag-thumb:before, .collect-wrap .collect-video:before, .form-edm:before {
    content: '';
    display: table
}

.modal-header:after, .modal-footer:after, .header_main:after, .footer-bottom:after, .row:after, .btn-group:after, .form-red .input:after, .form-red .select:after, .form-red .-verify:after, .form-red .-psw-send:after, .form-red .verify-account:after, .thumb-list:after, .reissue-mag:after, .thumb-video:after, .side-avatar:after, .side-button:after, .pic-texts:after, .program-main:after, .mag-thumb:after, .collect-wrap .collect-video:after, .form-edm:after {
    content: '';
    display: table;
    clear: both
}

.d-block {
    display: block
}

.d-none {
    display: none
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

@media screen and (min-width: 481px) {
    ._visible-sm {
        display: none !important
    }
}

@media screen and (max-width: 481px) {
    ._hidden-sm {
        display: none !important
    }
}

._width-1200 {
    max-width: 1200px;
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto
}

    ._width-1200:before {
        content: '';
        display: table
    }

    ._width-1200:after {
        content: '';
        display: table;
        clear: both
    }

._width-500 {
    max-width: 500px;
    max-width: 31.25rem;
    margin-left: auto;
    margin-right: auto
}

    ._width-500:before {
        content: '';
        display: table
    }

    ._width-500:after {
        content: '';
        display: table;
        clear: both
    }

._width-224 {
    max-width: 224px;
    max-width: 14rem
}

@media screen and (max-width: 480px) {
    ._width-224 {
        max-width: 100%
    }
}

._height-80vh {
    min-height: calc(100vh - 255px)
}

@media screen and (max-width: 480px) {
    ._height-80vh {
        min-height: calc(100vh - 225px)
    }
}

._margin-bottom-30, .reissue-mag .mag, .form-red .-psw-send {
    margin-bottom: 30px !important
}

._margin-bottom-25 {
    margin-bottom: 25px !important
}

._margin-bottom-20 {
    margin-bottom: 20px !important;
    margin-bottom: 1.25rem !important
}

._margin-bottom-0 {
    margin-bottom: 0 !important
}

._padding-top-30 {
    padding-top: 30px !important;
    padding-top: 1.875rem !important
}

._padding-top-20 {
    padding-top: 20px !important;
    padding-top: 1.25rem !important
}

._padding-bottom-30 {
    padding-bottom: 30px !important;
    padding-bottom: 1.875rem !important;
    overflow: hidden
}

._padding-bottom-20, .radio-block {
    padding-bottom: 20px !important;
    padding-bottom: 1.25rem !important
}

._padding-bottom-15, .title-h2, .title-h3 {
    padding-bottom: 15px !important
}

._padding-bottom-0 {
    padding-bottom: 0px !important
}

@media screen and (max-width: 480px) {
    .mobile-pb-30 {
        padding-bottom: 30px !important
    }
}

._inline-block {
    display: inline-block !important
}

._center-block, .login-form .btn.-google img, .login-form .btn.-fb img, .btn.-google img, .btn.-fb img, img.member-img, .reissue-mag .mag img, .side-button > .logout button, .good-book img, .video-block, .video-block img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

    ._pull-right, .video-block > .caption > span, .form-edm .major h3 small, .program-alert.-alert .add {
        float: right !important
    }

._pull-left {
    float: left !important
}

._hide {
    display: none !important
}

._show {
    display: block !important
}

._invisible {
    visibility: hidden
}

._hidden {
    display: none !important
}

._list-unstyled {
    padding-left: 0;
    list-style: none
}

header.header, .login-form > legend, .btn-red, .btn-blue, .btn-grey, .btn-tag, .btn-download, .side-button > .index a:hover, .side-button > .index a:focus, .side-button > .index button:hover, .side-button > .index button:focus, .side-button > .logout a:hover, .side-button > .logout a:focus, .side-button > .logout button:hover, .side-button > .logout button:focus, .side-button > .index a.active, .aside-collapse a:hover, .aside-collapse a:focus, .aside-collapse .active > a {
    background: #CD0505
}

.btn-red, .btn-blue, .btn-grey, .btn-tag, .btn-download, .form-red .input input, .form-red .input select, .form-red .input textarea, .form-red .select input, .form-red .select select, .form-red .select textarea, img.member-img, .member-card, .alert-message .alert, #toast-container .alert, .alert-message .submit, #toast-container .submit, .good-book {
    border-radius: 2px
}

._responsive {
    font-size: calc(12px + 9 * ((100vw - 420px) / 860))
}

@media screen and (min-width: 1280px) {
    ._responsive {
        font-size: 21px
    }
}

@media screen and (max-width: 420px) {
    ._responsive {
        font-size: 12px
    }
}

._text-left {
    text-align: left
}

._text-center, h3.-line, .btn-red, .btn-blue, .btn-grey, .btn-tag, .pages-toolbar, .form-red .-company .divider, .progress-container > .progressbar > .caption, .yellow-box .aritcle, .yellow-box .video, .pie-chart .caption, .reissue-mag, .side-nav .fa, .side-button > .index a, .member-card.-empty-video p, .member-card.-empty-line p, .member-card.-empty-book p, .bookmark, .video-block .label, .video-block .title, .video-block > .caption > span, .program-alert .fa, .program-index .texts .fa {
    text-align: center
}

._text-right, .form-red .-subscriber .number, .pic-texts .texts .dt {
    text-align: right
}

._text-justify {
    text-align: justify
}

._text-nowrap {
    white-space: nowrap
}

._text-lowercase {
    text-transform: lowercase
}

._text-uppercase {
    text-transform: uppercase
}

._text-capitalize, .pages-toolbar .prev, .pages-toolbar .next, .video-block > .caption > time {
    text-transform: capitalize
}

._text-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

._text-underline, a.-grey {
    text-decoration: none
}

    ._text-underline:hover, a.-grey:hover, ._text-underline:focus, a.-grey:focus {
        text-decoration: underline
    }

._no-wrap {
    white-space: nowrap
}

._doctor {
    font-size: 18px
}

    ._doctor:before {
        font-family: 'FontAwesome';
        content: '\f19d';
        color: #CD0505
    }

._font16, .login-form .checkbox + label, .login-form .forgot-password a, .form-red ._checkbox-breakline, .checkbox + label, .checkbox .forgot-password a, .star-checkbox .starbox input + label, .reissue-mag .mag input + label, .form-edm .major h3 small {
    font-size: 16px;
    font-size: 1rem
}

._font18, .login-form, .login-form .input:before, .btn-red, .btn-blue, .btn-grey, .btn-tag, .form-red .alert, .form-red label, .thumb-list .caption, .pie-chart .caption, .side-avatar > .info .name, .alert-message .alert, #toast-container .alert, .big-list p {
    font-size: 18px;
    font-size: 1.125rem
}

    .login-form .js-close-login, .tile-item a {
        color: #ffffff;
        color: rgba(255,255,255,0.87)
    }

        .login-form .js-close-login:hover, .tile-item a:hover, .login-form .js-close-login:focus, .tile-item a:focus {
            color: #fff
        }

.progress-container > .progressbar > .js-progress, .grey-info .js-collapse-slide .fa, .carousel.program-main .active, .bookmark, .video-block, .video-block figure:after, .video-block:hover figure:before, .video-block .title, .video-block > .caption, .toggle-switch .round, .toggle-switch .round:before, .faq-collapse .dropdown:after, .js-collapse-slide.-icon:after {
    -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
    -o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
    transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1)
}

.header_top li, .header_top li a, .header_top li a:hover, .login-form > legend > p, .login-form > legend a:hover, .login-form > legend a:focus, .login-form .checkbox + label:before, .login-form .btn:hover, .login-form .btn:focus, .footer-bottom .link li, .footer-bottom .sitemap a, .footer-bottom .edm-form .mail-icon, .footer-bottom h6, .btn:hover, .btn:focus, .checkbox + label:before, .star-checkbox .starbox input:checked + label, .star-checkbox .starbox:hover input:checked + label, .yellow-box .aritcle, .yellow-box .video, .side-button > .index a, .side-button > .index button, .side-button > .logout a, .side-button > .logout button, .aside-collapse .dropdown > a:after, .aside-collapse .second a, .alert-message .alert, #toast-container .alert {
    color: #fff
}

._colorRed, .header_main > .header-right li a, .login-form .input:before, h1, .h1, .title-h3, .form-red .alert, .form-red .-subscriber .number, .progress-container > .progressbar > .caption em, .reissue-mag .mag p, .member-card .title, .pic-texts .pic .edit .fa, .big-number .huge em, .collect-table a:hover, .collect-table a:focus, .learning-table a:hover, .learning-table a:focus, .big-list em, .fb-post a:hover, .fb-post a:focus, .button-delete:hover, .button-delete:focus, .program-alert > .time, .program-index .texts > .time {
    color: #CD0505
}

    ._colorBlue, h1.-blue, .h1.-blue, .true, .reissue-mag .mag input:checked + label figure:before, .form-edm .major h3 small, .sample-img p {
        color: #0597CD
    }

._colorOrange, .false, .helper-orange {
    color: #F90
}

._colorGrey {
    color: #787878
}

._img-responsive, img, .footer-bottom .link img, .member-row .md img, .index-ad img, .carousel.-member-index img, .carousel.program-main img {
    display: block;
    max-width: 100%;
    height: auto
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

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

audio, canvas, progress, video {
    display: inline-block;
    vertical-align: baseline
}

    audio:not([controls]) {
        display: none;
        height: 0
    }

[hidden], template {
    display: none
}

a {
    background-color: transparent
}

    a:active {
        outline: 0
    }

    a:hover {
        outline: 0
    }

abbr[title] {
    border-bottom: 1px dotted
}

b, strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 1em 40px
}

hr {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code, kbd, pre, samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button, select {
    text-transform: none
}

button, html input[type="button"], input[type="reset"], input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

    button[disabled], html input[disabled] {
        cursor: default
    }

    button::-moz-focus-inner, input::-moz-focus-inner {
        border: 0;
        padding: 0
    }

input {
    line-height: normal
}

    input[type="checkbox"], input[type="radio"] {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding: 0
    }

    input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
        height: auto
    }

    input[type="search"] {
        -webkit-appearance: textfield;
        -webkit-box-sizing: content-box;
        box-sizing: content-box
    }

        input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
            -webkit-appearance: none
        }

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: bold
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

td, th {
    padding: 0
}

.-table-responsive {
    overflow-x: auto;
    min-height: 0.01%
}

@media screen and (max-width: 480px) {
    .-table-responsive {
        width: 100%;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar
    }

        .-table-responsive > .-table > thead > tr > th, .-table-responsive > .-table > thead > tr > td, .-table-responsive > .-table > tbody > tr > th, .-table-responsive > .-table > tbody > tr > td, .-table-responsive > .-table > tfoot > tr > th, .-table-responsive > .-table > tfoot > tr > td {
            white-space: nowrap
        }
}

body {
    -webkit-backface-visibility: hidden
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }

    .animated.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }

    .animated.bounceIn, .animated.bounceOut {
        -webkit-animation-duration: .75s;
        animation-duration: .75s
    }

    .animated.flipOutX, .animated.flipOutY {
        -webkit-animation-duration: .75s;
        animation-duration: .75s
    }

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1)
    }

    10%,20% {
        -webkit-transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -webkit-transform: scale(1) rotate(0)
    }
}

@keyframes tada {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    10%,20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg)
    }

    30%,50%,70%,90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg)
    }

    40%,60%,80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg)
    }

    100% {
        -webkit-transform: scale(1) rotate(0);
        transform: scale(1) rotate(0)
    }
}

.tada {
    -webkit-animation-name: tada;
    animation-name: tada
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@keyframes fadeInDownBig {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px)
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

.fadeInDownBig {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig
}

@-webkit-keyframes fadeInLeftBig {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateX(-2000px)
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@keyframes fadeInLeftBig {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateX(-2000px);
        transform: translateX(-2000px)
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }
}

.fadeInLeftBig {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig
}

.modal-open {
    overflow: hidden
}

.modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

    .modal.fade .modal-dialog {
        -webkit-transform: translate(0, -25%);
        -ms-transform: translate(0, -25%);
        transform: translate(0, -25%);
        -webkit-transition: -webkit-transform 0.3s ease-out;
        transition: -webkit-transform 0.3s ease-out;
        -o-transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out;
        transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out
    }

    .modal.in .modal-dialog {
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #FFF;
    border-radius: 2px;
    -webkit-box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    box-shadow: 0 3px 9px rgba(0,0,0,0.5);
    outline: 0
}

    .modal-content .close {
        position: absolute;
        top: -36px;
        right: -50px;
        background: #dedede;
        border-radius: 50%;
        color: #000000;
        color: rgba(0,0,0,0.87);
        cursor: pointer
    }

        .modal-content .close img {
            margin-right: auto;
            margin-left: auto
        }

        .modal-content .close:hover {
            color: white
        }

    .modal-content img {
        max-width: 100%
    }

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000
}

    .modal-backdrop.fade {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    .modal-backdrop.in {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
        opacity: .5
    }

.modal-header {
    padding: 0;
    border-bottom: 1px solid black
}

    .modal-header .close {
        margin-top: -2px
    }

.modal-title {
    margin: 0;
    line-height: 1.5
}

.modal-body {
    position: relative;
    padding: 0
}

.modal-footer {
    padding: 0;
    text-align: right;
    border-top: 1px solid black
}

    .modal-footer .btn + .btn {
        margin-left: 5px;
        margin-bottom: 0
    }

    .modal-footer .btn-group .btn + .btn {
        margin-left: -1px
    }

    .modal-footer .btn-block + .btn-block {
        margin-left: 0
    }

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

@media (max-width: 480px) {
    .modal-content .close {
        position: fixed;
        top: .25rem;
        right: .25rem
    }
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 660px;
        margin: 30px auto
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0,0,0,0.5);
        box-shadow: 0 5px 15px rgba(0,0,0,0.5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 660px
    }
}

*, *:before, *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, select, textarea, p, th, td, object {
    padding: 0;
    margin: 0
}

body {
    font-size: 16px;
    font-family: Arial, Microsoft JhengHei, \5FAE\8EDF\6B63\9ED1\9AD4, LiHei Pro, \5137\9ED1\9AD4, PMingLiu, \65B0\7D30\660E\9AD4, sans-serif;
    position: relative
}

ul, ol, li {
    list-style-type: none;
    list-style-image: none
}

h1, h2, h3, h4, h5, h6 {
    line-height: 150%
}

h1, .h1 {
    font-size: 32px;
    font-size: 2rem
}

h2, .h2 {
    font-size: 24px;
    font-size: 1.5rem
}

h3, .h3 {
    font-size: 18px;
    font-size: 1.125rem
}

h4, .h4 {
    font-size: 19.2px;
    font-size: 1.2rem
}

h5, .h5 {
    font-size: 16px;
    font-size: 1rem
}

a {
    text-decoration: none;
    outline: none;
    color: #CD0505
}

    a:hover, a:focus {
        text-decoration: underline;
        color: #B40505;
        outline: none
    }

    a.-grey {
        margin-left: 4px;
        margin-left: .25rem;
        color: #666
    }

.list-disc {
    padding-left: 22px;
    font-size: 14px;
    color: #787878
}

    .list-disc li {
        margin-bottom: 10px;
        list-style: disc
    }

@media screen and (max-width: 480px) {
    body {
        padding-top: 60px
    }

    a.-grey {
        display: block;
        text-align: right
    }
}

.-nav-fixed {
    overflow: hidden
}

    .-nav-fixed .main-content:before {
        content: '';
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 16;
        background: #000000;
        background: rgba(0,0,0,0.75)
    }

header.header {
    position: relative;
    z-index: 1001;
    border-bottom: 3px solid #CD0505
}

@media screen and (max-width: 480px) {
    header.header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0
    }
}

.header_top {
    position: relative;
    z-index: inherit;
    padding-right: 16px;
    padding-right: 1rem;
    padding-left: 16px;
    padding-left: 1rem;
    overflow: hidden;
    background: #CD0505;
    line-height: 32px;
    line-height: 2rem;
    font-size: 14.4px;
    font-size: 0.9rem;
    color: #fff
}

    .header_top ul {
        float: right;
        margin-right: 0
    }

    .header_top li, .header_top li a {
        float: left;
        margin-left: 8px;
        margin-left: 0.5rem
    }

        .header_top li a:hover {
            text-decoration: underline
        }

@media screen and (max-width: 1024px) {
    .header_top {
        padding-right: 1rem;
        padding-left: 1rem
    }
}

@media screen and (max-width: 640px) {
    .header_top, .header_top li {
        font-size: .8rem
    }

        .header_top li {
            margin-left: .25rem
        }
}

@media screen and (max-width: 480px) {
    .header_top {
        display: none
    }
}

.header_main {
    position: relative;
    z-index: inherit;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-right: 16px;
    padding-right: 1rem;
    padding-left: 16px;
    padding-left: 1rem;
    height: 90px;
    background: #fff
}

    .header_main > .bwcom_logo {
        -ms-flex-item-align: center;
        align-self: center
    }

        .header_main > .bwcom_logo a img {
            max-width: 100%
        }

    .header_main > .header-right {
        position: absolute;
        top: 50%;
        right: 0;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%)
    }

        .header_main > .header-right li {
            display: inline-block;
            margin-right: 8px;
            margin-right: .5rem;
            cursor: pointer
        }

            .header_main > .header-right li + li {
                margin-right: 16px;
                margin-right: 1rem
            }

            .header_main > .header-right li a {
                font-size: 13px
            }

@media screen and (max-width: 480px) {
    .header_main {
        height: 56px;
        border-top: 3px solid #CD0505
    }

        .header_main li:nth-of-type(2) {
            display: none
        }

        .header_main > .header-right {
            display: block !important
        }

        .header_main > .bwcom_logo {
            text-align: center
        }

            .header_main > .bwcom_logo a img {
                margin: 0 auto;
                max-width: 70%
            }
}

.header_main .burger {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 16px;
    left: 1rem;
    min-width: 32px;
    min-width: 2rem;
    min-height: 40px;
    min-height: 2.5rem
}

    .header_main .burger:before, .header_main .burger:after, .header_main .burger span {
        display: block;
        margin: 3px auto;
        width: 8vw;
        border-top: 4px solid #CD0505;
        border-top: 0.25rem solid #CD0505;
        -webkit-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out
    }

    .header_main .burger:before, .header_main .burger:after {
        content: ''
    }

    .header_main .burger:before {
        top: 0
    }

    .header_main .burger span {
        top: 11.2px;
        top: .7rem
    }

    .header_main .burger:after {
        top: 22.4px;
        top: 1.4rem
    }

    .header_main .burger.-cross:before, .header_main .burger.-cross:after, .header_main .burger.-cross span {
        position: absolute
    }

    .header_main .burger.-cross > span {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    .header_main .burger.-cross:before {
        top: 22.4px;
        top: 1.4rem;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    .header_main .burger.-cross:after {
        top: 22.4px;
        top: 1.4rem;
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }

@-webkit-keyframes fixedTop {
    from {
        top: -172px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        top: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@keyframes fixedTop {
    from {
        top: -172px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    to {
        top: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

.header.-top {
    position: fixed;
    top: 0;
    z-index: 1001;
    width: 100%;
    -webkit-animation-name: fixedTop;
    animation-name: fixedTop;
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

    .header.-top .header_main {
        height: 70px
    }

@media screen and (max-width: 480px) {
    .header.-top .header_main {
        height: 56px
    }
}

.ie9 .header_main > .bwcom_logo, .ie8 .header_main > .bwcom_logo {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.header-sprite {
    background-image: url(../images/header/sprite.png)
}

.header__burger {
    background-position: 0px -39px;
    width: 25px;
    height: 25px
}

.header__member {
    background-position: -25px -39px;
    width: 25px;
    height: 25px
}

.header__search {
    background-position: -50px -39px;
    width: 25px;
    height: 25px
}

.header__title {
    background-position: 0px 0px;
    width: 234px;
    height: 39px
}

.header__google {
    width: 85.33px;
    max-width: 100%;
    height: 26px
}

.header__facebook {
    width: 86.33px;
    max-width: 100%;
    height: 17.33px
}

.login-wrap {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    background: transparent;
    z-index: 1003
}

@media screen and (max-width: 480px) {
    .login-wrap {
        overflow-y: auto
    }
}

.login-overlay {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    overflow: hidden;
    background: #000000;
    background: rgba(0,0,0,0.87)
}

.login-form {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1002;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 5px
}

    .login-form:before {
        content: '';
        display: table
    }

    .login-form:after {
        content: '';
        display: table;
        clear: both
    }

    .login-form .js-close-login {
        position: absolute;
        top: -10px;
        right: -15px;
        cursor: pointer;
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%)
    }

    .login-form > legend {
        padding-top: 32px;
        padding-top: 2rem;
        padding-bottom: 32px;
        padding-bottom: 2rem;
        width: 100%;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px
    }

        .login-form > legend > p {
            padding-top: 20px
        }

        .login-form > legend a {
            text-decoration: underline;
            color: #ffffff;
            color: rgba(255,255,255,0.87)
        }

    .login-form > .inside {
        padding: 32px;
        padding: 2rem;
        background: #F2F5F8;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px
    }

    .login-form .input {
        position: relative;
        margin-bottom: 24px;
        margin-bottom: 1.5rem
    }

        .login-form .input:before {
            content: '';
            display: table
        }

        .login-form .input:after {
            content: '';
            display: table;
            clear: both
        }

        .login-form .input input {
            padding-right: 16px;
            padding-right: 1rem;
            padding-left: 48px;
            padding-left: 3rem;
            width: 100%;
            height: 48px;
            height: 3rem;
            line-height: 48px;
            line-height: 3rem;
            border-top: 1px solid #CD0505;
            border-bottom: 1px solid #CD0505;
            border-right: 2px solid #CD0505;
            border-left: 2px solid #CD0505;
            border-radius: 5px;
            outline: none
        }

        .login-form .input:before {
            font-family: 'FontAwesome';
            display: block;
            position: absolute;
            top: 15px;
            left: 16px;
            left: 1rem;
            width: 18px;
            width: 1.125rem;
            text-align: center
        }

        .login-form .input.-email:before {
            content: "\f0e0"
        }

        .login-form .input.-password:before {
            content: "\f023"
        }

        .login-form .input:last-child {
            margin-bottom: 0
        }

    .login-form .checkbox {
        display: none
    }

        .login-form .checkbox + label {
            color: #787878;
            cursor: pointer
        }

            .login-form .checkbox + label:before {
                content: '\a0';
                display: inline-block;
                margin-right: 3.2px;
                margin-right: .2rem;
                width: 16px;
                width: 1rem;
                height: 16px;
                height: 1rem;
                line-height: 1;
                text-indent: 2.4px;
                text-indent: .15rem;
                background: #787878;
                border-radius: .2rem
            }

        .login-form .checkbox:checked + label:before {
            content: '\2713'
        }

    .login-form .forgot-password a {
        text-decoration: underline;
        color: #787878
    }

        .login-form .forgot-password a:hover, .login-form .forgot-password a:focus {
            color: #333
        }

    .login-form .-line {
        background: #F2F5F8;
        color: #787878
    }

        .login-form .-line:before, .login-form .-line:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 25%;
            border-top: 1px solid #CD0505
        }

        .login-form .-line:before {
            left: 0
        }

        .login-form .-line:after {
            right: 0
        }

    .login-form .btn {
        border-radius: 5px;
        line-height: 48px;
        line-height: 3rem;
        color: #ffffff;
        color: rgba(255,255,255,0.87)
    }

        .login-form .btn.-block {
            display: block
        }

        .login-form .btn.-red {
            background: #CD0505
        }

            .login-form .btn.-red:hover, .login-form .btn.-red:focus {
                background: #FA0505
            }

        .login-form .btn.-google, .login-form .btn.-fb {
            width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2));
            padding-top: 16px;
            padding-top: 1rem;
            padding-bottom: 16px;
            padding-bottom: 1rem;
            height: 54px
        }

            .login-form .btn.-google:nth-child(1n), .login-form .btn.-fb:nth-child(1n) {
                float: left;
                margin-right: 16px;
                margin-right: 1rem;
                clear: none
            }

            .login-form .btn.-google:last-child, .login-form .btn.-fb:last-child {
                margin-right: 0
            }

            .login-form .btn.-google:nth-child(2n), .login-form .btn.-fb:nth-child(2n) {
                margin-right: 0;
                float: right
            }

            .login-form .btn.-google:nth-child(2n + 1), .login-form .btn.-fb:nth-child(2n + 1) {
                clear: both
            }

        .login-form .btn.-google {
            background: #DD4C3B url("../images/header/google2.png") no-repeat center center
        }

            .login-form .btn.-google:hover, .login-form .btn.-google:focus {
                background-color: #FE5E4b
            }

        .login-form .btn.-fb {
            background: #3162A2 url("../images/header/fb2.png") no-repeat center center
        }

            .login-form .btn.-fb:hover, .login-form .btn.-fb:focus {
                background-color: #3B76C2
            }

        .login-form .btn .header-sprite {
            margin: 0 auto
        }

    .login-form .verify-notyet {
        padding-bottom: 24px;
        padding-bottom: 1.5rem;
        font-size: 16px;
        font-size: 1rem;
        color: #F90
    }

        .login-form .verify-notyet:before {
            font-family: 'FontAwesome';
            content: '\f071';
            padding-right: 8px;
            padding-right: .5rem
        }

@media screen and (max-width: 480px) {
    .login-form {
        height: 100%
    }

        .login-form .-google {
            background-image: url("../images/header/google.png");
            background-size: 50%
        }

        .login-form .-fb {
            background-image: url("../images/header/fb.png");
            background-size: 50%
        }

        .login-form .js-close-login {
            top: 8px;
            right: 8px;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0)
        }

            .login-form .js-close-login .fa-3x {
                font-size: 2rem
            }
}

@media screen and (max-width: 360px) {
    .login-form .-line:before, .login-form .-line:after {
        width: 16%
    }
}

.right-alert {
    position: relative;
    margin-bottom: 1px;
    padding: 16px 0;
    padding: 1rem 0;
    background-color: #CD0505;
    text-align: center;
    color: #FFF
}

    .right-alert > .close {
        position: absolute;
        top: 4px;
        top: .25rem;
        right: 8px;
        right: .5rem;
        font-size: 24px;
        font-size: 1.5rem
    }

    .right-alert > .text a {
        color: #FFF;
        text-decoration: underline
    }

.login-slider a {
    position: relative;
    display: block
}

    .login-slider a:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #ffffff;
        background: rgba(255,255,255,0.5)
    }

    .login-slider a.slick-current:before {
        background: transparent
    }

.login-slider img {
    display: block;
    max-width: 100%
}

.login-slider .figcaption {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 0 30px;
    line-height: 80px;
    background: #000000;
    background: rgba(0,0,0,0.5);
    color: #FFF;
    font-size: 32px;
    font-size: 2rem
}

.login-slider .slick-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    padding: 8px 16px;
    padding: .5rem 1rem;
    background: #000000;
    background: rgba(0,0,0,0.5);
    border: 0;
    font-size: 32px;
    font-size: 2rem;
    color: white;
    cursor: pointer
}

    .login-slider .slick-arrow:hover, .login-slider .slick-arrow:focus {
        background: #000000;
        background: rgba(0,0,0,0.87)
    }

.login-slider .slick-prev {
    left: 0
}

.login-slider .slick-next {
    right: 0
}

.login-slider ~ .footer-wrap {
    margin-top: 0
}

@media screen and (min-width: 1440px) {
    .login-slider img {
        min-width: 1200px
    }
}

@media screen and (max-width: 768px) {
    .login-slider a:before {
        background: transparent
    }
}

@media screen and (max-width: 480px) {
    .login-slider .figcaption {
        padding: 9px 15px;
        line-height: 1.2;
        font-size: 18px
    }
}

.footer-wrap {
    background: #CD0505;
    margin-top: 30px;
    margin-top: 1.875rem;
    padding: 33.76px 16px;
    padding: 2.11rem 1rem
}

@media screen and (max-width: 640px) {
    .footer-wrap {
        padding-bottom: 20px
    }
}

@media screen and (max-width: 480px) {
    .footer-wrap {
        padding-top: 20px
    }
}

.footer-bottom > .left, .footer-bottom > .right {
    width: calc(99.9% * 1/2)
}

    .footer-bottom > .left:nth-child(1n), .footer-bottom > .right:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .footer-bottom > .left:last-child, .footer-bottom > .right:last-child {
        margin-right: 0
    }

    .footer-bottom > .left:nth-child(0n), .footer-bottom > .right:nth-child(0n) {
        float: right
    }

.footer-bottom .link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 8px;
    margin-bottom: .5rem
}

    .footer-bottom .link li {
        margin-right: 16px;
        margin-right: 1rem
    }

    .footer-bottom .link a {
        display: block
    }

.footer-bottom .sitemap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .footer-bottom .sitemap li {
        padding-right: 10px
    }

    .footer-bottom .sitemap a {
        line-height: 28px;
        line-height: 1.75rem;
        font-size: 12.8px;
        font-size: .8rem
    }

.footer-bottom .edm-form {
    position: relative;
    margin-bottom: 8px;
    margin-bottom: .5rem;
    text-align: right
}

    .footer-bottom .edm-form .mail-icon {
        position: relative;
        top: 8px;
        margin-right: 8px;
        margin-right: .5rem;
        line-height: 16px;
        line-height: 1rem;
        font-size: 40px
    }

    .footer-bottom .edm-form .input, .footer-bottom .edm-form .submit {
        padding: 0;
        border: 1px solid #AAA;
        height: calc(2rem + 2px);
        line-height: 32px;
        line-height: 2rem;
        outline: 0
    }

    .footer-bottom .edm-form .input {
        padding-right: 152px;
        padding-right: 9.5rem;
        padding-left: 16px;
        padding-left: 1rem;
        width: 75%
    }

    .footer-bottom .edm-form .submit {
        position: absolute;
        right: 0;
        padding: 0 16px;
        padding: 0 1rem;
        background: #AAA
    }

.footer-bottom h6 {
    line-height: 28px;
    line-height: 1.75rem;
    font-size: 12.8px;
    font-size: .8rem;
    font-weight: normal
}

@media screen and (max-width: 1024px) {
    .footer-bottom > .left {
        width: calc(99.9% * 55/100)
    }

        .footer-bottom > .left:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .footer-bottom > .left:last-child {
            margin-right: 0
        }

        .footer-bottom > .left:nth-child(0n) {
            float: right
        }

    .footer-bottom > .right {
        width: calc(99.9% * 45/100)
    }

        .footer-bottom > .right:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .footer-bottom > .right:last-child {
            margin-right: 0
        }

        .footer-bottom > .right:nth-child(0n) {
            float: right
        }

    .footer-bottom .edm-form .input {
        border: none
    }
}

@media screen and (max-width: 768px) {
    .footer-bottom .link {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 1.1rem
    }

    .footer-bottom .sitemap li {
        padding-right: .25rem
    }

    .footer-bottom .sitemap a {
        letter-spacing: 0
    }
}

@media screen and (max-width: 640px) {
    .footer-bottom > .left, .footer-bottom > .right {
        width: 100%
    }

    .footer-bottom .sitemap {
        display: none
    }

    .footer-bottom .edm-form {
        margin-top: 10px;
        text-align: center
    }

    .footer-bottom .link {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start
    }

    .footer-bottom h6 {
        text-align: left
    }
}

@media screen and (max-width: 480px) {
    .footer-bottom .link {
        display: none
    }

    .footer-bottom h6 {
        text-align: center
    }
}

@media screen and (max-width: 480px) {
    .footer-bottom h6 {
        line-height: 1.5rem
    }
}

.ie9 .footer-bottom .link li, .ie9 .footer-bottom .sitemap li, .ie8 .footer-bottom .link li, .ie8 .footer-bottom .sitemap li {
    display: inline-block
}

.footer-bottom .member-edm .submit {
    position: relative;
    margin-bottom: 6px;
    padding-top: 2px;
    padding-left: 42px;
    line-height: 1;
    background: #FFF;
    border: #000000;
    border: rgba(0,0,0,0.1);
    border-radius: 6px;
    color: #CD0505;
    -webkit-transition: .2s;
    -o-transition: .2s;
    transition: .2s
}

    .footer-bottom .member-edm .submit:hover {
        -webkit-box-shadow: 0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2);
        box-shadow: 0 6px 20px 0 rgba(0,0,0,0.19),0 8px 17px 0 rgba(0,0,0,0.2)
    }

.footer-bottom .member-edm .mail-icon {
    position: absolute;
    left: 14px;
    font-size: 22px;
    color: #CD0505
}

.row .col-2 {
    width: calc(99.9% * 1/2)
}

    .row .col-2:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .row .col-2:last-child {
        margin-right: 0
    }

    .row .col-2:nth-child(0n) {
        float: right
    }

    .row .col-2:first-child {
        padding-right: 100px
    }

@media screen and (max-width: 768px) {
    .content {
        padding: 0 1rem 1rem
    }

    .row .col-2 {
        width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1))
    }

        .row .col-2:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .row .col-2:last-child {
            margin-right: 0
        }

        .row .col-2:nth-child(1n) {
            margin-right: 0;
            float: right
        }

        .row .col-2:nth-child(1n + 1) {
            clear: both
        }

        .row .col-2:first-child {
            padding-right: 1rem;
            padding-left: 1rem
        }
}

.member-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .member-row .full {
        width: 100%
    }

    .member-row .xl {
        width: calc(99.9% * 4/6 - (1.5% - 1.5% * 4/6))
    }

        .member-row .xl:nth-child(1n) {
            float: left;
            margin-right: 1.5%;
            clear: none
        }

        .member-row .xl:last-child {
            margin-right: 0
        }

        .member-row .xl:nth-child(0n) {
            float: right
        }

    .member-row .lg {
        width: calc(99.9% * 3/6 - (1.5% - 1.5% * 3/6))
    }

        .member-row .lg:nth-child(1n) {
            float: left;
            margin-right: 1.5%;
            clear: none
        }

        .member-row .lg:last-child {
            margin-right: 0
        }

        .member-row .lg:nth-child(0n) {
            float: right
        }

    .member-row .md {
        width: calc(99.9% * 2/6 - (1.5% - 1.5% * 2/6))
    }

        .member-row .md:nth-child(1n) {
            float: left;
            margin-right: 1.5%;
            clear: none
        }

        .member-row .md:last-child {
            margin-right: 0
        }

        .member-row .md:nth-child(0n) {
            float: right
        }

    .member-row .sm {
        width: calc(99.9% * 1/6 - (1.5% - 1.5% * 1/6))
    }

        .member-row .sm:nth-child(1n) {
            float: left;
            margin-right: 1.5%;
            clear: none
        }

        .member-row .sm:last-child {
            margin-right: 0
        }

        .member-row .sm:nth-child(0n) {
            float: right
        }

@media screen and (max-width: 1280px) {
    .member-row {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-bottom: 0
    }

        .member-row .xl, .member-row .lg, .member-row .md, .member-row .sm {
            width: calc(99.9% * 1/1)
        }

            .member-row .xl:nth-child(1n), .member-row .lg:nth-child(1n), .member-row .md:nth-child(1n), .member-row .sm:nth-child(1n) {
                float: left;
                margin-right: 0;
                clear: none
            }

            .member-row .xl:last-child, .member-row .lg:last-child, .member-row .md:last-child, .member-row .sm:last-child {
                margin-right: 0
            }

            .member-row .xl:nth-child(0n), .member-row .lg:nth-child(0n), .member-row .md:nth-child(0n), .member-row .sm:nth-child(0n) {
                float: right
            }
}

@media screen and (max-width: 480px) {
    .member-row .sm {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        width: calc(99.9% * 1/1)
    }

        .member-row .sm:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .member-row .sm:last-child {
            margin-right: 0
        }

        .member-row .sm:nth-child(0n) {
            float: right
        }
}

@media screen and (max-width: 320px) {
    .member-row .sm {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .member-row .psw-change {
        width: calc(99.9% * 3/6 - (1rem - 1rem * 3/6))
    }

        .member-row .psw-change:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .member-row .psw-change:last-child {
            margin-right: 0
        }

        .member-row .psw-change:nth-child(6n) {
            margin-right: 0;
            float: right
        }

        .member-row .psw-change:nth-child(6n + 1) {
            clear: both
        }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .member-row .trade-site {
        width: calc(99.9% * 3/6 - (1rem - 1rem * 3/6))
    }

        .member-row .trade-site:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .member-row .trade-site:last-child {
            margin-right: 0
        }

        .member-row .trade-site:nth-child(6n) {
            margin-right: 0;
            float: right
        }

        .member-row .trade-site:nth-child(6n + 1) {
            clear: both
        }
}

@media screen and (max-width: 1440px) {
    .member-row .trade-reissue {
        width: calc(99.9% * 2/3 - (1rem - 1rem * 2/3))
    }

        .member-row .trade-reissue:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .member-row .trade-reissue:last-child {
            margin-right: 0
        }

        .member-row .trade-reissue:nth-child(3n) {
            margin-right: 0;
            float: right
        }

        .member-row .trade-reissue:nth-child(3n + 1) {
            clear: both
        }
}

@media screen and (max-width: 480px) {
    .member-row .trade-reissue {
        width: 100%
    }
}

@media screen and (max-width: 1440px) {
    .index-coupon .lg {
        width: 100%
    }
}

.same-height {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow-y: hidden
}

    .same-height .member-card {
        height: 100%
    }

@media screen and (max-width: 1280px) {
    .same-height .member-card {
        height: auto
    }
}

h1, .h1 {
    padding-top: 15px;
    padding-bottom: 15px
}

h2, .h2, h3, .h3 {
    margin-bottom: 0;
    padding-bottom: 15px
}

p {
    margin-bottom: 10px;
    margin-bottom: .625rem
}

    p.empty {
        display: block !important
    }

a.empty {
    color: #CD0505 !important
}

h3.-line {
    position: relative
}

    h3.-line:before, h3.-line:after {
        content: '';
        position: absolute;
        top: calc((1.125rem + 1.875rem) / 4);
        width: 30%;
        border-top: 1px solid #CD0505
    }

    h3.-line:before {
        left: 0
    }

    h3.-line:after {
        right: 0
    }

@media screen and (max-width: 480px) {
    h3.-line:before, h3.-line:after {
        width: 18%
    }
}

._no-border-bottom {
    border-bottom: none !important
}

.text-main {
    color: #CD0505
}

.btn-group .button {
    width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2))
}

    .btn-group .button:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .btn-group .button:last-child {
        margin-right: 0
    }

    .btn-group .button:nth-child(2n) {
        margin-right: 0;
        float: right
    }

    .btn-group .button:nth-child(2n + 1) {
        clear: both
    }

.btn {
    border-radius: 5px;
    line-height: 48px;
    line-height: 3rem;
    color: #ffffff;
    color: rgba(255,255,255,0.87)
}

    .btn.-block {
        display: block
    }

    .btn.-red {
        background: #CD0505
    }

        .btn.-red:hover, .btn.-red:focus {
            background: #FA0505
        }

    .btn.-google, .btn.-fb {
        width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2));
        padding-top: 16px;
        padding-top: 1rem;
        padding-bottom: 16px;
        padding-bottom: 1rem;
        height: 54px
    }

        .btn.-google:nth-child(1n), .btn.-fb:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .btn.-google:last-child, .btn.-fb:last-child {
            margin-right: 0
        }

        .btn.-google:nth-child(2n), .btn.-fb:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .btn.-google:nth-child(2n + 1), .btn.-fb:nth-child(2n + 1) {
            clear: both
        }

    .btn.-google {
        background: #DD4C3B url("../images/header/google2.png") no-repeat center center
    }

        .btn.-google:hover, .btn.-google:focus {
            background-color: #FE5E4b
        }

    .btn.-fb {
        background: #3162A2 url("../images/header/fb2.png") no-repeat center center
    }

        .btn.-fb:hover, .btn.-fb:focus {
            background-color: #3B76C2
        }

    .btn .header-sprite {
        margin: 0 auto
    }

.btn-red, .btn-blue, .btn-grey, .btn-tag {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    margin-bottom: 20px;
    margin-bottom: 1.25rem;
    height: 38px;
    line-height: 38px;
    color: #FFF;
    border: 1px solid #CD0505;
    outline: 0
}

    .btn-red:hover, .btn-red:focus, .btn-blue:hover, .btn-blue:focus, .btn-grey:hover, .btn-grey:focus, .btn-tag:hover, .btn-tag:focus {
        background: #B40505;
        border-color: #B40505;
        text-decoration: none;
        color: #FFF
    }

    .btn-red.-block, .btn-blue.-block, .btn-grey.-block, .btn-tag.-block {
        display: block;
        width: 100%
    }

    .btn-red.-nomargin, .btn-blue.-nomargin, .btn-grey.-nomargin, .btn-tag.-nomargin {
        margin-bottom: 0
    }

    .btn-red.-width-as-site, .btn-blue.-width-as-site, .btn-grey.-width-as-site, .btn-tag.-width-as-site {
        max-width: calc(99.99% * 40/100 - (1% - 1% * 40/100))
    }

.btn-blue {
    background: #0597CD;
    border-color: #0597CD
}

    .btn-blue:hover, .btn-blue:focus {
        background: #1eb0e6;
        border-color: #1eb0e6
    }

.btn-grey {
    background: #999;
    border-color: #999
}

    .btn-grey:hover, .btn-grey:focus {
        background: #b2b2b2;
        border-color: #b2b2b2
    }

.btn-tag {
    margin-bottom: 0;
    padding: 5px 10px;
    height: inherit;
    line-height: 1.5;
    font-size: 16px;
    font-size: 1rem
}

    .btn-tag:before {
        font-family: 'FontAwesome';
        content: '\f02b';
        padding-right: 8px;
        padding-right: .5rem
    }

    .btn-tag.-record:before {
        content: '\f03a'
    }

    .btn-tag.-auto:before {
        content: '\f1da'
    }

    .btn-tag.-bag:before {
        content: '\f290'
    }

    .btn-tag + .btn-tag {
        margin-left: 12px
    }

#registerForm .btn-red {
    white-space: nowrap
}

@media screen and (max-width: 480px) {
    .form-red .-psw-col2 input, .form-red .-psw-col2 .divider {
        width: 100%
    }

    .form-red .-psw-send .input, .form-red .-psw-send .button {
        width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2))
    }

        .form-red .-psw-send .input:nth-child(1n), .form-red .-psw-send .button:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-psw-send .input:last-child, .form-red .-psw-send .button:last-child {
            margin-right: 0
        }

        .form-red .-psw-send .input:nth-child(2n), .form-red .-psw-send .button:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .form-red .-psw-send .input:nth-child(2n + 1), .form-red .-psw-send .button:nth-child(2n + 1) {
            clear: both
        }

    .form-red .-psw-send .console {
        width: 100%
    }

    .btn .-google {
        background-image: url("../images/header/google.png");
        background-size: 50%
    }

    .btn .-fb {
        background-image: url("../images/header/fb.png");
        background-size: 50%
    }
}

@media screen and (max-width: 320px) {
    .btn-tag.-auto {
        margin-left: 0;
        margin-top: 4px
    }
}

.pages-toolbar {
    padding-top: 20px;
    padding-bottom: 8px
}

    .pages-toolbar > a {
        display: inline-block;
        margin-bottom: 4px;
        margin-bottom: .25rem;
        margin-right: 4px;
        margin-right: .25rem;
        margin-left: 4px;
        margin-left: .25rem;
        padding: 8px 16px;
        padding: .5rem 1rem;
        border: 1px solid #E7E7E7;
        color: #5F6269;
        cursor: pointer
    }

        .pages-toolbar > a:hover, .pages-toolbar > a:focus, .pages-toolbar > a.jp-current {
            background: #CD0505;
            border-color: #CD0505;
            text-decoration: none;
            color: #fff
        }

    .pages-toolbar .jp-previous:before {
        font-family: 'FontAwesome';
        content: "\f053"
    }

    .pages-toolbar .jp-next:before {
        font-family: 'FontAwesome';
        content: "\f054"
    }

@media screen and (max-width: 768px) {
    .pages-toolbar {
        padding-top: 0;
        padding-bottom: 48px
    }
}

@media screen and (max-width: 480px) {
    .pages-toolbar {
        padding-top: 0;
        padding-bottom: 60px
    }

        .pages-toolbar .prev, .pages-toolbar .next {
            width: 100%
        }

        .pages-toolbar .prev {
            margin-bottom: 1rem
        }

        .pages-toolbar .next {
            margin-top: 1rem
        }
}

.btn-edm, .btn-edm img {
    display: inline-block
}

.btn-link-grey {
    text-decoration: underline;
    color: #787878
}

    .btn-link-grey:hover, .btn-link-grey:focus {
        color: #CD0505
    }

.btn-download {
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 8px 20px
}

    .btn-download:hover {
        background: #B40505;
        text-decoration: none
    }

    .btn-download .d-flex {
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }

    .btn-download .icon {
        padding-right: 12px;
        border-right: 1px solid #FFF
    }

    .btn-download .fa {
        font-size: 48px;
        color: #FFF
    }

    .btn-download .name {
        padding-left: 12px;
        font-size: 18px
    }

    .btn-download p {
        margin-bottom: 0;
        color: #FFF
    }

    .btn-download small {
        display: block;
        font-size: 14px;
        color: #8a4c00
    }

@media screen and (max-width: 480px) {
    .btn-download {
        display: block;
        margin-right: 0;
        padding-right: 12px;
        padding-left: 12px
    }
}

.form-red .alert {
    margin-bottom: 20px;
    margin-bottom: 1.25rem
}

.form-red label {
    display: block;
    width: 100%;
    line-height: 2
}

.form-red .input, .form-red .select {
    position: relative;
    margin-bottom: 15px
}

    .form-red .input input, .form-red .input select, .form-red .input textarea, .form-red .select input, .form-red .select select, .form-red .select textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        padding-right: 16px;
        padding-right: 1rem;
        padding-left: 16px;
        padding-left: 1rem;
        line-height: 38px;
        height: 38px;
        background-color: #f3f3f3;
        border: 1px solid #f3f3f3;
        outline: none;
        -webkit-transition: .25s;
        -o-transition: .25s;
        transition: .25s
    }

        .form-red .input input:hover, .form-red .input input:focus, .form-red .input select:hover, .form-red .input select:focus, .form-red .input textarea:hover, .form-red .input textarea:focus, .form-red .select input:hover, .form-red .select input:focus, .form-red .select select:hover, .form-red .select select:focus, .form-red .select textarea:hover, .form-red .select textarea:focus {
            border: 1px solid #CD0505
        }

        .form-red .input input::-webkit-input-placeholder, .form-red .input select::-webkit-input-placeholder, .form-red .input textarea::-webkit-input-placeholder, .form-red .select input::-webkit-input-placeholder, .form-red .select select::-webkit-input-placeholder, .form-red .select textarea::-webkit-input-placeholder {
            color: #9E9E9E
        }

        .form-red .input input:-ms-input-placeholder, .form-red .input select:-ms-input-placeholder, .form-red .input textarea:-ms-input-placeholder, .form-red .select input:-ms-input-placeholder, .form-red .select select:-ms-input-placeholder, .form-red .select textarea:-ms-input-placeholder {
            color: #9E9E9E
        }

        .form-red .input input::-ms-input-placeholder, .form-red .input select::-ms-input-placeholder, .form-red .input textarea::-ms-input-placeholder, .form-red .select input::-ms-input-placeholder, .form-red .select select::-ms-input-placeholder, .form-red .select textarea::-ms-input-placeholder {
            color: #9E9E9E
        }

        .form-red .input input::placeholder, .form-red .input select::placeholder, .form-red .input textarea::placeholder, .form-red .select input::placeholder, .form-red .select select::placeholder, .form-red .select textarea::placeholder {
            color: #9E9E9E
        }

    .form-red .input input, .form-red .select input {
        width: 100%
    }

        .form-red .input input[type=number], .form-red .select input[type=number] {
            -moz-appearance: textfield
        }

            .form-red .input input[type=number]::-webkit-inner-spin-button, .form-red .input input[type=number]::-webkit-outer-spin-button, .form-red .select input[type=number]::-webkit-inner-spin-button, .form-red .select input[type=number]::-webkit-outer-spin-button {
                -webkit-appearance: none;
                appearance: none;
                margin: 0
            }

    .form-red .input label.disabled, .form-red .select label.disabled {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=24)";
        opacity: .24;
        pointer-events: none
    }

    .form-red .input.already, .form-red .select.already {
        position: relative
    }

        .form-red .input.already:after, .form-red .select.already:after {
            font-family: 'FontAwesome';
            content: "\f023";
            position: absolute;
            top: 50%;
            right: 16px;
            right: 1rem;
            color: #787878;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%)
        }

        .form-red .input.already input, .form-red .input.already input:disabled, .form-red .select.already input, .form-red .select.already input:disabled {
            background: #f3f3f3;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1
        }

            .form-red .input.already input:hover, .form-red .input.already input:focus, .form-red .select.already input:hover, .form-red .select.already input:focus {
                border-color: #f3f3f3;
                cursor: not-allowed
            }

    .form-red .select select {
        width: 100%;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAGCAYAAAGN9z9QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyNDNFNjBGOTJGQjYxMUU2QjI5RjlFMEY4MTY3NjE3QiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyNDNFNjBGQTJGQjYxMUU2QjI5RjlFMEY4MTY3NjE3QiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI0M0U2MEY3MkZCNjExRTZCMjlGOUUwRjgxNjc2MTdCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI0M0U2MEY4MkZCNjExRTZCMjlGOUUwRjgxNjc2MTdCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+EPUg7QAAAJxJREFUeNpivOnufpqBgeEvQAAxABkMAAHECCKA4D8QMwIEEIjDD2R8ZGKAgOMAAQQT+QDEAkC8B4h/AAQQSHA/kOEIVSUExJtYgAQXEJ8EYjcgfgvEvCBzzIH4H5IRXwACDKT9CJBhDcQngNgDZCPUKJgdxkC8E6TbBirICDXhNFTTeyD+CcQgx3mwQHWDTLGACh4EYmaoZpjpDACSoyT8oOtMYAAAAABJRU5ErkJggg==);
        background-repeat: no-repeat;
        background-position: calc(100% - 1rem) center;
        cursor: pointer
    }

        .form-red .select select.disabled {
            background-image: none
        }

    .form-red .select.-birthday > .inside:nth-of-type(1) {
        width: calc(99.9% * 42/100 - (1% - 1% * 42/100))
    }

        .form-red .select.-birthday > .inside:nth-of-type(1):nth-child(1n) {
            float: left;
            margin-right: 1%;
            clear: none
        }

        .form-red .select.-birthday > .inside:nth-of-type(1):last-child {
            margin-right: 0
        }

        .form-red .select.-birthday > .inside:nth-of-type(1):nth-child(0n) {
            float: right
        }

    .form-red .select.-birthday > .inside:nth-of-type(2), .form-red .select.-birthday > .inside:nth-of-type(3) {
        width: calc(99.9% * 29/100 - (1% - 1% * 29/100))
    }

        .form-red .select.-birthday > .inside:nth-of-type(2):nth-child(1n), .form-red .select.-birthday > .inside:nth-of-type(3):nth-child(1n) {
            float: left;
            margin-right: 1%;
            clear: none
        }

        .form-red .select.-birthday > .inside:nth-of-type(2):last-child, .form-red .select.-birthday > .inside:nth-of-type(3):last-child {
            margin-right: 0
        }

        .form-red .select.-birthday > .inside:nth-of-type(2):nth-child(0n), .form-red .select.-birthday > .inside:nth-of-type(3):nth-child(0n) {
            float: right
        }

    .form-red .select.-address {
        max-width: 500px
    }

        .form-red .select.-address > div {
            max-width: 500px
        }

            .form-red .select.-address > div > select:nth-of-type(1), .form-red .select.-address > div > select:nth-of-type(2) {
                width: calc(99.9% * 38/100 - (1% - 1% * 38/100))
            }

                .form-red .select.-address > div > select:nth-of-type(1):nth-child(1n), .form-red .select.-address > div > select:nth-of-type(2):nth-child(1n) {
                    float: left;
                    margin-right: 1%;
                    clear: none
                }

                .form-red .select.-address > div > select:nth-of-type(1):last-child, .form-red .select.-address > div > select:nth-of-type(2):last-child {
                    margin-right: 0
                }

                .form-red .select.-address > div > select:nth-of-type(1):nth-child(0n), .form-red .select.-address > div > select:nth-of-type(2):nth-child(0n) {
                    float: right
                }

            .form-red .select.-address > div > input:nth-of-type(1) {
                width: calc(99.9% * 24/100 - (1% - 1% * 24/100))
            }

                .form-red .select.-address > div > input:nth-of-type(1):nth-child(1n) {
                    float: left;
                    margin-right: 1%;
                    clear: none
                }

                .form-red .select.-address > div > input:nth-of-type(1):last-child {
                    margin-right: 0
                }

                .form-red .select.-address > div > input:nth-of-type(1):nth-child(0n) {
                    float: right
                }

.form-red ._checkbox-breakline {
    position: relative;
    padding-left: 26px;
    padding-left: 1.625rem;
    line-height: 1.5;
    color: #666
}

    .form-red ._checkbox-breakline:before {
        position: absolute;
        top: 3px;
        left: 0
    }

.form-red .-verify {
    max-width: 300px;
    max-width: 18.75rem
}

    .form-red .-verify .input {
        width: calc(99.9% * 6/10 - (1rem - 1rem * 6/10))
    }

        .form-red .-verify .input:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-verify .input:last-child {
            margin-right: 0
        }

        .form-red .-verify .input:nth-child(0n) {
            float: right
        }

    .form-red .-verify .btn-red {
        width: calc(99.9% * 4/10 - (1rem - 1rem * 4/10))
    }

        .form-red .-verify .btn-red:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-verify .btn-red:last-child {
            margin-right: 0
        }

        .form-red .-verify .btn-red:nth-child(10n) {
            margin-right: 0;
            float: right
        }

        .form-red .-verify .btn-red:nth-child(10n + 1) {
            clear: both
        }

.form-red .-psw-send {
    max-width: 600px;
    max-width: 37.5rem
}

    .form-red .-psw-send .input {
        width: calc(99.9% * 6/20 - (1rem - 1rem * 6/20))
    }

        .form-red .-psw-send .input:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-psw-send .input:last-child {
            margin-right: 0
        }

        .form-red .-psw-send .input:nth-child(0n) {
            float: right
        }

    .form-red .-psw-send .button {
        width: calc(99.9% * 3/20 - (1rem - 1rem * 3/20))
    }

        .form-red .-psw-send .button:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-psw-send .button:last-child {
            margin-right: 0
        }

        .form-red .-psw-send .button:nth-child(0n) {
            float: right
        }

    .form-red .-psw-send .console {
        width: calc(99.9% * 11/20 - (1rem - 1rem * 11/20));
        padding-bottom: 15px
    }

        .form-red .-psw-send .console:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-psw-send .console:last-child {
            margin-right: 0
        }

        .form-red .-psw-send .console:nth-child(0n) {
            float: right
        }

@media screen and (max-width: 480px) {
    .form-red .-psw-send .input, .form-red .-psw-send .button {
        width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2))
    }

        .form-red .-psw-send .input:nth-child(1n), .form-red .-psw-send .button:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .form-red .-psw-send .input:last-child, .form-red .-psw-send .button:last-child {
            margin-right: 0
        }

        .form-red .-psw-send .input:nth-child(2n), .form-red .-psw-send .button:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .form-red .-psw-send .input:nth-child(2n + 1), .form-red .-psw-send .button:nth-child(2n + 1) {
            clear: both
        }

    .form-red .-psw-send .console {
        margin-top: -13.5px;
        margin-bottom: -13.5px;
        padding-bottom: 0;
        width: 100%;
        height: auto;
        line-height: 1
    }
}

.form-red .-company input:nth-of-type(1) {
    width: calc(99.9% * 55/100 - (1rem - 1rem * 55/100))
}

    .form-red .-company input:nth-of-type(1):nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .form-red .-company input:nth-of-type(1):last-child {
        margin-right: 0
    }

    .form-red .-company input:nth-of-type(1):nth-child(0n) {
        float: right
    }

.form-red .-company .divider {
    width: calc(99.9% * 17/100 - (1rem - 1rem * 17/100));
    line-height: 45px
}

    .form-red .-company .divider:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .form-red .-company .divider:last-child {
        margin-right: 0
    }

    .form-red .-company .divider:nth-child(100n) {
        margin-right: 0;
        float: right
    }

    .form-red .-company .divider:nth-child(100n + 1) {
        clear: both
    }

.form-red .-company input:nth-of-type(2) {
    width: calc(99.9% * 28/100 - (1rem - 1rem * 28/100))
}

    .form-red .-company input:nth-of-type(2):nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .form-red .-company input:nth-of-type(2):last-child {
        margin-right: 0
    }

    .form-red .-company input:nth-of-type(2):nth-child(0n) {
        float: right
    }

.form-red .-subscriber .number {
    width: calc(99.9% * 1/10 - (1rem - 1rem * 1/10));
    line-height: 45px
}

    .form-red .-subscriber .number:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .form-red .-subscriber .number:last-child {
        margin-right: 0
    }

    .form-red .-subscriber .number:nth-child(10n) {
        margin-right: 0;
        float: right
    }

    .form-red .-subscriber .number:nth-child(10n + 1) {
        clear: both
    }

.form-red .-subscriber .input {
    width: calc(99.9% * 9/10 - (1rem - 1rem * 9/10))
}

    .form-red .-subscriber .input:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .form-red .-subscriber .input:last-child {
        margin-right: 0
    }

    .form-red .-subscriber .input:nth-child(10n) {
        margin-right: 0;
        float: right
    }

    .form-red .-subscriber .input:nth-child(10n + 1) {
        clear: both
    }

.form-red .radio-select .radio-block, .form-red .radio-select .radio-block .radio-block, .form-red .radio-select .radio-block input + label, .form-red .radio-select .radio-block .select {
    display: inline-block
}

    .form-red .radio-select .radio-block input + label {
        width: auto
    }

.form-red .radio-select.-has-child .select select {
    min-width: 80px;
    min-width: 5rem
}

.form-red .radio-select.-has-child .unit {
    display: inline-block;
    margin-right: 16px;
    margin-right: 1rem;
    margin-left: 4px;
    margin-left: .25rem
}

.form-red .verify-account {
    position: relative
}

    .form-red .verify-account .input {
        width: calc(99.9% * 33/50 - (1rem - 1rem * 33/50))
    }

        .form-red .verify-account .input:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .verify-account .input:last-child {
            margin-right: 0
        }

        .form-red .verify-account .input:nth-child(50n) {
            margin-right: 0;
            float: right
        }

        .form-red .verify-account .input:nth-child(50n + 1) {
            clear: both
        }

    .form-red .verify-account .button {
        width: calc(99.9% * 17/50 - (1rem - 1rem * 17/50));
        position: absolute;
        right: 0;
        bottom: 15px
    }

        .form-red .verify-account .button:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .form-red .verify-account .button:last-child {
            margin-right: 0
        }

        .form-red .verify-account .button:nth-child(50n) {
            margin-right: 0;
            float: right
        }

        .form-red .verify-account .button:nth-child(50n + 1) {
            clear: both
        }

        .form-red .verify-account .button > .btn-red {
            margin-bottom: 0
        }

.form-red .-red {
    padding-left: 8px;
    padding-left: .5rem;
    font-size: 80%
}

.identity-style ._colorRed {
    font-size: 80%
}

@media screen and (min-width: 769px) {
    .identity-style ._colorRed.to-mtable {
        display: none
    }
}

@media screen and (max-width: 768px) {
    .identity-style ._colorRed.to-mtable {
        padding-top: 15px
    }

        .identity-style ._colorRed.to-mtable .select select {
            width: 60%
        }
}

@media screen and (max-width: 480px) {
    .identity-style ._colorRed label {
        line-height: 1.5
    }

    .identity-style ._colorRed .identity-style, .identity-style ._colorRed .identity-style > label, .identity-style ._colorRed .marriage-style {
        padding-bottom: 15px
    }

    .identity-style ._colorRed.to-mtable .select select {
        width: 100%
    }
}

.true:before, .false:before {
    font-family: 'FontAwesome';
    margin-right: 10px;
    margin-right: .625rem;
    line-height: 45px;
    font-size: 100%
}

.true {
    padding-bottom: 20px;
    font-size: 32px;
    font-size: 2rem
}

    .true:before {
        content: '\f058'
    }

.false {
    margin-top: -13.5px;
    padding-bottom: 15px
}

    .false:before {
        content: '\f057'
    }

.checkbox {
    display: none
}

    .checkbox + label {
        color: #787878;
        cursor: pointer
    }

        .checkbox + label:before {
            content: '\a0';
            display: inline-block;
            margin-right: 3.2px;
            margin-right: .2rem;
            width: 16px;
            width: 1rem;
            height: 16px;
            height: 1rem;
            line-height: 1;
            background: #787878;
            border-radius: .2rem
        }

    .checkbox:checked + label:before {
        content: '\2713'
    }

    .checkbox .forgot-password a {
        text-decoration: underline;
        color: #787878
    }

        .checkbox .forgot-password a:hover, .checkbox .forgot-password a:focus {
            color: #333
        }

    .checkbox .-line {
        background: #F2F5F8;
        color: #787878
    }

        .checkbox .-line:before, .checkbox .-line:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 25%;
            border-top: 1px solid #CD0505
        }

        .checkbox .-line:before {
            left: 0
        }

        .checkbox .-line:after {
            right: 0
        }

.star-checkbox .starbox {
    display: inline-block;
    margin-bottom: 16px;
    margin-bottom: 1rem
}

    .star-checkbox .starbox input {
        display: none
    }

        .star-checkbox .starbox input + label {
            padding: 4px 12px;
            padding: .25rem .75rem;
            border: 1px solid currentColor;
            border-radius: 50px;
            color: #5C5C5C;
            cursor: pointer
        }

            .star-checkbox .starbox input + label:before {
                font-family: 'FontAwesome';
                content: '\f006';
                margin-right: 4px;
                margin-right: .25rem
            }

        .star-checkbox .starbox input:checked + label {
            background: #F90
        }

    .star-checkbox .starbox:hover input + label {
        color: #F90
    }

.radio-block .radio {
    display: none
}

    .radio-block .radio + label {
        cursor: pointer
    }

        .radio-block .radio + label:before {
            content: '\a0';
            display: inline-block;
            margin-right: 10px;
            margin-right: .625rem;
            padding: 3.2px;
            padding: .2rem;
            width: 16px;
            width: 1rem;
            height: 16px;
            height: 1rem;
            line-height: .35;
            text-indent: 2.4px;
            text-indent: .15rem;
            background: #DEE2E7;
            border: 3px solid #DEE2E7;
            border-radius: 50%
        }

    .radio-block .radio:checked + label:before {
        background: #CD0505
    }

.radio-block._inline-block {
    margin-right: 16px;
    margin-right: 1rem
}

@media screen and (max-width: 480px) {
    .radio-block {
        display: block;
        padding-bottom: 0 !important
    }
}

.helper-orange {
    position: relative;
    padding-left: 20px;
    padding-left: 1.25rem
}

    .helper-orange:before {
        font-family: 'FontAwesome';
        content: '\f06a';
        position: absolute;
        top: 2px;
        left: 0
    }

@media screen and (max-width: 480px) {
    ._psw {
        padding-bottom: 20px
    }
}

.tooltip-wrap {
    position: relative
}

    .tooltip-wrap .tip, .tooltip-wrap .tip:before {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transform: translateY(-10%);
        -ms-transform: translateY(-10%);
        transform: translateY(-10%);
        -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
        -o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
        transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1)
    }

    .tooltip-wrap .tip {
        position: absolute;
        right: 0;
        left: 0;
        bottom: 100%;
        padding: 8px 16px;
        padding: .5rem 1rem;
        background: #a8a8a8;
        color: #FFF
    }

        .tooltip-wrap .tip:before {
            content: '';
            position: absolute;
            right: 16px;
            right: 1rem;
            bottom: -8px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 5px 0 5px;
            border-color: #a8a8a8 transparent transparent transparent;
            visibility: hidden
        }

    .tooltip-wrap:not(.disabled):hover .tip, .tooltip-wrap:not(.disabled):hover .tip:before {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }

.verify-code {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    margin-bottom: .625rem
}

    .verify-code p, .verify-code img, .verify-code a {
        display: inline-block
    }

    .verify-code p {
        margin-right: 10px;
        margin-right: .625rem;
        margin-bottom: 0
    }

@media screen and (max-width: 320px) {
    .verify-code {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .verify-code a {
            margin-left: auto
        }
}

.form-red .input input.disabled, .form-red .select input.disabled, .form-red .select select.disabled {
    background-color: #EEE;
    border-color: #212121;
    border-color: rgba(33,33,33,0.24);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=24)";
    opacity: .24;
    cursor: not-allowed;
    pointer-events: none
}

    .form-red .input input.disabled:hover, .form-red .select input.disabled:hover, .form-red .select select.disabled:hover, .form-red .input input.disabled:focus, .form-red .select input.disabled:focus, .form-red .select select.disabled:focus {
        border-color: #212121;
        border-color: rgba(33,33,33,0.24);
        pointer-events: none
    }

.form-red .input input.-dark.disabled, .form-red .select input.-dark.disabled, .form-red .select select.-dark.disabled {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    background: #FFF;
    border: 0
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden
}

    .video-container > iframe, .video-container > object, .video-container > embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

.member-h1 {
    padding-top: 0;
    padding-bottom: 10px;
    line-height: 1
}

@media screen and (max-width: 480px) {
    .member-h1 {
        padding-bottom: 15px;
        line-height: 48px
    }
}

.member-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 71vh;
    overflow-y: auto;
    overflow-x: hidden
}

    .member-center > .main-content {
        -webkit-box-flex: 6;
        -ms-flex: 6;
        flex: 6;
        position: relative;
        z-index: 1;
        padding: 15px 30px 15px;
        overflow-y: auto;
        overflow-x: hidden;
        background: #F3F3F3
    }

@media screen and (max-width: 480px) {
    .member-center > .main-content {
        margin-left: 0;
        padding-right: 15px;
        padding-left: 15px
    }
}

.member-center ~ .footer-wrap {
    margin-top: 0
}

.progress-container {
    position: relative;
    padding-left: 0 !important
}

    .progress-container > .progressbar {
        position: relative;
        background: #EBEBEB;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px
    }

        .progress-container > .progressbar > .js-progress {
            display: block;
            padding-top: 4.5px;
            padding-bottom: 4.5px;
            width: 0;
            background: #F35757;
            border-bottom-right-radius: 2px;
            border-bottom-left-radius: 2px
        }

        .progress-container > .progressbar > .caption {
            position: absolute;
            right: 0;
            left: 0;
            bottom: 100%;
            padding-bottom: 8px;
            padding-bottom: .5rem
        }

            .progress-container > .progressbar > .caption em {
                padding-left: 4px;
                padding-left: .25rem;
                font-style: normal
            }

    .progress-container.-red {
        padding-top: 40px;
        padding-top: 2.5rem
    }

        .progress-container.-red > .progressbar {
            border-color: transparent
        }

            .progress-container.-red > .progressbar > .js-progress {
                background: #CD0505
            }

@media screen and (max-width: 480px) {
    .progress-container {
        margin-right: -20px;
        margin-left: -20px;
        padding-top: 15px
    }

        .progress-container > .present {
            top: -37px
        }
}

.yellow-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column
}

    .yellow-box .big-number, .yellow-box .yellow {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        width: 100%
    }

    .yellow-box .big-number {
        padding: 12px 20px;
        padding: 0.75rem 1.25rem
    }

    .yellow-box .yellow {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap
    }

        .yellow-box .yellow a {
            padding-left: 4px;
            padding-left: .25rem
        }

    .yellow-box .aritcle, .yellow-box .video {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        padding-top: 20px;
        padding-top: 1.25rem;
        padding-bottom: 20px;
        padding-bottom: 1.25rem;
        background: #FFBF13;
        font-size: 30px;
        font-size: 1.875rem
    }

    .yellow-box .video {
        border-left: 1px solid #F4B200
    }

    .yellow-box .fa {
        padding-right: 4px;
        padding-right: .25rem
    }

.ie9 .yellow-box .yellow:before, .ie8 .yellow-box .yellow:before {
    content: '';
    display: table
}

.ie9 .yellow-box .yellow:after, .ie8 .yellow-box .yellow:after {
    content: '';
    display: table;
    clear: both
}

.ie9 .yellow-box .aritcle, .ie9 .yellow-box .video, .ie8 .yellow-box .aritcle, .ie8 .yellow-box .video {
    width: calc(99.9% * 1/2)
}

    .ie9 .yellow-box .aritcle:nth-child(1n), .ie9 .yellow-box .video:nth-child(1n), .ie8 .yellow-box .aritcle:nth-child(1n), .ie8 .yellow-box .video:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .ie9 .yellow-box .aritcle:last-child, .ie9 .yellow-box .video:last-child, .ie8 .yellow-box .aritcle:last-child, .ie8 .yellow-box .video:last-child {
        margin-right: 0
    }

    .ie9 .yellow-box .aritcle:nth-child(0n), .ie9 .yellow-box .video:nth-child(0n), .ie8 .yellow-box .aritcle:nth-child(0n), .ie8 .yellow-box .video:nth-child(0n) {
        float: right
    }

@media screen and (max-width: 1440px) {
    .yellow-box .big-number {
        padding: 15px 20px
    }
}

.thumb-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    padding-top: 15px;
    padding-bottom: 15px;
    color: black
}

    .thumb-list .img {
        width: calc(99.9% * 1/3 - (10px - 10px * 1/3));
        height: 100%
    }

        .thumb-list .img:nth-child(1n) {
            float: left;
            margin-right: 10px;
            clear: none
        }

        .thumb-list .img:last-child {
            margin-right: 0
        }

        .thumb-list .img:nth-child(0n) {
            float: right
        }

        .thumb-list .img > div {
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat
        }

    .thumb-list .caption {
        width: calc(99.9% * 2/3 - (1rem - 1rem * 2/3))
    }

        .thumb-list .caption:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .thumb-list .caption:last-child {
            margin-right: 0
        }

        .thumb-list .caption:nth-child(3n) {
            margin-right: 0;
            float: right
        }

        .thumb-list .caption:nth-child(3n + 1) {
            clear: both
        }

    .thumb-list .admark {
        color: #CD0505
    }

@media screen and (min-width: 540px) {
    .thumb-list .img > div {
        min-height: 70px
    }
}

@media screen and (max-width: 480px) {
    .thumb-list + .thumb-list {
        padding-top: 0;
        padding-bottom: 15px
    }

    .thumb-list .img, .thumb-list .caption {
        display: inline-block;
        width: auto
    }

    .thumb-list .img {
        min-width: 70px
    }

        .thumb-list .img > div {
            padding-bottom: 0;
            width: 70px;
            height: 70px;
            overflow: hidden
        }
}

.ie9 .thumb-list, .ie8 .thumb-list {
    display: block
}

.pie-chart {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 30px;
    min-height: 277px
}

    .pie-chart .pie-title-center {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        margin-bottom: 48px;
        margin-bottom: 3rem
    }

    .pie-chart .caption {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        line-height: 48px;
        line-height: 3rem
    }

    .pie-chart .pie-value {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        position: absolute;
        top: 15%;
        left: 15%;
        width: 70%;
        height: 70%;
        background: #F25856;
        border-radius: 50%;
        font-size: 18px;
        color: white
    }

        .pie-chart .pie-value.-blue {
            background: #008BDC
        }

.ie9 .js-form-change .pie-chart:before, .ie8 .js-form-change .pie-chart:before {
    content: '';
    display: table
}

.ie9 .js-form-change .pie-chart:after, .ie8 .js-form-change .pie-chart:after {
    content: '';
    display: table;
    clear: both
}

.ie9 .js-form-change .pie-chart .pie-title-center, .ie8 .js-form-change .pie-chart .pie-title-center {
    width: calc(99.9% * 1/4)
}

    .ie9 .js-form-change .pie-chart .pie-title-center:nth-child(1n), .ie8 .js-form-change .pie-chart .pie-title-center:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .ie9 .js-form-change .pie-chart .pie-title-center:last-child, .ie8 .js-form-change .pie-chart .pie-title-center:last-child {
        margin-right: 0
    }

    .ie9 .js-form-change .pie-chart .pie-title-center:nth-child(0n), .ie8 .js-form-change .pie-chart .pie-title-center:nth-child(0n) {
        float: right
    }

.ie9 .js-form-change .pie-chart .pie-value, .ie8 .js-form-change .pie-chart .pie-value {
    top: 13.5%;
    left: 11.5%;
    width: 62%;
    line-height: 6;
    text-align: center
}

.reissue-mag .mag {
    width: calc(99.9% * 1/5 - (1rem - 1rem * 1/5))
}

    .reissue-mag .mag:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .reissue-mag .mag:last-child {
        margin-right: 0
    }

    .reissue-mag .mag:nth-child(5n) {
        margin-right: 0;
        float: right
    }

    .reissue-mag .mag:nth-child(5n + 1) {
        clear: both
    }

    .reissue-mag .mag input {
        display: none
    }

        .reissue-mag .mag input + label {
            display: block;
            width: auto;
            cursor: pointer
        }

        .reissue-mag .mag input:checked + label figure:before {
            font-family: 'FontAwesome';
            content: '\f058';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background: #ffffff;
            background: rgba(255,255,255,0.65);
            font-size: 60px;
            font-size: 3.75rem
        }

    .reissue-mag .mag p {
        margin-bottom: 0
    }

    .reissue-mag .mag figure {
        position: relative;
        margin: 0;
        pointer-events: visible
    }

    .reissue-mag .mag img {
        pointer-events: visible
    }

    .reissue-mag .mag time {
        line-height: 24px;
        line-height: 1.5rem
    }

    .reissue-mag .mag span {
        display: block;
        padding-top: 4px;
        padding-top: .25rem;
        line-height: 20px;
        line-height: 1.25rem
    }

    .reissue-mag .mag time {
        display: block;
        color: #787878
    }

@media screen and (max-width: 480px) {
    .reissue-mag .mag {
        width: calc(99.9% * 1/2)
    }

        .reissue-mag .mag:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .reissue-mag .mag:last-child {
            margin-right: 0
        }

        .reissue-mag .mag:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .reissue-mag .mag:nth-child(2n + 1) {
            clear: both
        }
}

.ie9 .reissue-mag:before, .ie8 .reissue-mag:before {
    content: '';
    display: table
}

.ie9 .reissue-mag:after, .ie8 .reissue-mag:after {
    content: '';
    display: table;
    clear: both
}

.ie9 .reissue-mag .mag, .ie8 .reissue-mag .mag {
    width: calc(99.9% * 1/5 - (1rem - 1rem * 1/5))
}

    .ie9 .reissue-mag .mag:nth-child(1n), .ie8 .reissue-mag .mag:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .ie9 .reissue-mag .mag:last-child, .ie8 .reissue-mag .mag:last-child {
        margin-right: 0
    }

    .ie9 .reissue-mag .mag:nth-child(5n), .ie8 .reissue-mag .mag:nth-child(5n) {
        margin-right: 0;
        float: right
    }

    .ie9 .reissue-mag .mag:nth-child(5n + 1), .ie8 .reissue-mag .mag:nth-child(5n + 1) {
        clear: both
    }

.thumb-video {
    margin-bottom: 30px;
    padding-top: 36px
}

    .thumb-video .video {
        position: relative;
        display: block;
        width: calc(99.9% * 19/50 - (10px - 10px * 19/50));
        height: 100%
    }

        .thumb-video .video:nth-child(1n) {
            float: left;
            margin-right: 10px;
            clear: none
        }

        .thumb-video .video:last-child {
            margin-right: 0
        }

        .thumb-video .video:nth-child(0n) {
            float: right
        }

        .thumb-video .video:before {
            font-family: 'FontAwesome';
            content: '\f144';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            background: #1b1b1b;
            background: rgba(27,27,27,0.5);
            font-size: 50px;
            color: #CD0505;
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
            opacity: 0;
            -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
            -o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
            transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1)
        }

        .thumb-video .video:hover:before {
            -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
            opacity: 1
        }

        .thumb-video .video .bg {
            width: 100%;
            height: 0;
            padding-bottom: 56.25%;
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat
        }

    .thumb-video .caption {
        width: calc(99.9% * 31/50 - (1rem - 1rem * 31/50))
    }

        .thumb-video .caption:nth-child(1n) {
            float: left;
            margin-right: 16px;
            margin-right: 1rem;
            clear: none
        }

        .thumb-video .caption:last-child {
            margin-right: 0
        }

        .thumb-video .caption:nth-child(50n) {
            margin-right: 0;
            float: right
        }

        .thumb-video .caption:nth-child(50n + 1) {
            clear: both
        }

        .thumb-video .caption a, .thumb-video .caption p {
            margin-bottom: 4px
        }

        .thumb-video .caption a {
            display: block;
            font-size: 18px;
            color: #000
        }

            .thumb-video .caption a:hover, .thumb-video .caption a:focus {
                color: #CD0505
            }

        .thumb-video .caption p {
            color: #787878
        }

            .thumb-video .caption p.master {
                color: #cd0505
            }

@media screen and (min-width: 1281px) and (max-width: 1440px) {
    .thumb-video .video, .thumb-video .caption {
        width: calc(99.9% * 50/50)
    }

        .thumb-video .video:nth-child(1n), .thumb-video .caption:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .thumb-video .video:last-child, .thumb-video .caption:last-child {
            margin-right: 0
        }

        .thumb-video .video:nth-child(0n), .thumb-video .caption:nth-child(0n) {
            float: right
        }

    .thumb-video .video {
        margin-bottom: 16px
    }

    .thumb-video .btn-red {
        margin-bottom: 0
    }
}

@media screen and (max-width: 480px) {
    .thumb-video {
        padding-top: 20px
    }

        .thumb-video .video, .thumb-video .caption {
            width: calc(99.9% * 50/50)
        }

            .thumb-video .video:nth-child(1n), .thumb-video .caption:nth-child(1n) {
                float: left;
                margin-right: 0;
                clear: none
            }

            .thumb-video .video:last-child, .thumb-video .caption:last-child {
                margin-right: 0
            }

            .thumb-video .video:nth-child(0n), .thumb-video .caption:nth-child(0n) {
                float: right
            }

        .thumb-video .video {
            margin-bottom: 16px
        }

        .thumb-video .btn-red {
            margin-bottom: 0
        }
}

.package-strong {
    padding-top: 20px;
    font-size: 18px
}

    .package-strong strong {
        font-size: 24px;
        color: #CD0505
    }

.grey-info {
    margin-bottom: 30px;
    padding: 20px;
    background: #f3f3f3
}

    .grey-info p, .grey-info a {
        font-size: 18px
    }

        .grey-info p:before, .grey-info a:before {
            font-family: 'FontAwesome';
            content: '\f05a';
            padding-right: 4px
        }

    .grey-info a {
        display: inline-block;
        margin-bottom: 10px;
        color: #000
    }

        .grey-info a:hover, .grey-info a:focus {
            text-decoration: none;
            color: #CD0505
        }

    .grey-info .js-collapse-slide {
        margin-bottom: 0
    }

        .grey-info .js-collapse-slide .fa {
            position: relative;
            top: -2px;
            padding-left: 4px;
            font-size: 14px
        }

        .grey-info .js-collapse-slide.active .fa {
            padding-right: 4px;
            padding-left: 0;
            -webkit-transform: rotate(-180deg);
            -ms-transform: rotate(-180deg);
            transform: rotate(-180deg)
        }

    .grey-info ul {
        margin-bottom: 30px;
        padding-left: 40px
    }

        .grey-info ul li {
            list-style: disc
        }

    .grey-info li {
        line-height: 1.5;
        color: #787878
    }

.video-single .video-container {
    margin-bottom: 16px
}

.video-single .info {
    font-size: 18px
}

    .video-single .info .fa {
        padding-right: 2px
    }

.video-single .introduction h2 {
    font-size: 24px;
    color: #CD0505
}

.video-single .introduction .times {
    font-size: 18px
}

.video-single .introduction ul, .video-single .introduction ol {
    margin-bottom: 10px;
    padding-left: 24px
}

    .video-single .introduction ul li {
        list-style: disc
    }

    .video-single .introduction ol li {
        list-style: decimal
    }

.video-single .introduction p, .video-single .introduction li {
    line-height: 1.5
}

.index-ad div {
    max-width: 100%
}

.index-ad img {
    margin: 0 auto;
    height: auto !important
}

@media screen and (max-width: 1280px) {
    .smart-index-ad {
        text-align: center
    }

        .smart-index-ad img {
            margin-right: auto;
            margin-left: auto
        }
}

.carousel.-member-index .carousel-indicators, .carousel.program-main .carousel-indicators {
    position: absolute;
    left: auto;
    z-index: 0;
    margin-left: initial;
    width: auto;
    height: 16px;
    height: 1rem;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease
}

    .carousel.-member-index .carousel-indicators li, .carousel.program-main .carousel-indicators li {
        margin-right: 8px;
        margin-right: .5rem;
        margin-left: 8px;
        margin-left: .5rem;
        background: #CCC;
        border-color: #CCC
    }

        .carousel.-member-index .carousel-indicators li.active, .carousel.program-main .carousel-indicators li.active {
            background: #CD0505;
            border-color: #CD0505
        }

@media screen and (max-width: 480px) {
    .carousel.-member-index .carousel-indicators, .carousel.program-main .carousel-indicators {
        top: 0;
        right: 0;
        padding-top: .5rem;
        height: 2rem;
        background: #ffffff;
        background: rgba(255,255,255,0.54)
    }

    .carousel.-member-index img, .carousel.program-main img {
        width: 100%
    }
}

.carousel.-member-index .carousel-indicators {
    top: 0;
    right: 0;
    padding: 4px;
    padding: .25rem;
    height: 24px;
    height: 1.5rem;
    background: #ffffff;
    background: rgba(255,255,255,0.54)
}

.carousel.program-main .active {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.carousel.program-main .pic .img {
    width: 100%;
    height: 100%;
    min-height: 447px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center
}

.carousel.program-main .carousel-indicators {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    top: 26px;
    right: 21%
}

@media screen and (max-width: 768px) {
    .carousel.program-main .active {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .carousel.program-main .carousel-indicators {
        top: 0;
        right: 0
    }

    .carousel.program-main .pic .img {
        min-height: initial
    }
}

.carousel-fade .carousel-inner .item {
    -webkit-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity
}

.carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0
}

.carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

    .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
        left: 0;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }

.carousel-fade .carousel-inner .carousel-control {
    z-index: 2
}

.side-nav {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    position: relative;
    z-index: 5;
    min-width: 240px;
    max-width: 240px;
    max-height: 100%;
    overflow: visible;
    overflow-y: auto;
    background: #909090
}

    .side-nav .fa {
        margin-right: 8px;
        margin-right: .5rem;
        width: 32px;
        width: 2rem
    }

        .side-nav .fa.btw {
            position: relative;
            top: 1px;
            height: 16px;
            background: url("data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAQAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADM/wAAzP8AAMz/AADM/wAAzP8AAMz/AADM/wAAzP8AAMz/AADM/wAAzP8AAMz/AADM/wAA//8AAAAAAADM/wAAzP8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAMz/AADM/wAAzP8AAP//AAD//wAA//8AAP//mZn//5mZ//+Zmf//mZn//5mZ//8AAP//AAD//wAA//8AAP//AAD//wAAzP8AAMz/AAD//wAA//8AAP//mZn//////////////////////////////////8zM//8AAP//AAD//wAA//8AAMz/AADM/wAA//8AAP//AAD//5mZ/////////////5mZ//+Zmf//zMz/////////////mZn//wAA//8AAP//AADM/wAAzP8AAP//AAD//wAA//+Zmf////////////8AAP//AAD//wAA///MzP///////8zM//8AAP//AAD//wAAzP8AAMz/AAD//wAA//8AAP//mZn/////////////AAD//wAA//8AAP//zMz////////MzP//AAD//wAA//8AAMz/AADM/wAA//8AAP//AAD//5mZ/////////////5mZ//+Zmf//zMz/////////////mZn//wAA//8AAP//AADM/wAAzP8AAP//AAD//wAA//+Zmf//////////////////////////////////mZn//wAA//8AAP//AAD//wAAzP8AAMz/AAD//wAA//8AAP//mZn/////////////mZn//5mZ///MzP///////8zM//8AAP//AAD//wAA//8AAMz/AADM/wAA//8AAP//AAD//5mZ/////////////wAA//8AAP//mZn/////////////AAD//wAA//8AAP//AADM/wAAzP8AAP//AAD//wAA//+Zmf////////////8AAP//AAD//5mZ/////////////wAA//8AAP//AAD//wAAzP8AAMz/AAD//wAA//8AAP//mZn//////////////////////////////////8zM//8AAP//AAD//wAA//8AAMz/AADM/wAA//8AAP//AAD//5mZ/////////////////////////////8zM//8AAP//AAD//wAA//8AAP//AADM/wAAzP8AAMz/AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAA//8AAP//AADM/wAA//8AAAAAAAD//wAAzP8AAMz/AADM/wAAzP8AAMz/AADM/wAAzP8AAMz/AADM/wAAzP8AAMz/AAD//wAAzP8AAAAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAEAAA==") no-repeat;
            background-size: 16px 16px;
            background-position: center center
        }

@media screen and (max-width: 480px) {
    .side-nav {
        display: block;
        position: fixed;
        width: 100%;
        height: auto;
        min-height: calc(100% - 60px);
        left: -110%;
        -webkit-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
        -o-transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1);
        transition: all 0.5s cubic-bezier(0.3, 0.1, 0.05, 1)
    }

        .side-nav.-show {
            padding-bottom: 60px;
            left: 0
        }
}

.ie9 .member-center, .ie8 .member-center {
    background: #F3F3F3
}

    .ie9 .member-center:before, .ie8 .member-center:before {
        content: '';
        display: table
    }

    .ie9 .member-center:after, .ie8 .member-center:after {
        content: '';
        display: table;
        clear: both
    }

    .ie9 .member-center > .main-content, .ie8 .member-center > .main-content {
        width: calc(99.9% * 5/6)
    }

        .ie9 .member-center > .main-content:nth-child(1n), .ie8 .member-center > .main-content:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .ie9 .member-center > .main-content:last-child, .ie8 .member-center > .main-content:last-child {
            margin-right: 0
        }

        .ie9 .member-center > .main-content:nth-child(0n), .ie8 .member-center > .main-content:nth-child(0n) {
            float: right
        }

    .ie9 .member-center .side-nav, .ie8 .member-center .side-nav {
        width: calc(99.9% * 1/6)
    }

        .ie9 .member-center .side-nav:nth-child(1n), .ie8 .member-center .side-nav:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .ie9 .member-center .side-nav:last-child, .ie8 .member-center .side-nav:last-child {
            margin-right: 0
        }

        .ie9 .member-center .side-nav:nth-child(0n), .ie8 .member-center .side-nav:nth-child(0n) {
            float: right
        }

.side-avatar {
    padding: 24px 16px;
    padding: 1.5rem 16px
}

    .side-avatar > .gravatar {
        width: calc(99.9% * 37/100);
        padding-right: 8px;
        padding-right: .5rem
    }

        .side-avatar > .gravatar:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .side-avatar > .gravatar:last-child {
            margin-right: 0
        }

        .side-avatar > .gravatar:nth-child(0n) {
            float: right
        }

        .side-avatar > .gravatar img {
            width: 70px;
            height: 70px;
            border: 8px solid #ACACAC;
            border: .5rem solid #ACACAC;
            border-radius: 50%
        }

    .side-avatar > .info {
        width: calc(99.9% * 63/100);
        padding-top: 8px;
        padding-top: .5rem;
        padding-left: 8px;
        padding-left: .5rem
    }

        .side-avatar > .info:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .side-avatar > .info:last-child {
            margin-right: 0
        }

        .side-avatar > .info:nth-child(0n) {
            float: right
        }

        .side-avatar > .info .name {
            word-break: break-all;
            color: #FEFEFE
        }

        .side-avatar > .info .level {
            color: #D2D2D2
        }

            .side-avatar > .info .level a {
                margin-left: 8px;
                margin-left: .5rem;
                color: #4C4C4C
            }

@media screen and (max-width: 480px) {
    .side-avatar > .gravatar {
        width: calc(99.9% * 1/4)
    }

        .side-avatar > .gravatar:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .side-avatar > .gravatar:last-child {
            margin-right: 0
        }

        .side-avatar > .gravatar:nth-child(0n) {
            float: right
        }

        .side-avatar > .gravatar img {
            margin-top: 16px;
            width: 100%;
            height: 100%;
            border-width: .05rem
        }

    .side-avatar > .info {
        width: calc(99.9% * 3/4 - (1rem - 1rem * 3/4))
    }

        .side-avatar > .info:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .side-avatar > .info:last-child {
            margin-right: 0
        }

        .side-avatar > .info:nth-child(4n) {
            margin-right: 0;
            float: right
        }

        .side-avatar > .info:nth-child(4n + 1) {
            clear: both
        }
}

.side-button {
    border-top: 1px solid #C8C8C8;
    border-bottom: 1px solid #C8C8C8
}

    .side-button > .index, .side-button > .logout {
        width: calc(99.9% * 1/2)
    }

        .side-button > .index:nth-child(1n), .side-button > .logout:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .side-button > .index:last-child, .side-button > .logout:last-child {
            margin-right: 0
        }

        .side-button > .index:nth-child(0n), .side-button > .logout:nth-child(0n) {
            float: right
        }

        .side-button > .index a, .side-button > .index button, .side-button > .logout a, .side-button > .logout button {
            display: block;
            padding-top: 14px;
            padding-top: .875rem;
            padding-bottom: 14px;
            padding-bottom: .875rem;
            background: transparent
        }

        .side-button > .index a {
            border-right: 1px solid #C8C8C8
        }

            .side-button > .index a:hover {
                text-decoration: none
            }

        .side-button > .logout button {
            width: 100%;
            border: 0
        }

.aside-collapse {
    position: relative;
    z-index: 1;
    overflow: hidden
}

    .aside-collapse a {
        position: relative;
        display: block;
        padding: 16px 30px;
        padding: 1rem 1.875rem;
        background-color: #909090;
        border-bottom: 1px solid #969696;
        color: white
    }

        .aside-collapse a:hover, .aside-collapse a:focus {
            border-bottom: 1px solid #CD0505;
            text-decoration: none
        }

    .aside-collapse .dropdown a {
        -webkit-transition: .2s;
        -o-transition: .2s;
        transition: .2s
    }

    .aside-collapse .dropdown > a:after {
        font-family: 'FontAwesome';
        content: '\f105';
        position: absolute;
        top: 18px;
        right: 30px;
        right: 1.875rem
    }

    .aside-collapse .dropdown.active > a:after {
        content: '\f107'
    }

    .aside-collapse .active > a {
        border-bottom: 1px solid #CD0505
    }

    .aside-collapse .second {
        display: none
    }

        .aside-collapse .second a {
            padding: 16px 30px 16px 70px;
            padding: 1rem 1.875rem 1rem 4.375rem;
            background-color: #606060;
            border-bottom: 1px solid #686868
        }

            .aside-collapse .second a:hover, .aside-collapse .second a:focus {
                color: #9FC9ED;
                text-decoration: none
            }

            .aside-collapse .second a.active {
                color: #9FC9ED
            }

.ie9 .side-collapse, .ie8 .side-collapse {
    min-height: 100vh
}

@media screen and (max-width: 320px) {
    .aside-collapse a {
        padding-right: 10px;
        padding-left: 10px
    }

    .aside-collapse .second a {
        padding-left: 50px
    }
}

.member-card {
    position: relative;
    padding: 12px 20px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    min-height: 350px;
    overflow-y: hidden;
    background: white;
    border-bottom: 9px solid #CD0505
}

    .member-card .title {
        padding-top: 3px;
        padding-bottom: 15px;
        line-height: 1;
        border-bottom: 1px solid #CD0505;
        font-weight: normal
    }

    .member-card.-divider-2 {
        margin-bottom: 16px;
        margin-bottom: 1rem;
        min-height: 160px;
        min-height: 10rem
    }

    .member-card.-nopadding {
        padding: 0
    }

    .member-card.-unminheight {
        min-height: auto
    }

    .member-card.-empty-video, .member-card.-empty-line, .member-card.-empty-book {
        text-align: center
    }

        .member-card.-empty-video p, .member-card.-empty-line p, .member-card.-empty-book p {
            margin-bottom: 25px;
            padding-top: 25px;
            font-size: 28px;
            font-size: 1.75rem
        }

        .member-card.-empty-video .btn-red, .member-card.-empty-line .btn-red, .member-card.-empty-book .btn-red {
            padding-right: 25px;
            padding-left: 25px
        }

    .member-card.-empty-video {
        background: url(../images/empty-video.jpg) no-repeat center 49px #fff;
        background-size: contain;
        min-height: 255px
    }

    .member-card.-empty-book {
        background: url(../images/empty-book.jpg) no-repeat center 49px #fff;
        background-size: contain;
        min-height: 240px
    }

@media screen and (max-width: 768px) {
    .member-card {
        width: 100%;
        min-height: initial
    }

        .member-card.-divider-2 {
            width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1))
        }

            .member-card.-divider-2:nth-child(1n) {
                float: left;
                margin-right: 1rem;
                clear: none
            }

            .member-card.-divider-2:last-child {
                margin-right: 0
            }

            .member-card.-divider-2:nth-child(1n) {
                margin-right: 0;
                float: right
            }

            .member-card.-divider-2:nth-child(1n + 1) {
                clear: both
            }

        .member-card.-empty-video, .member-card.-empty-book {
            background-size: cover
        }
}

@media screen and (max-width: 480px) {
    .member-card {
        margin-bottom: 15px;
        padding-bottom: 0
    }

        .member-card.edit-collapse {
            border-bottom: 0
        }

            .member-card.edit-collapse dd {
                display: none
            }

            .member-card.edit-collapse .dropdown {
                position: relative
            }

                .member-card.edit-collapse .dropdown:after {
                    font-family: 'FontAwesome';
                    content: '\f067';
                    position: absolute;
                    right: 0
                }

                .member-card.edit-collapse .dropdown.active:after {
                    content: '\f068'
                }

        .member-card.-divider-2 {
            width: calc(99.9% * 1/1)
        }

            .member-card.-divider-2:nth-child(1n) {
                float: left;
                margin-right: 0;
                clear: none
            }

            .member-card.-divider-2:last-child {
                margin-right: 0
            }

            .member-card.-divider-2:nth-child(0n) {
                float: right
            }
}

@media screen and (max-width: 480px) {
    .js-readsum {
        -ms-flex-wrap: wrap !important;
        flex-wrap: wrap !important
    }
}

.pic-texts .pic {
    width: calc(99.9% * 44/100);
    position: relative;
    overflow: hidden
}

    .pic-texts .pic:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .pic-texts .pic:last-child {
        margin-right: 0
    }

    .pic-texts .pic:nth-child(0n) {
        float: right
    }

    .pic-texts .pic img {
        max-height: 341px;
        border-top-left-radius: 2px
    }

    .pic-texts .pic .edit {
        position: absolute;
        right: 8px;
        right: .5rem;
        bottom: 8px;
        bottom: .5rem;
        background: transparent;
        border: 0
    }

        .pic-texts .pic .edit + input {
            display: none
        }

        .pic-texts .pic .edit .fa {
            width: 50px;
            height: 50px;
            line-height: 50px;
            background: white;
            border-radius: 50%;
            font-size: 30px
        }

.pic-texts .headshot {
    min-height: 341px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.pic-texts .texts {
    width: calc(99.9% * 56/100);
    padding-right: 20px;
    padding-right: 1.25rem;
    padding-left: 16px;
    padding-left: 1rem;
    overflow: hidden
}

    .pic-texts .texts:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .pic-texts .texts:last-child {
        margin-right: 0
    }

    .pic-texts .texts:nth-child(0n) {
        float: right
    }

    .pic-texts .texts h3 {
        padding-top: 24px;
        padding-top: 1.5rem;
        padding-bottom: 24px;
        padding-bottom: 1.5rem
    }

        .pic-texts .texts h3 small {
            padding-left: 16px;
            padding-left: 1rem;
            color: #787878;
            font-weight: normal
        }

    .pic-texts .texts li {
        line-height: 35.5px;
        border-bottom: 1px solid #BCBCBC
    }

        .pic-texts .texts li:last-child {
            border-bottom-color: transparent
        }

    .pic-texts .texts .dt, .pic-texts .texts .dd {
        display: inline-block
    }

    .pic-texts .texts .dt {
        padding-right: 16px;
        padding-right: 1rem;
        width: 128px;
        width: 8rem
    }

    .pic-texts .texts .dd {
        min-width: 50%;
        color: #787878
    }

    .pic-texts .texts .-red {
        padding-left: 8px;
        padding-left: .5rem;
        font-size: 80%
    }

    .pic-texts .texts .-question {
        padding-left: 2px;
        font-size: 18px;
        color: #a8a8a8
    }

@media screen and (max-width: 480px) {
    .pic-texts .pic, .pic-texts .texts {
        width: 100%
    }

        .pic-texts .pic img {
            margin-right: auto;
            margin-left: auto;
            max-height: none
        }

    .pic-texts .headshot img {
        width: 100%
    }

    .pic-texts .texts h3 {
        padding-top: 15px;
        padding-bottom: 15px;
        text-align: center
    }

    .pic-texts .texts .dt {
        padding-right: .5rem;
        width: 6.5rem
    }
}

#upicture {
    display: none
}

.program-main .pic {
    width: calc(99.9% * 5/10);
    position: relative;
    overflow: hidden
}

    .program-main .pic:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .program-main .pic:last-child {
        margin-right: 0
    }

    .program-main .pic:nth-child(0n) {
        float: right
    }

.program-main .texts {
    width: calc(99.9% * 3/10);
    padding-right: 20px;
    padding-right: 1.25rem;
    padding-left: 16px;
    padding-left: 1rem;
    min-height: 447px;
    overflow: hidden
}

    .program-main .texts:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .program-main .texts:last-child {
        margin-right: 0
    }

    .program-main .texts:nth-child(0n) {
        float: right
    }

    .program-main .texts h3 {
        padding-top: 24px;
        padding-top: 1.5rem;
        padding-bottom: 24px;
        padding-bottom: 1.5rem
    }

        .program-main .texts h3 small {
            padding-left: 16px;
            padding-left: 1rem;
            color: #787878;
            font-weight: normal
        }

.program-main .count {
    width: calc(99.9% * 2/10);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;
    background: #E6E8F6
}

    .program-main .count:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .program-main .count:last-child {
        margin-right: 0
    }

    .program-main .count:nth-child(0n) {
        float: right
    }

    .program-main .count h3, .program-main .count .countdown, .program-main .count .allowed {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

    .program-main .count h3 {
        padding-top: 16px;
        padding-top: 1rem;
        color: #5771F3
    }

@media screen and (max-width: 480px) {
    .program-main .count h3 {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }
}

.program-main .count .countdown {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 239px
}

    .program-main .count .countdown .flip-clock-wrapper {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center
    }

.program-main .count .allowed {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 150px;
    background: #5771F3;
    color: white
}

.program-main .count .last {
    font-size: 60px;
    font-size: 3.75rem
}

    .program-main .count .last:after {
        font-family: 'FontAwesome';
        content: '\f007';
        padding-left: 8px;
        padding-left: .5rem;
        font-size: 50%
    }

.program-main .count:before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 0 25px 25px;
    border-color: transparent transparent transparent #FFF;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

@media screen and (max-width: 768px) {
    .program-main {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .program-main .pic, .program-main .texts, .program-main .count {
            width: 100%
        }

        .program-main .texts {
            min-height: auto
        }

        .program-main .count:before {
            display: none
        }

        .program-main .count .countdown {
            min-height: auto
        }

        .program-main .count .allowed {
            padding-top: 15px;
            padding-bottom: 8px;
            height: auto
        }

        .program-main .flip-clock-wrapper {
            padding: 0 0 41px
        }
}

@media screen and (max-width: 480px) {
    .program-main .pic, .program-main .texts, .program-main .count {
        width: 100%
    }
}

.ie9 .program-main .countdown, .ie8 .program-main .countdown {
    display: block
}

    .ie9 .program-main .countdown .flip-clock-wrapper, .ie8 .program-main .countdown .flip-clock-wrapper {
        display: block;
        overflow: hidden
    }

        .ie9 .program-main .countdown .flip-clock-wrapper ul, .ie8 .program-main .countdown .flip-clock-wrapper ul {
            width: 52px
        }

.ie9 .program-main .count .allowed, .ie8 .program-main .count .allowed {
    text-align: center
}

    .ie9 .program-main .count .allowed p, .ie8 .program-main .count .allowed p {
        padding-top: 16px;
        padding-top: 1rem
    }

.bookmark {
    position: absolute;
    top: 0;
    left: 16px;
    left: 1rem;
    padding: 8px;
    padding: .5rem;
    width: 48px;
    width: 3rem;
    background: #DAAE6B;
    font-size: 22px;
    color: white;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    -webkit-box-shadow: 2px 0 0 #906525;
    box-shadow: 2px 0 0 #906525;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    -webkit-animation-delay: .5s;
    animation-delay: .5s
}

    .bookmark img {
        display: inline-block !important;
        padding-bottom: 6px;
        padding-bottom: .375rem;
        padding-left: 3px;
        -webkit-animation-delay: 2s;
        animation-delay: 2s
    }

    .bookmark:before, .bookmark:after {
        content: '';
        position: absolute;
        bottom: -24px;
        bottom: -1.5rem;
        left: 0;
        z-index: 2;
        width: 0;
        height: 0;
        border-style: solid
    }

    .bookmark:before {
        border-width: 24px 48px 0 0;
        border-width: 1.5rem 3rem 0 0;
        border-color: #DAAE6B transparent transparent transparent
    }

    .bookmark:after {
        border-width: 0 48px 24px 0;
        border-width: 0 3rem 1.5rem 0;
        border-color: transparent #DAAE6B transparent transparent;
        -webkit-box-shadow: 2px 0 0 #906525;
        box-shadow: 2px 0 0 #906525
    }

    .bookmark .shadow:after {
        content: '';
        position: absolute;
        bottom: -26px;
        left: 0;
        z-index: 1;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 24px 48px 0 0;
        border-width: 1.5rem 3rem 0 0;
        border-color: #906525 transparent transparent transparent
    }

@media screen and (max-width: 768px) {
    .bookmark {
        top: auto;
        bottom: 1rem;
        left: 0;
        width: 13rem;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        -webkit-box-shadow: 0 2px 0 #906525;
        box-shadow: 0 2px 0 #906525
    }

        .bookmark:before, .bookmark:after {
            top: 0;
            left: 13rem
        }

        .bookmark:before {
            border-width: 3rem 1.5rem 0 0;
            border-color: #DAAE6B transparent transparent transparent
        }

        .bookmark:after {
            top: auto;
            bottom: 0;
            border-width: 3rem 0 0 1.5rem;
            border-color: transparent transparent transparent #DAAE6B;
            -webkit-box-shadow: 0 2px 0 #906525;
            box-shadow: 0 2px 0 #906525
        }

        .bookmark .shadow:after {
            top: 1px;
            bottom: auto;
            left: 13.1rem;
            border-width: 3rem 1.5rem 0 0;
            border-color: #906525 transparent transparent transparent
        }

        .bookmark img {
            position: relative;
            top: 6px;
            left: -2px;
            width: auto !important
        }
}

.js-notyet p.h3 {
    padding-top: 20px;
    padding-bottom: 20px
}

.info-notyet {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .info-notyet .pie-chart {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-top: 0;
        min-height: auto
    }

    .info-notyet .texts {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        padding-left: 16px;
        padding-left: 1rem
    }

        .info-notyet .texts > .button {
            margin-top: auto;
            margin-left: auto
        }

            .info-notyet .texts > .button > .btn-red {
                padding-right: 16px;
                padding-right: 1rem;
                padding-left: 16px;
                padding-left: 1rem
            }

@media screen and (max-width: 480px) {
    .js-notyet p.h3 {
        padding-top: 15px !important;
        padding-bottom: 15px
    }
}

.safari .info-notyet:before, .ie .info-notyet:before {
    content: '';
    display: table
}

.safari .info-notyet:after, .ie .info-notyet:after {
    content: '';
    display: table;
    clear: both
}

.safari .info-notyet .pie-chart, .ie .info-notyet .pie-chart {
    width: calc(99.9% * 1/3 - (1rem - 1rem * 1/3))
}

    .safari .info-notyet .pie-chart:nth-child(1n), .ie .info-notyet .pie-chart:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .safari .info-notyet .pie-chart:last-child, .ie .info-notyet .pie-chart:last-child {
        margin-right: 0
    }

    .safari .info-notyet .pie-chart:nth-child(3n), .ie .info-notyet .pie-chart:nth-child(3n) {
        margin-right: 0;
        float: right
    }

    .safari .info-notyet .pie-chart:nth-child(3n + 1), .ie .info-notyet .pie-chart:nth-child(3n + 1) {
        clear: both
    }

    .safari .info-notyet .pie-chart canvas, .ie .info-notyet .pie-chart canvas {
        width: 100%
    }

.safari .info-notyet .texts, .ie .info-notyet .texts {
    width: calc(99.9% * 2/3 - (1rem - 1rem * 2/3))
}

    .safari .info-notyet .texts:nth-child(1n), .ie .info-notyet .texts:nth-child(1n) {
        float: left;
        margin-right: 16px;
        margin-right: 1rem;
        clear: none
    }

    .safari .info-notyet .texts:last-child, .ie .info-notyet .texts:last-child {
        margin-right: 0
    }

    .safari .info-notyet .texts:nth-child(3n), .ie .info-notyet .texts:nth-child(3n) {
        margin-right: 0;
        float: right
    }

    .safari .info-notyet .texts:nth-child(3n + 1), .ie .info-notyet .texts:nth-child(3n + 1) {
        clear: both
    }

@media screen and (max-width: 480px) {
    .safari .info-notyet .pie-chart, .ie .info-notyet .pie-chart {
        width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2))
    }

        .safari .info-notyet .pie-chart:nth-child(1n), .ie .info-notyet .pie-chart:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .safari .info-notyet .pie-chart:last-child, .ie .info-notyet .pie-chart:last-child {
            margin-right: 0
        }

        .safari .info-notyet .pie-chart:nth-child(2n), .ie .info-notyet .pie-chart:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .safari .info-notyet .pie-chart:nth-child(2n + 1), .ie .info-notyet .pie-chart:nth-child(2n + 1) {
            clear: both
        }

    .safari .info-notyet .texts, .ie .info-notyet .texts {
        width: calc(99.9% * 1/2 - (1rem - 1rem * 1/2))
    }

        .safari .info-notyet .texts:nth-child(1n), .ie .info-notyet .texts:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .safari .info-notyet .texts:last-child, .ie .info-notyet .texts:last-child {
            margin-right: 0
        }

        .safari .info-notyet .texts:nth-child(2n), .ie .info-notyet .texts:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .safari .info-notyet .texts:nth-child(2n + 1), .ie .info-notyet .texts:nth-child(2n + 1) {
            clear: both
        }
}

@media screen and (max-width: 320px) {
    .safari .info-notyet .pie-chart, .ie .info-notyet .pie-chart {
        width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1))
    }

        .safari .info-notyet .pie-chart:nth-child(1n), .ie .info-notyet .pie-chart:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .safari .info-notyet .pie-chart:last-child, .ie .info-notyet .pie-chart:last-child {
            margin-right: 0
        }

        .safari .info-notyet .pie-chart:nth-child(1n), .ie .info-notyet .pie-chart:nth-child(1n) {
            margin-right: 0;
            float: right
        }

        .safari .info-notyet .pie-chart:nth-child(1n + 1), .ie .info-notyet .pie-chart:nth-child(1n + 1) {
            clear: both
        }

    .safari .info-notyet .texts, .ie .info-notyet .texts {
        width: calc(99.9% * 1/1 - (1rem - 1rem * 1/1))
    }

        .safari .info-notyet .texts:nth-child(1n), .ie .info-notyet .texts:nth-child(1n) {
            float: left;
            margin-right: 1rem;
            clear: none
        }

        .safari .info-notyet .texts:last-child, .ie .info-notyet .texts:last-child {
            margin-right: 0
        }

        .safari .info-notyet .texts:nth-child(1n), .ie .info-notyet .texts:nth-child(1n) {
            margin-right: 0;
            float: right
        }

        .safari .info-notyet .texts:nth-child(1n + 1), .ie .info-notyet .texts:nth-child(1n + 1) {
            clear: both
        }
}

.ie9 .info-notyet .pie-chart .pie-value, .ie8 .info-notyet .pie-chart .pie-value {
    text-align: center;
    line-height: 6
}

.big-number > .time {
    display: block;
    padding-bottom: 10px;
    font-size: 15px;
    color: #787878
}

.big-number h3 {
    padding-bottom: 0
}

.big-number .huge {
    margin-bottom: 0
}

    .big-number .huge em {
        font-size: 70px;
        font-style: normal
    }

@media screen and (max-width: 480px) {
    .big-number .huge {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: baseline;
        -ms-flex-align: baseline;
        align-items: baseline
    }
}

.mag-thumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1%
}

    .mag-thumb .img {
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto
    }

    .mag-thumb .texts {
        -webkit-box-flex: 4;
        -ms-flex: 4 1 auto;
        flex: 4 1 auto;
        padding-left: 1%
    }

        .mag-thumb .texts time {
            display: block;
            color: #787878
        }

        .mag-thumb .texts .btn-red {
            display: inline-block;
            width: auto;
            padding-right: 25px;
            padding-left: 25px
        }

@media screen and (max-width: 1920px) {
    .mag-thumb {
        min-height: 261px
    }
}

@media screen and (max-width: 480px) {
    .mag-thumb {
        display: block;
        padding: 15px 0 0
    }

        .mag-thumb:last-child {
            display: none
        }

        .mag-thumb .img img {
            margin-right: auto;
            margin-left: auto
        }

        .mag-thumb .texts {
            text-align: center
        }

        .mag-thumb .texts {
            padding-left: 0
        }

            .mag-thumb .texts > p:first-child {
                margin-bottom: 0;
                padding-top: 15px;
                padding-bottom: 15px
            }

            .mag-thumb .texts > p:nth-of-type(2) {
                margin-bottom: 15px
            }

        .mag-thumb .btn-red {
            margin-bottom: 3px
        }
}

.ie9 .mag-thumb:before, .ie8 .mag-thumb:before {
    content: '';
    display: table
}

.ie9 .mag-thumb:after, .ie8 .mag-thumb:after {
    content: '';
    display: table;
    clear: both
}

.ie9 .mag-thumb .img, .ie8 .mag-thumb .img {
    width: calc(99.9% * 1/4)
}

    .ie9 .mag-thumb .img:nth-child(1n), .ie8 .mag-thumb .img:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .ie9 .mag-thumb .img:last-child, .ie8 .mag-thumb .img:last-child {
        margin-right: 0
    }

    .ie9 .mag-thumb .img:nth-child(0n), .ie8 .mag-thumb .img:nth-child(0n) {
        float: right
    }

.ie9 .mag-thumb .texts, .ie8 .mag-thumb .texts {
    width: calc(99.9% * 3/4)
}

    .ie9 .mag-thumb .texts:nth-child(1n), .ie8 .mag-thumb .texts:nth-child(1n) {
        float: left;
        margin-right: 0;
        clear: none
    }

    .ie9 .mag-thumb .texts:last-child, .ie8 .mag-thumb .texts:last-child {
        margin-right: 0
    }

    .ie9 .mag-thumb .texts:nth-child(0n), .ie8 .mag-thumb .texts:nth-child(0n) {
        float: right
    }

.alert-message, #toast-container {
    position: fixed;
    z-index: 99999
}

    .alert-message .alert, .alert-message .submit, .alert-message .cancel, #toast-container .alert, #toast-container .submit, #toast-container .cancel {
        margin-right: 8px;
        margin-right: .5rem
    }

    .alert-message .alert, #toast-container .alert {
        margin-bottom: 16px;
        margin-bottom: 1rem;
        padding: 16px;
        padding: 1rem;
        width: 100%;
        background: #1EAF7D
    }

    .alert-message .submit, #toast-container .submit {
        background: #F3F3F3;
        border: 1px solid #F3F3F3;
        color: #787878
    }

    .alert-message .cancel, #toast-container .cancel {
        background: transparent;
        border: 1px solid transparent;
        text-decoration: underline
    }

#toast-container {
    right: 30px;
    right: 1.875rem
}

    #toast-container .toast-close-button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        position: absolute;
        right: 16px;
        right: 1rem;
        top: 8.8px;
        top: .55rem;
        background: transparent;
        border: none;
        font-size: 32px;
        font-size: 2rem;
        color: white
    }

@media screen and (max-width: 480px) {
    #toast-container {
        right: 1rem
    }
}

.alert-message {
    display: none
}

.trade-table, .program-table, .collect-table {
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    width: 100%
}

    .trade-table thead, .program-table thead, .collect-table thead {
        border-bottom: 2px solid #666
    }

        .trade-table th, .program-table th, .collect-table th, .trade-table thead > tr > th, .program-table thead > tr > th, .collect-table thead > tr > th {
            padding: 30px 14px 0;
            padding: 30px .875rem 0;
            line-height: 50px;
            line-height: 3.125rem;
            text-align: left;
            font-size: 18px;
            white-space: nowrap
        }

    .trade-table:not(.-coupon) th:nth-of-type(5), .program-table:not(.-coupon) th:nth-of-type(5), .collect-table:not(.-coupon) th:nth-of-type(5), .trade-table:not(.-coupon) thead > tr > th:nth-of-type(5), .program-table:not(.-coupon) thead > tr > th:nth-of-type(5), .collect-table:not(.-coupon) thead > tr > th:nth-of-type(5) {
        padding-right: 18px;
        background-position-x: right;
        text-align: right
    }

    .trade-table tbody > tr, .program-table tbody > tr, .collect-table tbody > tr {
        border-bottom: 1px solid #BCBCBC
    }

        .trade-table td, .program-table td, .collect-table td, .trade-table tbody > tr > td, .program-table tbody > tr > td, .collect-table tbody > tr > td {
            padding: 14px;
            padding: .875rem;
            color: #787878
        }

            .trade-table td p:last-child, .program-table td p:last-child, .collect-table td p:last-child, .trade-table tbody > tr > td p:last-child, .program-table tbody > tr > td p:last-child, .collect-table tbody > tr > td p:last-child {
                margin-bottom: 0
            }

            .trade-table td:nth-of-type(3) a, .program-table td:nth-of-type(3) a, .collect-table td:nth-of-type(3) a, .trade-table tbody > tr > td:nth-of-type(3) a, .program-table tbody > tr > td:nth-of-type(3) a, .collect-table tbody > tr > td:nth-of-type(3) a {
                color: black
            }

                .trade-table td:nth-of-type(3) a:hover, .program-table td:nth-of-type(3) a:hover, .collect-table td:nth-of-type(3) a:hover, .trade-table tbody > tr > td:nth-of-type(3) a:hover, .program-table tbody > tr > td:nth-of-type(3) a:hover, .collect-table tbody > tr > td:nth-of-type(3) a:hover {
                    color: #B40505
                }

            .trade-table td:nth-of-type(4):not(.rowspan), .program-table td:nth-of-type(4):not(.rowspan), .collect-table td:nth-of-type(4):not(.rowspan), .trade-table tbody > tr > td:nth-of-type(4):not(.rowspan), .program-table tbody > tr > td:nth-of-type(4):not(.rowspan), .collect-table tbody > tr > td:nth-of-type(4):not(.rowspan) {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                justify-content: space-between
            }

            .trade-table td p, .program-table td p, .collect-table td p, .trade-table tbody > tr > td p, .program-table tbody > tr > td p, .collect-table tbody > tr > td p {
                margin-bottom: 0
            }

    .trade-table .dollar-icon, .program-table .dollar-icon, .collect-table .dollar-icon {
        text-align: right
    }

        .trade-table .dollar-icon:before, .program-table .dollar-icon:before, .collect-table .dollar-icon:before {
            content: '$ '
        }

    .trade-table .account, .program-table .account, .collect-table .account {
        float: right;
        display: inline-block;
        min-width: 36px;
        text-align: center
    }

        .trade-table .account:before, .program-table .account:before, .collect-table .account:before {
            content: '';
            display: table
        }

        .trade-table .account:after, .program-table .account:after, .collect-table .account:after {
            content: '';
            display: table;
            clear: both
        }

    .trade-table .summary, .program-table .summary, .collect-table .summary {
        display: none
    }

.member-h1 + .member-row .trade-table tbody > tr > td:nth-of-type(4):not(.rowspan), .member-h1 + .member-row .program-table tbody > tr > td:nth-of-type(4):not(.rowspan), .member-h1 + .member-row .collect-table tbody > tr > td:nth-of-type(4):not(.rowspan) {
    display: table-cell
}

@media screen and (max-width: 768px) {
    .trade-table, .program-table, .collect-table {
        display: block;
        overflow-x: hidden
    }

        .trade-table thead, .program-table thead, .collect-table thead, .trade-table tbody, .program-table tbody, .collect-table tbody, .trade-table th, .program-table th, .collect-table th, .trade-table tr, .program-table tr, .collect-table tr {
            display: block
        }

        .trade-table td, .program-table td, .collect-table td {
            white-space: normal !important
        }

        .trade-table .dollar-icon, .program-table .dollar-icon, .collect-table .dollar-icon {
            text-align: left
        }

        .trade-table .account, .program-table .account, .collect-table .account {
            float: none;
            padding: 4px
        }

            .trade-table .account:before, .program-table .account:before, .collect-table .account:before {
                content: "*";
                display: inline-block;
                padding-right: 4px;
                line-height: 1.1
            }

        .trade-table .summary, .program-table .summary, .collect-table .summary {
            display: block
        }

    .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td, .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td, .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td {
        padding-left: 5.5rem;
        line-height: 1.1
    }

        .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:nth-child(4), .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:nth-child(4), .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:nth-child(4) {
            padding-left: 0
        }

        .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:before, .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:before, .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:before {
            content: '';
            position: absolute;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 5.5rem
        }

        .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:nth-child(1):before, .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:nth-child(1):before, .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:nth-child(1):before {
            content: '訂單內容'
        }

        .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:nth-child(2):before, .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:nth-child(2):before, .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:nth-child(2):before {
            content: '訂閱期數'
        }

        .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:nth-child(3), .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:nth-child(3), .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:nth-child(3) {
            padding-right: 0
        }

            .main-content .member-row:nth-of-type(1) .trade-table:not(.-coupon) tbody > tr > td:nth-child(3):before, .main-content .member-row:nth-of-type(1) .program-table:not(.-coupon) tbody > tr > td:nth-child(3):before, .main-content .member-row:nth-of-type(1) .collect-table:not(.-coupon) tbody > tr > td:nth-child(3):before {
                content: '訂閱起迄日'
            }

    .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td {
        padding-left: 5rem;
        line-height: 1.1
    }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:before {
            content: '';
            position: absolute;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 5rem
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(1):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(1):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(1):before {
            content: '訂單日期'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(2):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(2):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(2):before {
            content: '訂單編號'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(3):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(3):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(3):before {
            content: '訂購平台'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(4):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(4):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(4):before {
            content: '品項';
            padding-top: 4px
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(5):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(5):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(5):before {
            content: '總數'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(6):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(6):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(6):before {
            content: '訂單金額'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(7):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(7):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(7):before {
            content: '訂單狀態'
        }

        .main-content .member-row:nth-of-type(2) .trade-table:not(.-coupon) tbody > tr > td:nth-child(8):before, .main-content .member-row:nth-of-type(2) .program-table:not(.-coupon) tbody > tr > td:nth-child(8):before, .main-content .member-row:nth-of-type(2) .collect-table:not(.-coupon) tbody > tr > td:nth-child(8):before {
            content: '發票號碼'
        }
}

.rowspan {
    padding-top: 0 !important;
    padding-bottom: 0 !important
}

    .rowspan p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 0;
        padding: 14px 0;
        border-bottom: 1px solid #BCBCBC;
        line-height: 1.25
    }

        .rowspan p:last-child {
            border-bottom: none
        }

@media screen and (max-width: 768px) {
    .rowspan p {
        padding-top: 0;
        padding-bottom: .4rem;
        line-height: initial;
        white-space: normal
    }

        .rowspan p + p {
            padding-top: .4rem
        }
}

.program-table thead > tr > th:nth-of-type(5), .program-table tbody > tr > td:nth-of-type(5) {
    text-align: center
}

@media screen and (max-width: 768px) {
    .program-table tbody > tr > td {
        min-height: 30px
    }

        .program-table tbody > tr > td:nth-child(1) {
            line-height: 1.1
        }

        .program-table tbody > tr > td:nth-of-type(3) a {
            color: #CD0505
        }

        .program-table tbody > tr > td:nth-of-type(5) {
            line-height: 1.1;
            text-align: left
        }

            .program-table tbody > tr > td:nth-of-type(5) a {
                text-align: left
            }

        .program-table tbody > tr > td:before {
            content: '';
            position: absolute;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 5rem
        }

        .program-table tbody > tr > td:nth-child(1):before {
            content: '活動日期'
        }

        .program-table tbody > tr > td:nth-child(2):before {
            content: '活動類型'
        }

        .program-table tbody > tr > td:nth-child(3):before {
            content: '活動主題'
        }

        .program-table tbody > tr > td:nth-child(4):before {
            content: '狀　　態'
        }

        .program-table tbody > tr > td:nth-child(5):before {
            content: '活動花絮'
        }
}

.trade-table.-coupon td, .-coupon.program-table td, .-coupon.collect-table td, .trade-table.-coupon tbody > tr > td, .-coupon.program-table tbody > tr > td, .-coupon.collect-table tbody > tr > td {
    white-space: nowrap
}

.trade-table.-coupon .dollar-icon, .-coupon.program-table .dollar-icon, .-coupon.collect-table .dollar-icon {
    text-align: left
}

@media screen and (max-width: 768px) {
    .trade-table.-coupon tbody > tr > td, .-coupon.program-table tbody > tr > td, .-coupon.collect-table tbody > tr > td {
        line-height: 1.1
    }

        .trade-table.-coupon tbody > tr > td:before, .-coupon.program-table tbody > tr > td:before, .-coupon.collect-table tbody > tr > td:before {
            content: attr(data-coupon);
            position: absolute;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 5.5rem
        }
}

.app-warning {
    display: none
}

@media screen and (max-width: 768px) {
    .app-warning {
        display: block;
        padding-top: 20px
    }
}

.collect-table thead > tr > th, .collect-table th, .collect-table tbody > tr > td, .collect-table td {
    white-space: nowrap;
    text-align: center
}

    .collect-table thead > tr > th:nth-of-type(3), .collect-table th:nth-of-type(3), .collect-table tbody > tr > td:nth-of-type(3), .collect-table td:nth-of-type(3) {
        text-align: left;
        white-space: normal
    }

.collect-table thead > tr > th, .collect-table th {
    background-position-x: calc(50% + 3rem)
}

    .collect-table thead > tr > th:nth-of-type(3), .collect-table th:nth-of-type(3) {
        background-position-x: 88px;
        background-position-x: 5.5rem
    }

    .collect-table thead > tr > th:nth-of-type(5), .collect-table th:nth-of-type(5) {
        text-align: center
    }

    .collect-table thead > tr > th:nth-of-type(1), .collect-table thead > tr > th:nth-of-type(2), .collect-table thead > tr > th:nth-of-type(4), .collect-table thead > tr > th:nth-of-type(5), .collect-table th:nth-of-type(1), .collect-table th:nth-of-type(2), .collect-table th:nth-of-type(4), .collect-table th:nth-of-type(5) {
        width: 10%
    }

    .collect-table thead > tr > th:nth-of-type(3), .collect-table th:nth-of-type(3) {
        width: 50%
    }

.collect-table a {
    display: block;
    color: #787878
}

@media screen and (max-width: 768px) {
    .collect-table:not(.-collection):not(.-course) tbody > tr {
        position: relative;
        display: block !important
    }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(4) {
            line-height: 1
        }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:before {
            content: '';
            position: absolute;
            left: 0;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            width: 5rem
        }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(1):before {
            content: '收藏日期' !important
        }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(2):before {
            content: '文章來源' !important
        }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(3):before {
            content: '文章標題' !important
        }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(4) {
            padding-left: 5.5rem !important
        }

            .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(4):before {
                content: '上刊日期' !important
            }

        .collect-table:not(.-collection):not(.-course) tbody > tr > td:nth-child(5) {
            position: absolute;
            top: .4rem;
            right: 0;
            padding: 0;
            width: auto;
            line-height: 24px;
            font-size: 18px
        }
}

.collect-table.-collection thead > tr > th, .collect-table.-collection th, .collect-table.-course thead > tr > th, .collect-table.-course th {
    background-position-x: calc(50% + 2.7rem)
}

    .collect-table.-collection thead > tr > th:nth-of-type(3), .collect-table.-collection th:nth-of-type(3), .collect-table.-course thead > tr > th:nth-of-type(3), .collect-table.-course th:nth-of-type(3) {
        background-position-x: 52px
    }

    .collect-table.-collection thead > tr > th:nth-of-type(5), .collect-table.-collection th:nth-of-type(5), .collect-table.-course thead > tr > th:nth-of-type(5), .collect-table.-course th:nth-of-type(5) {
        background-position-x: 96px
    }

.collect-table.-collection tbody > tr > td:nth-child(4), .collect-table.-course tbody > tr > td:nth-child(4) {
    display: table-cell
}

@media screen and (max-width: 1024px) {
    .collect-table.-collection thead > tr > th:nth-of-type(3), .collect-table.-collection th:nth-of-type(3), .collect-table.-collection tbody > tr > td:nth-of-type(3), .collect-table.-collection td:nth-of-type(3), .collect-table.-course thead > tr > th:nth-of-type(3), .collect-table.-course th:nth-of-type(3), .collect-table.-course tbody > tr > td:nth-of-type(3), .collect-table.-course td:nth-of-type(3) {
        background-position-x: 52px
    }

    .collect-table.-collection thead > tr > th:nth-of-type(5), .collect-table.-collection th:nth-of-type(5), .collect-table.-collection tbody > tr > td:nth-of-type(5), .collect-table.-collection td:nth-of-type(5), .collect-table.-course thead > tr > th:nth-of-type(5), .collect-table.-course th:nth-of-type(5), .collect-table.-course tbody > tr > td:nth-of-type(5), .collect-table.-course td:nth-of-type(5) {
        background-position-x: 50px
    }
}

@media screen and (max-width: 768px) {
    .collect-table.-collection tbody > tr, .collect-table.-course tbody > tr {
        position: relative
    }

        .collect-table.-collection tbody > tr > td:nth-child(1):before, .collect-table.-course tbody > tr > td:nth-child(1):before {
            content: '加入日期' !important
        }

        .collect-table.-collection tbody > tr > td:nth-child(2):before, .collect-table.-course tbody > tr > td:nth-child(2):before {
            content: '商品分類' !important
        }

        .collect-table.-collection tbody > tr > td:nth-child(3), .collect-table.-course tbody > tr > td:nth-child(3) {
            line-height: 1.5
        }

            .collect-table.-collection tbody > tr > td:nth-child(3):before, .collect-table.-course tbody > tr > td:nth-child(3):before {
                content: '商品' !important
            }

        .collect-table.-collection tbody > tr > td:nth-child(4), .collect-table.-course tbody > tr > td:nth-child(4) {
            padding-left: 5.5rem !important
        }

            .collect-table.-collection tbody > tr > td:nth-child(4):before, .collect-table.-course tbody > tr > td:nth-child(4):before {
                content: '可否購買' !important
            }

        .collect-table.-collection tbody > tr > td:nth-child(5):before, .collect-table.-course tbody > tr > td:nth-child(5):before {
            content: '售價' !important
        }

        .collect-table.-collection tbody > tr > td:nth-child(6), .collect-table.-course tbody > tr > td:nth-child(6) {
            position: absolute;
            top: .4rem;
            right: 0;
            padding-top: 0;
            padding-right: 0;
            width: auto;
            line-height: 24px;
            font-size: 18px
        }
}

th.header, th.headerSortUp, th.headerSortDown {
    background-repeat: no-repeat;
    background-position: 5.5rem calc(50% + 15px)
}

th.header {
    background-image: url(../vendor/tablesorter/bg.png);
    cursor: pointer
}

th.headerSortUp {
    background-image: url(../vendor/tablesorter/down.png)
}

th.headerSortDown {
    background-image: url(../vendor/tablesorter/up.png)
}

.style-overdue, .style-yet, .style-finish, .style-false {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

    .style-overdue:before, .style-yet:before, .style-finish:before, .style-false:before {
        font-family: 'FontAwesome';
        padding-right: 8px;
        padding-right: .5rem
    }

    .style-overdue span:not(.style-way), .style-yet span:not(.style-way), .style-finish span:not(.style-way), .style-false span:not(.style-way) {
        margin-right: 4px
    }

    .style-overdue:before {
        content: '\f05e'
    }

.style-yet {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #F90
}

    .style-yet:before {
        content: '\f071'
    }

    .style-yet.-coffee:before {
        content: '\f0f4'
    }

    .style-yet.-times:before {
        content: '\f057'
    }

.style-finish {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    color: #0597CD
}

    .style-finish:before {
        content: '\f058'
    }

.style-false {
    color: #CD0505
}

    .style-false:before {
        content: '\f057'
    }

.style-way {
    display: inline-block;
    padding-right: 4px;
    padding-right: .25rem;
    padding-left: 4px;
    padding-left: .25rem;
    line-height: 16px;
    line-height: 1rem;
    vertical-align: text-bottom;
    font-size: 13px;
    white-space: nowrap
}

    .style-way.-orange {
        border: 1px solid #F90;
        color: #F90
    }

        .style-way.-orange:hover, .style-way.-orange:focus {
            color: #F90
        }

    .style-way.-red {
        border: 1px solid #CD0505;
        color: #CD0505
    }

        .style-way.-red:hover, .style-way.-red:focus {
            color: #CD0505
        }

    .style-way.-pay, .style-way.-shipments {
        padding: 4px;
        padding: .25rem;
        line-height: initial;
        border-radius: 2px;
        font-size: 16px;
        font-size: 1rem;
        color: #fff
    }

        .style-way.-pay:hover, .style-way.-pay:focus, .style-way.-shipments:hover, .style-way.-shipments:focus {
            background-color: #e88b00;
            text-decoration: none
        }

        .style-way.-pay i, .style-way.-shipments i {
            padding: 0 4px;
            padding: 0 .25rem
        }

    .style-way.-pay {
        border: 1px solid #F90;
        background-color: #F90
    }

    .style-way.-shipments {
        border: 1px solid #008cdc;
        background-color: #008cdc
    }

        .style-way.-shipments:hover, .style-way.-shipments:focus {
            background-color: #0076ba
        }

@media screen and (max-width: 320px) {
    .style-finish, .style-yet {
        display: inline-block
    }

        .style-finish .style-way, .style-yet .style-way {
            margin-top: 4px
        }
}

@media screen and (max-width: 768px) {
    .collect-table, .program-table, .trade-table, .program-table, .collect-table {
        margin-bottom: 60px
    }

        .collect-table thead, .collect-table thead > tr > th, .collect-table th, .program-table thead, .program-table thead > tr > th, .program-table th, .trade-table thead, .program-table thead, .collect-table thead, .trade-table thead > tr > th, .program-table thead > tr > th, .collect-table thead > tr > th, .trade-table th, .program-table th, .collect-table th {
            display: none
        }

        .collect-table tbody > tr > td, .program-table tbody > tr > td, .trade-table tbody > tr > td, .program-table tbody > tr > td, .collect-table tbody > tr > td {
            position: relative;
            display: inline-block;
            padding-top: .4rem;
            padding-bottom: .4rem;
            padding-left: 5rem;
            width: 100%;
            text-align: left
        }
}

.member-idxtable, .package-table {
    width: 100%
}

    .member-idxtable thead, .package-table thead {
        border-bottom: 2px solid #666
    }

        .member-idxtable th, .member-idxtable thead > tr > th, .package-table th, .package-table thead > tr > th {
            padding: 30px 14px 0;
            padding: 30px .875rem 0;
            line-height: 50px;
            line-height: 3.125rem;
            text-align: center;
            font-size: 18px;
            white-space: nowrap
        }

    .member-idxtable tbody > tr, .package-table tbody > tr {
        border-bottom: 1px solid #BCBCBC
    }

        .member-idxtable td, .member-idxtable tbody > tr > td, .package-table td, .package-table tbody > tr > td {
            padding: 14px;
            padding: .875rem;
            text-align: center;
            color: #787878
        }

            .member-idxtable td p, .member-idxtable tbody > tr > td p, .package-table td p, .package-table tbody > tr > td p {
                margin-bottom: 0
            }

    .member-idxtable .btn-red, .member-idxtable .btn-tag, .package-table .btn-red, .package-table .btn-tag {
        height: 36px
    }

    .member-idxtable .btn-red, .package-table .btn-red {
        margin-bottom: 0;
        padding: 5px 10px;
        line-height: 1.5;
        font-size: 16px;
        font-size: 1rem
    }

.index-coupon {
    display: grid;
    grid-template-columns: .5fr .5fr;
    grid-column-gap: 1.5%
}

    .index-coupon > .lg {
        width: 100%
    }

@media screen and (min-width: 1441px) {
    .index-coupon > .lg > .member-card {
        display: grid;
        grid-template-rows: [h3] 37px [table] 310px [button] 90px
    }

    .index-coupon > .lg h3 {
        grid-row-start: h3 1
    }

    .index-coupon > .lg table {
        grid-row-start: table 1
    }

        .index-coupon > .lg table tbody {
            height: 226px
        }

            .index-coupon > .lg table tbody > tr {
                border-bottom-color: transparent
            }

        .index-coupon > .lg table td {
            height: 71px
        }

    .index-coupon > .lg .idxtable-footer {
        grid-row-start: button 1;
        -ms-flex-item-align: center;
        align-self: center;
        width: 100%;
        position: relative
    }

        .index-coupon > .lg .idxtable-footer:after {
            content: '';
            position: absolute;
            left: 0;
            top: -42px;
            right: 0;
            width: 100%;
            height: 1px;
            background: #BCBCBC
        }

        .index-coupon > .lg .idxtable-footer .btn-red {
            margin-bottom: 0
        }
}

@media screen and (max-width: 1440px) {
    .index-coupon {
        grid-template-columns: 1fr
    }
}

@media screen and (max-width: 1366px) {
    .member-idxtable th, .member-idxtable thead > tr > th, .member-idxtable td, .member-idxtable tbody > tr > td, .package-table th, .package-table thead > tr > th, .package-table td, .package-table tbody > tr > td {
        padding-right: 8px;
        padding-left: 8px
    }
}

@media screen and (max-width: 768px) {
    .member-idxtable th, .member-idxtable thead > tr > th, .package-table th, .package-table thead > tr > th {
        display: none
    }

    .member-idxtable td, .member-idxtable tbody > tr > td, .package-table td, .package-table tbody > tr > td {
        position: relative;
        display: block;
        padding-top: .4rem;
        padding-bottom: .4rem;
        padding-left: 6rem;
        text-align: left
    }

        .member-idxtable td:before, .member-idxtable tbody > tr > td:before, .package-table td:before, .package-table tbody > tr > td:before {
            content: attr(data-title);
            position: absolute;
            top: 6px;
            left: 0
        }
}

.package-table .w-15 {
    width: 15%
}

.package-table .w-20 {
    width: 20%
}

.package-table .w-65 {
    width: 65%
}

.package-table .info {
    text-align: left
}

    .package-table .info h4, .package-table .info p {
        margin-bottom: 4px
    }

    .package-table .info h4 {
        margin-top: 0;
        font-size: 18px;
        color: #000
    }

.package-table ._checkbox-breakline {
    text-decoration: underline
}

    .package-table ._checkbox-breakline:hover {
        color: #CD0505
    }

.learning-table {
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    width: 100%
}

    .learning-table thead {
        border-bottom: 2px solid #666
    }

        .learning-table th, .learning-table thead > tr > th {
            padding: 30px 14px 0;
            padding: 30px .875rem 0;
            line-height: 50px;
            line-height: 3.125rem;
            text-align: left;
            font-size: 18px;
            white-space: nowrap
        }

            .learning-table th:first-of-type, .learning-table thead > tr > th:first-of-type {
                width: 26%
            }

    .learning-table tbody > tr {
        border-bottom: 1px solid #BCBCBC
    }

        .learning-table td, .learning-table tbody > tr > td {
            padding: 14px;
            padding: .875rem;
            color: #787878
        }

    .learning-table a {
        color: #787878
    }

@media screen and (max-width: 768px) {
    .-table-responsive ~ ._doctor:last-of-type {
        margin-bottom: 32px
    }
}

[data-tooltip] {
    position: relative;
    z-index: 2;
    cursor: pointer
}

    [data-tooltip]:before, [data-tooltip]:after {
        visibility: hidden;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        pointer-events: none
    }

    [data-tooltip]:before {
        position: absolute;
        bottom: 120%;
        left: 60%;
        margin-bottom: 5px;
        margin-left: -40px;
        padding: 7px;
        width: 60px;
        width: 3.75rem;
        border-radius: 3px;
        background-color: #F90;
        color: #fff;
        content: attr(data-tooltip);
        text-align: center;
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.2
    }

    [data-tooltip]:after {
        position: absolute;
        bottom: 120%;
        left: 60%;
        margin-left: -14px;
        width: 0;
        border-top: 5px solid #F90;
        border-top: 5px solid #F90;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        content: " ";
        font-size: 0;
        line-height: 0
    }

    [data-tooltip]:hover:before, [data-tooltip]:hover:after {
        visibility: visible;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }

    [data-tooltip].analystic-tooltip, [data-tooltip].analystic-collect, [data-tooltip].smart-tooltip {
        padding-left: 4px;
        padding-left: .25rem;
        color: #a8a8a8
    }

        [data-tooltip].analystic-tooltip:before, [data-tooltip].analystic-tooltip:after, [data-tooltip].analystic-collect:before, [data-tooltip].analystic-collect:after, [data-tooltip].smart-tooltip:before, [data-tooltip].smart-tooltip:after {
            bottom: 110%;
            left: 110%
        }

        [data-tooltip].analystic-tooltip:before, [data-tooltip].analystic-collect:before, [data-tooltip].smart-tooltip:before {
            margin-left: -80px;
            margin-left: -5rem;
            padding: 12px;
            width: 160px;
            width: 10rem;
            background-color: #a8a8a8;
            text-align: left;
            font-size: 15px
        }

        [data-tooltip].analystic-tooltip:after, [data-tooltip].analystic-collect:after, [data-tooltip].smart-tooltip:after {
            border-top-color: #a8a8a8
        }

        [data-tooltip].analystic-collect:before {
            margin-left: -68.8px;
            margin-left: -4.3rem;
            width: 116px;
            width: 7.25rem;
            word-break: break-all;
            white-space: normal
        }

@media screen and (max-width: 768px) {
    .analystic-collect {
        display: none
    }
}

.tag-cloud, .hot-words {
    position: relative;
    width: 100%;
    height: 277px;
    overflow: hidden
}

.tile-container {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 0;
    line-height: 0;
    background: #FFF4D3
}

.tile-block {
    position: relative;
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    line-height: 100%
}

.tile-item {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #ccc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    opacity: 0;
    font-size: 18px;
    font-weight: normal
}

    .tile-item a {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        padding: 0 4px;
        padding: 0 .25rem;
        width: 100%;
        height: 100%;
        line-height: 1.25
    }

.tile-item--active {
    z-index: 10;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1
}

.tile-item--new-active {
    z-index: 20;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    opacity: 1;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

@-webkit-keyframes typing {
    from {
        width: 0
    }
}

@keyframes typing {
    from {
        width: 0
    }
}

@-webkit-keyframes tshadow {
    from,to {
        border-right: 1px solid white;
        50%

{
}

border-right:1px solid transparent
}
}

@keyframes tshadow {
    from,to {
        border-right: 1px solid white;
        50%

{
}

border-right:1px solid transparent
}
}

.wip {
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #ccc
}

.tile-item--new-active--left {
    left: -100%
}

.transition-in-left {
    left: 0px
}

.tile-item--new-active--right {
    right: -100%
}

.transition-in-right {
    right: 0px
}

.tile-item--new-active--top {
    top: -100%
}

.transition-in-top {
    top: 0px
}

.tile-item--new-active--bottom {
    bottom: -100%
}

.transition-in-bottom {
    bottom: 0px
}

.big-list {
    padding-top: 4px;
    padding-top: .25rem
}

    .big-list p {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        padding-top: 8px;
        padding-top: .5rem
    }

    .big-list a {
        color: #000
    }

        .big-list a:hover {
            text-decoration: underline
        }

    .big-list em {
        padding-right: 8px;
        padding-right: .5rem;
        line-height: 99%;
        font-size: 50px;
        font-style: normal
    }

.good-book {
    position: relative;
    padding: 12px 20px;
    padding: 0.75rem 1.25rem;
    margin-bottom: 30px;
    margin-bottom: 1.875rem;
    min-height: 350px;
    overflow-y: hidden;
    background: #CD0505;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #CD0505), color-stop(50%, #fff));
    background: -webkit-linear-gradient(top, #CD0505 50%, #fff 50%);
    background: -o-linear-gradient(top, #CD0505 50%, #fff 50%);
    background: linear-gradient(to bottom, #CD0505 50%, #fff 50%)
}

    .good-book img {
        padding-top: 16px;
        padding-top: 1rem;
        padding-bottom: 8px;
        padding-bottom: .5rem;
        max-height: 184px
    }

    .good-book p {
        max-height: 42px;
        max-height: 2.625rem
    }

    .good-book .btn-red {
        position: absolute;
        bottom: 15px;
        left: 20px;
        right: 20px;
        margin-bottom: 0
    }

@media screen and (max-width: 480px) {
    .good-book {
        width: 100%
    }
}

.fb-post li {
    padding-top: 15px;
    padding-bottom: 15px
}

.fb-post a {
    position: relative;
    display: block;
    padding-left: 48px;
    padding-left: 3rem;
    min-height: 42px;
    color: black
}

    .fb-post a:before {
        font-family: 'FontAwesome';
        content: '\f230';
        position: absolute;
        top: 2px;
        left: 0;
        font-size: 40px;
        font-size: 2.5rem;
        color: #3B5998
    }

@media screen and (max-width: 480px) {
    .fb-post li + li {
        padding-top: 0;
        padding-bottom: 15px
    }
}

.chart {
    margin-bottom: 12px;
    margin-bottom: .75rem
}

.ie11 .chart, .ie10 .chart, .ie9 .chart {
    max-width: 100%;
    overflow-x: hidden
}

.collect-wrap .select {
    padding-top: 25px;
    padding-bottom: 10px
}

    .collect-wrap .select select {
        display: inline-block;
        padding-right: 32px;
        padding-right: 2rem;
        width: auto
    }

.collect-wrap .collect-video .videos {
    width: calc(99.9% * 1/6 - (16px - 16px * 1/6))
}

    .collect-wrap .collect-video .videos:nth-child(1n) {
        float: left;
        margin-right: 16px;
        clear: none
    }

    .collect-wrap .collect-video .videos:last-child {
        margin-right: 0
    }

    .collect-wrap .collect-video .videos:nth-child(6n) {
        margin-right: 0;
        float: right
    }

    .collect-wrap .collect-video .videos:nth-child(6n + 1) {
        clear: both
    }

    .collect-wrap .collect-video .videos .title {
        border-bottom: 0
    }

@media screen and (max-width: 768px) {
    .collect-wrap .collect-video .videos {
        width: calc(99.9% * 1/2 - (16px - 16px * 1/2))
    }

        .collect-wrap .collect-video .videos:nth-child(1n) {
            float: left;
            margin-right: 16px;
            clear: none
        }

        .collect-wrap .collect-video .videos:last-child {
            margin-right: 0
        }

        .collect-wrap .collect-video .videos:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .collect-wrap .collect-video .videos:nth-child(2n + 1) {
            clear: both
        }
}

@media screen and (max-width: 480px) {
    .collect-wrap .collect-video .videos {
        width: 100%
    }
}

.video-block {
    position: relative;
    display: block;
    max-width: 480px
}

    .video-block:hover {
        text-decoration: none
    }

    .video-block .label {
        position: absolute;
        top: 8px;
        top: .5rem;
        left: 8px;
        left: .5rem;
        z-index: 1;
        padding-top: calc(38px / 4);
        width: 38px;
        height: 38px;
        background: #CD0505;
        color: #fff
    }

        .video-block .label:before {
            font-family: 'FontAwesome'
        }

    .video-block.-film .label:before {
        content: '\f03d'
    }

    .video-block.-voice .label:before {
        content: '\f028'
    }

    .video-block.-photo .label:before {
        content: '\f03e'
    }

    .video-block:hover .label {
        visibility: hidden
    }

    .video-block figure {
        position: relative;
        margin: 0;
        overflow: hidden;
        background: transparent
    }

        .video-block figure:after {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 1
        }

        .video-block figure img {
            position: relative
        }

    .video-block:hover figure {
        position: relative
    }

        .video-block:hover figure:before {
            font-family: 'FontAwesome';
            content: '\f144';
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            font-size: 60px;
            color: #CD0505;
            -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%)
        }

        .video-block:hover figure:after {
            background: #000000;
            background: rgba(0,0,0,0.54)
        }

    .video-block .title {
        padding: 8px 16px;
        padding: .5rem 1rem;
        max-height: 80px;
        max-height: 5rem;
        color: black
    }

    .video-block:hover .title {
        color: #CD0505
    }

    .video-block > .caption {
        color: #000000;
        color: rgba(0,0,0,0.5);
        border-top: 1px solid currentColor;
        border-bottom: 1px solid currentColor
    }

        .video-block > .caption > time, .video-block > .caption > span {
            display: inline-block;
            padding-top: 8px;
            padding-top: .5rem;
            padding-bottom: 8px;
            padding-bottom: .5rem
        }

        .video-block > .caption > span {
            padding-left: 8px;
            padding-left: .5rem;
            min-width: 104px;
            min-width: 6.5rem;
            border-left: 1px solid currentColor
        }

@media screen and (max-width: 768px) {
    .video-block {
        min-height: 225px
    }
}

@media screen and (max-width: 480px) {
    .video-block {
        margin-bottom: 25px
    }
}

.button-delete {
    display: block;
    padding-bottom: 10px;
    color: #787878
}

    .button-delete .fa {
        line-height: 24px;
        font-size: 18px
    }

.collect-video.-course .video-block .label {
    display: none;
    padding: 2px 6px;
    width: auto;
    height: auto;
    border-radius: 2px;
    font-size: 14px
}

.collect-video.-course .video-block.-live .label {
    display: block
}

    .collect-video.-course .video-block.-live .label:before {
        content: 'live';
        text-transform: uppercase
    }

.collect-video.-course .title {
    padding-right: 0;
    padding-left: 0;
    min-height: 58px;
    line-height: 1.2;
    text-align: left
}

.collect-video.-course .master {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 6px
}

.collect-video.-course .views {
    color: #787878
}

    .collect-video.-course .views span {
        padding-left: 4px
    }

.collect-video.-course .period {
    padding-top: 6px;
    padding-bottom: 6px;
    border-top: 1px solid #CD0505;
    border-bottom: 1px solid #CD0505;
    line-height: 1.5;
    color: #787878
}

    .collect-video.-course .period p {
        margin-bottom: 0;
        word-break: break-all
    }

@media screen and (max-width: 1366px) {
    .collect-video.-course .videos {
        width: calc(99.9% * 1/5 - (16px - 16px * 1/5))
    }

        .collect-video.-course .videos:nth-child(1n) {
            float: left;
            margin-right: 16px;
            clear: none
        }

        .collect-video.-course .videos:last-child {
            margin-right: 0
        }

        .collect-video.-course .videos:nth-child(5n) {
            margin-right: 0;
            float: right
        }

        .collect-video.-course .videos:nth-child(5n + 1) {
            clear: both
        }

    .collect-video.-course .name {
        margin-bottom: 4px
    }
}

@media screen and (min-width: 481px) and (max-width: 1280px) {
    .collect-video.-course .master {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .collect-video.-course .master .name, .collect-video.-course .master .views {
            width: 100%
        }
}

@media screen and (max-width: 1024px) {
    .collect-video.-course .videos {
        width: calc(99.9% * 1/3 - (16px - 16px * 1/3))
    }

        .collect-video.-course .videos:nth-child(1n) {
            float: left;
            margin-right: 16px;
            clear: none
        }

        .collect-video.-course .videos:last-child {
            margin-right: 0
        }

        .collect-video.-course .videos:nth-child(3n) {
            margin-right: 0;
            float: right
        }

        .collect-video.-course .videos:nth-child(3n + 1) {
            clear: both
        }
}

@media screen and (max-width: 768px) {
    .collect-video.-course .videos {
        margin-bottom: 20px;
        width: calc(99.9% * 1/2 - (16px - 16px * 1/2))
    }

        .collect-video.-course .videos:nth-child(1n) {
            float: left;
            margin-right: 16px;
            clear: none
        }

        .collect-video.-course .videos:last-child {
            margin-right: 0
        }

        .collect-video.-course .videos:nth-child(2n) {
            margin-right: 0;
            float: right
        }

        .collect-video.-course .videos:nth-child(2n + 1) {
            clear: both
        }
}

@media screen and (max-width: 480px) {
    .collect-video.-course .videos {
        margin-bottom: 20px;
        width: calc(99.9% * 1/1 - (16px - 16px * 1/1))
    }

        .collect-video.-course .videos:nth-child(1n) {
            float: left;
            margin-right: 16px;
            clear: none
        }

        .collect-video.-course .videos:last-child {
            margin-right: 0
        }

        .collect-video.-course .videos:nth-child(1n) {
            margin-right: 0;
            float: right
        }

        .collect-video.-course .videos:nth-child(1n + 1) {
            clear: both
        }

    .collect-video.-course .title {
        min-height: auto
    }
}

.form-edm .major {
    width: calc(99.9% * 1/3 - (1.5% - 1.5% * 1/3));
    margin-bottom: 25px;
    padding: 16px;
    padding: 1rem;
    position: relative;
    background: #F7F7F7;
    background: -webkit-linear-gradient(135deg, #fff 1rem, #F7F7F7 0);
    background: -o-linear-gradient(135deg, #fff 1rem, #F7F7F7 0);
    background: linear-gradient(-45deg, #fff 1rem, #F7F7F7 0);
    border-radius: 2px
}

    .form-edm .major:nth-child(1n) {
        float: left;
        margin-right: 1.5%;
        clear: none
    }

    .form-edm .major:last-child {
        margin-right: 0
    }

    .form-edm .major:nth-child(3n) {
        margin-right: 0;
        float: right
    }

    .form-edm .major:nth-child(3n + 1) {
        clear: both
    }

    .form-edm .major:before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 25px;
        background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, #fff), color-stop(50%, #D7D7D7)) no-repeat;
        background: -webkit-linear-gradient(left top, #fff 50%, #D7D7D7 50%) no-repeat;
        background: -o-linear-gradient(left top, #fff 50%, #D7D7D7 50%) no-repeat;
        background: linear-gradient(to right bottom, #fff 50%, #D7D7D7 50%) no-repeat;
        width: 24px;
        height: 24px;
        -webkit-transform: translateY(-100%) rotate(180deg);
        -ms-transform: translateY(-100%) rotate(180deg);
        transform: translateY(-100%) rotate(180deg);
        -webkit-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
        transform-origin: bottom right
    }

    .form-edm .major h3 {
        margin-bottom: 16px;
        margin-bottom: 1rem;
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 1;
        border-top: 1px solid black;
        border-bottom: 1px solid black
    }

@media screen and (max-width: 480px) {
    .form-edm .major {
        width: calc(99.9% * 1/1);
        margin-bottom: 20px
    }

        .form-edm .major:nth-child(1n) {
            float: left;
            margin-right: 0;
            clear: none
        }

        .form-edm .major:last-child {
            margin-right: 0
        }

        .form-edm .major:nth-child(1n) {
            margin-right: 0;
            float: right
        }

        .form-edm .major:nth-child(1n + 1) {
            clear: both
        }

        .form-edm .major h3 {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            padding-top: .75rem;
            padding-bottom: .75rem;
            line-height: 1.25
        }
}

.toggle-switch {
    position: relative;
    display: inline-block;
    margin-bottom: 14px;
    width: 42px;
    height: 21px
}

    .toggle-switch > input {
        display: none
    }

        .toggle-switch > input:checked + .round {
            background: #CD0505;
            border: 1px solid #ff0909;
            -webkit-box-shadow: 0 0 1px #2196F3;
            box-shadow: 0 0 1px #2196F3
        }

            .toggle-switch > input:checked + .round:before {
                -webkit-transform: translateX(20px);
                -ms-transform: translateX(20px);
                transform: translateX(20px)
            }

    .toggle-switch .round {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #ccc;
        border: 1px solid #ccc;
        border-radius: 20px
    }

        .toggle-switch .round:before {
            position: absolute;
            content: "";
            height: 16px;
            width: 16px;
            top: 1.25px;
            left: 2px;
            background-color: white;
            border-radius: 50%
        }

.program-alert {
    position: relative
}

    .program-alert > .name {
        padding-top: 15px;
        font-size: 28px;
        font-size: 1.75rem
    }

    .program-alert > .time {
        font-size: 28px;
        font-size: 1.75rem
    }

    .program-alert .fa {
        padding-right: 8px;
        padding-right: .5rem;
        width: 24px;
        width: 1.5rem
    }

    .program-alert .cancel {
        color: #787878
    }

        .program-alert .cancel ~ .btn-red {
            position: absolute;
            bottom: 15px;
            margin-bottom: 0;
            width: calc(100% - 40px)
        }

@media screen and (max-width: 768px) {
    .program-alert .cancel ~ .btn-red {
        position: static;
        width: 100%;
        margin-bottom: 15px
    }
}

.program-alert.-alert {
    padding: 12px 20px;
    padding: 0.75rem 1.25rem
}

    .program-alert.-alert .btn-red, .program-alert.-alert .btn-blue {
        margin-bottom: 0
    }

    .program-alert.-alert .add {
        color: #787878
    }

.program-index .texts {
    padding: 12px 20px;
    padding: 0.75rem 1.25rem
}

    .program-index .texts > .name {
        padding-top: 15px;
        font-size: 28px;
        font-size: 1.75rem
    }

    .program-index .texts > .time {
        font-size: 28px;
        font-size: 1.75rem
    }

    .program-index .texts .fa {
        padding-right: 8px;
        padding-right: .5rem;
        width: 24px;
        width: 1.5rem
    }

    .program-index .texts .btn-red {
        margin-bottom: 0
    }

.flip-clock-wrapper * {
    margin: 0;
    padding: 0;
    line-height: normal
}

.flip-clock-wrapper a {
    cursor: pointer;
    text-decoration: none;
    color: #ccc
}

    .flip-clock-wrapper a:hover {
        color: #fff
    }

.flip-clock-wrapper ul {
    list-style: none
}

.flip-clock-wrapper.clearfix:before, .flip-clock-wrapper.clearfix:after {
    content: " ";
    display: table
}

.flip-clock-wrapper.clearfix:after {
    clear: both
}

.flip-clock-wrapper.clearfix {
    *zoom: 1
}

.flip-clock-wrapper {
    min-height: 100%;
    -webkit-user-select: none
}

.flip-clock-meridium {
    background: none;
    -webkit-box-shadow: 0 0 0 !important;
    box-shadow: 0 0 0 !important;
    font-size: 50px !important;
    color: #313333;
    bottom: 10px
}

.flip-clock-wrapper {
    text-align: center;
    position: relative;
    width: 100%;
    padding: 2em
}

    .flip-clock-wrapper ul {
        position: relative;
        float: left;
        margin: 5px 1px;
        width: 60px;
        height: 90px;
        font-size: 50px;
        font-weight: bold;
        line-height: 87px;
        border-radius: 6px;
        -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.3);
        box-shadow: 0 1px 5px rgba(0,0,0,0.3)
    }

        .flip-clock-wrapper ul li {
            z-index: 1;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            line-height: 87px
        }

            .flip-clock-wrapper ul li:first-child {
                z-index: 2
            }

            .flip-clock-wrapper ul li a {
                display: block;
                height: 100%;
                -webkit-perspective: 200px;
                perspective: 200px;
                margin: 0 !important;
                overflow: visible !important
            }

                .flip-clock-wrapper ul li a div {
                    z-index: 1;
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: 50%;
                    overflow: hidden
                }

                    .flip-clock-wrapper ul li a div .shadow {
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        z-index: 2
                    }

                    .flip-clock-wrapper ul li a div.up {
                        -webkit-transform-origin: 50% 100%;
                        -ms-transform-origin: 50% 100%;
                        transform-origin: 50% 100%;
                        top: 0
                    }

                        .flip-clock-wrapper ul li a div.up:after {
                            content: "";
                            position: absolute;
                            top: 44px;
                            left: 0;
                            z-index: 5;
                            width: 100%;
                            height: 3px;
                            background-color: #DFDFDF
                        }

                    .flip-clock-wrapper ul li a div.down {
                        -webkit-transform-origin: 50% 0;
                        -ms-transform-origin: 50% 0;
                        transform-origin: 50% 0;
                        bottom: 0
                    }

                    .flip-clock-wrapper ul li a div div.inn {
                        position: absolute;
                        left: 0;
                        z-index: 1;
                        width: 100%;
                        height: 200%;
                        color: #5771f3;
                        text-align: center;
                        background-color: #fff;
                        border-radius: 6px;
                        font-size: 70px
                    }

                    .flip-clock-wrapper ul li a div.up div.inn {
                        top: 0
                    }

                    .flip-clock-wrapper ul li a div.down div.inn {
                        bottom: 0
                    }

        .flip-clock-wrapper ul.play li.flip-clock-before {
            z-index: 3
        }

        .flip-clock-wrapper ul.play li.flip-clock-active {
            -webkit-animation: asd .5s .5s linear both;
            animation: asd .5s .5s linear both;
            z-index: 2
        }

.flip-clock-divider {
    float: left;
    display: inline-block;
    position: relative;
    width: 20px;
    height: 100px
}

    .flip-clock-divider:first-child {
        width: 0
    }

.flip-clock-dot {
    display: block;
    background: #323434;
    width: 10px;
    height: 10px;
    position: absolute;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
    box-shadow: 0 0 5px rgba(0,0,0,0.5)
}

.flip-clock-divider .flip-clock-label {
    position: absolute;
    right: -58px;
    bottom: -28px;
    color: #5771f3;
    font-size: 18px
}

.flip-clock-divider.minutes .flip-clock-label {
    right: -88px
}

.flip-clock-divider.seconds .flip-clock-label {
    right: -91px
}

.flip-clock-dot.top {
    top: 30px
}

.flip-clock-dot.bottom {
    bottom: 30px
}

@-webkit-keyframes asd {
    0% {
        z-index: 2
    }

    20% {
        z-index: 4
    }

    100% {
        z-index: 4
    }
}

@keyframes asd {
    0% {
        z-index: 2
    }

    20% {
        z-index: 4
    }

    100% {
        z-index: 4
    }
}

.flip-clock-wrapper ul.play li.flip-clock-active .down {
    z-index: 2;
    -webkit-animation: turn .5s .5s linear both;
    animation: turn .5s .5s linear both
}

@-webkit-keyframes turn {
    0% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

@keyframes turn {
    0% {
        -webkit-transform: rotateX(90deg);
        transform: rotateX(90deg)
    }

    100% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }
}

.flip-clock-wrapper ul.play li.flip-clock-before .up {
    z-index: 2;
    -webkit-animation: turn2 .5s linear both;
    animation: turn2 .5s linear both
}

@-webkit-keyframes turn2 {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

    100% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }
}

@keyframes turn2 {
    0% {
        -webkit-transform: rotateX(0deg);
        transform: rotateX(0deg)
    }

    100% {
        -webkit-transform: rotateX(-90deg);
        transform: rotateX(-90deg)
    }
}

.flip-clock-wrapper ul li.flip-clock-active {
    z-index: 3
}

.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
    background: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#000));
    background: -webkit-linear-gradient(bottom, #000000 0%, #000 100%);
    background: -o-linear-gradient(bottom, #000000 0%, #000 100%);
    background: linear-gradient(to top, #000000 0%, #000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.1)), to(#000));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(#000));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    -webkit-animation: show .5s linear both;
    animation: show .5s linear both
}

.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
    background: -webkit-gradient(linear, left bottom, left top, from(#000000), to(#000));
    background: -webkit-linear-gradient(bottom, #000000 0%, #000 100%);
    background: -o-linear-gradient(bottom, #000000 0%, #000 100%);
    background: linear-gradient(to top, #000000 0%, #000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,0.1)), to(#000));
    background: -webkit-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -o-linear-gradient(bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    background: linear-gradient(to top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(#000));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.1) 0%, #000 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, #000 100%);
    -webkit-animation: hide .5s .3s linear both;
    animation: hide .5s .3s linear both
}

.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#000000));
    background: -webkit-linear-gradient(bottom, #000 0%, #000000 100%);
    background: -o-linear-gradient(bottom, #000 0%, #000000 100%);
    background: linear-gradient(to top, #000 0%, #000000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0,0,0,0.1)));
    background: -webkit-linear-gradient(bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -o-linear-gradient(bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0.1)));
    background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    -webkit-animation: show .5s linear both;
    animation: show .5s linear both
}

.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(#000000));
    background: -webkit-linear-gradient(bottom, #000 0%, #000000 100%);
    background: -o-linear-gradient(bottom, #000 0%, #000000 100%);
    background: linear-gradient(to top, #000 0%, #000000 100%);
    background: -webkit-gradient(linear, left bottom, left top, from(#000), to(rgba(0,0,0,0.1)));
    background: -webkit-linear-gradient(bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -o-linear-gradient(bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(rgba(0,0,0,0.1)));
    background: -webkit-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: -o-linear-gradient(top, #000 0%, rgba(0,0,0,0.1) 100%);
    background: linear-gradient(to bottom, #000 0%, rgba(0,0,0,0.1) 100%);
    -webkit-animation: hide .5s .3s linear both;
    animation: hide .5s .3s linear both
}

@-webkit-keyframes show {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@keyframes show {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }
}

@-webkit-keyframes hide {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }
}

@keyframes hide {
    0% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }

    100% {
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0
    }
}

@media screen and (max-width: 1366px) {
    .flip-clock-wrapper {
        padding: .5rem
    }
}

.countdown .days ~ .flip-clock-divider .flip-clock-dot {
    visibility: hidden
}

.countdown .minutes, .countdown .minutes ~ ul, .countdown .minutes ~ .flip-clock-divider {
    display: none
}

.countdown .flip-clock-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.faq-list {
    font-size: 18px
}

    .faq-list dt, .faq-list dd {
        position: relative;
        padding-right: 16px;
        padding-right: 1rem;
        padding-left: 48px;
        padding-left: 3rem
    }

        .faq-list dt:before, .faq-list dd:before {
            position: absolute;
            left: 16px;
            left: 1rem
        }

    .faq-list dt {
        padding-top: 16px;
        padding-top: 1rem;
        padding-bottom: 16px;
        padding-bottom: 1rem
    }

        .faq-list dt:before {
            content: 'Q：'
        }

    .faq-list dd {
        padding-bottom: 16px;
        padding-bottom: 1rem;
        border-bottom: 1px solid #BCBCBC;
        color: #787878
    }

        .faq-list dd:before {
            content: 'A：'
        }

    .faq-list ol, .faq-list li {
        margin-left: 8px;
        margin-left: 0.5rem;
        list-style-type: decimal
    }

.sample-img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 12px
}

    .sample-img img {
        margin-top: 3px
    }

@media screen and (max-width: 768px) {
    .sample-img {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center
    }
}

.faq-collapse .dropdown {
    position: relative;
    cursor: pointer
}

    .faq-collapse .dropdown:after {
        font-family: 'FontAwesome';
        content: '\f067';
        position: absolute;
        top: 3px;
        right: 0;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    .faq-collapse .dropdown.active:after {
        content: '\f068';
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

@media screen and (max-width: 480px) {
    .faq-collapse {
        padding-bottom: 20px
    }
}

.js-collapse-slide.-icon {
    position: relative;
    cursor: pointer
}

    .js-collapse-slide.-icon:after {
        font-family: 'FontAwesome';
        content: '\f067';
        position: absolute;
        top: 3px;
        right: 0;
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0)
    }

    .js-collapse-slide.-icon.active:after {
        content: '\f068';
        -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        transform: rotate(180deg)
    }

.modaal-container {
    border-radius: 5px;
    border-top: 12px solid #CD0505
}

.modaal-close {
    position: absolute;
    right: -48px;
    top: -25px
}

    .modaal-close:hover, .modaal-close:focus {
        background: initial;
        color: #CD0505
    }

        .modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
            background: #CD0505
        }

.modaal-content-container {
    padding: 30px
}

    .modaal-content-container h4 {
        font-size: 18px
    }

    .modaal-content-container li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding-top: 16px;
        padding-top: 1rem;
        padding-bottom: 16px;
        padding-bottom: 1rem;
        border-bottom: 1px solid #c2c3c4;
        font-size: 18px;
        color: #787878
    }

    .modaal-content-container .shipments li span:nth-of-type(1) {
        width: 40%
    }

    .modaal-content-container .shipments li span:nth-of-type(2) {
        width: 8%;
        text-align: center
    }

    .modaal-content-container .shipments li span:nth-of-type(3) {
        width: 18%;
        text-align: center
    }

    .modaal-content-container .shipments li span:nth-of-type(4) {
        width: 34%;
        text-align: center
    }

    .modaal-content-container .shipments li a {
        color: #787878;
        text-decoration: underline
    }

        .modaal-content-container .shipments li a:hover, .modaal-content-container .shipments li a:focus {
            color: #CD0505;
            text-decoration: none
        }

    .modaal-content-container li.th {
        font-weight: bold;
        text-align: center
    }

    .modaal-content-container .ready {
        color: #F90
    }

    .modaal-content-container .ed {
        color: #1873d0
    }

@media screen and (max-width: 1280px) {
    .modaal-inner-wrapper {
        padding: 80px 46px
    }
}

@media screen and (max-width: 640px) {
    .modaal-inner-wrapper {
        padding: 80px 6px
    }

    .modaal-close {
        position: fixed;
        top: 0;
        right: -10px
    }
}

@media screen and (max-width: 480px) {
    .modaal-overlay {
        z-index: 1001
    }

    .modaal-container {
        max-width: 100vw
    }

    .modaal-content-container {
        padding: 15px
    }

        .modaal-content-container li {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap
        }

        .modaal-content-container .shipments li span:nth-of-type(1), .modaal-content-container .shipments li span:nth-of-type(2), .modaal-content-container .shipments li span:nth-of-type(3), .modaal-content-container .shipments li span:nth-of-type(4) {
            width: 100%;
            text-align: left
        }

            .modaal-content-container .shipments li span:nth-of-type(1):before {
                content: '品項：'
            }

            .modaal-content-container .shipments li span:nth-of-type(2):before {
                content: '數量：'
            }

            .modaal-content-container .shipments li span:nth-of-type(3):before {
                content: '出貨狀態：'
            }

        .modaal-content-container .shipments li .ed + span:before {
            content: '物流編號：'
        }

        .modaal-content-container li.th {
            display: none
        }
}

.modaal-content-container .invoice li, .modaal-content-container .reply li {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

    .modaal-content-container .invoice li span, .modaal-content-container .reply li span {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
        -ms-flex-align: start;
        align-items: flex-start;
        -webkit-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        padding: 4px 0;
        line-height: 1.5;
        color: #787878
    }

        .modaal-content-container .invoice li span:before, .modaal-content-container .reply li span:before {
            content: attr(data-title);
            display: block;
            padding-right: 8px;
            padding-right: .5rem;
            min-width: 128px;
            min-width: 8rem;
            font-weight: bold;
            text-align: right
        }

.modaal-content-container .invoice-info {
    display: block;
    padding-top: 4px;
    text-align: right
}

.invioce-info h4 {
    margin-bottom: 20px
}

.invioce-info p {
    margin-bottom: 32px;
    margin-bottom: 2rem;
    line-height: 1.75
}

.invioce-info .btn-red {
    display: block;
    margin-bottom: 0
}

.modaal-content-container .reply li span:before {
    min-width: 80px;
    min-width: 5rem
}

.modaal-content-container .reply .msg {
    padding-left: 80px;
    padding-left: 5rem
}

#member-rights .modal-dialog {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%)
}

.idle-wrap {
    display: none
}

.idle-modaal .modaal-container {
    max-width: 480px;
    border-top: none;
    border-radius: 0
}

.idle-modaal .title {
    margin-bottom: 15px;
    padding-left: 10px;
    border-left: 3px solid #CD0505;
    font-size: 18px
}

    .idle-modaal .title p {
        margin-bottom: 2px
    }

.idle-modaal .thumb-list {
    border-bottom: 1px solid #dfdfdf
}

    .idle-modaal .thumb-list:last-of-type {
        border-bottom-color: #FFF
    }

    .idle-modaal .thumb-list .caption {
        font-size: 15px
    }

.idle-modaal .modaal-close {
    width: 42px;
    height: 42px;
    background: #dedede
}

    .idle-modaal .modaal-close:before, .idle-modaal .modaal-close:after {
        top: 10px;
        left: 20px;
        background: #000
    }

.idle-modaal .thumb-list + .thumb-list {
    padding-top: 15px
}

.magical-number {
    background-color: #e2dad0
}

    .magical-number .button a {
        white-space: nowrap
    }

    .magical-number.-true {
        background: #e2dad0 url("../images/magical/bg.jpg") right bottom no-repeat
    }

    .magical-number .magical {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-top: 16px;
        padding-top: 1rem
    }

        .magical-number .magical .img {
            position: relative;
            min-width: 201px
        }

            .magical-number .magical .img h3 {
                position: absolute;
                left: 50%;
                font-weight: normal;
                color: #0d2441;
                -webkit-transform: translateX(-50%);
                -ms-transform: translateX(-50%);
                transform: translateX(-50%)
            }

        .magical-number .magical .content p, .magical-number .magical .content img {
            margin-bottom: 16px;
            margin-bottom: 1rem
        }

    .magical-number .btn-red {
        padding: 0 20px;
        padding: 0 1.25rem
    }

@media screen and (max-width: 1440px) {
    .magical-number.-false .magical .img, .magical-number.-false .magical .content {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1
    }

    .magical-number.-false .magical .img {
        min-width: initial
    }
}

@media screen and (max-width: 1024px) {
    .magical-number.-false .img img {
        margin-left: auto
    }
}

@media screen and (max-width: 480px) {
    .magical-number .magical {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

        .magical-number .magical .img {
            margin-bottom: 1rem
        }

            .magical-number .magical .img img {
                margin: 0 auto
            }

    .magical-number .button {
        text-align: center
    }

    .magical-number.-true img {
        max-width: 201px
    }

    .magical-number.-false .img img {
        max-width: 201px
    }

    .magical-number.-false .content p {
        text-align: center
    }
}

.new-subscriber > p {
    line-height: 2;
    font-size: 15px
}

.new-subscriber .txt-red {
    color: #CD0505
}

.new-subscriber .btn-wrap {
    text-align: center
}

.new-subscriber .btn-red, .new-subscriber .btn-link {
    display: inline-block
}

.new-subscriber .btn-red {
    margin-top: 16px;
    margin-bottom: 16px;
    padding: 0 15px;
    height: 56px;
    line-height: 56px;
    background: #CD0505;
    font-size: 20px;
    color: #FFF
}

    .new-subscriber .btn-red:hover {
        background: #b90000;
        text-decoration: none
    }

.new-subscriber .btn-link {
    margin-bottom: 20px;
    text-decoration: underline;
    font-size: 16px;
    color: #CD0505
}

    .new-subscriber .btn-link:hover {
        text-decoration: none
    }

.new-subscriber .chapter-title {
    margin-bottom: 16px;
    padding-left: 10px;
    border-left: 3px solid #CD0505;
    font-size: 20px
}

    .new-subscriber .chapter-title strong {
        color: #CD0505
    }

.new-subscriber .program-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 30px
}

    .new-subscriber .program-list .program {
        width: 100%;
        border: 1px solid #d8d8d8;
        border-radius: 8px
    }

        .new-subscriber .program-list .program:nth-of-type(odd) {
            margin-right: 8px
        }

        .new-subscriber .program-list .program:nth-of-type(even) {
            margin-left: 8px
        }

    .new-subscriber .program-list .title {
        padding-bottom: 0;
        border-bottom: none;
        line-height: 30px;
        background: #363636;
        border-top-right-radius: 8px;
        border-top-left-radius: 8px;
        text-align: center;
        font-size: 20px;
        color: #FFF
    }

    .new-subscriber .program-list .body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px 20px
    }

        .new-subscriber .program-list .body p {
            margin-bottom: 0;
            font-size: 16px
        }

        .new-subscriber .program-list .body small {
            line-height: 1;
            font-size: 13px;
            color: #636363
        }

    .new-subscriber .program-list .icon {
        width: 22%;
        text-align: center
    }

        .new-subscriber .program-list .icon img {
            display: inline-block;
            max-width: 48px
        }

    .new-subscriber .program-list .txt {
        width: 78%;
        line-height: 1.5
    }

    .new-subscriber .program-list hr {
        display: block;
        margin: 0 auto;
        padding: 0;
        width: 87%;
        height: 1px;
        border: 0;
        border-top: 1px solid #ccc
    }

.new-subscriber .d-inline {
    display: inline
}

.new-subscriber .precautions-wrap p, .new-subscriber .precautions-wrap li {
    line-height: 2;
    font-size: 13px
}

.new-subscriber .precautions-wrap ul, .new-subscriber .precautions-wrap ol {
    padding-left: 16px
}

.new-subscriber .precautions-wrap li {
    list-style: decimal
}

@media screen and (max-width: 768px) {
    .new-subscriber .program-list {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

        .new-subscriber .program-list .program {
            margin-bottom: 30px
        }

            .new-subscriber .program-list .program:nth-of-type(odd) {
                margin-right: 0
            }

            .new-subscriber .program-list .program:nth-of-type(even) {
                margin-left: 0
            }
}

@media screen and (max-width: 320px) {
    .new-subscriber .program-list .icon {
        width: 33%
    }

    .new-subscriber .program-list .txt {
        width: 67%
    }
}

.teach-modaal .modaal-container, .novice-teach {
    background: transparent;
    border: 0;
    color: #FFF;
    -webkit-box-shadow: none;
    box-shadow: none
}

    .teach-modaal .modaal-container .tech-buttons, .novice-teach .tech-buttons {
        padding-top: 20px;
        text-align: center
    }

    .teach-modaal .modaal-container .tech-cancel, .novice-teach .tech-cancel {
        background: #8e8e8e
    }

        .teach-modaal .modaal-container .tech-cancel:hover, .novice-teach .tech-cancel:hover {
            background: #7a7a7a
        }

    .teach-modaal .modaal-container .tech-next, .teach-modaal .modaal-container .tech-success, .novice-teach .tech-next, .novice-teach .tech-success {
        background: #CD0505
    }

        .teach-modaal .modaal-container .tech-next:hover, .teach-modaal .modaal-container .tech-success:hover, .novice-teach .tech-next:hover, .novice-teach .tech-success:hover {
            background: #B40505
        }

    .teach-modaal .modaal-container .modaal-close, .novice-teach .modaal-close {
        display: none
    }

    .teach-modaal-1 .modaal-container p, .teach-modaal-1 .modaal-container .teching-buttons, .novice-teach p, .novice-teach .teching-buttons {
        width: 100%;
        text-align: center
    }

    .teach-modaal-1 .modaal-container p, .novice-teach p {
        font-size: 20px
    }

    .teach-modaal-1 .modaal-container a, .novice-teach a {
        display: inline-block;
        margin-right: 6px;
        margin-left: 6px;
        padding: 2px 4px;
        border-radius: 4px;
        font-size: 25px;
        color: #FFF
    }

        .teach-modaal-1 .modaal-container a:hover, .teach-modaal-1 .modaal-container a:active, .teach-modaal-1 .modaal-container a:focus, .novice-teach a:hover, .novice-teach a:active, .novice-teach a:focus {
            text-decoration: none
        }

    .teach-modaal-1 .modaal-container .teach-contents, .novice-teach .teach-contents {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-line-pack: center;
        align-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 100%
    }

@media screen and (max-width: 480px) {
    .teach-modaal-1 .modaal-container p {
        font-size: 16px
    }
}

@media screen and (max-width: 320px) {
    .teach-modaal-1 .modaal-container p {
        font-size: 12px
    }
}

@-webkit-keyframes movePoint {
    from {
        right: 80%
    }

    to {
        right: 4px
    }
}

@keyframes movePoint {
    from {
        right: 80%
    }

    to {
        right: 4px
    }
}

@-webkit-keyframes navFlash {
    15%,45%,75%,to {
        background: #CD0505
    }

    from,30%,60%,90% {
        background: #909090
    }
}

@keyframes navFlash {
    15%,45%,75%,to {
        background: #CD0505
    }

    from,30%,60%,90% {
        background: #909090
    }
}

.aside-collapse a.ready-flash {
    -webkit-animation-name: navFlash;
    animation-name: navFlash;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    pointer-events: none
}

    .aside-collapse a.ready-flash:before {
        content: url("../images/icon/point.png");
        position: absolute;
        right: 80%;
        z-index: 1;
        -webkit-animation-name: movePoint;
        animation-name: movePoint;
        -webkit-animation-duration: .5s;
        animation-duration: .5s;
        -webkit-animation-delay: .5s;
        animation-delay: .5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both
    }

.novice-teach {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 240px;
    z-index: 6;
    display: none;
    background: #000000;
    background: rgba(0,0,0,0.75);
    color: #000
}

    .novice-teach.active .popover {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        opacity: 1
    }

    .novice-teach .popover {
        position: relative;
        left: -6px;
        display: inline-block;
        margin-left: 13px;
        padding: 12px 16px;
        width: 340px;
        background: #FFF;
        border: 2px solid #CD0505;
        border-radius: 6px;
        -webkit-transform: translateX(10%);
        -ms-transform: translateX(10%);
        transform: translateX(10%);
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        opacity: 0;
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s
    }

        .novice-teach .popover:before, .novice-teach .popover:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 10px 14px 10px 0;
            -webkit-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            transform: translateY(-10px)
        }

        .novice-teach .popover:before {
            left: -15px;
            border-color: transparent #CD0505 transparent transparent
        }

        .novice-teach .popover:after {
            left: -12px;
            border-color: transparent #ffffff transparent transparent
        }

    .novice-teach p, .novice-teach a {
        font-size: 15px
    }

    .novice-teach p {
        margin-bottom: 0;
        text-align: left
    }

@media screen and (max-width: 480px) {
    .novice-teach .popover {
        width: 42vw
    }

    .novice-teach p, .novice-teach a {
        font-size: 12px
    }
}

@media screen and (max-width: 380px) {
    .novice-teach .popover {
        width: 47vw
    }
}

@media screen and (max-width: 320px) {
    .novice-teach .popover {
        padding: 8px;
        width: 46vw
    }
}

.d-row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y)*-1);
    margin-right: calc(var(--bs-gutter-x)/-2);
    margin-left: calc(var(--bs-gutter-x)/-2)
}

    .d-row > * {
        flex-shrink: 0;
        width: 100%;
        max-width: 100%;
        padding-right: calc(var(--bs-gutter-x)/2);
        padding-left: calc(var(--bs-gutter-x)/2);
        margin-top: var(--bs-gutter-y)
    }

.col {
    flex: 1 0 0%
}

.row-cols-auto > * {
    flex: 0 0 auto;
    width: auto
}

.row-cols-1 > * {
    flex: 0 0 auto;
    width: 100%
}

.row-cols-2 > * {
    flex: 0 0 auto;
    width: 50%
}

.row-cols-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.row-cols-4 > * {
    flex: 0 0 auto;
    width: 25%
}

.row-cols-5 > * {
    flex: 0 0 auto;
    width: 20%
}

.row-cols-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.3333333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.6666666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.3333333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.6666666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.3333333333%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.6666666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-10 {
    flex: 0 0 auto;
    width: 83.3333333333%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.6666666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.offset-1 {
    margin-left: 8.3333333333%
}

.offset-2 {
    margin-left: 16.6666666667%
}

.offset-3 {
    margin-left: 25%
}

.offset-4 {
    margin-left: 33.3333333333%
}

.offset-5 {
    margin-left: 41.6666666667%
}

.offset-6 {
    margin-left: 50%
}

.offset-7 {
    margin-left: 58.3333333333%
}

.offset-8 {
    margin-left: 66.6666666667%
}

.offset-9 {
    margin-left: 75%
}

.offset-10 {
    margin-left: 83.3333333333%
}

.offset-11 {
    margin-left: 91.6666666667%
}

.g-0, .gx-0 {
    --bs-gutter-x: 0
}

.g-0, .gy-0 {
    --bs-gutter-y: 0
}

.g-1, .gx-1 {
    --bs-gutter-x: 0.25rem
}

.g-1, .gy-1 {
    --bs-gutter-y: 0.25rem
}

.g-2, .gx-2 {
    --bs-gutter-x: 0.5rem
}

.g-2, .gy-2 {
    --bs-gutter-y: 0.5rem
}

.g-3, .gx-3 {
    --bs-gutter-x: 1rem
}

.g-3, .gy-3 {
    --bs-gutter-y: 1rem
}

.g-4, .gx-4 {
    --bs-gutter-x: 1.5rem
}

.g-4, .gy-4 {
    --bs-gutter-y: 1.5rem
}

.g-5, .gx-5 {
    --bs-gutter-x: 3rem
}

.g-5, .gy-5 {
    --bs-gutter-y: 3rem
}

@media(min-width: 576px) {
    .col-sm {
        flex: 1 0 0%
    }

    .row-cols-sm-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-sm-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-sm-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-sm-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-sm-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-sm-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-sm-0 {
        margin-left: 0
    }

    .offset-sm-1 {
        margin-left: 8.3333333333%
    }

    .offset-sm-2 {
        margin-left: 16.6666666667%
    }

    .offset-sm-3 {
        margin-left: 25%
    }

    .offset-sm-4 {
        margin-left: 33.3333333333%
    }

    .offset-sm-5 {
        margin-left: 41.6666666667%
    }

    .offset-sm-6 {
        margin-left: 50%
    }

    .offset-sm-7 {
        margin-left: 58.3333333333%
    }

    .offset-sm-8 {
        margin-left: 66.6666666667%
    }

    .offset-sm-9 {
        margin-left: 75%
    }

    .offset-sm-10 {
        margin-left: 83.3333333333%
    }

    .offset-sm-11 {
        margin-left: 91.6666666667%
    }

    .g-sm-0, .gx-sm-0 {
        --bs-gutter-x: 0
    }

    .g-sm-0, .gy-sm-0 {
        --bs-gutter-y: 0
    }

    .g-sm-1, .gx-sm-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-sm-1, .gy-sm-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-sm-2, .gx-sm-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-sm-2, .gy-sm-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-sm-3, .gx-sm-3 {
        --bs-gutter-x: 1rem
    }

    .g-sm-3, .gy-sm-3 {
        --bs-gutter-y: 1rem
    }

    .g-sm-4, .gx-sm-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-sm-4, .gy-sm-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-sm-5, .gx-sm-5 {
        --bs-gutter-x: 3rem
    }

    .g-sm-5, .gy-sm-5 {
        --bs-gutter-y: 3rem
    }
}

@media(min-width: 768px) {
    .col-md {
        flex: 1 0 0%
    }

    .row-cols-md-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-md-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-md-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-md-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-md-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-md-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-md-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-md-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-md-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-md-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-md-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-md-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-md-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-md-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-md-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-md-0 {
        margin-left: 0
    }

    .offset-md-1 {
        margin-left: 8.3333333333%
    }

    .offset-md-2 {
        margin-left: 16.6666666667%
    }

    .offset-md-3 {
        margin-left: 25%
    }

    .offset-md-4 {
        margin-left: 33.3333333333%
    }

    .offset-md-5 {
        margin-left: 41.6666666667%
    }

    .offset-md-6 {
        margin-left: 50%
    }

    .offset-md-7 {
        margin-left: 58.3333333333%
    }

    .offset-md-8 {
        margin-left: 66.6666666667%
    }

    .offset-md-9 {
        margin-left: 75%
    }

    .offset-md-10 {
        margin-left: 83.3333333333%
    }

    .offset-md-11 {
        margin-left: 91.6666666667%
    }

    .g-md-0, .gx-md-0 {
        --bs-gutter-x: 0
    }

    .g-md-0, .gy-md-0 {
        --bs-gutter-y: 0
    }

    .g-md-1, .gx-md-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-md-1, .gy-md-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-md-2, .gx-md-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-md-2, .gy-md-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-md-3, .gx-md-3 {
        --bs-gutter-x: 1rem
    }

    .g-md-3, .gy-md-3 {
        --bs-gutter-y: 1rem
    }

    .g-md-4, .gx-md-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-md-4, .gy-md-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-md-5, .gx-md-5 {
        --bs-gutter-x: 3rem
    }

    .g-md-5, .gy-md-5 {
        --bs-gutter-y: 3rem
    }
}

@media(min-width: 992px) {
    .col-lg {
        flex: 1 0 0%
    }

    .row-cols-lg-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-lg-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-lg-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-lg-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-lg-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-lg-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-lg-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-lg-0 {
        margin-left: 0
    }

    .offset-lg-1 {
        margin-left: 8.3333333333%
    }

    .offset-lg-2 {
        margin-left: 16.6666666667%
    }

    .offset-lg-3 {
        margin-left: 25%
    }

    .offset-lg-4 {
        margin-left: 33.3333333333%
    }

    .offset-lg-5 {
        margin-left: 41.6666666667%
    }

    .offset-lg-6 {
        margin-left: 50%
    }

    .offset-lg-7 {
        margin-left: 58.3333333333%
    }

    .offset-lg-8 {
        margin-left: 66.6666666667%
    }

    .offset-lg-9 {
        margin-left: 75%
    }

    .offset-lg-10 {
        margin-left: 83.3333333333%
    }

    .offset-lg-11 {
        margin-left: 91.6666666667%
    }

    .g-lg-0, .gx-lg-0 {
        --bs-gutter-x: 0
    }

    .g-lg-0, .gy-lg-0 {
        --bs-gutter-y: 0
    }

    .g-lg-1, .gx-lg-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-lg-1, .gy-lg-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-lg-2, .gx-lg-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-lg-2, .gy-lg-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-lg-3, .gx-lg-3 {
        --bs-gutter-x: 1rem
    }

    .g-lg-3, .gy-lg-3 {
        --bs-gutter-y: 1rem
    }

    .g-lg-4, .gx-lg-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-lg-4, .gy-lg-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-lg-5, .gx-lg-5 {
        --bs-gutter-x: 3rem
    }

    .g-lg-5, .gy-lg-5 {
        --bs-gutter-y: 3rem
    }
}

@media(min-width: 1200px) {
    .col-xl {
        flex: 1 0 0%
    }

    .row-cols-xl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xl-0 {
        margin-left: 0
    }

    .offset-xl-1 {
        margin-left: 8.3333333333%
    }

    .offset-xl-2 {
        margin-left: 16.6666666667%
    }

    .offset-xl-3 {
        margin-left: 25%
    }

    .offset-xl-4 {
        margin-left: 33.3333333333%
    }

    .offset-xl-5 {
        margin-left: 41.6666666667%
    }

    .offset-xl-6 {
        margin-left: 50%
    }

    .offset-xl-7 {
        margin-left: 58.3333333333%
    }

    .offset-xl-8 {
        margin-left: 66.6666666667%
    }

    .offset-xl-9 {
        margin-left: 75%
    }

    .offset-xl-10 {
        margin-left: 83.3333333333%
    }

    .offset-xl-11 {
        margin-left: 91.6666666667%
    }

    .g-xl-0, .gx-xl-0 {
        --bs-gutter-x: 0
    }

    .g-xl-0, .gy-xl-0 {
        --bs-gutter-y: 0
    }

    .g-xl-1, .gx-xl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xl-1, .gy-xl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xl-2, .gx-xl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xl-2, .gy-xl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xl-3, .gx-xl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xl-3, .gy-xl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xl-4, .gx-xl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xl-4, .gy-xl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xl-5, .gx-xl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xl-5, .gy-xl-5 {
        --bs-gutter-y: 3rem
    }
}

@media(min-width: 1400px) {
    .col-xxl {
        flex: 1 0 0%
    }

    .row-cols-xxl-auto > * {
        flex: 0 0 auto;
        width: auto
    }

    .row-cols-xxl-1 > * {
        flex: 0 0 auto;
        width: 100%
    }

    .row-cols-xxl-2 > * {
        flex: 0 0 auto;
        width: 50%
    }

    .row-cols-xxl-3 > * {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .row-cols-xxl-4 > * {
        flex: 0 0 auto;
        width: 25%
    }

    .row-cols-xxl-5 > * {
        flex: 0 0 auto;
        width: 20%
    }

    .row-cols-xxl-6 > * {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto
    }

    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.3333333333%
    }

    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.6666666667%
    }

    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.3333333333%
    }

    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.6666666667%
    }

    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.3333333333%
    }

    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.6666666667%
    }

    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.3333333333%
    }

    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.6666666667%
    }

    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }

    .offset-xxl-0 {
        margin-left: 0
    }

    .offset-xxl-1 {
        margin-left: 8.3333333333%
    }

    .offset-xxl-2 {
        margin-left: 16.6666666667%
    }

    .offset-xxl-3 {
        margin-left: 25%
    }

    .offset-xxl-4 {
        margin-left: 33.3333333333%
    }

    .offset-xxl-5 {
        margin-left: 41.6666666667%
    }

    .offset-xxl-6 {
        margin-left: 50%
    }

    .offset-xxl-7 {
        margin-left: 58.3333333333%
    }

    .offset-xxl-8 {
        margin-left: 66.6666666667%
    }

    .offset-xxl-9 {
        margin-left: 75%
    }

    .offset-xxl-10 {
        margin-left: 83.3333333333%
    }

    .offset-xxl-11 {
        margin-left: 91.6666666667%
    }

    .g-xxl-0, .gx-xxl-0 {
        --bs-gutter-x: 0
    }

    .g-xxl-0, .gy-xxl-0 {
        --bs-gutter-y: 0
    }

    .g-xxl-1, .gx-xxl-1 {
        --bs-gutter-x: 0.25rem
    }

    .g-xxl-1, .gy-xxl-1 {
        --bs-gutter-y: 0.25rem
    }

    .g-xxl-2, .gx-xxl-2 {
        --bs-gutter-x: 0.5rem
    }

    .g-xxl-2, .gy-xxl-2 {
        --bs-gutter-y: 0.5rem
    }

    .g-xxl-3, .gx-xxl-3 {
        --bs-gutter-x: 1rem
    }

    .g-xxl-3, .gy-xxl-3 {
        --bs-gutter-y: 1rem
    }

    .g-xxl-4, .gx-xxl-4 {
        --bs-gutter-x: 1.5rem
    }

    .g-xxl-4, .gy-xxl-4 {
        --bs-gutter-y: 1.5rem
    }

    .g-xxl-5, .gx-xxl-5 {
        --bs-gutter-x: 3rem
    }

    .g-xxl-5, .gy-xxl-5 {
        --bs-gutter-y: 3rem
    }

    .pointer {
        cursor: pointer
    }
}