/*reset*/
html{ scroll-behavior: smooth;}
body{ margin:0; padding: 0; font-size: 18px; background:#c8ecff url(images/bg.png) no-repeat center top fixed;font-family: source-han-sans-traditional, sans-serif;
}
dd { margin: 0;}
img{ width:auto; height: auto; max-width: 100%; max-height: 100%;}
a{ color: inherit;}
ul,ol{ padding-left:16px; margin: 0;}
h1,h2,h3{font-family: "ar-fangxinshuh7b5std", sans-serif; font-weight: normal;}


header{ padding-top:56.25% ; position: relative; background:url(images/header-bg.png) no-repeat center top/contain;}
header [class^=p]{ position: absolute; top:0; left: 0; right: 0; bottom:0;}
.p1{ background: url(images/header-p1.png) no-repeat center center/contain; animation: 2s ease-in fadeIn1;}
.p2{ background: url(images/header-p2.png) no-repeat center center/contain; animation: 2s ease-in fadeIn2;}
.p3{ background: url(images/header-p3.png) no-repeat center center/contain; animation: 2s ease-in fadeIn3;}
hgroup{ position: absolute; top:6%; left: 5%; text-align: center; animation: 2s ease-in fadeIn4;}
h1{ font-size: 5.5em; color:#ffd13c; margin: 0;}
h1 strong{ font-size: 0.85em; color:#fff;}
h1 span{ letter-spacing: 0.2em;}
hgroup p{ margin:0; font-size: 2.2em; color:#a5c8ff;}


section{ padding:100px 50px 50px 50px;}
h2{margin: 0 auto;}
.h2-1{max-width:252px; margin-bottom: 1em;}
.h2-2{max-width:581px; margin-bottom: 1.5em;}
.h2-3{max-width:357px; margin-bottom: 1.5em;}
.h2-4{max-width:392px; margin-bottom: 2em;}

.intro{ display: flex; gap:50px; max-width: 1200px; margin:0 auto; align-items: center;}
.onlineclass{ display: flex; gap:50px; max-width: 1400px; margin:0 auto; align-items: center;}

.gridbox{ display: grid; grid-template-columns:1fr 1fr 1fr 1fr; gap: 50px; max-width: 1440px; margin: 0 auto;}
.gridbox > div{ text-align: center;}
.gridbox h3{ background:#7cb8ea; border-radius: 5px; padding: 5px 0;}
.gridbox p{ text-align: left;}

dl.information{ display: grid; grid-template-columns:140px 1fr; margin: 0 auto; gap: 20px;}
dt{ font-weight: bold;}
.onlineclass .btn{ background:#d34909; padding:10px 30px; margin:1em 0 0 150px;}

table{ max-width:1440px; border-collapse: collapse; border-spacing: 0; margin:0 auto;}
th{ background:#084a93; color:#fff; padding:30px; width:200px; vertical-align: top; border:2px solid #0b1356; font-weight: normal;}
td{ padding: 30px; border:2px solid #0b1356; background:#fff;}
td p{ margin:0;}

[class^=btn]{ text-decoration: none; display: inline-block; padding:5px 10px; border-radius: 5px; border: 2px solid #0b1356;}
[class^=btn]:hover{ background:#0b1356; color:#fff;}
.btn{ background:#d34909;}
.btn2{ background:#7a96f1;}

footer{ font-size: 0.75em; padding:10px 50px; text-align: center; color:#074b8f; position: relative;}

@media screen and (max-width:1680px) {
    h1{ font-size: 4.5em;}
    hgroup p{ font-size: 2em;}
}

@media screen and (max-width:1400px) {
    h1{ font-size: 4em;}
    hgroup p{ font-size: 1.8em;}
}

@media screen and (max-width:1260px) {
    hgroup{ top:5%; left: 4%;}
    h1{ font-size: 3.5em;}
    hgroup p{ font-size: 1.6em;}
}

@media screen and (max-width:1080px) {
    h1{ font-size: 3em;}
    hgroup p{ font-size: 1.4em;}
}

@media screen and (max-width:880px) {
    h1{ font-size: 2.5em;}
    hgroup p{ font-size: 1.2em;}
}

@media screen and (max-width:768px) {
    body{ font-size: 16px; background:#c8ecff url(images/m_bg.png) no-repeat center top fixed; background-size: cover;}
    body:before{ position: fixed; display: block; content: ''; background: url(images/m_bg.png) no-repeat center top; background-size: cover; top:0; left: 0; right: 0; bottom: 0;}
    header{ padding-top: 177%; background:url(images/m_header-bg.png) no-repeat center top/contain;}
    .p1{ background: url(images/m_header-p1.png) no-repeat center center/contain;}
    .p2{ background: url(images/m_header-p2.png) no-repeat center center/contain;}
    .p3{ background: url(images/m_header-p3.png) no-repeat center center/contain;}

    hgroup{ left: 0; width:100%;}
    h1{ font-size: 4em;}
    hgroup p{ font-size: 1.8em;}
   
    section{ padding: 50px 5%;}

    th,td{ display: block; width:100%; box-sizing: border-box;}
    th{ border-top:0; border-bottom: 0;}
    .h2-1{max-width:180px;}
    .h2-2{max-width:415px;}
    .h2-3{max-width:255px;}
    .h2-4{max-width:280px;}

    .intro{ flex-direction: column; gap:20px;}
    .onlineclass{flex-direction: column; gap:20px;}
    .gridbox{ grid-template-columns:1fr 1fr; gap:30px;}

    dl.information{ grid-template-columns:100px 1fr;}
    .onlineclass .btn{ margin:1em auto 0 auto; width:80%; text-align: center;}

}

@media screen and (max-width:680px) {
    h1{ font-size: 3.5em;}
    hgroup p{ font-size: 1.4em;}
}

@media screen and (max-width:500px) {
    h1{ font-size: 2.5em;}
    hgroup p{ font-size: 1.2em;}
}

@media screen and (max-width:420px) {
    h1{ font-size: 2.2em;}
    hgroup p{ font-size: 1em;}

    .h2-1{max-width:144px;}
    .h2-2{max-width:332px;}
    .h2-3{max-width:204px;}
    .h2-4{max-width:224px;}
}


@keyframes fadeIn1 {
    10%{
        opacity: 0;
    }
    40%,100%{
        opacity: 1;
    }
}
@keyframes fadeIn2 {
    0%,30%{
        opacity: 0;
    }
    60%,100%{
        opacity: 1;
    }
}
@keyframes fadeIn3 {
    0%,50%{
        opacity: 0;
    }
    80%,100%{
        opacity: 1;
    }
}
@keyframes fadeIn4 {
    0%,70%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

/*TOP*/
#gotop{ display:block; cursor: pointer; position:fixed; bottom:20px; right:20px; z-index:9999; width:40px; height:40px; border-radius:50%; border:2px solid #074b8f;
	background:url(images/toparrow.png) no-repeat center; -webkit-transition:0.2s; -moz-transition:0.2s; transition:0.2s;}
#gotop:hover { bottom: 25px;}

/* po_bar */
#po_bar {  width:100%; margin:0 auto; height:25px; padding-top: 10px; position: relative; z-index:3;}
.logo{ display:block; width:90px; position:absolute; left:20px;}
ul#option { position:absolute; top:10px; right:20px; margin:0;}
ul#option li { display:inline-block; font-size:15px; margin-left:10px; vertical-align:middle; }
ul#option li img { vertical-align:middle; height: 18px;}
ul#option li a { color:#074b8f; text-decoration: none;}
ul#option li a:hover { text-decoration:underline;}
.menu { display:none;}
@media (max-width: 1000px) {
    .logo{ left:10px; top:3px;}
	.logo img { width:80px; height:34px;}
	.menu { display:block; width:32px; height:32px; position:absolute; top:10px; right:10px; background:url(images/icon-menu.png) no-repeat center; background-size:32px 32px; z-index:101;}
	.menu.active{ background:url(images/icon-xx.png) no-repeat center; background-size:32px 32px;}
	ul#option { display:none; text-align:left; width:100%; margin-top:0; position:absolute; padding:11px 25px 15px 25px; box-sizing: border-box; top:0; right:0; left:0; background:#fff; z-index:100; -webkit-backface-visibility:hidden;}
 	ul#option li a {text-shadow:none;}

    /*TOP*/
	#gotop{ bottom:10px; right:10px;}
	#gotop a{ width:35px; height:35px; border-radius:50%; background-size:10px 8px;}
	#gotop a:hover { background-size:10px 8px;}
}