html,
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
body {
    display: flex;
    width: 100vw;
    overflow-x: hidden;
}
main {
    width: 100%;
    z-index: 99999;
    background-color: #FFFFFF;
}
@media screen and (max-width: 1200px) {
    main {
        z-index: 1;
    }
}

input::placeholder,
*:not(font):not(i) {
     font-family: 'Noto Sans TC', 'Noto Sans SC', sans-serif!important;
    /*font-family: Noto Sans CJK TC;*/
    box-sizing: border-box;
    outline: none;
}

a {
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    color: inherit;
}
a:hover,
a:focus {
    text-decoration: none !important;
}
a:visited {
    color: inherit;
}

img {
    display: block;
}

ul {
    padding: 0;
}

button {
    cursor: pointer;
}

/* scrollbar*/
/* width */
::-webkit-scrollbar {
    width: 8px;
}
/* Track */
::-webkit-scrollbar-track {
    background: #DDDDDD;
    border-radius: 100px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    background: #B2B2B2;
    border-radius: 100px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* jquery datepicker */
.ui-datepicker {
    z-index: 99999!important;
}

.container {
    display: flex;
    width: 100%;
    max-width: 800px;
}
.full-width-container {
    display: flex;
    width: 100%;
    justify-content: center;
}
.row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}
.col-6 {
    width: 50%;
}
@media screen and (max-width: 768px) {
    .col-6 {
        width: 100%;
    }
}
.align-self-end {
    align-self: flex-end;
}
.justify-between {
    justify-content: space-between;
}
.t-bold {
    font-weight: bold!important;
}


/*
    button-group
*/
.button-group {
    display: flex;
}
.button-group .btn {
    flex: 1;
}


/*
    btn
*/
.btn {
    display: inline-block;
    color: #FFFFFF;
    font-size: 16px;
    background-color: #0F0F10;
    border: none;
    padding: 8px 40px;
    letter-spacing: 2px;
    border-radius: 1000px;
    text-align: center;
    white-space: nowrap;
}
.btn-square {
    border-radius: 4px;
}
.btn:visited {
    color: #FFFFFF;
}
.btn:hover {
    background-color: #000000;
}
.btn-sm {
    font-size: 14px;
    padding: 4px 12px;
}
.btn.btn-outline {
    border: 1px solid #000000;
    color: #000000;
    background-color: transparent;
}
.btn.btn-outline:hover {
    border: 1px solid #000000;
    color: #FFFFFF;
    background-color: #0F0F10;
}
.btn.btn-success {
    background-color: #27AE60;
}
.btn.btn-error {
    background-color: #EB5757;
}
.btn-language {
    display: flex;
    background: none;
    border: none;
    color: #FFFFFF;
}
.btn-line-share {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin: 4px;
    padding: 0 16px 0 0;
    font-size: 18px;
    background-color: #00B900;
    border: none;
    border-radius: 8px;
    color: #FFFFFF;
    overflow: hidden;
}
.btn-line-share img {
    width: 48px;
    height: 48px;
    margin-right: 8px
}

.customer-input {
    width: 100%;
    border-radius: 5px;
    padding: 8px;
    border: 1px solid #999999;
}

.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    border-spacing: 0;
    border-collapse: collapse;
}
.table.table-bordered tr,
.table.table-bordered td {
    border: 1px solid #999999;
    padding: 4px 8px;
}
.table.table-bordered thead {
    white-space: nowrap;
}

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

/*
    hidden
*/
.hidden {
    display: none!important;
}
@media screen and (max-width: 769px) {
    .hidden-md {
        display: none;
    }
}

/*
    display
*/
.d-block-md {
    display: none;
}
@media screen and (max-width: 769px) {
    .d-block-md {
        display: block;
    }
}


/*
    menu
*/
.menu {
    display: flex;
    list-style: none;
    color: #554637;
}
.menu li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px;
    white-space: nowrap;
    z-index: 999;
}
.menu > li:hover > a,
.menu > li.active > a {
    background-color: #0F0F10;
    color: #F2F3F5;
}
.menu li a {
    padding: 0 4px;
}
.menu .sub-menu {
    margin-right: 16px;
}
.menu .sub-menu a {
    position: relative;
}
.menu .sub-menu li {
    font-size: 14px;
    padding: 0;
}
.menu .sub-menu li > a {
    font-size: 14px;
    padding: 4px 20px;
}
.menu .sub-menu li:hover > a {
    background-color: #0F0F10;
    color: #F2F3F5;
}
.menu .sub-menu li:not(:last-child) {
    border-bottom: 1px solid #E0E0E0;
}
.menu .sub-menu > ul {
    display: none;
    position: absolute;
    top: 100%;
    background-color: #F7F3F3;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.menu .sub-menu:hover > ul {
    display: block;
}
.menu .sub-menu button {
    font-size: 16px;
    padding: 0;
}
.menu .sub-menu > a {
    position: relative;
    display: flex;
}
.menu .sub-menu > a::after {
    font-family: 'Font Awesome 5 Pro', sans-serif;
    display: block;
    font-weight: 600;
    content: '\f078';
    color: #554637;
    position: absolute;
    top: 50%;
    left: calc(100% + 1px);
    transform: translateY(-50%);
}


/*
    breadcrumb
*/
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    margin: 0;
    padding: 8px 24px;
    list-style: none;
    letter-spacing: 1.2px;
    white-space: nowrap;
}
.breadcrumb li {
    padding: 4px 12px;
}
.breadcrumb li:first-child {
    color: #FFFFFF;
    background-color: #0F0F10;
}
.breadcrumb li:not(:first-child) {
    padding: 4px 0 4px 8px;
}
.breadcrumb li:not(:first-child)::before {
    font-family: 'Font Awesome 5 Pro';
    content: "\f054";
    font-weight: 300;
    margin: 0 8px;
}


/*
    price-container
*/
.price-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 16px 0;
}
.price-block {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 240px;
    margin: 8px;
    padding: 20px 8px;
    border: 1px solid #0F0F10;
    border-radius: 10px;
    align-self: center;
}
.price-block .price-item-name {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 1.2px;
    white-space: nowrap;
}
.price-block .price {
    letter-spacing: 1.2px;
}
.price-block::before {
    position: absolute;
    content: "";
    top: 0;
    width: 160px;
    height: 5px;
    transform: translateY(-50%);
    background-color: #E5E5E5;
}


