@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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

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

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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

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

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "palt" 1;
}

a {
  text-decoration: none;
  outline: none;
}

input, select {
  vertical-align: middle;
}

img {
  vertical-align: middle;
  margin: 0;
  padding: 0;
  border: 0;
}

b {
  font-weight: bold;
}

html, body {
  width: 100%;
  height: 100%;
  
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #999;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #999;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #999;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #999;
}

.top-link .top-link-nav, .top-link .top-link-nav a,.nav-fixed nav, .secbox-1 nav  {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
}

.btn-top, .btn-top:active, .btn-top:focus, .btn-go-form,header, .btn-chme, .btn-snatch, .exp-box, .heartsay, .tvabout,.secbox-1 nav button, .secbox-1 nav summary  {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

.btn-top, .btn-top:active, .btn-top:focus, .btn-top:hover, .btn-top:active:hover, .btn-top:focus:hover, .btn-top.cd-is-visible, .btn-top.cd-fade-out, .btn-go-form, .btn-go-form:hover, .btn-chme, .btn-snatch,.nav-fixed, .show, .secbox-1 nav summary:hover, .secbox-form .send a {
  -webkit-transition: all .3s ease-in-out;
  -moz-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  -ms-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}

.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.clrBoth {
  clear: both;
}

.divine-2-box {
  position: relative;
}
.divine-2-box .divine-left {
  float: none;
}
@media only screen and (min-width: 481px) {
  .divine-2-box .divine-left {
    float: left;
  }
}
.divine-2-box .divine-right {
  float: none;
}
@media only screen and (min-width: 481px) {
  .divine-2-box .divine-right {
    float: right;
  }
}

.show-pc {
  display: none;
}
@media only screen and (min-width: 768px) {
  .show-pc {
    display: block;
  }
}

.show-mobile {
  display: block;
}
@media only screen and (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

@keyframes movingSec1Gph {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(-0.25%);
  }
  50% {
    transform: translateY(-0.5%);
  }
  80% {
    transform: translateY(-0.25%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes revealLTR {
  0% {
    width: 0;
    left: 0;
  }
  65% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}
@keyframes revealRTL {
  0% {
    width: 0;
    right: 0;
  }
  65% {
    width: 100%;
    right: 0;
  }
  100% {
    width: 0;
    right: 100%;
  }
}
@keyframes textHidden {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
body {
  position: relative;
  font-size: 15px;
  font-family: "FontAwesome", "Century Gothic", "Arial", "cwTeXYen", "微軟正黑體";
  background-color: #fff;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  z-index: 0;
}

.button1 {
 text-shadow: 0.1em 0.1em 0.05em #e25a41;	
}

summary::marker {
  font-size: 0;
}

.d-show {
  display: block;
}

.d-hide {
  display: none;
}

.show-p {
  display: none;
}
@media only screen and (min-width: 481px) {
  .show-p {
    display: block;
  }
}

.show-m {
  display: block;
}
@media only screen and (min-width: 481px) {
  .show-m {
    display: none;
  }
}

.btn-top, .btn-top:active, .btn-top:focus {
  display: block;
  position: fixed;
  bottom: 60px;
  right: 10px;
  width: 45px;
  height: 45px;
  font-size: 85%;
  color: #fff !important;
  text-align: center;
  background-color: #ea5f2b;
  cursor: pointer;
  border-radius: 100rem;
  box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.15);
  padding: 15px 0;
  visibility: hidden;
  opacity: 0;
  z-index: 15;
}
@media only screen and (min-width: 481px) {
  .btn-top, .btn-top:active, .btn-top:focus {
    bottom: 65px;
    right: 15px;
    width: 50px;
    height: 50px;
    padding: 15px 0;
  }
}
@media only screen and (min-width: 768px) {
  .btn-top, .btn-top:active, .btn-top:focus {
    bottom: 90px;
    right: 25px;
    width: 60px;
    height: 60px;
    padding: 25px 0;
  }
}
.btn-top:hover, .btn-top:active:hover, .btn-top:focus:hover {
  color: #ea5f2b !important;
  background-color: #fff !important;
}

.btn-top.cd-is-visible {
  visibility: visible;
  opacity: 1;
}

.btn-top.cd-fade-out {
  opacity: 1;
}

.btn-go-form {
  display: inline-block;
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 45px;
  height: 45px;
  font-size: 85%;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.5px;
  font-family: "Noto Sans TC", "微軟正黑體";
  color: #fff !important;
  background-color: #ea5f2b;
  cursor: pointer;
  border-radius: 100rem;
  box-shadow: 0 10px 60px 0 rgba(0, 0, 0, 0.15);
  padding: 7px 0 15px 0;
  z-index: 15;
}
@media only screen and (min-width: 481px) {
  .btn-go-form {
    bottom: 10px;
    right: 15px;
    width: 50px;
    height: 50px;
    font-size: 95%;
    padding: 8px 0 15px 0;
  }
}
@media only screen and (min-width: 768px) {
  .btn-go-form {
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    font-size: 110%;
    padding: 12px 0 20px 0;
  }
}
.btn-go-form:hover {
  color: #ea5f2b !important;
  background-color: #fff;
}

.top-link {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 28px;
  color: #fff;
  background-color: #ea5f2b;
  z-index: 999;
}
@media only screen and (min-width: 481px) {
  .top-link {
    height: 27px;
  }
}
@media only screen and (min-width: 768px) {
  .top-link {
    height: 30px;
  }
}
.top-link .top-link-nav {
  margin: 6px 0 0 0;
  justify-content: flex-end;
}
.top-link .top-link-nav a {
  color: #fff;
  font-size: 95%;
  padding: 0 10px;
}

@media only screen and (min-width: 360px) {
	
 .top-link .top-link-nav {
  margin: 6px 0 0 0;
  justify-content: center;
 }	
}

@media only screen and (min-width: 481px) {
  .top-link .top-link-nav a {
    font-size: 100%;
  }
  .top-link .top-link-nav {
   margin: 6px 0 0 0;
   justify-content: flex-end;
  }
}
@media only screen and (min-width: 768px) {
  .top-link .top-link-nav a {
    font-size: 100%;
  }
}
.top-link .top-link-nav a:hover {
  color: #ffde00 !important;
}
.top-link .top-link-nav a:first-of-type {
  border-right: #fff 1px solid;
}
.top-link .top-link-nav a:nth-of-type(2) {
  border-right: #fff 1px solid;
}
.top-link .top-link-nav dt, .top-link .top-link-nav dd {
  margin: 0 4px;
}

header {
  position: relative;
  width: 100%;
  margin: 0px auto;
}
header img {
  width: 100%;
}
header .vbanner-pc {
  display: none;
}
@media only screen and (min-width: 481px) {
  header .vbanner-pc {
    display: block;
  }
}
header .vbanner-mb {
  display: block;
}
@media only screen and (min-width: 481px) {
  header .vbanner-mb {
    display: none;
  }
}

.edm-wrapper-header {
  position: absolute;
  width: 100%;
  height: 100%;
}

.edm-wrapper {
  position: relative;
  width: 96%;
  margin: 0 auto;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .edm-wrapper {
    width: 86%;
  }
}
@media only screen and (min-width: 1100px) {
  .edm-wrapper {
    width: 70%;
  }
}

.btn-logo {
  display: block;
  position: relative;
  text-align: center;
  margin: 0 auto;
  top: 8%; 
  /* left: 2.5%; */
  width: 44%; 
  height: 11%; 
  opacity: 1;
}
@media only screen and (min-width: 481px) {
  .btn-logo {
    top: 8%;
    /* left: 19.5%; */
    width: 21%;
    height: 14%;
  }
}

.section-form {
  position:absolute;
  background-color: #3b538c;
  padding: 30px 0;
  z-index:1;
}
@media only screen and (min-width: 1024px) {
  .section-form {
    padding: 40px 0;
  }
}
.section-form img {
  width: 100%;
}
.section-form .outline {
  position: relative;
  width: 92%;
  margin: 0 auto;
}
@media only screen and (min-width: 481px) {
  .section-form .outline {
    width: 95%;
  }
}
@media only screen and (min-width: 1100px) {
  .section-form .outline {
    width: 75%;
  }
}
.section-form .title {
  position: relative;
  width: 80%;
  color: #582a13;
  font-size: 140%;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0;
  line-height: 1;
/*   background: url(../images/section_form_title_bg_m.png) 50% 50% no-repeat; */
  background-size: contain;
  padding: 10px 30px;
  margin: 0 auto 20px auto;
}
@media only screen and (min-width: 414px) {
  .section-form .title {
    width: 55%;
  }
}
@media only screen and (min-width: 768px) {
  .section-form .title {
    width: 55%;
    font-size: 190%;
/*     background: url(../images/section_form_title_bg_p.png) 50% 50% no-repeat; */
    background-size: contain;
    padding: 15px 30px;
    margin: 0 auto 30px auto;
  }
}
@media only screen and (min-width: 1024px) {
  .section-form .title {
    font-size: 235%;
    margin: 0 auto 50px auto;
  }
}
@media only screen and (min-width: 1600px) {
  .section-form .title {
    width: 44%;
    font-size: 225%;
  }
}
@media only screen and (min-width: 1920px) {
  .section-form .title {
    width: 36.5%;
  }
}
.section-form .title::before {
  content: '';
  position: absolute;
  top: 25%;
  left: -3%;
  width: 11%;
  height: 60%;
/*   background: url(../images/section_form_title_icon.png) 50% 50% no-repeat; */
  background-size: 54%;
  background-color: #582a13;
  border-radius: 10px;
}
@media only screen and (min-width: 768px) {
  .section-form .title::before {
    left: -6%;
    width: 13%;
  }
}
@media only screen and (min-width: 1024px) {
  .section-form .title::before {
    left: -2%;
    width: 11%;
  }
}
.section-form .title span {
  color: #83a022;
}
.section-form .title dt {
  display: inline;
  position: relative;
}
.section-form .title dd {
  display: inline;
}
@media only screen and (min-width: 481px) {
  .section-form .title dd {
    display: block;
  }
}
.section-form hr {
  display: none;
}
.section-form .red_word {
  color: #fff;
  font-size: 90%;
  line-height: 1.3;
}
@media only screen and (min-width: 768px) {
  .section-form .red_word {
    font-size: 110%;
  }
}
@media only screen and (min-width: 1024px) {
  .section-form .red_word {
    font-size: 130%;
  }
}
.section-form .joinForm {
  background-color: #fff;
  margin: 10px auto;
}
.section-form .send a {
  color: #4a5a8b;
  font-size: 120%;
  font-weight: 600;
  background-color: #fff568;
}
.section-form .send a:hover {
  color: #3b538c;
  background-color: #fff;
}
.section-form .joinForm-tip {
  color: #fff;
  letter-spacing: 0;
}
@media only screen and (min-width: 768px) {
  .section-form .joinForm-tip {
    font-size: 120%;
    letter-spacing: 1px;
  }
}
.section-form .joinForm-tip a {
  color: #83a022;
}

.show {
  display: block;
}

.hide {
  display: none !important;
}



.allcards {
  /* position: absolute; */
  width: 90%;
  /* min-height: 420px; */
  margin: 10% auto; 
  padding: 0;
}

.allcards img{
  width:100%;		
}

.card_text {
 text-align:justify;
 font-size:180%;
 line-height: normal;
 width:75%;
 font-weight:100;
 margin:0 auto;
 color:#ffffff; 
}

.card_text1 {
 text-align:justify;
 font-size:180%;
 line-height: normal;
 width:81%;
 font-weight:100;
 margin:0 auto;
 color:#ffffff; 
}

.card_back_text {
 position:absolute;
 top:8%;
 left:18%;
 color:#000000;
 font-size:170%; 
 line-height:normal;
}

.card_back_text1 {
 position:absolute;
 top:8%;
 left:14%;
 color:#000000;
 font-size:170%; 
 line-height:normal;
}

.money_size {
 font-size:120%;
 text-align: center;
 font-weight: 600;
 margin:0 0 0 -16%;
}

.money_size1{
 font-size:120%;
 color:#ff2400;
 text-align: center;
 font-weight: 600;
 margin:0 0 0 -16%;
}

.money_size2{
 font-size:120%;
 text-align: center;
 font-weight: 600;
 margin:13% 0 0 -16%;
}

.money_size3{
 font-size:120%;
 color:#ff2400;
 text-align: center;
 font-weight: 600;
 margin:1% 0 0 -5%;
}


@media only screen and (min-width: 481px) {
  .allcards {
    display: flex;
    width: 85%;
    min-height: 140px;
    justify-content: space-evenly;
    align-items: flex-start;
  }
  /* 20210730 Start */
  .card_back_text {
	font-size:97%; 
  }
  .card_back_text1 {
	font-size:97%; 
  }
  /* 20210730 End */
}
@media only screen and (min-width: 768px) {
  .allcards {
    width: 100%;
  }
  /* 20210730 Start */
  .card_back_text {
	font-size:100%; 
	top:6%;
	left:15%;	
  }
  .card_back_text1 {
	font-size:100%; 
	top:8%;
	left:10%;	
  }
  /* 20210730 End */
}
@media only screen and (min-width: 1024px) {
  .allcards {
    width: 100%;
    min-height: 145px;
	
  }
  /* 20210730 Start */
  .card_back_text {
	font-size:130%; 
  }
  .card_back_text1 {
	top:8%;
	font-size:130%; 
  }
  .sdfsdf > font {
	font-size:120%;
  }
   /* 20210730 End */
}
@media only screen and (min-width: 1100px) {
  .allcards {
	width: 100% !important;
    min-height: 220px;
	
  }
   /* 20210730 Start */
  .card_back_text {
	font-size:170%; 
  }
  .card_back_text1 {
	font-size:170%; 
  }
   /* 20210730 End */
}
@media only screen and (min-width: 1600px) {
  .allcards {
    min-height: 260px;
  }
   /* 20210802 Start */
  .card_back_text {
	font-size:210%; 
  }
  .card_back_text1 {
	font-size:210%; 
  }
   /* 20210802 End */
}
@media only screen and (min-width: 1920px) {
  .allcards {
    min-height: 350px;
  }
   /* 20210802 Start */
  .card_back_text {
	font-size:250%; 
  }
  .card_back_text1 {
	font-size:250%; 
  }
   /* 20210802 End */
}

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

@media only screen and (min-width: 414px) {
  .card {
    margin: 0 1% 7% 1%;
  }
  
}

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

/* 20210924 start */
.front-side {
  box-sizing: border-box;
  z-index: 3;
}

.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: 3;
}
/* 20210924 end */

.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: 3;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flip .back-side {
  z-index: 3;
  -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%;
  }
}



.back_window {
 background: rgba(0, 0, 0,0.6);
 position: fixed;
 left: 0px;  
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 5; 
 filter: alpha(opacity=60);
}





/* 20210924 start */
.nav-fixed {
  position: fixed;
  top: -100px;
  left: 0;
  width: 100%;
  height: 85px;
  /* background: rgba(52, 53, 63, 0.95); */
  background: #fb997f;
  -webkit-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  box-shadow: 0px 3px 7px rgba(0, 0, 0, 0.35);
  opacity: 0;
  z-index: 5;
}
/* 20210924 end */


.nav-fixed nav {
  position: relative;
  width: 99%;
  justify-content: space-between;
  margin: 0 auto;
  overflow: hidden;
}

.nav-fixed nav:hover {
 color:#ffff00;
}

@media only screen and (min-width: 360px) {
	
 .nav-fixed {
    height: 50px;
  }
}


@media only screen and (min-width: 640px) {
  .nav-fixed nav {
    width: 450px;
  }
  .nav-fixed {
    height: 50px;
  }
}

@media only screen and (min-width: 768px) {
  .nav-fixed nav {
    width: 76%;
    padding: 10px 0;
  }
  .nav-fixed {
    height: 65px;
  }
}
@media only screen and (min-width: 1024px) {
  .nav-fixed nav {
    width: 670px;
  }
  .nav-fixed {
    height: 68px;
  }
}
@media only screen and (min-width: 1100px) {
  .nav-fixed nav {
    width: 820px;
  }
   .nav-fixed {
    height: 85px;
  }
}

@media only screen and (min-width: 1500px) {
  .nav-fixed nav {
    width: 900px;
  }
}

.nav-fixed nav a {
  color: #fff;
  text-decoration: none;
  font-size: 120%;
  margin: 0 0 4px 0;
  padding: 10px 7px 5px 5px;
  font-family: "cwTeXYen", "Century Gothic", "Arial", "Noto Sans TC", "微軟正黑體";
}
@media only screen and (min-width: 481px) {
  .nav-fixed nav a {
    padding: 10px 5px;
  }
}
@media only screen and (min-width: 768px) {
  .nav-fixed nav a {
    font-size: 130%;
  }
}
@media only screen and (min-width: 1100px) {
  .nav-fixed nav a {
    font-size: 190%;
  }
}
@media only screen and (min-width: 1500px) {
  .nav-fixed nav a {
    font-size: 210%;
  }
}

.nav-fixed nav a:hover {
  color: #ffff00;
}


a div :hover {
  color: #ffff00;
}


a.nav-1 :hover {
  color: #ffff00;
  border-color:#ffff00;
}

a.nav-2 :hover {
  color: #ffff00;
  border-color:#ffff00;
}

a.nav-3 :hover {
  color: #ffff00;
  border-color:#ffff00;
}
.show {
  top: 25px;
  opacity: 1 !important;
}

@media only screen and (min-width: 768px) {
  .show {
    top: 15px;
  }
}
@media only screen and (min-width: 1024px) {
  .show {
    top: 20px;
  }
}




.button_pc {
	
 background-color:#fb997f;
 text-align:center;

}

.button_pc div.button1{
 display:inline-block;
 margin: 1% 2% 0 2%;
 cursor:pointer;
}

.button_xsx div.button1 div {
 margin: 0% -9% 0% 7%;
 line-height: 172%;
 font-size:120%;
 height: 30px;
}


.button_xsx div.button_100 div {
 margin: 0% -6% 0% 4%;
 
}

.button1 {
 border: solid 2px #fdddd4;
 width: 41%;
 text-align: center;
 line-height: 137%;
 
 border-radius: 9px;
}

.button1 div {
 display:inline-block;
 color:#ffffff; 
 font-size: 80%;
 margin: 0% -16% 0 2%;
}

.button1 img {
 width: 45%;
 padding: 10% 0 0 0;
 margin: 0 0 0 0%;
}

.button_xsx div.button1 img {
 margin: 0 0 0 -40%;
}

.button_100 {
 width:88%;
 margin: 2% auto !important; 
}

.button_100 img {
 margin: 0 0 0 4%;
}

.button_xsx div.button_100 img {
 margin: 0 0 0 -15%;
}

.button1_1{
 width:100%;
 height: 28px;
}
.button1_2{
 width:100%;
 height: 28px;
}
.button1_3{
 width:100%;
 height: 28px;
 margin: 0% auto !important;
}


.section_2 { 	
 background: url(../images/notebg.png) repeat top center;
 background-size: 350%;
 padding-bottom:1%;
}

.sec2_title { 
 text-align:center;	
 margin:7% auto; 
 width:75%; 
}

.sec2_title img {
 width:100%;	
}

.sec2_mb_girl{
 width:35%;	
 text-align:center;
 margin:10% auto; 
}


.sec2_mb_girl img{
 width:100%;	
 	
}

.box1  {
 position:relative;
}


.box1 div {
 display:inline-block;	
 width: 40%;
 margin: -9% -6% auto 6%;
 padding: 0 3% 0 3%;
/*  cursor:pointer; */
}

.box1 img{
 width:100%;	
 	
}

.box2{
 margin: 13% auto 15% auto;
}

.box1_text {
 position:absolute;	
 top:25%;	
 left: -2%;
 font-size:130%;
 color:#3678b1;
 font-weight:700;
 line-height: 120%;
 text-align: center;
}

.box1_img_hand {
 width:15%;	
 margin:0 auto;
}

.box1_img_hand img {
 width:100%;	
}

.graf {
 width:36% !important;	
}


.box2_text {
 position:absolute;	
 top:25%;	
 right:10%;
 font-size:130%;
 color:#88422b;
 font-weight:700;
 line-height: 120%;
 text-align: center;
}

.box1 div.box2_text {
 width:45%!important;
}

.box3_color {
 color:#88422b;	
}

.box4_color {
 color:#3678b1;
 top:38%; 
}

.section_3 { 	
 background: url(../images/pink_bg.png) repeat top center;
 background-size: 100%;
 padding-bottom:5%;
}

.sec3_title {
 text-align: center;
 margin: 0% auto;
 width: 86%;
 padding: 12% 0 0 0;
}

.sec3_title img {
 width:100%;	
}


.sec3_text_mb {
 display:block;
 text-align: left;
 padding: 3% 4% 0 4%;
 font-size: 125%;
 font-weight:600;
 line-height: normal;
 color:#30302f;
 margin: 3% auto;
}

.graf1 {
 margin:5% auto 0 0!important;
 width:40% !important;	
}

.box3 {
 margin: -3% auto 3% auto;
}

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

.sec3_button {
 position:relative;
 width:80%;
 height:45px;
 text-align:center;
 margin:0 auto 10% auto;
 border:solid 1px #000000;
 border-radius:30px; 
 z-index:3;
 cursor:pointer;
}

.sec3_yellow_button div{
 display:inline-block;

}

.sec3_yellow_button img{
 width:50%;	
 padding:2% 0 0 0;
}

.sec3_yellow_button {
 position:relative;
 width:80%;
 height:45px;
 line-height: 188%;
 font-size:120%;
 font-weight:700;
 border-radius:30px;
 text-align:center;
 color:#c13732;
 background-color:#fcf86a;
 margin: -21% auto 5% 12%;
 z-index:1;
 cursor:pointer;
}

.section_4 { 	
 background: url(../images/notebg.png) repeat top center;
 background-size: 350%;
 padding-bottom:22%;
}

.sec4_text_mb {
 display:block;
 text-align: center;
 padding: 3% 4% 0 4%;
 font-size: 125%;
 font-weight:600;
 line-height: normal;
 color:#30302f;
 margin: 3% auto;		
}

.sec4_load_mb {
 display:block;
 width:100%;	
 text-align:center;
 margin:0 auto; 
}

.sec4_load_mb img{
 width:100%;	
}

.note_mb_top {
  margin:-22% auto;	 
}

.note_mb_text {
 position:absolute;

 width:100%;
 text-align:center;
 margin:17% auto;
 
}

.note_mb_top img{
 width:100%;
}

.note_mb_text  {
 background: url(../images/mb_body.jpg) repeat top center;
 background-size: 100%;
 padding-bottom:183%;
 font-size:160%;
 font-weight:700;
 color: #40538d;
}

.left_hr {
 width: 30px;
 height: 2px;
 background-color: #40538d;
}

.right_hr {
 width: 30px;
 height: 2px;
 background-color: #40538d;
}

.note_mb_text div {
 display:inline-block;	
}

.mb_step {
 position: relative;
 background-color: #e25a41;
 color: #ffffff;
 width: 18%;
 height: 25px;
 font-size: 130%;
 border-radius: 3px;
 margin: 15% auto 0 5%;
 line-height: 119%;
}

.mb_step_title {
 position: absolute;
 color: #000000;
 font-weight:700;
 font-size: 150%;
 left: 26%;
 margin: -9% auto;
}

.mb_step_text {
 position: absolute;
 color: #000000;
 font-size: 110%;
 left: 26%;
 text-align: left;
 line-height: normal;
 margin: -3% auto 1% 0;	
}

.mb_step_dis {
 margin: 9% auto 0 5%;
}
.mb_step_dis1 {
 margin: 15% auto 0 5%;
}

.sec4_button {
 width:75%;
 height: 39px;
 border-radius: 20px;
 margin: 15% auto 10% auto;
}


.sec4_yellow_button {
 width:69%;
 height: 39px;
 border-radius: 20px;
 margin: -20% auto 5% 13%;
 padding: 0 0 0 7%; 
}


.sec4_yellow_button img {
 width: 50%;
 padding: 2% 0 0 0;
 margin: 0 0 0 -82%;

}

.sec5_text_mb {
 display:block;
 text-align: left;
 padding: 3% 0% 0 0%;
 width: 96%;
 font-size: 125%;
 font-weight: 600;
 line-height: normal;
 color: #30302f;
 margin: 3% auto;
}

.sec5_box p{
 display:inline-block;
 font-size:120%;
 font-weight: 600;
 color:#4a5ea1;
 margin: 0 0 2% 1%; 
}

.sec5_box p.sec5_red{
 display:inline-block;
 font-size:120%;
 font-weight: 600;
 color:#c6433d;
 text-align:center;
 margin: 0 0 2% 1%; 
}

.sec5_box div{
 display:inline-block;
}

.mbox1 {
 position: relative;
 font-size: 110%;
 font-weight: 500;
 width: 45%;
 height: 70px;
 line-height: 100%;
 background-color: #4a5ea1;
 color: #ffffff;
 padding: 18px 3px 0px 4px;
 margin: 0 0 0 1%;
 text-align: center;
}

.mbox2 {
 position: relative;
 font-size: 110%;
 font-weight: 500;
 width: 46%;
 height: 70px;
 line-height: 100%;
 background-color: #e25a41;
 color: #ffffff;
 padding: 18px 3px 0px 4px;
 margin: 0 0 0 1%;
 text-align: center;
}

.box_dis {
 margin: 4% auto 2% 1%;
 text-align: center;
}

.box_dis1 {
 margin: 5% auto 0% 1%;
 height: 70px;
 text-align: center;
 top:-8px;
}

.next {
 margin: 3% auto 3% 1%;
}

.sec5_button {
 width: 92%;
 height: 39px;
 border-radius: 20px;
 margin: 4% auto 10% auto;
}

.sec5_yellow_button {
 width: 88%;
 height: 39px;
 border-radius: 20px;
 margin: -20% auto 5% 4%;
 padding: 0 0 0 6%;
}


.sec5_yellow_button img {
 width: 50%;
 padding: 2% 0 0 0;
 margin: 0 0 0 -55%;
}


.section_5 { 	
 background: url(../images/notebg.png) repeat top center;
 background-size: 350%;
 padding-bottom:1%;
}


.section_6 { 	
 background: url(../images/notebg.png) repeat top center;
 background-size: 350%;
 padding-bottom:10%;
}

.sec6_title {
 text-align: center;
 margin: 0% auto;
 width: 95%;
 padding: 23% 0 0 0;
}

.sec6_title img {
 width:100%;	
}

.sec6_bg_01 {
 display:block;
 position:absolute;
 width:35%;
 text-align: right;
 right:0%;
}

.sec6_bg_02 {
 display:block;
 position: absolute;
 width: 35%;
 left: -7%;
 padding: 192% 0 0 0;
 z-index: 0;
}

.sec6_bg_01 img {
 width:100%;	
}

.sec6_bg_02 img {
 width:100%;	
}

/* 榜單Start */
.list_stu01 {
 position:relative;
 width:95%;	
 height:310px;
 margin:10% auto;
 background-color:#f8f7c6;
 border:solid 2px #6272ad;	
 box-shadow:4px 4px #bfd5f2;
}

.height_more_stu01 {
 height:420px !important;	
}

.height_more_stu02 {
 height:495px !important;	
}

.list_stu02 {
 position:relative;
 width:95%;	
 height:330px;
 margin:20% auto;
 background-color:#f8f7c6;
 border:solid 2px #e65d2d;	
 box-shadow:4px 4px #fec2b8;
}

.list_stu01_title {
 position:absolute;
 width:100%;	
 margin: -2% auto; 	
}

.list_stu01_title img {
 width:100%;	
}

.stu01_title_text {
 position:absolute;
 color:#284571;
 top:7%;
 font-size:140%;
 font-weight:900;
 text-align:center;
 padding:0 23% 0 23%;
}

.stu02_title_text {

 padding:0 20% 0 20%;
}

.student_01 {
 position: relative;
 width: 35%;
 top: 22%;
 left: 5%;	
}


.student_01 img {
 width:100%;	
}


.student_01_school {
 position: absolute;
 color:#23406e;
 right: 36%;
 top: 27%;	
 font-size:200%;
 font-weight:700; 
}

.school_target {
 position: absolute;
 background-color: #23406e;
 color: #ffffff;
 width: 58%;
 height: 21px;
 text-align: center;
 font-size: 63%;
 font-weight: 300;
 margin: 9% auto 0 6%;
 padding: 3px 0 0 0;
}

.school_name {
 position: absolute;
 color: #23406e;
 width: 183%;
 font-size: 63%;
 margin: 12% auto 0 75%;
}

.student_01_text {
 position:relative;
 width: 255%;
 left:5%;
 line-height:normal;
 margin:8% auto; 
}

.stamp01 {
 width:145%;	
}

.stamp01 img {
 width:100%;	
}

.button_more {
 position: absolute;
 width: 20%;
 height: 22px;
 right: 0%;
 margin: 9% auto;
 padding: 5px 0 0 12px;
 text-align: center;
 color: #000000;
 background-color: #bfd5f2;
 clip-path: polygon(20% 0%,100% 0%,100% 100%,0% 100%);
 cursor:pointer;
}

.button2_color {
 background-color: #fec3b8;	
}




.win_mb {
 position: absolute;
 left: -13%;
 top:30%; 
}

.win_mb img{
 width:55%;	
}

.mbox1_text {
 position: absolute;
 width: 100%;
 margin: 2% 0 0 0;
 left: 0;
}

.mbox2_text {
 position: absolute;
 margin: -2% 0 0 0%;
 width: 100%;
 left: 4%;
}



.button_mb {
 display:none;	
}

.sec2_mb {
 display:block;	
}

.sec3_mb_box {
 display:block;	
}

.sec5_box_mb {
 display:block;	
}

.list_mb {
 display:block;
}

.end_title_mb {
 display:block;	
}

.sec3_button_mb {
 display:block;	
}

.sec5_button_mb {
 display:block;	
}

.sec2_pc {
 display:none;	
}

.end_title_pc {
 display:none;	
}

.sec3_text_pc {
 display:none;	
}

.sec3_pc_box {
 display:none;	
}

.sec3_button_pc{
 display:none;	
}

.sec4_text_pc {
 display:none;	
}

.sec4_load_pc {
 display:none;	
}

.sec5_box_pc {
 display:none;	
}

.sec5_button_pc {
 display:none;	
}

.sec5_bg_pc {
 display:none;		
}

.list_pc{
 display:none;		
}




.back_window {
 /* background: gray; */
 background: rgba(0, 0, 0,0.6);
 position: fixed;
 left: 0px;  
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 5; 
 filter: alpha(opacity=60);
 
}

.frame_window {
 position:fixed;
 top:10%;
 left:2%;	
 right:7%;	
 background-color:#fce0d1;
 width:95%;	
 height:89%;
 border-radius:15px;
 text-align:center;
 z-index:5; 
 margin:0 auto;
}

.frame_window img{
 width:82%;	
}

.button_close {
 position:fixed;
 top:11%;
 right:4%;
 width:10%;
 height:5%;
 cursor:pointer;
 z-index:9;
}


.button_close img{
	
 width:100%;		
}

.frame_window_title {
 color:#3578b1;
 font-size:180%;
 font-weight:600;
 text-align:center;
 margin:3% auto 1% auto; 
}

.hr_mb {
 width:90%;
 height:3px;
 background-color:#ffffff; 
}


.sec2_mb_button {
 position: relative;
 width: 50%;
 height: 40px;
 text-align: center;
 margin: -1% auto 10% auto;
 border: solid 1px #000000;
 border-radius: 30px;
 z-index: 3;
 cursor: pointer;
}
.sec2_mb_yellow_button {
 position: relative;
 width: 50%;
 height: 40px;
 line-height: 210%;
 font-size: 120%;
 font-weight: 700;
 border-radius: 30px;
 text-align: center;
 color: #c13732;
 background-color: #fcf86a;
 margin: -21% auto 5% 26%;
 z-index: 1;
 cursor: pointer;
}

.sec2_mb_finger img{
 width:50%;	
}
.sec2_mb_yellow_button div{
 display:inline-block;
}

.frame_window_text {
 width:85%;
 color:#000000; 
 font-size:100%;
 font-weight:500;
 text-align:justify;
 margin:2% auto; 
}

.sec2_mb_yellow_button_w2 {
 position: relative;
 width: 60%;
 height: 50px;
 line-height: 192%;
 font-size: 150%;
 font-weight: 700;
 border-radius: 30px;
 text-align: center;
 color: #c13732;
 background-color: #fcf86a;
 margin: -23.5% auto 5% 21.5%;
 z-index: 1;
 cursor: pointer;
}
.sec2_mb_button_w2 {
 position: relative;
 width: 60%;
 height: 50px;
 text-align: center;
 margin: 34% auto 10% auto;
 border: solid 1px #000000;
 border-radius: 30px;
 z-index: 3;
 cursor: pointer;
}
	
.sec2_mb_finger img {
 width: 75% ;
}

.sec2_mb_finger_w2 img {
 width: 65% ;
}

.frame_window2_text {
 width:85%;
 color:#000000; 
 font-size:145%;
 font-weight:500;
 text-align:justify;
 margin:5% auto;
 padding:0 8% 0 8% ;
}
.frame_window_title2 {
 margin:5% auto 0 auto;	
 font-size: 180%;
}

.frame_window_w2 {

 height: 65%;
}

.mb_step b font {
 font-size: x-large;
 vertical-align: top;
}

.mbox2 div.mbox2_w {
 margin:2% 0 0 0 ;	
}

@media only screen and (min-width: 375px) {
  .sec5_box p {
    margin: 0 0 2% 3%;
  }	
   .list_stu01 {
    height: 320px;
  }
  .list_stu02 {
    height: 340px;
  }
  .button_100 img {
    margin: 0 0 0 4%;
  }
  .mb_step b font {
    font-size: x-large;
    vertical-align: top;
  }
}

@media only screen and (min-width: 414px) {

  .sec3_yellow_button {
    margin: -19% auto 5% 12%;
  }
  .sec4_yellow_button {
    margin: -19% auto 5% 13%;
  }
  .sec5_yellow_button {
    margin: -19% auto 5% 4%;
  }
  .sec5_box p {
    margin: 0 5% 0% 4%;
  }
  .list_stu01 {
    height: 345px;
  }
  .list_stu02 {
    height: 345px;
  }
  .sec6_bg_02 {
    padding: 183% 0 0 0;
  }
  .stu01_title_text {
    top: 14%;
    padding: 0 27% 0 27%;
  }
  .stu02_title_text {
    padding: 0 24% 0 24%;
  }
  
  .sec3_text_mb {
    font-size: 145%;
  }
  
  .sec4_text_mb {
    font-size: 145%;
  }
  
  .sec3_yellow_button {
    line-height: 177%;
    font-size: 130%;
  }
  .sec5_text_mb {
    font-size: 144%;
  }
  
  .win_mb {
    left: -10%;
  }
  .button_100 img {
    margin: 0 0 0 4%;
  }
  .button1 img {
    width: 40%;
    padding: 10% 0 0 0;
    margin: 0 0 0 9%;
  }
  
  .mb_step_title {
    font-size: 160%;
	
  }
  .mb_step_text {
    font-size: 130%;
	margin: -3% auto 1% 0;
  }
  .mb_step {
    line-height:144%;
    height: 30px;
  }
  .mb_step b font {
    font-size: x-large;
    vertical-align: top;
  }
}

@media only screen and (min-width: 481px) {
	.sec2_mb {
	 display:none;	
	}
	.button_pc {
	 display:none;	
	}
	.sec3_text_mb {
	 display:none;
	}
	.sec3_mb_box {
	 display:none;	
	}
	
	#card-1 div.front-side img{
	 content: url(../images/card_pc_001.png);
	}
	#card-1 div.back-side img{
	 content: url(../images/card_pc_001_ov.png);
	}
	
	#card-2 div.front-side img{
	 content: url(../images/card_pc_002.png);
	}
	#card-2 div.back-side img{
	 content: url(../images/card_pc_002_ov.png);
	}
	
	#card-3 div.front-side img{
	 content: url(../images/card_pc_003.png);
	}
	#card-3 div.back-side img{
	 content: url(../images/card_pc_003_ov.png);
	}
	.section_5_title img{
	 content: url(../images/section_04_title.png);	
	}
	
	.sec4_load_mb {
     display:none;
	}
	
	.sec4_text_mb {
	 display:none;	
	}
	
	.section_3 {
     background-size: auto;
	}
	.section_4 {
     background-size: auto;
	 padding-bottom: 2%;
	}
	.section_5 {
     background-size: auto;
	}
	.section_6 {
     background-size: auto;
	}
	
	.sec5_text_mb {
	 display:none;
	}
	.sec5_box_mb {
	 display:none;	
	}
	
	.sec6_bg_01 {
	 display:none;
	}

	.sec6_bg_02 {
	 display:none;
	}
	.list_mb {
	 display:none;
	}
	.section-form {
     position: relative;
	}
	.end_title_mb {
	 display:none;	
	}
	.sec3_button_mb {
	 display:none;	
	}
	.sec5_button_mb {
	 display:none;	
	}
	
	
	.sec2_pc {
	 display:block;	
	}
	.end_title_mb {
	 display:none;	
	}
	.end_title_pc {
	 display:block;	
	}
	
	
	.sec3_text_pc {
	 display:block;	
	}
	
	.sec3_pc_box {
	 display:block;		
	}
	
	.sec3_button_pc{
	 display:block;
	 margin: 0 0 3% 0;	 
	}
	
	.sec4_text_pc {
	 display:block;	
	}
	
	.sec4_load_pc {
	 display:block;		
	}
	.sec5_box_pc {
	 position:relative;
	 display:block;	
	 z-index:3;
	}
	.sec5_button_pc {
	 display:block;	
	}
	
	.sec5_bg_pc {
	 display:block;		
	}	
	
	.list_pc{
	 display:block;		
	}
	
	
}


