.sec_header .sec_tag {
    width: fit-content;
    padding: 6px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--ft18);
    color: white;
    font-weight: var(--medium);
    background: var(--primary);
    border-radius: 99px;
    margin-bottom: 30px;
}
.sec_header .sec_tag::before,
.sec_header .sec_tag::after {
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    border-radius: 9px;
    background: white;
}
.sec_header h2 {
    font-size: var(--ft46);
    font-weight: var(--semi-bold);
    color: var(--ft-main);
    margin-bottom: 30px;
}
.sec_header p {
    font-size: var(--ft20);
    font-weight: var(--medium);
    color: var(--gray-700);
}
.sec_header .more_btn {
    margin-top: 50px;
}
.sec_header.center {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.sec_header.center h2,
.sec_header.center p {
    text-align: center;
}

.swiper-slide {
    height: auto;
}

/* intro */
.h_top {
    opacity: 0;
    transform: translateY(-100%);
}
.hero_sec .sec_l {
    opacity: 0;
    transform: translateX(-50px);
}
.hero_sec .sec_r > div {
    opacity: 0;
    transform: translateX(50px);
}

/* ************ hero sec ********* */
.hero_sec {
    height: 100vh;
    min-height: 900px;
    padding-top: var(--header-gap);
    padding-bottom: 60px;
    overflow: hidden;
}
.hero_sec .inner {
    height: 100%;
}
.hero_sec .sec_content {
    display: grid;
    grid-template-columns: 1fr 26%;
    gap: 30px;
    align-items: stretch;
    height: 100%;
}


.hero_search {
    background: url('/images/main_bg.png') no-repeat center / cover;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
.hero_search::before {
    content: '';
    display: block;
    inset: 0;
    position: absolute;
    background: var(--dimd);
    z-index: 0;
}

.hero_search .sec_title {
    font-size: var(--ft40);
    color: white;
    font-weight: var(--normal);
    text-align: center;
    position: relative;
    z-index: 1;
}
.hero_search .search_box {
    width: 80%;
    max-width: 550px;
    height: 62px;
    padding: 10px 30px;
    margin: 60px auto 0;
    position: relative;
    z-index: 1;
    border: 1px solid var(--gray-300);
    background: white;
    box-shadow: var(--shadow);
    transition: transform .4s ease, border .4s ease, background .3s ease;
    backdrop-filter: blur(4px);
}
.hero_search .search_box:hover {
    background: var(--white-600);
}
.hero_search .search_input {
    font-size: var(--ft18);
    font-weight: var(--medium);
}
.hero_search .search_input::placeholder {
    color: var(--ft-sub);
}
.hero_search .search_btn {
    width: 24px;
    height: 24px;
    background: url('/images/icon/search.svg') no-repeat center / cover;
}


.hero_search .search_box:focus-within {
    background: white;
    border-color:var(--primary);
    transform: translateY(-8px);
    outline: none !important;
}



.hero_sec .sec_r {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
}
.hero_cases {
    flex: 1 0 0;
    position: relative;
}
.hero_swiper {
    height: 100%;
}
.hero_swiper_pagination {
    width: fit-content;
    height: fit-content;
    position: absolute;
    right: 20px;
    top: 20px;
    left: auto;
    background: var(--black-600);
    border-radius: 99px;
    padding: 6px 12px;
    color: white;
    font-size: var(--ft16);
}

.hero_swiper .case_card .body {
    padding: 34px;
}
.hero_swiper .case_card .category {
    font-size: var(--ft18);
}
.hero_swiper .case_card .title {
    font-size: var(--ft24);
}
.hero_swiper .case_card .desc {
    font-size: var(--ft18);
}
.hero_swiper .case_card .date {
    font-size: var(--ft16);
}
.hero_contact {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    gap: 20px;
}
.hero_contact .btn {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-direction: column;
    position: relative;
    border-radius: var(--radius-md);
    transition: background .4s ease;
}

.hero_contact .btn:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 70%;
    right: -10px;
    position: absolute;
    background: var(--white-200);
}
.hero_contact .icon {
    width: 26px;
    height: 26px;
    transition: transform .3s ease;
}
.hero_contact .btn_text {
    font-size: var(--ft18);
    font-weight: var(--medium);
    color: white;
    text-align: center;
}

.hero_contact .btn:hover {
    background: var(--white-100);
}
.hero_contact .btn:hover .icon {
    transform: scale(.95);
}
/********** about sec **********/
.about_sec_wrap {
    height: 300vh;
}
.about_sec1 {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
}
.about_sec1 h2 {
    font-size: var(--ft70);
    color: var(--ft-main);
    text-align: center;
    transform: scale(1.2);
    opacity: 0;
}
.about_sec2 {
    height: 100vh;
    position: sticky;
    top: 0;
    margin-top: 50vh;
}
.about_sec2 .sec_content {
    border-radius: calc(var(--radius-lg) * 2);
    background: linear-gradient(to bottom, white, var(--bg-light));
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 140px;
    overflow: hidden;
}
.about_sec2 .lawyer_mark {
    position: absolute;
    bottom: -100px;
    left: 100px;
    width: 600px;
    height: 600px;
    opacity: .1;
    filter: grayscale(1);
    pointer-events: none;
    transform: translateY(100%) rotate(30deg);
    opacity: 0;
}
.about_sec2 .sec_content::after {
    content: '';
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url('/images/bg_deco.png') no-repeat 0% 0% / 200%;
    width: 700px;
    height: 700px;
    z-index: 0;
}
.about_sec2 h3 {
    font-size: var(--ft36);
    color: transparent;
    font-weight: var(--semi-bold);
}
.about_sec2 h3 span {
    display: inline;
    color: transparent;
    background-image: linear-gradient(to right, var(--ft-main) 50%, rgba(0,0,0,.18) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    background-clip: text;
    -webkit-background-clip: text;
}
.about_info {
    margin-left: auto;
    padding-right: 50%;
    margin-top: var(--con-gap);
}
.about_info .top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 14px;
}
.about_info .name {
    font-size: var(--ft24);
    font-weight: var(--semi-bold);
    color: var(--ft-main);
}
.about_info .position {
    font-size: var(--ft18);
    font-weight: var(--medium);
    color: var(--ft-main);
  
}
.about_info .history li {
    color: var(--ft-sub);
    font-size: var(--ft18);
    font-weight: var(--medium);
    line-height: 1.5;
}
.about_visual {
    max-width: 630px;
    height: auto;
    max-height: 100%;
    width: 50%;
    position: absolute;
    left: calc(50% + var(--con-gap));
    bottom: 0;
    z-index: 1;
}
.about_info .more_btn {
    margin-top: 40px;
}

/********** wincase sec **********/
.wincase_sec {
    padding-top: var(--sec-gap);
    padding-bottom: var(--sec-gap);
    overflow: hidden;
}
.wincase_sec .sec_content {
    padding: 0 100px;
}
.wincase_sec .sec_header {
    margin-bottom: var(--con-gap);
}
.wincase_swiper {
    overflow: visible;
}
.wincase_sec .swiper-slide {
    opacity: .35;
    filter: blur(6px);
    transition: opacity .4s ease, filter .4s ease;
}

.wincase_sec .swiper-slide-visible {
    opacity: 1;
    filter: blur(0);
}

.wincase_sec .case_card a {
    transition: transform .4s ease, box-shadow .4s ease;
}
.column_card a,
.shorts_card a,
.review_card a {
    transition: transform .4s ease;
}

.wincase_sec .case_card a:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow);
}
.column_card a:hover,
.shorts_card a:hover,
.review_card a:hover {
    transform: translateY(-8px);
}



