@import url('https://fonts.googleapis.com/css2?family=Sansita+Swashed:wght@300..900&display=swap');

    @keyframes forwardRotate {
      from {
        transform: rotate(0deg), translate(-50% -50%);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes reverseRotate {
      from {
        transform: rotate(-0deg);
      }

      to {
        transform: rotate(-360deg);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translate3d(0, 30%, 0);
      }

      to {
        opacity: 1;
        transform: translateZ(0);
      }
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes move {
      from {
        transform: translate3d(0, 0, 0);
      }

      to {
        transform: translate3d(75px, 0, 0);
        background: url(/m/home/images/main/douzone/new/m_init_on.png) no-repeat center;
      }
    }

    /*
    * {
      margin: 0;
      padding: 0;
      list-style: none;
      box-sizing: border-box;
      text-decoration: none;
      font-family: 'Pretendard Variable', Pretendard, -apple-system,
      BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI',
      'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
      }
    */

      #douzone_m {
      width: 750px;
      margin: 0 auto;
      overflow-x: hidden;


      .inner {
        width: 670px;
        margin: 0 auto;
      }

      header {
        width: 100%;
        position: fixed;
        z-index: 99;
        background: #fff;
        left: 50%;
        transform: translateX(-50%);
        border-bottom: 1px solid #e0e0e0;

        nav {
          .navHead {
            padding: 30px 0 27px 0;
            display: flex;
            justify-content: space-between;

            .ham {
              width: 40px;
              padding-top: 8px;
            }
          }

          ul {
            text-align: center;
            padding-bottom: 10px;

            li button {
              border: none;
              background: none;
              font-size: 36px;
              padding: 20px 0;
              color: #222;
              width: 100%;
            }

            li:nth-child(1) button {
              padding-top: 10px;
            }
          }
        }
      } /*header */
      
      main {
        padding-top: 120px;
        text-align: center;
        
        h2 {
          font-size: 90px;
          font-weight: 700;
          color: #222;
        }

        h3 {
          font-size: 50px;
          font-weight: 700;
          color: #222;
        }

        h4 {
          font-size: 40px;
          font-weight: 500;
        }

        h5 {
          font-size: 30px;
          font-weight: 500;
        }

        h2,
        h3,
        h4,
        h5,
        p,
        td {
          color: #fff;
          letter-spacing: -0.5px;
        }


        img:not(.photo img) {
          display: inline-block;
        }

        .init {

          .initTitle {
            padding: 100px 0 50px 0;
            background: url(/m/home/images/main/douzone/new/m_init_bg01.jpg) no-repeat center/cover;

            .titleCont {

              h2,
              h3,
              h4,
              h5,
              p {
                text-align: left;
              }

              h2 {
                font-weight: 800;
                line-height: 90px;
                padding-bottom: 45px;
                text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);

                span {
                  color: #27BEFF;
                }
              }

              h4:nth-of-type(1) {
                padding-bottom: 10px;
              }

              h5 {
                padding: 0 0 10px 5px;
              }

              p:nth-of-type(1) {
                font-size: 24px;
                font-weight: 300;
                padding-bottom: 35px;
              }
            }

            .btnCont {
              background: #FF5F2F;
              border-radius: 50px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 25px 45px;

              h4,
              p {
                display: inline-block;

                span {
                  color: #000;
                  font-weight: 700;
                }
              }

              h4 {
                font-weight: 600;
                font-size: 36px;
              }

              .radio {
                background: #E34110;
                border-radius: 50px;
                width: 130px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 10px;
                padding: 10px;

                .radioBtn {
                  width: 41px;
                  height: 41px;
                  background: url(/m/home/images/main/douzone/new/m_init_off.png);
                  position: absolute;
                  z-index: 3;
                  top: 4px;
                  left: 5px;
                  /* display: none; */
                  animation-name: move;
                  animation-duration: 2s;
                  animation-direction: alternate;
                  animation-iteration-count: infinite;
                  animation-timing-function: ease-in-out;
                }

                p {
                  font-weight: 600;
                  font-size: 24px;
                }

                .on {
                  opacity: 0;
                  animation-name: fadeIn;
                  animation-duration: 2s;
                  animation-direction: alternate;
                  animation-iteration-count: infinite;
                  animation-timing-function: ease-in-out;
                }

                .off {
                  color: #FF5F2F;
                  animation-name: fadeIn;
                  animation-duration: 2s;
                  animation-direction: alternate-reverse;
                  animation-iteration-count: infinite;
                  animation-timing-function: ease-in-out;
                }
              }
            }
          }

          .initCont {
            padding: 50px 0 10px 0;
            background: url(/m/home/images/main/douzone/new/m_init_bg02.jpg) no-repeat center;
            
            .title {
              h3 {
                padding-bottom: 10px;
                font-size: 40px;
              }

              h5 {
                padding-bottom: 85px;

                span {
                  font-size: 18px;
                }
              }
            }

            .cont {

              .ani {
                animation: fadeInUp 2s;
              }

              ul {
                margin: 0 auto;

                li {
                  display: flex;
                  align-items: center;
                  gap: 20px;
                  padding: 0 0 30px 60px;

                  h5 {
                    padding-left: 20px;
                  }
                }
              }

              span {
                color: #C5C5C5;
              }

              .icon01 {
                width: 42px;
                height: 50px;
                background: url(/m/home/images/main/douzone/new/m_init_icon01.png) no-repeat center;
              }

              .icon02 {
                width: 42px;
                height: 50px;
                background: url(/m/home/images/main/douzone/new/m_init_icon02.png) no-repeat center;
              }

              .icon03 {
                width: 42px;
                height: 50px;
                background: url(/m/home/images/main/douzone/new/m_init_icon03.png) no-repeat center;
              }

              .icon04 {
                width: 42px;
                height: 50px;
                background: url(/m/home/images/main/douzone/new/m_init_icon04.png) no-repeat center;
              }

              .icon05 {
                width: 42px;
                height: 50px;
                background: url(/m/home/images/main/douzone/new/m_init_icon05.png) no-repeat center;
              }
            }
          }

          .initBanner {
            background: #1B0038;
            padding-top: 50px;

            p {
              font-size: 60px;
              font-weight: 600;
            }

            ul {
              li {
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 30px;
                padding-bottom: 50px;
                position: relative;
                text-align: left;

                .caption {
                  color: #4E1E81;
                  font-size: 24px;
                  padding-left: 10px;
                }

                .line {
                  width: 155px;
                  height: 1px;
                  background: #4E1E81;
                  position: absolute;
                  top: 13px;
                  left: 290px;
                }

                p,
                div {
                  display: inline-block;

                  span {
                    color: #FFBD32;
                  }
                }
              }
            }
          }
        }

        /* //init */


        .instructor {
          background: url(/m/home/images/main/douzone/new/m_instructor_bg.jpg) no-repeat center;
          padding-top: 50px;

          h3 {
            padding-bottom: 10px;

            span {
              color: #00ABFF;
            }
          }

          p:not(.profile p, li p, .tri p) {
            font-size: 18px;
            font-weight: 200;
            padding-bottom: 50px;
          }

          .instHead {
            .profile {
              display: flex;
              align-items: center;
              gap: 30px;
              margin-bottom: 50px;

              h5 {
                padding-bottom: 5px;
              }

              .profileTxt h5,
              p {
                text-align: left;
              }

              p {
                font-size: 18px;
                font-weight: 200;
                line-height: 24px;
              }

              .profileCap {
                color: #7EACD8;

                &::after {
                  content: '';
                  display: block;
                  width: 365px;
                  height: 2px;
                  background-color: #394C5D;
                  margin: 10px 0 15px 0;
                }
              }
            }

            .profileCont {
              li {
                text-align: left;
              }

              li:not(li:nth-child(4), li:nth-child(5)) {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 34px 50px;
                position: relative;

                &:nth-child(1) {
                  background: url(/m/home/images/main/douzone/new/m_instructor01.png) no-repeat center;

                  h5::after {
                    content: '';
                    display: block;
                    height: 60px;
                    width: 2px;
                    background: #fff;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 47%;
                  }
                }

                &:nth-child(2) {
                  background: url(/m/home/images/main/douzone/new/m_instructor02.png) no-repeat center;

                  p {
                    padding-right: 35px;
                  }

                  h5::after {
                    content: '';
                    display: block;
                    height: 60px;
                    width: 2px;
                    background: #fff;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 47%;
                  }
                }

                &:nth-child(3) {
                  background: url(/m/home/images/main/douzone/new/m_instructor03.png) no-repeat center;

                  h5::after {
                    content: '';
                    display: block;
                    height: 60px;
                    width: 2px;
                    background: #fff;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    left: 47%;
                  }
                }

                h5,
                p {
                  text-align: left;
                }

                h5 {
                  font-weight: 600;
                }

                p {
                  font-size: 18px;
                  line-height: 24px;
                }
              }

              li:nth-child(1),
              li:nth-child(2) {
                margin-bottom: 20px;
              }

              li:nth-child(4),
              li:nth-child(5) {
                background: rgba(246, 250, 253, 0.05);
                border: 1px solid #353B3D;
                border-radius: 20px;
                margin: 50px 0;
                padding: 50px 50px 0 50px;

                p {
                  text-align: left;
                  font-size: 18px;
                  line-height: 24px;
                  font-weight: 200;
                  padding-bottom: 50px;
                  color: #DBDBDB;
                  padding-left: 8px;
                }

                .profHead {
                  background: #011427;
                  padding: 8px 20px;
                  border-radius: 20px;
                  display: inline-block;
                  font-weight: 500;
                  margin-bottom: 20px;
                  color: #fff;

                }

                .italic {
                  font-family: 'Sansita Swashed', sans-serif;
                  color: #314B66;
                  font-weight: 300;
                  font-size: 14px;
                  padding-left: 5px;
                }

                .bold {
                  font-weight: 600;
                  color: #fff;
                }
              }
            }
          }

          /* //instHead */

          .instBody {
            position: relative;

            h3 {
              letter-spacing: 0;
            }

            h5 {
              color: #F6EF15;
              background: rgb(217, 217, 217, 0.2);
              border-radius: 90px;
              padding: 20px 50px;
              letter-spacing: -0.6px;
            }

            p {
              font-weight: 400;
              line-height: 24px;
            }

            .upper {
              margin-bottom: 80px;
            }

            .plus {
              background: url(/m/home/images/main/douzone/new/instructor_plus.png) no-repeat center;
              width: 40px;
              height: 40px;
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              top: 480px;
            }

            .tri {
              width: 670px;
              height: 730px;
              background: url(/m/home/images/main/douzone/new/m_instructor_center.png) no-repeat center;
              position: relative;
              font-size: 18px;
              margin-top: 50px;

              .tech {
                display: inline-block;
                font-size: 50px;
                font-weight: 600;
                padding-bottom: 25px;
              }

              .blue {
                color: #00ABFF;
              }

              p {
                position: absolute;
              }

              .ai {
                left: 0;
                top: 40px;
              }

              .cloud {
                right: 0;
                top: 0;
              }

              .kafka {
                bottom: -20px;
                left: 20%;
                width: 375px;
              }
            }
          }

          /* //instBody */

          .instFooter {
            padding-top: 120px;

            h3 {
              font-weight: 500;
            }
          }
        }

        /* //instructor */

	      /* 강사평 말풍선 섹션 Start*/
	      .testimonial {
		      background: #011B5C;
		      position: relative;
              margin-top:-1;
		      h3 {
			      position: absolute;
			      left: 50%;
			      top: 460px;
			      transform: translateX(-50%);
			      font-size: 40px;
			      color: #fff;
			      z-index: 20;
			      span {color: #FFFF35;}
		      }
		      .testimonial-device-image {
			      position: absolute;
			      left: 50%;
			      top: 50%;
			      transform: translate(-50%, -50%);
			      width: 53%;
			      img {width: 100%;height: auto;}
		      }
		      
		      .slide-container {
			      position: relative;
			      z-index: 10;
			      .testimonial-bubble-slider {
				      .testimonial-bubble-item {}
				      .testimonial-bubble-item img {width: 100%;}
				      .slick-dots {
					      position: absolute;
					      left: 50%;
					      bottom: 60px;
					      transform: translateX(-50%);
					      display: flex;
					      justify-content: center;
					      li {padding: 10px;}
					      button {
						      display: block;
						      font-size: 0;
						      width: 12px;
						      height: 12px;
						      border-radius: 50%;
						      background: #fff;
						      cursor: pointer;
						      opacity: 0.3;
						      .slick-active & {opacity: 1;}
					      }
				      }
			      }
		      }
	      }
	      /* 강사평 말풍선 섹션 End*/


        .cloud {
          padding: 50px 0 100px 0;
          position: relative;

          h3,
          h4 {
            color: #353B3D;
          }

          h3 {
            padding-bottom: 20px;
            color: #333;
          }

          h5 {
            color: #666;
            font-weight: 300;
          }

          .txt {
            padding-bottom: 100px;
            line-height: 29px;
          }

          .sub {
            padding-bottom: 10px;
          }

          p {
            color: #666;
            font-size: 24px;
            font-weight: 300;
          }


          .shift {
            padding: 30px 0;

            li {
              padding: 30px 0;
              color: #999;

              .past {
                font-size: 24px;
                color: #999;
              }

              &:nth-child(4) {
                padding-right: 80px;
              }
            }
          }

          .caption {
            position: absolute;
            font-size: 18px;
            color: #999;
            right: 110px;
            top: 1530px;
          }

          .present {
            padding-bottom: 50px;
            font-size: 24px;
            color: #999;
          }

          .graph {
            padding-top: 120px;

            li {
              img {
                padding-top: 25px;
              }

              span {
                display: inline-block;
                color: #999;
                font-size: 24px;
                font-weight: 200;
              }

              span:not(li:last-child span) {
                padding-bottom: 100px;
              }
            }

            .graphTitle {
              background: #102B6E;
              color: #fff;
              font-size: 36px;
              font-weight: 600;
              display: inline-block;
              padding: 20px 0;
              width: 460px;
              border-radius: 10px;
            }
          }

          .ai {
            padding-top: 50px;
          }
        }

        /* //cloud */


        .curriHead {
          background: #011B5C;
          padding-top: 100px;
          position: relative;


          img {
            display: block;
            margin: 0 auto;
          }

          h3,
          h5 {
            color: #fff;
          }

          .txt01 {
            padding-bottom: 245px;
          }

          .txt02 {
            font-weight: 200;
            padding: 270px 0 45px 0;

            span {
              color: #C804F9;
              font-weight: 500;
            }
          }

          .txt03 {
            padding-bottom: 100px;

            span {
              color: #04D4F9;
            }
          }

          .txt04 {
            font-weight: 200;
            padding-bottom: 10px;
          }

          .txt05 {
            padding-bottom: 100px;
          }


          .curriEdge {
            width: 380px;
            height: 380px;
            position: absolute;
            border-radius: 50%;
            margin: 10% auto;
            top: 21.6%;
            left: 24.5%;

            .edge_wrap {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
              /* border: 1px solid red; */
              border-radius: 50%;
            }

            .edge_box {
              position: absolute;
              top: -25%;
              left: -25%;
              width: 150%;
              height: 150%;
              animation: forwardRotate 30s linear infinite;
              line-height: 1rem;
              border-radius: 50%;
              /* border: 1px solid red; */


              div {
                width: 165px;
                height: 165px;
                font-size: 18px;
                color: #426190;
                animation: reverseRotate 30s linear infinite;
                /* border: 1px solid red; */
                border-radius: 50%;
                align-content: center;

                p {
                  letter-spacing: -0.5px;
                  color: #fff;
                  padding-top: 10px;
                  font-weight: 200;
                  letter-spacing: -0.7px;
                }
              }
            }

            .edge_box1 {

              div {
                position: relative;
                top: -14%;
                left: 35.5%;
              }
            }

            .edge_box2 {
              div {
                position: relative;
                top: -7%;
                left: 60%;
              }
            }

            .edge_box3 {
              div {
                position: relative;
                top: 11%;
                left: 78.5%;
              }
            }

            .edge_box4 {
              div {
                position: relative;
                top: 35.5%;
                left: 85%;
              }
            }

            .edge_box5 {
              div {
                position: relative;
                top: 60%;
                left: 79%;
              }
            }

            .edge_box6 {
              div {
                position: relative;
                top: 78%;
                left: 60%;
              }
            }

            .edge_box7 {
              div {
                position: relative;
                top: 85%;
                left: 35.5%;
              }
            }

            .edge_box8 {
              div {
                position: relative;
                top: 78%;
                left: 10%;
              }
            }

            .edge_box9 {
              div {
                position: relative;
                top: 60%;
                left: -8%;
              }
            }

            .edge_box10 {
              div {
                position: relative;
                top: 35.5%;
                left: -14.5%;
              }
            }

            .edge_box11 {
              div {
                position: relative;
                top: 11%;
                left: -8%;
              }
            }

            .edge_box12 {
              div {
                position: relative;
                top: -7%;
                left: 10%;
              }
            }
          }

        }

        /* //curriHead */

        .curriTail {
          background: #011B5C;

          .txt06 {
            padding: 80px 0;
          }

          .curriBox {
            width: 670px;
            gap: 2px;
            margin: 0 auto;

            p {
              text-align: left;
            }

            .box {
              position: relative;
              overflow: hidden;
              transition: 0.3s ease;
            }

            .box.active .boxQ {
              background: #46ACFF;
            }

            .boxQ {
              padding: 30px;
              background: #000;
              transition: 0.5s;
              border-radius: 10px;
              margin-bottom: 2px;
            }

            .boxTitle {
              margin: 0;
              font-size: 30px;
              line-height: 27px;
            }

            .boxA {
              border-radius: 10px;
              background-color: #ffffff;
              max-height: 0;
              overflow: hidden;
              transition: max-height 0.3s ease-in-out;

              p,
              td {
                line-height: 24px;
                font-size: 18px;
                font-weight: 300;
                color: #666;
              }

              .purpose {
                margin: 50px 30px 0 30px;
              }

              table {
                border-collapse: collapse;
                width: 610px;
                margin: 30px;

                td {
                  border: 1px solid #c8c8c8;
                }

                td:nth-child(1) {
                  background: #D7EDFF;
                  width: 150px;
                  color: #333;
                }

                td:nth-child(2) {
                  text-align: left;
                  padding: 30px 0 30px 20px;
                  color: #666;


                  .container {
                    display: flex;
                    gap: 30px;
                  }
                }
              }


              span {
                font-weight: 600;
                color: #0083EF;
              }
            }

            .boxTxt {
              padding: 0.5rem 1rem;
              color: #666;
              font-size: 1rem;
            }

            .box.active .boxA {
              max-height: 1100px;
              transition: max-height 0.3s ease-in-out;
            }

            .boxBtn {
              cursor: pointer;
              border: none;
              padding: 35px 35px 35px 610px;
              display: flex;
              justify-content: center;
              align-items: center;
              position: absolute;
              top: 0;
              right: 0;
              background: none;
            }

            .boxBtn:focus {
              outline: 0
            }

            .boxIcon.open {
              display: none;
            }

            .box.active .boxIcon.open {
              color: #ffffff;
              display: block;
            }

            .box.active .boxIcon.close {
              display: none;
            }
          }

        }

        /* //curriTail */

        .benefit {
          background: #000;
          padding: 100px 0;
          position: relative;

          .sub {
            font-size: 24px;
            font-weight: 200;
            padding-bottom: 10px;
          }

          .ani {
            animation: fadeInUp 1.8s;
          }

          .arch {
            position: absolute;
            top: 405px;
            left: 80px;
          }

          .engi {
            position: absolute;
            top: 625px;
            left: 80px;
          }

          .cons {
            position: absolute;
            top: 380px;
            right: 60px;
          }

          .dev {
            position: absolute;
            top: 615px;
            right: 55px;
          }

          .mana {
            position: absolute;
            top: 745px;
            left: 315px;
          }

          .archT {
            position: absolute;
            top: 510px;
            left: 50px;
          }

          .engiT {
            position: absolute;
            top: 750px;
            left: 50px;
          }

          .manaT {
            position: absolute;
            top: 865px;
            left: 290px;
          }

          .devT {
            position: absolute;
            top: 755px;
            right: 45px;
          }

          .consT {
            position: absolute;
            top: 520px;
            right: 30px;
          }

          .txt01 {
            padding-bottom: 100px;
          }

          .txt02 {
            padding: 240px 0 50px 0;
          }

          .text p {
            font-size: 24px;
          }

          .beneCard {
            li {
              margin: 0 auto;
              text-align: left;
              display: flex;
              width: 670px;
              height: 150px;
              border-radius: 20px;
              align-items: center;
              padding: 0 45px;
              gap: 10px;

              p {
                background: #000;
                width: 110px;
                height: 30px;
                border-radius: 20px;
                text-align: center;
                align-content: center;
              }

              h5 {
                line-height: 36px;
                margin-bottom: 5px;
                font-weight: 600;
              }

              span {
                color: #fff;
                display: inline-block;
                font-size: 18px;
                font-weight: 300;
                line-height: 21px;
              }
            }

            li:not(li:last-child) {
              margin-bottom: 40px;
            }

            li:nth-child(1) {
              background: url(/m/home/images/main/douzone/new/m_bene01.png) no-repeat center;
            }

            li:nth-child(2) {
              background: url(/m/home/images/main/douzone/new/m_bene02.png) no-repeat center;
            }

            li:nth-child(3) {
              background: url(/m/home/images/main/douzone/new/m_bene03.png) no-repeat center;
            }

            li:nth-child(4) {
              background: url(/m/home/images/main/douzone/new/m_bene04.png) no-repeat center;
            }

            li:nth-child(5) {
              background: url(/m/home/images/main/douzone/new/m_bene05.png) no-repeat center;
            }

            li:nth-child(6) {
              background: url(/m/home/images/main/douzone/new/m_bene06.png) no-repeat center;
            }
          }
        }

        /* //benefit */



        .step {
  
          h3 {
            color: #333;
            padding: 100px 0;
          }
  
          .sub {
            font-size: 24px;
            font-weight: 400;
            color: #666;
            padding-top: 90px;
          }
  
          .caption {
            color: #999;
            font-size: 14px;
            padding: 50px 0 100px 0;
          }
  
          .stepCont {
            display: flex;
            justify-content: center;
            gap: 30px;
  
            div p {
              padding-top: 20px;
  
              span {
                color: #999;
                padding-top: 5px;
                line-height: 18px;
              }
            }
  
            .select {
              color: #2083D3;
            }
          }
  
          p,
          span {
            color: #333;
          }
  
          p {
            font-size: 24px;
            font-weight: 500;
          }
  
          span {
            display: inline-block;
            font-size: 14px;
            line-height: 14px;
          }
  
          .caption {
            font-size: 18px;
            font-weight: 300;
          }
  
        }
  
        /* //step */

	      /* 프로젝트 섹션 Start */
	      
	      .project {
		      .project-total-title {
			      padding: 100px 0 60px;
			      
			     
			      span {display: block;font-size: 24px;font-weight: 300;color: #999;}
			      h3 {margin-top: 10px; color: #333}
		      }
		      
		      & > article {
			      padding: 60px 0;
			      &.project-saas {background: #F5F9FB;}
			      &.project-nutrition {background: #fff}
			      &.project-news {background: #F5F9FB;}
			      &.project-ticketing {background: #fff}
			      
			      .project-section-title {
				      padding: 0 100px;
				      strong {font-size: 30px;font-weight: 600;}
				      p {margin-top: 20px;font-size: 18px;font-weight: 300;color: #999; line-height: 1.4}
			      }
			      .project-visual {
				      display: flex;
				      flex-direction: column;
				      gap: 40px;
				      margin-top: 60px;
				      .project-visual-item {
					      img {width: 100%;}
				      }
			      }
			      .project-stack {
				      margin-top: 40px;
				      display: flex;
				      flex-direction: column;
				      gap: 20px;
				      align-items: center;
				      .project-stack-label {
					      span {
						      display: block;
						      width: 136px;
						      height: 42px;
						      border-radius: 20px;
						      background: #333;
						      font-size: 20px;
						      font-weight: 600;
						      color: #fff;
						      text-align: center;
						      align-content: center;
					      }
				      }
				      .project-stack-icons {
					      flex: 1;
					      img { width: 100% }
				      }
			      }
		      }
	      }
	      /* 프로젝트 섹션 End */


  
        .photo {
          background: #F5FAFB;
          padding: 100px 0 80px 0;
  
          h3 {
            color: #333;
          }
  
          p {
            font-size: 24px;
            color: #999;
            padding-top: 10px;
  
            span {
              color: #333;
              font-weight: 600;
            }
          }
  
          .line {
            width: 670px;
            height: 2px;
            background: #DEE7EB;
            margin: 0 auto;
          }
  
          .slider {
            margin: 75px 0 50px 0;
  
            .slick-slide img {
              margin: 0 auto;
              border-radius: 20px;
            }
  
            .slick-prev:before {
              content: '';
              display: block;
              background: url(/m/home/images/main/douzone/new/arrowL.png) no-repeat center;
              width: 35px;
              height: 57px;
            }
  
            .slick-next:before {
              content: '';
              display: block;
              background: url(/m/home/images/main/douzone/new/arrowR.png) no-repeat center;
              width: 35px;
              height: 57px;
            }
          }
  
          .thumb {
            width: 750px;
            margin-top: 50px;
  
            img {
              width: 134px;
              height: 92px;
              border-radius: 2px;
            }
  
            .slick-slide {
              filter: opacity(50%);
              width: 164px;
            }
  
            .slick-center {
              filter: brightness(100%);
            }
  
            .slick-slide img {
              margin: 0 auto;
            }
          }
        }
  
        .guide {
          padding: 100px 0;
  
          h3,
          h5 {
            color: #333;
          }
  
          p {
            font-size: 24px;
            color: #999;
            padding: 10px 0 60px 0;
          }
  
          span {
            color: #999;
            font-size: 24px;
            font-weight: 400;
            display: inline-block;
            padding-top: 5px;
          }
  
          h5 {
            font-weight: 600;
            display: inline-block;
            text-align: left;
            vertical-align: top;
            padding: 35px 0 0 15px;
            margin-bottom: 80px;
          }
  
          li:last-child h5 {
            margin-bottom: 0;
          }
        }
  
        /* //gudie */

        .faq {
          background: #FBFBFB;
          text-align: left;

          p {
          text-align: left;
          }

          .faqTitle {
            text-align: center;
            font-size: 50px;
            font-weight: 600;
            color: #222;
            padding-top: 90px;
          }

          .accordian {
            padding: 50px 0 100px 0;
          }

          details[open] .question::after {
            transform: translate(0, -50%) rotate(180deg);
          }

          .question {
            cursor: pointer;
            font-size: 32px;
            font-weight: 600;
            color: #222;
            padding: 20px 30px;
            background: #fff;
            border-top: 1px solid #E8ECEE;
            border-bottom: 2px solid #E8ECEE;

            p {
              color: #222;
              display: inline-block;
              margin-top: 2px;
              line-height: 38px;
            }

            &::before {
              content: '';
              display: block;
              float: left;
              width: 40px;
              height: 41px;
              background-image: url(/m/home/images/main/douzone/question.png);
              margin-right: 20px;
            }

            &::after {
              content: '';
              display: block;
              float: right;
              width: 25px;
              height: 16px;
              background: url(/m/home/images/main/douzone/more.png) no-repeat center / cover;
              margin-top: 14px;
            }
          }/*question */

          .firstQ {
            border-top: 2px solid #a2a2a2;
          }


          .answer {
            background: #F0FBFF;
            font-size: 28px;
            font-weight: 300;
            color: #444;
            padding: 40px 50px;
            line-height: 38px;
          }
        }/*faq */

      }/*main */


      .contact {
        position: relative;

        img {
          width: 750px;
        }

        .btn {
          width: 420px;
          height: 100px;
          background: #1b1b1b;
          border-radius: 60px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          bottom: 265px;

          p {
            color: #fff;
            font-size: 36px;
            font-weight: 800;
            text-align: center;
            letter-spacing: 2px;
          }
        }
      }/*contact */


      
      .footerCont {
        height: 150px;
        align-content: center;
  
        pre {
          font-size: 18px;
          line-height: 26px;
          color: #666;
        }
      }

   .footerCont-m {
    border-top:2px solid #000;
    width: 100%;
    max-width: 750px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 30px;
    letter-spacing: -0.3px;
    box-sizing: border-box;
    padding: 15px 12px;
    }

    .footer-list-m {
    display: flex;
    flex-direction: column;
    gap: 6px;
    }

    .footer-list-m .label {
    font-weight: 600;
    color: #222;
    margin-right: 6px;
    display: inline-block;
    width: 110px; /* label 길이 일정하게 */
    }

    .footer-list-m .value {
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

    .footer-list-m div {
    display: flex;
    align-items: center;
    }


      .topBtn, .mainBtn {
        border: none;
        width: 100px;
        height: 100px;
        background-color: rgba(92, 100, 114, 0.5);
        background-image: url(/m/home/images/main/top_btn.png);
        border-radius: 50%;
        cursor: pointer;
        z-index: 50;
        position: fixed;
        right: 50px;
        bottom: 160px;
        display: none;
      }

      .mainBtn {
        bottom: 280px;
        background-image: url(/m/home/images/main/main_btn.png);
      }

      /*타이머 */
      .timer{
        position: fixed;
        bottom: 0;
        z-index: 99;

        .timerCont{
          width: 750px;
          margin: 0 auto;
          background: #00ABFF;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 40px;
          border-top-right-radius: 20px;
          border-top-left-radius: 20px;

          p{
            color: #fff;
            font-size: 28px;
            font-weight: 600;
          }

          .day,.h,.m,.s{
              padding-left:10px;
          }
                    
          button{
            border: none;
            background-color: #fff;
            padding: 15px 35px;
            border-radius: 5px;
            font-size: 28px;
            font-weight: 600;
            cursor: pointer;
            color: #222;
          }          
        }/* timerCont*/
      }/*timer*/
    }/*douzone_m */