.page {
    padding-bottom: 200px;
}

/*----------------- header -----------------*/
.h_top {
    width: calc(100% - 120px);
    height: 56px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}
.h_logo {
    width: 160px;
    transition: filter .4s ease;
    pointer-events: all;
}
.h_logo figure {
    width: 100%;
}

/*-- h_nav --*/
.h_nav {
    width: fit-content;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    transition: transform .6s ease;
    pointer-events: all;
}
.h_nav.scroll {
    pointer-events: none;
    transform: translateY(calc(-100% - 50px));
}
.h_nav.scroll * {
    pointer-events: none !important;
}

.h_main_box {
    background-color: var(--black-600);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 0px 10px 0px 32px;
    display: flex;
    align-items: center;
    transition: background .4s ease;
}
.h_main_box:hover {
    background-color: var(--gray-500);
}
.h_list {
    position: relative;
}
.h_main {
    height: 56px;
    font-weight: var(--medium);
    color: var(--white);
    position: relative;
    transition: color .4s ease, opacity .2s .65s ease;
}
.h_main a {
    padding: 0 20px;
    display: flex;
    align-items: center;
}
.h_main a::before {
    content: '';
    display: block;
    width: calc(100% - 40px);
    height: 2px;
    border-radius: 2px 2px 0 0;
    background-color: var(--white);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .4s ease, background .4s ease;
}
.h_main.active a::before,
.h_list:hover .h_main a::before {
    transform: scaleX(1);
}
.h_main.h_contact {
    height: fit-content;
    margin-left: 20px;
    border-radius: var(--radius-sm);
    background-color: var(--primary);
    color: var(--white);
}
.h_main.h_contact a {
    padding: 6px 16px;
}
.h_main.h_contact::before {
    display: none;
}
.h_sub_box {
    padding-top: 10px;  
    position: absolute;
    left: 0;
    transform: translateX(-25%) translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: all .4s ease;
}
.h_list:hover .h_sub_box {
    opacity: 1;
    pointer-events: all;
    transform: translateX(-25%);
}
.h_sub_list {
    padding: 12px;
    border-radius: var(--radius-md);
    background-color: var(--gray-500);
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 4px;
}
.h_sub {
    min-width: 160px;
    border-radius: var(--radius-sm);
    background-color: rgba(256, 256, 256, 0);
    transition: background .3s ease;
}
.h_sub:hover {
    background-color: var(--white-100);
}
.h_sub a {
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.h_sub .sub_box_icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background-color: var(--white-50);
    display: flex;
    justify-content: center;
    align-items: center;
}
.h_sub .sub_box_icon img {
    width: 18px;
    height: 18px;
}
.h_sub p {
    font-weight: var(--medium);
    color: var(--white);
    text-wrap: nowrap;
}

.h_sub_list.h_business_list {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px 36px;
}
.h_ad_list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
.h_ad_list::before {
    content: '';
    display: block;
    width: 1px;
    height: 100%;
    background-color: var(--white-200);
    position: absolute;
    left: -18px;
    top: 50%;
    transform: translateY(-50%);
}
.h_ad_list > ul {
    padding: 0 12px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.h_ad_list > ul li {
    width: 120px;
    height: 40px;
    border-radius: 6px;
    background-color: var(--white-50);
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--white);
    text-align: center;
}
.h_ad_list > ul li a {
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .6;
    border: 1px solid rgba(256, 256, 256, 0);
    border-radius: 6px;
    transition: all .3s ease;
}
.h_ad_list > ul li:hover a {
    opacity: 1;
    border-color: var(--white-200);
}

/*-- h_ham --*/
.h_ham {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: var(--black-600);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer;
    transition: background .4s ease;
    position: fixed;
    top: 40px;
    right: 60px;
    z-index: 11;
    pointer-events: all;
}
.h_ham span {
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--white);
    transition: background .4s ease, opacity .4s ease;
}
.h_ham span:nth-child(1) {
    position: absolute;
    top: calc(50% - 6px);
    transform: translateY(-50%);
    transition: transform .2s ease, top .2s .2s ease;
}
.h_ham span:nth-child(3) {
    position: absolute;
    top: calc(50% + 6px);
    transform: translateY(-50%);
    transition: transform .2s ease, top .2s .2s ease;
}

.h_ham.active span:nth-child(2) {
    opacity: 0;
}
.h_ham.active span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    transition: transform .2s .2s ease, top .2s ease;
}
.h_ham.active span:nth-child(3) {
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    transition: transform .2s .2s ease, top .2s ease;
}