@media only screen and (min-width: 640px) {
	
	.button_mb div{
	 display:inline-block;
     margin: 1% 1% 1% 1%;
	 font-size: 120%;
	 cursor:pointer;
	}
	.button1 {
     width: 30%;
	 text-align:end;
	}
	.button1 img {
     width: 55%;
     padding: 10% 0 0 0;
     margin: 0 0 0 -45%;
	}
	
	.button1 div{
	 margin: 0% 0% 0% -9%;	
	}
	
	.button_mb {
	 display:block;	
	 width: 90%;
     text-align: center;
     margin: 0 auto;
	}
	.section_1 {
	 background-color: #fb997f;	
	}
	.button_hand{
	 position: relative;
     left: -3%;
	}
	
	
	.sec2_title {
     width: 36%;
	 margin: 4% auto;
	}
	.section_2 {
     background-size: 100%;
	}
	
	.card {
     width: calc((100% - 10%) / 3);
	}
	.allcards {
     width: 60% !important;
	}
	
	.sec3_title {
     text-align: center;
     margin: 0% auto;
     width: 36%;
     padding: 4% 0 0 0;
	}
	.sec6_title {
     text-align: center;
     margin: 0% auto;
     width: 50%;
     padding: 10% 0 0 0;
	}
	
	.sec2_pc_box {
	 text-align:center;	
	}
	
	.box1_pc div {
	 display:inline-block;	
	}
	.box2_pc div {
	 display:inline-block;	
	}
	
	.box2_pc {
	 margin: 5% auto;	
	}
	
	.box1_pc div.graf img {
	 width:55%;	
	}
	.box2_pc div.graf img {
	 width:55%;	
	}
	
	.sec2_pc_girl {
     width: 18%;
     text-align: center;
     margin: -7% auto -7% auto;
	}
	
	.sec2_pc_girl img{
	 width:100%;	
	}
	
	
	
	.box1_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 height: 100px;
	 font-size:120%;
	 color:#3678b1;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box1_img_hand {
     width: 30%;
	 margin: 3% auto;
	}
	.box3_img_hand {
     width: 35%;
	 margin: 3% auto;
	}
	.box4_img_hand {
     width: 42%;
	 margin: 3% auto;
	}
	
	.box2_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -5% !important;
	 font-size:120%;
	 height: 100px;
	 color:#88422b;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box3_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -6%!important;
	 font-size:120%;
	 color:#88422b;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box4_pc_text {
	 position:absolute;	
	 padding: 6% 0 0 0%;
     margin: 0 0 0 -1%!important;
	 font-size:120%;
	 color:#3678b1;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.sec3_text_pc{
	 font-size:101%;
	 font-weight: 600;
	 text-align:left;
	 margin:3% auto 0 0;
	 padding: 0 15.5% 0 15.5%;
	}
	.sec3_button_pc {
     margin: -4% 0 5% 0;
	}
	.graf1 {
     margin: 3% auto 0 0!important;
     width: 15% !important;
	}
	
	.box1 div {
     padding: 0 2% 0 2%;
	}
	
	.allcards {
     margin: 3% auto 9% auto ;
	}
	
	.sec3_button_1 {
     position: relative;
     width: 38%;
     height: 40px;
     text-align: center;
     margin: 0 auto;
     border: solid 1px #000000;
     border-radius: 35px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 {
     position: relative;
     width: 38%;
     height: 40px;
     line-height: 240%;
     font-size: 101%;
     font-weight: 700;
     border-radius: 35px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -5.5% auto;
	 left:0.5%;
     z-index: 1;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 div {
     display: inline-block;
	}
	
	.sec3_yellow_button_1 img {
     width: 60%;
     padding: 2% 0 0 0;
	}
	
	.sec4_text_pc {
     display: block;
     text-align: center;
     padding: 0% 4% 3% 4%;
     font-size: 101%;
     font-weight: 600;
     line-height: normal;
     color: #30302f;
     margin: 3% auto 0 auto;
    }
	
	.sec4_load_pc {
	 text-align:center;
	 margin:0 auto;	
	}
	
	
	.sec4_load_pc img{
	 width:70%;	
	}
	
	
	.happy_pc {
	 position: relative;
     width: 22%;
     margin: 0 auto -11% auto;
	 padding: 0 0 0 48%;
     overflow: hidden;
     z-index: 1;
	}
	.happy_pc img{
	 width:100%; 
	}
	.note_pc_top img#section_03_note {
	 position:relative;	
	 width:81%;
	 height:500px;
	 z-index:3;
	}	
	.note_pc_top {
	 margin: -9% 0 0 0;
	}
	.bk_ground {
	 position: absolute;
	 width:100%;
	 height:400px;
	 background-color:#9fb5fc;
	 margin: -70% 0 0 0;
	}
	.note_pc_text {
	 position: absolute;
	 width:100%;
     /* padding-bottom: 183%; */
     font-size: 120%;
     font-weight: 700;
     color: #40538d;
	 margin:10% auto;
	 text-align:center;
	 z-index:4;
	}
	
	.note_pc_text div {
     display: inline-block;
	}
	
	.left_hr {
     width: 50px;
	 margin: 12% auto;
	}
	.right_hr {
     width: 50px;
	 margin: 12% auto;
	}
	
	.pc_step {
     position: absolute;
     background-color: #e25a41;
     color: #ffffff;
     width: 11%;
     height: 31px;
     font-size: 101%;
     border-radius: 10px;
     left: 8%;
     margin: 14% auto 0 5%;
     line-height: 205%;
     z-index: 4;
	}
	.pc_step b{
	 vertical-align:middle !important;
	}
	
	
	
	.pc_step_title {
     position: absolute;
     color: #000000;
     font-weight: 700;
     font-size: 101%;
     left: 21%;
     margin: 15% auto 0 5%;
	 z-index: 4;
	}
	.pc_step_text {
	 display:contents;
	 font-weight: 500;
     font-size: 100%;
	 width:61%;
	 text-align:left;
	 vertical-align:middle;
	 /* left: 29%; */
	 margin: 0% auto 0 0%;
	 z-index: 4;
	}
	
	.pc_step1 {
	 margin:20% auto 0 5%;	
	}
	.pc_step1_text{
	 margin:21% auto 0 5%;		
	}
	
	.pc_step2 {
	 margin:26% auto 0 5%;	
	}
	.pc_step2_text{
	 margin:27% auto 0 5%;		
	}
	
	.pc_step3 {
	 margin:32% auto 0 5%;	
	}
	.pc_step3_text{
	 margin:33% auto 0 5%;		
	}
	
	.pc_step4 {
	 margin:38% auto 0 5%;	
	}
	.pc_step4_text{
	 margin:39% auto 0 5%;		
	}
	
	.pc_step5 {
	 margin:44% auto 0 5%;	
	}
	.pc_step5_text{
	 margin:45% auto 0 5%;		
	}
	
	.pc_step6 {
	 margin:50% auto 0 5%;	
	}
	.pc_step6_text{
	 margin:50% auto 0 0.5%;		
	}
	.pc_step6_text div{
	 display:inline-block;
	}
	
	.pc_step7 {
	 margin:56% auto 0 5%;	
	}
	.pc_step7_text{
	 margin:57.1% auto 0 5%;		
	}
	
	
	.pc_step_button {
     position: absolute;
     margin: 63% auto;
     padding: 0 35% 0 35%;
     text-align: center;
     z-index: 4;
	}
	
	.step_button1 {
     width: 110%;
	 border-radius: 30px;
	}
	
	.y_button {
     margin:-19% auto 0 2%;
	}
	
	.section_5_title {
	 width:55%;	
	}
	
	.box1_pc {
	 margin:1% auto 0 auto;
	 text-align:center;	
	}
	
	.box1_pc_dis {
	 margin:1% auto ;
	}
	
	.pc_step b font {
     font-size: xx-large!important;
	}
	.box1_pc div{
	 display:inline-block;
	 margin:0 0.3% 0 0.3%;
	}
	
	.box1_left {
	 width:40%;
     height:75px;
	
	 background-color:#4a5ea1;
	}
	
	.box1_left_title {
	 width:37%;
     font-size:140%;
	 color:#4f61a4;
	 font-weight:700;
	}
	
	.box1_right {
	 width:40%;
     height:75px;
	 background-color:#e25a41;
	}
	
	.box1_right_title {
	 width:37%;
	 font-size:140%;
	 color:#dd3e38;
	 font-weight:700;
	}
	
	.box1_left_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:101%;
     margin: 7% auto!important;	
	}
	
	.box1_left_text_3 {
	 position: relative;
     top: -11%;
	 line-height: 100%;
	 color:#ffffff;
	 font-size:101%;
     margin: 11% auto 2% auto!important;	
	}

	.box1_right_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:101%;
     margin: 4.5% auto!important;	
	}
	
	.sec5_people1 {
	 position:absolute;
	 left:-6%;
	 margin:-5% auto!important;	
	}
	.sec5_people2 {
	 position:absolute;
     text-align: right;
     top: 78%;
	 right:0%;
	 margin:-6% auto!important;	
	}
	
	.sec5_people1 img{
	 width:50%;
	}
	.sec5_people2 img{
	 width:50%;
	}
	
	.sec5_button_1 {
	 width:44%;	
	 line-height: 190%;
	}
	
	.sec5_button_1_dis {
	 margin:4% auto;
	}
	
	.sec5_bg2 {
	 position:absolute;
	 margin:-13% auto;
	 z-index:1;
	}
