@charset "UTF-8";

.section-box {

    .content-box {
        @media screen and (max-width: 767px) {
          & p {
            font-size: 1.4rem;
        }
    }
}
}

.jltct-wrapper {
    /* navigation */
    .navigation-box{
        margin-bottom: 9rem;

        @media screen and (max-width: 767px) {
          margin-bottom: 7rem;
        }

        .nav-list{
            display: flex;
        
            @media screen and (max-width: 767px) {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        
            .nav-item{
                flex: 1;
                
                @media screen and (max-width: 767px) {
                    flex: 1;
                }
                
                .nav-link{
                    height: 6rem;

                    @media screen and (max-width: 767px) {
                      width: 100%;
                      height: 5rem;
                    }
                
                    .btn-text{
                        font-size: 1.8rem;
                        font-weight: bold;

                        @media screen and (max-width: 767px) {
                          font-size: 1.4rem;
                        }
                    
                    }
                    .btn-icon{
                        transform: rotate(90deg);
                    
                    }
                }
            }
        }
    }

    /* summary */
    .sec-summary {

        .content-box {

            .detail-table {
                & td {
                    line-height: 1.7;

                    & a {
                        background-color: #fff;

                        @media screen and (max-width: 767px) {
                          width: 100%;
                        }
                    }
                }

                & tr td, & tr th {
                    @media screen and (max-width: 767px) {
                        display: block;
                        width: 100%;
                    }
                }

                & th {
                    @media screen and (max-width: 767px) {
                      padding: 1rem 2rem;
                    }
                }

            }

            .bottom-btn-box {
                display: flex;
                justify-content: center;
                margin-top: 5rem;

                @media screen and (max-width: 767px) {
                  margin-top: 3rem;
                }

                & a {
                    width: 38rem;
                    height: 7.4rem;
                    border-radius: 60px;
                    padding: 2.5rem 3rem;
                    padding-right: 1.6rem;

                    @media screen and (max-width: 767px) {
                      width: 100%;
                      height: 5rem;
                      border-radius: 30px;
                      padding: 1rem 2rem;
                    }
                }
            }
        }
    }

    /* guidance */
    .sec-guidance {
        
        .content-box {
            .btns-box {
                display: flex;
                gap: 2.5rem;

                @media screen and (max-width: 767px) {
                  flex-direction: column;
                  gap: 24px
                }

                & a {
                    flex: 1;
                    height: 7.4rem;
                    border-radius: 60px;

                    @media screen and (max-width: 767px) {
                      flex: 0 0 auto;
                      width: 100%;
                      height: 5rem;
                      border-radius: 30px;
                    }
                }
            }

        }
    }

    /* flow */
    .sec-flow {

        .content-box {
            .step-list{
                display: flex;
                flex-direction: column;
                gap: 7.5rem;

                @media screen and (max-width: 767px) {
                  gap: 4rem;
                }

                .step-item{
                    position: relative;
                    padding: 4rem 6rem;
                    background-color: #F8F8F8;

                    @media screen and (max-width: 767px) {
                      padding: 3rem;
                    }

                    &::after {
                        content: '';
                        position: absolute;
                        left: 50%;
                        transform: translate(-50%, 10%);
                        bottom: 100%;
                        border-top: 3.5rem solid var(--primary-color);
                        border-left: 2rem solid transparent;
                        border-right: 2rem solid transparent;
                        border-bottom: 2rem solid transparent;
                        
                        @media screen and (max-width: 767px) {
                            border-top: 2.5rem solid var(--primary-color);
                            border-left: 1rem solid transparent;
                            border-right: 1rem solid transparent;
                            border-bottom: 1rem solid transparent;
                          
                        }
                    }

                    &:first-child::after {
                        display: none;
                    }
                
                    .step-title-box{
                        margin-bottom: 1.8rem;
                        font-size: 2.2rem;
                        font-weight: bold;

                        @media screen and (max-width: 767px) {
                          font-size: 1.8rem;
                          line-height: 1.7;
                        }

                        & span {
                            color: var(--primary-color);
                            position: relative;
                            display: inline-block;
                            padding-right: 1.4rem;
                            margin-right: 1.3rem;
                            line-height: 1;
                            text-transform: uppercase;

                            &::after {
                                content: '';
                                position: absolute;
                                top: 3px;
                                right: 0;
                                height: 90%;
                                width: 2px;
                                background: var(--primary-color);
                            }
                        }
                    
                    }
                    .step-content-box{
                        font-size: 1.6rem;

                        & p {

                            @media screen and (max-width: 767px) {
                              font-size: 1.4rem;
                            }

                            & span {
                                color: var(--primary-color);
                                font-weight: bold;
                            }

                            & a {
                                text-decoration: underline;
                                color: var(--primary-color);
                                width: unset !important;
                                background-color: unset !important;
                            }
                        }
                        
                    
                    }
                    
                    &.step00{
                        
                        .step-btns-box{
                            margin-top: 2rem;
                            display: flex;
                            gap: 2rem;

                            @media screen and (max-width: 767px) {
                              flex-direction: column;
                            }

                            & a {
                                height: 5rem;
                                flex: 0 0 13rem;
                                border-radius: 60px;
                                background-color: #fff;

                                @media screen and (max-width: 767px) {
                                  flex: 0 0 auto;
                                  height: 5rem;
                                  border-radius: 30px;
                                  width: 100%;
                                }

                                &:first-child {
                                    flex: 0 0 26rem;

                                    @media screen and (max-width: 767px) {
                                      flex: 0 0 auto;
                                    }
                                }
                            }
                        }
                    }
                    &.step01{

                        & a.btn-red {
                            margin-top: 2rem;
                            margin-bottom: 3rem;
                            width: 20rem;
                            height: 5rem;
                            border-radius: 60px;

                            @media screen and (max-width: 767px) {
                              margin: 3rem auto;
                              width: 80%;
                            }
                        }

                        .bottom-desc-box {
                            max-width: 45rem;
                            width: 45rem;
                            margin-top: 2rem;
                            font-size: 1.4rem;
                            padding: 1.4rem 2.8rem;
                            border: 1px solid var(--primary-color);
                            line-height: 1.7;
                            background-color: #fff;

                            @media screen and (max-width: 767px) {
                              max-width: 100%;
                              width: 100%;
                            }
                        }
                    
                    }
                    &.step02{
                    
                    }
                    &.step03{

                        & a {
                            margin: 2rem 0;
                            width: 16rem;
                            height: 5rem;
                            border-radius: 60px;
                            background-color: #fff;

                            @media screen and (max-width: 767px) {
                              margin: 3rem auto;
                              width: 80%;
                            }
                        }
                    
                    }
                    &:last-child {
                        & a {
                            margin-top: 2rem;
                            width: 32rem;
                            height: 5rem;
                            border-radius: 60px;
                            background-color: #fff;

                            
                            @media screen and (max-width: 767px) {
                                width: 100%;
                            }
                        }
                        
                        & p {
                            & a {
                                
                                &[target="_blank"] {
                                    margin: 0;
                                    height: 0;
                                }
                            }
                        }
                    }
                }
            }

        }
    }

    /* cerfificate */
    .sec-cerfificate {

        .content-box {
            .btn-box {
                margin-top: 4rem;
                margin-bottom: 6rem;
                display: flex;
                justify-content: center;

                & a {
                    width: 40rem;
                    height: 7.5rem;
                    border-radius: 60px;

                    @media screen and (max-width: 767px) {
                      width: 100%;
                      height: 5rem;
                      border-radius: 30px;
                      padding: 2.6rem 3rem;
                      padding-right: 1.6rem;
                    }
                }
            }

            .bottom-desc-box {
                width: 73rem;
                max-width: 73rem;
                margin: 0 auto;
                padding: 3rem 4rem;
                background-color: #DDF3FF;
                text-align: center;
                line-height: 1.7;

                @media screen and (max-width: 767px) {
                  width: 100%;
                  max-width: 100%;
                }

                & a {
                    text-decoration: underline;
                    color: var(--primary-color);
                }
            }

        }

    }

    /* data */
    .sec-data {

        .content-box {
            display: flex;
            flex-direction: column;
            gap: 7rem;

            & h3 {
                margin-bottom: 2rem;
    
                & + p {
                    margin-bottom: 3rem;
                }
            }

            .btns-box {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                grid-row-gap: 2rem;
                grid-column-gap: 5.4rem;

                @media screen and (max-width: 767px) {
                  grid-template-columns: 1fr;
                }

                & a {
                    width: 100%;
                    height: 7.4rem;
                    border-radius: 60px;

                    @media screen and (max-width: 767px) {
                      height: 5rem;
                      border-radius: 30px;
                    }
                }
            }
        }

    }

    /* faq */
    .sec-faq {

        .inner {
            &::before, &::after {
                display: none;
            }
        }

        .content-box {

            & p {
                margin-bottom: 4rem;
    
                @media screen and (max-width: 767px) {
                  margin-bottom: 3rem;
                }

            }

            & a {
                @media screen and (max-width: 767px) {
                  margin: 0 auto;
                }
            }
        }
    }

}