@import url(/assets/css/reset.css);
@import url(/assets/css/footer.css);


/* 백그라운드 컬러별 */
.white-bg{
    background:#fff;
}
.dark-bg{
    background: #020C1C;
    color: #FFF;
}
.grey-bg{
    background: #F2F2F7;
}


/* 타이포 */
.section-h1{
    font-size: 70px;
    font-weight: 700;
}

.section-h2{
    font-size: 60px;
    font-weight: 700;
}

.section-h3{
    font-size: 50px;
    font-weight: 700;
}

.section-h4{
    font-size: 48px;
    font-weight: 700;
}


.white-bg .section-h1,
.white-bg .section-h2,
.white-bg .section-h3,
.white-bg .section-h4,
.grey-bg .section-h1,
.grey-bg .section-h2,
.grey-bg .section-h3,
.grey-bg .section-h4{
    color: #222;
}

.dark-bg .section-h1,
.dark-bg .section-h2,
.dark-bg .section-h3,
.dark-bg .section-h4{
    color: #fff;
    font-weight: 500;
}


.section-b1{
    font-size: 24px;
    font-weight: 400;
}

.section-b2{
    font-size: 20px;
    font-weight: 400;
}

.section-b3{
    font-size: 18px;
    font-weight: 400;
}

.white-bg .section-b1,
.white-bg .section-b2,
.white-bg .section-b3,
.grey-bg .section-b1,
.grey-bg .section-b2,
.grey-bg .section-b3{
    color: #555;
}

.dark-bg .section-b1,
.dark-bg .section-b2,
.dark-bg .section-b3{
    color: #DADDE7;
    font-weight: 300;
}

.list-h1{
    font-size: 24px;
    font-weight: 700;
}
.list-h2{
    font-size: 20px;
    font-weight: 700;
}
.list-h3{
    font-size: 15px;
    font-weight: 400;
}
.list-b1{
    font-size: 18px;
    font-weight: 400;
    color: #555;
}
.list-b2{
    font-size: 16px;
    font-weight: 400;
    color: #555;
}

.list-b3{
    font-size: 14px;
    font-weight: 400;
    color: #9FA0AC;
}


.dark-bg .list-h1,
.dark-bg .list-h2{
    font-weight: 600;
}

.dark-bg .list-h3,
.dark-bg .list-b1{
    font-weight: 300;
}

.dark-bg .list-b1{
    color: #DADDE7;
}

.t-center{
    text-align: center;
}

.t-right{
    text-align: center;
}

.t-midium{
    font-weight: 500;
}
.t-bold{
    font-weight: 700;
}


@media screen and (max-width: 1280px){
    .section-h1{
        font-size: 32px;
    }
    
    .section-h2{
        font-size: 32px;
    }
    
    .section-h3{
        font-size: 24px;
    }
    
    .section-h4{
        font-size: 28px;
    }

    .section-b1{
        font-size: 18px;
    }

    .section-b2{
        font-size: 16px;
    }

    .section-b3{
        font-size: 16px;
    }

    .list-h1{
        font-size: 18px;
    }
    .list-h2{
        font-size: 18px;
    }
    .list-h3{
        
    }
    .list-b1{
        font-size: 15px;   
    }

    .mobile-block{
        display: block;
    }

}

/* 버튼 */
button,
.button {
  font-size: inherit;
  font-family: inherit;
  border-radius: var(--standard-border-radius);
  box-shadow: none;
  max-width: 100%;
  display: inline-block;
}


/* 버튼 */
button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    line-height: 1;
    padding: 0 40px 0 35px;
}

button.with-subtitle{
    flex-direction: column;
    gap:0;
    font-weight: 400;
}

button.with-subtitle .subtitle{
  font-size: 14px;
}

button.with-icon{
    padding: 0 28px 0 40px;
}

button.h-56{
    height: 56px;
    border-radius: 28px;
    min-width: 250px;
}

button.h-50{
    height: 50px;
    border-radius: 25px;    
}

button.h-48{
  height: 50px;
  border-radius: 25px;    
  font-size: 17px;
  padding:0;
}

button.h-44{
  height: 44px;
  padding: 0 35px;
  border-radius: 22px;
  font-size: 16px;
}

button.h-41{
  font-size: 16px;
  padding: 0 30px;
  gap: 10px;
  height: 41px;
  border-radius: 25px;;
}

button.h-41.with-icon{
  padding-right: 20px;
}

button.black{
    background: #222;
    color: #FFF;
}

button.blue{
    background: #2192FF;
    color: #FFF;
}

button.disabled,
button:disabled{
    background: #F2F2F7;
    pointer-events: none;
}