/*
    form-layout
*/
.form-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
}
.form-layout form {
    width: 100%;
}
.form-layout .button-group {
    margin: 32px 0 8px;
}
.form-layout .input::placeholder {
    color: #0F0F10;
}

/*
    form-group
*/
.form-group {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 8px 0;
    padding: 8px 16px;
    background-color: #FFFFFF;
    border: 1px solid #0F0F10;
    border-radius: 5px;
    font-size: 16px;
    color: #000000;
}
.form-group .select {
    flex: 1;
}
.form-group .select .select-options {
    background-color: #E5E5E5;
    border-color: #000000;
    color: #000000;
}
.form-group .select .select-options li:not(:first-child) {
    border-top: 1px solid #000000;
}
.form-group .select-styled {
    color: #000000;
    font-size: 16px;
}
.form-group .select-styled::after {
    border-color: #000000 transparent transparent transparent;
}

/*
    form-control
*/
.form-control {
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    font-size: 16px;
}
.form-control::placeholder {
    color: #000000;
}


/*
    logo-container
*/
.logo-container {
    display: flex;
    width: 100%;
    height: 100%;
    margin: 0 16px;
}
.logo-container .logo {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: contain;
}

/*
    pagination
*/
.pagination {
    width: 100%;
    margin: 0;
    padding: 32px;
    display: flex;
    justify-content: center;
    list-style-type: none;
}
.pagination li {
    margin: 2px;
    font-size: 12px;
    font-weight: lighter;
    background-color: #E5E5E5;
    color: #0F0F10;
    border-radius: 3px;
}
.pagination li.active {
    background-color: #554637;
    color: #FFFFFF;
}
.pagination a {
    display: block;
    width: 100%;
    min-width: 32px;
    height: 100%;
    padding: 8px;
    text-align: center;
    color: #0F0F10;
}
.pagination li.active a {
    color: #FFFFFF;
}

/*
    main-header
*/
.main-header {
    width: 100%;
    height: 80px;
    position: fixed;
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #F7F3F3;
    padding: 16px 32px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 99999;
    border-top: 16px solid #000000;
}
.main-header #button-nav-open {
    display: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 8px 16px;
    font-size: 18px;
    color: #6A3332;
    border-radius: 5px;
}
.main-header .btn-to-top,
.main-header .btn-to-bottom {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 32px;
    height: 32px;
    color: #FFFFFF;
    background-color: #000000;
    border-radius: 5px;
    cursor: pointer;
    opacity: .8;
}
.main-header .btn-to-top:hover,
.main-header .btn-to-bottom:hover {
    opacity: 1;
}
.main-header .btn-to-top {
    top: calc(80px + 8px);
    right: 8px;
}
.main-header .btn-to-bottom {
    bottom: 8px;
    right: 8px;
}
.main-header .logo {
    object-position: left!important;
}
@media screen and (max-width: 1200px) {
    .main-header {
        height: 64px;
        justify-content: center;
        padding: 8px 16px;
    }
    .main-header .top-menu {
        display: none;
    }
    .main-header #button-nav-open {
        display: block;
    }
    .main-header .btn-to-top {
        top: calc(64px + 8px);
    }
    .main-header .logo-container {
        margin: 0 40px;
    }
    .main-header .logo {
        object-position: center!important;
    }
}
@media screen and (max-width: 480px) {
    .main-header #button-nav-open {
        left: 4px;
    }
}

/*
    main-main-body
*/
.main-body {
    min-height: calc(100vh - 80px - 60px);
    margin-top: 80px;
    padding: 32px 32px;
    background-color: #E5E5E5;
}
@media screen and (max-width: 1200px) {
    .main-body {
        margin-top: 64px;
    }
}

/*
    main-main-main-footer
*/
.main-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 32px;
    background-color: #000000;
    overflow: hidden;
}
.main-footer .left-container {
    display: flex;
    align-items: center;
}
.main-footer .list {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.main-footer > div {
    margin: 0 16px;
}
.main-footer .logo-container {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
.main-footer .logo {
    width: 100%;
    height: 100%;
    max-height: 36px;
    padding: 0 8px;
    object-position: left;
}
.main-footer .info-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    white-space: nowrap;
    margin-left: 32px;
    color: #BBBBBB;
    letter-spacing: 2px;
}
.main-footer .info-container > div {
    position: relative;
    margin: 0 8px;
}
.main-footer .info-container > div:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: -8px;
    width: 1px;
    background-color: #BBBBBB;
}
.main-footer .img-container {
    display: flex;
    align-items: center;
}
.main-footer .img-container a {
    width: 32px;
    height: 32px;
    text-align: center;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 22px;
    border-radius: 100%;
    margin: 0 8px;
}
.main-footer .img-container img {
    width: auto;
    height: 100%;
    margin: 0 8px;
    object-fit: contain;
}
.main-footer .img-container .icon-sm {
    height: 36px;
}
@media screen and (max-width: 1200px) {
    .main-footer {
        padding: 16px;
    }
    .main-footer .left-container {
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
    }
    .main-footer .info-container {
        margin-top: 8px;
        margin-left: 0;
    }
}
@media screen and (max-width: 800px) {
    .main-footer .info-container {
        flex-direction: column;
        margin-top: 24px;
    }
    .main-footer .info-container > div:not(:last-child)::after {
        display: none;
    }
    .main-footer .img-container {
        align-self: flex-start;
    }
}
@media screen and (max-width: 480px) {
    .main-footer {
        flex-direction: column;
    }
    .main-footer .img-container {
        align-self: center;
        margin-top: 16px;
    }
}