/* 	20210923 Linda start */
	.sec5_bg1 img {
	 position:absolute;
	 right:0;
	 margin:-17% auto;
	 z-index:1;
	}

	.sec5_bg2 img{
	 width:40%;
	}
	.sec5_bg1 img{
	 width:50%;
	}
	
	.list_pc {
	 text-align:center;
	 margin:0 auto;
	}
	
	.list_pc div{
	 display:inline-block;
	 margin:5% 1% 0 0%;
	}
	
	.list_stu01 {
     position: relative;
     width: 40%;
     height: 225px;
     margin: 10% auto;
     background-color: #f8f7c6;
     border: solid 2px #6272ad;
     box-shadow: 4px 4px #bfd5f2;
	}
	
	.list_stu02 {
     position: relative;
     width: 40%;
     height: 225px;
     margin: 20% auto;
     background-color: #f8f7c6;
     border: solid 2px #e65d2d;
     box-shadow: 4px 4px #fec2b8;
	}
	
	.list_stu01_title {
	 position:relative;
	 margin: -2% auto !important;
	}
	
	.stu01_title_text {
     top: -13%;
     font-size: 101%;
	 padding:0 25% 0 25%;
	}
	
	.stu02_title_text {
     top: -13%;
     font-size: 101%;
	 padding:0 22% 0 22%;
	}
	
	.student_01 {
     position: absolute;
	 top: 17%;
	}
	
	.student_02 {
     position: absolute;
	}
	
	.school_target {
     position: relative;
	 width: 40%;
     height: 17px;
	}
	
	.school_name {
     text-align: left;
     margin: 6% auto 0 8% !important;
	}
	
	.student_01_school {
     font-size: 140%;
	 right:31%;
	 top: 21%;
	}
	
	.pc_student_01_text {
     position: relative;
     width: 280%;
     font-size: 82%;
     text-align: justify;
     left: -10%;
     line-height: normal;
     margin: 8% auto;
	}
	
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 9% auto !important;
	 height: 11px;
	 right: 5%;
	}
	
	.button_more2 {
     padding: 5px 0 8px 12px;
     margin: 4% auto !important;
	}
	
	.sec6_pc_bg_01 {
	 position:absolute;
	 text-align: right;
     right:0%;
     margin:-11% auto !important;
	}
	
	.sec6_pc_bg_02 {
	 position:absolute;
     left:-13%;
     margin: 12% auto !important;	 
	}
	
	.sec6_pc_bg_01 img{
	 width:35%
	}
	
	.sec6_pc_bg_02 img{
	 width:35%
	}
	
	.pc_height_more_stu01{
	 height:350px;	
	}
	
	
	.pc_height_more_stu01 div.student_01{
	 top:11%;
	}
	
	.pc_height_more_stu01 div.student_01_school{
	 right: 31%;
	 top: 15%;
	}
	
	.win_pc {
     position: relative;
     left: -21%;
     top: -11%;
	 margin: 0 -17% 0 0 !important;
	}
	.win_pc1 {
     position: relative;
     left: -14%;
     top: -7%;
     margin: 0 -19% 0 0 !important;
	}
	.win_pc2 {
     position: relative;
     left: -18%;
     top: -23%;
     margin: 0 -24% 0 0 !important;
	}
	
	.win_pc img{
	 width:60%;
	}
	.win_pc1 img{
	 width:60%;
	}
	.win_pc2 img{
	 width:60%;
	}
	
	
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 35px;
     line-height: 145%;
     font-size: 130%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -15.5% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 35px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	
	.sec2_mb_finger img {
     width: 50% ;
	}
	
	
	.frame_window_title {
     font-size: 180%;
	 margin: 2% auto 1% auto;
	}
	
	.frame_window_text {
	 font-size: 120%;
	 padding: 0 10% 0 10%;
	}
	
	.button_close {
	 top: 10%;
     width: 5%;
	}
	
	.frame_window {
     top: 9%;
     height: 89%;
	}
	.frame_window img {
     width: 80%;
	}
	
	
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 35%;
     height: 50px;
     line-height: 197%;
     font-size: 150%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -17.5% auto 5% 33.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 35%;
     height: 50px;
     text-align: center;
     margin: 13% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 75% ;
	}
	
	.sec2_mb_finger_w2 img {
     width: 65% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:140%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 10% 0 10% ;
	}
	.frame_window_title2 {
	 margin:5% auto 0 auto;	
	 font-size: 170%;
	}
	
	
	.button1_1{
	 width:100%;
	 
	}
	.button1_2{
	 width:100%;
	 
	}
	.button1_3{
	 width:100%;
	 margin: 0% auto !important;
	}
	
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:62% 0 0 0;
	}
}
@media only screen and (min-width: 650px) {
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:42% 0 0 0;
	}
}

