/* pc styles*/
html,body{
    font:normal normal normal 16px/1 '微软雅黑','Microsoft YaHei',Arial,Serif,sans-serif;
    width:100%;
    height:100%;
}
*,*::before,*::after{box-sizing: border-box;margin:0;padding:0;}
dl,ul,ol,li,dt,dd{list-style: none;margin:0;padding:0;}
a{text-decoration: none;}
a[role=button]{
    display: block;
    background: linear-gradient(to right,#FB7D38,#FFB64F);
    width:680px;
    height:60px;
    border-radius: 30px;
    font-size:28px;
    line-height: 60px;
    font-weight: 500;
    text-align: center;
    color:#FFFFFF;
    transition: all .25s ease-in;
}
a[role=button]:hover{
    box-shadow: 0 5px 10px rgba(250,150,0,.35);
    transform:translateY(-5px);
    cursor: pointer;
}
section[data-module]{
    display:flex;
    flex-direction: column;
    align-items: center;
    width:100%;
    min-width:1200px;
    padding:60px calc((100% - 1200px)/2);
}
/*header style*/
body > header {
    background:#FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 80px;
    z-index:999999;
    padding:0 calc((100% - 1200px)/2);
    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;
    color:#323232;
}
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;
}

/*module banner style*/
section[data-module="banner"]{
    margin-top:80px;
    padding:0;
    overflow: hidden;
}
section[data-module="banner"] > img{
    height:568px;
    object-fit: cover;
}

