@charset "UTF-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

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

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

body {
    -webkit-text-size-adjust: none;
}

body {
    -ms-overflow-style: scrollbar;
}

table th {
    vertical-align: middle;
}

html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body {
    font-family: FontAwesome, "Century Gothic", Arial, cwTeXYen, "Noto Sans TC", "微軟正黑體";
    font-size: 15px;
    font-weight: 500;
}

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

    body,
    input,
    select,
    textarea {
        font-size: 14pt;
    }
}

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

    body,
    input,
    select,
    textarea {
        font-size: 12pt;
    }
}

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

    body,
    input,
    select,
    textarea {
        font-size: 11pt;
    }
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    border-bottom-color: transparent;
}

strong,
b {
    font-weight: 600;
}

p {
    margin: 0 0 0 0;
}

p.content {
    text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.5;
    margin: 0 0 0.7em 0;
    letter-spacing: -0.025em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit;
    text-decoration: none;
}

h1 {
    font-size: 2.5em;
    line-height: 1.2;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.25em;
}

h4 {
    font-size: 1.1em;
}

h5 {
    font-size: 0.9em;
}

h6 {
    font-size: 0.7em;
}

@media screen and (max-width: 736px) {
    h1 {
        font-size: 2em;
    }
}

#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#nav ul li {
    display: inline-block;
    padding: 0;
}

#nav ul li a {
    display: inline-block;
    height: 1.0em;
    line-height: 1.0em;
    padding: 0 1.2em 0 0.7em;
    border-right: #fff 1px solid;
}

#nav ul li a.course {
    border-right: none;
    padding: 0 0.5em 0 0.5em;
}

#nav ul li a:hover {
    color: #000;
}

#nav ul li a div {
    display: inline-block;
    padding: 0 0 0 5px;
}

#nav ul li a.active {
    background-color: #ffffff;
    box-shadow: none;
}

#nav.top_section {
    position: fixed;
    top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    line-height: 1.7;
    z-index: 10000;
}

#nav.top_section ul li {
    margin: 0 0.175em;
}

#nav.top_section ul li a {
    font-size: 1.0em;
    text-decoration: unset;
    color: #fff;
}

pre {
    -webkit-overflow-scrolling: touch;
    font-family: "Courier New", monospace;
    font-size: 0.9em;
    margin: 0 0 2em 0;
}

pre code {
    display: block;
    line-height: 1.75;
    padding: 1em 1.5em;
    overflow-x: auto;
}

hr {
    border: 0;
    border-bottom: solid 1px;
    margin: 2em 0;
}

hr.major {
    margin: 3em 0;
}

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

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

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

a:hover {
    color: #ffffff;
}

strong,
b {
    /* color: #ffffff; */
    font-weight: 600;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #ffffff;
}

hr {
    border-bottom-color: rgba(255, 255, 255, 0.35);
}

form {
    margin: 0 0 2em 0;
}

.ph {
    display: block;
}

.s_web {
    display: none;
}

label {
    display: block;
    font-size: 0.9em;
    font-weight: 500;
    margin: 0 0 1em 0;
}

::-webkit-input-placeholder {
    opacity: 1.0;
}

:-moz-placeholder {
    opacity: 1.0;
}

::-moz-placeholder {
    opacity: 1.0;
}

:-ms-input-placeholder {
    opacity: 1.0;
}

label {
    color: #ffffff;
}

img {
    width: 100%;
}

ol {
    list-style: decimal;
    margin: 0 0 2em 0;
    padding-left: 1.25em;
}

ol li {
    padding-left: 0.25em;
}

dl {
    margin: 0 0 2em 0;
}

dl dt {
    display: block;
    font-weight: 500;
    margin: 0 0 1em 0;
}

dl dd {
    margin-left: 2em;
}

dl dt {
    color: #ffffff;
}

#header {
    padding: 5em 5em 1em 5em;
    text-align: center;
}

#header h1 {
    margin: 0 0 0.25em 0;
}

#header p {
    font-size: 1.25em;
    letter-spacing: -0.025em;
}

#nav {
    background-color: #ffffff;
    color: #ffffff;
    position: absolute;
    width: 100%;
    background-color: #d61518;
    border-top-left-radius: 0.25em;
    border-top-right-radius: 0.25em;
    cursor: default;
    text-align: center;
}

#nav input,
#nav select,
#nav textarea {
    color: #636363;
}

#nav a:hover {
    color: #636363;
}

#nav strong,
#nav b {
    color: #636363;
}

#nav h1,
#nav h2,
#nav h3,
#nav h4,
#nav h5,
#nav h6 {
    color: #636363;
}

#nav blockquote {
    border-left-color: #dddddd;
}

#nav code {
    background: rgba(222, 222, 222, 0.25);
    border-color: #dddddd;
}

#nav hr {
    border-bottom-color: #dddddd;
}

#nav.top_section ul li a:hover {
    color: #000;
}

@media screen and (min-width: 480px) {
    #nav {
        text-align: right;
    }
}

@media screen and (max-width: 350px) {
    #nav ul li a {
        padding: 0 0.9em 0 0.1em !important;
    }
}

.btn-top {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #d61518;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:active {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #d61518;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:active:hover {
    background-color: #fff;
    color: #d61518 !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top:focus {
    position: fixed;
    right: 10px;
    bottom: 53px;
    z-index: 5;
    display: block;
    visibility: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #d61518;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    font-size: 85%;
    opacity: 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-top:focus:hover {
    background-color: #fff;
    color: #d61518 !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top:hover {
    background-color: #fff;
    color: #d61518 !important;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

/*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284*/
.btn-go-form {
    position: fixed;
    right: 10px;
    bottom: 10px;
    z-index: 15;
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 7px 0 15px 0;
    width: 40px;
    height: 40px;
    border-radius: 100rem;
    background-color: #d61518;
    -webkit-box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 10px 60px 0 rgba(0, 0, 0, .15);
    color: #fff !important;
    text-align: center;
    letter-spacing: .5px;
    font-weight: 500;
    font-size: 75%;
    font-family: "Noto Sans TC", "微軟正黑體";
    line-height: 1.2;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -o-box-sizing: border-box
}

.btn-go-form:hover {
    background-color: #fff;
    color: #d61518 !important;
    font-weight: 700;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top.cd-is-visible {
    visibility: visible;
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out
}

.btn-top.cd-fade-out {
    opacity: 1;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    z-index: 90;
}


.edm-wrapper-default {
    position: relative;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.edm-wrapper {
    position: relative;
    margin: 0 auto
}

.edm-wrapper-n {
  position: relative;
  width: 100%;
  padding: 20px 0 20px 0;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .edm-wrapper-n {
    width: 100%;
    padding: 25px 0 25px 0;
  }
}
@media only screen and (min-width: 1100px) {
  .edm-wrapper-n {
    width: 1200px;
    padding: 35px 0 35px 0;
  }
}

.edm-wrapper-n2 {
  position: relative;
  width: 100%;
  padding: 20px 0 20px 0;
  margin: 0 auto;
}
@media only screen and (min-width: 480px) {
  .edm-wrapper-n2 {
    width: 100%;
    padding: 25px 0 25px 0;
  }
}
@media only screen and (min-width: 1100px) {
  .edm-wrapper-n2 {
    width: 90%;
    padding: 35px 0 35px 0;
  }
}

.secbox-sendForm {
    background: #719653;
}

.secbox-sendForm table {
    margin-bottom: 1.5%;
    background: #fff;
    color: #000
}

.secbox-sendForm section {
    color: #fff;
}

.secbox-sendForm .red_word {
    margin-bottom: 1.5%;
    color: #fff;
}

.secbox-sendForm u {
    color: #fff;
}

.send {
    margin-top: 3rem;
    margin: 3rem auto 10rem auto;
}

.send a {
    border-radius: 25px;
    background: #d61518;
    color: #fff;
    font-weight: 700;
    font-size: 140%;
    cursor: pointer;
}

.send a:hover {
    background: #bf1315;
}

.red {
    color: #b00e0c;
}

.green {
    color: #1f9922
}

.total-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284\8972*/
}

.title-style-pic {
  margin: 20px auto 40px auto;
  width: 96%;
}
@media only screen and (min-width: 480px) {
  .title-style-pic {
    margin: 30px auto 20px auto;
    width: 60%;
  }
}
.title-style-pic img {
  width: 100%;
}

.title-pcc {
  display: none;
}
@media only screen and (min-width: 480px) {
  .title-pcc {
    display: block;
  }
}

.title-mmb {
 
  display: block;
}
@media only screen and (min-width: 480px) {
  .title-mmb {
    display: none;
  }
}


title span {
    color: red
}

.head_pc {
    display: none
}

.head_mb {
    position: relative;
    display: block;
    margin: 0% auto 0 auto;
    width: 100%
}

.btn-logo {
    position: absolute;
    top: 9%;
    left: 6%;
    z-index: 2;
    display: block;
    margin: 0 auto;
    width: 40%;
    height: 15%;
    background: 0 0;
    text-align: center;
    /*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284\8972*/
}

.btn-logo a {
    display: inline-block;
    width: 30%;
    height: 100%;
}

.btn-logo img {
    width: 70%;
    cursor: pointer;
}

.head_mb img {
    width: 100%;
}

.yellow {
    color: #ffcb00
}

.hide {
    display: none !important
}

.rice_word {
    right: 0;
    display: inline-block;
    text-align: right;
    color: #fff;
    position: absolute;
}

@media (min-width:0px) and (max-width:480px) {
    .overFlow-Center {
        width: 100%
    }

    .btn-logo {
        left: 0%;
        width: 100%;
        height: 9%;
        text-align: center;
        top: 12%;
    }

    .btn-logo img {
        width: 100%;
    }

    .head_mb {
        margin: 6.5% auto -1% auto;
    }

    .cell-hide {
        display: none
    }

    .flexBox {
        display: block
    }

    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        margin: 0% auto;
        padding: 2% 0;
        width: 95%
    }
}

@media (min-width:1070px) and (max-width:9999px) {
    .overFlow-Center {
        width: 100%;
        /*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284\8972*/
    }

    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        padding: 1% 0;
        width: 85%;
        margin: 0% auto;
    }
}

@media only screen and (min-width:1800px) {
    .secbox-sendForm table th {
        padding: 20px;
    }

    .secbox-sendForm {
        font-size: 1.5em;
    }

    .secbox-sendForm td {
        font-size: 1em;
        vertical-align: middle;
    }

    select#toArea {
        font-size: 1em;
    }

    select#take {
        font-size: 1em;
    }

    .send a {
        padding: 1.5rem 3rem;
    }

    .btn-go-form {
        font-size: 100%;
    }

    #nav.top_section {
        font-size: 1.6em;
    }

    input[type="radio"] {
        padding: 10px 3px;
    }

    input[type="email"] {
        padding: 5px 3px;
        font-size: 14pt;
    }

    input[type="tel"] {
        padding: 5px 3px;
        font-size: 14pt;
    }

    input[type="text"] {
        padding: 5px 3px;
        font-size: 14pt;
    }

    textarea#ps {
        font-size: 14pt;
        width: 20%;
    }
}