/*
    module-banner-horizontal
*/
.module-banner-horizontal {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.module-banner-horizontal .banners {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.module-banner-horizontal .background-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
}
.module-banner-horizontal .background {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}

::placeholder { /* CSS 3 標準 */
    font-family: Noto Sans CJK TC;
    color: #FFFFFF;;
}

::-webkit-input-placeholder { /* Chrome, Safari */
    font-family: Noto Sans CJK TC;
    color: #FFFFFF;
}

:-ms-input-placeholder { /* IE 10+ */
    font-family: Noto Sans CJK TC;
    color: #FFFFFF;
}

::-moz-placeholder { /* Firefox 19+ */
    font-family: Noto Sans CJK TC;
    color: #FFFFFF;
    opacity: 1;
}


/* page-connection */
#page-connection {
    background-color: #E5E5E5;
}
#page-connection .wrapper {
    width: 100%;
    max-width: 1000px;
    padding: 32px 0;
}
#page-connection .col-6 {
    padding: 16px 32px;
}
#page-connection iframe {
    width: 100%;
}
#page-connection .info {
    letter-spacing: 1.2px;
}
#page-connection .icon-group {
    display: flex;
    margin-top: 16px;
}
#page-connection .icon-group .icon {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    background-color: #0F0F10;
    color: #FFFFFF;
    border-radius: 100%;
}
#page-connection .icon-group .icon-img {
    height: 32px;
    margin: 0 8px;
}
@media screen and (max-width: 768px) {
    .row {
        flex-wrap: wrap-reverse;
    }
}
@media screen and (max-width: 480px) {
    #page-connection {
        padding: 16px;
    }
    #page-connection .wrapper {
        padding-top: 16px;
    }
    #page-connection .breadcrumb {
        padding: 8px 12px;
    }
    #page-connection .col-6 {
        padding: 8px 12px;
    }
    #page-connection iframe {
        max-height: 320px;
    }
}


/* #page-gradeinquiry{ */
#page-gradeinquiry{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-gradeinquiry.select-options {
        display: none;
        position: absolute;
        top: calc(100% + 4px);
        left: 16px;
        z-index: 999;
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: #F5F5F5;
        border: 2px solid #0F0F10;
        min-width: 100%;
        max-height: 250px;
        overflow-x: hidden;
        overflow-y: auto;
    }
#page-gradeinquiry .title{
    font-style: normal;
    font-weight: 300;
    font-size: 48px;
    line-height: 70px;
}
#page-gradeinquiry .body-brown{
    margin: 0px auto;
    padding: 0 40px;
    width: 100%;
    max-width: 800px;
    height: 390px;
    background: #6A3332;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-gradeinquiry .input {
    display: flex;
    justify-content: flex-start;
    align-items:center;
    width: 360px;
    height: 56px;
    margin-top: 23px;
    background: rgba(209, 190, 182, 0.17);
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 5px;
    font-size: 18px;
}
#page-gradeinquiry .input-group{
    margin-top: 30px;
}

#page-gradeinquiry .btn{
    width: 146px;
    margin-top: 30px;
    height: 56px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 30px;
    font-size: 25px;
    background-color: #6A3332;
    color: white;
}
#page-gradeinquiry .btn:hover{
    width: 146px;
    margin-top: 35px;
    height: 56px;
    border: 1px solid #FFFFFF;
    box-sizing: border-box;
    border-radius: 30px;
    opacity: 0.4;
    font-size: 25px;
    background-color: #6A3332;
    color: white;
}
#page-gradeinquiry .input-font{
    margin-left: 20px;
    font-size: 20px;
    line-height: 29px;
}

#page-gradeinquiry .grad-select{
    /* border: aliceblue;
    display: flex; */
    position: relative;
    font-size: 20px;
    color: white;
    background-color: rgb(123, 74, 73);
    margin: 0 32px;
    padding: -1px 8px;
    border-color: 0px;
    text-align: center;
}
.select-options {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 16px;
    z-index: 999;
    margin: 0;
    color: #ffff;
    padding: 0;
    list-style: none;
    background-color: #7b4a49;
    border: 1px solid #fdfdfd;
    min-width: 100%;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}
 .select-styled {
    display: flex;
    font-size: 20px;
    line-height: 29px;
    color: #ffffff;
    margin: 0 32px;
    border-bottom: none;
}
.select-options li:not(:first-child) {
    border-top: 1px solid #ffffff;
}

.select-styled:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
}
.select-styled.active:after {
    top: 50%;
    border-color: transparent transparent #ffffff transparent;
}
#page-gradeinquiry.grad-select:after {
    display: block;
    content: '';
    width: 0;
    height: 0;
    border: 7px solid #ffffff;
    /* border-color: #ffffff transparent transparent transparent; */
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
}





/* page-result */
#page-result .title-white{
    color: #ffffff;
    margin-top: 50px;
}

#page-result{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-result p {
    margin: 2px;
}
#page-result .body-brown{
    margin: 16px auto;
    padding: 0 40px;
    max-width: 800px;
    width: 100%;
    height: 500px;
    background: #6A3332;
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#page-result .text-data{
    margin-top: 10px;
    font-family: Noto Sans CJK TC;
    font-style: normal;
    font-weight: normal;
    font-size: 20px;
    line-height: 29px;
    color: #ffffff;
}

#page-result .text-main{
    width: 100%;
    max-width: 540px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: left;
    display: flex;
}

#page-result .data-two{
    margin-left: 90px;
}
#page-result .data-num{
    margin-left: 31px;
}

#page-result .table{
    color: #ffff;
    border-style: none;
  
    border-collapse: collapse;
    border-color: #6A3332;
    border-spacing: 0px;
}

#page-result .text-a{
    margin-top: 10px;
    font-style: normal;
    font-weight: normal;
    font-size: 15px;
    line-height: 29px;
    color: #ffffff;
}
#page-result td {
    white-space: nowrap;
}


/* activity page */
#page-activity .main-body{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
#page-activity{
    padding-top: 64px;
    margin-bottom: 100px;
}

#page-activity .img-content {
    width: 50%;
    padding: 32px 16px;
    align-items: center;
    text-align: center;
}
#page-activity .mask-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-activity .body-white {
    align-items: center;
    width: 85%;
    min-width: 85%;
    align-items: center;
    flex-wrap: wrap;
    max-width: 1000px;
    display: flex;
    align-items: center;
    display: flex;
}


#page-activity .image{
    width: 100%;
    height: 100%;
}
#page-activity .title-font{
   font-size: 23px;
}
 
#page-activity .a-font{
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
 }




