/*---common css---*/

html {
    scroll-behavior: smooth;
}

/*font weight*/
.font_l{font-weight: 100;}
.font_r{font-weight: 400;}
.font_m{font-weight: 500;}
.font_b{font-weight: bold;}
.font_bl{font-weight: 900;}

/*font size*/
.fs_14{font-size: 0.88rem;}
.fs_15{font-size: 0.95rem;}
.fs_17{font-size: 1.07rem;}
.fs_18{font-size: 1.13rem;}
.fs_20{font-size: 1.25rem;}
.fs_22{font-size: 1.38rem;}
.fs_24{font-size: 1.5rem;}
.fs_26{font-size: 1.63rem;}
.fs_28{font-size: 1.75rem;}
.fs_30{font-size: 1.9rem;}
.fs_40{font-size: 2.5rem;}
.fs_48{font-size: 3rem;}
.fs_50{font-size: 3.15rem;}
.fs_55{font-size: 3.44rem;}
.fs_60{font-size: 3.75rem;}
.fs_72{font-size: 4.5rem;}
.fs_80{font-size: 5rem;}


/*text color*/
.color_01{color: #03df70 !important;}
.bgc_01 { background: #9951F6; }
.bgc_02 { background: #222; }

/*container*/
.hd_con{width: 92%;max-width: 1520px;margin: 0 auto;}
.k_container{width: 92%;max-width: 1520px;margin: 0 auto;}
.k_container_100 { width: 95%!important; }
.k_container_sub { margin-top: 150px!important; }
.k_section{padding-top: 100px;}
.main_inner{padding-top: 100px;}

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

    .main_inner{padding-top: 75px;padding-bottom: 40px;}
}


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

    /*메인 - 모바일에서만 사용*/
/*    .mo_free, .mo_free .fp-tableCell{height: auto !important;}*/
}

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

    /*모바일 팝업*/
    .hd_pops_con { width: 100%!important; height: auto!important; background: #fff; }
    .hd_pops_con img { width: 100%!important; height: auto!important; }
    .hd_pops_con br{ display: none; }
}

/*motion*/
.common_trigger .common_motion{transform: translateY(25px);opacity: 0;transition: transform .8s ease, opacity .4s;}
.common_trigger.on .common_motion{transform: translateY(0);opacity: 1;}

.k_delay_01{transition-delay: .2s !important;}
.k_delay_02{transition-delay: .4s !important;}
.k_delay_03{transition-delay: .6s !important;}
.k_delay_04{transition-delay: .8s !important;}
.k_delay_05{transition-delay: 1s !important;}
.k_delay_06{transition-delay: 1.2s !important;}
.k_delay_07{transition-delay: 1.4s !important;}
.k_delay_08{transition-delay: 1.6s !important;}
.k_delay_09{transition-delay: 1.8s !important;}
.k_delay_10{transition-delay: 2s !important;}
.k_delay_11{transition-delay: 2.2s !important;}

/*responsive*/
.pc_img{display: block;}
.mo_img{display: none;}

@media screen and (max-width: 720px){
    .pc_img{display: none;}
    .mo_img{display: block;}
    
}

/*more view btn*/
.more_btn{display: flex;align-items: center;}
.more_btn img{padding-left: 14px;padding-top: 5px;transition: padding-left .45s ease;}

.more_btn:hover img{padding-left: 19px;}

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

    .more_btn i{font-size: 11px;}
    .more_btn img{padding-left: 7px;padding-top: 1px;}

    .more_btn:hover img{padding-left: 12px;}
}

#container>section { width: 98%; max-width: 1720px; margin: 2% auto 0;}

#container>section.main_vis_sec { margin-top: 0!important; }
#container>section.head_sec { margin-top: 0!important; position: sticky; top: 0; z-index: 9999; background: #fff; display: flex; justify-content: space-between; align-items: center; }
#container>section.head_sec>a { width: fit-content; height: 100%; }
#container>section.head_sec>a>img { padding: 20px 0; }

#container>section.head_sec .inq_btn { width: fit-contens; border-radius: 50px; background: #222; color: #fff; }
#container>section.head_sec .inq_btn>a { display: flex; gap: 10px; padding: 10px 20px; height: 100%; width: 100%; font-size: 1rem; font-weight: 700; }

@media screen and (max-width: 1080px){
    #container>section { width: 94%; }
}
@media screen and (max-width: 720px){
    #container>section.head_sec>a.logo { width: 50%; }
    #container>section.head_sec>a.logo>img { width: 100%; max-width: 250px; }
    #container>section.head_sec .inq_btn>a { padding: 10px; width: 50px; height: 50px; font-size: 1.5rem; justify-content: center; align-items: center; }
    #container>section.head_sec .inq_btn>a>.inq_btn_txt { display: none; }
    
    #container>section { width: 92%; }
    section.port_sec, section.inquiry_sec { padding: 0!important; margin-bottom: 50px!important; }
    section.main_vis_sec { height: 30vh!important; min-height: 30vh!important; margin-top: 2vh!important; margin-bottom: 50px!important; overflow: hidden; }
    section.main_vis_sec .main_swiper,
    section.main_vis_sec .swiper-slide { min-height: 30vh!important; height: 30vh!important; background-size: cover!important; }
}
@media screen and (max-width: 420px){
}
/*main vis*/