@media only screen and (min-width: 720px) {
	
	.button_mb div{
	 display:inline-block;
     margin: 1% 1% 1% 1%;
	 font-size: 120%;
	 cursor:pointer;
	}
	
	.button_xs div.button1 div{
	 margin: 0% 6% 0% -13%;
	 line-height:160%;
	 height:35px;
	}
	
	.button1 {
     width: 30%;
	 text-align:end;
	}
	.button1 img {
     width: 52%;
     padding: 10% 0 0 0;
     margin: 0 0 0 -45%;
	}
	
	.button1 div{
	 margin: 0% 0% 0% -9%;	
	}
	
	.button_mb {
	 display:block;	
	 width: 90%;
     text-align: center;
     margin: 0 auto;
	}
	.section_1 {
	 background-color: #fb997f;	
	}
	.button_hand{
	 position: relative;
     left: -3%;
	}
	
	
	.sec2_title {
     width: 36%;
	 margin: 4% auto;
	}
	.section_2 {
     background-size: 100%;
	}
	
	.card {
     width: calc((100% - 10%) / 3);
	}
	.allcards {
     width: 60% !important;
	}
	
	.sec3_title {
     text-align: center;
     margin: 0% auto;
     width: 36%;
     padding: 4% 0 0 0;
	}
	.sec6_title {
     text-align: center;
     margin: 0% auto;
     width: 50%;
     padding: 10% 0 0 0;
	}
	
	.sec2_pc_box {
	 text-align:center;	
	}
	
	.box1_pc div {
	 display:inline-block;	
	}
	.box2_pc div {
	 display:inline-block;	
	}
	
	.box2_pc {
	 margin: 5% auto;	
	}
	
	.box1_pc div.graf img {
	 width:55%;	
	}
	.box2_pc div.graf img {
	 width:55%;	
	}
	
	.sec2_pc_girl {
     width: 18%;
     text-align: center;
     margin: -7% auto -7% auto;
	}
	
	.sec2_pc_girl img{
	 width:100%;	
	}
	
	
	
	.box1_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 height: 100px;
	 font-size:120%;
	 color:#3678b1;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box1_img_hand {
     width: 30%;
	 margin: 3% auto;
	}
	.box3_img_hand {
     width: 35%;
	 margin: 3% auto;
	}
	.box4_img_hand {
     width: 42%;
	 margin: 3% auto;
	}
	
	.box2_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 font-size:120%;
	 height: 100px;
	 color:#88422b;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box3_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -4%!important;
	 font-size:120%;
	 color:#88422b;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box4_pc_text {
	 position:absolute;	
	 padding: 6% 0 0 0%;
     margin: 0 0 0 1%!important;
	 font-size:120%;
	 color:#3678b1;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.sec3_text_pc{
	 font-size:101%;
	 font-weight: 600;
	 text-align:left;
	 margin:3% auto 0 0;
	 padding: 0 15.5% 0 15.5%;
	}
	.sec3_button_pc {
     margin: -4% 0 5% 0;
	}
	.graf1 {
     margin: 3% auto 0 0!important;
     width: 15% !important;
	}
	
	.box1 div {
     padding: 0 2% 0 2%;
	}
	
	.allcards {
     margin: 3% auto 9% auto ;
	}
	
	.sec3_button_1 {
     position: relative;
     width: 38%;
     height: 40px;
     text-align: center;
     margin: 0 auto;
     border: solid 1px #000000;
     border-radius: 35px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 {
     position: relative;
     width: 38%;
     height: 40px;
     line-height: 240%;
     font-size: 101%;
     font-weight: 700;
     border-radius: 35px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -4.9% auto;
	 left:0.5%;
     z-index: 1;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 div {
     display: inline-block;
	}
	
	.sec3_yellow_button_1 img {
     width: 60%;
     padding: 2% 0 0 0;
	}
	
	.sec4_text_pc {
     display: block;
     text-align: center;
     padding: 0% 4% 3% 4%;
     font-size: 101%;
     font-weight: 600;
     line-height: normal;
     color: #30302f;
     margin: 3% auto 0 auto;
    }
	
	.sec4_load_pc {
	 text-align:center;
	 margin:0 auto;	
	}
	
	
	.sec4_load_pc img{
	 width:70%;	
	}
	
	
	.happy_pc {
	 position: relative;
     width: 22%;
     margin: 0 auto -11% auto;
	 padding: 0 0 0 48%;
     overflow: hidden;
     z-index: 1;
	}
	.happy_pc img{
	 width:100%; 
	}
	.note_pc_top img#section_03_note {
	 position:relative;	
	 width:81%;
	 height:550px;
	 z-index:3;
	}	
	.note_pc_top {
	 margin: -9% 0 0 0;
	}
	.bk_ground {
	 position: absolute;
	 width:100%;
	 height:460px;
	 background-color:#9fb5fc;
	 margin: -70% 0 0 0;
	}
	.note_pc_text {
	 position: absolute;
	 width:100%;
     /* padding-bottom: 183%; */
     font-size: 120%;
     font-weight: 700;
     color: #40538d;
	 margin:10% auto;
	 text-align:center;
	 z-index:4;
	}
	
	.note_pc_text div {
     display: inline-block;
	}
	
	.left_hr {
     width: 50px;
	 margin: 12% auto;
	}
	.right_hr {
     width: 50px;
	 margin: 12% auto;
	}
	
	.pc_step {
     position: absolute;
     background-color: #e25a41;
     color: #ffffff;
     width: 11%;
     height: 31px;
     font-size: 101%;
     border-radius: 10px;
     left: 8%;
     margin: 14% auto 0 5%;
     line-height: 205%;
     z-index: 4;
	}
	.pc_step b{
	 vertical-align:middle !important;
	}
	
	
	
	.pc_step_title {
     position: absolute;
     color: #000000;
     font-weight: 700;
     font-size: 101%;
     left: 21%;
     margin: 15% auto 0 5%;
	 z-index: 4;
	}
	.pc_step_text {
	 display:contents;
	 font-weight: 500;
     font-size: 100%;
	 width:61%;
	 text-align:left;
	 vertical-align:middle;
	 /* left: 29%; */
	 margin: 0% auto 0 0%;
	 z-index: 4;
	}
	
	.pc_step1 {
	 margin:20% auto 0 5%;	
	}
	.pc_step1_text{
	 margin:21% auto 0 5%;		
	}
	
	.pc_step2 {
	 margin:26% auto 0 5%;	
	}
	.pc_step2_text{
	 margin:27% auto 0 5%;		
	}
	
	.pc_step3 {
	 margin:32% auto 0 5%;	
	}
	.pc_step3_text{
	 margin:33% auto 0 5%;		
	}
	
	.pc_step4 {
	 margin:38% auto 0 5%;	
	}
	.pc_step4_text{
	 margin:39% auto 0 5%;		
	}
	
	.pc_step5 {
	 margin:44% auto 0 5%;	
	}
	.pc_step5_text{
	 margin:45% auto 0 5%;		
	}
	
	.pc_step6 {
	 margin:50% auto 0 5%;	
	}
	.pc_step6_text{
	 margin:50% auto 0 0.5%;		
	}
	.pc_step6_text div{
	 display:inline-block;
	}
	
	.pc_step7 {
	 margin:56% auto 0 5%;	
	}
	.pc_step7_text{
	 margin:57.1% auto 0 5%;		
	}
	
	
	.pc_step_button {
     position: absolute;
     margin: 63% auto;
     padding: 0 35% 0 35%;
     text-align: center;
     z-index: 4;
	}
	
	.step_button1 {
     width: 110%;
	 border-radius: 30px;
	}
	
	.y_button {
     margin:-19% auto 0 2%;
	}
	
	.section_5_title {
	 width:55%;	
	}
	
	.box1_pc {
	 margin:1% auto 0 auto;
	 text-align:center;	
	}
	
	.box1_pc_dis {
	 margin:1% auto ;
	}
	
	.pc_step b font {
     font-size: xx-large!important;
	}
	.box1_pc div{
	 display:inline-block;
	 margin:0 0.3% 0 0.3%;
	}
	
	.box1_left {
	 width:40%;
     height:75px;
	
	 background-color:#4a5ea1;
	}
	
	.box1_left_title {
	 width:37%;
     font-size:140%;
	 color:#4f61a4;
	 font-weight:700;
	}
	
	.box1_right {
	 width:40%;
     height:75px;
	 background-color:#e25a41;
	}
	
	.box1_right_title {
	 width:37%;
	 font-size:140%;
	 color:#dd3e38;
	 font-weight:700;
	}
	
	.box1_left_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:101%;
     margin: 7% auto!important;	
	}
	
	.box1_left_text_3 {
	 position: relative;
     top: -11%;
	 line-height: 100%;
	 color:#ffffff;
	 font-size:101%;
     margin: 11% auto 2% auto!important;	
	}

	.box1_right_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:101%;
     margin: 4.5% auto!important;	
	}
	
	.sec5_people1 {
	 position:absolute;
	 left:-2%;
	 margin:-5% auto!important;	
	}
	.sec5_people2 {
	 position:absolute;
	 right:-4%;
	 margin:-5% auto!important;	
	}
	
	.sec5_people1 img{
	 width:50%;
	}
	.sec5_people2 img{
	 width:50%;
	}
	
	.sec5_button_1 {
	 width:44%;	
	 line-height: 190%;
	}
	
	.sec5_button_1_dis {
	 margin:4% auto;
	}
	
	.sec5_bg2 {
	 position:absolute;
	 margin:-13% auto;
	 z-index:1;
	}