/* download page */
#page-download {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: #E5E5E5;
}
#page-download .download-list {
    width: 100%;
    max-width: 600px;
    padding: 0 16px;
}
#page-download .button-group {
    width: 100%;
    max-width: 240px;
    padding: 0 8px;
}
#page-download .title {
   color: #000000;
   margin-top: 40px;
   font-style: normal;
   font-weight: 300;
   font-size: 28px;
   line-height: 41px;
}
#page-download .body {
    width: 100%;
    max-width: 640px;
    margin-bottom: 100px;
    height: 100%;
    flex-wrap: wrap;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-download .font {
   padding: 15px;
   text-decoration: underline;
}
#page-download .container {
    width: 100%;
    border: 1px solid #000000;
    box-sizing: border-box;
    margin-top: 30px;
    display: flex;
    align-items: stretch;
    padding: 16px;
}
#page-download .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    margin-left: 8px;
}
#page-download .category-img {
    width: 100%;
    max-width: 160px;
    height: 100%;
    max-height: 220px;
    object-fit: contain;
    object-position: center;
}
#page-download .text {
    font-style: normal;
    font-weight: 300;
    font-size: 22px;
    text-align: center;
    margin-bottom: 16px;
}
@media screen and (max-width: 768px) {
    #page-download .body {
        max-width: 560px;
    }
    #page-download .text {
        font-size: 16px;
        margin-bottom: 8px;
    }
    #page-download .category-img {
        max-width: 120px;
        max-height: 170px;
    }
}
@media screen and (max-width: 768px) {
    #page-download {
        padding: 32px 8px;
    }
    #page-download .breadcrumb {
        padding: 8px 12px;
    }
}

/* lntroduction Page*/

#page-lntroduction{
    background: #FBF0EC;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    padding: 0;
}
#page-lntroduction p {
    margin: 1px 0;
}

#page-lntroduction .content{
    margin-top:40px;
    width: 95%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 0 35px;
}
#page-lntroduction .title {
    font-size: 28px;
    line-height: 41px;
    color: #000000;
    font-weight: 300;
    margin-top: 40px;
}

#page-lntroduction .img{
    display: -webkit-inline-box;
    margin-bottom: 10px;
}

#page-lntroduction .main-left {
    width: 50%;
    display: flex;
    padding: 0 16px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    right: -40px;
}
#page-lntroduction .main-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    left: -40px;
}

#page-lntroduction .font{
    margin-left: 20px;
}
#page-lntroduction .btn {
    width: 40%;
    height: 56px;
    border: 1px solid #000000;
    box-sizing: border-box;
    border-radius: 30px;
    font-size: 25px;
    background-color: rgba(0, 0, 0, 0);
    color: black;
    text-align: center;
}
#page-lntroduction .center{
    width: 100%;
    align-items: center;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#page-lntroduction .font-bg{
    font-size: 28px;
    line-height: 41px;
    font-weight: bold;
    font-style: normal;
}
#page-lntroduction .image{
   width: 65%;
}
#page-lntroduction .down-body .box-main {
    color: #9E0909;
    /*background-color: #EDC9BD;*/
    position: absolute;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    text-align: center;
    top: -12px;
}

#page-lntroduction .box-main {
    color: #9E0909;
    /*background-color: #FBF0EC;*/
    position: absolute;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    line-height: 23px;
    text-align: center;
    top: -12px;
    z-index: 9;
}
#page-lntroduction .box {
    border: 1px solid #9E0909;
    box-sizing: border-box;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 79px;
    position: relative;
    width: 165px;
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 16px;
}
#page-lntroduction .box::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 24px;
    right: 24px;
    height: 5px;
    transform: translateY(-50%);
    background-color: #FBF0EC;
}
#page-lntroduction .down-body .box::after {
    background-color: #EDC9BD;
}

#page-lntroduction .price {
    font-size: 18px;
    font-weight: bold;
    line-height: 23px;
    color: #9E0909;

}


#page-lntroduction .group {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
    justify-content: left;
    align-items: left;
    flex-wrap: wrap;
}
#page-lntroduction .top-body{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-wrap: wrap;
    background: #FBF0EC;
    margin-top: 25px;
    padding: 0 32px;
}
#page-lntroduction .down-body{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: left;
    flex-wrap: wrap;
    background-color: #EDC9BD;
    padding: 0 32px;
}

#page-lntroduction .top-body .box-down {
    position: absolute;
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 23px;
    text-align: center;
    top: -25px;
    color: #9E0909;
    /*background-color: #FBF0EC;*/
}

#page-lntroduction .down-body .box-down {
    position: absolute;
    font-size: 16px;
    padding-left: 8px;
    padding-right: 8px;
    line-height: 23px;
    text-align: center;
    top: -25px;
    color: #9E0909;
    background-color: #EDC9BD;
}

#page-lntroduction .select-styled {
    color: #000000;
    border-bottom: 4px solid #0F0F10;
    font-size: 28px;
    padding: 0 8px 8px;
    top: calc(50% - 3px);
}
#page-lntroduction .select-styled:after {
    border-color: #000000 transparent transparent transparent;
}
#page-lntroduction .select-options li {
    padding: 0 4px;
}
@media screen and (min-width: 1800px) {
    #page-lntroduction p {
        display: contents;
    }
}

@media screen and (min-width: 1024px) {
    #page-lntroduction .box {
        width: 220px;
    }
}


/* page-teacher */
#page-teacher {

}
#page-teacher .teacher-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 1000px;
    padding: 8px;
}
#page-teacher .img-content {
    width: 25%;
    padding: 16px;
}
#page-teacher .image {
    width: 100%;
    height: auto;
}
#page-teacher .title-font {
    font-size: 22px;
    text-align: center;
    margin-top: 8px;
}
 
#page-teacher .a-font {
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
}
#page-teacher .title {
    font-size: 48px;
    color: #000000;
    font-weight: 300;
    margin-top: 40px;
}
#page-teacher .description-container {
    width: 100%;
    max-width: 800px;
    margin-top: 32px;
    padding: 0 24px;
}
@media screen and (max-width: 768px) {
    #page-teacher {
        padding: 16px;
    }
    #page-teacher .breadcrumb {
        padding: 8px 12px;
    }
    #page-teacher .img-content {
        width: 33.33333%
    }
}
@media screen and (max-width: 480px) {
    #page-teacher .img-content {
        width: 50%
    }
}
@media screen and (max-width: 360px) {
    #page-teacher .img-content {
        width: 100%
    }
}