/********** banner_sec **********/
.banner_sec {
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
    margin-bottom: var(--sec-gap);
    overflow: hidden;
}
.banner_sec .bg {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100vh;
    z-index: 0;
    transform: translateY(-200px);
}
.banner_sec .bg img {
    width: auto;
}
.banner_sec .sec_content {
    position: relative;
    z-index: 1;
}
.banner_sec .sec_title {
    font-size: var(--ft80);
    color: white;
    font-weight: var(--semi-bold);
    margin-bottom: 40px;
    text-align: center;
}
.banner_sec p {
    font-size: var(--ft20);
    color: white;
    font-weight: var(--medium);
    text-align: center;
}


/********** youtube sec **********/
.youtube_sec {
    margin-bottom: var(--sec-gap);
}
.youtube_sec .inner {
    display: grid;
    align-items: end;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}
.youtube_sec .sec_content {
    min-width: 0;
    position: relative;
}
.youtube_swiper {
    margin: 0 40px;
    padding-top: 10px;
}
.youtube_profile_box {
    margin-top: var(--con-gap);
    width: 100%;
    padding: 50px;
    border-radius: var(--radius-lg);
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.y_profile_thumb {
    width: 140px;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
}

.y_profile_r {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.y_profile_r .y_logo {
    width: 60px;
    margin-bottom: 14px;
}
.y_profile_r .name {
    font-size: var(--ft24);
    font-weight: var(--semi-bold);
    color: var(--ft-main);
    margin-bottom: 30px;
}
.y_profile_r .more_btn {
    margin-top: 0;
}




/***** columne sec *****/
.column_sec {
    margin-bottom: var(--sec-gap);
}
.column_sec .inner {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.column_sec .sec_content {
    min-width: 0;
    position: relative;
}
.column_swiper {
    margin: 0 40px;
    padding-top: 10px;
}


/* column card */
.column_swiper .swiper-slide {
    height: auto;
}
.column_card {
    height: 100%;
}
.column_card a {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--line);
    position: relative;
}
.column_card .thumb {
    aspect-ratio: 4 / 3;
}
.column_card .info_box {
    display: flex;
    align-items: start;
    gap: 16px;
    padding: 24px 20px;
}
.column_card .title {
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
    color: var(--ft-main);
    margin-bottom: 12px;
}
.column_card .date {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--ft-light);
}
.column_card .category {
    width: fit-content;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: var(--gray-900);
    color: white;
    font-size: var(--ft16);
    font-weight: var(--medium);
    position: absolute;
    top: 10px;
    left: 10px;
}


/***** review sec *****/
.review_sec {
    padding-bottom: var(--sec-gap);
    background: var(--bg);
    /* position: relative;
    z-index: 2; */
}
.review_sec .sec_header {
    margin-bottom: var(--con-gap);
}
/* .review_sec::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 300px;
    transform: translateY(100%);
    background: linear-gradient(to bottom, var(--bg) 10%, transparent);
} */
.review_sec .sec_content {
    background: var(--bg-sec);
    padding: var(--con-gap) 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.review_swiper {
    overflow: visible;
}

.swiper-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}
.swiper-control .swiper-prev,
.swiper-control .swiper-next {
    position: static;
    transform: unset;
}


/***** contact sec *****/

.contact_sec .bg {
    position: absolute;
    z-index: 0;
    inset: 0;
    bottom: calc(var(--footer-height) * -1);
}
.contact_sec .inner {
    position: relative;
    z-index: 1;
}
.contact_sec .sec_content {
    padding: var(--sec-gap) 0;
}
.contact_sec .sec_title {
    font-size: var(--ft80);
    color: white;
    font-weight: var(--semi-bold);
    margin-bottom: 40px;
    text-align: center;
}
.contact_sec p {
    font-size: var(--ft20);
    color: white;
    font-weight: var(--medium);
    text-align: center;
}
.contact_btn_box {
    max-width: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-radius: var(--radius-lg);
    background: var(--primary);
    gap: 20px;
    margin: var(--con-gap) auto 0;
}
.contact_btn_box .btn {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-direction: column;
    position: relative;
    border-radius: var(--radius-md);
    transition: background .4s ease;
}

.contact_btn_box .btn:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 70%;
    right: -10px;
    position: absolute;
    background: var(--white-200);
}
.contact_btn_box .icon {
    width: 28px;
    height: 28px;
    transition: transform .3s ease;
}
.contact_btn_box .btn_text {
    font-size: var(--ft18);
    font-weight: var(--medium);
    color: white;
}

