/*root styles*/
:root{
    font:normal normal normal 16px/1 '微软雅黑','Microsoft YaHei Bold',sans-serif;
}
html,body{
    width:100%;
    height:100%;
    color:#323232;
}
*,*::before,*::after{box-sizing: border-box;margin:0;padding:0;}
a{text-decoration: none;color:#323232;}
a[role=button]{
    background: linear-gradient(to right,#FFA900,#FFA700);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width:600px;
    height:60px;
    border-radius: 30px;
    font-size:24px;
    line-height: 60px;
    font-weight: 700;
    text-align: center;
    color:#FFFFFF;
    box-shadow:0 0 8px rgba(83,6,6,.14);
    border:1px solid #FFFFFF;
    transition: all .25s ease-in;
}
a[role=button]:hover{
    box-shadow: 0 5px 10px rgba(215, 140, 10, 0.35);
    transform:translateY(-5px);
    cursor: pointer;
}
dl,ul,ol,menu{list-style:none;margin:0;padding:0;}

/*header style*/
body > header {
    background:#FFFFFF;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    top:0;
    left:0;
    width:100%;
    height: 80px;
    z-index:999999;
    padding:0 calc(50% - 600px);
    box-shadow: 0 5px 10px rgba(200,200,200,.35);
}
body > header img{
    height:40px;
    cursor: pointer;
}
body > header > nav{
    display: flex;
    justify-content: space-between;
    width: 500px;
    padding:0 50px;
}
nav[role=navigation] > a{
    position:relative;
    font-size:20px;
    letter-spacing: 1px;
}
nav[role=navigation] > a:hover{
    color:#0780FE;
}
nav[role=navigation] > a::after{
    content: "";
    background-color: #0780FE;
    position: absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-10px;
    width:0;
    height:3px;
    border-radius:2px;
    transition: all .2s ease-in;
}
nav[role=navigation] > a:hover::after,nav[role=navigation] > a:active::after{
    width:100%;
}
body > header > code{
    display: flex;
    align-items: center;
    height:30px;
    color:#0780FE;
    font: normal bold 26px/35px Alibaba-PuHuiTi-B, Alibaba-PuHuiTi,Arial, serif;
}
body > header > code > img{
    height:36px;
}

/* heading styles */
h2[role=heading]{
    background: linear-gradient(to right, #38B1FC, #1A79F8) no-repeat left 17px top 15px/36px 3px,
    linear-gradient(to right, #38B1FC, #1A79F8) no-repeat left center/53px 3px,
    linear-gradient(to right, #38B1FC, #1A79F8) no-repeat left 17px bottom 15px/36px 3px,
    linear-gradient(to left, #38B1FC, #1A79F8) no-repeat right 17px top 15px/36px 3px,
    linear-gradient(to left, #38B1FC, #1A79F8) no-repeat right center/53px 3px,
    linear-gradient(to left, #38B1FC, #1A79F8) no-repeat right 17px bottom 15px/36px 3px;
    display:flex;
    align-items: center;
    width:fit-content;
    height: 55px;
    padding:0 75px;
    font-size:38px;
    color:#383838;
    margin-bottom:40px;
    text-align: center;
}
/* banner style */
body > figure[role=banner]{
    background:linear-gradient(45deg,#D4EAFF,#D4EAFF);
    position: relative;
    width:100%;
    min-width:1200px;
    margin-top:80px;
    padding-top:400px;
    overflow:hidden;
}
body > figure[role=banner] > img{
    position: absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:1920px;
    object-position: center;
}
body > figure[role=banner] > figcaption{
    background: rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
    padding:0 calc(50% - 510px);
    font-size:22px;
}
body > figure[role=banner] > figcaption> time::before{
    background: #1A79F8;
    display: inline-block;
    content:"开课时间";
    width: 126px;
    height: 34px;
    line-height:34px;
    text-align: center;
    border-radius: 5px;
    margin-right:20px;
    color:#FFFFFF;
}
body > figure[role=banner] > figcaption> time::after{
    content:attr(datetime);
    margin-left:20px;
}
body > figure[role=banner] > figcaption > button{
    background: #84E2F9;
    width: 172px;
    height: 34px;
    line-height: 34px;
    border-radius: 20px;
    font-size:22px;
    border:0;
    color:#2C283A;
    outline:none;
    cursor: pointer;
}

/*footer styles*/
body > footer{
    background: #323232;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:5px;
    width:100%;
    min-width:1200px;
    color:#FFFFFF;
    font-size:14px;
    height:60px;
}

/* module styles */
section[data-module]{
    display: flex;
    width:100%;
    min-width: 1200px;
    padding:50px calc(50% - 600px);
    flex-direction: column;
    align-items: center;
}

/* module summary styles */
section[data-module=summary]{
    background:#F6F8FA;
}
section[data-module=summary] > blockquote{
    background:url(../images/summary-bg-1.png) no-repeat center/100%;
    display: flex;
    width:1160px;
    height:220px;
    font-size:18px;
    padding:35px 50px;
}
section[data-module=summary] > blockquote:nth-of-type(2){
    background-image:url(../images/summary-bg-2.png);
    margin:20px auto;
}
section[data-module=summary] > blockquote:nth-of-type(3){
    background-image:url(../images/summary-bg-3.png);
    flex-direction: column;
}
section[data-module=summary] > blockquote h3{
    background:linear-gradient(#1A79F8,#1A79F8) no-repeat left top/8px 26px;
    padding:0 15px;
    font-size:26px;
}
section[data-module=summary] > blockquote:nth-of-type(2) h3{
    background:linear-gradient(#FF9907,#FF9907) no-repeat right top/8px 26px;
    text-align: right;
}
section[data-module=summary] > blockquote:nth-of-type(3) h3{
    background-image:linear-gradient(#2EC900,#2EC900);
}

section[data-module=summary] > blockquote p{
    line-height:32px;
    padding-top:20px;
}
section[data-module=summary] > blockquote data{
    background:url(../images/summary-icon-1.png) no-repeat top center/40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top:50px;
    white-space: nowrap;
    margin-left:30px;
    color:#003884;
}
section[data-module=summary] > blockquote data::after{
    background: rgba(132,226,249,0.5);
    content:attr(value);
    font-size:28px;
    font-weight:700;
    padding: 3px 10px;
    color:#004EB7;
    border-radius: 10px;
    margin-top:20px;
}
section[data-module=summary] > blockquote:nth-of-type(2) data{
    background-image:url(../images/summary-icon-2.png);
    margin-left:auto;
    margin-right:55px;
    color:#874F00;
}
section[data-module=summary] > blockquote:nth-of-type(2) data::after{
    background:#FAF9D3;
    color:#874F00;
}
section[data-module=summary] > blockquote:nth-of-type(2) p{
    padding-left:55px;
}

/* module trend styles */
section[data-module=trend]{

}
section[data-module=trend] > ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
    width:1080px;
    height:655px;
    margin-bottom:40px;
}
section[data-module=trend] > ul > li{
    background:url(../images/trend-item.png) no-repeat left 10px bottom/510px 387px;
    width:520px;
    padding:30px;
    border-radius:15px;
}
section[data-module=trend] > ul > li > h3{
    background: linear-gradient( 270deg, #BE783D 0%, #ECB88E 100%);
    position: relative;
    width:fit-content;
    transform:translateX(-30px);
    height:50px;
    line-height:50px;
    padding:0 30px;
    color:#FFFFFF;
    border-radius: 0 10px 10px 0;
}
section[data-module=trend] > ul > li > h3::after{
    display:block;
    position:absolute;
    left:0;
    content:"";
    width:10px;
    height:10px;
    border:5px solid transparent;
    border-top-color:#C07B41;
    border-right-color:#C07B41;
}
section[data-module=trend] > ul > li > p{
    padding-top:20px;
    font-size:18px;
    line-height:32px;
}
section[data-module=trend] > ul > li table{
    width:100%;
    text-align:center;
    font-size:12px;
    margin:10px auto;
}
section[data-module=trend] > ul > li table caption{
    font-size:16px;
    font-weight: 500;
    height:25px;
}
section[data-module=trend] > ul > li table th{
    background:#CC8C56;
    height:20px;
    color:#FFFFFF;
}
section[data-module=trend] > ul > li table td{
    background:#FFFFFF;
    height:20px;
}
section[data-module=trend] > ul > li strong{
    font-size:14px;
}
section[data-module=trend] > ul > li span::before{
    background: linear-gradient( 270deg, #BE783D 0%, #ECB88E 100%);
    content:"";
    width: 10px;
    height: 40px;
    margin-right:20px;
    border-radius: 0 7px 7px 0;
}
section[data-module=trend] > ul > li span{
    display:flex;
    align-items: center;
    background:rgba(255,255,255,.8);
    width: 100%;
    height: 74px;
    font-size:18px;
    line-height:32px;
    border-radius: 10px;
    margin-top:20px;
}

/* module develop styles */
section[data-module=develop]{
    background:#F6F8FC;
}
section[data-module=develop] > ul{
    background:url(../images/develop-icon.png) no-repeat left top 36px/44px 14px,
    url(../images/develop-line.png) no-repeat left top 53px/6px 72px,
    url(../images/develop-icon.png) no-repeat left top 140px/44px 14px,
    url(../images/develop-line.png) no-repeat left top 155px/6px 72px,
    url(../images/develop-icon.png) no-repeat left top 240px/44px 14px,
    url(../images/develop-line.png) no-repeat left top 255px/6px 72px,
    url(../images/develop-icon.png) no-repeat left top 345px/44px 14px,
    url(../images/develop-line.png) no-repeat left top 360px/6px 72px,
    url(../images/develop-icon.png) no-repeat left top 450px/44px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width:1080px;
    height:500px;
    padding-left:65px;
}
section[data-module=develop] > ul > li::before{
    content:attr(data-time);
    font-size:20px;
    color:#FFFFFF;
    min-width:140px;
    white-space: nowrap;
}
section[data-module=develop] > ul > li{
    background: #FFFFFF linear-gradient(#1A79F8,#1A79F8) no-repeat left center/136px 100%;
    display: flex;
    align-items: center;
    width: 1015px;
    height: 85px;
    padding:0 20px;
    font-size:18px;
    line-height:32px;
    box-shadow: 0 2px 7px rgba(0,0,0,0.06);
    border-radius: 10px;
}

/* module introduce styles */
section[data-module=introduce] {
    background:url(../images/introduce-bg.png) no-repeat center/cover;
}
section[data-module=introduce] > h2{
    color:#FFFFFF;
}
section[data-module=introduce] > figure{
    background:#204A8C linear-gradient(#1A79F8,#1A79F8) no-repeat left 430px top 70px/60px 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:1120px;
    padding:40px;
    border-radius:10px;
    margin-bottom:40px;
}
section[data-module=introduce] > figure > img{
    width:350px;
}
section[data-module=introduce] > figure > figcaption{
    width:650px;
    font-size:18px;
    color:#FFFFFF;
    line-height: 32px;
}
section[data-module=introduce] > figure > figcaption mark{
    background:transparent;
    color:#B1FBFF;
    font-weight: bold;
}

/* module chance styles */
section[data-module=chance]{
    background:#F6F8FC;
}
section[data-module=chance] > ul{
    display: flex;
    justify-content: space-between;
    width:1140px;
}
section[data-module=chance] > ul > li{
    background: #FFFFFF url(../images/chance-icon-1.png) no-repeat top 30px center/60px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 270px;
    padding: 110px 25px 30px 25px;
    border-radius: 15px;
}
section[data-module=chance] > ul > li:nth-child(2){
    background-image:url(../images/chance-icon-2.png);
}
section[data-module=chance] > ul > li:nth-child(3){
    background-image:url(../images/chance-icon-3.png);
}
section[data-module=chance] > ul > li:nth-child(4){
    background-image:url(../images/chance-icon-4.png);
}
section[data-module=chance] > ul > li > h3{
    background: #B5EEFC;
    width: 180px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    font-size:22px;
    color:#213351;
    text-align:center;
    margin-bottom:20px;
}
section[data-module=chance] > ul > li > p{
    font-size:18px;
    line-height:32px;
}

/* module advantages styles */
section[data-module=advantages]{
    background:url(../images/advantages-bg.png) no-repeat center/cover;
}
section[data-module=advantages] > ol{
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content:space-between;
    width:1140px;
    height:520px;
}
section[data-module=advantages] > ol > li{
    background:#FFFFFF url(../images/number-1.png) no-repeat right center/200px 220px;
    width:560px;
    height: 250px;
    padding:50px;
    border-radius:15px;
}
section[data-module=advantages] > ol > li:nth-child(2){
    background-image:url(../images/number-2.png);
}
section[data-module=advantages] > ol > li:nth-child(3){
    background-image:url(../images/number-3.png);
}
section[data-module=advantages] > ol > li:nth-child(4){
    background-image:url(../images/number-4.png);
}
section[data-module=advantages] > ol > li > h3{
    font-size:26px;
    color:#004AC2;
}
section[data-module=advantages] > ol > li > p{
    padding-top:20px;
    font-size:18px;
    line-height:32px;
}


/* module crowd styles */
section[data-module=crowd] > div{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:1120px;
}
section[data-module=crowd] > div ul{
    background: #DBF0FF;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: space-between;
    width: 590px;
    height: 210px;
    padding:40px 45px;
    border-radius: 105px;
    box-shadow: 0 0 0 20px #F2F9FF;
}
section[data-module=crowd] > div ul li{
    background: #1B7AF8;
    width: 240px;
    height: 54px;
    font-size:22px;
    line-height: 54px;
    text-align: center;
    border-radius: 30px;
    color:#FFFFFF;
}
section[data-module=crowd] > div dl{
    background: #FFFAEC;
    width: 434px;
    height: 257px;
    border-radius: 10px;
}
section[data-module=crowd] > div dl > dt{
    background:linear-gradient(to right,#FDF5DE,#FBDF98);
    width:180px;
    height:40px;
    line-height:40px;
    text-align:center;
    font-size:18px;
    font-weight: bold;
    border-radius:0 10px 10px 0;
}
section[data-module=crowd] > div dl > dd{
    font-size:18px;
    margin-top:20px;
}
section[data-module=crowd] > div dl > dd::before{
    content:"·";
    color:#1B7AF8;
    margin: 0 10px 0 30px;

}

/* module guide styles */
section[data-module=guide]{
    background:#F6F8FA;
}
section[data-module=guide] > ul{
    width:1100px;
}
section[data-module=guide] > ul > li::before{
    background:#FDEABA;
    display: inline-block;
    position:absolute;
    top:0;
    left:0;
    padding:0 30px;
    line-height:50px;
    height:50px;
    content:attr(title);
    font-weight:700;
    color:#3D1C00;
    border-radius:15px 0 100px 0;
}
section[data-module=guide] > ul > li{
    background: #FFFFFF;
    position:relative;
    width: 100%;
    padding:15px 30px 15px 180px;
    margin-bottom:20px;
    border-radius: 15px;
    border: 1px solid #ECBA3E;
    font-size:18px;
    line-height:32px;
    white-space: nowrap;
    overflow:hidden;
}

/* module course styles */
section[data-module=course] article{
    width:1160px;
}
section[data-module=course] menu{
    display: flex;
}
section[data-module=course] menu > li{
    background: #E0EDFF;
    width: 125px;
    height: 46px;
    margin-right:10px;
    line-height: 46px;
    text-align: center;
    font-size: 22px;
    border-radius: 20px 20px 0 0;
    cursor: pointer;
}
section[data-module=course] menu > li[aria-current]{
    background:#1A79F8;
    color:#FFFFFF;
}
section[data-module=course] article > section{
    background: #F6F8FA;
    width: 100%;
    padding:30px 20px;
    border-radius: 0 20px 20px 20px;
}
section[data-module=course] ul{
    display: flex;
    width:100%;
    justify-content: space-between;
    position: absolute;
    top:0;
    opacity: 0;
    z-index:-1;
    transform-origin:top left;
    transform:scaleY(0);
    transition:all .25s ease-out;
}
section[data-module=course] ul[aria-current]{
    position: relative;
    opacity: 1;
    z-index:1;
    transform:scaleY(1);
}
section[data-module=course] ul > li{
    background:#FFFFFF;
    width:360px;
    padding:30px 15px;
    border-radius: 20px;
}
section[data-module=course] ul > li h3{
    background:linear-gradient(to right,#F7E5C3,#F3CB92);
    width:fit-content;
    padding:5px 15px;
    border-radius:50px;
}
section[data-module=course] ul > li p{
    line-height:32px;
    padding:15px;
}