a:visited {
    text-decoration: none;
    color: inherit;
}

a:link {
    color: inherit;
}

@media only screen and (min-width:481px) {
    .head_mb {
        margin: 4% auto -1% auto;
    }

    .btn-top {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-top:active {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-top:focus {
        right: 15px;
        bottom: 53px;
        padding: 15px 0;
        width: 40px;
        height: 40px
    }

    .btn-go-form {
        right: 15px;
        bottom: 10px;
        padding: 5px 0 15px 0;
        width: 40px;
        height: 40px;
        font-size: 70%;
        /*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284\8972*/
    }

    .head_pc {
        position: relative;
        display: none;
        background-size: 100%;
    }

    .head_mb {
        display: block;
    }

    .btn-logo {
        position: absolute;
        top: 12%;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 0;
        width: 100%;
        height: 10%;
        background: 0 0;
        text-align: center;
        /*\5f35\5955\5eb7\88fd\4f5c\7981\6b62\6284\8972*/
    }

    .btn-logo img {
        width: 100%;
    }
}

@media only screen and (min-width:768px) {
    .btn-top {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-top:active {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-top:focus {
        right: 20px;
        bottom: 80px;
        padding: 20px 0;
        width: 55px;
        height: 55px
    }

    .btn-go-form {
        right: 20px;
        bottom: 20px;
        padding: 9px 0 20px 0;
        width: 55px;
        height: 55px;
        font-size: 90%;
    }

    .head_pc {
        position: relative;
        display: block;
        background-size: 100%;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 2em;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 2% auto -2em auto;
        width: 13%;
        height: 2.5em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1100px) {
    .head_pc {
        position: relative;
        display: block;
        background-size: 100%
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 4em;
        left: 0;
        z-index: 2;
        display: block;
        margin: 2% auto -6em auto;
        width: 14%;
        height: 6em;
        background: 0 0;
        text-align: center
    }
}

@media (min-width:481px) and (max-width:1024px) {
    .edm-wrapper {
        padding: 0;
        width: 100%
    }

    .secbox-sendForm .edm-wrapper {
        margin: -1% auto;
        padding: 2% 0 1% 0;
        width: 90%
    }
}

@media only screen and (min-width:1024px) {
    .btn-logo {
        position: relative;
        top: 2em;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 2% auto -4em auto;
        width: 14%;
        height: 4em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1100px) {
    .btn-logo {
        position: relative;
        top: 2em;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 2% auto -5em auto;
        width: 14%;
        height: 5em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1600px) {
    .head_pc {
        position: relative;
        display: block;
        margin: 0 auto 0 auto;
        background-size: 100%;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 3em;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 2% auto -5em auto;
        width: 14%;
        height: 5em;
        background: 0 0;
        text-align: center;
    }
}

@media only screen and (min-width:1800px) {
    .head_pc {
        position: relative;
        display: block;
        background-size: 100%;
    }

    .head_mb {
        display: none
    }

    .btn-logo {
        position: relative;
        top: 4em;
        left: 0%;
        z-index: 2;
        display: block;
        margin: 1% auto -8em auto;
        width: 14%;
        height: 8em;
        background: 0 0;
        text-align: center;
    }

    .btn-go-form {
        font-size: 100%;
    }
}

.cont_pc {
    display: none;
}

.cont_mb {
    display: block;
}

.box1 { 
    padding-bottom: 2%;
  background: linear-gradient(
    to bottom,
     #fbdde2 0%,
    #fff7f8 16%,
    #ffffff 24%,
    #f5fff2 31%,
    #e2f9d4 35%,
    #c7eca5 100%
  );
}

.button {
    position: relative;
    margin: -0.5% auto 0% auto;
    text-align: center;
    padding: 2% 0 1% 0;
    width: 90%;
    display: flex;
    justify-content:center;
    align-items:center;
}

.button .img_src {
    position: relative;
    display: inline-block;
    width: 18%;
    padding: 1%;
    background: #fff;
    margin: 0 1% 0 1%;
    border: solid 3px #92ba52;
    cursor: pointer;
    border-radius:20px;
}

.button .img_src .but-dis{
    display: flex;
    justify-content:center;
    align-items:center;
}

.but-icons{
    width: 20%;
}
.but-icons img{
    width: 100%;
}
.finger {
    position: absolute;
    width: 100%;
	text-align: right;
}
.finger img {
	width:20%;
}

/*.button .img_src .finger{position:relative;display:inline-block;vertical-align: middle;}*/
.button .img_src #icon01 {
    width: 45%;
}

.button .img_src #icon02 {
    width: 45%;
}

.button .img_src #icon03 {
    width: 45%;
}

.button .img_src #icon04 {
    width: 45%;
}

.button .img_src #icon05 {
    width: 45%;
}

.button .img_src .fin img {
    width: 80%;
}

.img_text {
    color: #007442;
    font-weight: 600;
}

.box1_head_text {
    width: 95%;
    font-weight: 600;
    margin: 3% auto 1% auto;
    text-align: center;
    color: #171715;
    overflow: hidden;
}

.box1_head_text span {
    color: #EA0001;
}

.box1_sub_text span {
    color: #EA0001;
}

.box1_sub_text {
    width: 65%;
    font-weight: 600;
    margin: 0% auto 2% auto;
    text-align: center;
    color: #171715;
    overflow: hidden;
}

.grade_img {
    width: 95%;
    margin: -1% auto 3% auto;
    overflow: hidden;
}

.grade_img p {
    transform: translateX(50%);
    animation: move_left 10s linear infinite;
}

.grade_img img {
    width: 100%;
}

.grade_title {
    width: 65%;
    margin: 0 auto;
}


.green-box{
  background-color: #c8e9e6;
  position: relative;
  width: 100%;
  z-index: 1;
}

.green-box-title{
    display: none;
}
@media only screen and (min-width: 480px) {
    .green-box-title{
        display: block;
        margin: 30px auto 20px auto;
        width: 90%;
    }
}
.green-box-title img{
    width: 100%;
}

.green-box-title-mb{
    display: block;
    margin: 20px auto 5px auto;
    width: 96%;
   
}
@media only screen and (min-width: 480px) {
    .green-box-title-mb{
       display: none;
    }
}


.g-display{
    display: block;
    width: 90%;
    margin: 5% auto;
    flex-direction:column-reverse; 
}
@media only screen and (min-width: 480px) {
    .g-display{        
        display: flex;
        flex-direction:row-reverse;
        justify-content:space-between;
        align-items:center;
        width: 90%;
        margin: 5% auto;
    }
}

.g-b_img{
    width: 30%;
    margin: 0 auto;
}
@media only screen and (min-width: 480px) {
    .g-b_img{
        margin: 0;
        width: 15%;
    }
}

.g-b_img img{
    width: 100%;
}

.g-b-text{
     width: 90%;
     margin: 0 auto;
}
@media only screen and (min-width: 480px) {
    .g-b-text{
         width: 80%;
         margin: 0;
    }
}

.grade_box_text {
    display: block;
    font-weight: bold;
   text-align: justify;
    margin: 2% 0;
    line-height: 1.5;
    color: #000;
    font-size: 120%;
}
@media only screen and (min-width: 480px) {
    .grade_box_text {
        margin: 2% 0;
        line-height: 1.5;
        font-size: 150%;
    }
}

.grade_box_text span {
    font-weight: 600;
}

.box_bottom_img {
    position: absolute;
    width: 12%;
    left: 5%;
    bottom: -8%;
}


.box2 {
    position: relative;
    padding:2% 0;  
    background: #FFF8CE;
    z-index: 1;

}

.box2 .item .msbox {
    position: relative;
    width: 100%;
    height: 18rem;
    margin: 0 auto;
}

.box2 .sec2_demo {
    position: relative;
    margin: 0% auto;
    padding: 3% 0 ;
    z-index:5;
}

.pp_right{
    position: absolute;
    z-index: -1;
    width: 20%;
    right: 1%;
    top:1%;
}

.pp_right img{
    width: 100%;
}

.pp_left{
    position: absolute;
    z-index:-1;
    width: 20%;
    left: 1%;
    top:1%;
}

.pp_left img{
    width: 100%;
}

.pp_jump{
    position: absolute;
    z-index: 15;
    width: 15%;
    left: 1%;
    top:12%;
}

.pp_jump img{
    width: 100%;
}

.pp_book{
    position: absolute;
    z-index: 15;
    width: 12%;
    right: 3%;
    top:88%;
}
@media only screen and (min-width: 480px) {
   .pp_book{
        position: absolute;
        z-index: 15;
        width: 12%;
        right: -4%;
        top:65%;
    } 
}
@media only screen and (min-width: 1024px) {
   .pp_book{
        position: absolute;
        z-index: 15;
        width: 12%;
        right: 2%;
        top:65%;
    } 
}

.pp_book img{
    width: 100%;
}









#demos .owl-carousel .item {
    height: auto;
    background: none;
    padding: 0%;
}

.owl-carousel .owl-nav button.owl-next {
    display: none;
}

.owl-carousel .owl-nav button.owl-prev {
    display: none;
}

.box2_title {
    width: 67%;
    margin: 0 auto 0 auto;
    padding: 4% 0 0% 0;
}

.box2 .tile_sec2 {
    width: 60%;
    margin: 0 auto;
    font-size: 250%;
    font-weight: 600;
    color: #CF0302;
    text-align: center;
    /* text-shadow:-2px 0 rgba(255,255,255,1),0 2px rgba(255,255,255,1),2px 0 rgba(255,255,255,1),0 -2px rgba(255,255,255,1); */
}

.test_grade {
    width: 75%;
    padding: 2%;
    margin: 0 auto;
    left: 1%;
    position: relative;
}

.test_grade .button {
    display: inline-block;
    width: 46%;
    text-align: center;
    margin: 0 2% auto 1%;
    padding: 2% 0 2% 0;
    color: #1B1B1D;
    font-weight: 600;
    border: solid 2px #1B1B1B;
    cursor: pointer;
}

.button_style0 {
    background: #DE6F03;
    color: #fff !important;
}

.button_style1 {
    background: #214893;
    color: #fff !important;
}

.grade_list {
    width: 68.1%;
    margin: 0 auto;
    left: 1%;
    position: relative;
    border: solid 5px #FFB900;
    border-left: solid 10px #ffB900;
    border-right: solid 10px #ffB900;
    position: relative;
    left: 0.2%;
}

.gra_test {
    border: solid 1px #000;
    padding: 1% 0 1% 0;
    background: #fff;
}

.gra_school_title {
    position: relative;
    width: 100%;
    font-weight: 600;
    padding: 1%;
    background: #FFDB7A;
    color: #000;
    margin: 1% auto 1% auto;
    text-align: center;
    overflow: hidden;
}

.gra_school_title span {
    color: #D01715;
}

.stu_name {
    -webkit-animation: animate22 15s linear infinite;
    animation: animate22 15s linear infinite;
    overflow: revert;
    height: 15.5em;
    top: 0;
    text-align: center;
    margin: 1% auto 1% auto;
    position: relative;
}


.student_list {
    position: relative;
    margin: 0% auto;
    height: 15rem;
    width: 100%;
    overflow: hidden;
}

.stu_name .student {
    display: inline-block;
    width: 40%;
    line-height: 110%;
    color: #444444;
    text-align: left;
    vertical-align: text-top;
}

.stu_name .student.na span {
    color: #D51417;
    font-weight: 600;
}

.stu_name .student span.colorb {
    color: #6399B5;
}

.stu_name .student.na p {
    width: 100%;
    text-align: left;
    position: relative;
    left: 0%;
}

.student_list.stu02 div {
    display: inline-block;
    width: 95%;
    padding: 0%;
    margin: 1% 0% 0 0%;
    line-height: 120%;
    vertical-align: top;
    -webkit-animation: animate1 45s linear infinite;
    animation: animate1 45s linear infinite;
}

.student_list.stu02 div.school_sd {
    width: 44%;
    margin: 1% -1.5% 0 -1%;
}

.student_list.stu02 div span {
    color: #D51417;
    font-weight: 600;
}

.cup_grade {
    position: absolute;
    bottom: -1%;
    right: -2%;
    width: 13%;
    z-index: 9;
}

.bottom_list {
    margin: 1% auto 1% auto;
    text-align: center;
}

.right_img {
    position: absolute;
    right: 0%;
    top: 5%;
    width: 15%;
}

.lrsection {
    position: relative;
}

.left_img {
    position: absolute;
    left: 0%;
    top: 5%;
    width: 17.5%;
}

.button_box2 {
    width: 20%;
    margin: 3% auto 7% auto;
}

.button_box2 img {
    cursor: pointer;
}

.na.school02 p {
    left: 0% !important;
}

.stu_name .student.school02 {
    width: 38% !important;
}

.school02.sdname {
    width: 100%;
    text-align: left;
}

.school02.sdname span {
    width: 100%;
    text-align: left;
}

 

.title-style-xcv_box2{
    margin: 30px 0 7% -7%;
    width: 150%;
    text-align: center;
}
.title-style-xcv_box2 img {
  width: 100%;
}

.xcv_box2 {
    margin: 0 auto;
    text-align: center;
}

.xcv_box2 div.mnaij {
    display: inline-block;
    width: 45%;
    padding: 1%;
    margin: 0 auto;
    vertical-align: text-top;
}

.xcv_box2 div.mnaij .title {
    width: 100%;
    text-align: left;
}

.xcv_box2 div.mnaij .left_text {
    text-align: justify;
    margin: 2% auto 0 0;
    line-height: 1.5;
    width: 80%;
    font-weight: bold;
    font-size: 150%;
}

.xcv_box2 div.mnaij .left_text span {
    color: #CD0301;
}

.button_bcd {
    width: 50%;
    margin: 3% auto 0 0;
}

.button_bcd img {
    cursor: pointer;
}

.xcv_box2 div.right.mnaij .sde23 {
    border: solid 1px #000;
    background: #fff;
    padding: 5%;
    width: 48%;
    display: inline-block;
}

.xcv_box2 div.right.mnaij .sde23 p {
    color: #204792;
    font-weight: 600;
}

.xcv_box2 div.right.mnaij .sde23 img {
    width: 55%;
}

.xcv_box2 div.right.mnaij .sde25 {
    margin: 1% auto 0 auto;
    position: relative;
    left: 7%;
}

.xcv_box2 div.mnaij.right {
    position: relative;
    left: -7%;
    padding: 0% 1% 1% 1%;
}

.right_man {
    position: absolute;
    bottom: -24%;
    right: -19%;
    width: 23%;
}

.box3 {
    background: #FFD2D5;
}

.b3_dfg {
    padding: 0;
    text-align: ceer;
}

.b3_dfg .dfg_sec {
    display: inline-block;
    width: 46%;
    vertical-align: middle;
}

.b3_dfg .dfg_sec .title {
    position: relative;
    margin-left: 4%;
    width: 38%;   
}
.b3_dfg .dfg_sec .title img{  
    width:100%;   
}


.b3_dfg .dfg_sec .text {
     font-weight: bold;
    text-align: justify;
    margin: 3% auto 3% auto;
    width: 90%;
    font-size: 115%;
    line-height:1.3;
    font-weight: bold;
}

.b3_dfg .dfg_sec .text span {
    color: #CE0404;
    font-weight: 600;
}

.b3_dfg .dfg_sec .title img {
    width: 150%;
}

.box6 {
    background: #FFF8CE;
}

.box6 .title {
    width: 70%;
    margin: 0% auto;
    padding: 5% 0 3% 0;
}

.box6 .text {
    width: 75%;
    margin: 0 auto 3% auto;
    line-height: 120%;
    text-align: justify;
}

.box6 .text span {
    color: #EA0001;
    font-weight: 600;
}

.box6 .asde_img {
    width: 75%;
    margin: 0 auto 3% auto;
}

.box6 .def_box6 {
    margin: 0 auto;
    text-align: center;
}

.box6 .def_box6 .dfg_sec {
    display: inline-block;
    width: 21.5%;
    padding: 0% 0 0% 0;
    margin: 0 2% 0 2%;
}

.box6 .def_box6 .dfg_sec .fgh_head {
    width: 100%;
    background: #FFEB88;
    color: #770B0B;
    font-weight: 600;
    padding: 2% 0 2% 0;
}

.box6 .def_box6 .dfg_sec .fgh_text {
    color: #252523;
    margin: 3% auto 0 auto;
}

.box6 .button6 {
    width: 20%;
    margin: 3% auto 5% auto;
}

.box6 .button6 img {
    cursor: pointer;
}

.box5 {
    background-color: #FFD2D5;
}

.box5 .title {
    width: 75%;
    margin: 0 auto 3% auto;
    padding: 4% 0 0 0;
}

.box5 .bottom_text {
    width: 30%;
    margin: 2% auto 3% auto;
    color: #782a2a;
    text-align: center;
}

.card_bg {
    background: url(../images/s6_deco_bg.png) no-repeat top center;
    background-size: cover;
}

.box4 .cont_pc {
    padding: 0;
    position: relative;
    z-index: 3;
}

.box4 .title {
    width: 70%;
    margin: 0 auto;
    padding: 3% 0 1% 0;
}

.box4 {
    background: #cfeffe;
    padding:2% 0; 
}

.box4 .sub_text {
    width: 65%;
    margin: 0 auto;
    padding: 0 0 3% 0;
    line-height: 120%;
    text-align: justify;
}

.box4 .sub_text span {
    color: #b20000;
    font-weight: 600;
}

.box4 .b4_content div.b4_head {
    display: inline-block;
    width: 19%;
    padding: 1%;
    font-weight: 600;
    color: #096894;
    background: #fff8ce;
    border: solid 1.5px #377fa3;
    position: relative;
    z-index: 11;
    margin: 0 0.5%;
}

.box4 .b4_content_t div.b4_text {
    display: inline-block;
    width: 19%;
    padding: 1%;
    background: #ffffff;
    border: solid 1.5px #377fa3;
    margin: 0 0.5%;
}

.box4 .b4_content {
    margin: 0.3% auto 0 auto;
    text-align: center;
    display: flex;
    justify-content: center;
}

.box4 .b4_content_t {
    margin: 0.2% auto 0 auto;
    text-align: center;
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: center;
}

.box4 .b4_content_t span {
    color: #d43132;
}

.box4 .s5_man {
    position: absolute;
    width: 23%;
    bottom: -1%;
    right: 4%;
    z-index: 0;
}

.b6_content {
    position: relative;
    z-index: 999;
    margin: 0 auto 7% auto;
}

.box4 .slide_title {
    margin: 0 auto;
    text-align: center;
}

.box4 .slide_title .slide_t1 {
    position: relative;
    display: inline-block;
    width: 13%;
    padding: 3%;
}

.box4 .slide_title .slide_t2 {
    display: inline-block;
    width: 70%;
}

.box4 .slide_title .slide_t1 .img01 {
    position: absolute;
    bottom: -15%;
    right: -15%;
    width: 50%;
}

.box4 .slide_title .slide_t1 .img02 {
    position: absolute;
    top: -50%;
    left: 20%;
    width: 35%;
}

.box4 .slide_title .slide_t1 .img03 {
    position: absolute;
    bottom: -15%;
    left: -15%;
    width: 50%;
}

.box4 .slide_title .slide_t1 .img04 {
    position: absolute;
    top: -50%;
    right: 20%;
    width: 35%;
}

.box42 .sec2_demo {
    margin: -2% auto 0 auto;
}

.box42 .sec2_demo .msbox {
    margin: 0 auto 3.5% auto;
    text-align: center;
}

.box42 .sec2_demo .msbox .sec1 {
    width: 11.5%;
    display: inline-block;
}

.box42 .sec2_demo .msbox .sec2 {
    width: 11.5%;
    margin: 0% auto -3% auto;
    display: inline-block;
}

.box4 .button_sec4 {
    width: 25%;
    margin: -5% auto 0% auto;
    text-align: center;
    padding: 2% 0 3% 0;
}

.box4 .button_sec4 img {
    cursor: pointer;
}

.cont_mb .img_text {
    color: #FF8005;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    font-size: 155%;
    width: 100%;
    text-align: center;
}

.cont_mb .img_text.spec {
    text-align: center;
}

.cont_mb .button .img_src {
    position: relative;
    display: inline-block;
    width: 47%;
    padding: 2%;
    background: #fff;
    margin: 0 1% 2% 1%;
    border: solid 1px #343633;
    vertical-align: middle;
    cursor: pointer;
}

.cont_mb .button {
    position: relative;
    margin: -0.5% auto 0% auto;
    text-align: center;
    padding: 2% 0 1% 0;
    width: 100%;
}

.cont_mb .finger {
    position: absolute;
    z-index: 10;    
}

.cont_mb .button .img_src #icon01 {
    width: 20%;
    position: relative;
    left: -8%;
    vertical-align: middle;
}

