.model {
        width: 100%;
        padding: 60px 0;
        background: #121214;
        color: #fff;
        overflow: hidden;
    }

    .model.special {
        background-color: #fff;
        color: #000;
        padding: 20px 0;
    }

     .model .tou_01 {
        margin-bottom: 30px;
    }

    .model .tou_01 .p2 {
        font-size: 24px;
        max-width: 855px;
        margin: 5px auto 0px;
        text-align: center;
        line-height: 40px;
    }

     .model .tou_01 .p2.black {
        color: #000;
    }

    .model .tou_01 .h2 {
        font-size: 50px;
        text-align: center;
        /*text-transform: uppercase;*/

    }

   .bold {
        font-weight: bold;
    }

    .tList {
        display: flex;
        padding: 0 10%;
        margin-top: 30px;
    }

    .tList .item {
        max-width: 692px;
        margin: 0 25px;
        position: relative;
        height: 0;
        padding-top: 24%;
        width: 48%;
        background: url('./images/back.png') no-repeat center top;
        background-size: 100%;
    }

     .tList .item img {
        position: absolute;
        /*width: 54%;*/
        width: 36%;
        bottom: 0;
        right: 4%;
        object-fit: cover;
        transition: all ease-in-out .3s;
        border-radius: 20px;
    }

     .model .tList .group {
        position: absolute;
        left: 5%;
        top: 5%;
    }

     .model .tList .p2 {
        font-size: 25px;
        max-width: 855px;
        text-align: left;
        color: #fff;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .model .tList .more {
        height: 51px;
        line-height: 51px;
        display: inline-block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.49);
    }

    .model .tList .more a {
        color: #fff;
    }

    .model .tList .more:after {
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        vertical-align: middle;
        margin-left: 10px;
        background: url(./images/right-icon.png) no-repeat center top;
        background-size: 100%;
    }





     .more>div:after{
        display: none;
     }
      .more>div a{
         display: block;
         width:100%;
         height:100%;
         color: #000000;
     }
     
      .flex-box .ulist li{
         width:100%;
         float: left;
         padding-left:20px;
         box-sizing: border-box;
         line-height: 30px;
         position: relative;
     }
      .flex-box .ulist li:after{
         content: "";
         width:6px;
         height:6px;
         border-radius:50%;
         background-color:#0b68f2;
         position: absolute;
         left:0;
         top:15px;
         /* margin-top:-3px; */
     }


   
      .media .flex-box{
         display: flex;
         width:100%;
         margin:0 auto ;
         border-radius:12px;
         /*max-width:1438px;*/
         padding:30px 60px 10px 30px;
         box-sizing: border-box;
         align-items: flex-start;
         justify-content: space-between;background-color:#f3f7fe;
        
         border:1px solid rgba(11,104,242,0.1);
     }
      .media .flex-box .picture{
         max-width: 693px;
         width:56%;
     }
      .media .flex-box .picture .img_box{
         padding-top:61%;
         position: relative;
         height:0;
         width:100%;
     }
      .media .flex-box .picture img{
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         object-fit: cover;
         transition: all ease-in-out .3s;
         border-radius:20px;
     }
      .media .flex-box .describe{
         box-sizing: border-box;
         width:45%;
         padding-left:0;
     }
     .media .flex-box .describe .title {
        font-size: 30px;
        color: #000;
        margin-top: 20px;
        font-family: Kanit-Medium;
    }
    .flex-box .describe .more {

        width: 170px;
       
        border-radius: 50px;
        text-align: center;
        background: rgba(226, 197, 33, 0.29);
        display: inline-block;
       
        margin-top: 20px;
        border: none;




        padding: 0 5px;
        height: 62px;
        line-height: 62px;
    }
     .more>div {
        background-color: #E2C521;
        height: 52px;
        line-height: 52px;
        border-radius: 50px;
        /* padding: 0 30px; */
        margin-top: 5px;
    }
     .more>div a:after {
        content: "";
        display: inline-block;
        width: 30px;
        height: 20px;
        vertical-align: middle;
        margin-left: 10px;
        background: url(./images/arrow-right-white.png) no-repeat center center;
        background-size: 70%;
    }


















    @media screen and (max-width: 1700px) {
        .model {
            padding: 20px 0;
        }
    }

    @media only screen and (max-width: 1200px) {
        .media .flex-box .picture {
            width: 52%;
        }
       .media .flex-box .describe {
            width: 44%;
        }
        .media .flex-box .describe .title {
            font-size: 24px;
        }
        .media .flex-box .describe .content {
            margin: 6px 0 10px 0;
        }
    }

    @media only screen and (max-width:950px){
        .media .flex-box{
            margin-bottom:0;flex-direction: column;
        }
         .model .ulist{
            /*flex-direction: column;*/
        }
         .model .ulist .item{
            width:100%;
            margin:0 auto 20px;
        }
         .tList{
            flex-direction: column;
        }
         .tList .item{
            width:100%;
            padding-top:53%;
            margin:0 auto 30px;
        }
         .group{
            flex-direction: column;
        }
        .media .flex-box .picture {
            width: 100%;
        }
        .media .flex-box .describe {
            width: 100%;
            margin-top: 0px;
        }
    }