/* latestnews page */
#page-latestnews .main-body{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
#page-latestnews .img-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: 0 0 9px #b2b2b2;
    border-radius: 6px;
    overflow: hidden;
    background-color: #FFFFFF;
}
#page-latestnews .mask-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-latestnews .body-white {
    width: 100%;
    flex-wrap: wrap;
    max-width: 1200px;
    align-items: stretch;
    display: flex;
}
#page-latestnews .body-white .item {
    width: 33.3333%;
    padding: 16px;
}


#page-latestnews .image{
    width: 100%;
    /* padding: 23px; */
    /*height: 100%;*/
}
#page-latestnews .title-font{
   font-size: 23px;
}
 
#page-latestnews .a-font{
    font-style: normal;
    font-weight: 300;
    font-size: 28px;
 }
 #page-latestnews .title {
    font-size: 48px;
    color: #000000;
    font-weight: 300;
    margin-top: 40px;
}
#page-latestnews .font-box {
    /* height: 350px; */
    background-color: #ffffff;
    border-radius: 0px 0px 5px 5px;
}
#page-latestnews .font-bg {
    font-weight: bold;
    font-size: 20px;
    line-height: 32px;
}
#page-latestnews .font-sm {
    font-size: 14px;
    line-height: 20px;
    margin-top: 15px;
}
#page-latestnews .font-m {
    margin-top: 20px;
    font-size: 16px;
    line-height: 20px;
}
#page-latestnews .btn {
    width: 146px;
    height: 56px;
    border: 1px solid #000000;
    box-sizing: border-box;
    border-radius: 30px;
    font-size: 22px;
    background-color: #ffffff;
    color: black;
    padding: 8px 12px;
}

#page-latestnews .font-content{
    margin: 30px 18px;
}
#page-latestnews .center{
    padding: 16px 0;
    margin: 0;
    flex-direction: initial;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}
@media screen and (max-width: 768px) {
    #page-latestnews .body-white .item {
        width: 50%;
    }
}
@media screen and (max-width: 480px) {
    #page-latestnews .body-white .item {
        width: 100%;
    }
}





/* examination page */
#page-examination{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    background-color: #E5E5E5;
}

#page-examination .body{
    margin-top:40px;
    width: 80%;
    display: flex;
    flex-wrap: wrap;
}
#page-examination .title {
    font-size: 28px;
    line-height: 41px;
    color: #000000;
    font-weight: 300;
    margin-top: 40px;
}
#page-examination .test-item{
    display: flex;
    flex-wrap: wrap-reverse;
    width: 100%;
    margin-bottom: 32px;
}
#page-examination .img{
    display: inline-block;
    margin-bottom: 10px;
}

#page-examination .main-left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}
#page-examination .main-right {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}

#page-examination .font {
    margin-left: 20px;
}
#page-examination .center{
    width: 100%;
    align-items: center;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#page-examination .font-bg {
    font-size: 28px;
    line-height: 41px;
    font-style: normal;
    font-weight: bold;
}
#page-examination .image {
   width: 80%;
}
#page-examination .font-group {
    margin-top: 30px;
}
#page-examination .font-group p {
    margin: 0;
}
#page-examination .select-styled {
    color: #000000;
    border-bottom: 4px solid #0F0F10;
    font-size: 28px;
    padding: 0 8px 8px;
    top: calc(50% - 3px);
}
#page-examination .select-styled:after {
    border-color: #000000 transparent transparent transparent;
}
#page-examination .select-options li {
    padding: 0 4px;
}

#page-examination .test-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
}
#page-examination .test-list .item-wrapper {
    padding: 8px 24px;
}
#page-examination .test-list .test-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 1px solid #0F0F10;
}
#page-examination .test-item .title {
    margin-top: 8px;
    margin-bottom: 8px;
    padding: 0 16px;
    font-size: 22px;
    line-height: normal;
}
#page-examination .test-item .cover {
    width: 100%;
}
#page-examination .button-group-container {
    width: 100%;
    max-width: 320px;
    padding: 8px 16px;
}
#page-examination .button-group {
    padding: 4px 8px;
}
#page-examination .button-group .btn {
    margin: 4px 8px;
}
#page-examination .info-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    padding: 0 16px 40px;
}
#page-examination .info-container .button-group {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}
#page-examination .info-container .button-group .btn {
    max-width: 240px;
}
@media screen and (max-width: 768px) {
    #page-examination .item-wrapper {
        width: 100%;
    }
}
@media screen and (max-width: 480px) {
    #page-examination {
        padding: 32px 0;
    }
}




 /* RWD */
 @media screen and (max-width: 1200px) {
    #page-examination .main-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
    #page-examination .main-right {
        margin: 16px 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }
}