.cont_mb .button .img_src #icon02 {
    width: 20%;
    position: relative;
    left: -11%;
    vertical-align: middle;
}

.cont_mb .button .img_src #icon03 {
    width: 20%;
    position: relative;
    left: -8%;
    vertical-align: middle;
}

.cont_mb .button .img_src #icon04 {
    width: 20%;
    position: relative;
    left: -11%;
    vertical-align: middle;
}

.cont_mb .button .img_src #icon05 {
    width: 20%;
    position: relative;
    left: -11%;
    vertical-align: middle;
}

.cont_mb .box1_head_text {
    font-size: 155%;
}

.cont_mb .box1_sub_text {
    font-size: 135%;
    width: 85%;
}

.cont_mb {
    overflow: hidden;
}

.cont_mb .grade_img {
    width: 125%;
    margin: 4% auto 3% auto;
    position: relative;
    left: -14%;
    overflow: hidden;
}

.cont_mb .grade_title {
    width: 80%;
    margin: 10% auto 2% auto;
}

.cont_mb .grade_box_text {
    width: 95%;
    margin: 0 auto 22% auto;
    font-size: 100%;
}

.cont_mb .box_bottom_img {
    position: absolute;
    width: 18%;
    right: 5%;
    left: auto;
    bottom: -3%;
}

