body {
    font-family: '微軟正黑體',Arial, Helvetica, sans-serif;
    font-size: 18px;
    word-wrap: break-word;
    color: #1d1d1d;
    overflow-x: hidden;
}

h1 {
    text-align: center;
    color: #dc2f6e;
    font-weight: bold;
    font-size: 50px;
}

.top_content {
    font-size: 30px;
    text-align: center;
    line-height: 48px;
}

.blank {
    display: none;
}

h4 {
    font-size: 30px;
    font-weight: bold;
}

h5 {
    font-size: 24px;
    color: #d70c19;
    text-indent: -10px;
    font-weight: bold;
}

ol {
    margin-left: -10px;
}

hr {
    border-top: 2px dashed #dc2f6e;
}

.kv {
    background-image: url(/imgs/Dynabook/cocoro_1920x750.jpg);
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 39%;
    background-position: center;
}

section {
    margin: 20px 0;
}

.wel_text {
    font-size: 36px;
    text-align: center;
    padding: 30px 0;
}

.wel_text2 {
    font-size: 60px;
    text-align: center;
    padding: 30px 0;
    color: #9b1276;
    line-height: 72px;
}

.login_content {
    padding: 50px 5%;
}

.login_border {
    border: #dc2f6e 2px dotted;
}

.button {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 40px 100px;
    border: 0px solid #a12727;
    border-radius: 8px;
    background: #5091eb;
    background: -webkit-linear-gradient(linear, left top, left bottom, from(#5091eb), to(#1854ad));
    background: -moz-linear-gradient(top, #5091eb, #1854ad);
    background: linear-gradient(to bottom, #5091eb, #1854ad);
    font: normal normal bold 36px arial;
    color: #ffffff;
    text-decoration: none;
}

    .button:hover,
    .button:focus {
        background: #60aeff;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#60aeff), to(#1d65d0));
        background: -moz-linear-gradient(top, #60aeff, #1d65d0);
        background: linear-gradient(to bottom, #60aeff, #1d65d0);
        color: #ffffff;
        text-decoration: none;
    }

    .button:active {
        background: #30578d;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#30578d), to(#1854ad));
        background: -moz-linear-gradient(top, #30578d, #1854ad);
        background: linear-gradient(to bottom, #30578d, #1854ad);
    }

.button2 {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    padding: 40px 100px;
    border: 0px solid #a12727;
    border-radius: 8px;
    background: #da5289;
    background: -webkit-linear-gradient(linear, left top, left bottom, from(#da5289), to(#9b1276));
    background: -moz-linear-gradient(top, #da5289, #9b1276);
    background: linear-gradient(to bottom, #da5289, #9b1276);
    font: normal normal bold 36px arial;
    color: #ffffff;
    text-decoration: none;
}

    .button2:hover,
    .button2:focus {
        background: #60aeff;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#60aeff), to(#9b1276));
        background: -moz-linear-gradient(top, #d13380, #9b1276);
        background: linear-gradient(to bottom, #d13380, #9b1276);
        color: #ffffff;
        text-decoration: none;
    }

    .button2:active {
        background: #da5289;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#da5289), to(#9b1276));
        background: -moz-linear-gradient(top, #da5289, #9b1276);
        background: linear-gradient(to bottom, #da5289, #9b1276);
    }

.vip_sp {
    padding: 0 100px;
}

.vip_title {
    padding: 0 80px;
}

.vip_card {
    background-image: url(/imgs/Dynabook/vip_card.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 20%;
    background-position: center;
}

.nor_card {
    background-image: url(/imgs/Dynabook/nor_card.png);
    background-repeat: no-repeat;
    background-size: contain;
    padding-bottom: 20%;
    background-position: center;
}

#copy {
    font-size: 40px;
    font-family: 'Changa', sans-serif;
}

.table2 {
    padding: 30px
}

.table1_list1 {
    width: 15%;
}

.table1_list2 {
    padding: 20px;
}

.ps {
    font-size: 28px;
    color: #dc2f6e;
    padding-top: 20px;
    text-align: center;
}

.list1 {
    background-color: #d6ebf2;
    padding: 20px;
}

.list2 {
    background-color: #f2f2f2;
}

.list3 {
    background-color: #ffff;
}

/*div table*/
/*預設寬100%*/
.divtable {
    display: table;
    min-width: 100%;
}

    .divtable .thead {
        display: table-header-group;
    }

    .divtable .tbody {
        display: table-row-group;
    }

    .divtable .tfooter {
        display: table-footer-group;
    }

    .divtable .tr {
        display: table-row;
    }
    /*預設邊距*/
    .divtable .th,
    .divtable .td {
        display: table-cell;
        padding: 15px 5px;
    }
    /*表格標題，只能在table標籤下有一個，建議用title取代*/
    .divtable .caption {
        display: table-caption;
        text-align: center;
    }

    .divtable .col {
        display: table-column;
    }
    /*選取幾欄*/
    .divtable .colgroup {
        display: table-column-group;
    }


/*RWD DIV表格*/
/*RWD DIVtable*/
.rwd-divtable {
    min-width: 100%;
    background: #fff;
    overflow: hidden;
    color: #4a4a4a;
}
    /*th字體加粗*/
    .rwd-divtable .tr:first-child > .th {
        font-weight: bold;
    }
    /*表格偶數行，只要是tr(不管內部包含th/td)的偶數都會加底色*/
    .rwd-divtable .tr:nth-of-type(even) {
        background: #fff;
    }


.rwd-divtable {
    display: table;
}

    .rwd-divtable .thead {
        display: table-header-group;
    }

    .rwd-divtable .tbody {
        display: table-row-group;
    }

    .rwd-divtable .tfooter {
        display: table-footer-group;
    }

    .rwd-divtable .tr {
        display: table-row;
    }

    .rwd-divtable .th,
    .rwd-divtable .td {
        display: table-cell;
        text-align: center;
        padding: 15px 5px;
    }
    /*表格標題，只能在table標籤下有一個，建議用title取代*/
    .rwd-divtable .caption {
        display: table-caption;
    }

    .rwd-divtable .col {
        display: table-column;
    }
    /*選取幾欄*/
    .rwd-divtable .colgroup {
        display: table-column-group;
    }
    /*會先吃到這個設定讓表頭消失，但尺寸992px以下會再吃到display:block屬性*/
    .rwd-divtable .th {
        display: none;
    }

    .rwd-divtable .td {
        display: block;
    }

        .rwd-divtable .td:before {
            content: attr(data-th) " : ";
            font-weight: bold;
            width: 7em;
            display: inline-block;
        }

        .rwd-divtable .th,
        .rwd-divtable .td:before {
            color: #4A4A4A;
            font-weight: bold;
        }

@media (min-width: 992px) {
    .rwd-divtable .td:before {
        display: none;
    }

    .rwd-divtable .th,
    .rwd-divtable .td {
        display: table-cell;
        padding: 15px 5px;
    }

        .rwd-divtable .th:first-child,
        .rwd-divtable .td:first-child {
            padding-left: 10px;
        }

        .rwd-divtable .th:last-child,
        .rwd-divtable .td:last-child {
            padding-right: 10px;
        }

    .rwd-divtable .th,
    .rwd-divtable .td {
        padding: 15px 5px;
    }

        .rwd-divtable .th,
        .rwd-divtable .td:before {
            color: #4a4a4a;
            font-weight: normal;
        }
}


/*RWD表格*/
/*RWD table*/

.rwd-table {
    background: #fff;
    overflow: hidden;
    color: #4a4a4a;
}

    .rwd-table tr:first-child > th {
        font-weight: bold;
    }


    /*表格偶數行，只要是tr(不管內部包含th/td)的偶數都會加底色*/

    .rwd-table tr:nth-of-type(even) {
        background: #F5F6F7;
    }

    .rwd-table th,
    .rwd-table td {
        margin: 15px 5px;
    }

.rwd-table {
    min-width: 100%;
}


    /*會先吃到這個設定讓表頭消失，但尺寸992px以下會再吃到display:block屬性*/

    .rwd-table th {
        display: none;
    }

    .rwd-table td {
        display: block;
    }

        .rwd-table td:before {
            content: attr(data-th) " : ";
            font-weight: bold;
            width: 7em;
            display: inline-block;
        }

    .rwd-table th,
    .rwd-table td {
        text-align: left;
    }

        .rwd-table th,
        .rwd-table td:before {
            color: #4A4A4A;
            font-weight: bold;
        }

@media (min-width: 992px) {
    .rwd-table td:before {
        display: none;
    }

    .rwd-table th,
    .rwd-table td {
        display: table-cell;
        padding: 15px 5px;
    }

        .rwd-table th:first-child,
        .rwd-table td:first-child {
            padding-left: 10px;
        }

        .rwd-table th:last-child,
        .rwd-table td:last-child {
            padding-right: 10px;
        }

    .rwd-table th,
    .rwd-table td {
        padding: 15px 5px;
    }

        .rwd-table th,
        .rwd-table td:before {
            color: #4a4a4a;
            font-weight: normal;
        }
}
/* gotop48px */
.toTop-arrow {
    width: 3rem;
    height: 3rem;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 33%;
    opacity: 0.8;
    background: #000;
    cursor: pointer;
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    display: none;
}

    .toTop-arrow::before, .toTop-arrow::after {
        width: 25px;
        height: 6px;
        border-radius: 3px;
        background: #f90;
        position: absolute;
        content: "";
    }

    .toTop-arrow::before {
        transform: rotate(-45deg) translate(0, -50%);
        left: 0.42rem;
    }

    .toTop-arrow::after {
        transform: rotate(45deg) translate(0, -50%);
        right: 0.42rem;
    }

    .toTop-arrow:focus {
        outline: none;
    }




@media (min-width: 1200px) and (max-width: 1440px) {
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    h1 {
        font-size: 36px;
    }

    .top_content {
        font-size: 24px;
        text-align: center;
        line-height: 28px;
    }

    .login_content {
        padding: 15px 10%;
    }

    .button {
        padding: 15px 100px;
        border: 0px solid #a12727;
    }

    .button2 {
        padding: 15px 100px;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    h1 {
        font-size: 30px;
    }

    .top_content {
        font-size: 21px;
        text-align: center;
        line-height: 28px;
    }

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

    .login_content {
        padding: 25px 5%;
    }

    .wel_text {
        font-size: 28px;
        text-align: center;
        Padding: 15px 0;
    }

    .wel_text2 {
        font-size: 48px;
        text-align: center;
        padding: 15px 0;
        line-height: 60px;
    }

    .h4 {
        font-size: 21px;
    }

    .button {
        padding: 20px 80px;
        border: 0px solid #a12727;
    }

    .button2 {
        padding: 20px 80px;
    }

    .vip_title {
        padding: 0;
    }

    .table2 {
        padding: 0px
    }

    .table1_list1 {
        width: 100%;
    }

    .rwd-divtable .td {
        text-align: left;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    h1 {
        font-size: 28px;
    }

    .h4 {
        font-size: 21px;
    }

    .top_content {
        font-size: 21px;
        text-align: center;
        line-height: 24px;
    }

    .login_content {
        padding: 20px 0px;
    }

    .login_content {
        padding: 20px 10px;
    }

    .button {
        padding: 15px 40px;
    }

    .button2 {
        padding: 15px 40px;
    }

    .vip_sp {
        padding: 10px;
    }

    .vip_card, .nor_card {
        padding-bottom: 25%;
    }

    .wel_text {
        font-size: 24px;
        text-align: center;
        padding: 10px;
    }

    .wel_text2 {
        font-size: 36px;
        text-align: center;
        padding: 10px;
        line-height: 48px;
    }

    .table2 {
        padding: 0px
    }

    .table1_list1 {
        width: 100%;
    }

    .rwd-divtable .td {
        text-align: left;
    }

    .border-right {
        border-right: 0px solid #dee2e6 !important;
    }
}

@media (max-width: 575.98px) {

    h1 {
        font-size: 30px;
    }

    .top_content {
        font-size: 21px;
        text-align: center;
        line-height: 24px;
    }

    .login_content {
        padding: 20px 5px;
    }

    .kv {
        background-image: url(/imgs/Dynabook/cocoro_500x670.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 132%;
        background-position: center;
    }

    .logo_place {
        padding: 0 15%;
    }

    .button {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        padding: 20px 40px;
        border: 0px solid #a12727;
        border-radius: 8px;
        background: #5091eb;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#5091eb), to(#1854ad));
        background: -moz-linear-gradient(top, #5091eb, #1854ad);
        background: linear-gradient(to bottom, #5091eb, #1854ad);
        font: normal normal bold 36px arial;
        color: #ffffff;
        text-decoration: none;
    }

    .button2 {
        padding: 20px 40px;
    }

    .vip_sp {
        padding: 10px;
    }

    .vip_title {
        padding: 0px;
    }

    .wel_text {
        font-size: 26px;
        text-align: center;
        padding: 10px;
    }

    .wel_text2 {
        font-size: 32px;
        text-align: center;
        padding: 10px;
        line-height: 48px;
    }

    .h4 {
        font-size: 18px;
    }

    #copy {
        font-size: 36px;
        font-family: 'Changa', sans-serif;
    }

    .toTop-arrow {
        width: 3rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 33%;
        opacity: 0.8;
        background: #000;
        cursor: pointer;
        position: fixed;
        right: 2rem;
        bottom: 1rem;
        display: none;
    }

    .table2 {
        padding: 0px
    }

    .table1_list1 {
        width: 100%;
    }

    .rwd-divtable .td {
        text-align: left;
    }

    .border-right {
        border-right: 0px solid #dee2e6 !important;
    }

    .blank {
        margin-top: -16px;
        display: block;
    }

    .ps {
        font-size: 14px;
        color: #dc2f6e;
        padding-top: 10px;
    }

    .vip_card, .nor_card {
        padding-bottom: 30%;
    }
}

@media (max-width: 322px) {
    body {
        margin-right: -15px;
    }

    .toTop-arrow {
        width: 3rem;
        height: 3rem;
        padding: 0;
        margin: 0;
        border: 0;
        border-radius: 33%;
        opacity: 0.8;
        background: #000;
        cursor: pointer;
        position: fixed;
        right: 2rem;
        bottom: 4rem;
        display: none;
    }

    .wel_text2 {
        font-size: 28px;
        text-align: center;
        padding: 10px;
        line-height: 36px;
    }

    .button {
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        padding: 10px 30px;
        border: 0px solid #a12727;
        border-radius: 8px;
        background: #5091eb;
        background: -webkit-linear-gradient(linear, left top, left bottom, from(#5091eb), to(#1854ad));
        background: -moz-linear-gradient(top, #5091eb, #1854ad);
        background: linear-gradient(to bottom, #5091eb, #1854ad);
        font: normal normal bold 36px arial;
        color: #ffffff;
        text-decoration: none;
    }

    .button2 {
        padding: 10px 30px;
    }

    .logo_place {
        padding: 0 10%;
    }

    .blank {
        margin-top: -35px;
        display: block;
    }

    .vip_card {
        background-image: url(/imgs/Dynabook/vip_card.png);
        background-repeat: no-repeat;
        background-size: contain;
        padding-bottom: 30%;
        background-position: center;
    }

    .ps {
        font-size: 14px;
        color: #dc2f6e;
        padding-top: 10px;
    }
}