section.main_vis_sec { width: 100%; min-height: 600px; background: #fff; border-radius: 20px; display: flex; justify-content: flex-start; align-items: flex-start; }
section.main_vis_sec .main_vis { width: 100%; height: 100%; }

section.main_vis_sec .main_swiper { width: 100%; height: 100%; min-height: 600px; }

section.main_vis_sec .swiper-slide {
    width: 100%;
    border-radius: 20px;
    min-height: 600px;
    padding: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #222;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

section.main_vis_sec .b_txt_box { color: #222; }

/* fade 전환 처리 */
.main_swiper.swiper-fade .swiper-slide { pointer-events: none; }
.main_swiper.swiper-fade .swiper-slide-active { pointer-events: auto; }

@media screen and (max-width: 420px){
    section.main_vis_sec .swiper-slide { padding: 25px; }
}

/*main vis*/


/*포트폴리오*/
section.port_sec {
    display: block;
    padding: 100px 0;
}

section.port_sec .port_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

section.port_sec .count_txt, section.port_sec .write_btn {
    display: block;
    padding: 5px 20px;
    border-radius: 30px;
    color: #fff;
}

section.port_sec .port_grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    gap: 5px;
}

section.port_sec .port_wrap {
    width: 100%;
}

section.port_sec .port_cnt {
    width: 100%;
}

section.port_sec .port_del_btn {
    position: absolute;
    top: 10px;
    right: 60px;
    background: rgba(255, 50, 50, 0.85);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

section.port_sec .port_img:hover .port_del_btn {
    opacity: 1;
}

section.port_sec #port_lightbox {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#port_lb_prev, #port_lb_next {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s ease;
    z-index: 10000;
}

#port_lb_prev:hover, #port_lb_next:hover {
    background: #7b4fff;
    border-color: #7b4fff;
}

section.port_sec #port_lightbox_img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

section.port_sec .port_img {
    position: relative;
    overflow: hidden;
    border: 5px solid transparent;
    transition: border-color 0.3s ease;
    cursor: pointer;
    aspect-ratio: 4 / 5;
}

section.port_sec .port_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

section.port_sec .port_overlay {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
}
section.port_sec .port_overlay h4 { margin-bottom: 30px; }

section.port_sec .port_img:hover {
    border-color: #7b4fff;
}

section.port_sec .port_img:hover .port_overlay {
    opacity: 1;
}

section.port_sec .port_img:hover img {
    transform: scale(1.03);
}

section.port_sec .port_edit_btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(123, 79, 255, 0.85);
    color: #fff;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease;
}

section.port_sec .port_img:hover .port_edit_btn {
    opacity: 1;
}

#port_more_btn {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f9f9f9;
    border: 1px solid #d9d9d9;
    font-size: 2rem;
    cursor: pointer;
    margin: 50px auto 0;
    transition: all 0.3s ease;
    color: #999;
}

#port_more_btn:hover {
    background: #333;
    color: #fff;
}


section.port_sec .port_order_wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
}

section.port_sec .port_order_input {
    width: 55px;
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-size: 13px;
    text-align: center;
}

section.port_sec .port_order_btn {
    padding: 3px 8px;
    background: #7b4fff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    margin-left: 4px;
}

section.port_sec .port_order_input::-webkit-inner-spin-button,
section.port_sec .port_order_input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
section.port_sec .port_order_input {
    -moz-appearance: textfield;
}


@media screen and (max-width: 720px) {
    section.port_sec .port_overlay {
        display: none;
    }
    
    section.port_sec .port_img_title {
        display: block;
        padding: 10px 0;
        text-align: center;
        font-weight: bold;
        color: #222;
    }
}

@media screen and (min-width: 721px) {
    section.port_sec .port_img_title {
        display: none;
    }
}


@media screen and (max-width: 1080px){
    section.port_sec .port_grid { grid-template-columns: repeat(2, 1fr); }
}


@media screen and (min-width: 720px){
    section.inquiry_sec { margin-bottom: 150px!important; }
}
section.inquiry_sec #inquiry_iframe {
    width: 100%;
    border: none;
    display: block;
}


#ft {
    background: #1a1a1a;
    padding: 30px 40px;
}

#ft .ft_inner {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

#ft .ft_logo {
    color: #fff;
    margin-bottom: 8px;
}

#ft .ft_copy {
    color: #888;
}

#ft #top_btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #222;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    position: fixed !important;
    bottom: 50px !important;
    right: 50px !important;
    border: 0;
    display: flex; align-items: center; justify-content: center;
}

#ft #top_btn:hover {
    background: #222;
}


@media screen and (max-width: 720px){
    #ft #top_btn {
        right: 2%!important;
    }
}