.box6 .cont_mb .def_box6 .dfg_sec {
    display: block;
    width: 70%;
    margin: 0 auto 3% auto;
    padding: 0% 0 2% 0;
}

.box6 .cont_mb .def_box6 .dfg_sec .fgh_head {
    font-size: 230%;
}

.box6 .cont_mb .def_box6 .dfg_sec .fgh_text {
    font-size: 180%;
}

.box6 .cont_mb .button6 {
    width: 50%;
    margin: 10% auto 10% auto;
}

.box6 .cont_mb .asde_img {
    width: 85%;
    position: relative;
    margin: 0px auto 10% auto;
    left: 2.5%;
}

.box6 .cont_mb .title {
    width: 80%;
    padding: 10% 0 3% 0;
}

.box6 .cont_mb .text {
    width: 90%;
    font-size: 110%;
    margin: 0 auto 5% auto;
}

.cont_mb .allcards {
    width: 95%;
    display: flex;
    min-height: 140px;
}

.cont_mb .card {
    min-height: 130px !important;
}

.cont_mb .card_bg {
    background: url(../images/s6_deco_bg.png) no-repeat bottom center;
    background-size: 260%;
    background-position: 45% 87%;
}

.box5 .cont_mb .bottom_text {
    width: 100%;
    font-size: 140%;
    margin: 3% auto 7% auto;
    color: #782a2a;
    text-align: center;
}

.box5 .cont_mb .title {
    width: 90%;
    margin: 5% auto 8% auto;
    padding: 4% 0 0 0;
}

.box3 .cont_mb .b3_dfg .dfg_sec {
    display: block;
    width: 100%;
    margin: 5% auto 2% auto;
    vertical-align: middle;
}

.box4 .cont_mb .title {
    width: 85%;
    margin: 0 auto;
    padding: 9% 0 5% 0;
}

.box4 .cont_mb .sub_text {
    width: 90%;
    margin: 0 auto;
    font-size: 115%;
    text-align: justify;
    padding: 0 0 5% 0;
    line-height: 130%;
}

.box3 .cont_mb .b3_dfg .dfg_sec .text {
    font-weight: bold;
    text-align: justify;
    margin: 3% auto 3% auto;
    width: 90%;
    font-size: 115%;
    line-height:1.3;
    font-weight: bold;
}

.box3 .cont_mb .b3_dfg .dfg_sec .title img {
    width: 100%;
}

.box3 .cont_mb .b3_dfg .dfg_sec .title {
    margin: 3% auto;
    position: relative;
    left: auto;
    width: 85%;
}

.box4 .cont_mb .b4_content_t div.b4_text {
    width: 47%;
    font-size: 120%;
    padding: 1.7%;
}

.box4 .cont_mb .b4_content div.b4_head {
    width: 47%;
    padding: 2%;
    font-size: 150%;
}

.box4 .cont_mb .slide_title .slide_t2 {
    width: 95%;
}

.box4 .cont_mb .slide_title .slide_t1 .img01 {
    position: initial;
    top: 0%;
    left: 0%;
    width: 18%;
}

.box4 .cont_mb .slide_title .slide_t1 .img02 {
    position: absolute;
    top: 0%;
    right: 3%;
    left: auto;
    width: 18%;
}

.box4 .cont_mb .slide_title .slide_t1 .img03 {
    position: absolute;
    left: 0%;
    width: 13%;
    bottom: 0%;
}

.box4 .cont_mb .slide_title .slide_t1 .img04 {
    position: absolute;
    right: 2%;
    width: 13%;
    bottom: 0%;
    top: auto;
}

.box4 .cont_mb .slide_title .slide_t1 {
    position: relative;
    /* display: inline-block; */
    width: 100%;
}

.cont_mb .b6_content {
    margin: 0 auto 4% auto;
}

.box4 .cont_mb .sec2_demo .msbox .sec1 {
    width: 28%;
}

.box4 .cont_mb .sec2_demo .msbox .sec2 {
    width: 28%;
    margin: 0% 2% -3% 2%;
}

.box4 .cont_mb .button_sec4 {
    width: 70%;
    margin: -6% auto 6% auto;
}

.box2 .cont_mb .xcv_box2 div.mnaij {
    display: block;
    width: 95%;
    left: 0%;
}

.box2 .cont_mb .box2_title {
    width: 75%;
    margin: 0% auto 0 auto;
    padding: 13% 0 0 0;
}

.box2 .cont_mb .item .msbox {
    height: 11.5rem;
}

.box2 .cont_mb .tile_sec2 {
    width: 90%;
}

.box2 .cont_mb .button {
    width: 49%;
    border: solid 1px #1B1B1B;
    padding: 2%;
    font-size: 150%;
}

.box2 .cont_mb .test_grade {
    width: 100%;
    margin: 0 auto 2% auto;
    padding: 1%;
}

.box2 .cont_mb .grade_list {
    width: 100%;
}