/*rwd-#page-lntroduction */
@media screen and (max-width: 1024px) {
    #page-lntroduction .box-main {
        color: #9E0909;
        /*background-color: #FBF0EC;*/
        position: absolute;
        font-size: 16px;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 23px;
        text-align: center;
        top: -12px;
    }
    #page-lntroduction .group {
        width: 100%;
        margin-top: 18px;
        display: flex;
        justify-content: left;
        align-items: left;
        flex-wrap: wrap;
    }
    #page-lntroduction .box {
        width: 112px;
        margin-top: 20px;
    }
    #page-lntroduction .box::after {
        left: 8px;
        right: 8px;
    }
}


 @media screen and (max-width: 768px) {

    #page-lntroduction .font-bg, #page-lntroduction .title, #page-lntroduction .btn {
        font-size: 24px;
    }
    #page-result .data-two {
        margin-left: 70px;
    }
    #page-result .data-num {
        margin-left: 13px;
    }
    #page-result .text-main {
        width: 70%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
        display: flex;
    }
    #page-connection .body-white {
        width: 85%;
        flex-wrap: wrap;
        max-width: 1000px;
        display: flex;
        align-items: center;
        margin-bottom: 35px;
    }
    #page-connection .main-left, #page-connection .main-right {
        /*width: 100%;*/
    }

    #page-activity .body-white {
        align-items: center;
        width: 96%;
        min-width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        max-width: 1000px;
        display: flex;
    }
    #page-activity .img-content {
        width: 90%;
        align-items: center;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 50px;
        text-align: center;
    }
    #page-latestnews .img-content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        text-align: left;
        box-shadow: 0 0 9px #b2b2b2;
        border-radius: 6px;
    }
    #page-lntroduction .btn {
        width: 60%;
    }
    #page-lntroduction .font-p{
        display: none;
    }
    #page-lntroduction .group{
        justify-content: center;
    }
    #page-lntroduction .main-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        left: 0;
    }
    #page-lntroduction .content {
        margin-top: 40px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    #page-lntroduction .main-left {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        right: 0;
    }
    #page-lntroduction .top-body {
        width: 100%;
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: left;
        flex-wrap: wrap;
        background: #FBF0EC;
        margin-top: 0;
    }
    #page-lntroduction .down-body {
        width: 100%;
        min-height: 100%;
        display: flex;
        justify-content: center;
        align-items: left;
        flex-wrap: wrap;
        background-color: #EDC9BD;
    }
    #page-lntroduction .image {
        width: 80%;
        margin-top: 20px;
    }
    #page-lntroduction .btn-down {
        width: 60%;
        height: 56px;
        border: 1px solid #000000;
        box-sizing: border-box;
        border-radius: 30px;
        font-size: 25px;
        background-color: #EDC9BD;
        color: black;
    }
}
@media screen and (max-width: 425px){
    #page-result .data-two {
        margin-left: 70px;
    }
    #page-result .data-num {
        margin-left: 13px;
    }
    #page-result .text-main {
        width: 120%;
        flex-direction: column;
        justify-content: flex-start;
        align-items: left;
        display: flex;
    }

    #page-gradeinquiry .input {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 277px;
        height: 56px;
        margin-top: 23px;
        background: rgba(209, 190, 182, 0.17);
        border: 1px solid #FFFFFF;
        box-sizing: border-box;
        border-radius: 5px;
    }
    #page-latestnews .img-content {
        width: 100%;
        text-align: left;
        box-shadow: 0px 0px 9px #b2b2b2;
        border-radius: 6px;
    }
    
}


@media screen and (max-width: 425px){
    #page-download .title {
        font-size: 24px;
        color: #000000;
        font-weight: 300;
        margin-top: 40px;
    }
}
@media screen and (max-width: 375px){
    #page-download .title {
        font-size: 24px;
        color: #000000;
        font-weight: 300;
        margin-top: 40px;
    }
}
@media screen and (max-width: 320px) {
    #page-download .title {
        font-size: 24px;
        color: #000000;
        font-weight: 300;
        margin-top: 40px;
    }
}

/*
    slick
*/
.slick-slider a {
    display: block!important;
}
.slick-dots {
    bottom: 16px;
}
.slick-dots li {
    margin: 0;
}
.slick-dots li button:before {
    color: #FFFFFF;
    font-size: 8px;
}
.slick-dots li.slick-active button:before {
    color: #FFFFFF;
}
.slick-next,
.slick-prev {
    position: absolute;
    z-index: 999;
    width: auto;
    height: auto;
}
.slick-next {
    right: -32px;
}
.slick-prev {
    left: -32px;
}
.slick-next:before,
.slick-prev:before {
    font-size: 24px;
    opacity: 1;
    color: #0F0F10;
}
.slick-dotted.slick-slider {
    margin-bottom: 0;
}
.slick-track {
    display: flex;
    align-items: center;
}


/*
    home-column-left
*/
.home-column-left {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    height:100vh;
    padding: 32px 8px;
    background-color: #FFFFFF;
    z-index: 999;
    transition-property: left;
    transition-duration: 300ms;
    left: -100%;
}
.home-column-left.home {
    left: 0;
}
.home-column-left.open {
    left: 0!important;
}
.home-column-left .logo-container {
    width: 160px;
    height: auto;
    display: flex;
    justify-content: center;
}
.home-column-left .menu {
    display: flex;
    flex-direction: column;
    font-size: 18px;
    align-items: flex-start;
}
.home-column-left .menu .sub-menu {
    flex-direction: column;
    align-items: flex-start;
}
.home-column-left .menu .sub-menu > ul {
    position: relative;
    top: unset;
    left: -8px;
}
.home-column-left #button-nav-close {
    display: none;
    position: absolute;
    right: 16px;
    top: 32px;
    transform: translateY(-50%);
    border: none;
    background: none;
    padding: 8px 16px;
    font-size: 22px;
    color: #6A3332;
    border-radius: 5px;
}
.home-column-left .menu .sub-menu > a::after {
    position: absolute;
    margin: 0;
    top: 4px;
    left: calc(100% + 4px);
    transform: translateY(0%);
}
.home-column-left .logo-container {
    width: 180px;
}
.home-column-left .logo-container .logo {
    width: 100%;
}
@media screen and (max-width: 1200px) {
    .home-column-left {
        left: -100%;
    }
    .home-column-left.home {
        left: -100%;
    }
    .home-column-left #button-nav-close {
        display: block;
    }
}

