proginn-frontend/assets/css/credit/index.scss

@import "../scssCommon";

.credit {
  position: relative;
  margin: -85px 0 0;
  width: 100%;
  background-color: #fff;

  .contentArea {
    width: 1000px;
    margin: 57px auto 57px auto;

    .screen {
      width: 100%;

      .screenTop {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .title {
          font-weight: 600;
          color: rgba(50, 50, 50, 1);
          font-size: 36px;
          line-height: 50px;
        }
        .line {
          margin: 16px 0;
          width: 44px;
          height: 3px;
          background: rgba(48, 142, 255, 1);
          border-radius: 1.5px;
        }
        .subTitle {
          font-size: 14px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          line-height: 20px;
        }
      }

      .screenList {
        margin-top: 30px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex;

        .cell {
          width:324px;
          height:361px;
          background:rgba(255,255,255,1);
          box-shadow:0 6px 23px 0 rgba(13,24,36,0.07);
          border-radius:8px;

          .cellImg {
            font-size: 0;
            img {
              width: 324px;
              height: 220px;
            }
          }

          .cellBot {
            padding: 8px;
            height: 141px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .cellTitle {
              text-align: center;
              font-weight: 500;
              color: rgba(17, 28, 45, 1);
              font-size:20px;
              line-height:28px;
            }
            .cellSubTitle {
              margin-top: 10px;
              text-align: left;
              font-size: 14px;
              font-weight: 400;
              color: rgba(126, 134, 147, 1);
              line-height: 20px;
            }
          }
        }
      }

    }

    .trust {
      width: 100%;
      margin-top: 77px;

      .trustTop {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .title {
          font-weight: 600;
          color: rgba(50, 50, 50, 1);
          font-size: 36px;
          line-height: 50px;
        }
        .line {
          margin: 16px 0;
          width: 44px;
          height: 3px;
          background: rgba(48, 142, 255, 1);
          border-radius: 1.5px;
        }
      }

      .trustList {
        margin-top: 30px;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        display: flex;
        flex-direction: column;


        .cell {
          width: 100%;
          height: 300px;
          border-radius: 8px;
          display: flex;
          justify-content: space-between;
          align-items: center;




          .cellImg {
            flex-shrink: 0;
            font-size: 0;

            img {
              width: 481px;
              height: 300px;
            }
          }

          .cellRight{
            width: 482px;
            margin-left: 35px;
            height: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;

            .cellTitle {
              text-align: left;
              font-size:34px;
              font-weight:600;
              color:rgba(34,34,34,1);
              line-height:48px;
            }
            .cellSubTitle {
              margin-top: 17.44px;
              font-size:17px;
              font-weight:400;
              color:rgba(51,51,51,1);
              line-height:24px;
            }
          }

          &:nth-child(even) {
            flex-direction: row-reverse;
            .cellRight {
              margin-left: 0;
              margin-right: 35px;
            }
          }
        }
      }
    }
  }

  .bottomArea {
    position: relative;
    width: 100%;

    .img {
      left: 0;
      top: 0;
      width: auto;
      vertical-align: middle;
    }

    .wordBox {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;

      p {
        position: absolute;
        font-size:36px;
        font-weight:300;
        color:rgba(255,255,255,1);
        line-height:64px;
        letter-spacing:5px;
      }
    }
  }
}


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

}