.contact_btn_box .btn:hover {
    background: var(--white-100);
}
.contact_btn_box .btn:hover .icon {
    transform: scale(.95);
}

@media all and (max-width: 1600px) {
    .sec_header h2 {
        font-size: var(--ft40);
    }


    /*-- hero_sec --*/
    .hero_sec {
        min-height: 820px;
    }
    .hero_search .sec_title {
        font-size: var(--ft36);
    }
    .hero_swiper .case_card .title {
        font-size: var(--ft20);
    }

    .hero_contact .btn {
        padding: 4px;
        height: auto;
    }
    .hero_contact .icon {
        width: 22px;
        height: 22px;
    }
    .hero_contact .btn_text {
        font-size: var(--ft16);
    }

    /*-- about_sec_wrap --*/
    .about_sec1 h2 {
        font-size: var(--ft50);
    }
    .about_sec2 .sec_content {
        padding-left: 80px;
    }
    .about_sec2 h3 {
        font-size: var(--ft32);
    }
    .about_visual {
        width: 35%;
        left: auto;
        right: 40px;
    }

    /*-- banner_sec --*/
    .banner_sec .sec_title {
        font-size: var(--ft60);
    }
}

@media all and (max-width: 1400px) {

    .sec_header h2 {
        font-size: var(--ft36);
    }

    #scrolldown {
        bottom: 20px;
        flex-direction: row;
        gap: 4px;
    }
    #scrolldown p {
        color: var(--gray-500);
        font-size: var(--ft14);
    }
    #scrolldown .icon {
        background: var(--gray-500);
    }

    /*-- hero_sec --*/
    .hero_sec {
        min-height: auto;
    }
    .hero_sec .sec_content {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .sec_content .sec_l {
        height: 100%;
    }
    .hero_cases {
        display: none;
    }
    .hero_contact .btn {
        padding: 10px;
        flex-direction: row;
        gap: 10px;
    }
    .hero_sec .sec_r > div {
        transform: translateX(-50px);
    }

    /*-- about_sec --*/
    .about_sec1 h2 {
        font-size: var(--ft40);
    }
    .about_sec2 h3 {
        font-size: var(--ft28);
    }

    /*-- banner_sec --*/
    .banner_sec {
        height: 400px;
    }
    .banner_sec .sec_title {
        font-size: var(--ft50);
    }

    /*-- youtube_sec --*/
    .youtube_sec {
        overflow: hidden;
    }
    .youtube_sec .inner {
        grid-template-columns: repeat(1, 1fr);
        align-items: start;
    }
    .youtube_sec .sec_header {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .youtube_sec .sec_content {
        width: 100%;
    }
    .youtube_swiper {
        overflow: visible;
    }

    .swiper-prev, 
    .swiper-next {
        --swiper-btn : 40px;
    }

    /*-- column_sec --*/
    .column_sec {
        overflow: hidden;
    }
    .column_sec .inner {
        grid-template-columns: repeat(1, 1fr);
        align-items: start;
    }
    .column_sec .sec_content {
        width: 100%;
    }
    .column_sec .sec_header {
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .column_swiper {
        overflow: visible;
    }
}

@media all and (max-width: 1024px) {
    .sec_header h2 {
        margin-bottom: 24px;
        font-size: var(--ft32);
    }

    /*-- about_sec --*/
    .about_sec2 .sec_content {
        padding-left: 40px;
    }
    .about_sec2 .lawyer_mark {
        left: 50px;
        width: 400px;
        height: 400px;
    }
    .about_visual { 
        width: 40%;
    }

    /*-- youtube_sec --*/
    .youtube_profile_box {
        padding: 32px;
    }
    .y_profile_thumb {
        width: 100px;
    }
    .y_profile_r .name {
        margin-bottom: 20px;
        font-size: var(--ft20);
    }
}

@media all and (max-width: 768px) {
    .sec_header .sec_tag {
        font-size: var(--ft16);
        margin-bottom: 20px;
    }
    .sec_header h2 {
        margin-bottom: 20px;
        font-size: var(--ft28);
    }
    .sec_header p {
        font-size: var(--ft18);
    }
    .sec_header .more_btn {
        margin-top: 32px;
    }


    /*-- hero_sec --*/
    .hero_sec {
        height: 100svh;
    }
    .hero_search .sec_title {
        font-size: var(--ft28);
    }
    .hero_search .search_box {
        width: calc(100% - 40px);
        padding: 0 ;
        height: 50px;
        margin-top: 32px;
        padding: 10px 20px;
    }
    .hero_search .search_btn {
        width: 16px;
        height: 16px;
    }
    .hero_search .search_input {
        font-size: var(--ft16);
    }
    .hero_contact {
        padding: 10px;
    }
    .hero_contact .btn {
        flex-direction: column;
    }
    .hero_contact .icon {
        width: 18px;
        height: 18px;
    }
    .hero_contact .btn_text {
        font-size: var(--ft13);
    }

    /*-- about_sec --*/
    .about_sec_wrap {
        height: auto;
    }
    .about_sec1 {
        height: 100vh;
    }
    .about_sec1 h2 {
        font-size: var(--ft28);
    }
    .about_sec2 {
        height: auto;
        position: static;
        margin-top: 20vh;
    }
    .about_sec2 .inner {
        padding: 0 10px;
    }
    .about_sec2 .sec_content {
        height: auto;
        padding: 140px 20px 0;
        justify-content: start;
    }
    .about_sec2 h3 {
        font-size: var(--ft24);
    }
    .about_info {
        margin-top: 32px;
        margin-left: 0;
        padding-right: 0;
    }
    .about_info .top {
        gap: 10px;
    }
    .about_sec2 .sec_content::after {
        display: none;
    }
    .about_sec2 .lawyer_mark {
        width: 80%;
        height: auto;
        aspect-ratio: 1/ 1;
        bottom: -2%;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
    .about_visual {
        width: 70%;
        position: static;
        margin: 0 auto;
    }

    /*-- wincase_sec --*/
    .wincase_sec .sec_content {
        padding: 0 20px;
    }

    /*-- banner_sec --*/
    .banner_sec {
        height: 300px;
    }
    .banner_sec .sec_title {
        margin-bottom: 24px;
        font-size: var(--ft40);
    }
    .banner_sec p {
        font-size: var(--ft18);
    }

    /*-- youtube_sec --*/
    .youtube_sec .inner {
        gap: 30px;
    }
    .youtube_profile_box {
        padding: 20px;
        gap: 20px;
    }
    .y_profile_thumb {
        width: 80px;
    }
    .y_profile_r {
        align-items: start;
    }
    .y_profile_r .y_logo {
        margin-bottom: 8px;
        width: 50px;
    }
    .y_profile_r .name {
        margin-bottom: 16px;
        font-size: var(--ft16);
    }
    .fill_btn {
        padding: 10px 16px;
    }
    .fill_btn .btn_icon {
        width: 13px;
        height: 13px;
    }
    .youtube_swiper {
        margin: 0;
        padding-top: 0;
    }

    /*-- column_sec --*/
    .column_sec .inner {
        gap: 30px;
    }
    .column_card .info_box {
        padding: 20px;
    }
    .column_card .title {
        margin-bottom: 8px;
        font-size: var(--ft18);
    }
    .column_swiper {
        margin: 0;
        padding-top: 0;
    }

    /*-- review_sec --*/
    .swiper-control {
        margin-top: 32px;
    }

    /*-- contact_sec --*/
    .contact_sec .sec_title {
        margin-bottom: 24px;
        font-size: var(--ft46);
    }
    .contact_sec p {
        font-size: var(--ft18);
    }
    .contact_btn_box .btn {
        height: auto;
        padding: 10px 0;
        gap: 10px;
    }
    .contact_btn_box .icon {
        width: 20px;
        height: 20px;
    }
    .contact_btn_box .btn_text {
        font-size: var(--ft16);
    }
}