/* common */
html, body {background:#fff;}
.is-pc {display:block;}
.is-m {display:none;}
@media (max-width:991px){
.is-pc {display:none;}
.is-m {display:block;}
}

/* container */
:root{
	--container-padding: 15px;
	--container-padding-minus: -15px;
}
.container {max-width: calc(990px + (var(--container-padding) * 2)); margin:0 auto; padding:0 var(--container-padding); width:100%;}
.container-xxl {max-width: calc(1400px + (var(--container-padding) * 2));}
.container-xl {max-width: calc(1200px + (var(--container-padding) * 2));}
.container-lg {max-width: calc(991px + (var(--container-padding) * 2));}
.container-md {max-width: calc(767px + (var(--container-padding) * 2));}
.container-sm {max-width: calc(575px + (var(--container-padding) * 2));}
.container-xs {max-width: calc(400px + (var(--container-padding) * 2));}

/* header */
header {background:#fff; padding:21px 0;}
header .container {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
header .container .logo a.useschool {background-image:url('/img/logo.svg'); width:100px; height:43px;}
header .container .logo a.childu {background-image:url('/img/logo_childu.svg'); width:100px; height:31px;}
header ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:0 84px;}
header ul li {margin: 0px;}
header ul li a {padding:7px 0; font-size:18px; font-weight:500; color:#333; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
header ul li a:hover {text-decoration:underline; color:#0072CF;}
header .more {height:38px; padding:0 24px; font-size:16px; font-weight:500; color:#0072CF; border:1px solid #B5DEFF; background:#D9EEFF; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
@media (max-width:991px){
header {padding:0;}
header .container {padding:0;}
header h1 {padding:14px 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; width:100%; border-bottom:1px solid #D9D9D9;}
header h1 a img {width:100px; display:block; margin:0 auto;}
header ul {width:100%; padding:0 15px; gap:0 24px;}
header ul li {margin: 0 15px;}
header ul li a {padding:15px 0; font-size:16px;}
header .more {display:none;}
}
@media (max-width:375px){
	header ul {padding:0px;}
}

/* footer */
footer {background:#5B5A5D; padding:60px 0;}
footer .footer-text h2 {margin:0 0 14px; display:flex; flex-wrap:wrap; align-items:center; font-size:18px; font-weight:700; color:#fff;}
footer .footer-text h2:before {display:inline-block; content:""; width:17px; height:17px; margin:0 8px 0 0; background:url('../images/icon_text_title.svg') no-repeat center / cover;}
footer .footer-text ul {padding:0 0 0 18px;}
footer .footer-text ul li {display:flex; flex-wrap:wrap; margin:0 0 8px;}
footer .footer-text ul li:last-of-type {margin:0;}
footer .footer-text ul li > b {font-size:15px; color:#fff; margin:0 5px 0 0;}
footer .footer-text ul li > p {flex:1; min-width:0; font-size:15px; font-weight:300; letter-spacing:initial; color:#fff; word-break:keep-all;}
footer .footer-text ul li > p em {font-size:15px; color:#fff; font-weight:700;}
footer .footer-text ul li > p a {text-decoration:underline; text-underline-position:under; text-underline-offset:initial; font-size:15px;}
@media (max-width:991px){
footer {padding:30px 0;}
footer .footer-text h2 {font-size:16px;}
footer .footer-text h2:before {width:15px; height:15px; position:relative; top:-1px;}
footer .footer-text ul li > b {font-size:14px;}
footer .footer-text ul li > p {font-size:14px;}
footer .footer-text ul li > p em, footer .footer-text ul li > p a {font-size:14px;}
}

/* state-box */
.state-box {position:relative; padding:80px 0; background:#A8C5FF;}
.state-box:before {position:absolute; left:0; top:0; content:""; width:100%; height:100%; background:url('../images/bg_state.png') no-repeat center / cover; opacity:0.5;}
.state-box .container {position:relative;}
.state-box h2 {text-align:center; font-size:40px; font-weight:700; color:#fff; margin:0 0 24px;}
.state-box .state-info {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:0 0 24px;}
.state-box .state-info ul {display:flex; flex-wrap:wrap; border-radius:50px; background:#fff; padding:14px 42px;}
.state-box .state-info ul li {display:flex; flex-wrap:wrap; align-items:center;}
.state-box .state-info ul li:after {display:inline-block; content:""; width:1px; height:24px; margin:0 24px; background:#d9d9d9;}
.state-box .state-info ul li:last-of-type:after {display:none;}
.state-box .state-info ul li > div {flex:1; min-width:0;}
.state-box .state-info ul li > div b {display:block; text-align:center; margin:0 0 8px; font-size:15px; font-weight:600; color:#5B5A5D;}
.state-box .state-info ul li > div p {font-size:17px; font-weight:600; min-width:130px; line-height:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; background:#576CD7; color:#fff; height:30px;}
.state-box .state-info ul li > div p strong {font-size:20px; font-weight:600; color:#fff; line-height:1;}
.state-box .state-info ul li > div p strong.mr5 {position:relative;}
.state-box .state-table {background:#fff;}
.state-box .state-table table {table-layout:fixed; width:100%; border-collapse:collapse;}
.state-box .state-table table thead tr th {border:1px solid #D8D8D8; background:#F2F2F2; font-size:15px; color:#898989; padding:10px;}
.state-box .state-table table thead tr th:nth-of-type(6) {}
.state-box .state-table table thead tr th:nth-of-type(7) {}
.state-box .state-table table tbody tr td {border:1px solid #EDEDED; padding:8px; vertical-align:top; position:relative;}
.state-box .state-table table tbody tr td img {display:none; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:74px;}
.state-box .state-table table tbody tr td .list-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.state-box .state-table table tbody tr td .list-head p {display:flex; flex-wrap:wrap; align-items:center;}
.state-box .state-table table tbody tr td .list-head p b {font-size:14px; font-weight:600; color:#666666;}
.state-box .state-table table tbody tr td .list-head p span {display:none;}
.state-box .state-table table tbody tr td .list-head small {background:#F3F3F3; padding:0 8px; font-size:12px; color:#666; display:flex; flex-wrap:wrap; align-items:center; border-radius:50px;}
.state-box .state-table table tbody tr td .list-body {margin:12px 0 0;}
.state-box .state-table table tbody tr td .list-body > ul > li {margin:0 0 3px; padding:4px; border-left:2px solid #D9D9D9; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.state-box .state-table table tbody tr td .list-body > ul > li:first-of-type {background:#F8F8F8;}
.state-box .state-table table tbody tr td .list-body > ul > li:last-of-type {margin:0;}
.state-box .state-table table tbody tr td .list-body > ul > li .name {font-size:14px; color:#666;}
.state-box .state-table table tbody tr td .list-body > ul > li b {font-size:14px; color:#888;}
.state-box .state-table table tbody tr td .list-body > ul > li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; height:21px; padding:0 8px; font-size:12px; color:#fff; background:#FFBC41;} 
.state-box .state-table table tbody tr td .list-body > ul > li.red {border-color:#FF0000;}
.state-box .state-table table tbody tr td .list-body > ul > li.red b {color:#FF0000; font-weight:700;}
.state-box .state-table table tbody tr td .list-body > ul > li.yellow {border-color:#FFBC41;}
.state-box .state-table table tbody tr td .list-body > ul > li.yellow b {color:#FFBC41; font-weight:700;}
.state-box .state-table table tbody tr td:nth-of-type(6) .list-head p b {}
.state-box .state-table table tbody tr td:nth-of-type(7) .list-head p b {}
.state-box .state-table table tbody tr td .list-head.complete {opacity:0.5;}
.state-box .state-table table tbody tr td .list-body.complete {opacity:0.5;}
.state-box .state-table .loading_wrap {padding:150px 0 320px; text-align:center;}
.state-box .state-table .loading {margin-top: 30px; font-size: 40px; font-weight:700; line-height: 1; color: #000;}

@media (max-width:991px){
.state-box {padding:40px 0;}
.state-box h2 {font-size:25px;}
.state-box .state-info ul {border-radius:0; padding:15px; border:1px solid #E5E5E5; border-radius:8px;}
.state-box .state-info ul li {width:100%; margin:0 0 5px;}
.state-box .state-info ul li:last-of-type {margin:0;}
.state-box .state-info ul li:after {display:none;}
.state-box .state-info ul li > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.state-box .state-info ul li > div b {margin:0; font-size:16px;}
.state-box .state-info ul li > div p {font-size:15px;}
.state-box .state-info ul li > div p strong {font-size:18px;}
.state-box .state-table {background:none;}
.state-box .state-table table {display:block;}
.state-box .state-table table thead {display:none;}
.state-box .state-table table tbody {display:block;}
.state-box .state-table table tbody tr {display:block; margin:0 0 4px;}
.state-box .state-table table tbody tr:last-of-type {margin:0;}
.state-box .state-table table tbody tr td {display:block; background:#fff; padding:15px; border:1px solid #E5E5E5; border-radius:8px; margin:0 0 4px;}
.state-box .state-table table tbody tr:nth-child(1) td:nth-child(1) {display:none;}
.state-box .state-table table tbody tr td:last-of-type {margin:0;}
.state-box .state-table table tbody tr td.complete {display:none;}
.state-box .state-table table tbody tr td .list-head p span {display:block; margin:0 0 0 4px; font-size:12px; color:#898989;}
.state-box .state-table .loading_wrap {background:#fff; padding:120px 0 150px;}
.state-box .state-table .loading {font-size:6vw;}
}

/* step-box */
.step-box {padding:80px 0 0; background:url('../images/bg_step.png') no-repeat bottom center / cover; overflow:hidden;}
.step-box .list-head {display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.step-box .list-head > strong {background:#A6C4FF; color:#fff; padding:12px 42px; font-size:18px; font-weight:700; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; border-radius:50px;}
.step-box .list-head > h2 {width:100%; margin:20px 0 0;}
.step-box .list-head > h2 img {width:100%; display:block; max-width:605px; margin:0 auto;}
.step-box .list-head > ul {width:100%; max-width:721px; margin:5px auto 0; display:flex; flex-wrap:wrap; justify-content:center; padding:12px; gap:10px 20px; background:#fff; border-radius:50px;}
.step-box .list-head > ul > li {display:flex; flex-wrap:wrap; align-items:center;}
.step-box .list-head > ul > li > b {color:#0856E6; margin:0 14px 0 0;}
.step-box .list-head > ul > li > p {font-size:16px; font-weight:600; color:#666;}
.step-box .list-body {max-width:614px; position:relative; margin:100px auto 0;}
.step-box .list-body > img.bg {width:100%;}
.step-box .list-body > img.flag {position:absolute; right:-2%; bottom:-6%; width:35%;}
.step-box .list-body > ul {position:absolute; left:0; top:0; width:100%; height:100%;}
.step-box .list-body > ul > li {display:flex; flex-wrap:wrap; align-items:center; position:absolute;}
.step-box .list-body > ul > li:before {display:inline-block; content:""; width:22px; height:22px; border-radius:50%; margin:0 4px 0 0; background:#81A8FF; border:2px solid #BDF8FF;}
.step-box.course1 .list-body > ul > li:before {background:#81A8FF; border:2px solid #eaf0ff;}
.step-box.course2 .list-body > ul > li:before {background:#bc8df5; border:2px solid #f5edff;}
.step-box.course3 .list-body > ul > li:before {background:#41b8e3; border:2px solid #BDF8FF;}

.step-box .list-body > ul > li p {font-size:18px; font-weight:600; color:#000;}
.step-box.course3 .list-body > ul > li.step01 {position:absolute; left:35.8%; bottom:15%;}
.step-box.course3 .list-body > ul > li.step02 {position:absolute; left:32%; bottom:45%;}
.step-box.course3 .list-body > ul > li.step03 {position:absolute; left:56%; bottom:27%;}
.step-box.course3 .list-body > ul > li.step04 {position:absolute; left:59%; bottom:54%;}
.step-box.course3 .list-body > ul > li.step05 {position:absolute; left:58.5%; bottom:73%;}
.step-box.course3 .list-body > ul > li.step06 {position:absolute; left:53.5%; bottom:91%;}
.step-box.course2 .list-body > ul > li.step01 {position:absolute; left:56.8%; bottom:8%;}
.step-box.course2 .list-body > ul > li.step02 {position:absolute; left:33.8%; bottom:24%;}
.step-box.course2 .list-body > ul > li.step03 {position:absolute; left:61.8%; bottom:38%;}
.step-box.course2 .list-body > ul > li.step04 {position:absolute; left:43.8%; bottom:63%;}
.step-box.course2 .list-body > ul > li.step05 {position:absolute; left:54.8%; bottom:78%;}
.step-box.course2 .list-body > ul > li.step06 {position:absolute; left:47%; bottom:91%;}
.step-box.course1 .list-body > ul > li.step01 {position:absolute; left:56.8%; bottom:8%;}
.step-box.course1 .list-body > ul > li.step02 {position:absolute; left:36.8%; bottom:21%;}
.step-box.course1 .list-body > ul > li.step03 {position:absolute; left:67.8%; bottom:38%;}
.step-box.course1 .list-body > ul > li.step04 {position:absolute; left:39.8%; bottom:56%;}
.step-box.course1 .list-body > ul > li.step05 {position:absolute; left:61.8%; bottom:73%;}
.step-box.course1 .list-body > ul > li.step06 {position:absolute; left:44.8%; bottom:87%;}

.step-box .list-body > .character {position:absolute; width:35%; z-index:20;}
.step-box .list-body > .character img {width:100%;}
.step-box .list-body > .character.position0 {left:58%; bottom:-5%;}

.step-box.course3 .list-body > .character.position1 {left:21.3%; bottom:12%;}
.step-box.course3 .list-body > .character.position2 {left:17.6%; bottom:42%;}
.step-box.course3 .list-body > .character.position3 {left:41.7%; bottom:24%;}
.step-box.course3 .list-body > .character.position4 {left:44.7%; bottom:51%;}
.step-box.course3 .list-body > .character.position5 {left:44%; bottom:70%;}
.step-box.course3 .list-body > .character.position6 {left:39%; bottom:88%;}

.step-box.course2 .list-body > .character.position1 {left:42.5%; bottom:5%;}
.step-box.course2 .list-body > .character.position2 {left:19.5%; bottom:21%;}
.step-box.course2 .list-body > .character.position3 {left:47.2%; bottom:35%;}
.step-box.course2 .list-body > .character.position4 {left:29.2%; bottom:60%;}
.step-box.course2 .list-body > .character.position5 {left:40.2%; bottom:75%;}
.step-box.course2 .list-body > .character.position6 {left:32.5%; bottom:88%;}

.step-box.course1 .list-body > .character.position1 {left:42.3%; bottom:5%;}
.step-box.course1 .list-body > .character.position2 {left:22.5%; bottom:18%;}
.step-box.course1 .list-body > .character.position3 {left:53.5%; bottom:35%;}
.step-box.course1 .list-body > .character.position4 {left:25.2%; bottom:53%;}
.step-box.course1 .list-body > .character.position5 {left:47.2%; bottom:70%;}
.step-box.course1 .list-body > .character.position6 {left:30.2%; bottom:84%;}


@media (max-width:991px){
.step-box {padding:35px 0 0; background-image:url('../images/bg_step_m.png');}
.step-box .list-head > strong {padding:6px 24px; font-size:14px;}
.step-box .list-head > h2 {width:calc(100% - 20px); margin:10px 0 0;}
.step-box .list-head > ul {margin:15px auto 0; padding:15px 15px 5px; border-radius:10px; gap:0;}
.step-box .list-head > ul > li {width:50%; margin:0 0 10px;}
.step-box .list-head > ul > li > b {width:100%; margin:0; text-align:center;}
.step-box .list-head > ul > li > p {width:100%; text-align:center;}
.step-box .list-body {margin:45px auto 0;}
.step-box .list-body > ul > li:before {width:16px; height:16px;}
.step-box .list-body > ul > li p {font-size:13px;}
}

/* float-box */
.float-box {position:fixed; z-index:1000; top:50%; transform:translateY(-50%); right:5%;}
.float-box ul li > * {width:110px; height:110px; font-size:18px; font-weight:bold; color:#666; line-height:1.3; text-align:center; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; border-radius:50%;}
.float-box ul li > * b {width:100%; text-align:center; font-size:18px; font-weight:700; color:#000; line-height:1.3;}
.float-box ul li:nth-of-type(1) p {border:5px solid #F5F5F5; background:#FFFFFF;}
.float-box ul li:nth-of-type(2) a {border:5px solid #D2E0FF; background:#AFC3F0;}
.float-box ul li:nth-of-type(3) a {border:5px solid #F2E8FF; background:#DECDF2;}
@media (max-width:991px){
.float-box {position:sticky; top:auto; bottom:0; transform:none; right:0;}
.float-box ul {display:flex; flex-wrap:wrap;}
.float-box ul li {flex:1; min-width:0;}
.float-box ul li > * {border-radius:0; width:100%; font-size:14px; height:60px; border-width:2px;}
.float-box ul li > * br {display:none;}
.float-box ul li > * b {width:auto; margin:0 5px 0 0; font-size:14px;}
}
@media (max-width:375px){
	.float-box ul li > * br {display:block;}
}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; z-index:9999; transition:all ease 0.5s; background:rgba(0,0,0,0.7);}
.modal-box .box {pointer-events:none; opacity:0; transition:all ease 0.5s; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); overflow:hidden; background:#fff; width:calc(100% - 30px); max-width:460px; border-radius:20px; display:flex; flex-direction:column; max-height:90%;}
.modal-box .modal-head {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:12px 12px 0;}
.modal-box .modal-head .close {width:32px; height:32px; font-size:0; background:url('../images/icon_close.svg') no-repeat center / cover;}
.modal-box .modal-body {width:100%; height:100%; overflow-y:auto; padding:0 30px 42px;}
.modal-box .modal-body h2 {text-align:center; font-size:24px; font-weight:bold; margin:0 0 24px;}
.modal-box .modal-body ul li {margin:0 0 15px; position:relative; padding:0 0 0 10px; font-size:16px; word-break:keep-all;}
.modal-box .modal-body ul li:last-of-type {margin:0;}
.modal-box .modal-body ul li b {font-size:16px; font-weight:700;}
.modal-box .modal-body ul li:before {position:absolute; left:0; top:9px; width:4px; height:4px; background:#000; border-radius:50%; content:"";}
.modal-box .modal-body ul li a {font-size:16px; color:#ff0000;}
.modal-box .modal-body ul li a:hover {text-decoration:underline; text-decoration-color:#ff0000; text-underline-position:under; text-underline-offset:0;}
.modal-box .modal-body img {width:100%; margin:24px 0 0;}
.modal-box .modal-body input {display:block; width:100%; margin:24px 0 0; background:#F8F8F8; border:1px solid #DADADA; border-radius:8px; height:44px; padding:0 24px; font-size:16px;}
.modal-box .modal-body input::placeholder {color:#BDBDBD;}
.modal-box .modal-foot .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:68px; background:#F1BF28; font-size:20px; font-weight:700;}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;}
@media (max-width:991px){
.modal-box .modal-body {padding:0 15px 30px;}
.modal-box .modal-body h2 {font-size:20px; margin:0 0 15px;}
.modal-box .modal-body ul li {margin:0 0 10px; font-size:15px;}
.modal-box .modal-body ul li b {font-size:15px;}
.modal-box .modal-body img {width:15px 0 0;}
.modal-box .modal-body input {margin:10px 0 0; padding:0 15px; font-size:15px;}
}

.back-to-top {
    display: none;
    position: fixed;
    right: 7%;
    bottom: 7%;
    width: 50px;
    height: 50px;
    z-index: 9;    
    border-radius: 25px;
    border: 1px solid #dbdbdb;
    background: url(/img/back_top.png);
    background-position: center;
    background-size: cover;
    font-size: 14px;
    font-weight: bold;
    color: #6e6e6e;
    text-align: center;
}
@media (max-width:991px){
	.back-to-top { right: 1%;  bottom: 9%;}
}