.box2 .cont_mb .gra_school_title {
    font-size: 150%;
}

.box2 .cont_mb .bottom_list {
    margin: 2% auto 2% auto;
    font-size: 85%;
}

.box2 .cont_mb .stu_name .student {
    width: 56%;
    font-size: 105%;
    margin: 0 0% 0 -10%;
}

.box2 .cont_mb .button_box2 {
    width: 45%;
    margin: 6% auto 15% auto;
}

.box2 .cont_mb .xcv_box2 div.mnaij .left_text {
    text-align: justify;
    margin: 4% auto 5% auto;
    line-height: 120%;
    font-size: 115%;
    width: 100%;
}

.box2 .cont_mb .xcv_box2 div.mnaij .title {
    width: 100%;
}

.box2 .cont_mb .xcv_box2 div.right.mnaij .sde25 {
    left: 0%;
}

.box2 .cont_mb .button_bcd {
    width: 50%;
    margin: 8% auto 0 auto;
}

.box2 .cont_mb .xcv_box2 {
    margin: 0 auto 0 auto;
    padding: 0 0 28% 0;
}

.box2 .cont_mb {
    overflow: initial;
}

.box2 .cont_mb .right_man {
    position: absolute;
    bottom: -46%;
    left: 0%;
    width: 23%;
}

.box2 .cont_mb .xcv_box2 div.right.mnaij .sde23 {
    font-size: 135%;
}

.box2 .cont_mb .xcv_box2 div.right.mnaij .sde23 p {
    margin: 3% auto 0 auto;
}

.box2 .cont_mb .student_list.stu02 div {
    width: 100%;
    font-size: 95%;
}

.box2 .cont_mb .student_list.stu02 div.school_sd {
    width: 45%;
}

.box2 .cont_mb .stu_name .student.school02 {
    width: 51% !important;
    margin: 0 auto 0 -1%;
}

.box2 .cont_mb .student_list.stu02 div {
    -webkit-animation: animate_phonew 30s linear infinite;
    animation: animate_phonew 30s linear infinite;
}

.box2 .cont_mb .stu_name {
    -webkit-animation: animate_phonew2 20s linear infinite;
    animation: animate_phonew2 20s linear infinite;
}

.box2 .cont_mb .stu_name .student.school02.sdname {
    width: 43% !important;
}

.grade_list.blcolor {
    border: solid 5px #214893;
    border-left: solid 10px #214893;
    border-right: solid 10px #214893;
}

.cont_mb .grade_list {
    left: 0%;
}

@media only screen and (min-width:360px) {
    .cont_mb .img_text {
        font-size: 180%;
    }

    .cont_mb .grade_box_text {
        font-size: 120%;
    }

    .box2 .cont_mb .item .msbox {
        height: 12.5rem;
    }

    .box2 .cont_mb .stu_name .student {
        width: 47%;
        font-size: 100%;
        margin: 0 0% 0 -5%;
    }

    .box2 .cont_mb .bottom_list {
        font-size: 100%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 110%;
    }

    .box5 .cont_mb .bottom_text {
        margin: 7% auto 7% auto;
    }

    .box6 .cont_mb .text {
        font-size: 120%;
    }

    .box4 .cont_mb .sub_text {
        font-size: 120%;
    }

    .box3 .cont_mb .b3_dfg .dfg_sec .text {
        font-size: 120%;
    }

    .box2 .cont_mb .xcv_box2 div.mnaij .left_text {
        font-size: 120%;
    }

    .cont_mb .box1_head_text {
        font-size: 170%;
    }

    .cont_mb .allcards {
        min-height: 160px;
    }

    .rice_word {
        display: contents;
    }

    .box2 .cont_mb .student_list.stu02 div {
        width: 100%;
        font-size: 110%;
    }

    .student_list.stu02 div {
        margin: 1% 0% 0 0%;
    }

    .box2 .cont_mb .student_list.stu02 div {
        width: 100%;
    }
}

@media only screen and (min-width:375px) {
    .box2 .cont_mb .item .msbox {
        height: 13rem;
    }

    .box2 .cont_mb .student_list.stu02 div {
        font-size: 90%;
    }
}

@media only screen and (min-width:390px) {
    .cont_mb .img_text {
        font-size: 180%;
    }

    .cont_mb .allcards {
        min-height: 170px;
    }

    .box2 .cont_mb .item .msbox {
        height: 13.5rem;
    }

    .box2 .cont_mb .stu_name .student {
        font-size: 110%;
    }
}

@media only screen and (min-width:414px) {
    .cont_mb .img_text {
        font-size: 180%;
    }

    .cont_mb .allcards {
        min-height: 180px;
    }

    .box2 .cont_mb .item .msbox {
        height: 14.5rem;
    }

    .cont_mb .box1_head_text {
        font-size: 185%;
    }

    .box2 .cont_mb .student_list.stu02 div {
        font-size: 100%;
    }
}

@media only screen and (min-width:428px) {
    .box2 .cont_mb .item .msbox {
        height: 15rem;
    }

    .cont_mb .img_text {
        font-size: 145%;
    }

    .cont_mb .box1_head_text {
        font-size: 190%;
    }

    .cont_mb .box1_sub_text {
        font-size: 165%;
    }

    .cont_mb .grade_box_text {
        font-size: 130%;
    }

    .box2 .cont_mb .button {
        font-size: 180%;
    }

    .box2 .cont_mb .gra_school_title {
        font-size: 180%;
    }

    .box2 .cont_mb .stu_name .student {
        font-size: 115%;
    }

    .box2 .cont_mb .bottom_list {
        font-size: 110%;
    }

    .cont_mb .grade_box_text {
        font-size: 150%;
    }

    .box2 .cont_mb .xcv_box2 div.mnaij .left_text {
        font-size: 150%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 125%;
    }

    .box3 .cont_mb .b3_dfg .dfg_sec .text {
        font-size: 150%;
    }

    .box4 .cont_mb .sub_text {
        font-size: 150%;
    }

    .box4 .cont_mb .b4_content div.b4_head {
        font-size: 180%;
    }

    .box4 .cont_mb .b4_content_t div.b4_text {
        font-size: 140%;
    }

    .box6 .cont_mb .text {
        font-size: 150%;
    }

    .box2 .cont_mb .student_list.stu02 div {
        font-size: 100%;
    }
}

@media only screen and (min-width:450px) {
    .cont_mb .img_text {
        font-size: 150%;
    }

    .cont_mb .box1_head_text {
        font-size: 220%;
    }

    .cont_mb .box1_sub_text {
        font-size: 190%;
    }

    .cont_mb .allcards {
        min-height: 200px;
    }

    .box2 .cont_mb .item .msbox {
        height: 17rem;
    }

    .head_mb {
        margin: 5.5% auto -1% auto;
    }

    .box2 .cont_mb .student_list.stu02 div {
        font-size: 110%;
    }
}

@media only screen and (min-width:500px) {
    .cont_mb .img_text {
        font-size: 170%;
    }

    .cont_mb .box1_head_text {
        font-size: 250%;
    }

    .cont_mb .allcards {
        min-height: 220px;
    }

    .box2 .cont_mb .item .msbox {
        height: 17.5rem;
    }

    .head_mb {
        margin: 5% auto -1% auto;
    }
}

@media only screen and (min-width:530px) {
    .cont_mb .img_text {
        font-size: 175%;
    }

    .cont_mb .box1_head_text {
        font-size: 250%;
    }

    .cont_mb .box1_sub_text {
        font-size: 210%;
    }

    .cont_mb .allcards {
        min-height: 230px;
    }

    .box2 .cont_mb .item .msbox {
        height: 18.5rem;
    }
}

@media only screen and (min-width:640px) {
    .cont_mb .img_text {
        font-size: 200%;
    }

    .cont_mb .box1_head_text {
        font-size: 285%;
    }

    .cont_mb .box1_sub_text {
        font-size: 240%;
    }

    .cont_mb .grade_box_text {
        font-size: 180%;
    }

    .box2 .cont_mb .item .msbox {
        height: 22.5rem;
    }

    .box2 .cont_mb .button {
        font-size: 210%;
    }

    .box2 .cont_mb .gra_school_title {
        font-size: 210%;
    }

    .box2 .cont_mb .stu_name .student {
        font-size: 180%;
    }

    .box2 .cont_mb .bottom_list {
        font-size: 140%;
    }

    .box2 .cont_mb .xcv_box2 div.mnaij .left_text {
        font-size: 180%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 180%;
    }

    .box3 .cont_mb .b3_dfg .dfg_sec .text {
        font-size: 180%;
    }

    .box4 .cont_mb .sub_text {
        font-size: 180%;
    }

    .box4 .cont_mb .b4_content div.b4_head {
        font-size: 210%;
    }

    .box4 .cont_mb .b4_content_t div.b4_text {
        font-size: 180%;
    }

    .box4 .cont_mb .button_sec4 {
        margin: -3% auto 6% auto;
    }

    .cont_mb .allcards {
        min-height: 280px;
    }

    .box5 .cont_mb .bottom_text {
        font-size: 180%;
    }

    .box6 .cont_mb .text {
        font-size: 180%;
    }

    .box6 .cont_mb .def_box6 .dfg_sec .fgh_head {
        font-size: 250%;
    }

    .box6 .cont_mb .def_box6 .dfg_sec .fgh_text {
        font-size: 200%;
    }

    .head_mb {
        margin: 4% auto -1% auto;
    }

    .box2 .cont_mb .student_list.stu02 div {
        font-size: 150%;
    }
}