/*
    page-home
*/
#page-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #E5E5E5;
    padding: 0;
}
#page-home > div:not(:last-child) {
    border-bottom: 16px solid #F2F2F2;
}
#page-home .news-container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-content: space-between;
    padding: 48px 16px;
}
#page-home .news-container .news-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13), 0 1px 1px rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    overflow: hidden;
    background-color: #FFFFFF;
}
#page-home .news-container .news-item .image {
    width: 300px;
    height: 160px;
    object-fit: cover;
    object-position: center;
}
#page-home .news-container .news-item .font-box {
    flex: 1;
    padding: 16px;
}
#page-home .news-container .news-item .font-box .title {
    margin-top: 8px;
    font-weight: bold;
    font-size: 16px;
    line-height: 23px;
}
#page-home .news-container .news-item .font-box .content {
    margin-top: 8px;
    font-size: 14px;
}
#page-home .news-container .news-item .more {
    border-radius: 30px;
    border: 1px solid #171B1E;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 16px;
    background-color: rgba(0, 0, 0, 0);
    margin-bottom: 16px;
    transition-property: background-color, color;
    transition-duration: 300ms;
    cursor: pointer;
}
#page-home .news-container .news-item .more:hover {
    background-color: rgba(0, 0, 0, 1);
    color: #FFFFFF;
}
#page-home .info-container {
    display: flex;
    width: 100%;
    max-width: 1000px;
    justify-content: space-between;
    padding: 32px 16px;
}
#page-home .info-container .info-item {
    width: 450px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13), 0 1px 1px rgba(0, 0, 0, 0.06);
    border-radius: 5px;
    overflow: hidden;
    background-color: #FFFFFF;
    background-position: center;
    background-size: cover;
}
#page-home .info-container .info-item .content {
    width: 100%;
    height: 100%;
    padding: 32px;
    background-color: rgba(255, 255, 255, 1);
    transition-property: background-color;
    transition-duration: 500ms;
}
#page-home .info-container .info-item:hover .content {
    background-color: rgba(255, 255, 255, 0);
}
#page-home .info-container .info-item .title {
    font-size: 28px;
}
#page-home .info-container .info-item:hover .title {
    color: #FFFFFF;
}
#page-home .info-container .info-item .text {
    margin-top: 160px;
    font-size: 40px;
}
#page-home .info-container .info-item:hover .text {
    color: #FFFFFF;
}
#page-home .info-container .info-item .more {
    display: inline-block;
    border-radius: 30px;
    border: 1px solid #171B1E;
    font-weight: bold;
    margin-top: 16px;
    padding: 12px 32px;
    background-color: rgba(0, 0, 0, 0);
    font-size: 18px;
    cursor: pointer;
}
#page-home .info-container .info-item:hover .more {
    color: #FFFFFF;
    border-color: #FFFFFF;
}
#page-home .activity-banner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    padding: 40px 48px;
}
#page-home .activity-banner-container .banners {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}
#page-home .activity-banner-container .background-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    padding: 0 16px;
}
#page-home .activity-banner-container .background {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
}
@media screen and (max-width: 1200px) {
    #main-page-home {
        margin-left: 0;
    }
    #page-home {
        width: 100%;
        margin-top: 64px;
    }
    #page-home .info-container .info-item .content {
        background-color: rgba(255, 255, 255, 0);
    }
    #page-home .info-container .info-item .title {
        color: #FFFFFF;
    }
    #page-home .info-container .info-item .text {
        color: #FFFFFF;
    }
    #page-home .info-container .info-item .more {
        color: #FFFFFF;
        border-color: #FFFFFF;
    }
}
@media screen and (max-width: 1024px) {
    #page-home .news-container .news-item {
        width: 260px;
    }
    #page-home .info-container .info-item {
        width: 380px;
    }
}
@media screen and (max-width: 768px) {
    #page-home .news-container {
        padding: 24px 16px;
    }
    #page-home .news-container .news-item {
        width: 232px;
    }
    #page-home .info-container .info-item {
        width: 360px;
    }
    #page-home .activity-banner-container {
        padding: 24px 48px;
    }
}
@media screen and (max-width: 480px) {
    #page-home .news-container {
        flex-direction: column;
        align-items: center;
    }
    #page-home .news-container .news-item {
        width: 300px;
        margin: 8px 0;
    }
    #page-home .info-container {
        flex-direction: column;
        align-items: center;
    }
    #page-home .info-container .info-item {
        width: 100%;
        margin: 8px 0;
    }
}


/*
    page-description
*/
#page-description {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #E5E5E5;
}
#page-description .container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1000px;
    padding: 16px;
}
#page-description img {
    display: inline;
}
@media screen and (max-width: 768px) {
    #page-description iframe {
        width: 100%;
    }
}

/*
    main-distributors
*/
#page-location {
    padding: 0;
}
.main-distributors {
    position: relative;
    height: calc(100vh - 64px);
}
.main-distributors #map {
    width: 100%;
    height: 100%;
}
.main-distributors .content-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 64px;
    bottom: 64px;
    right: 64px;
    width: 400px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 32px 32px;
    overflow-x: hidden;
    overflow-y: auto;
    overflow-scrolling: touch;
}
.main-distributors .country-select {
    width: 250px;
    background-color: #F2F3F5;
    padding: 8px;
}
.main-distributors .address-info-list {
    margin: 0;
    padding: 0;
    width: 100%;
}
.main-distributors .address-info-list li {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1.5px solid #D7D7D7;
    padding: 8px 0 8px 48px;
    cursor: pointer;
}
.main-distributors .address-info-list li:last-child {
    border-bottom: none;
}
.main-distributors .address-info-list li:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0) url('/catalog/view/theme/default/image/icon-map-maker.png') no-repeat scroll center;
    background-size: contain;
}
.main-distributors .address-info-list li h4 {
    color: #0F0F10;
    margin: 4px 0;
    padding: 0;
}
.main-distributors .address-info-list li h5 {
    margin: 4px 0;
    padding: 0;
    font-weight: lighter;
    line-height: 20px;
}
.main-distributors .address-info-list li h5:first-child {
    margin: 16px 0 4px;
}
.map-info-window {
    width: 300px;
}
.map-info-window .title{
    font-size: 18px;
    font-weight: bold;
    padding: 8px 0;
}
.map-info-window .content {
    font-size: 12px;
    line-height: 20px;
}
@media screen and (max-width: 1024px) {
    .main-distributors {
        height: auto;
    }
    .main-distributors #map {
        display: none;
    }
    .main-distributors .content-container {
        width: 100%;
        position: relative;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/*
    page-activity-image
*/
#page-activity-image {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
#page-activity-image .description {
    width: 100%;
    max-width: 1000px;
    margin: 8px 16px;
}
#page-activity-image .description p {
    margin: 2px 0;
}
#page-activity-image .image-container {
    width: 100%;
    max-width: 1000px;
    margin: 32px 16px;
}
#page-activity-image .item {
    width: 33.33333%
}
#page-activity-image .image {
    width: 100%;
    height: 100%;
}
@media screen and (max-width: 768px) {
    #page-activity-image .item {
        width: 50%
    }
    #page-activity-image .description iframe {
        width: 100%;
    }
}