button.black.outline{
  background: #FFF;
  color: #222;
  border: 2px solid #222;
}

button .icon{
    font-size: 24px;
}

button.text{
  font-weight: 400;
  background: transparent;
  border-color: transparent;
  padding: 10px 14px;
  letter-spacing: -0.02em;
}
button.text:hover{
  background: #F2F2F7;
}

button.text.with-icon{
  padding-right: 8px;
}
button.text.with-icon .icon{
  color: #1363DF;
}


/* 버튼 그룹 */

.button-group{
    display: flex;
    background: #F2F2F7;
    width: fit-content;
}

.button-group.h-56{
    --border-radius: 28px;
    --height:56px;
    border-radius: var(--border-radius);
}

.button-group.black{
    --active-color: #222;
}

.button-group button{
    height: var(--height);
    border-radius: var(--border-radius);
    color: #9FA0AC;
    padding: 0 40px;
}

.button-group button.active{
    background: var(--active-color);
    color: #fff;
}

button.mobile-only{
  display: none;
}

@media screen and (max-width: 1280px){

  button.h-56{
    font-size: 18px;
    min-width: 200px;
  }

  button.desktop-only{
    display: none;
  }

  button.mobile-only{
    display: flex;
  }

}

/* 레이아웃 */
.container{
    width: 100%;
    max-width: 1440px;
}

main .container{
    display: flex;
    flex-direction: column;
}

main.layout-forms .container,
main.layout-company .container{
    padding: 100px 32px;
    gap: 40px;
}

main.layout-product .container{
    padding: 120px 32px 150px 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 120px;
}

main.layout-product .title-wrapper{
    display: flex;
    flex-direction: column;
    gap: 40px;
}

main.layout-product .title-wrapper .mobile-only{
    display: none;
}

main.layout-product .service-title h1{
    position: absolute;
    opacity: 0;
}

.site{
    display: flex;
    justify-content: center;
    width: 100%;
    min-width: 980px;
    flex-direction: column;
    align-items: center;
}



.site main{
    width: 100%;
    max-width: 1440px;
}

.site section{
    width: 100%;
    display: flex;
    justify-content: center;
}

.site section .container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 150px 32px;
}

/* 타이틀 스타일 */
.site section .title-wrapper{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:28px;
}

.site section .forms.container{
    padding: 0 32px 150px
}

.site section .forms.container form{
    display: flex;
    padding-top: 0;
    gap: 100px;
    width: 100%;
    flex-direction: column;
    align-items: center;   
}

.forms-wrapper{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap:50px;
}

.forms-wrapper .row{
    display: flex;
    gap: 40px;
}

.forms-wrapper .row .col{
    flex: 1;
}



@media screen and (max-width: 1280px){

    .site{
        min-width: unset;
    }

    .site section .container{
        gap: 30px;
        padding: 50px 20px;
    }

    .site section .title-wrapper{
        gap: 25px;
    }

    main.layout-product .title-wrapper .service-title{
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap : 0 10px;
    }
    
    main.layout-product .title-wrapper .desktop-only{
        display: none;
    }

    main.layout-product .title-wrapper .mobile-only{
        display: block;
    }

    main.layout-forms .container,
    main.layout-company .container{
        padding: 80px 20px;
        gap: 20px;
    }

    .site section .forms.container form{
        gap: 20px;
    }

    .forms-wrapper{
        gap: 0;
    }

    .forms-wrapper .row{
        flex-direction: column;
        gap: 0;
    }

    .forms-wrapper .row .col{
        padding-bottom: 30px;
    }

    .forms-wrapper .row .col.hidden{
        padding-bottom: 0px;
    }
    
}

/* 컴포넌트 */

/* 체크리스트 */
ul.check{
    padding-left: 24px;
}
ul.check li{
    position: relative;
}
ul.check li::before{
    content: 'check';
    position: absolute;
    left: -24px;
    font-family: 'Material Symbols Rounded';
    line-height: 1;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' -25, 'opsz' 20;
}

ul.check.grey li::before{
    color: #222222;
}

ul.check.blue li::before{
    color: #2192FF;
}

/* 텍스트 박스 리스트 */
ul.text-box-list{
    display: flex;
    gap: 40px;
}

ul.text-box-list li{
    flex : 1;
    display: flex;
    flex-direction: column;
    gap: 20px;   
}