/* 	20210923 Linda start */
	.sec5_bg1 img{
	 position:absolute;
	 right:0;
	 margin:-17% auto;
	 z-index:1;
	}
/* 20210923 Linda end */
	.sec5_bg2 img{
	 width:40%;
	}
	.sec5_bg1 img{
	 width:50%;
	}
	
	.list_pc {
	 text-align:center;
	 margin:0 auto;
	}
	
	.list_pc div{
	 display:inline-block;
	 margin:5% 1% 0 0%;
	}
	
	.list_stu01 {
     position: relative;
     width: 40%;
     height: 250px;
     margin: 10% auto;
     background-color: #f8f7c6;
     border: solid 2px #6272ad;
     box-shadow: 4px 4px #bfd5f2;
	}
	
	.list_stu02 {
     position: relative;
     width: 40%;
     height: 250px;
     margin: 20% auto;
     background-color: #f8f7c6;
     border: solid 2px #e65d2d;
     box-shadow: 4px 4px #fec2b8;
	}
	
	.list_stu01_title {
	 position:relative;
	 margin: -2% auto !important;
	}
	
	.stu01_title_text {
     top: -13%;
     font-size: 101%;
	 padding:0 25% 0 25%;
	}
	
	.stu02_title_text {
     top: -13%;
     font-size: 101%;
	 padding:0 22% 0 22%;
	}
	
	.student_01 {
     position: absolute;
	 top: 17%;
	}
	
	.student_02 {
     position: absolute;
	}
	
	.school_target {
     position: relative;
	 width: 40%;
     height: 17px;
	}
	
	.school_name {
     text-align: left;
     margin: 6% auto 0 8% !important;
	}
	
	.student_01_school {
     font-size: 140%;
	 right:31%;
	 top: 21%;
	}
	
	.pc_student_01_text {
     position: relative;
     width: 280%;
     font-size: 90%;
     text-align: justify;
     left: -10%;
     line-height: normal;
     margin: 8% auto;
	}
	
	
	
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 9% auto !important;
	 height: 11px;
	 right: 5%;
	}
	
	.button_more2 {
     padding: 5px 0 8px 12px;
     margin: 10% auto !important;
	}
	
	.sec6_pc_bg_01 {
	 position:absolute;
	 text-align: right;
     right:0%;
     margin:-11% auto !important;
	}
	
	.sec6_pc_bg_02 {
	 position:absolute;
     left:-13%;
     margin: 12% auto !important;	 
	}
	
	.sec6_pc_bg_01 img{
	 width:35%
	}
	
	.sec6_pc_bg_02 img{
	 width:35%
	}
	
	.pc_height_more_stu01{
	 height:370px;	
	}
	
	
	.pc_height_more_stu01 div.student_01{
	 top:11%;
	}
	
	.pc_height_more_stu01 div.student_01_school{
	 right: 31%;
	 top: 15%;
	}
	
	.win_pc {
     position: relative;
     left: -21%;
     top: -11%;
	 margin: 0 -17% 0 0 !important;
	}
	.win_pc1 {
     position: relative;
     left: -14%;
     top: -7%;
     margin: 0 -19% 0 0 !important;
	}
	.win_pc2 {
     position: relative;
     left: -18%;
     top: -23%;
     margin: 0 -24% 0 0 !important;
	}
	
	.win_pc img{
	 width:60%;
	}
	.win_pc1 img{
	 width:60%;
	}
	.win_pc2 img{
	 width:60%;
	}
	
	
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 45px;
     line-height: 145%;
     font-size: 170%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 45px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 70%;
	}
	
	
	.frame_window_title {
     font-size: 200%;
	 margin: 2% auto 1% auto;
	}
	
	.frame_window_text {
	 font-size: 130%;
	 padding: 0 12% 0 12%;
	}
	
	.button_close {
	 top: 8%;
     width: 5%;
	}
	
	.frame_window {
     top: 7%;
     height: 92%;
	}
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 35%;
     height: 50px;
     line-height: 197%;
     font-size: 150%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16.5% auto 5% 33.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 35%;
     height: 50px;
     text-align: center;
     margin: 13% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 75% ;
	}
	
	.sec2_mb_finger_w2 img {
     width: 65% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:150%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 10% 0 10% ;
	}
	.frame_window_title2 {
	 margin:5% auto 0 auto;	
	 font-size: 180%;
	}
	
	
	.button1_1{
	 width:100%;
	 
	}
	.button1_2{
	 width:100%;
	 
	}
	.button1_3{
	 width:100%;
	 margin: 0% auto !important;
	}
	
		
}

@media only screen and (min-width: 768px) {
	
	.button_mb div{
	 display:inline-block;
     margin: 1% 1% 1% 1%;
	 font-size: 120%;
	 cursor:pointer;
	}
	
	.button_xs div.button1 div{
	 margin: 0% -2% 0% 0%;
	 line-height:160%;
	 height:35px;
	}
	
	.button1 {
     width: 30%;
	 text-align:end;
	}
	.button1 img {
     width: 55%;
     padding: 10% 0 0 0;
     margin: 0 0 0 -45%;
	}
	
	.button1 div{
	 margin: 0% 0% 0% -2%;	
	}
	
	.button_mb {
	 display:block;	
	 width: 80%;
     text-align: center;
     margin: 0 auto;
	}
	.section_1 {
	 background-color: #fb997f;	
	}
	.button_hand{
	 position: relative;
     left: -8%;
	}
	
	
	.sec2_title {
     width: 36%;
	 margin: 4% auto;
	}
	.section_2 {
     background-size: 100%;
	}
	
	.card {
     width: calc((100% - 10%) / 3);
	}
	.allcards {
     width: 60% !important;
	}
	
	.sec3_title {
     text-align: center;
     margin: 0% auto;
     width: 36%;
     padding: 4% 0 0 0;
	}
	.sec6_title {
     text-align: center;
     margin: 0% auto;
     width: 50%;
     padding: 10% 0 0 0;
	}
	
	.sec2_pc_box {
	 text-align:center;	
	}
	
	.box1_pc div {
	 display:inline-block;	
	}
	.box2_pc div {
	 display:inline-block;	
	}
	
	.box2_pc {
	 margin: 5% auto;	
	}
	
	.box1_pc div.graf img {
	 width:45%;	
	}
	.box2_pc div.graf img {
	 width:45%;	
	}
	
	.sec2_pc_girl {
     width: 18%;
     text-align: center;
     margin: -7% auto -7% auto;
	}
	
	.sec2_pc_girl img{
	 width:100%;	
	}
	
	
	
	.box1_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -2% !important;
	 height: 100px;
	 font-size:120%;
	 color:#3678b1;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box1_img_hand {
     width: 30%;
	 margin: 3% auto;
	}
	.box3_img_hand {
     width: 35%;
	 margin: 3% auto;
	}
	.box4_img_hand {
     width: 42%;
	 margin: 3% auto;
	}
	
	.box2_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 font-size:120%;
	 height: 100px;
	 color:#88422b;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box3_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -5%!important;
	 font-size:120%;
	 color:#88422b;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box4_pc_text {
	 position:absolute;	
	 padding: 6% 0 0 0%;
     margin: 0 0 0 -1%!important;
	 font-size:120%;
	 color:#3678b1;
	 height: 100px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.sec3_text_pc{
	 font-size:120%;
	 font-weight: 600;
	 text-align:left;
	 margin:3% auto 0 0;
	 padding: 0 15.5% 0 15.5%;
	}
	.sec3_button_pc {
     margin: 7% 0 5% 0;
	}
	.graf1 {
     margin: 3% auto 0 0!important;
     width: 15% !important;
	}
	
	.box1 div {
     padding: 0 2% 0 2%;
	}
	
	.allcards {
     margin: 3% auto 9% auto ;
	}
	
	.sec3_button_1 {
     position: relative;
     width: 38%;
     height: 50px;
     text-align: center;
     margin: 0 auto;
     border: solid 1px #000000;
     border-radius: 35px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 {
     position: relative;
     width: 38%;
     height: 50px;
     line-height: 240%;
     font-size: 120%;
     font-weight: 700;
     border-radius: 35px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -5.5% auto;
	 left:0.5%;
     z-index: 1;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 div {
     display: inline-block;
	}
	
	.sec3_yellow_button_1 img {
     width: 60%;
     padding: 2% 0 0 0;
	}
	
	.sec4_text_pc {
     display: block;
     text-align: center;
     padding: 0% 4% 3% 4%;
     font-size: 120%;
     font-weight: 600;
     line-height: normal;
     color: #30302f;
     margin: 3% auto 0 auto;
    }
	
	.sec4_load_pc {
	 text-align:center;
	 margin:0 auto;	
	}
	
	
	.sec4_load_pc img{
	 width:70%;	
	}
	
	
	.happy_pc {
	 position: relative;
     width: 22%;
     margin: 0 auto -11% auto;
	 padding: 0 0 0 48%;
     overflow: hidden;
     z-index: 1;
	}
	.happy_pc img{
	 width:100%; 
	}
	.note_pc_top img#section_03_note {
	 position:relative;	
	 width:81%;
	 height:590px;
	 z-index:3;
	}	
	.note_pc_top {
	 margin: -9% 0 0 0;
	}
	.bk_ground {
	 position: absolute;
	 width:100%;
	 height:470px;
	 background-color:#9fb5fc;
	 margin: -70% 0 0 0;
	}
	.note_pc_text {
	 position: absolute;
	 width:100%;
     /* padding-bottom: 183%; */
     font-size: 170%;
     font-weight: 700;
     color: #40538d;
	 margin:8% auto;
	 text-align:center;
	 z-index:4;
	}
	
	.note_pc_text div {
     display: inline-block;
	}
	
	.left_hr {
     width: 50px;
	 margin: 12% auto;
	}
	.right_hr {
     width: 50px;
	 margin: 12% auto;
	}
	
	.pc_step {
     position: absolute;
     background-color: #e25a41;
     color: #ffffff;
     width: 11%;
     height: 38px;
     font-size: 120%;
     border-radius: 10px;
     left: 8%;
     margin: 14% auto 0 5%;
     line-height: 205%;
     z-index: 4;
	}
	.pc_step b{
	 vertical-align:middle !important;
	}
	
	
	
	.pc_step_title {
     position: absolute;
     color: #000000;
     font-weight: 700;
     font-size: 120%;
     left: 21%;
     margin: 15% auto 0 5%;
	 z-index: 4;
	}
	.pc_step_text {
	 display:contents;
	 font-weight: 500;
     font-size: 100%;
	 width:61%;
	 text-align:left;
	 vertical-align:middle;
	 /* left: 29%; */
	 margin: 3% auto 0 0%;
	 z-index: 4;
	}
	
	.pc_step1 {
	 margin:20% auto 0 5%;	
	}
	.pc_step1_text{
	 margin:21% auto 0 5%;		
	}
	
	.pc_step2 {
	 margin:26% auto 0 5%;	
	}
	.pc_step2_text{
	 margin:27% auto 0 5%;		
	}
	
	.pc_step3 {
	 margin:32% auto 0 5%;	
	}
	.pc_step3_text{
	 margin:33% auto 0 5%;		
	}
	
	.pc_step4 {
	 margin:38% auto 0 5%;	
	}
	.pc_step4_text{
	 margin:39% auto 0 5%;		
	}
	
	.pc_step5 {
	 margin:44% auto 0 5%;	
	}
	.pc_step5_text{
	 margin:45% auto 0 5%;		
	}
	
	.pc_step6 {
	 margin:50% auto 0 5%;	
	}
	.pc_step6_text{
	 margin:49% auto 0 0.6%;		
	}
	.pc_step6_text div{
	 display:inline-block;
	}
	
	.pc_step7 {
	 margin:56% auto 0 5%;	
	}
	.pc_step7_text{
	 margin:57.1% auto 0 5%;		
	}
	
	
	.pc_step_button {
     position: absolute;
     margin: 63% auto;
     padding: 0 35% 0 35%;
     text-align: center;
     z-index: 4;
	}
	
	.step_button1 {
     width: 110%;
	 border-radius: 30px;
	}
	
	.y_button {
     margin:-19% auto 0 2%;
	}
	
	.section_5_title {
	 width:55%;	
	}
	
	.box1_pc {
	 margin:1% auto 0 auto;
	 text-align:center;	
	}
	
	.box1_pc_dis {
	 margin:1% auto ;
	}
	
	.pc_step b font {
     font-size: xx-large!important;
	}
	.box1_pc div{
	 display:inline-block;
	 margin:0 0.3% 0 0.3%;
	}
	
	.box1_left {
	 width:40%;
     height:90px;
	
	 background-color:#4a5ea1;
	}
	
	.box1_left_title {
	 width:37%;
     font-size:170%;
	 color:#4f61a4;
	 font-weight:700;
	}
	
	.box1_right {
	 width:40%;
     height:90px;
	 background-color:#e25a41;
	}
	
	.box1_right_title {
	 width:37%;
	 font-size:170%;
	 color:#dd3e38;
	 font-weight:700;
	}
	
	.box1_left_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:120%;
     margin: 7% auto!important;	
	}
	
	.box1_left_text_3 {
	 position: relative;
     top: -11%;
	 line-height: 100%;
	 color:#ffffff;
	 font-size:120%;
     margin: 11% auto 2% auto!important;	
	}

	.box1_right_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:120%;
     margin: 4.5% auto!important;	
	}
	
	.sec5_people1 {
	 position:absolute;
	 left:-3%;
	 margin:-7% auto!important;	
	}
	.sec5_people2 {
	 position:absolute;
     text-align: right;
	 right:0%;
	 margin:-6% auto!important;	
	}
	
	.sec5_people1 img{
	 width:70%;
	}
	.sec5_people2 img{
	 width:65%;
	}
	
	.sec5_button_1 {
	 width:44%;	
	 line-height: 190%;
	}
	
	.sec5_button_1_dis {
	 margin:4% auto;
	}
	
	.sec5_bg2 {
	 position:absolute;
	 margin:-13% auto;
	 z-index:1;
	}