/*
    page-login
*/
#page-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px 0;
    background-color: #E5E5E5;
}
#page-login .button-group {
    width: 100%;
}
#page-login h1,
#page-login h2 {
    color: #0F0F10;
    font-weight: bold;
}
#page-login h2 {
    margin: 0;
}
#page-login .description {
    margin: 16px 0;
    color: #777777;
    text-align: center;
}
#page-login .form-layout {
    flex: 1;
}
#page-login .form-layout form {
    flex: 1;
}
#page-login .col-6 {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 40px;
}
#page-login .col-6:not(:first-child) {
    border-left: 1px solid #999999;
}
#page-login .price-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 0 0 16px;
}
#page-login .price-block {
    width: 100%;
}
#page-login .price-block::before {
    width: 88px;
}
#page-login #button-forgotten {
    position: absolute;
    top: 100%;
    font-size: 14px;
}
@media screen and (max-width: 768px) {
    #page-login .col-6 {
        margin: 16px 0;
        padding: 0 24px 32px;
    }
    #page-login .col-6:not(:last-child) {
        border-bottom: 8px solid #FFFFFF;
    }
    #page-login #button-forgotten {
        position: relative;
        top: 0;
    }
}

/*
    page-register
*/
#page-register {

}
#page-register {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 0;
}
#page-register h1  {
    font-weight: normal;
}
#page-register .form-register {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page-register .input-box {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 360px;
    margin: 8px 0;
    padding: 8px;
}
#page-register .input-box.required > label:after {
    content: '*';
    color: #EB5757;
}
#page-register .input-box label {
    width: 88px;
    color: #333333;
}
#page-register .input-box > input {
    flex: 1;
    min-width: 0;
    margin-left: 8px;
    padding: 8px;
    font-size: 16px;
    border: none;
    background-color: #F2F2F2;
    border-radius: 5px;
}
#page-register .input-box input::placeholder {
    color: #828282;
}
#page-register .input-box .file-input {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
}
#page-register .input-box .file-label {
    flex: 1;
    min-width: 0;
    height: 40px;
    margin-left: 8px;
    padding: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow : ellipsis;
    font-size: 16px;
    background-color: #F2F2F2;
    border-radius: 5px;
}
#page-register .btn {
    width: 100%;
    max-width: 160px;
    margin: 32px 0 0;
    background-color: #6A3332;
    color: #FFFFFF;
    font-size: 18px;
    border: none;
    border-radius: 5px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
}


/*
    page-account
*/
#page-account {
    display: flex;
    flex-direction: column;
    align-items: center;
}
#page-account .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
}
#page-account .column-left {
    width: 20%;
}
#page-account .column-left .menu {
    flex-direction: column;
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    font-size: 18px;
}
#page-account .column-right {
    width: 80%;
}
#page-account .info-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 440px;
    background: #F2F2F2;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    padding: 16px 64px;
}
#page-account .info-layout h3 {
    font-weight: normal;
    border-bottom: 1px solid #BBBBBB;
    margin: 0;
    padding: 16px 0;
}
#page-account .info-layout .info-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}
#page-account .info-layout .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
}
@media screen and (max-width: 768px) {
    #page-account .column-left,
    #page-account .column-right {
        width: 100%;
    }
}


/*
    page-sign-up
*/
#page-sign-up {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #E5E5E5;
    padding: 16px;
}
#page-sign-up .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1000px;
    padding: 16px;
    margin: 8px 0 32px;
    background-color: #FFFFFF;
}
#page-sign-up .input-layout {
    display: flex;
    align-items: center;
    margin: 8px 0;
}
#page-sign-up .input-layout label {
    margin: 0 8px;
    width: 88px;
}
#page-sign-up .input-layout.required > label::after {
    content: '*';
    color: #EB5757;
}
#page-sign-up .input-layout input,
#page-sign-up .input-layout select,
#page-sign-up .input-layout .file-label {
    width: 200px;
    border: 1px solid #BDBDBD;
    box-sizing: border-box;
    border-radius: 5px;
    padding: 8px 16px;
}
#page-sign-up .input-layout .file-input {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    border: none;
}
#page-sign-up .input-layout .file-label {
    margin: 0;
    height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow : ellipsis;
    font-size: 16px;
}
#page-sign-up .description {
    margin: 16px 0;
    max-width: 600px;
}
#page-sign-up .description p {
    margin: 2px 0;
}
#page-sign-up .image-container {
    width: 100%;
    max-width: 600px;
    margin: 16px 0;
}
#page-sign-up .image-container img {
    width: 100%;
    height: auto;
}
#page-sign-up .btn-submit {
    margin-top: 16px;
}
#page-sign-up .info-container {
    width: 100%;
    max-width: 480px;
    font-size: 18px;
}
#page-sign-up .info-container .info {
    display: flex;
    padding: 8px;
}
#page-sign-up .info-container .info label:not(.input-label) {
    width: 120px;
    margin: 0 8px;
}
#page-sign-up .info-container .info .text {
    width: 100%;
}
#page-sign-up .info-container .info .text .btn {
    margin: 0 8px;
}

/*
    page-course
*/
#page-course {
    display: flex;
    flex-direction: column;
    padding: 40px 0 0;
    background-color: #E5E5E5;
}
#page-course > div:not(:first-child) {
    border-bottom: 16px solid #F2F2F2;
}
#page-course > div:last-child {
    border-bottom: none;
}
#page-course .info-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 800px;
    padding: 0 16px 40px;
}
#page-course .info-container .button-group {
    margin-top: 16px;
}
#page-course .info-container .button-group .btn {
    max-width: 240px;
}
#page-course .title {
    margin-top: 0;
    margin-bottom: 32px;
    letter-spacing: 1.2px;
}
#page-course .button-group {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}
#page-course .btn {
    margin: 0 8px;
}
#page-course .course {
    width: 100%;
    max-width: 1000px;
}
#page-course .course {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1000px;
    padding: 48px 16px;
}
#page-course .course .column-left,
#page-course .course .column-right {
    display: flex;
    flex-direction: column;
    width: 50%;
    padding: 0 16px;
}
#page-course .course .cover {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 768px) {
    #page-course .course .column-left,
    #page-course .course .column-right {
        width: 100%;
    }
    #page-course .course .column-right {
        padding-top: 40px;
    }
}

/*
    page-grade
*/
#page-grade {
    background-color: #E5E5E5;
}
@media screen and (max-width: 480px) {
    #page-grade .breadcrumb {
        padding: 8px 12px;
    }
}


/*
    page-order
*/
#page-order {
    background-color: #E5E5E5;
}
@media screen and (max-width: 480px) {
    #page-order .breadcrumb {
        padding: 8px 12px;
    }
}