ul.text-box-list li .img-container{
    height: 150px;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul.text-box-list li .img-container img{
    width: 100%;
    object-fit: cover;
}

ul.text-box-list li .text-container{
    display: flex;
    flex-direction: column;
    gap: 10px;   
}

@media screen and (max-width: 1280px){
    ul.text-box-list{
        flex-direction: column;
        gap: 30px
    }
    ul.text-box-list li .img-container{
        aspect-ratio: 350/167;
        height: unset;
        border-radius: 10px;
    }

    ul.text-box-list li .text-container{
        gap: 10px;
    }
}

/* 드랍다운(로그인) */
.floating-dropdown{
    display: none;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 0 10px 30px 0 rgba(13, 37, 74, 0.20);  
    position: fixed;
    right: 0;
    top: 0;
}

.floating-dropdown .wrapper{
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 15px 0;
}

.floating-dropdown .wrapper  > p{
    color: #111;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.floating-dropdown .wrapper > ul li{
    padding: 5px 28px;
    color: #111;
    text-align: center;
    font-size: 16px;
    cursor:pointer;
}

.floating-dropdown .wrapper > ul li:hover{
    background: #F2F2F7;
    color: #1363DF;
    font-weight: 700;
}

.card{
    padding: 40px;
    border-radius: 20px;
}

.card.dark{
    border: 1px solid #4D546A;
    background: #1D2033;
    display: flex;
    flex-direction: column;
}

.card.dark .circle-icon{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid #4D546A;
}

.card.dark .list-h1{
    font-weight: 500;
}

.card.outline{
    border: 2px solid #222;
    background: #FFF;
    padding: 38px;
}

.card[data-feature='plan']{
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.card[data-feature='plan'] .title{
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: 120px;
}

.card[data-feature='plan'] .info p:nth-child(1){
    font-family: Inter;
    font-size: 22px;
    font-weight: 800;
}

.card[data-feature='plan'] .info p:nth-child(2){
    color: #7D8FA0;
    font-size: 15px;
}

.card[data-feature='plan'] .price{
    display: flex;
    align-items: flex-end;
    gap: 2px;
    
}

.card[data-feature='plan'] .price p:nth-child(1){
    color: #000;
    font-family: Inter;
    font-size: 42px;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.card[data-feature='plan'] .price p:nth-child(2){
    color: #000;
    font-size: 22px;
    font-weight: 700;
    line-height: 222%; /* 48.84px */
}

.card[data-feature='plan'] .divider{
    width: 100%;
    height: 1px;
    background: #C6C7D8;
}

.card[data-feature='plan'] ul{
    padding-left: 16px;
}

.card[data-feature='plan'] li{
    font-size: 16px;
    margin-bottom: 8px;
    /* height: 25px; */
    padding: 2px 0;
}

.card[data-feature='plan'] li:last-child{
    margin-bottom: 0;
}

.card[data-feature='plan'] li::before{
    left: -18px;
    top: 3px;
}

@media screen and (max-width: 1280px){
    .card{
        border-radius: 10px;
    }

    .card.outline{
        padding: 20px;
    }

    .card[data-feature='plan'] .price p:nth-child(1){
        font-size: 38px;
    }
    .card[data-feature='plan'] .price p:nth-child(2){
        font-size: 18px;
    }
}


/* 아코디언 */
.accordion-list {
    border-top: 2px solid #777;
    width: 100%;
}
.accordion-list .accordion-item {
    border-bottom: 1px solid #C6C7D8; 
}
.accordion-list .accordion-item .accordion-link {
    display: block; 
    position: relative; 
    padding: 30px 20px; 
    transition: all 0.3s;
}
.accordion-list .accordion-item.active .accordion-link {
    
}
.accordion-list .accordion-item .accordion-link::before {
    content: "keyboard_control_key"; 
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right: 20px;
    font-size: 26px;
    transition: all 0.3s;
}
.accordion-list .accordion-item.active .accordion-link::before {
    transform: rotateX(180deg);
}
.accordion-list .accordion-name {
    position: relative; 
    width: calc(100% - 50px); 
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
}

.accordion-list .accordion-item .accordion-desc {
    display: none; 
    padding: 0 20px 30px 20px;   
    color: #555;
    font-size: 18px;
}

.accordion-list .accordion-item .accordion-desc a{
    color: #2192FF;
}

.accordion-list .accordion-item .accordion-desc a:hover{
    text-decoration: underline;
}


@media screen and (max-width: 1280px){
    .accordion-list .accordion-item .accordion-link{
        padding: 20px 0;
    }

    .accordion-list .accordion-item .accordion-link::before{
        right: 0;
        top: calc(50% - 10px);
    }

    .accordion-list .accordion-name{
        font-size: 18px;
    }
  
    .accordion-list .accordion-item .accordion-desc{
        font-size: 16px;
        padding: 0;
        padding-bottom: 20px;
    }
}