@media only screen and (min-width:660px) {
    .box2 .cont_mb .item .msbox {
        height: 23.5rem;
    }

    #nav.top_section {
        font-size: 110%;
    }
}

@media only screen and (min-width:730px) {
    .box2 .cont_mb .item .msbox {
        height: 25.5rem;
    }

    .cont_mb .allcards {
        min-height: 20rem;
    }
}

@media only screen and (min-width:768px) {
    .cont_pc {
        display: block;
        padding: 2% 0 2% 0;
    }

    .cont_mb {
        display: none;
    }

    .button {
        margin: -0.5% auto 1% auto;
    }

    .img_text {
        font-size: 125%;
    }

    .box1_head_text {
        font-size: 170%;
    }

    .box1_sub_text {
        font-size: 130%;
    }

    .grade_box_text {
        font-size: 110%;
    }

    .test_grade .button {
        font-size: 160%;
    }

    .gra_school_title {
        font-size: 160%;
    }

    .stu_name .student {
        font-size: 120%;
    }

    .bottom_list {
        font-size: 100%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 120%;
        margin: 3% auto;
    }

    .stu_name .student {
        width: 38%;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 115%;
        line-height: 110%;
    }

    .box6 .def_box6 .dfg_sec .fgh_head {
        font-size: 150%;
    }

    .box6 .def_box6 .dfg_sec .fgh_text {
        font-size: 130%;
    }

    .box5 .bottom_text {
        font-size: 110%;
    }

    .box4 .sub_text {
        font-size: 120%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 130%;
    }

    .box4 .b4_content_t {
        font-size: 100%;
    }

    .student_list.stu02 div {
        font-size: 110%;
    }

    .box4 .sub_text {
        width: 58%;
    }

    .box4 .s5_man {
        width: 20.5%;
        bottom: -1%;
        right: 10%;
    }

    .rice_word {
        display: inline-block;
    }

    .student_list.stu02 div {
        margin: 1% 0% 0 4%;
    }
}

@media only screen and (min-width:950px) {
    .box2 .item .msbox {
        height: 22rem;
    }
}

@media only screen and (min-width:1024px) {
    .img_text {
        font-size: 160%;
    }

    .box1_head_text {
        font-size: 230%;
    }

    .box1_sub_text {
        font-size: 175%;
    }

    .grade_box_text {
        font-size: 122%;
    }

    .test_grade .button {
        font-size: 200%;
    }

    .gra_school_title {
        font-size: 200%;
    }

    .stu_name {
        height: 20em;
    }

    .student_list {
        height: 20.5rem;
    }

    .stu_name .student {
        font-size: 160%;
    }

    .bottom_list {
        font-size: 140%;
    }

    .xcv_box2 div.mnaij .left_text {
        font-size: 125%;
        width: 85%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 160%;
    }

    .xcv_box2 {
        margin: 0 auto 3% auto;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 135%;
        line-height: 130%;
    }

    .box4 .sub_text {
        font-size: 145%;
        font-weight: bold;
        line-height: 1.3;
    }

    .box4 .b4_content div.b4_head {
        font-size: 170%;
    }

    .box4 .b4_content_t {
        font-size: 135%;
    }

    .box42 .sec2_demo .msbox .sec1 {
        width: 12%;
    }

    .box42 .sec2_demo .msbox .sec2 {
        width: 12%;
    }

    .box5 .bottom_text {
        font-size: 150%;
    }

    .box6 .title {
        width: 85%;
    }

    .box6 .text {
        font-size: 150%;
    }

    .box6 .def_box6 .dfg_sec .fgh_head {
        font-size: 210%;
    }

    .box6 .def_box6 .dfg_sec .fgh_text {
        font-size: 170%;
    }

    .box2 .item .msbox {
        height: 24rem;
    }

    .student_list.stu02 div {
        font-size: 145%;
    }
}

@media only screen and (min-width:1100px) {
    .button {
        margin: -0.5% auto 0% auto;
    }

    .img_text {
        font-size: 170%;
    }

    .box1_head_text {
        font-size: 275%;
    }

    .box1_sub_text {
        font-size: 190%;
    }

    .grade_box_text {
        font-size: 135%;
    }

    .test_grade .button {
        font-size: 230%;
    }

    .gra_school_title {
        font-size: 230%;
    }

    .stu_name {
        height: 22em;
    }

    .student_list {
        height: 22.5rem;
    }

    .stu_name .student {
        font-size: 160%;
    }

    .bottom_list {
        font-size: 140%;
    }

    .xcv_box2 div.mnaij .left_text {
        font-size: 140%;
        width: 85%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 180%;
    }

    .xcv_box2 {
        margin: 0 auto 3% auto;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 160%;
        line-height: 130%;
    }

    .box4 .sub_text {
        font-size: 160%;
        font-weight: bold;
    }

    .box4 .b4_content div.b4_head {
        font-size: 190%;
    }

    .box4 .b4_content_t {
        font-size: 150%;
    }

    .box42 .sec2_demo .msbox .sec1 {
        width: 12%;
    }

    .box42 .sec2_demo .msbox .sec2 {
        width: 12%;
    }

    .box5 .bottom_text {
        font-size: 180%;
    }

    .box6 .title {
        width: 85%;
    }

    .box6 .text {
        font-size: 150%;
    }

    .box6 .def_box6 .dfg_sec .fgh_head {
        font-size: 210%;
    }

    .box6 .def_box6 .dfg_sec .fgh_text {
        font-size: 170%;
    }

    .box2 .item .msbox {
        height: 28rem;
    }

    .student_list.stu02 div {
        font-size: 165%;
    }
}

@media only screen and (min-width:1200px) {
    .button {
        margin: -0.5% auto 0% auto;
    }

    .img_text {
        font-size: 185%;
    }

    .box1_head_text {
        font-size: 290%;
    }

    .box1_sub_text {
        font-size: 200%;
    }

    .grade_box_text {
        font-size: 150%;
    }

    .test_grade .button {
        font-size: 250%;
    }

    .gra_school_title {
        font-size: 250%;
    }

    .stu_name {
        height: 25em;
    }

    .student_list {
        height: 25.5rem;
    }

    .stu_name .student {
        font-size: 200%;
    }

    .bottom_list {
        font-size: 170%;
    }

    .xcv_box2 div.mnaij .left_text {
        font-size: 155%;
        width: 78%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 210%;
    }

    .xcv_box2 {
        margin: 0 auto 3% auto;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 180%;
        line-height: 130%;
    }

    .box4 .sub_text {
        font-size: 160%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 190%;
    }

    .box4 .b4_content_t {
        font-size: 170%;
    }

    .box42 .sec2_demo .msbox .sec1 {
        width: 12%;
    }

    .box42 .sec2_demo .msbox .sec2 {
        width: 12%;
    }

    .box5 .bottom_text {
        font-size: 180%;
    }

    .box6 .title {
        width: 85%;
    }

    .box6 .text {
        font-size: 200%;
    }

    .box6 .def_box6 .dfg_sec .fgh_head {
        font-size: 250%;
    }

    .box6 .def_box6 .dfg_sec .fgh_text {
        font-size: 200%;
    }

    .box2 .item .msbox {
        height: 31rem;
    }

    .box4 .s5_man {
        width: 19.5%;
    }

    .student_list.stu02 div {
        font-size: 185%;
    }
}

@media only screen and (min-width:1300px) {
    .box1_head_text {
        font-size: 270%;
    }

    .box_bottom_img {
        width: 14%;
    }

    .box2 .item .msbox {
        height: 20rem;
    }

    .grade_list {
        border: solid 10px #FFB900;
        border-left: solid 15px #ffB900;
        border-right: solid 15px #ffB900;
    }

    .stu_name .student {
        width: 40%;
    }

    .stu_name .student.school02 {
        width: 40% !important;
    }

    .stu_name .student {
        font-size: 185%;
    }

    .right_man {
        bottom: -33%;
        right: -22%;
        width: 26%;
    }

    .box4 .b4_content_t {
        font-size: 155%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 185%;
    }

    .box6 .text {
        font-size: 190%;
    }

    .student_list.stu02 div {
        font-size: 165%;
    }
}

@media only screen and (min-width:1400px) {
    .box2 .item .msbox {
        height: 23rem;
    }

    .stu_name {
        height: 27em;
    }

    .student_list {
        height: 27.5rem;
    }

    .right_man {
        bottom: -30%;
        right: -22%;
        width: 25%;
    }

    .box4 .sub_text {
        font-size: 170%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 195%;
    }

    .box4 .b4_content_t {
        font-size: 155%;
    }

    .student_list.stu02 div {
        font-size: 175%;
    }
	
	.img_text {
        font-size: 195%;
    }
}

@media only screen and (min-width:1600px) {
    .img_text {
        font-size: 200%;
    }

    .box1_head_text {
        font-size: 320%;
    }

    .box1_sub_text {
        font-size: 230%;
    }

    .grade_box_text {
        font-size: 180%;
    }

    .box2 .item .msbox {
        height: 26rem;
    }

    .stu_name {
        height: 30em;
    }

    .student_list {
        height: 30.5rem;
    }

    .xcv_box2 div.mnaij .left_text {
        font-size: 165%;
    }

    .right_man {
        bottom: -24%;
        right: -20%;
        width: 23%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 230%;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 200%;
    }

    .box4 .sub_text {
        font-size: 185%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 220%;
    }

    .box4 .b4_content_t {
        font-size: 180%;
    }

    .box6 .text {
        font-size: 220%;
    }

    .owl-theme .owl-dots .owl-dot {
        zoom: 2;
    }

    .student_list.stu02 div {
        font-size: 195%;
    }

    .student_list.stu02 div.school_sd {
        margin: 1% -1.5% 0 3%;
    }
}