/* 	20210923 Linda start */
	.sec5_bg1 img {
	 position:absolute;
	 right:0;
	 margin:-17% auto;
	 z-index:1;
	}
/* 20210923 Linda end */
	.sec5_bg2 img{
	 width:40%;
	}
	.sec5_bg1 img{
	 width:60%;
	}
	
	.list_pc {
	 text-align:center;
	 margin:0 auto;
	}
	
	.list_pc div{
	 display:inline-block;
	 margin:5% 1% 0 0%;
	}
	
	.list_stu01 {
     position: relative;
     width: 40%;
     height: 265px;
     margin: 10% auto;
     background-color: #f8f7c6;
     border: solid 2px #6272ad;
     box-shadow: 4px 4px #bfd5f2;
	}
	
	.list_stu02 {
     position: relative;
     width: 40%;
     height: 265px;
     margin: 20% auto;
     background-color: #f8f7c6;
     border: solid 2px #e65d2d;
     box-shadow: 4px 4px #fec2b8;
	}
	
	.list_stu01_title {
	 position:relative;
	 margin: -2% auto !important;
	}
	
	.stu01_title_text {
     top: -13%;
     font-size: 120%;
	 padding:0 25% 0 25%;
	}
	
	.stu02_title_text {
     top: -13%;
     font-size: 120%;
	 padding:0 22% 0 22%;
	}
	
	.student_01 {
     position: absolute;
	 top: 17%;
	}
	
	.student_02 {
     position: absolute;
	}
	
	.school_target {
     position: relative;
	 width: 40%;
     height: 21px;
	}
	
	.school_name {
     text-align: left;
     margin: 6% auto 0 8% !important;
	}
	
	.student_01_school {
     font-size: 170%;
	 right:31%;
	 top: 21%;
	}
	
	.pc_student_01_text {
     position: relative;
     width: 265%;
	 font-size:90%;
	 text-align:justify;
     left: -1%;
     line-height: normal;
     margin: 8% auto;
	}
	
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 9% auto !important;
	 height: 14px;
	 right: 5%;
	}
	
	.button_more2 {
     padding: 5px 0 8px 12px;
     margin: 4% auto !important;
	}
	
	.sec6_pc_bg_01 {
	 position:absolute;
	 text-align: right;
     right:0%;
     margin:-9% auto !important;
	}
	
	.sec6_pc_bg_02 {
	 position:absolute;
     left:-9%;
     margin: 2% auto !important;	 
	}
	
	.sec6_pc_bg_01 img{
	 width:50%
	}
	
	.sec6_pc_bg_02 img{
	 width:50%
	}
	
	.pc_height_more_stu01{
	 height:395px;	
	}
	
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:52% 0 0 0;
	}
	
	
	.pc_height_more_stu01 div.student_01{
	 top:11%;
	}
	
	.pc_height_more_stu01 div.student_01_school{
	 right: 31%;
	 top: 15%;
	}
	
	.win_pc {
     position: relative;
     left: -21%;
     top: -11%;
	 margin: 0 -17% 0 0 !important;
	}
	.win_pc1 {
     position: relative;
     left: -14%;
     top: -7%;
     margin: 0 -19% 0 0 !important;
	}
	.win_pc2 {
     position: relative;
     left: -18%;
     top: -23%;
     margin: 0 -24% 0 0 !important;
	}
	
	.win_pc img{
	 width:60%;
	}
	.win_pc1 img{
	 width:60%;
	}
	.win_pc2 img{
	 width:60%;
	}
	
	
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 50px;
     line-height: 145%;
     font-size: 170%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 50px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 70%;
	}
	
	
	.frame_window_title {
     font-size: 230%;
	}
	
	.frame_window_text {
	 font-size: 150%;
	 padding: 0 8% 0 8%;
	}
	
	.button_close {
	 top: 14%;
     width: 5%;
	}
	
	.frame_window {
     top: 13%;
     height: 43%;
	}
	
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 30%;
     height: 50px;
     line-height: 145%;
     font-size: 170%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 30%;
     height: 50px;
     text-align: center;
     margin: 18% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 75% ;
	}
	
	.sec2_mb_finger_w2 img {
     width: 90% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:160%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 10% 0 10% ;
	}
	.frame_window_title2 {
	 margin:5% auto 0 auto;	
	 font-size: 210%;
	}
	
	
	.button1_1{
	 width:100%;
	 
	}
	.button1_2{
	 width:100%;
	 
	}
	.button1_3{
	 width:100%;
	 margin: 0% auto !important;
	}
	
	
	
	.button1_1{
	 width:180px;
	 height: 35px;
	 font-size:120%;
	}
	.button1_2{
	 width:180px;
	 height: 35px;
	 font-size:120%;
	}
	.button1_3{
	 width:180px;
	 height: 35px;
	 font-size:120%;
	 margin: 0% auto !important;
	}
	
}

@media only screen and (min-width: 1024px) {
	
	.button_mb div{
	 display:inline-block;
     margin: 1% 1% 1% 1%;
	 font-size: 128%;
	 cursor:pointer;
	}
	
	.button_xs div.button1 div{
	 margin: 0% 0% 0% 0%;
	 line-height:130%;
	 height:35px;
	}
	
	.button1 {
     width: 30%;
	 text-align:end;
	}
	.button1 img {
     width: 50%;
     padding: 0 0 0 0;
     margin: 0 0 0 -45%;
	}
	
	.button1 div{
	 margin: 0% 6% 0% -7%;	
	}
	
	.button_mb {
	 display:block;	
	 width: 70%;
     text-align: center;
     margin: 0 auto;
	}
	.section_1 {
	 background-color: #fb997f;	
	}
	.button_hand{
	 position: relative;
     left: -10%;
	}
	
	
	.sec2_title {
     width: 36%;
	 margin: 4% auto;
	}
	.section_2 {
     background-size: 100%;
	}
	
	.card {
     width: calc((100% - 10%) / 3);
	}
	.allcards {
     width: 60% !important;
	}
	
	.sec3_title {
     text-align: center;
     margin: 0% auto;
     width: 36%;
     padding: 4% 0 0 0;
	}
	.sec6_title {
     text-align: center;
     margin: 0% auto;
     width: 50%;
     padding: 10% 0 0 0;
	}
	
	.sec2_pc_box {
	 text-align:center;	
	}
	
	.box1_pc div {
	 display:inline-block;	
	}
	.box2_pc div {
	 display:inline-block;	
	}
	
	.box2_pc {
	 margin: 5% auto;	
	}
	
	.box1_pc div.graf img {
	 width:45%;	
	}
	.box2_pc div.graf img {
	 width:45%;	
	}
	
	.sec2_pc_girl {
     width: 18%;
     text-align: center;
     margin: -7% auto -7% auto;
	}
	
	.sec2_pc_girl img{
	 width:100%;	
	}
	
	
	/*Start*/
	.box1_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -2% !important;
	 height: 130px;
	 font-size:160%;
	 color:#3678b1;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box1_img_hand {
     width: 30%;
	 margin: 3% auto;
	}
	.box3_img_hand {
     width: 35%;
	 margin: 3% auto;
	}
	.box4_img_hand {
     width: 42%;
	 margin: 3% auto;
	}
	
	.box2_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 font-size:160%;
	 height: 130px;
	 color:#88422b;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box3_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -5%!important;
	 font-size:160%;
	 color:#88422b;
	 height: 130px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box4_pc_text {
	 position:absolute;	
	 padding: 6% 0 0 0%;
     margin: 0 0 0 -1%!important;
	 font-size:160%;
	 color:#3678b1;
	 height: 130px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.sec3_text_pc{
	 font-size:157%;
	 font-weight: 600;
	 text-align:left;
	 margin:3% auto 0 0;
	 padding: 0 15.5% 0 15.5%;
	}
	.sec3_button_pc {
     margin: 13% 0 3% 0;
	}
	.graf1 {
     margin: 3% auto 0 0!important;
     width: 15% !important;
	}
	
	.box1 div {
     padding: 0 2% 0 2%;
	}
	
	.allcards {
     margin: 3% auto 9% auto ;
	}
	
	.sec3_button_1 {
     position: relative;
     width: 35%;
     height: 55px;
     text-align: center;
     margin: 0 auto;
     border: solid 1px #000000;
     border-radius: 35px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 {
     position: relative;
     width: 35%;
     height: 55px;
     line-height: 185%;
     font-size: 160%;
     font-weight: 700;
     border-radius: 35px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -4.9% auto;
	 left:0.5%;
     z-index: 1;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 div {
     display: inline-block;
	}
	
	.sec3_yellow_button_1 img {
     width: 70%;
     padding: 2% 0 0 0;
	}
	
	.sec4_text_pc {
     display: block;
     text-align: center;
     padding: 0% 4% 3% 4%;
     font-size: 160%;
     font-weight: 600;
     line-height: normal;
     color: #30302f;
     margin: 3% auto 0 auto;
    }
	
	.sec4_load_pc {
	 text-align:center;
	 margin:0 auto;	
	}
	
	
	.sec4_load_pc img{
	 width:70%;	
	}
	
	/*20210909*/
	.happy_pc {
	 position: relative;
     width: 22%;
     margin: 0 auto -11% auto;
	 padding: 0 0 0 48%;
     overflow: hidden;
     z-index: 1;
	}
	.happy_pc img{
	 width:100%; 
	}
	.note_pc_top img#section_03_note {
	 position:relative;	
	 width:81%;
	 height: auto;
	 z-index:3;
	}	
	.note_pc_top {
	 margin: -9% 0 0 0;
	}
	.bk_ground {
	 position: absolute;
	 width:100%;
	 height:510px;
	 background-color:#9fb5fc;
	 margin: -56% 0 0 0;
	}
	.note_pc_text {
	 position: absolute;
	 width:100%;
     /* padding-bottom: 183%; */
     font-size: 200%;
     font-weight: 700;
     color: #40538d;
	 margin:8% auto;
	 text-align:center;
	 z-index:4;
	}
	
	.note_pc_text div {
     display: inline-block;
	}
	
	.left_hr {
     width: 50px;
	 margin: 12% auto;
	}
	.right_hr {
     width: 50px;
	 margin: 12% auto;
	}
	
	.pc_step {
     position: absolute;
     background-color: #e25a41;
     color: #ffffff;
     width: 8%;
     height: 40px;
     font-size: 160%;
     border-radius: 10px;
     left: 12%;
     margin: 12% auto 0 5%;
     line-height: 150%;
     z-index: 4;
	}
	.pc_step b{
	 vertical-align:middle !important;
	}
	
	
	
	.pc_step_title {
     position: absolute;
     color: #000000;
     font-weight: 700;
     font-size: 160%;
     left: 21%;
     margin: 12.5% auto 0 5%;
	 z-index: 4;
	}
	.pc_step_text {
	 display:contents;
	 font-weight: 500;
     font-size: 100%;
	 width:61%;
	 text-align:left;
	 vertical-align:middle;
	 /* left: 29%; */
	 margin: 3% auto 0 1%;
	 z-index: 4;
	}
	
	.pc_step1 {
	 margin:17% auto 0 5%;	
	}
	.pc_step1_text{
	 margin:17.5% auto 0 5%;		
	}
	
	.pc_step2 {
	 margin:22% auto 0 5%;	
	}
	.pc_step2_text{
	 margin:22.5% auto 0 5%;		
	}
	
	.pc_step3 {
	 margin:27% auto 0 5%;	
	}
	.pc_step3_text{
	 margin:27.5% auto 0 5%;		
	}
	
	.pc_step4 {
	 margin:32% auto 0 5%;	
	}
	.pc_step4_text{
	 margin:32.5% auto 0 5%;		
	}
	
	.pc_step5 {
	 margin:37% auto 0 5%;	
	}
	.pc_step5_text{
	 margin:37.5% auto 0 5%;		
	}
	
	.pc_step6 {
	 margin:42% auto 0 5%;	
	}
	.pc_step6_text{
	 margin:40.4% auto 0 1%;		
	}
	.pc_step6_text div{
	 display:inline-block;
	}
	
	.pc_step7 {
	 margin:47% auto 0 5%;	
	}
	.pc_step7_text{
	 margin:47.5% auto 0 5%;		
	}
	
	
	.pc_step_button {
     position: absolute;
     margin: 53% auto;
     padding: 0 35% 0 35%;
     text-align: center;
     z-index: 4;
	}
	
	.step_button1 {
     width: 110%;
	 border-radius: 30px;
	}
	
	.y_button {
     margin:-16% auto 0 2%;
	}
	
	.section_5_title {
	 width:55%;	
	}
	
	.box1_pc {
	 margin:1% auto 0 auto;
	 text-align:center;	
	}
	
	.box1_pc_dis {
	 margin:1% auto ;
	}
	
	
	.box1_pc div{
	 display:inline-block;
	 margin:0 0.3% 0 0.3%;
	}
	
	.box1_left {
	 width:40%;
     height:110px;
	
	 background-color:#4a5ea1;
	}
	
	.box1_left_title {
	 width:37%;
     font-size:210%;
	 color:#4f61a4;
	 font-weight:700;
	}
	
	.box1_right {
	 width:40%;
     height:110px;
	 background-color:#e25a41;
	}
	
	.box1_right_title {
	 width:37%;
	 font-size:210%;
	 color:#dd3e38;
	 font-weight:700;
	}
	
	.box1_left_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:160%;
     margin: 7% auto!important;	
	}
	
	.box1_left_text_3 {
	 position: relative;
     top: -11%;
	 line-height: 100%;
	 color:#ffffff;
	 font-size:180%;
     margin: 8% auto 2% auto!important;	
	}

	.box1_right_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:160%;
     margin: 2% auto!important;	
	}
	
	.sec5_people1 {
	 position:absolute;
	 left:0%;
	 margin:-4% auto!important;	
	}
	.sec5_people2 {
	 position:absolute;
	 right:1%;
	 margin:-5% auto!important;	
	}
	
	.sec5_people1 img{
	 width:70%;
	}
	.sec5_people2 img{
	 width:70%;
	}
	
	.sec5_button_1 {
	 width:43%;	
	 line-height: 190%;
	}
	
	.sec5_button_1_dis {
	 margin:4% auto;
	}
	
	.sec5_bg2 {
	 position:absolute;
	 margin:-13% auto;
	 z-index:1;
	}
/* 	20210923 Linda start */
	.sec5_bg1 img {
	 position:absolute;
	 right:0;
	 margin:-16% auto;
	 z-index:1;
	}
