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

    .yd-fz-cxlck{
        display: none;
    }
    .fz-cxlck{
        width: 14.4rem;
        margin: auto;
        margin-top: 0.6rem;
    }
    .cxlck-content{
        position: relative;
        height: 7rem;
    }
    .cxlck-content-center{
        width: 3.07rem;
        height: 3.07rem;
        border: 0.1rem solid #F2F2F3;
        border-radius: 50%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        left: 50%;
        top: 50%;
        margin-left: -1.535rem;
        margin-top: -1.535rem;
    }
    .cxlck-content-center>span{
        position: absolute;
        width: 0.22rem;
        height: 0.22rem;
        border-radius: 50%;
        /* border: solid 1px red; */
    }
    .cxlck-content-center>span:nth-of-type(1){
        background: #2DA30D;
        left: -0.11rem;
        top: 1rem;
    }
    .cxlck-content-center>span:nth-of-type(2){
        background: #9E22DE;
        left: 0.6rem;
        top: 2.8rem;
    }
    .cxlck-content-center>span:nth-of-type(3){
        background: #2959F6;
        right: 0.6rem;
        top: 2.8rem;
    }
    .cxlck-content-center>span:nth-of-type(4){
        background: #FA8127;
        right: -0.11rem;
        top: 1rem;
    }
    .cxlck-content-center>span:nth-of-type(5){
        background: #D90000;
        left: 50%;
        margin-left: -0.11rem;
        top: -0.16rem;
    }
    .cxlck-content>ul>li{
        width: 1.48rem;
        height: 1.48rem;
        position: absolute;
        font-family: "ruiyizhenyan";
        font-size: 0.56rem; 
        display: flex;
        align-items: center;
        justify-content: center;
        /* border: solid 1px red; */
     
    }

    .cxlck-content>ul>li:nth-of-type(1){

        background-image: url(/img/html5_join/course/fz/pc-kao.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #2DA30D;
        left: 4rem;
        top: 2.4rem;
        
    }

    .cxlck-content>ul>li:nth-of-type(2){

        background-image: url(/img/html5_join/course/fz/pc-cha.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #9E22DE;
        left: 4.8rem;
        top: 5rem;

    }
    .cxlck-content>ul>li:nth-of-type(3){

        background-image: url(/img/html5_join/course/fz/pc-lian.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #2959F6;
        right: 4.8rem;
        top: 5rem;


    }
    .cxlck-content>ul>li:nth-of-type(4){

        background-image: url(/img/html5_join/course/fz/pc-xue.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #FA8127;
        right: 3.8rem;
        top: 2rem;

    }
    .cxlck-content>ul>li:nth-of-type(5){

        background-image: url(/img/html5_join/course/fz/pc-ce.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        color: #D90000;
        top:0.3rem;
        left: 50%;
        margin-left:-0.74rem;

    }
    .cxlck-content-ce,
    .cxlck-content-xue,
    .cxlck-content-lian,
    .cxlck-content-cha,
    .cxlck-content-kao{
        position:absolute;
        width: 6.2rem;
        height: 1.21rem;
        border: solid 0.01rem #E5E5E5;
        padding-left: 0.39rem;
        padding-top: 0.1rem;
        left: 60%;
        top: 0.2rem;
        box-sizing: border-box;
        border-radius: 0.05rem;
        padding-right: 0.05rem;
        font-family: "siyuan-r";
    }
    .cxlck-content-ce::after,
    .cxlck-content-xue::after,
    .cxlck-content-lian::after
   
   {

        content: "";
        display: block;
        width: 0.2rem;
        height: 0.2rem;
        overflow: hidden;
        position: absolute;
        border: solid 0.01rem #E5E5E5;
        left: -0.11rem;
        top: 50%;
        transform: rotate(45deg);
        border-radius: 0.05rem;
        background-color: #fff;
        border-right: initial;
        border-top: initial;

        
    }

    .cxlck-content-ce p:nth-of-type(1),
    .cxlck-content-xue p:nth-of-type(1),
    .cxlck-content-lian p:nth-of-type(1),
    .cxlck-content-cha p:nth-of-type(1),
    .cxlck-content-kao p:nth-of-type(1){

        font-size: 0.2rem;
        color: #C90000;
        font-family: "siyuan-r";
        font-weight: bold;
        box-sizing: border-box;

    }
    .cxlck-content-xue p:nth-of-type(1){
        color: #FA8127;
    }
    .cxlck-content-lian p:nth-of-type(1){
        color: #2959F6;
    }
    .cxlck-content-cha p:nth-of-type(1){
        color:#9E22DE;
    }
    .cxlck-content-kao p:nth-of-type(1){
        color: #2DA30D;
    }
    .cxlck-content-ce p:nth-of-type(2),
    .cxlck-content-xue p:nth-of-type(2),
    .cxlck-content-lian p:nth-of-type(2),
    .cxlck-content-cha p:nth-of-type(2),
    .cxlck-content-kao p:nth-of-type(2){

        font-size: 0.2rem;
        color: #333333;
        font-size: 0.14rem; 
    

    }

    .cxlck-content-xue{

        width: 3.77rem;
        height: 1.42rem;
        top: 2rem;
        left: 75%;
    }
    .cxlck-content-lian{
        width: 4.56rem;
        height: 1.4rem;
        top: 5rem;
        left: 68%;
    }
    .cxlck-content-cha{
        width: 4.56rem;
        height: 1.40rem;
        top: 5rem;
        left: 0;
        padding-left: 0.05rem;
        padding-right: 0.22rem;
    }
    .cxlck-content-kao{

        width: 3.76rem;
        height: 1.42rem;
        top: 2.4rem;
        left: 0;
        padding-left: 0.05rem;
        padding-right: 0.39rem;

    }
    .cxlck-content-cha::after,
    .cxlck-content-kao::after{
        content: "";
        display: block;
        width: 0.2rem;
        height: 0.2rem;
        overflow: hidden;
        position: absolute;
        border: solid 0.01rem #E5E5E5;
        right: -0.11rem;
        top: 50%;
        transform: rotate(45deg);
        border-radius: 0.05rem;
        background-color: #fff;
        border-left: initial;
        border-bottom: initial;
    }

}

@media screen and (max-width:960px) {



    .fz-cxlck{
        display: none;
    }

    .yd-fz-cxlck{
        width: 3.75rem;
        height: 7.5rem;
        position: relative;
        margin-top: 0.3rem;
    }
    
    
    .cxlck-left{
    
        width: 1.21rem;
        height: 5rem;
        position: relative;
        margin-top: 1.3rem;
    
    }
    
    .cxlck-left>img:nth-of-type(1){
        position: absolute;
        width: 0.4rem;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    .cxlck-left>img:nth-of-type(2){
        width: 1.16rem;
        left: 0;
    }
    .cxlck-left>span{
        position: absolute;
        width: 0.11rem;
        height: 0.11rem;
        border-radius: 50%;
    }
    .cxlck-left>span:nth-of-type(1){
        background-color: #D90000;
        left: 0.1rem;
        top: 0.45rem;
    }
    .cxlck-left>span:nth-of-type(2){
        background-color: #FA8127;
        top: 1.3rem;
        left: 0.82rem;
    }
    .cxlck-left>span:nth-of-type(3){
        background-color: #2959F6;
        top: 2.45rem;
        left: 1.1rem;
    }
    .cxlck-left>span:nth-of-type(4){
        background-color: #9E22DE;
        top: 3.45rem;
        left: 0.85rem;
    }
    .cxlck-left>span:nth-of-type(5){
        background-color: #2DA30D;
        top: 4.4rem;
        left:0.1rem;
    }
    
    .yd-fz-cxlck ul li{
    
        position: absolute;
        width: 0.73rem;
        height: 0.75rem;
        font-size: 0.28rem;
        font-family: "ruiyizhenyan";
        display: flex;
        align-items: center;
        justify-content: center;
    
    
    }
    .yd-fz-cxlck ul li:nth-of-type(1){
        background-image: url(/img/html5_join/course/fz/yd-ce.png);
        background-size: 100% 100%;
        left: 0.18rem;
        top: 1rem;
        color: #D90000;
    }
    .yd-fz-cxlck ul li:nth-of-type(2){
        background-image: url(/img/html5_join/course/fz/yd-xue.png);
        background-size: 100% 100%;
        left: 1rem;
        top: 2.2rem;
        color: #FA8127;
    }
    
    .yd-fz-cxlck ul li:nth-of-type(3){
        background-image: url(/img/html5_join/course/fz/yd-lian.png);
        background-size: 100% 100%;
        left: 1.3rem;
        top: 3.5rem;
        color: #FA8127;
    }
    .yd-fz-cxlck ul li:nth-of-type(4){
        background-image: url(/img/html5_join/course/fz/yd-cha.png);
        background-size: 100% 100%;
        left: 1.1rem;
        top: 4.7rem;
        color: #9E22DE;
    }
    .yd-fz-cxlck ul li:nth-of-type(5){
        background-image: url(/img/html5_join/course/fz/yd-kao.png);
        background-size: 100% 100%;
        left: 0.1rem;
        top: 6rem;
        color: #2DA30D;
    }
    .yd-cxlck-content-ce,
    .yd-cxlck-content-xue,
    .yd-cxlck-content-lian,
    .yd-cxlck-content-cha,
    .yd-cxlck-content-kao{
    
        box-sizing: border-box;
    
        padding-left: 0.1rem;
        padding-right: 0.1rem;
        padding-top: 0.05rem;
        padding-bottom: 0.05rem;
    
        width: 2.64rem;
        height: 1.2rem;
        font-size: 0.1rem;
        font-family: "siyuan-r";
        border: solid 0.01rem #E5E5E5;
    
        position: absolute;
        left: 0.9rem;
        top: 0.8rem;
        border-radius: 0.03rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
      
    }
    .yd-cxlck-content-ce::after,
    .yd-cxlck-content-xue::after,
    .yd-cxlck-content-lian::after,
    .yd-cxlck-content-cha::after,
    .yd-cxlck-content-kao::after{
        content: "";
        display: block;
        overflow: hidden;
        position: absolute;
        top: 50%;
        margin-top: -0.05rem;
        width: 0.1rem;
        height: 0.1rem;
        /* background: red; */
        transform: rotate(45deg);
        border: solid 0.01rem #E5E5E5;
        border-right: initial;
        border-top: initial;
        left: -0.06rem;
        background-color: #fff;
    }
    .yd-cxlck-content-ce p:nth-of-type(1),
    .yd-cxlck-content-xue p:nth-of-type(1),
    .yd-cxlck-content-lian p:nth-of-type(1),
    .yd-cxlck-content-cha p:nth-of-type(1),
    .yd-cxlck-content-kao p:nth-of-type(1){
        color: #C90000;
        font-weight: bold;
    }
    
    
    .yd-cxlck-content-xue p:nth-of-type(1){
    
        color:#FA8127;
    
    }
    .yd-cxlck-content-lian p:nth-of-type(1){
    
        color:#2959F6;
    
    }
    .yd-cxlck-content-cha p:nth-of-type(1){
    
        color:#9E22DE;
    
    }
    .yd-cxlck-content-kao p:nth-of-type(1){
    
        color:#2DA30D;
    
    }
    
    
    
    .yd-cxlck-content-ce p:nth-of-type(2),
    .yd-cxlck-content-xue p:nth-of-type(2),
    .yd-cxlck-content-lian p:nth-of-type(2),
    .yd-cxlck-content-cha p:nth-of-type(2),
    .yd-cxlck-content-kao p:nth-of-type(2)
    {
        color: #333333;
        
    
    }
    .yd-cxlck-content-ce{
        height: 0.9rem;
        top: 1.2rem;
    }
    .yd-cxlck-content-xue{
    
        width: 1.8rem;
        height: 1rem;
        left: 1.85rem;
        top: 2.2rem;
    
    }
    .yd-cxlck-content-lian{
    
        width: 1.5rem;
        height: 1.2rem;
        top: 3.55rem;
        left: 2.2rem;
    
    }
    .yd-cxlck-content-cha{
        width: 1.82rem;
        height: 1.1rem;
        top: 5rem;
        left: 1.9rem;
    }
    .yd-cxlck-content-kao{
        width: 2.65rem;
        height: 0.8rem;
        top: 6.35rem;
        left: 0.9rem;
    }



}