@media only screen and (min-width:1800px) {
    .img_text {
        font-size: 300%;
    }

    .box1_head_text {
        font-size: 470%;
    }

    .box1_sub_text {
        font-size: 350%;
    }

    .grade_box_text {
        font-size: 250%;
    }

    .box2 .item .msbox {
        height: 30rem;
    }

    .stu_name {
        height: 38em;
    }

    .student_list {
        height: 38.5rem;
    }

    .xcv_box2 div.mnaij .left_text {
        font-size: 250%;
    }

    .right_man {
        bottom: -24%;
        right: -20%;
        width: 23%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        font-size: 330%;
    }

    .b3_dfg .dfg_sec .text {
        font-size: 300%;
    }

    .box4 .sub_text {
        font-size: 285%;
    }

    .box4 .b4_content div.b4_head {
        font-size: 320%;
    }

    .box4 .b4_content_t {
        font-size: 270%;
    }

    .box6 .text {
        font-size: 320%;
    }

    .test_grade .button {
        font-size: 400%;
    }

    .gra_school_title {
        font-size: 400%;
    }

    .stu_name .student {
        font-size: 330%;
    }

    .bottom_list {
        font-size: 270%;
    }

    .box5 .bottom_text {
        font-size: 300%;
    }

    .box6 .def_box6 .dfg_sec .fgh_head {
        font-size: 350%;
    }

    .box6 .def_box6 .dfg_sec .fgh_text {
        font-size: 310%;
    }

    .student_list.stu02 div {
        font-size: 295%;
    }
}

.allcards {
    width: 65%;
    min-height: 460px;
    margin: 1.5% auto 0 auto;
    padding: 0;
}

.allcards img {
    width: 100%;
}

@media only screen and (min-width: 481px) {
    .allcards {
        display: flex;
        width: 85%;
        min-height: 140px;
        justify-content: space-evenly;
        align-items: flex-start;
    }

    .card_back_text {
        font-size: 97%;
    }

    .card_back_text1 {
        font-size: 97%;
    }
}

@media only screen and (min-width: 768px) {
    .allcards {
        width: 80%;
    }

    .card_back_text {
        font-size: 100%;
        top: 6%;
        left: 15%;
    }

    .card_back_text1 {
        font-size: 100%;
        top: 8%;
        left: 10%;
    }
}

@media only screen and (min-width:800px) {
    .allcards {
        min-height: 10rem;
    }
}

@media only screen and (min-width: 1024px) {
    .allcards {
        width: 85%;
        min-height: 200px;
    }

    .card_back_text {
        font-size: 130%;
    }

    .card_back_text1 {
        top: 8%;
        font-size: 130%;
    }

    .sdfsdf>font {
        font-size: 120%;
    }
}

@media only screen and (min-width: 1100px) {
    .allcards {
        width: 85%;
        min-height: 220px;
    }

    .card_back_text {
        font-size: 170%;
    }

    .card_back_text1 {
        font-size: 170%;
    }
}

@media only screen and (min-width: 1200px) {
    .allcards {
        min-height: 250px;
    }
}

@media only screen and (min-width: 1300px) {
    .allcards {
        min-height: 260px;
    }
}

@media only screen and (min-width: 1400px) {
    .allcards {
        min-height: 280px;
    }
}

@media only screen and (min-width: 1600px) {
    .allcards {
        min-height: 320px;
    }

    .card_back_text {
        font-size: 210%;
    }

    .card_back_text1 {
        font-size: 210%;
    }
}

@media only screen and (min-width: 1920px) {
    .allcards {
        min-height: 380px;
    }

    .card_back_text {
        font-size: 250%;
    }

    .card_back_text1 {
        font-size: 250%;
    }
}

.card {
    position: relative;
    width: 100%;
    min-height: 135px;
    margin: 0 1% 10px 1%;
}

@media only screen and (min-width: 768px) {
    .card {
        width: calc((100% - 25%) / 3);
        min-height: auto;
        margin: 0;
    }
}

.front-side {
    box-sizing: border-box;
    z-index: 4;
}

.back-side {
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
    box-sizing: border-box;
    z-index: 4;
}

.card .front-side,
.card .back-side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-duration: 1s, 1s;
    -moz-transition-duration: 1s, 1s;
    -ms-transition-duration: 1s, 1s;
    -o-transition-duration: 1s, 1s;
    transition-duration: 1s, 1s;
    box-sizing: border-box;
}