/* 20210923 Linda end */
	.sec5_bg2 img{
	 width:55%;
	}
	.sec5_bg1 img{
	 width:55%;
	}
	
	.list_pc {
	 text-align:center;
	 margin:0 auto;
	}
	
	.list_pc div{
	 display:inline-block;
	 margin:5% 1% 0 0%;
	}
	
	.list_stu01 {
     position: relative;
     width: 40%;
     height: 350px;
     margin: 10% auto;
     background-color: #f8f7c6;
     border: solid 2px #6272ad;
     box-shadow: 4px 4px #bfd5f2;
	}
	
	.list_stu02 {
     position: relative;
     width: 40%;
     height: 350px;
     margin: 20% auto;
     background-color: #f8f7c6;
     border: solid 2px #e65d2d;
     box-shadow: 4px 4px #fec2b8;
	}
	
	.list_stu01_title {
	 position:relative;
	 margin: -2% auto !important;
	}
	
	.stu01_title_text {
     top: -13%;
     font-size: 157%;
	 padding:0 25% 0 25%;
	}
	
	.stu02_title_text {
     top: -13%;
     font-size: 157%;
	 padding:0 22% 0 22%;
	}
	
	.student_01 {
     position: absolute;
	 top: 17%;
	}
	
	.student_02 {
     position: absolute;
	}
	
	.school_target {
     position: relative;
	 width: 40%;
     height: 28px;
	}
	
	.school_name {
     text-align: left;
     margin: 6% auto 0 8% !important;
	}
	
	.student_01_school {
     font-size: 230%;
	 right:31%;
	 top: 21%;
	}
	
	.pc_student_01_text {
     position: relative;
     width: 270%;
	 font-size:118%;
	 text-align:justify;
     left: -1%;
     line-height: normal;
     margin: 8% auto;
	}
	
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 9% auto !important;
	 height: 20px;
	 right: 5%;
	}
	
	.button_more2 {
     padding: 5px 0 8px 12px;
     margin: 10% auto !important;
	}
	
	.sec6_pc_bg_01 {
	 position:absolute;
	 text-align: right;
     right:0%;
     margin:-9% auto !important;
	}
	
	.sec6_pc_bg_02 {
	 position:absolute;
     left:-2%;	
	}
	
	.sec6_pc_bg_01 img{
	 width:65%
	}
	
	.sec6_pc_bg_02 img{
	 width:65%
	}
	
	.pc_height_more_stu01{
	 height:520px;	
	}
	
	
	.pc_height_more_stu01 div.student_01{
	 top:11%;
	}
	
	.pc_height_more_stu01 div.student_01_school{
	 right: 31%;
	 top: 15%;
	}
	
	.win_pc {
     position: relative;
     left: -12%;
     top: -11%;
	 margin: 0 -8% 0 0 !important;
	}
	.win_pc1 {
     position: relative;
     left: -1%;
     top: -15%;
     margin: 0 -2% 0 0 !important;
	}
	.win_pc2 {
     position: relative;
     left: -5%;
     top: -28%;
     margin: 0 -6% 0 0 !important;
	}
	
	.win_pc img {
     width: 90%;
	}
	.win_pc1 img {
     width: 90%;
	}
	.win_pc2 img {
     width: 90%;
	}
	/*20210909*/
	/*20210910*/
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 65px;
     line-height: 145%;
     font-size: 230%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 65px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 90%;
	}
	
	
	.frame_window_title {
     font-size: 250%;
	}
	
	.frame_window_text {
	 font-size: 200%;
	 padding: 0 8% 0 8%;
	}
	
	.button_close {
	 top: 14%;
     width: 5%;
	}
	
	.frame_window {
     top: 13%;
     height: 72%;
	}
	/*20210910*/
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 30%;
     height: 65px;
     line-height: 145%;
     font-size: 210%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -16% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 30%;
     height: 65px;
     text-align: center;
     margin: 18% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 75% ;
	}
	
	.sec2_mb_finger_w2 img {
     width: 90% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:210%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 12% 0 12% ;
	}
	.frame_window_title2 {
	 margin:5% auto 0 auto;	
	}
	
	.button1_1{
	 width:100%;
	 
	}
	.button1_2{
	 width:100%;
	 
	}
	.button1_3{
	 width:100%;
	 margin: 0% auto !important;
	}
	/*End*/
	
	.button1_1{
	 width:210px;
	 height: 35px;
	 font-size:120%;
	}
	.button1_2{
	 width:210px;
	 height: 35px;
	 font-size:120%;
	}
	.button1_3{
	 width:210px;
	 height: 35px;
	 font-size:120%;
	 margin: 0% auto !important;
	}
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:42% 0 0 0;
	}
}


@media only screen and (min-width: 1100px) {
	
	.button_mb div{
	 display:inline-block;
     margin: 1% 1% 1% 1%;
	 font-size: 140%;
	 cursor:pointer;
	}
	
	.button_xs div.button1 div{
	 margin: 0% -7% 0% 5%;
	 line-height:150%;
	 height:45px;
	}
	
	.button1 {
     width: 30%;
	 text-align:center;
	}
	.button1 img {
     width: 85%;
     padding: 10% 0 0 0;
     margin: 0 0 0 -45%;
	}
	
	.button1 div{
	 margin: 0% -9% 0% 6%;	
	}
	
	.button_mb {
	 display:block;	
	 width: 65%;
     text-align: center;
     margin: 0 auto;
	}
	.section_1 {
	 background-color: #fb997f;	
	}
	.button_hand{
	 position: relative;
     left: 4%;
	}
	.sec2_w1 {
	 margin: -1% auto 10% auto !important;	
	}
	
	.sec2_title {
     width: 36%;
	 margin: 4% auto;
	}
	.section_2 {
     background-size: 100%;
	}
	
	.card {
     width: calc((100% - 10%) / 3);
	}
	.allcards {
     width: 60% !important;
	}
	
	.sec3_title {
     text-align: center;
     margin: 0% auto;
     width: 36%;
     padding: 4% 0 0 0;
	}
	.sec6_title {
     text-align: center;
     margin: 0% auto;
     width: 55%;
     padding: 5% 0 0 0;
	}
	
	.sec2_pc_box {
	 text-align:center;	
	}
	
	.box1_pc div {
	 display:inline-block;	
	}
	.box2_pc div {
	 display:inline-block;	
	}
	
	.box2_pc {
	 margin: 5% auto;	
	}
	
	.box1_pc div.graf img {
	 width:45%;	
	 
	}
	.box2_pc div.graf img {
	 width:45%;	
	}
	
	.sec2_pc_girl {
     width: 18%;
     text-align: center;
     margin: -7% auto -7% auto;
	}
	
	.sec2_pc_girl img{
	 width:100%;	
	}
	
	
	/*新增Start*/
	
	.box1_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -1% !important;
	 height: 150px;
	 font-size:190%;
	 color:#3678b1;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box1_img_hand {
     width: 30%;
	 margin: 3% auto;
	}
	.box3_img_hand {
     width: 35%;
	 margin: 3% auto;
	}
	.box4_img_hand {
     width: 42%;
	 margin: 3% auto;
	}
	
	.box2_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3% !important;
	 font-size:190%;
	 height: 160px;
	 color:#88422b;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box3_pc_text {
	 position:absolute;	
	 padding: 4% 0 0 0%;
     margin: 0 0 0 -3.5%!important;
	 font-size:190%;
	 color:#88422b;
	 height: 150px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.box4_pc_text {
	 position:absolute;	
	 padding: 6% 0 0 0%;
     margin: 0 0 0 0% !important;
	 font-size:190%;
	 color:#3678b1;
	 height: 150px;
	 font-weight:900;
	 line-height: 120%;
	 text-align: center;
	 cursor:pointer;
	}
	
	.sec3_text_pc{
	 font-size:179%;
	 font-weight: 600;
	 text-align:left;
	 margin:3% auto 0 0;
	 padding: 0 19% 0 19%;
	}
	
	.graf1 {
     margin: 3% auto 0 0!important;
     width: 15% !important;
	}
	
	.box1 div {
     padding: 0 2% 0 2%;
	}
	
	.allcards {
     margin: 3% auto -4% auto ;
	}
	
	.sec3_button_1 {
     position: relative;
     width: 35%;
     height: 65px;
     text-align: center;
     margin: 0 auto;
     border: solid 1px #000000;
     border-radius: 35px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 {
     position: relative;
     width: 35%;
     height: 65px;
     line-height: 167%;
     font-size: 190%;
     font-weight: 700;
     border-radius: 35px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -4.3% auto;
	 left:0.5%;
     z-index: 1;
     cursor: pointer;
	}
	
	.sec3_yellow_button_1 div {
     display: inline-block;
	}
	
	.sec3_yellow_button_1 img {
     width: 85%;
     padding: 2% 0 0 0;
	}
	
	.sec4_text_pc {
     display: block;
     text-align: center;
     padding: 0% 4% 2% 4%;
     font-size: 190%;
     font-weight: 600;
     line-height: normal;
     color: #30302f;
     margin: 3% auto 0 auto;
    }
	
	.sec4_load_pc {
	 text-align:center;
	 margin:0 auto;	
	}
	
	
	.sec4_load_pc img{
	 width:70%;	
	}
	
	/*20210909*/
	.happy_pc {
	 position: relative;
     width: 22%;
     margin: 0 auto -11% auto;
	 padding: 0 0 0 48%;
     overflow: hidden;
     z-index: 1;
	}
	.happy_pc img{
	 width:100%; 
	}
	.note_pc_top img#section_03_note {
	 position:relative;	
	 width:75%;
	 height:870px;
	 z-index:3;
	}	
	.note_pc_top {
	 margin: -9% 0 0 0;
	}
	.bk_ground {
	 position: absolute;
	 width:100%;
	 height:710px;
	 background-color:#9fb5fc;
	 margin: -58% 0 0 0;
	}
	.note_pc_text {
	 position: absolute;
	 width:100%;
     /* padding-bottom: 183%; */
     font-size: 230%;
     font-weight: 700;
     color: #40538d;
	 margin:8% auto;
	 text-align:center;
	 z-index:4;
	}
	
	.note_pc_text div {
     display: inline-block;
	}
	
	.left_hr {
     width: 70px;
	 margin: 12% auto;
	}
	.right_hr {
     width: 70px;
	 margin: 12% auto;
	}
	
	.pc_step {
     position: absolute;
     background-color: #e25a41;
     color: #ffffff;
     width: 8%;
     height: 46px;
     font-size: 190%;
     border-radius: 10px;
     left: 14%;
     margin: 12% auto 0 5%;
     line-height: 170%;
     z-index: 4;
	}
	.pc_step b{
	 vertical-align:middle !important;
	}
	.pc_step b font{
	 font-size: xxx-large!important;
	}
	
	.pc_step_title {
     position: absolute;
     color: #000000;
     font-weight: 700;
     font-size: 190%;
     left: 23%;
     margin: 12.5% auto 0 5%;
	 z-index: 4;
	}
	.pc_step_text {
	 display:contents;
	 font-weight: 500;
     font-size: 100%;
	 width:61%;
	 text-align:left;
	 vertical-align:middle;
	 /* left: 29%; */
	 margin: 2.6% auto 0 0%;
	 z-index: 4;
	}
	
	.pc_step1 {
	 margin:17% auto 0 5%;	
	}
	.pc_step1_text{
	 margin:17.5% auto 0 5%;		
	}
	
	.pc_step2 {
	 margin:22% auto 0 5%;	
	}
	.pc_step2_text{
	 margin:22.5% auto 0 5%;		
	}
	
	.pc_step3 {
	 margin:27% auto 0 5%;	
	}
	.pc_step3_text{
	 margin:27.5% auto 0 5%;		
	}
	
	.pc_step4 {
	 margin:32% auto 0 5%;	
	}
	.pc_step4_text{
	 margin:32.5% auto 0 5%;		
	}
	
	.pc_step5 {
	 margin:37% auto 0 5%;	
	}
	.pc_step5_text{
	 margin:37.5% auto 0 5%;		
	}
	
	.pc_step6 {
	 margin:42% auto 0 5%;	
	}
	.pc_step6_text{
	 margin:41.8% auto 0 1.1%;		
	}
	.pc_step6_text div{
	 display:inline-block;
	}
	
	.pc_step7 {
	 margin:47% auto 0 5%;	
	}
	.pc_step7_text{
	 margin:47.5% auto 0 5%;		
	}
	
	
	.pc_step_button {
     position: absolute;
     margin: 53% auto;
     padding: 0 35% 0 35%;
     text-align: center;
     z-index: 4;
	}
	
	.step_button1 {
     width: 110%;
	 border-radius: 30px;
	}
	
	.y_button {
     margin:-17% auto 0 2%;
	}
	
	.section_5_title {
	 width:55%;	
	}
	
	.box1_pc {
	 margin:1% auto 0 auto;
	 text-align:center;	
	}
	
	.box1_pc_dis {
	 margin:1% auto ;
	}
	
	
	.box1_pc div{
	 display:inline-block;
	 margin:0 0.3% 0 0.3%;
	}
	
	.box1_left {
	 width:37%;
     height:110px;
	
	 background-color:#4a5ea1;
	}
	
	.box1_left_title {
	 width:37%;
     font-size:230%;
	 color:#4f61a4;
	 font-weight:700;
	}
	
	.box1_right {
	 width:37%;
     height:110px;
	 background-color:#e25a41;
	}
	
	.box1_right_title {
	 width:37%;
	 font-size:230%;
	 color:#dd3e38;
	 font-weight:700;
	}
	
	.box1_left_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:180%;
     margin: 5% auto!important;	
	}
	
	.box1_left_text_3 {
	 position: relative;
     top: -11%;
	 line-height: 100%;
	 color:#ffffff;
	 font-size:180%;
     margin: 8% auto 2% auto!important;	
	}

	.box1_right_text {
	 line-height: 110%;
	 color:#ffffff;
	 font-size:180%;
     margin: 2% auto!important;	
	}
	
	.sec5_people1 {
	 position:absolute;
	 left:6%;
	 margin:-7% auto!important;	
	}
	.sec5_people2 {
	 position:absolute;
	 right:3.5%;
	 margin:-7% auto!important;	
	}
	
	.sec5_people1 img{
	 width:90%;
	}
	.sec5_people2 img{
	 width:90%;
	}
	
	.sec5_button_1 {
	 width:40%;	
	 line-height: 190%;
	}
	
	.sec5_button_1_dis {
	 margin:4% auto;
	}
	
	.sec5_bg2 {
	 position:absolute;
	 margin:-13% auto;
	 z-index:1;
	}
/* 	20210923 Linda start*/
	.sec5_bg1 img{
	 position:absolute;
	 right:0;
	 margin:-16% auto;
	 z-index:1;
	}