/*module introduction*/
section[data-module="introduction"]{
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background: #0D1021;
    color:#FFFFFF;
}
section[data-module="introduction"] > h1,section[data-module="introduction"] > h2{
    font-size:30px;
    line-height: 50px;
    width:190px;
}
section[data-module="introduction"] > p::before,section[data-module="introduction"] > p::after{
    display: inline-block;
    background:#16192A;
    content:'';
    position: absolute;
    top:40px;
    left:-15px;
    width:30px;
    height:30px;
    transform:rotate(45deg);
    box-shadow: 0 0 5px rgba(100,100,100,.6) inset;
}
section[data-module="introduction"] > p::after{
    box-shadow: none;
    left:-9px;
    border-radius: 5px;
}
section[data-module="introduction"] > p{
    background:#16192A;
    position: relative;
    width:940px;
    height:175px;
    line-height: 38px;
    font-size:19px;
    padding:30px 50px;
    border-radius:10px;
    box-shadow: 0 0 7px rgba(100,100,100,.6) inset;
}
h2[role=doc-subtitle]{
    background: linear-gradient(to right,transparent,#3C4566,transparent);
    width: 410px;
    height:60px;
    min-height: 60px;
    color:#FFFFFF;
    text-align: center;
    font-size:30px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: 1px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(to right, #0B0D1D, #97A1CC, #0B0D1D) 1 0;
}
/*module reason styles*/
section[data-module=reason]{
    background: #131424;
}
section[data-module=reason] > ol{
    display: flex;
    justify-content: space-between;
    width:1200px;
    padding:40px 0 20px 0;
}
section[data-module=reason] > ol > li::before{
    content:attr(data-serial);
    color:#E9BC9E;
    font-size:70px;
    margin-left:-20px;
    line-height: 30px;
}
section[data-module=reason] > ol > li{
    background:linear-gradient(to right,#F3D4BE,#DD9F75);
    position: relative;
    width:380px;
    height:305px;
    border-radius: 15px;
    padding:50px 40px;
}
section[data-module=reason] > ol > li::after{
    display: inline-block;
    content:'';
    background:url(../images/shine-bg.png) no-repeat top left;
    background-size:240px;
    position: absolute;
    top:-15px;
    right:70px;
    width:240px;
    height:16px;
}
section[data-module=reason] > ol > li > h3{
    color:#4A2B21;
    font-size:22px;
    line-height: 32px;
    margin-top:-60px;
    z-index:100;
}
section[data-module=reason] > ol > li > h3 > mark{
    background:linear-gradient(transparent 50%,#FFB27B 50%);
    color:#4A2B21;
}
section[data-module=reason] > ol > li > p{
    color:#0C0F22;
    font-size:17px;
    line-height: 24px;
    margin-top:15px;
}

/*module level styles*/
section[data-module=level]{
    background:#0B0D1D;
}
section[data-module=level] table{
    border-collapse: collapse;
    width:1200px;
    color:#C5CADF;
    border:1px solid #393E57;
    font-size:20px;
    margin:40px 0 30px 0;
}
section[data-module=level] table th{
    background:#232741;
    height:56px;
    border:1px solid #393E57;
    color:#DCC9BC;
}
section[data-module=level] table td{
    background-color:#191D32;
    height:56px;
    text-align: center;
    border:1px solid #393E57;
    font-size:17px;
}
section[data-module=level] table td:first-child{
    color:#ECC4A8;
    font-weight: bold;
}
section[data-module=level] p{
    width:100%;
    color:#5E627A;
    font-size:14px;
    text-align: right;
    line-height: 0;
}

/*module process styles*/
section[data-module=process]{
    background:#0D0F2B;
    padding-bottom: 100px;
}
section[data-module=process] >div{
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin-top:40px;
}
section[data-module=process] >div > dl{
    background:linear-gradient(135deg,#2D3042,#1B1F33);
    display: flex;
    flex-direction: column;
    align-items: center;
    width:560px;
    height:580px;
    padding:30px 70px;
    border-radius: 15px;
}
section[data-module=process] > div > dl > dt{
    background-image:linear-gradient(to right,#F9E5D4,#D89B73);
    background-clip: text;
    font-size:26px;
    font-weight: 700;
    color:transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
section[data-module=process] > div > dl > dd{
    background:#2D3042;
    position: relative;
    width:100%;
    min-height:100px;
    border-radius:10px;
    box-shadow: 0 0 7px rgba(100,100,100,.6) inset;
    color:#EFF5FF;
    margin-top:24px;
    padding:10px 0;
}
section[data-module=process] > div > dl > dd::before,section[data-module=process] > div > dl > dd::after{
    background:#2D3042;
    display: block;
    content:'';
    position: absolute;
    left:50%;
    width:20px;
    height:20px;
    box-shadow: 0 0 7px rgba(100,100,100,.6) inset;
    transform:rotate(45deg) translateX(-50%);
    bottom:-16px;
}
section[data-module=process] > div > dl > dd::after{
    box-shadow: none;
    bottom: -12px;
    border-radius: 3px;
}
section[data-module=process] > div > dl > dd:last-child::before,section[data-module=process] > div > dl > dd:last-child::after{
    display: none;
}
section[data-module=process] > div > dl > dd > h3{
    text-align: center;
    font-size:20px;
    margin-top:10px;
}
section[data-module=process] > div > dl > dd > p{
    color:#F9F9F9;
    padding:10px 15px;
    line-height: 25px;
    text-align: center;
    font-size:15px;
}
section[data-module=process] > div > dl:last-child > dd > p{
    padding:10px 30px;
    text-align: left;
}
section[data-module=process] > div > dl > dd > p >a{
    color:#78A7F5;
    text-decoration: underline;
}
section[data-module=process] > div > dl >dd > p >mark{
    color:#EBC2A6;
    background:transparent;
}

/*module features styles*/
section[data-module=features]{
    background:#131424;
    padding-bottom:100px;
}
section[data-module=features] > figure{
    background:linear-gradient(160deg,#1C193D,#191648);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width:1200px;
    height:368px;
    border-radius:20px;
    padding:0 70px;
    margin-top:40px;
}
section[data-module=features] > figure > img{
    object-fit: contain;
}
section[data-module=features] >figure > figcaption > h3{
    background: linear-gradient(to right, #F9E5D5 10%, #DD9E75 35%);
    background-clip: text;
    color: transparent;
    font-size:26px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
section[data-module=features] >figure > figcaption > p{
    font-size:18px;
    line-height: 28px;
    color:#FFFFFF;
    margin-top:20px;
}

/* module course styles*/
section[data-module=course]{
    background:#111323;
    padding-bottom:110px;
}
section[data-module=course] > ul{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: 650px 350px;
    grid-gap: 30px 40px;
    width:1200px;
    margin-top:90px;
    display: -ms-grid;
    -ms-grid-columns:1fr 40px 1fr;
    -ms-grid-rows:650px 30px 350px;
}
section[data-module=course] > ul > li{
    background:#1E223C;
    border-radius: 20px;
    padding:60px 55px
}
section[data-module=course] > ul > li:nth-child(2){
    -ms-grid-column: 3;
}
section[data-module=course] > ul > li:last-child{
    position: relative;
    grid-row:2/3;
    grid-column: 1/-1;
    padding:90px 0 0 55px;
    -ms-grid-row:3;
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
}
section[data-module=course] > ul > li > h3{
    display: inline-block;
    background: linear-gradient(to right, #F9E5D5, #DD9E75);
    background-clip: text;
    color:transparent;
    font-size: 30px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
section[data-module=course] > ul > li > p{
    display: grid;
    grid-template-columns: 260px auto;
    grid-gap:20px;
    font-size:19px;
    color:#F9F9F9;
    margin:30px auto;
    display: -ms-grid;
    -ms-grid-rows:30px 20px 30px;
    -ms-grid-columns:260px 20px 200px;
}
section[data-module=course] > ul > li > p > span:nth-child(2){
    -ms-grid-column:3;
}
section[data-module=course] > ul > li > p > span:nth-child(3){
    -ms-grid-row:3;
    -ms-grid-column:1;
    -ms-grid-column-span: 3;
}
section[data-module=course] > ul > li:last-child > p{
    display: flex;
    flex-direction: column;
}
section[data-module=course] > ul > li:last-child > img{
    position: absolute;
    top:40px;
    right:30px;
}

/*module directions style*/
section[data-module=directions]{
    background:linear-gradient(to right,#EDC7AC,#DD9E75);
    height:315px;
}
section[data-module=directions] > h2{
    background:linear-gradient(to right,transparent,#ECC6AD,transparent);
    color:#6D3100;
    border-image: linear-gradient(to right, transparent, #FEFEFE, transparent) 1 0;
}
section[data-module=directions] > ol{
    position: relative;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap:20px 100px;
    font-size:18px;
    color:#4A2B21;
    margin-top:40px;
    display:-ms-grid;
    -ms-grid-columns:1fr 1fr;
    -ms-grid-rows:40px 40px 40px;
}
section[data-module=directions] > ol::after{
    position: absolute;
    content:url(../images/masonry.png);
    right:70px;
    bottom:-100px;
}
section[data-module=directions] > ol > li:nth-child(2){
    -ms-grid-row:1;
    -ms-grid-column:2;
}
section[data-module=directions] > ol > li:nth-child(3){
    -ms-grid-row:2;
    -ms-grid-column:1;
}
section[data-module=directions] > ol > li:nth-child(4){
    -ms-grid-row:2;
    -ms-grid-column:2;
}
section[data-module=directions] > ol > li:nth-child(5){
    -ms-grid-row:3;
    -ms-grid-column:1;
}

/*module aboutus styles*/
section[data-module=aboutus]{
    background:#131424;
    padding-top: 100px;
    padding-bottom: 100px;
}
section[data-module=aboutus] > [role=grid]{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-gap: 0 150px;
    background:linear-gradient(45deg,#353C58,#181E38);
    width:1200px;
    height:480px;
    border-radius: 20px;
    padding:60px 80px;
    margin-top:60px;
    display: -ms-grid;
    -ms-grid-columns:1fr 1fr;
    -ms-grid-rows:150px 150px 150px;
}
section[data-module=aboutus] > [role=grid] > :nth-child(2){
    -ms-grid-column:2;
}
section[data-module=aboutus] > [role=grid] h3{
    display: inline-block;
    background: linear-gradient(to right, #F9E5D5, #DD9E75);
    background-clip: text;
    color:transparent;
    font-size:25px;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
section[data-module=aboutus] > [role=grid] p{
    color:#FFFFFF;
    margin:10px 0 60px 0;
    line-height: 28px;
}
/*module case styles*/
section[data-module=case]{
    background:#D8DEE7;
}
section[data-module=case] > h2{
    font-size:35px;
    margin-bottom:45px;
}
section[data-module=case] [role=grid]{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-gap: 10px;
}
section[data-module=case] > img{
    width: 220px;
}
/*footer styles*/
body > footer{
    display: flex;
    background: #323232;
    justify-content: center;
    align-items: center;
    width:100%;
    color:#FFFFFF;
    font-size:14px;
    height:60px;
}
body > footer > *{
    padding:0 3px;
}
body > footer > a{
    color:#FFFFFF;
}

/*IE10~11 hack*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    section[data-module=process] > div > dl > dt {
        background:transparent;
        color:#D89B73;
    }
    section[data-module=features] >figure > figcaption > h3{
        background:transparent;
        color:#D89B73;
    }
    section[data-module=course] > ul > li > h3{
        background:transparent;
        color:#D89B73;
    }
    section[data-module=aboutus] > [role=grid] h3{
        background:transparent;
        color:#D89B73;
    }
    section[data-module=course] > ul > li:last-child > p{
        line-height: 40px;
    }
    section[data-module=course] > ul > li > p > span{
        display: block;
    }
}