greenwhale/app/assets/scss/sub.scss

/** 탑 비쥬얼 공통 모듈 **/
#top--visual{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 440px;
  width: 100%;

  &.contact{
    background: url(/img/top_ban_contact.jpg) no-repeat top;
    // background-attachment: fixed;  
    background-size: cover;
  }
 

  .inner--content{
    max-height: 440px;
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;    
  
    > h1{
      color:#FFF;
      text-align: center;      
      font-size: 48px;      
      font-weight: 800;
      display: flex;      
      align-items: center;
      justify-content: center;
    }
    nav{
      position: absolute;
      bottom:0px;
      left:50%;
      transform: translateX(-50%);
      z-index: 9;
      >ul{
        display: flex;
        align-items: center;
        justify-content: center;        
        >li{
          position: relative;
          padding:24px 0px;
          margin-right:81px;
          z-index: 8;
          
          &:last-child{
            margin-right:0px;
            &:after{
              display: none;
            }
          }

          &:after{
            content:'';
            display: block;
            width:1px;
            height:12px;
            opacity: .5;
            background: #fff;
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            right:-41px;
          }

          a{
            color:#FFF;            
            font-size: 14px;
            font-style: normal;
            font-weight: 700;            
            white-space: nowrap;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: nowrap;
            gap:4px;
            i{
              min-width:20px;
              height:20px;
              width:20px;   
              svg{
                transition: transform 0.3s ease;
              }           
              &.active svg {
                transform: rotate(180deg);
                transition: transform 0.3s ease;
              }
            }
          }
          > ul{
            position: absolute;
            top:60px;
            left:50%;
            transform: translateX(-50%);
            background: #fff;
            box-shadow: 0 8px 16px 0 rgba(31, 33, 40, 0.12);
            padding:16px;
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 10;
            
            &.show {
              max-height: 200px;
              opacity: 1;
              visibility: visible;
            }

            li{
              display: flex;
              align-items: center;
              justify-content: flex-start;
              width:100%;
              margin-bottom:16px;
              &:last-child{
                margin-bottom:0px;              
              }
              a{
                color:#515973;
                font-size: 14px;
                font-style: normal;
                font-weight: 700;              
                text-align: left;
                &:hover{ 
                  color:#00A654;
                }
              }
            }
          }      
        }
      }
    }
  }
}


/** 중앙 컨텐츠 **/
#out--container{
  width:100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top:100px;
  padding-bottom:120px;
  .out--container{
    max-width:844px;    

    .m--title{
      text-align: center;
      color:#1F2128;
      text-align: center;
      font-family: Pretendard;
      font-size: 48px;
      font-style: normal;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom:60px;
    }


    .form--contents--wrap {
      margin-top: 40px;
      border-top:1px solid #1F2128;
      padding-top:40px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap:20px;

      .contact-form{
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        flex-wrap: wrap;        


        .btn--wrap{
          width:100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-top:30px;
          button{
            display: flex;
            max-width:160px;
            width: 100%;
            height: 48px;
            border-radius: 24px;            
            background: #1F2128!important;
            justify-content: center;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;

            color:#FFF;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;            
          }
        }
      }

      .form--contents {
        margin-bottom: 28px;        
        width:100%;


        input[type="text"],
        input[type="email"],
        select,
        textarea {
          width: 100%;
          padding: 10px 16px;          
          border-radius: 0px;
          font-size: 16px;
          &::placeholder{
            color: #b6bbcc;
          }
        }

        h3 {
          color:#1F2128;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;          
          margin-bottom:8px!important;
          &.privacy--title{
            color:#1F2128;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;      
          }

          .required {
            color: #ff0000;
            margin-left: 4px;
          }
        }
        
        > div{
          width:100%;
        }
        &.half--cont{
          width:100%;
          max-width:calc(50% - 10px);
        }


        .qna--radio--group{
          fieldset{
            background:#EFF1FB;
            padding:4px;
            display: flex;
            gap:0px;
            >div{
              display: flex;                            
              // min-width:101px;
              width: 25%;
              height:36px;
              position: relative;
              >div{
                &:nth-of-type(1){
                  position: absolute;
                  top:0px;
                  left:0px;
                  width:100%;
                  height:100%;
                  pointer-events: none;
                  button{
                    width:100%;
                    height:100%;
                    border:0px!important;
                    box-shadow: none;
                    border-radius: 0px;
                    &[data-state="checked"]{
                      background: #fff;
                    }
                    >span{
                      display: none;
                    }
                  }
                }
                &:nth-of-type(2){                  
                  margin:0px;  
                  width:100%; 
                  height:36px;           
                  display: flex;
                  align-items: center;
                  justify-content: center;

                  label{
                    position: absolute;
                    top:0px;
                    border:0px!important;
                    left:0px;
                    width:100%;
                    height:100%;
                    margin:0px;
                    
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                    color:#B6BBCC;
                    font-size: 16px;
                    font-style: normal;
                    font-weight: 400;
                    &.actv{
                      font-weight: 500;                    
                      color:#1F2128;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .tel-group {
      display: flex;
      align-items: center;
      gap: 4px;
      button{
        height:40px;
        width:100%;
        font-size: 16px;
        max-width:calc( (100% / 3) - 20px);
        padding-left: 16px;
      }
      > div{
        width:100%;
      }
      select {
        width: 100px;      
      }
  
      input {
        flex: 1;
      }
  
      span {
        font-weight: 500;
      }
    }


    .radio-group {
      display: flex;
      gap: 20px;
      align-items: center;
    }

    .radio-group label {
      display: flex;
      align-items: center;
      cursor: pointer;
    }

    .radio-group input[type="radio"] {
      width: auto;
      margin-right: 5px;
    }

    .privacy-box {
      .privacy-content {
        height: 300px;
        overflow-y: auto;
        padding: 15px;
        background-color: #fff;     
        border: 1px solid #ddd;      
        margin-bottom: 20px;
        line-height: 1.8;
      }
  
      .agree-check {      
        background-color: #fff;            
        display: flex;
        align-items: center;
        justify-content: space-between;
        > h4 {
          color: #1F2128;
          font-size: 16px;
          font-style: normal;
          font-weight: 700;
          line-height: 130%; /* 20.8px */
        }
      }            
    }
    .note-placeholder{
      color: #b6bbcc;
      padding: 16px;
    }
    .summernote-wrapper{
      p{
        margin-bottom: 0;
      }
    }
  }
}




// 라디오 디자인 초기화
.agree-radio-group{
  fieldset{
    gap:32px;
  }
  label{
    color:#1F2128;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;    
  }
  button{
    width:20px;
    height:20px;
    border-radius: 20px;
    > span{
      background-color:#00A654!important;
      &:after{
        width:10px;
        height:10px;
      }
    }
  }
}


.summernote-wrapper .btn {
  color: #333!important;
  background-color: #fff!important;
  border-color: #ccc!important;
}