@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, 38%, 0);
      }

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


    html{
      width: 100vw;
      overflow-x: hidden!important;
    }

    #douzone_pc {

      h2 {
        font-size: 70px;
        text-align: center;
        font-weight: 700;
        letter-spacing: -1px;
      }

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

      h4 {
        font-size: 30px;
        font-weight: 600;
        color: #222;
        line-height: 32px;
      }

      h5 {
        font-size: 24px;
        font-weight: 200;
        color: #333;
        line-height: 32px;
      }

      p,
      h2,
      h3,
      h4,
      td {
        letter-spacing: -0.4px;
      }

      img {
        display: block;
      }

      
      .inner {
        width: 1200px;
        margin: 0 auto;
      }
    
    header {
      position: fixed;
      background: #fff;
      width: 100vw;
      z-index: 99;
      border-bottom: 1px solid #E0E0E0;
      
      nav {
        width: 1200px;
        height: 100px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        ul {
          display: flex;
          gap: 25px;
        }
        
        li {
          text-align: center;
          align-content: center;
          font-size: 20px;
          color: #222;
          
          button {
            border: none;
            background: none;
            font-size: 20px;
            font-weight: 500;
            color: #222;
            cursor: pointer;
            
            padding: 10px 15px;
          }
        }
      }
    }

      main {
        text-align: center;

        img {
          display: inline;
          vertical-align: top;
        }
  
        .info {
            padding-top: 100px;
  
            h2,
            h3,
            h4,
            h5,
            p,
            span {
              color: #fff;
            }

          .infoTitle {
            position: relative;

            .titleCont {
              position: absolute;
              top: 160px;
              left: 50%;
              transform: translateX(-50%);

              h2 {
                margin-bottom: 40px;
                background: linear-gradient(to right, #37A5FF 0%, #fff 45%);
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                position: relative;
              }

              h2::after {
                background: none;
                content: attr(data-text);
                width: 709px;
                height: 82px;
                left: 0;
                position: absolute;
                text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
                top: 0;
                z-index: -1;
              }

              .infoWrap {
                .infoBtn {
                  background: #000;
                  width: 525px;
                  border-radius: 50px;
                  padding: 19px 34px;
                  margin: 0 auto 110px;
                  display: flex;
                  justify-content: space-between;

                  h4 {
                    width: 335px;
                    align-content: center;

                    span {
                      color: #31FF76;
                    }
                  }
                }

                .radio {
                  width: 100px;
                  height: 43px;
                  background: #242424;
                  border-radius: 50px;
                  position: relative;

                  .radioBtn {
                    width: 33px;
                    height: 33px;
                    margin: 5px;
                    background: url(/home/images/main/douzone/new/info_off.png) no-repeat center / cover;
                    transition-property: all;
                    transition-duration: 0.7s;
                    position: absolute;
                    z-index: 1;
                  }

                  p {
                    font-size: 20px;
                    font-weight: 700;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                  }

                  .off {
                    color: #000;
                    right: 15px;
                    opacity: 1;
                    transition-property: opacity;
                    transition-duration: 0.2s;
                    transition-delay: 0.2s;
                    transition-timing-function: ease-in;
                  }

                  .on {
                    color: #31FF76;
                    left: 15px;
                    opacity: 0;
                    transition-property: opacity;
                    transition-duration: 0.2s;
                    transition-delay: 0.2s;
                    transition-timing-function: ease-in;
                  }
                }

                .infoBtn:hover {
                  .radioBtn {
                    background: url(/home/images/main/douzone/new/info_on.png) no-repeat center / cover;
                    transform: translateX(57px);
                  }

                  .off {
                    opacity: 0;
                  }

                  .on {
                    opacity: 1;
                  }
                }
              }

              /* infoBtn */

              p:nth-of-type(1):not(.off) {
                font-size: 36px;
                padding-bottom: 10px;
              }

              p:nth-of-type(2) {
                font-size: 18px;
                font-weight: 300;
              }
            }

            /* titleCont */
          }

          /* infoTitle */


          .infoCont {
            background: url(/home/images/main/douzone/new/info_bg04.jpg) no-repeat center;

            .inner{
            height: 500px;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 217px;
            }

            .title,
            .cont {
              text-align: left;
              display: inline-block;
            }

            .title {
              &::before {
                content: '';
                display: block;
                width: 25px;
                height: 4px;
                background: #fff;
                margin-bottom: 50px;
                margin-left: 3px;
              }

              span {
                font-weight: 200;
              }

              h3 {
                padding-bottom: 10px;
              }

              p {
                line-height: 22px;
              }
            }


            .cont {
              span {
                color: #C5C5C5;
              }


              li {
                display: flex;
                align-items: center;
                gap: 20px;
                font-size: 30px;

                div {
                  width: 50px;
                  height: 50px;
                }

                span {
                  padding-right: 30px;
                  font-size: 18px;
                }

                p {
                  padding-top: 5px;
                }
              }

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

              .icon01 {
                background: url(/home/images/main/douzone/new/info_icon01.png) no-repeat center;
              }

              .icon02 {
                background: url(/home/images/main/douzone/new/info_icon02.png) no-repeat center;
              }

              .icon03 {
                background: url(/home/images/main/douzone/new/info_icon03.png) no-repeat center;
              }

              .icon04 {
                background: url(/home/images/main/douzone/new/info_icon04.png) no-repeat center;
              }

              .icon05 {
                background: url(/home/images/main/douzone/new/info_icon05.png) no-repeat center;
              }
            }
          }

          /* infoCont */


          .infoBanner {
            background: #1B1B1B;
            padding: 65px 0;

            ul {
              display: flex;
              width: 1080px;
              justify-content: center;
              align-items: center;
              margin: 0 auto;
              gap: 40px;
              text-align: left;
              position: relative;


              li {
                span:not(p span) {
                  font-size: 18px;
                  color: #666;
                  font-weight: 300;
                  padding-left: 5px;
                }

                p {
                  font-size: 50px;
                  font-weight: 600;
                  padding-top: 5px;

                  span {
                    color: #FFBD32;
                  }
                }


                .line::after {
                  content: '';
                  display: block;
                  width: 120px;
                  height: 1px;
                  background: #666;
                  position: absolute;
                  left: 208px;
                  top: 28px;
                }
              }

              li:nth-child(2) {
                padding-right: 150px;
              }
            }
          }
          /* infoBanner */
        }
          /* //info */


        .instructor {
          background: url(/home/images/main/douzone/new/instructor_bg.jpg) no-repeat center;
          padding: 96px 0;
          position: relative;

          h3,
          h4,
          h5,
          p {
            color: #fff;
          }

          .instHead {
            h3 {
              &:nth-of-type(1) {
                padding-bottom: 10px;
              }

              span {
                color: #46ACFF;
              }
            }

            p {
              &:nth-of-type(1):not(.profileCont p) {
                font-size: 18px;
                font-weight: 200;
                padding-bottom: 90px;
                line-height: 24px;
              }
            }

            .profile {
              background: url(/home/images/main/douzone/new/instructor_profile.png) no-repeat center;
              padding: 37px 0 25px 0;

              h4 {
                &:nth-of-type(1) {
                  text-align: left;
                  padding: 15px 0 5px 0;

                  span {
                    color: #7EACD8;
                    font-size: 18px;
                    font-weight: 200;
                  }
                }
              }

              h5 {
                &:nth-of-type(1) {
                  font-weight: 600;
                  text-align: left;
                  padding-top: 35px;

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

              .profileTxt {
                padding-left: 400px;
              }
            }

            .profileCont {
              display: flex;
              flex-wrap: wrap;
              justify-content: center;
              column-gap: 30px;
              row-gap: 50px;
              margin: 100px 0;

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

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

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

              li:nth-child(1),
              li:nth-child(2),
              li:nth-child(3) {
                width: 380px;
                height: 300px;
                padding: 55px 0;

                h4::after {
                  content: '';
                  display: block;
                  background: #fff;
                  width: 30px;
                  height: 3px;
                  margin: 20px 175px;
                }

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

              li:nth-child(4),
              li:nth-child(5) {
                width: 580px;
                height: 570px;
                background: rgba(246, 250, 253, 0.05);
                border: 1px solid #353B3D;
                border-radius: 20px;
                padding: 50px;
                text-align: left;
                font-size: 18px;

                p:nth-of-type(odd) {
                  background: #011427;
                  padding: 10px 20px;
                  border-radius: 50px;
                  display: inline-block;
                  margin-bottom: 20px;

                  span {
                    color: #314B66;
                    font-size: 14px;
                    font-family: 'Sansita Swashed', sans-serif;
                  }
                }

                p:nth-of-type(even) {
                  color: #DBDBDB;
                  font-weight: 200;
                  padding-left: 10px;
                  margin-bottom: 50px;
                  line-height: 24px;

                  span {
                    font-weight: 600;
                    color: #fff;
                  }
                }
              }
            }
          }

          /* //instHead */


          .instCont {
            position: relative;

            h3 {
              &:nth-of-type(2) {
                padding-top: 290px;
              }

              span {
                color: #00ABFF;
              }

            }

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

            .tri {
              li {
                position: absolute;

                &:nth-of-type(1) {
                  bottom: 45%;
                  left: 9%;
                }

                &:nth-of-type(2) {
                  bottom: 45%;
                  right: 9%;
                }

                &:nth-of-type(3) {
                  bottom: 15%;
                  left: 34%;
                }

                p {
                  span {
                    color: #46ACFF;
                  }
                }
              }
            }

            .box {
              width: 1090px;
              height: 250px;
              border: 8px solid rgba(217, 217, 217, 0.10);
              border-radius: 30px;
              margin: 150px auto 200px;
              position: relative;

              &::after {
                content: url(/home/images/main/douzone/new/instructor_plus.png);
                display: block;
                width: 41px;
                height: 41px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }

            h4:not(.instHead h4) {
              color: #F6EF15;
              background: #171D25;
              border-radius: 20px;
              padding: 30px 0;
              width: 940px;
              position: absolute;

              &:nth-of-type(1) {
                top: -20%;
                left: 6.5%;
                /* transform: translateX(-50%); */
              }

              &:nth-of-type(2) {
                top: 83%;
                left: 6.5%;
                /* transform: translateX(-50%); */
              }
            }
          }
        }

        /* //instructor */

		/* 강사평 말풍선 섹션 */
		.testimonial {
			background: #011B5C;
			position: relative;
			h3 {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				top: 22.9vw;
				font-size: 2.089vw;
				color: #fff;
				z-index: 20;
				span {color: #FFFF35;}
			}
			.testimonial-device-image {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 18.75vw;
				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: 70px;
						transform: translateX(-50%);
						display: flex;
						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;}
						}
					}
				}
			}
		}
    /* 강사평 말풍선 섹션 */

        .cloud {
          padding: 100px 0;

          .cloudTitle {
            h3 {
              padding-bottom: 10px;
            }

            p {
              font-size: 18px;
              color: #666;
              padding-bottom: 50px;
            }

            h5 {
              color: #333;
              padding-bottom: 10px;

              &:nth-of-type(2) {
                padding: 100px 0;
              }
            }

            h3 {
              color: #333;

              &:nth-of-type(2) {
                padding-bottom: 100px;
              }
            }

            .cloudImg {
              display: flex;
              justify-content: space-around;
              align-items: center;
              margin: 0 auto;
            }

            .caption {
              font-size: 16px;
              font-weight: 300;
              color: #999;
              display: flex;
              justify-content: space-between;
              width: 715px;
              margin: 0 auto;
              padding-top: 40px;
            }
          }

          .cloudCont {
            ul {
              display: flex;
              justify-content: center;
              flex-wrap: wrap;
              flex: 1;
              row-gap: 100px;
              column-gap: 100px;

              li {
                width: 550px;

                h4 {
                  background-color: #102B6E;
                  color: #fff;
                  padding: 22px 0;
                  border-radius: 10px;
                  width: 420px;
                  margin: 0 auto 60px;
                }

                .caption {
                  color: #999;
                  font-size: 16px;
                  margin-top: 20px;
                }

                &:nth-child(2) {
                  h4 {
                    margin: 0 auto 70px;
                  }

                  .caption {
                    margin-top: 40px;
                  }
                }

                &:nth-child(3) {
                  h4 {
                    margin: 0 auto 90px;
                  }
                }
              }
            }

            h5 {
              padding-top: 100px;
            }
          }
        }

        /* //cloud */


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

          h3 {
            color: #fff;
            padding-bottom: 100px;

            &:nth-of-type(1) {
              padding-bottom: 270px;
            }

            &:nth-of-type(2) {
              span {
                color: #04D4F9;
              }
            }

            &:nth-of-type(4) {
              padding: 100px 0;
            }
          }

          h5 {
            color: #fff;

            &:nth-of-type(1) {
              padding: 270px 0 45px 0;

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

            &:nth-of-type(2) {
              padding-bottom: 10px;
            }
          }


          .curriEdge {
            width: 450px;
            height: 450px;
            position: absolute;
            border-radius: 50%;
            margin: 10% auto;
            top: 8%;
            left: 38.5%;

            .edge_wrap {
              position: absolute;
              width: 100%;
              height: 100%;
              top: 0;
              left: 0;
            }

            .edge_box {
              position: absolute;
              top: -25%;
              left: -25%;
              width: 150%;
              height: 150%;
              animation: forwardRotate 40s linear infinite;
              text-align: center;
              line-height: 1rem;
              border-radius: 50%;

              div {
                width: 165px;
                height: 165px;
                font-size: 18px;
                color: #426190;
                animation: reverseRotate 40s linear infinite;
                align-content: center;


                p {
                  letter-spacing: -0.5px;
                  color: #fff;
                  padding: 20px 0;
                }
              }
            }

            .edge_box1 {
              div {
                position: relative;
                top: -12%;
                left: 37.5%;
              }
            }

            .edge_box2 {
              div {
                position: relative;
                top: -5%;
                left: 62%;
              }
            }

            .edge_box3 {
              div {
                position: relative;
                top: 13%;
                left: 82%;
              }
            }

            .edge_box4 {
              div {
                position: relative;
                top: 37.5%;
                left: 87%;
              }
            }

            .edge_box5 {
              div {
                position: relative;
                top: 62%;
                left: 82%;
              }
            }

            .edge_box6 {
              div {
                position: relative;
                top: 81%;
                left: 63%;
              }
            }

            .edge_box7 {
              div {
                position: relative;
                top: 87%;
                left: 37.5%;
              }
            }

            .edge_box8 {
              div {
                position: relative;
                top: 81%;
                left: 12%;
              }
            }

            .edge_box9 {
              div {
                position: relative;
                top: 62%;
                left: -6%;
              }
            }

            .edge_box10 {
              div {
                position: relative;
                top: 37.5%;
                left: -12%;
              }
            }

            .edge_box11 {
              div {
                position: relative;
                top: 13%;
                left: -6%;
              }
            }

            .edge_box12 {
              div {
                position: relative;
                top: -5%;
                left: 13%;
              }
            }
          }
          /* //curriEdge */


          .curriTab {
            .tabTitle {
              width: 1200px;
              display: flex;
              color: #fff;
              margin: 0 auto;
              font-size: 20px;

              p {
                padding: 30px;
                border: 1px solid #011B5C;

                &:nth-of-type(1) {
                  width: 400px;
                  background: #536878;
                }

                &:nth-of-type(2) {
                  width: 800px;
                  background: #7C8994;
                }
              }
            }

            .tabWrap {
              display: flex;

              .tabMenu {
                width: 400px;
                margin-bottom: 10px;

                button {
                  width: 400px;
                  height: 80px;
                  cursor: pointer;
                  border: 1px solid #011B5C;
                  background-color: #000;
                  color: #fff;
                  text-align: left;
                  padding-left: 20px;
                  font-size: 20px;
                  transition: 0.6s;

                  &:hover {
                    background-color: #536878;
                  }
                }

                button.active {
                  background-color: #46ACFF;
                }
              }

              .tabCont {
                text-align: left;
                color: #666;
                font-weight: 300;

                span {
                  color: #0083EF;
                  font-weight: 600;
                  line-height: 25px;
                }

                div:not(.table) {
                  display: none;
                  width: 800px;
                  height: 880px;
                  background-color: #fff;
                  border: 1px solid #011B5C;
                  border-left: 1px solid #011B5C;
                  font-size: 18px;
                  padding: 40px;
                  line-height: 24px;
                }

                div.table {
                  display: flex;
                  padding-top: 50px;
                  line-height: 24px;

                  p:nth-of-type(1) {
                    border: 1px solid #C8C8C8;
                    display: inline-block;
                    background: #D7EDFF;
                    align-content: center;
                    text-align: center;
                    width: 200px;
                  }

                  p:nth-of-type(2) {
                    border: 1px solid #C8C8C8;
                    border-left: none;
                    display: inline-block;
                    width: 520px;
                    padding: 25px 0 25px 20px;
                  }
                }

                div.table:nth-of-type(2) {
                  padding: 0;

                  p {
                    border-top: none;
                  }
                }

                div.narrow {
                  padding: 20px 0 15px 0;

                  p:nth-of-type(1) {
                    width: 160px;
                  }

                  p:nth-of-type(2) {
                    width: 540px;
                    padding: 15px 0 15px 15px;
                    font-size: 17px;
                  }
                }

                div.active {
                  display: block;
                }
              }

              /* //tabCont */
            }
          }
        }

        /* //curri */


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

          h3,
          h4,
          h5,
          p {
            color: #fff;
          }

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

          h3 {
            padding-bottom: 100px;

            &:nth-of-type(2) {
              padding: 140px 0 80px 0;
            }
          }

          .icon {
            img {
              position: absolute;

              &:nth-of-type(1) {
                top: 22.8%;
                left: 35.7%;
              }

              &:nth-of-type(2) {
                top: 34.2%;
                left: 33.3%;
              }

              &:nth-of-type(3) {
                top: 39.4%;
                left: 46%;
              }

              &:nth-of-type(4) {
                top: 33.4%;
                left: 62.3%;
              }

              &:nth-of-type(5) {
                top: 21.5%;
                left: 60.3%;
              }
            }

            .ani {
              animation: fadeInUp 1.3s;
            }
          }

          .text {
            font-size: 18px;

            p {
              position: absolute;

              &:nth-of-type(1) {
                top: 460px;
                left: 520px;
              }

              &:nth-of-type(2) {
                top: 695px;
                left: 480px;
              }

              &:nth-of-type(3) {
                top: 800px;
                left: 1050px;
              }

              &:nth-of-type(4) {
                top: 705px;
                left: 1365px;
              }

              &:nth-of-type(5) {
                top: 475px;
                left: 1325px;
              }
            }
          }

          .beneCard {
            display: flex;
            flex-wrap: wrap;
            gap: 60px;
            justify-content: center;
            text-align: left;

            div {
              width: 520px;
              height: 200px;
              padding: 32px 45px;

              p {
                background: #000;
                border-radius: 50px;
                width: 110px;
                padding: 5px;
                text-align: center;
                margin-bottom: 7px;
              }

              h4 {
                line-height: 35px;
                padding-bottom: 5px;
              }

              span {
                color: #fff;
                font-weight: 200;
              }

              &:nth-of-type(1) {
                background: url(/home/images/main/douzone/new/bene01.png);
              }

              &:nth-of-type(2) {
                background: url(/home/images/main/douzone/new/bene02.png);
              }

              &:nth-of-type(3) {
                background: url(/home/images/main/douzone/new/bene03.png);
              }

              &:nth-of-type(4) {
                background: url(/home/images/main/douzone/new/bene04.png);
              }

              &:nth-of-type(5) {
                background: url(/home/images/main/douzone/new/bene05.png);
              }

              &:nth-of-type(6) {
                background: url(/home/images/main/douzone/new/bene06.png);
              }
            }
          }
        }
        /* //benefit */


        .step {
          padding-bottom: 100px;

          h3 {
            padding: 100px 0 50px 0;
          }

          p {
            &:nth-of-type(1) {
              padding-top: 50px;
              color: #999;
            }

            &:nth-of-type(2) {
              font-size: 18px;
              padding-top: 400px;
              color: #999;
            }
          }

          .stepCont {
            div {
              width: 330px;
              height: 350px;
              align-content: center;
              position: absolute;

              h5 {
                font-weight: 500;
                padding-right: 40px;
              }

              &:nth-of-type(1) {
                background: url(/home/images/main/douzone/new/step01.png) no-repeat center;
                left: 20.4vw;
                z-index: 4;
              }

              &:nth-of-type(2) {
                background: url(/home/images/main/douzone/new/step02.png) no-repeat center;
                left: 35vw;
                z-index: 3;
              }

              &:nth-of-type(3) {
                background: url(/home/images/main/douzone/new/step03.png) no-repeat center;
                left: 49.3vw;
                z-index: 2;
              }

              &:nth-of-type(4) {
                background: url(/home/images/main/douzone/new/step04.png) no-repeat center;
                left: 63.2vw;
                z-index: 1;

                h5 {
                  color: #2083D3;
                }

                span {
                  color: #999;
                  padding-right: 35px;
                }
              }
            }
          }
        }
        /* //step */

		/* 프로젝트 섹션 Start */
		.project {
			.project-total-title {
				padding: 100px 0 60px;
				span {display: block;font-size: 24px;font-weight: 300;color: #999;}
				h3 {margin-top: 20px;}
			}
			
			& > article {
				padding: 80px 0;
				&.project-saas {background: #F5F9FB;}
				&.project-nutrition {background: #fff}
				&.project-news {background: #F5F9FB;}
				&.project-ticketing {background: #fff}
				
				.project-section-title {
					strong {font-size: 30px;font-weight: 600;}
					p {margin-top: 20px;font-size: 18px;font-weight: 300;color: #999;}
				}
				
				.project-visual {
					display: flex;
					gap: 40px;
					margin-top: 80px;
					.project-visual-item {
						img {width: 100%;}
					}
				}
				
				.project-stack {
					margin-top: 40px;
					display: flex;
					align-items: center;
					.project-stack-label {width: 95px;flex-shrink: 0;
						span {
							display: block;
							width: 76px;
							height: 26px;
							border-radius: 20px;
							background: #333;
							font-size: 12px;
							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;

          h3 {
            padding-bottom: 100px;
          }

          h5 {
            padding: 100px 0;
            color: #999;

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

          .photoCont {
            display: flex;
            flex-wrap: wrap;
            gap: 39px;
          }
        }
        /* //photo */



        .guide {
          padding-top: 100px;

          h3 {
            padding-bottom: 20px;
          }

          p:not(li p) {
            &:nth-of-type(1) {
              font-size: 18px;
              color: #999;
              padding-bottom: 75px;
            }
          }

          ul {
            text-align: left;
            display: flex;
            justify-content: center;
            gap: 100px;

            li {
              width: 310px;

              h5,
              p {
                display: inline-block;
              }

              p {
                color: #999;
                padding: 40px 0 0 15px;

                span {
                  font-weight: 600;
                  font-size: 24px;
                  color: #333;
                  line-height: 45px;
                }
              }
            }
          }
        }
        /* //guide */




        .faq {
          padding: 100px 0 50px 0;
          background: #fff;

          .faqAccordian {
            text-align: left;
            padding: 40px 0 50px 0;
          }

          details:nth-of-type(1) {
            border-top: 2px solid #a2a2a2;
          }

          details:nth-of-type(5) {
            border-bottom: 2px solid #a2a2a2;

            summary {
              border-bottom: none;
            }

            p.answer {
              border-top: 1px solid #E8ECEE;
            }
          }

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


          .question {
            background: #fff;
            font-size: 30px;
            font-weight: 600;
            padding: 30px 40px;
            border-top: 1px solid #E8ECEE;
            border-bottom: 1px solid #E8ECEE;

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

          .question::before {
            content: '';
            display: block;
            width: 40px;
            height: 40px;
            background: url(/home/images/main/douzone/new/question.png) no-repeat center / cover;
            margin: 0 20px 0 0;
            float: left;
          }

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

          .answer {
            background: #F0FBFF;
            font-size: 18px;
            font-weight: 300;
            color: #444;
            padding: 30px 100px;
            line-height: 26px;

            p span {
              text-indent: 10px;
            }
          }
        }
      }


      .contact {
        img {
          margin: 0 auto;
        }

        .btn {
          background: #1B1B1B;
          padding: 100px 0;
        }

        .cont_logo {
          background: #f9f9f9;
          padding: 30px 0;
        }
      }

      .topBtn, .mainBtn {
          border: none;
          width: 60px;
          height: 60px;
          background-color: rgba(92, 100, 114, 0.5);
          background-image: url(/home/images/main/top_btn.png?ver=3);
          border-radius: 50%;
          cursor: pointer;
          z-index: 50;
          position: fixed;
		  /*
          left: 90vw;
          bottom: 9vh;
		  */
		  right: 80px;
		  bottom: 80px;
        }
  
      .mainBtn {
          
          /*bottom: 20vh;*/
		  bottom:150px;
          background-image: url(/home/images/main/main_btn.png?ver=3);
      }
    }


   /*팝업창 */
    .supermodal-title{background-color:#00ABFF !important;}
    .supermodal-container .supermodal-title .supermodal-close{color:#fff !important;}
    .supermodal-container .supermodal-title .supermodal-close:hover {background-color: #222 !important;}
    /*팝업창 */


    /*남은일정 타이머 기능 */
    .timer{
        position: fixed;
        bottom: 20px;
        left: 50vw;
        transform: translateX(-50%);
        z-index: 99;

        .timerCont{
          width: 1200px;
          margin: 0 auto;
          background: #00ABFF;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 20px 60px;
          border-radius: 5px;

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

          .day,.h,.m,.s{
              padding-left:10px;
          }
                    
          button{
            border: none;
            background-color: #fff;
            padding: 15px 30px;
            border-radius: 5px;
            font-size: 23px;
            font-weight: 600;
            cursor: pointer;
            color: #222;
          }          
        }
    }

     /*
      .footerCont{
        display: flex;
        align-items: center;
        font-size: 15px;
        line-height: 18px;
        letter-spacing: -0.4px;
        width: 1200px;
        height: 120px;
        margin: 0 auto;
      }
    */

/* 사용자가 준 기본값(그대로 적용) */
.footerCont{
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 18px;
  letter-spacing: -0.4px;
  width: 1200px;
  height: 120px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 내부 그리드: label/value/divider x3 = 총 8컬럼 */
.footer-grid{
  width: 100%;
  display: grid;
  /* label 고정폭 / value 유연 / divider 좁게 */
  grid-template-columns: 90px 2fr 10px 90px 1.6fr 10px 80px 2fr; /* ✅ 이 라인 수정 */
  align-items: center;
  column-gap: 12px; /* 텍스트들 사이 간격 */
  row-gap: 6px;
  /* 텍스트 수직 중앙 정렬을 위해 높이 그대로 사용 */
}

/* 공통 스타일 */
.footer-grid .label {
  font-weight: 700;
  text-align: left;
  padding-left: 6px;
  color: #222;
}

.footer-grid .value {
  text-align: left;
  color: #333;
  padding-left: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-grid .divider {
  text-align: center;
  color: #999;
  font-weight: 400;
}

.supermodal-container .supermodal-body {
    overflow-x:hidden;
}