/* 	20210923 Linda end*/

	.sec5_bg2 img{
	 width:70%;
	}
	.sec5_bg1 img{
	 width:35%;
	}
	
	.list_pc {
	 text-align:center;
	 margin:0 auto;
	}
	
	.list_pc div{
	 display:inline-block;
	 margin:5% 1% 0 0%;
	}
	
	.list_stu01 {
     position: relative;
     width: 36%;
     height: 430px;
     margin: 10% auto;
     background-color: #f8f7c6;
     border: solid 2px #6272ad;
     box-shadow: 4px 4px #bfd5f2;
	}
	
	.list_stu02 {
     position: relative;
     width: 36%;
     height: 430px;
     margin: 20% auto;
     background-color: #f8f7c6;
     border: solid 2px #e65d2d;
     box-shadow: 4px 4px #fec2b8;
	}
	
	.list_stu01_title {
	 position:relative;
	 margin: -2% auto !important;
	}
	
	.stu01_title_text {
     top: -13%;
     font-size: 179%;
	 padding:0 25% 0 25%;
	}
	
	.stu02_title_text {
     top: -13%;
     font-size: 180%;
	 padding:0 22% 0 22%;
	}
	
	.student_01 {
     position: absolute;
	 top: 17%;
	}
	
	.student_02 {
     position: absolute;
	}
	
	.school_target {
     position: relative;
	 width: 40%;
     height: 28px;
	}
	
	.school_name {
     text-align: left;
     margin: 6% auto 0 8% !important;
	}
	
	.student_01_school {
     font-size: 270%;
	 right:32%;
	}
	
	.pc_student_01_text {
     position: relative;
     width: 270%;
	 font-size:130%;
	 text-align:left;
     left: -1%;
     line-height: normal;
     margin: 8% auto;
	}
	
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 14% auto !important;
	 right: 2%;
	}
	
	.button_more2 {
     padding: 5px 0 8px 12px;
     margin: 14% auto !important;
	}
	
	.sec6_pc_bg_01 {
	 position:absolute;
	 text-aligh: right;
     right:0%;
     margin:-9% auto !important;
	}
	
	.sec6_pc_bg_02 {
	 position:absolute;
     left:-2%;	
	}
	
	.sec6_pc_bg_01 img{
	 width:70%
	}
	
	.sec6_pc_bg_02 img{
	 width:70%
	}
	
	.pc_height_more_stu01{
	 height:570px;	
	}
	
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:42% 0 0 0;
	}
	
	.pc_height_more_stu01 div.student_01{
	 top:11%;
	}
	
	.pc_height_more_stu01 div.student_01_school{
	 right: 31%;
	 top: 15%;
	}
	
	.win_pc {
     position: relative;
     left: -16%;
     top: -16%;
	 margin: 0 -8% 0 0 !important;
	}
	.win_pc1 {
     position: relative;
     left: -9%;
     top: -15%;
     margin: 0 -8% 0 0 !important;
	}
	.win_pc2 {
     position: relative;
     left: -11.5%;
     top: -28%;
     margin: 0 -10% 0 0 !important;
	}
	
	.button_close {
	 position:fixed;
	 top:11%;
	 right:9%;
	 width:5%;
	 height:5%;
	 cursor:pointer;
	 z-index:9;
	}
	
	.button_close img{
	 width:100%;		
	}
	
	.frame_window_title {
     color: #3578b1;
     font-size: 280%;
     font-weight: 600;
     text-align: center;
     margin: 3% auto 1% auto;
	}
	
	.frame_window {
     position: fixed;
     top: 9%;
     left: 7%;
     right: 7%;
     background-color: #fce0d1;
     width: 85%;
     height: 80%;
     border-radius: 40px;
     text-align: center;
     z-index: 5;
     margin: 0 auto;
	 text-align:center;
     /* border: solid 2px red; */
	}
	
	.hr_mb {
	 height:5px;	
	}
	
	.frame_window_text {
	 width:85%;
	 color:#000000; 
	 font-size:235%;
	 font-weight:500;
	 text-align:justify;
	 padding: 0 8% 0 8%;
	 margin:2% auto; 
	}
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 50px;
     line-height: 145%;
     font-size: 200%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -14% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 50px;
     text-align: center;
     margin: 1% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 30%;
     height: 65px;
     line-height: 145%;
     font-size: 235%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -15% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 30%;
     height: 65px;
     text-align: center;
     margin: 9% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 75% ;
	}
	
	.sec2_mb_finger_w2 img {
     width: 90% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:235%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 15% 0 15% ;
	}
	.frame_window_title2 {
	 margin:5% auto 2% auto;	
	}
	
	.button1_1{
	 width:250px;
	 height: 50px;
	 font-size:120%;
	}
	.button1_2{
	 width:250px;
	 height: 50px;
	 font-size:120%;
	}
	.button1_3{
	 width:250px;
	 height: 50px;
	 font-size:120%;
	 margin: 0% auto !important;
	}
	.pc_step6_text {
     margin: 40.8% auto 0 0.8%;
	}
}

@media screen and (min-width: 1000px) and (min-height: 600px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 85%;	
	}
	.frame_window_text {
     font-size: 180%;
	}
}

@media screen and (min-width: 1000px) and (min-height: 700px){
	.frame_window {
     height: 70%;
	}
	.frame_w1 {
	 height: 80%;	
	}
}


@media screen and (min-width: 1200px) and (min-height: 500px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 90%;	
	}
	.frame_window_text {
     font-size: 190%;
	}
	.sec2_w2 {
	 margin: 7% auto 10% auto !important;
	}
	.frame_window2_text {
   
     padding: 0 10% 0 10%;
	}
}

@media screen and (min-width: 1200px) and (min-height: 700px){
	.frame_window {
     height: 70%;
	}
	.frame_w1 {
	 height: 80%;	
	}
}


@media screen and (min-width: 1300px) and (min-height: 600px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 90%;	
	}
	.frame_window2_text {
   
     padding: 0 15% 0 15%;
	}
}

@media screen and (min-width: 1300px) and (min-height: 700px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 80%;	
	}
}


@media screen and (min-width: 1400px) and (min-height: 600px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 90%;	
	}
	.sec2_w2 {
	 margin: 13% auto 10% auto !important;
	}
}

@media screen and (min-width: 1400px) and (min-height: 700px){
	.frame_window {
     height: 80%;
	}
	.frame_w1 {
	 height: 85% !important;	
	}
	.sec2_w1 {
     margin: 2% auto 10% auto !important;
	}
}


@media only screen and (min-width: 1300px) {
	.pc_step6_text {
     margin: 40.8% auto 0 1%;
	}	
}

@media only screen and (min-width: 1400px) {
	.note_pc_top img#section_03_note {
		height: 920px;
	}
	.button_more {
     padding: 5px 0 8px 12px;
     margin: 10% auto !important;
	}
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 60px;
     line-height: 145%;
     font-size: 200%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -14.5% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 60px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 80%;
	}
	.frame_window {
     width: 85%;
     height: 75%;
	}
	.frame_window_text {
	
	 padding: 0 13% 0 13%;
	}
	
	.bk_ground {
     position: absolute;
     width: 100%;
     height: 750px;
     background-color: #9fb5fc;
     margin: -58% 0 0 0;
	}
	
	.sec3_yellow_button_1 {
     line-height: 210%;
	}
	
	.pc_step6_text {
     margin: 40.8% auto 0 1.3%;
	}
	.pc_height_more_stu01 div.stamp01_pc {
     padding: 36% 0 0 0;
	}
}

@media only screen and (min-width: 1500px) {
	.note_pc_top img#section_03_note {
		height: 1000px;
	}
	.box1_pc_text {
     font-size: 210%;
	}
	.box2_pc_text {
     font-size: 210%;
	}
	.box3_pc_text {
     font-size: 210%;
	}
	.box4_pc_text {
     font-size: 210%;
	 margin: 0 0 0 1% !important;
	}
	.sec3_text_pc {
     font-size: 210%;
	}
	.sec3_yellow_button_1 {
     font-size: 210%;
	}
	.sec3_yellow_button_1 {
     line-height: 180%;
     font-size: 210%;
     margin: -3.5% auto;
	}
	.sec4_text_pc {
     font-size: 210%;
	}
	.y_button {
     margin: -15% auto 0 2%;
	}
	.pc_step_title {
     font-size: 210%;
	}
	.pc_step {
     font-size: 210%;
	 line-height: 150%;
	}
	.box1_left_title {
     font-size: 280%;
	}
	.box1_right_title {
     font-size: 280%;
	}
	.box1_left_text {
     font-size: 190%;
	}
	.box1_right_text {
     font-size: 190%;
	}
	.stu01_title_text {
     font-size: 210%;
	}
	.stu02_title_text {
     font-size: 210%;
	 padding: 0 24% 0 24%;
	}
	.student_01 {
     top: 19%;
	}
	
	.list_stu01 {
     height: 490px;
	}
	.list_stu02 {
     height: 490px;
	}
	.student_01_school {
     font-size: 320%;
     right: 32%;
	}
	.pc_student_01_text {
     font-size: 165%;
	 width: 265%;
	 text-align:justify;
	}
	.pc_height_more_stu01 {
     height: 710px !important;
	}
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:42% 0 0 0;
	}
	.button_mb div {
     font-size: 155%;
	}
	.button_xs div.button1 div {
     margin: 0% -7% 0% 5%;
     line-height: 172%;
     height: 60px;
	}
	.sec5_people1 img {
     width: 100%;
	}
	.sec5_people2 img {
     width: 100%;
	}
	.win_pc {
     top: -21%;
	}
	.win_pc1 { 
     left: -10%;
     top: -23%;
	}
	.win_pc2 {
     left: -13%;
     top: -34%;
	}
	
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 60px;
     line-height: 145%;
     font-size: 200%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -14% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 60px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 80%;
	}
	.frame_window {
     width: 85%;
     height: 80%;
	}
	.frame_window_title {
     font-size: 320%;
	}
	
	.frame_window_text {
	
	 padding: 0 15% 0 15%;
	}
	
	
	
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 30%;
     height: 70px;
     line-height: 145%;
     font-size: 250%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -14.5% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 30%;
     height: 70px;
     text-align: center;
     margin: 18% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	
	.sec2_mb_finger_w2 img {
     width: 100% ;
	}
	
	.frame_window2_text {
	 width:85%;
	 color:#000000; 
	 font-size:280%;
	 font-weight:500;
	 text-align:justify;
	 margin:5% auto;
	 padding:0 15% 0 15% ;
	}
	
	
	
	.button1_1{
	 width:280px;
	 height: 50px;
	 font-size:120%;
	}
	.button1_2{
	 width:280px;
	 height: 50px;
	 font-size:120%;
	}
	.button1_3{
	 width:280px;
	 height: 50px;
	 font-size:120%;
	 margin: 0% auto !important;
	}
	
	.button_more {
     height: 28px;
	}
	
	.bk_ground {
     position: absolute;
     width: 100%;
     height: 800px;
     background-color: #9fb5fc;
     margin: -57% 0 0 0;
	}
}

@media only screen and (min-width: 1800px) {
	.note_pc_top img#section_03_note {
		height: 1200px;
	}
	
	
	.box1_pc_text {
     font-size: 250%;
	}
	.box2_pc_text {
     font-size: 250%;
	}
	.box3_pc_text {
     font-size: 250%;
	}
	.box4_pc_text {
     font-size: 250%;
	}
	.sec3_text_pc {
     font-size: 250%;
	}
	.sec3_button_1 {
     height: 75px;
	}
	.sec3_yellow_button_1 {
     height: 75px;
	}
	.sec3_yellow_button_1 {
     font-size: 250%;
	}
	.sec3_yellow_button_1 {
     line-height: 180%;
     font-size: 250%;
     margin: -3.5% auto;
	}
	.sec4_text_pc {
     font-size: 250%;
	}
	.y_button {
     margin: -15% auto 0 2%;
	}
	.pc_step_title {
     font-size: 250%;
	}
	.pc_step {
     font-size: 250%;
	 line-height: 150%;
	 height:60px;
	}
	.box1_left {
     height: 130px;
	}
	.box1_right {
     height: 130px;
	}
	.box1_left_title {
     font-size: 320%;
	}
	.box1_right_title {
     font-size: 320%;
	}
	.box1_left_text {
     font-size: 230%;
	 margin: 4% auto!important;
	}
	.box1_left_text_3 {
     font-size: 230%;
	 top: -20%;
	}
	.box1_right_text {
     font-size: 230%;
	}
	.stu01_title_text {
     font-size: 250%;
	}
	.stu02_title_text {
     font-size: 250%;
	 padding: 0 24% 0 24%;
	}
	.student_01 {
     top: 19%;
	}
	
	.list_stu01 {
     height: 600px;
	}
	.list_stu02 {
     height: 600px;
	}
	.student_01_school {
     font-size: 380%;
     right: 32%;
	}
	.pc_student_01_text {
     font-size: 197%;
	 width: 265%;
	 text-align:justify;
	}
	.pc_height_more_stu01 {
     height: 850px !important;
	}
	
	.button_mb div {
     font-size: 155%;
	}
	.win_pc {
     top: -17%;
	 left: -19%;
	}
	
	.win_pc img{
	 width:120%;
	}
	
	.win_pc1 {
     top: -17%;
	 left: -12%;
	}
	
	.win_pc1 img{
	 width:120%;
	}
	
	.win_pc2 {
     top: -35%;
	 left: -15%;
	}
	
	.win_pc2 img{
	 width:120%;
	}
	
	.sec5_people1 img {
     width: 120%;
	}
	.sec5_people2 img {
     width: 120%;
	}
	.sec5_people2 {
     right: 9%;
	}
	.button_more {
     height: 35px;
	}
	.school_target {
     height: 41px;
	}
	
	
	.sec2_mb_yellow_button {
     position: relative;
     width: 30%;
     height: 65px;
     line-height: 145%;
     font-size: 280%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -13.5% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button {
     position: relative;
     width: 30%;
     height: 65px;
     text-align: center;
     margin: 2% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}
	
	.sec2_mb_finger img {
     width: 90%;
	}
	
	
	.frame_window_title {
     font-size: 370%;
	}
	
	.frame_window_text {
	 font-size: 280%;
	 padding: 0 15% 0 15%;
	}
	
	
	.frame_window2_text {
     width: 85%;
     color: #000000;
     font-size: 320%;
     font-weight: 500;
     text-align: justify;
     margin: 5% auto;
     padding: 0 15% 0 15%;
	}
		
		
	.sec2_mb_yellow_button_w2 {
     position: relative;
     width: 30%;
     height: 80px;
     line-height: 145%;
     font-size: 320%;
     font-weight: 700;
     border-radius: 30px;
     text-align: center;
     color: #c13732;
     background-color: #fcf86a;
     margin: -14.5% auto 5% 35.5%;
     z-index: 1;
     cursor: pointer;
	}
	.sec2_mb_button_w2 {
     position: relative;
     width: 30%;
     height: 80px;
     text-align: center;
     margin: 18% auto 10% auto;
     border: solid 1px #000000;
     border-radius: 30px;
     z-index: 3;
     cursor: pointer;
	}

	.sec2_mb_finger_w2 img {
     width: 130%;
	}
	
	.bk_ground {
     position: absolute;
     width: 100%;
     height: 990px;
     background-color: #9fb5fc;
     margin: -57% 0 0 0;
	}
	
	.pc_step6_text {
     margin: 40.8% auto 0 1.3%;
	}
	
	.pc_height_more_stu01 div.stamp01_pc {
	 padding:40% 0 0 0;
	}
}