.flip .front-side {
    z-index: 4;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip .back-side {
    z-index: 4;
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.card-hand {
    position: absolute;
    bottom: -5%;
    right: -5%;
    width: 15%;
    color: #cccccc;
    font-size: 185%;
}

@media only screen and (min-width: 481px) {
    .card-hand {
        font-size: 135%;
    }
}

@media only screen and (min-width: 1024px) {
    .card-hand {
        font-size: 185%;
    }
}

@media only screen and (min-width: 1600px) {
    .card-hand {
        font-size: 190%;
    }
}

@media only screen and (min-width: 1920px) {
    .card-hand {
        font-size: 230%;
    }
}

/*新增修改*/
.stu_name table {
	width:100%;
	margin:0 auto;
}

.stu_name table td{
	padding:3px;
}

.stu_name table td:nth-child(1){
	border:none;
	width:40%;
	font-size:145%;
	padding-left:10%;
}

@media only screen and (min-width: 768px) {
	.stu_name table td:nth-child(1){
		border:none;
		width:45%;
		font-size:115%;
		line-height:100%;
		padding-left:2%;
	}
}

@media only screen and (min-width: 1024px) {
	.stu_name table td:nth-child(1){
		font-size:150%;
	}
}

@media only screen and (min-width: 1100px) {
	.stu_name table td:nth-child(1){
		padding-left:4%;
		font-size:170%;
	}
}

@media only screen and (min-width: 1600px) {
	.stu_name table td:nth-child(1){
		font-size:190%;
	}
}

@media only screen and (min-width: 1920px) {
	.stu_name table td:nth-child(1){
		font-size:280%;
	}
}

.stu_name table td:nth-child(2){
	border:none;
	width:60%;
	font-size:145%;
	padding-left:1%;
}

@media only screen and (min-width: 768px) {
	.stu_name table td:nth-child(2){
		border:none;
		width:55%;
		font-size:115%;
		padding-left:0%;
	}
}

@media only screen and (min-width: 1024px) {
	.stu_name table td:nth-child(2){
		font-size:150%;
	}
}

@media only screen and (min-width: 1100px) {
	.stu_name table td:nth-child(2){
		font-size:170%;
	}
}

@media only screen and (min-width: 1600px) {
	.stu_name table td:nth-child(2){
		font-size:190%;
	}
}

@media only screen and (min-width: 1920px) {
	.stu_name table td:nth-child(2){
		font-size:280%;
	}
}

.stu_name table td:nth-child(2) span{
	text-align:right;
	
}


.stu_name table span.left {
	color:#6399B5;
}

.stu_name table span.grade {
	color:#D51417;
}


.box2 .cont_mb .stu_name table td:nth-child(1) {
	padding-left:0.5%;
	width:50%;
	font-size: 120%;
}

.box2 .cont_mb .stu_name.name02 table td:nth-child(1) {
	padding-left:0.5%;
	width:11%;
	font-size: 95%;
}

@media only screen and (min-width: 480px) {
	.box2 .cont_mb .stu_name.name02 table td:nth-child(1) {
		padding-left:0.5%;
		width:15%;
		font-size: 120%;
	}
}

.box2 .cont_mb .stu_name table td:nth-child(2) {
	font-size: 120%;
}

.box2 .cont_mb .stu_name.name02 table td:nth-child(2) {
	width:25%;
	font-size: 95%;
}

@media only screen and (min-width: 480px) {
	.box2 .cont_mb .stu_name.name02 table td:nth-child(2) {
		width:35%;
		font-size: 120%;
	}
}


.box2 .cont_mb .stu_name.name02 table td:nth-child(3) {
	width:11%;
	font-size: 95%;
}

@media only screen and (min-width: 480px) {
	.box2 .cont_mb .stu_name.name02 table td:nth-child(3) {
		width:15%;
		font-size: 120%;
	}
}

.box2 .cont_mb .stu_name.name02 table td:nth-child(4) {
	width:25%;
	font-size: 95%;
}

@media only screen and (min-width: 480px) {
	.box2 .cont_mb .stu_name.name02 table td:nth-child(4) {
		width:35%;
		font-size: 120%;
	}
}


.box4 .b4_content_t div.b4_text.v1 {
    padding: 2.15% 1% 2% 1%;
	vertical-align: bottom;
}

@media only screen and (min-width: 840px) {
	.box4 .b4_content_t div.b4_text.v1 {
		padding: 1.9% 1% 2% 1%;
		vertical-align: bottom;
	}
	
}

@media only screen and (min-width: 890px) {
	.box4 .b4_content_t div.b4_text.v1 {
		padding: 1.79% 1% 2% 1%;
		vertical-align: bottom;
	}
	
}

@media only screen and (min-width: 910px) {
	.box4 .b4_content_t div.b4_text.v1 {
		padding: 1.7% 1% 2% 1%;
		vertical-align: bottom;
	}
	
}

@media only screen and (min-width: 1024px) {
	.box4 .b4_content_t div.b4_text.v1 {
		padding: 2.15% 1% 2% 1%;
		vertical-align: bottom;
	}
	
}

.box4 .cont_mb .b4_content_t div.b4_text.v1 {
    padding: 4.4% 1% 4.4% 1%;
    vertical-align: bottom;
}

@media only screen and (min-width: 360px) {
	.box4 .cont_mb .b4_content_t div.b4_text.v1 {
		padding: 4.15% 1% 4.15% 1%;
		vertical-align: bottom;
	}
}

@media only screen and (min-width: 370px) {
	.box4 .cont_mb .b4_content_t div.b4_text.v1 {
		padding: 4.25% 1% 4.25% 1%;
		vertical-align: bottom;
	}
}

@media only screen and (min-width: 410px) {
	.box4 .cont_mb .b4_content_t div.b4_text.v1 {
		padding: 4.1% 1% 4.1% 1%;
		vertical-align: bottom;
	}
}

@media only screen and (min-width: 640px) {
	.box4 .cont_mb .b4_content_t div.b4_text.v1 {
		padding: 3.85% 1% 3.85% 1%;
		vertical-align: bottom;
	}
}

@media only screen and (min-width: 730px) {
	.box4 .cont_mb .b4_content_t div.b4_text.v1 {
		padding: 3.65% 1% 3.65% 1%;
		vertical-align: bottom;
	}
}

.student_list.stu02 div table td{
	border:none;
	padding: 3px;
}


.v-center{
    display: flex !important;
    justify-content: center;
    align-items: center;
}


.word-large{
     font-weight:500 !important  ;
     line-height: 1.4;
}

.add-teacher-pink{
  position: relative;
  width: 100%;
  padding: 1% 0;
  z-index: 1;
  background-color: #ffd3d5;
}


.Pale-pink{
    position: relative;
    background: #ffeeef;
    width: 90%;
    margin: 0 auto;
    border-radius:20px;
    padding: 10px 10px;
}

.deco-hat{
    position: absolute;
    width: 18%;
    top: -4%;
    left: -4%;
    z-index: 5;
}
@media only screen and (min-width: 480px) {
    .deco-hat{
        position: absolute;
        width: 18%;
        top: -21%;
        left: -8%;
        z-index: 5;
    }
}
.deco-hat img{
 width: 100%;
}

.deco-sis{
    position: absolute;
    width: 30%;
    bottom: -32%;
    right: -8%;
    z-index: 5;
}
@media only screen and (min-width: 480px) {
    .deco-sis{
        width: 18%;
        bottom: -8%;
        right: -8%;
    }
}
@media only screen and (min-width: 1100px) {
    .deco-sis{
        width: 30%;
        bottom: -45%;
        right: -8%;
    }
}
@media only screen and (min-width: 1400px) {
    .deco-sis{
        width: 26%;
        bottom: -41%;
        right: -8%;
    }
}
@media only screen and (min-width: 1920px) {
    .deco-sis{
        width: 26%;
        bottom: -41%;
        right: -8%;
    }
}

.deco-sis img{
 width: 100%;
}



.b1-add-pic {
  position: relative;
  width: 98%;
  margin: 10px auto;
}
@media only screen and (min-width: 480px) {
  .b1-add-pic {
    width:70%;
  }
}
.b1-add-pic img {
  width: 100%;
}

.b2-add-pic {
  position: relative;
  width: 87%;
  margin: 10px auto;
  z-index: 15;
}
@media only screen and (min-width: 480px) {
  .b2-add-pic {
    width:50%;
  }
}
.b2-add-pic img {
  width: 100%;
}

.news-ticker {
  width: 80%;
  width: fit-content;
  height: 30px;
  padding: 0 30px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #f4002f;
  border-radius: 999px;
  color: #fff;
  margin: 1% auto 3% auto; 
}
@media only screen and (min-width: 480px) {
    .news-ticker {
      width: fit-content;
      height: 78px;
      padding: 0 30px;
      display: flex;
      align-items: center;
      gap: 14px;
      background: #f4002f;
      border-radius: 999px;
      color: #fff;
      margin: 1% auto 3% auto; 
    }
}

.news-icon {
   width: 10%
}
.news-icon img{
   width: 100%
}

.news-window {
  height: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
@media only screen and (min-width: 480px) {
    .news-window {
      height: 78px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
}

.news-text {
  display: flex;
  align-items: center;
  height: 30px;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  animation: singleVerticalTicker 4s ease-in-out infinite;
}
@media only screen and (min-width: 480px) {
    .news-text {
      display: flex;
      align-items: center;
      height: 78px;
      white-space: nowrap;
      font-size: 32px;
      font-weight: 700;
      letter-spacing: 1px;
      animation: singleVerticalTicker 4s ease-in-out infinite;
    }
}


@keyframes singleVerticalTicker {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }

  15% {
    transform: translateY(0);
    opacity: 1;
  }

  75% {
    transform: translateY(0);
    opacity: 1;
  }

  90%,
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

.ps-text{
    text-align: center;
    font-size: 100%;
    margin: 0 auto;
    color: #333231;
    font-weight: 500;
    width:90%;
}
@media screen and (max-width: 360px) {
    .ps-text{
        font-size:90%;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1024px) {
    .ps-text{
        font-size: 120%;
        margin: 0 auto;
    }
}


/* Top navigation weight for desktop and mobile */
#nav.top_section ul li a {
    font-weight: 600;
}

/* Mobile top navigation: keep all three items on one row */
@media screen and (max-width: 480px) {
    #nav.top_section ul {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: 100%;
    }

    #nav.top_section ul li {
        display: block;
        flex: 1 1 0;
        min-width: 0;
        margin: 0;
    }

    #nav.top_section ul li a,
    #nav.top_section ul li a.course {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto;
        line-height: 1.2;
        padding: 0.75em 0.2em !important;
        font-size: 14px;
        font-weight: 600;
        white-space: nowrap;
    }

    #nav.top_section ul li a div {
        padding-left: 4px;
    }
}

/* Box1 mobile buttons: 2 / 2 / 1 layout */
@media screen and (max-width: 480px) {
    .box1 .cont_pc {
        display: block;
    }

    .box1 .button {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
        gap: 10px;
        width: 94%;
        padding: 4% 0 2%;
    }

    .box1 .button .img_src {
        display: block;
        flex: 0 0 calc(50% - 5px);
        width: calc(50% - 5px);
        margin: 0;
        padding: 2%;
        border-width: 2px;
        border-radius: 14px;
    }

    .box1 .button .img_src .but-dis {
        height: 100%;
    }

    .box1 .button .img_text {
        font-size: 16px;
    }
}

/* Teacher mobile carousel: one ordered group per slide */
@media screen and (max-width: 480px) {
    .add-teacher-pink .box42 .sec2_demo .msbox {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 5px;
        width: 100%;
        margin: 0 auto 5%;
    }

    .add-teacher-pink .box42 .sec2_demo .msbox .sec1,
    .add-teacher-pink .box42 .sec2_demo .msbox .sec2 {
        display: block;
        width: 31%;
        margin: 0;
    }

    .add-teacher-pink .box42 .sec2_demo .msbox .sec2 {
        margin-top: 12%;
    }
}

/* Shared xcv_box2: desktop columns, mobile stacked layout */
@media screen and (max-width: 480px) {
    .xcv_box2 article.edm-wrapper-n {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .xcv_box2 div.left.mnaij {
        display: contents;
    }

    .xcv_box2 .title-style-xcv_box2 {
        order: 1;
        width: 120%;
        margin: 6% auto 6%;
    }

    .xcv_box2 div.mnaij .left_text {
        order: 2;
        width: 88%;
        margin: 0 auto 5%;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }

    .xcv_box2 div.mnaij.right {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 4px;
        position: relative;
        left: auto;
        width: 88%;
        margin: 0 auto;
        padding: 0;
    }

    .xcv_box2 div.right.mnaij .sde23,
    .xcv_box2 div.right.mnaij .sde25 {
        display: block;
        width: 100%;
        margin: 0;
        padding: 6%;
        position: relative;
        left: auto;
    }

    .xcv_box2 div.right.mnaij .sde23 img {
        width: 55%;
    }

    .xcv_box2 div.right.mnaij .sde23 p {
        margin: 3% auto 0;
        font-size: 17px;
        line-height: 1.2;
    }

    .xcv_box2 .button_bcd {
        order: 4;
        width: 50%;
        margin: 6% auto 3%;
    }
}

/* Teacher desktop spacing: 5px between teachers */
@media screen and (min-width: 481px) {
    .add-teacher-pink .box42 .sec2_demo .msbox .sec1,
    .add-teacher-pink .box42 .sec2_demo .msbox .sec2 {
        margin-left: 2.5px;
        margin-right: 2.5px;
    }
}


.btn-gogogon img{
 width: 100%;
}

.btn-gogogon:hover {
  transform: scale(0.9);
}

/* Shared btn-gogogon sizes */
.btn-gogogon {
    display: block;
    cursor: pointer;
    width: 25%;
    margin: 3% auto;
}

@media screen and (max-width: 480px) {
    .btn-gogogon {
        width: 60%;
        margin: 3% auto;
    }

    .xcv_box2 .btn-gogogon {
        order: 4;
    }
}
/* Keep xcv_box2 button visually equal to 30% of the full desktop row */
@media screen and (min-width: 481px) {
    .xcv_box2 .btn-gogogon {
         display: block;
        cursor: pointer;
        width: 73%;
        margin-left: 0;
        margin-right: auto;
    }
}
/* Mobile horizontal overflow guard */
@media screen and (max-width: 480px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    #nav.top_section {
        left: 0;
        right: 0;
        width: auto;
        max-width: 100%;
    }

    #nav.top_section ul,
    .total-container {
        max-width: 100%;
    }

    .add-teacher-pink {
        overflow: hidden;
    }
}