/*-- ham_popup --*/
.ham_popup {
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 10;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}
.ham_popup.show {
    opacity: 1;
    pointer-events: all;
}
.ham_box {
    width: calc(100% - 40px);
    height: calc(100dvh - 40px);
    border-radius: var(--radius-lg);
    background-color: var(--gray-600);
    position: relative;
    z-index: 1;
}
.ham_nav {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ham_nav * {
    color: var(--white);
    text-align: center;
}
.ham_nav > ul {
    width: 100%;
    padding: 0 100px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 50px;
}
.ham_nav > ul > li {
    height: fit-content;
}
.ham_main {
    font-weight: var(--medium);
    margin-bottom: 24px;
    transition: opacity .3s ease;
}

.ham_sub_list li {
    font-size: var(--ft32);
    font-weight: var(--semi-bold);
    transition: opacity .3s ease;
}
.ham_sub_list li a {
    padding: 10px 0;
}
.ad_sub_list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.ad_sub_list li {
    font-size: var(--ft16);
    font-weight: var(--medium);
    border-radius: var(--radius-md);
    background-color: var(--white-50);
}
.ad_sub_list li a {
    padding: 20px 16px;
}
.ham_btm {
    width: calc(100% - 120px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    left: 60px;
    bottom: 60px;
}
.ham_info_box {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ham_info {
    display: flex;
    gap: 40px;
}
.ham_info li {
    display: flex;
    gap: 16px;
}
.ham_info * {
    width: fit-content;
    font-size: var(--ft14);
    color: var(--white);
}
.ham_info a:hover {
    text-decoration: underline;
}

.sns_list {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 24px;
}
.sns_icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.sns_icon img {
    width: 32px;
    height: 32px;
    opacity: .6;
    transition: opacity .3s ease;
}
.sns_icon .sns_name {
    padding: 4px 8px;
    border-radius: 20px;
    background-color: var(--white-100);
    font-size: var(--ft12);
    color: var(--white);
    position: absolute;
    bottom: -8px;
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
}
.sns_icon:hover img {
    opacity: 1;
}
.sns_icon:hover .sns_name {
    opacity: 1;
}


/*-- .header.white --*/
.header.white .h_logo {
    filter: invert(1);
    -webkit-filter: invert(1);
}
.header.white .h_main_box {
    background-color: var(--black-300);
}
.header.white .h_main_box:hover {
    background-color: var(--gray-600);
}
.header.white .h_sub_list {
    background-color: var(--gray-600);
}
.header.white .h_ham {
    background-color: var(--black-300);
}

.ham_nav.hover .ham_main,
.ham_nav.hover .ham_sub_list li {
    opacity: .5;
}
.ham_nav.hover > ul > li:hover .ham_main {
    opacity: 1;
}
.ham_nav.hover .ham_sub_list li:hover {
    opacity: 1;
}

/*-- quick --*/
.quick {
    position: fixed;
    bottom: 40px;
    right: 24px;
    z-index: 6;
}
.quick_btn {
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: transform .4s ease;
}
.quick_btn::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--primary);
    position: absolute;
    transition: transform .4s ease;
    z-index: -1;
}
.quick_btn:hover::before {
    transform: scale(1.1);
}
.quick_box {
    padding: 20px;
    border-radius: var(--radius-md);
    background-color: var(--gray-600);
    display: flex;
    gap: 24px;
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    pointer-events: none;
    transform-origin: bottom right;
    transform: translate(10px, 10px) scale(0.8);
    transition: opacity .4s ease, transform .4s ease;
}
.quick_close {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: var(--white-100);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
    cursor: pointer;
}
.quick_close img {
    width: 12px;
    height: 12px;
}
.map_box {
    width: 200px;
    height: 200px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.quick_box .map {
    width: 100%;
    height: 100%;
}
.quick_r {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.quick_logo {
    width: 100px;
    margin: 24px 0;
    filter: invert(1);
    -webkit-filter: invert(1);
}
.quick_info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quick_info li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.quick_info p,
.quick_info a {
    width: fit-content;
    font-size: var(--ft14);
    color: var(--white);
}
.quick_info p.bold {
    width: 16px;
    font-weight: var(--medium);
}
.quick_contact {
    width: 250px;
    height: 44px;
    border-radius: var(--radius-sm);
    background-color: var(--white-900);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
}
.quick_contact li {
    width: 100%;
    height: 100%;
    font-size: var(--ft14);
    font-weight: var(--medium);
}
.quick_contact a {
    display: flex;
    justify-content: center;
    align-items: center;
}
.quick_contact::before {
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background-color: var(--gray-400);
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform: translateY(-50%);
}

.quick.open .quick_box {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    pointer-events: all;
    transition: opacity .4s .1s ease, transform .4s .1s ease;
}
.quick.open .quick_btn {
    transform: scale(0);
}

/*-- m_btm --*/
.m_btm {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    background-color: var(--gray-700);
    /* display: flex; */
    justify-content: space-between;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 6;
    display: none;
}
.m_btm_l {
    display: flex;
    align-items: center;
    gap: 6px;
}
.m_btm_l div {
    border-radius: var(--radius-md);
    background-color: var(--white-100);
}
.m_btm_l div.primary {
    background-color: var(--primary);
}

.m_btm_l a {
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.m_btm_l img {
    width: 13px;
    height: 13px;
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}
.m_btm_l p {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--white);
}
.m_btm .sns {
    display: flex;
    align-items: center;
    gap: 10px;
}
.m_btm .sns .sns_icon {
    width: 28px;
    height: 28px;
}
.m_btm .sns .sns_icon img {
    width: 100%;
    height: 100%;
}

/*----------------- footer -----------------*/
.footer {
    padding: 80px 0;
    background-color: var(--gray-700);
}
.f_top {
    display: flex;
    justify-content: space-between;
}
.f_l {
    display: flex;
    align-items: start;
    gap: 160px;
}
.f_logo {
    width: 240px;
    filter: invert(1);
    -webkit-filter: invert(1);
}

/*-- info_list --*/
.info_list {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}
.info_list li {
    display: flex;
    align-items: center;
    gap: 16px;
}
.info_list p,
.info_list a {
    width: fit-content;
    font-size: var(--ft14);
    color: var(--white-800);
}
.info_list a:hover {
    text-decoration: underline;
}
.info_list p.bold {
    color: var(--white);
}
address .info_list {
    margin-bottom: 0;
    flex-direction: column;
    gap: 16px;
}
address p.bold {
    width: 40px;
}

.f_r_top {
    display: flex;
    gap: 12px;
}

/*-- family --*/
.family {
    position: relative;
}
.family_main {
    padding: 12px 30px;
    background-color: var(--gray-600);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
}
.family_main * {
    opacity: .8;
    transition: opacity .3s ease;
}
.family_main:hover * {
    opacity: 1;
}
.family_main p {
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--white);
}
.family_main .family_plus {
    width: 10px;
    height: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.family_main .family_plus span,
.family_main .family_plus span::before {
    content: '';
    display: block;
    width: 10px;
    height: 2px;
    border-radius: 1px;
    background-color: var(--white);
    transition: transform .3s ease;
}
.family_main .family_plus span::before {
    transform: rotate(90deg);
}
.family_list {
    width: 100%;
    max-height: calc(32px * 4);
    margin-top: 10px;
    padding: 4px;
    border-radius: var(--radius-md);
    background-color: var(--gray-600);
    overflow-y: auto;
    position: absolute;
    z-index: 1;
    display: none;
}
.family_list::-webkit-scrollbar {
    width: 4px;
}
.family_list li {
    width: 100%;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: rgba(256, 256, 256, 0);
    font-size: var(--ft14);
    color: var(--white-800);
    transition: background .3s ease;
}
.family_list li a {
    padding: 0 14px;
    display: flex;
    align-items: center;
}
.family_list li:hover {
    background-color: var(--white-100);
}
.family.open .family_plus span::before {
    transform: rotate(0deg);
}
.family.open .family_main * {
    opacity: 1;
}

.top_btn {
    width: 40px;
    background-color: var(--gray-600);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.top_btn img {
    width: 18px;
    height: 18px;
    opacity: .8;
    transition: opacity .3s ease;
}
.top_btn:hover img {
    opacity: 1;
}

.footer .sns_list {
    margin-top: 36px;
}

.f_btm {
    margin-top: 100px;
    padding-top: 30px;
    border-top: 1px solid var(--white-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.f_btm * {
    font-size: var(--ft14);
    color: var(--white-800);
}
.f_menu {
    display: flex;
    align-items: center;
    gap: 24px;
}
.f_menu .file_down a {
    display: flex;
    align-items: center;
    gap: 3px;
}
.f_menu .file_down img {
    width: 16px;
    height: 16px;
}
.f_menu li:hover {
    text-decoration: underline;
}

/*----------------- popup -----------------*/
.popup {
    width: 100%;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 15;
}
.popup_bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--black-800);
}
.popup_close {
    width: 50px;
    height: 50px;
    background-color: var(--white-900);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 40px;
    right: 60px;
    cursor: pointer;
    z-index: 3;
}
.popup_close img {
    width: 20px;
    height: 20px;
}

/*----------------- content_popup -----------------*/
.content_popup {
    display: none;
}
.content_popup.show {
    display: flex;
}
.content_popup .popup_inner {
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.video_swiper {
    width: 100%;
    max-width: 450px;
    height: 100%;
    aspect-ratio: 9 / 16;
}
.video_box {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
}
.video_loading {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--gray-500);
    display: flex;
    justify-content: center;
    align-items: center;
}
.video_loading span {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 6px solid var(--white);
    animation:
        l20-1 0.8s infinite linear alternate,
        l20-2 1.6s infinite linear;
  }
@keyframes l20-1{
    0%    {clip-path: polygon(50% 50%, 0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
    12.5% {clip-path: polygon(50% 50%, 0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
    25%   {clip-path: polygon(50% 50%, 0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
    50%   {clip-path: polygon(50% 50%, 0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    62.5% {clip-path: polygon(50% 50%, 100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
    75%   {clip-path: polygon(50% 50%, 100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
    100%  {clip-path: polygon(50% 50% ,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
    0%     {transform:scaleY(1)  rotate(0deg)}
    49.99% {transform:scaleY(1)  rotate(135deg)}
    50%    {transform:scaleY(-1) rotate(0deg)}
    100%   {transform:scaleY(-1) rotate(-135deg)}
}

.video_box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content_box {
    width: 550px;
    height: 100%;
    border-radius: var(--radius-lg);
    background-color: var(--white-50);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.content_inner {
    height: 100%;
    padding: 80px 50px;
    overflow-y: auto;
}
.content_box .item_profile a {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: all;
}
.content_box .item_profile img {
    width: 24px;
    height: 24px;
}
.content_box .item_profile p {
    width: 14px;
    font-weight: var(--medium);
    color: var(--white);
}
.content_title {
    margin-top: 12px;
    margin-bottom: 24px;
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
    color: var(--white);
}
.content_popup .item_tag {
    flex-wrap: wrap;
}
.content_popup .item_tag li {
    background-color: var(--white-50);
    color: var(--white-700);
}
.content_box .item_tag::after {
    display: none;
}
.content_text {
    margin-top: 32px;
}
.content_text * {
    color: var(--white);
}
.video_control {
    width: 100%;
    height: 70px;
    padding: 0 40px;
    background-color: var(--white-50);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.control_l {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.control_l > div {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--white-100);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.control_l img {
    width: 14px;
    height: 14px;
}
.control_progress {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}
.control_progress::after {
    content: '';
    display: block;
    width: 1px;
    height: 10px;
    background-color: var(--dark-line);
    margin-left: 10px;
}
.time {
    width: 50px;
    font-size: var(--ft14);
    font-weight: var(--medium);
    color: var(--white);
    text-align: center;
    flex-shrink: 0;
}
.progress_bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background-color: var(--white-200);
    position: relative;
}
.progress_bar span {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: 2px;
    background-color: var(--white);
}
.progress_bar button {
    display: block;
    width: 100%;
    height: 40px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    cursor: pointer;
}
.volume {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    cursor: pointer;
}
.volume img {
    width: 16px;
    height: 16px;
}

/*-- content_pagination --*/
.content_pagination {
    width: 100%;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
.content_pagination > div {
    cursor: pointer;
    pointer-events: all;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.pagination_prev {
    left: 50px;
    transition: left .4s ease;
}
.pagination_next {
    display: flex;
    flex-direction: column;
    align-items: end;
    right: 50px;
    transition: right .4s ease;
}
.pagination_prev:hover {
    left: 40px;
}
.pagination_next:hover {
    right: 40px;
}

.pagination_arrow {
    width: 24px;
    height: 24px;
    margin-bottom: 20px;
}
.pagination_content {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pagination_thumb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
}
.pagination_text {
    max-width: 160px;
    font-weight: var(--semi-bold);
    color: var(--white);
}

.content_more {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 20px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    gap: 4px;
    display: none;
}
.content_more p::after {
    display: block;
    content: '자세히 보기';
    font-size: var(--ft12);
    font-weight: var(--medium);
    color: var(--white);
}
.content_more img {
    width: 14px;
    height: 14px;
    transition: transfrom .3s ease;
}

/*----------------- design_popup -----------------*/
.design_popup {
    display: none;
}
.design_popup.show {
    display: flex;
}
.design_popup .popup_inner {
    width: 100%;
    padding: 0 60px;
    display: flex;
    justify-content: center;
    gap: 40px;
}
.design_swiper {
    width: 100%;
    max-width: 1200px;
    aspect-ratio: 1920 / 1080;
    overflow: hidden;
}
.design_swiper figure {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.design_box {
    width: 400px;
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    background-color: var(--white-50);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-shrink: 0;
}
.design_box .item_profile {
    margin-bottom: 24px;
}
.design_box .item_profile p {
    color: var(--white);
}
.design_box .info {
    margin-bottom: 40px;
}
.design_box .info li {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
}
.design_box .info p {
    font-size: var(--ft14);
    color: var(--white);
}
.design_box .info p.bold {
    width: 90px;
    font-weight: var(--medium);
    flex-shrink: 0;
}
.design_box .item_tag {
    flex-wrap: wrap;
}
.design_box .item_tag li {
    background-color: var(--white-50);
    color: var(--white-700);
}
.design_box .btn {
    max-width: 100%;
}
.design_btm {
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 24px;
    position: absolute;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 1;
}
.design_btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--white-200);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background .3s ease;
}
.design_btn img {
    width: 20px;
    height: 20px;
    transition: opacity .3s ease;
}
.design_btn.swiper-button-disabled {
    background-color: var(--white-100);
}
.design_btn.swiper-button-disabled img {
    opacity: .5;
}
.design_thumb_swiper {
    overflow: hidden;
}
.design_thumb_box {
    width: fit-content;
    height: 65px;
    aspect-ratio: 1920 / 1080;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
}
.design_thumb_box figure {
    width: 100%;
    height: 100%;
}
.design_thumb_box.active {
    border: 2px solid var(--white);
}
.design_num {
    display: none;
}
.design_num,
.design_num * {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
}

.design_more {
    width: 100%;
    height: 50px;
    border-radius: 0;
    background-color: var(--gray-700);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    cursor: pointer;
    display: none;
}
.design_more .item_profile {
    padding-right: 24px;
    position: relative;
}
.design_more .item_profile::after {
    content: '';
    display: block;
    width: 1px;
    height: 12px;
    background-color: var(--white-200);
    position: absolute;
    right: 0;
}
.design_more .item_profile img {
    width: 20px;
    height: 20px;
}
.design_more .item_profile p {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
}
.design_more > p {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.design_more > p::before {
    content: '자세히 보기';
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
}
.design_more > p::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    background: url(/images/bottom.svg) no-repeat center / contain;
    transition: transform .3s ease;
    transform: rotate(180deg);
}

/*----------------- btn -----------------*/
.btn {
    width: 100%;
    max-width: 240px;
    height: 60px;
    border-radius: var(--radius-md);
}
.btn a {
    padding: 0 12px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn p {
    font-weight: var(--semi-bold);
}
.btn.primary {
    background-color: var(--primary);
}
.btn.primary p {
    color: var(--white);
}
.btn.gray {
    background-color: var(--gray-600);
}
.btn.gray p {
    color: var(--white);
}
.btn.line {
    border: 1px solid var(--gray-700);
}
.btn_link {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background-color: rgba(256, 256, 256, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .3s ease;
}
.btn_link img {
    width: 18px;
    height: 18px;
    transition: transform .3s ease;
}

.btn:hover .btn_link {
    background-color: var(--white-100);
}
.btn:hover .btn_link img {
    transform: rotate(45deg);
}
.btn.download:hover .btn_link img {
    transform: rotate(0);
}


/*----------------- item_box -----------------*/
.content_item {
    cursor: pointer;
}
.item_img {
    width: 100%;
    margin-bottom: 20px;
    background-color: var(--gray-400);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.content .item_img {
    aspect-ratio: 9 / 16;
}
.portfolio .item_img {
    aspect-ratio: 4 / 3;
}
.insight .item_img {
    aspect-ratio: 4 / 5;
}
.news .item_img {
    aspect-ratio: 1 / 1;
}

.item_profile {
    display: flex;
    align-items: center;
    gap: 8px;
}
.item_profile img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}
.item_profile p {
    font-size: var(--ft14);
    font-weight: var(--medium);
}
.portfolio .item_profile img {
    width: 32px;
    height: 32px;
}
.portfolio .item_profile p {
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
}

.item_name {
    font-size: var(--ft20);
    font-weight: var(--semi-bold);
    margin-top: 12px;
    margin-bottom: 20px;
}
.item_tag {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}
.item_tag li {
    padding: 6px 10px;
    border-radius: var(--radius-md);
    background-color: var(--gray-100);
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--gray-500);
    flex-shrink: 0;
}

/*----------------- page_title_box -----------------*/
.page_title_box {
    padding-top: 200px;
    text-align: center;
}
.page_name {
    font-size: var(--ft16);
    font-weight: var(--semi-bold);
}
.page_title {
    margin: 28px 0;
    font-size: var(--ft50);
    font-weight: var(--semi-bold);
}
.page_title.eng {
    margin: 20px 0;
    font-size: var(--ft100);
    font-weight: var(--medium);
}
.page_title strong {
    font-weight: var(--semi-bold);
    color: var(--primary);
}
.page_text {
    color: var(--gray-600);
}
.page_link {
    width: fit-content;
    margin: 24px auto 60px;
}
.page_link a {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
.page_link p {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--gray-500);
}
.page_link .link_cir {
    width: 22px;
    height: 22px;    
    border-radius: 50%;
    background-color: var(--primary);
    display: flex;
    justify-content: center;
    align-items: center;
}
.page_link .link_cir img {
    width: 14px;
    height: 14px;
    transition: transform .3s ease;
}
.page_link:hover img {
    transform: rotate(315deg);
}

/*----------------- form_box -----------------*/
.form_box {
    margin-top: 50px;
    margin-bottom: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.filter_btn {
    display: none;
}
.filter_popup .popup_close,
.filter_popup .popup_title,
.filter_popup .popup_btm,
.filter_popup .popup_bg {
    display: none;
}
.label_list {
    display: flex;
    gap: 10px;
    padding-right: 24px;
    position: relative;
}
.label_list::after {
    content: '';
    width: 1px;
    height: 20px;
    background-color: var(--dark-line);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
.label_list .label_box {
    display: block;
    height: 40px;
    padding: 0 16px;
    background-color: var(--gray-100);
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.label_list .label_box p {
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-500);
}
.label_list input:checked ~ .label_box,
.label_box.active {
    background-color: var(--primary);
}
.label_list input:checked ~ .label_box p,
.label_box.active p {
    color: var(--white);
}

/*-- search_box --*/
.search_box {
    width: 300px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-color: var(--gray-100);
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.search_box input {
    width: 100%;
    height: 100%;
}
.search_box input::placeholder {
    color: var(--gray-400);
}
.search_btn {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}


/*----------------- item_wrap -----------------*/
.item_wrap {
    margin-top: 80px;
    position: relative;
    display: flex;
}
.item_menu {
    width: 200px;
    height: fit-content;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    position: sticky;
    top: 160px;
    left: 0;
}
.item_menu li {
    padding: 8px 14px;
    border-radius: 30px;
    font-size: var(--ft16);
    font-weight: var(--medium);
    color: var(--gray-500);
    cursor: pointer;
}
.item_menu li:hover {
    background-color: var(--gray-100);
}
.item_menu li.active {
    background-color: var(--primary);
    color: var(--white);
}

.item_m_menu {
    display: none;
    height: fit-content;
    position: sticky;
    top: 100px;
    right: 20px;
    z-index: 1;
}
.item_m_menu .select_btn {
    width: 120px;
    height: auto;
    padding: 5px 8px;
    border-radius: var(--radius-md);
    border: 1px solid var(--dark-line);
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.item_m_menu .select_btn .menu_text {
    font-size: var(--ft14);
    color: var(--gray-600);
}
.item_m_menu .select_btn i {
    font-size: 12px;
    color: var(--gray-400);
}
.item_m_menu .options {
    width: 120px;
    position: absolute;
    left: 0;
    top: 36px;
    background-color: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--dark-line);
    overflow: hidden;
    display: none;
}
.options .option {
    height: 30px;
    padding: 0 10px;
    display: flex;
    align-items: center;
}
.options .option_text {
    font-size: var(--ft14);
    color: var(--gray-600);
}
.options .option:hover {
    background-color: var(--gray-100);
}

/*----------------- flex_more -----------------*/
.flex_more {
    width: 0;
    height: 0;
    border-radius: 25px;
    background-color: var(--gray-600);
    position: fixed;
    bottom: 50px;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 5;
    pointer-events: none;
    opacity: 0;
}
.flex_more * {
    opacity: 0;
}
.flex_more > a {
    padding: 0 10px 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.flex_more p {
    font-size: var(--ft14);
    font-weight: var(--semi-bold);
    color: var(--white);
}
.flex_more .more_cir {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(256, 256, 256, 0);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background .4s ease;
}
.flex_more img {
    width: 16px;
    height: 16px;
    transition: transform .4s ease;
}

.flex_more:hover .more_cir {
    background-color: var(--white-100);
}
.flex_more:hover .more_cir img {
    transform: rotate(315deg);
}



/*----------------- null_box -----------------*/
.null_box {
    width: 100%;
    padding: 120px 20px;
    border-radius: var(--radius-lg);
    background-color: var(--gray-100);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.null_box .null_rebiz {
    width: 160px;
    height: 160px;
}
.null_box p {
    color: var(--gray-500);
}


/*----------------- loader -----------------*/
.loader_bg {
    width: 100%;
    height: 100dvh;
    background-color: var(--black-500);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
}
.loader_bg.active {
    opacity: 1;
    pointer-events: all;
}
.loader {
    width: 50px;
    padding: 8px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--primary);
    --_m: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: loader 1s infinite linear;
}

@keyframes loader {
    to {
        transform: rotate(1turn)
    }
}

@media all and (max-width: 1600px) {
    /*-- header --*/
    .ham_nav > ul {
        padding: 0 60px;
    }
    .ham_sub_list > li {
        font-size: var(--ft24);
    }
    .ad_sub_list li {
        font-size: var(--ft14);
    }
    .ad_sub_list li a {
        padding: 16px;
    }

    /*-- footer --*/
    .f_l {
        gap: 100px;
    }

    /*-- design_popup --*/
    .design_btm {
        bottom: 80px;
    }
    .design_more {
        display: flex;
    }
    .design_thumb_swiper {
        display: none;
    }
    .design_num {
        display: block;
    }
    .design_box {
        width: 100%;
        height: 100%;
        padding: 36px 24px 100px;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        display: flex;
        justify-content: end;
        gap: 32px;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s ease;
    }
    .design_box .btn {
        max-width: 240px;
    }

    .design_box.open {
        opacity: 1;
        pointer-events: all;
    }
    .design_more.open > p::before {
        content: '닫기';
    }
    .design_more.open > p::after {
        transform: rotate(0deg);
    }

    /*-- content_popup --*/
    .content_pagination {
        bottom: 0;
    }
    .content_pagination > div {
        top: auto;
        bottom: 20px;
        transform: translateY(0);
        display: flex;
        align-items: center;
        flex-direction: row;
        gap: 10px;
    }
    .pagination_arrow {
        margin-bottom: 0;
    }
    .pagination_next .pagination_arrow {
        order: 2;
    }
}

@media all and (max-width: 1400px) {
    /*-- item_box --*/
    .item_name {
        font-size: var(--ft18);
    }
}

@media all and (max-width: 1200px) {
    /*-- header --*/
    .h_top {
        width: calc(100% - 80px);
        height: 45px;
    }
    .h_logo {
        width: 140px;
    }
    .h_main_box {
        padding: 0 10px 0 20px;
    }
    .h_main {
        height: 45px;
        font-size: var(--ft14);
    }
    .h_main a {
        padding: 0 12px;
    }
    .h_main a::before {
        width: calc(100% - 24px);
    }
    .h_sub .sub_box_icon {
        width: 24px;
        height: 24px;
    }
    .h_sub .sub_box_icon img {
        width: 14px;
        height: 14px;
    }
    .h_sub p {
        font-size: var(--ft14);
    }
    .h_ham {
        width: 45px;
        height: 45px;
        right: 40px;
    }


    .ham_nav > ul {
        padding: 0 40px;
    }
    .ham_main {
        font-size: var(--ft14);
        margin-bottom: 16px;
    }
    .ad_sub_list {
        grid-template-columns: repeat(2, 1fr);
    }
    .ad_sub_list li a {
        padding: 8px 16px;
    }
    .ham_btm {
        width: calc(100% - 80px);
        left: 40px;
        bottom: 32px;
    }
    .ham_info {
        gap: 20px;
    }

    /*-- page --*/
    .page_title_box {
        padding-top: 140px;
    }

    /*-- content_popup --*/
    .popup_close {
        width: 45px;
        height: 45px;
        right: 40px;
    }
    .popup_close img {
        width: 16px;
        height: 16px;
    }
    .content_inner {
        padding: 60px 24px;
    }
    .content_title {
        margin-top: 8px;
        margin-bottom: 16px;
        font-size: var(--ft18);
    }

    /*-- item_menu --*/
    .item_menu {
        width: 160px;
        padding-right: 40px;
    }
    .item_menu li {
        font-size: var(--ft14);
    }
}


@media all and (max-width: 1024px) {
    /*-- header --*/
    .h_nav {
        display: none;
    }
    .quick {
        display: none;
    }
    .m_btm {
        display: flex;
    }

    /*-- footer --*/
    .footer {
        padding-bottom: 130px;
    }
    .f_l {
        flex-direction: column;
        gap: 40px;
    }
    .f_logo {
        width: 200px;
    }

    /*-- page --*/
    .page_title_box {
        padding-top: 120px;
    }
    .page_title.eng {
        font-size: var(--ft70);
    }

    .flex_more {
        bottom: 70px;
    }
    .flex_more p {
        font-size: var(--ft12);
    }
    .flex_more .more_cir {
        width: 24px;
        height: 24px;
    }
    .flex_more img {
        width: 13px;
        height: 13px;
    }

    /*-- content_popup --*/
    .content_popup .popup_inner {
        gap: 24px;
    }
    .video_swiper {
        max-width: 360px;
    }
    .content_box {
        width: 400px;
    }
    .content_popup .item_tag li,
    .content_text * {
        font-size: var(--ft14);
    }
    .video_control {
        height: 55px;
        padding: 0 24px;
    }
    .control_l {
        width: 28px;
        height: 28px;
    }
    .control_l img {
        width: 12px;
        height: 12px;
    }
    .content_inner .item_profile {
        display: flex;
    }

    /*-- item_menu --*/
    .item_wrap {
        flex-direction: column;
        gap: 24px;
    }
    .item_menu {
        display: none;
    }
    .item_m_menu {
        display: flex;
    }

    /*-- null_box --*/
    .null_box {
        padding: 80px 20px;
    }
    .null_box .null_rebiz {
        width: 120px;
        height: 120px;
    }
}

@media all and (min-width: 901px) {
    .ham_sub_list {
        display: block !important;
    }
}

@media all and (max-width: 900px) {
    /*-- header --*/
    .ham_popup {
        justify-content: start;
        align-items: start;
        overflow-y: scroll;
        overflow-x: hidden;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    .ham_popup::-webkit-scrollbar {
        display: none;
    }
    .ham_box {
        width: 100%;
        height: auto;
        min-height: 100%;
        border-radius: 0;
        padding: 80px 20px 40px;
    }
    .ham_nav * {
        text-align: start;
    }
    .ham_nav > ul {
        padding: 0;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .ham_nav > ul > li {
        width: 100%;
        border-radius: var(--radius-md);
        background-color: var(--white-50);
    }
    .ham_nav > ul > li.open .ham_main::after {
        transform: rotate(180deg);
    }
    .ham_main {
        padding: 16px;
        margin: 0;
        font-size: var(--ft16);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ham_main::after {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        background: url('/images/bottom.svg') no-repeat center/contain;
        transition: transform .4s ease;
    }
    .ham_main.show::after {
        transform: rotate(180deg);
    }
    .ham_sub_list {
        padding: 10px 16px 16px;
        border-top: 1px solid var(--white-200);
        display: none;
    }
    .ham_sub_list > li {
        font-size: var(--ft18);
    }
    .ham_sub_list li a {
        padding: 6px 0;
    }
    .ad_sub_list li a {
        padding: 8px 0;
        text-align: center;
    }
    .ham_btm {
        width: 100%;
        margin-top: 40px;
        position: static;
        flex-direction: column;
        align-items: start;
        gap: 24px;
    }
    .ham_info_box {
        gap: 12px;
    }
    .ham_info {
        flex-direction: column;
        gap: 12px;
    }
    .ham_info .bold {
        width: 80px;
        flex-shrink: 0;
    }

    .ham_nav > ul > li:last-child .ham_main {
        display: none;
    }
    .ham_nav > ul > li:last-child .ham_sub_list {
        padding: 0;
        border-radius: var(--radius-md);
        border-top: none;
        display: block;
        background-color: var(--primary);
    }
    .ham_nav > ul > li:last-child .ham_sub_list a {
        font-size: var(--ft16);
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .ham_nav > ul > li:last-child .ham_sub_list a::after {
        content: '';
        display: block;
        width: 14px;
        height: 14px;
        background: url('/images/right_w.svg') no-repeat center/contain;
    }

    .ham_sub_list > li.open > a {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .ham_sub_list > li.open > a::before {
        content: '';
        display: block;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: var(--primary);
    }
}

@media all and (min-width: 769px) {
    /*-- content_popup --*/
    .content_hide {
        display: block !important;
    }
}

@media all and (max-width: 768px) {
    .page {
        padding-bottom: 120px;
    }

    /*-- header --*/
    .h_top {
        width: calc(100% - 40px);
        top: 24px;
    }
    .h_logo {
        width: 110px;
    }
    .h_ham {
        width: 40px;
        height: 40px;
        top: 24px;
        right: 20px;
    }
    .h_ham span {
        width: 20px;
    }

    /*-- footer --*/
    .footer {
        padding: 50px 0 100px;
    }
    .f_top {
        flex-direction: column;
    }
    .f_logo {
        width: 120px;
    }
    .info_list {
        gap: 24px;
        margin-bottom: 20px;
    }
    .info_list li {
        gap: 10px;
    }
    .f_r {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .footer .sns_list {
        justify-content: start;
        gap: 12px;
    }
    .sns_icon img {
        width: 24px;
        height: 24px;
    }
    .sns_icon .sns_name {
        display: none
    }
    .f_r_top {
        order: 2;
    }
    .f_btm {
        margin-top: 40px;
        padding-top: 24px;
        flex-direction: column;
        align-items: start;
        gap: 12px;
    }
    .f_menu {
        gap: 12px;
    }

    /*-- page --*/
    .page_title_box {
        padding-top: 100px;
    }
    .page_title.eng {
       font-size: var(--ft45);
        font-weight: var(--semi-bold);
        margin: 12px 0;
    }
    .page_link {
        margin-bottom: 36px;
    }

    /*-- item --*/
    .portfolio .item_profile img {
        width: 20px;
        height: 20px;
    }
    .portfolio .item_profile p {
        font-size: var(--ft18);
    }
    .item_profile {
        gap: 6px;
    }
    .item_profile img {
        width: 16px;
        height: 16px;
    }
    .item_tag li {
        font-size: var(--ft12);
    }

    /*-- form_box --*/
    .form_box {
        margin-top: 32px;
        margin-bottom: 50px;
    }

    /*-- btn --*/
    .btn {
        height: 50px;
    }

    /*-- content_popup --*/
    .content_popup {
        align-items: start;
    }
    .content_popup .popup_bg {
        background-color: #000;
    }
    .popup_close {
        width: 40px;
        height: 40px;
        top: 24px;
        right: 16px;
    }
    .content_popup .popup_inner {
        padding-top: p;
        width: 100%;
        height: calc(100dvh - 50px);
    }
    .video_swiper {
        width: 100%;
        max-width: 100%;
    }
    .video_box {
        border-radius: 0;
    }
    .content_pagination {
        display: none;
    }
    .content_box {
        width: 100%;
        height: 100dvh;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        pointer-events: none;
        background-color: var(--black-200);
        border-radius: 0;
        transition: background .3s ease;
    }
    .content_inner {
        width: 100%;
        padding: 80px 20px;
        display: flex;
        flex-direction: column;
        justify-content: end;
    }
    .content_hide {
        margin-top: 24px;
        display: none;
    }
    .content_popup .item_tag li {
        font-size: var(--ft12);
    }
    .content_text {
        margin-top: 20px;
    }
    .video_control {
        padding: 0 20px;
        background: var(--gray-700);
        gap: 8px;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 4;
        pointer-events: all;
    }
    .control_progress {
        gap: 6px;
    }
    .time {
        width: 32px;
        font-size: var(--ft12);
    }
    .volume {
        width: 32px;
        height: 32px;
    }
    .volume img {
        width: 14px;
        height: 14px;
    }
    .content_more {
        display: flex;
        cursor: pointer;
        pointer-events: all;
    }

    .content_box.show {
        background-color: var(--black-700);
    }
    .content_box.show .content_more p::after {
        content: '간략히 보기';
    }
    .content_box.show .content_more img {
        transform: rotate(180deg);
    }
    .content_box.show {
        pointer-events: all;
    }


    /*-- item_box --*/
    .item_img {
        margin-bottom: 12px;
    }
    .item_name {
        font-size: var(--ft16);
        margin-bottom: 12px;
    }

    /*-- design_popup --*/
    .design_popup .popup_inner {
        padding: 0 20px;
    }
    .design_more {
        gap: 12px;
    }
    .design_more .item_profile {
        padding-right: 12px;
    }
    .design_box .info {
        margin-bottom: 24px;
    }
    .design_box .info li {
        padding-bottom: 12px;
        margin-bottom: 12px;
        border-bottom: 1px solid var(--white-200);
    }
    .design_box .info p.bold {
        width: 80px;
    }


    /*-- item_menu --*/
    .item_m_menu {
        top: 80px;
    }

    /*-- null_box --*/
    .null_box {
        padding: 60px 20px;
        gap: 14px;
    }
    .null_box .null_rebiz {
        width: 90px;
        height: 90px;
    }
}