@import url(reset.css);

/*
 * layout ***************************************************
 */
html {scroll-behavior: smooth;}
#skip { position: relative; z-index: 3000;}
#skip a { position: absolute; top: -30px; left: 0; width: 138px; border: 1px solid #4ec53d; background: #333; text-align: center; opacity: 0;}
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}
.hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px 1px 1px 1px); /* IE6, IE7 */  clip:rect(1px, 1px, 1px, 1px);}
.text-aling-left{ text-align: left !important;}
.text-aling-center{ text-align: center !important;}
.text-aling-right{ text-align: right !important;}

.contents_area{}

.flex_left{display: flex; align-items: flex-start; text-align: left;}
.flex_center{display: flex; align-items: center; justify-content: center; text-align: center;}

select{ border: 1px solid #eee; border-radius: 5px; padding: 4px 16px; height: 40px; text-align: left; background: url(/_images/common/arrow-drop-down-line.png) no-repeat center right 4px #fff;} 
select:active,
select:focus{background-image: url(/_images/common/arrow-drop-up-line.png);}
select.family-site{ width: 200px;}

/*
 * Header
 */

.header { 
    position: absolute; width: 100%; min-width: 960px; display: flex; background: rgba(255,255,255,0.1); box-shadow: 4px 16px 10px rgba(0,0,0,0.08); transition: all 0.1s; z-index: 99999; transition: 0.5s;
    &:focus,
    &:hover{ 
        background: rgba(255,255,255,1); color: #191919;
        .gnb li a{color: #191919;}
    }
    .menu_wrap{ width: 100%; display: flex; align-items: center; justify-content: space-between;}    
}
.gnb{ 
    display: inline-flex;
    &:hover{
        span{
            color: #191919;
        }
    } 
    > li{
        position: relative;
        > a{ 
            display: block; font-size: 1.7rem; font-weight: 500; color: #fff; padding-inline: 3rem; 
            span{
                display: block;
                align-content: center;
                padding-block: 3rem;
                background: linear-gradient(#00ACB7,#00ACB7) no-repeat center bottom / 0% 0.5rem;
                transition: 0.5s;
            }
        } 
        &:has(a:focus) span{
            background-size: 100% 0.5rem;
        }       
        &:hover{
            span{
                background-size: 100% 0.5rem;
                color: #00ACB7;
            }
       }        
    } 
    .depth{
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.5s;
        position: absolute;
        inset: 7.6rem 0 auto;
        text-align: center;
        padding: 2rem 0;
        ul{                
            overflow: hidden;
        }
        a{
            font-size: 1.5rem;
            line-height: 3rem;
            color: #767676;
            &:focus,
            &:hover{
                color: #191919;
                font-weight: 600;
            }
        }
    }
    &:has(a:focus) .depth{
        grid-template-rows: 1fr;
    }
    &:hover{
        .depth{
            grid-template-rows: 1fr;
        }
    }
}
.header{
    isolation: isolate;
    &::after{
        content: '';
        position: absolute;
        inset: auto 0 0;
        height: 0;
        background: linear-gradient(to bottom, #eee 1px, #fff 1px, #fff) ;
        z-index: -1;
        transition: 0.4s;
    }
    &:has(.gnb > li:hover)::after,
    &:has(.gnb a:focus)::after{
        inset: auto 0 calc(var(--height, 20rem) * -1);
        height: var(--height, 20rem);
    }
}

.gnb li a:hover{ color: #00ACB7;}

.header h1.logo a{ display: inline-block; vertical-align: middle; width: 199px; height: 25px; background-image: url("/_images/common/ci.png"); background-repeat: no-repeat; background-position: center center; background-size: contain; transition: all 0.1s; margin-left: 40px; }
.header:hover h1.logo a{ background-image: url("/_images/common/ci_g.png"); background-repeat: no-repeat; background-position: center center; }

.menu_wrap .user{ width: 199px; display: flex; justify-content: flex-end; gap: 24px;}
.menu_wrap .user a{ font-size: 1.5rem; font-weight: 300; color: #fff;}
.menu_wrap .user a:hover{ font-weight: 500;}

/* 모바일메뉴 */
/* 바디에 스크롤 막는 방법 */
.not_scroll{
    position: fixed; 
    overflow: hidden;
    width: 100%;
    height: 100%
}
.not_scroll .cont {
    position: relative;
    top: 0;
}
.m_menu{ display: none;}
.m_gnb_wrap{ 
    overflow: hidden; overflow-y: auto; position: fixed; height: calc(100% - 72px); top: 72px; left: 0; width: 100%; display: flex; align-items: center; background: rgba(255,255,255,1); border-top: 1px solid #ededed; padding: 0; z-index: 999;

    .m_gnb{ 
        padding: 70px auto 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; 

        li{ width: 100%;
            span{ 
                display: flex; padding: 2.4rem; font-size: 1.8rem; font-weight: 600; color: #191919; border-bottom: 1px solid #ededed;
                &:hover{ color: #00ACB7; }
            }
            /* &:has(a:focus) .depth{ display: block;}  */
            .depth{
                width: 100%; background-color: #ededed; display: none;
                ul{ padding: 1rem 0;
                    li{
                        a{
                            display: block; color: #555; font-size: 1.7rem; line-height: 2; padding: 0.8rem 2rem; width: 100%;
                            &:hover{ color: #191919;}
                            &::before{
                                content: 'ㆍ'; color: #767676; font-size: 1.6rem; font-weight: 900;
                            }
                        }
                    }
                }
            }
        }
    }
}

.btn_m_menu .line{ width: 3.2rem; height: 3px; border-radius: 3px; background-color: #00ACB7; display: block; margin: 6px auto; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.btn_m_menu:hover{ cursor: pointer;}
.btn_m_menu.is-active .line:nth-child(2){opacity: 0;}
.btn_m_menu.is-active .line:nth-child(1){-webkit-transform: translateY(.9rem) rotate(45deg); -ms-transform: translateY(.9rem) rotate(45deg); -o-transform: translateY(.9rem) rotate(45deg); transform: translateY(.9rem) rotate(45deg);}
.btn_m_menu.is-active .line:nth-child(3){-webkit-transform: translateY(-.9rem) rotate(-45deg); -ms-transform: translateY(-.9rem) rotate(-45deg); -o-transform: translateY(-.9rem) rotate(-45deg); transform: translateY(-.9rem) rotate(-45deg);}

/*
 * Contents ***************************************************
 */
.Layout-module{ position: relative; top: 0; width: 100%; height: 100vh; font-size: 1.5rem;}
.Layout-module:nth-child(1){ background: linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), linear-gradient(180deg, #00ACB7 12.61%, #132448 100%);}
.Layout-module:nth-child(2){ background: #fff;}
.Layout-module:nth-child(3){ background: #FAFBFD;}
.Layout-module:nth-child(4){ background: #F4F9FB;}
/* .Layout-module:nth-child(5){ background: #F4F9FB;} */
.Layout-module:nth-child(6){ background: #fff;}

.chevron.bottom:before { top: 0; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg);}
.chevron::before { border-style: solid; border-radius: 3px; border-width: 0.25em 0.25em 0 0; content: ''; display: inline-block; height: 20px; position: relative; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); vertical-align: top; width: 20px;}
.hero__scroll{ position: absolute; background: none; border: 0px; padding: 0px; outline: none; cursor: pointer; bottom: 4rem; left: 50%; transform: translateX(-50%);}
.hero__scroll .chevron { margin-top: 20px; display: block; -webkit-animation: down 2s infinite; animation: down 2s infinite; color: #fff; }

/* Button Style */
.btn_WhiteType{ padding: 10px 24px; border: 1px solid rgba(255,255,255,0.7); border-radius: 24px; color: #fff; font-size: 1.4rem; line-height: 1.5; font-weight: 400;}
.btn_WhiteType:hover{ background: rgba(255,255,255,0.1);}

.btn_WhiteTypeSquare{ padding: 10px 24px; border-radius: 5px; color: #464646; background: #fff; font-size: 1.4rem; line-height: 1.5; font-weight: 600;}
.btn_WhiteTypeSquare:hover{ color: #00ACB7;}

.btn_WhiteTypeRound{ padding: 10px 24px; border-radius: 50px; color: #00ACB7; border: 1px solid #00ACB7; background: #fff; font-size: 1.5rem; line-height: 1.5; font-weight: 600;width: fit-content; }
.btn_WhiteTypeRoundFill{ padding: 10px 24px; border-radius: 50px; color: #fff; background: #00ACB7; font-size: 1.5rem; line-height: 1.5; font-weight: 600; width: fit-content;}

/* key-visual */
.main_Txt{ color: #fff;}
.main_Txt h2{ font-size: 5.6rem; font-weight: 600; line-height: 1.3; margin-bottom: 40px;}
.main_Txt p{ font-size: 2rem; line-height: 1.5; font-weight: 300; margin-bottom: 80px;}

/* intro */
.contents-area{ display: flex; flex-direction: column; align-items: center; margin: 0 auto;}

.intro{ gap: 6.4em; height: 100vh;}
.intro_list{ display: flex; flex-direction: row; align-items: flex-start; gap: 2.4rem; width: 100%;}
.intro_list li{ flex:1; border-radius: 1rem;}
.intro_item{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem; background-position: center; background-repeat: no-repeat; border-radius: 1rem; min-height: 260px; padding: 0 2.4rem; background-color: rgba(0, 0, 0, .6); background-blend-mode: multiply;}
.intro_item strong{ display: block; font-size: 2.4rem; line-height: 1.5; color: #fff; font-weight: 500; word-wrap: keep-all;}
.intro_item span{ font-size: 1.5rem; line-height: 1.3; color: #fff; word-wrap: keep-all;}
.intro_list li:nth-child(1){ background: url(/_images/main/img_ex01.png); background-size: cover;}
.intro_list li:nth-child(2){ background: url(/_images/main/img_ex02.png); background-size: cover;}
.intro_list li:nth-child(3){ background: url(/_images/main/img_ex03.png); background-size: cover;}

.intro_box{ 
    display: flex; flex-direction: column; align-items: start; gap: .8rem; padding: 3.2rem 6.4rem; width: 100%; border-radius: 10px; background: url(/_images/main/img01.png) no-repeat  top -9px right 72px #00ACB7; color: #fff; background-size: 22%; width: 90%;
    p{ font-size: 2.4rem; line-height: 1.2; font-weight: 600;  word-wrap:keep-all;}
    span{ font-size: 1.5rem; line-height: 1.2; 
        &.btnarea{ display: flex; flex-direction: row; align-items: center; gap: 0.8rem; margin-top: 2.4rem;
            .btnarea a{ opacity: .9;
                &:hover{ opacity: 1;}
            }
        }
    }
}

.titleType01{ display: flex; flex-direction: column; gap: 1.6rem;
    h2{ font-size: 4rem; color: #191919; font-weight: 600; line-height: 1.3;}
    p{ font-size: 2rem; line-height: 1.5; color: #767676;}
}
.titleType02{ display: flex; flex-direction: column; gap: 1.6rem; width: 100%; margin: 2.4rem 0;
    h2{ font-size: 2.8rem; color: #555; font-weight: 600; line-height: 1.3;
        em{ color: #00ACB7;}}
    p{ font-size: 1.6rem; line-height: 1.5; color: #767676;}
}

.m-consulting{ background: #fff; padding: 72px 0; min-height: 100vh;}

/* 탭 전체 스타일 */
.m-tabs { margin: 0 auto;
    .contents-area{ display: initial; width: 100%;}
}
  
/* 탭 스타일 */
.tab_item { position: relative; font-size: 2rem; text-align: center; color: #767676; font-weight: 700; display: inline-block; transition: all 0.2s ease; padding: 1rem 0.4rem; margin: 0 1.6rem;
    ::after{ content: ''; width: 0%; height: 3px; background-color: #767676; position: absolute; bottom: 0; left: 0; transition: all 0.2s ease; opacity: 0;}
    :hover { opacity: 0.75;}
    :hover::after{ width: 100%; opacity: 1;}
}

/* 라디오 버튼 UI삭제*/
input[name="tab_item"] { display: none;}

/* 탭 컨텐츠 스타일 */
.tab_content { display: none; width: 100%; min-height: 50rem; padding: 64px 0 0; clear: both; overflow: hidden; transition: all 3s ease;}

/* 선택 된 탭 콘텐츠를 표시 */
#all:checked ~ #all_content,
#programming:checked ~ #programming_content { display: flex; justify-content: center; flex-direction: row; align-items: center; gap: 4rem;}

/* 선택된 탭 스타일 */
.m-tabs input:checked + .tab_item { color: #00ACB7; font-weight: 700;}
.m-tabs input:checked + .tab_item::after{ content: ''; width: 100%; height: 3px; background-color: #00ACB7; position: absolute; bottom: 0; left: 0; transition: all 0.2s ease; opacity: 1;}
.tab_content .titleType01{ text-align: left;}
.tab_content div:nth-child(1){ order: 1; }
.tab_content div:nth-child(2){ order: 2; width: 40%; display: block; max-width: 700px; }
.tab_content span.consulting365 img{ width: 100%;}


/* 이용문의 */
.contact { flex-direction: column; width: 100%;
    &.Layout-module{ height: inherit; padding: 12rem 0;}
    .btn_wrap{ display: flex; gap: 8px; margin: 24px 0;}
    .container { width: 100%; margin: 50px auto -80px; padding: 40px 0; background-color: #F0F5F7; 
        srtong { display: block; text-align: center; margin-bottom: 20px;}
        form{ width: 600px; margin: 0 auto; }
    }
    &.main {
        .container{ background-color: #fff; padding: 1.6rem;}
        & .mapWrap { width: 100%;
            & .text { 
                & .group { p.img{ background-color: #F0F5F7;}}
            }
        }
        
    }
    .form-group { margin-bottom: 15px;}
    label { line-height: 2; font-size: 1.5rem; text-align: left; width: 100%; display: flex;}
    input[type="text"],
    input[type="email"],
    textarea { width: 100%; padding: 16px; font-size: 16px; border: 1px solid #e1e1e1; background: #fff; border-radius: 4px; box-sizing: border-box;}
    textarea { resize: vertical; background: #fff; /* 세로로만 resize 가능하도록 설정 */}
    button[type="submit"] { background-color: #33393C; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;}
    button[type="submit"]:hover { background-color: #00ACB7;}
    & .mapWrap {
        /* border-top: 2px dashed #ededed;  */
        width: 600px; margin: 4rem auto 0; padding: 4rem 0;
        & .text { display: flex; flex-direction: row; justify-content: space-between;
            width: 100%;
            & .group { display: flex; flex-direction: row;
                div { display: flex; flex: 1; flex-direction: column; gap: 1.2rem; text-align: left;
                    h3 { font-size: 1.7rem; color: #191919; font-weight: 600; }
                    p{ font-size: 1.5rem; color: #666; line-height: 1.5; text-decoration: none; }
                }                
                p.img{ display: flex; align-items: center; justify-content: center; width: 5.6rem; aspect-ratio: 1; border-radius: 50%; background-color: #fff;}
            }
        }
    }
}
.companyIntro{ 
    display: flex; gap: 40px; margin: 40px 0; align-items: center; justify-content: space-between; background-color: #D7F0F3; border-radius: 1rem; padding: 1.6rem 4rem; width: 100%;
    .inquiry{ 
        display: flex; flex-direction: column; gap: 16px; align-items: flex-start; font-size: 1.6rem; color: #191919;
        em{
            position: relative; font-weight: 600; font-size: 2rem; padding-right: 20px;            
        }
        em::after{
            position: absolute; top: 6px; right: 0; content: ''; width: 1px; height: 13px; background: #aaa; margin: 0 6px;
        }
        a{
            position: relative; padding-left: 32px; line-height: 2.4rem; color: #191919; margin-right: 1.6rem;
        }
        a::before{ 
            position: absolute; top: 0; left: 0; content: ''; width: 24px; height: 24px; 
        }
        a.tel::before{ 
            background: url("/_images/main/phone.png"); 
        }
        a.email::before{ 
            background: url("/_images/main/mail-send.png");
        }
    }
    .symbol{
        display: flex; flex-direction: row; gap: 16px; align-items: flex-start;
        p{
            display: flex; flex-direction: column; gap: 2rem; align-items: center; font-size: 1.6rem; padding: 1.6rem 2.4rem; background-color: #fff; border-radius: 0.8rem;
            img{
                width: 6.4rem; height: 6.4rem;
            }
        }
    }
}
.contact .companyIntro div{}



/* 새소식 */
.m-news{
    .newsList{
        width: 1000px; overflow: inherit;
    }
} 

.slideBanner{
    flex-direction: column; padding: 4rem 3.2rem; background: #F4F9FB; gap: 1.6rem; 
    .swiper{ width:100%; height:80px;
        .swiper-wrapper{ transition-timing-function: linear !important;
            .swiper-slide{
                display: flex; align-items: center; justify-content: center;background: #fff; border-radius: 10px; padding: 16px 24px; width: 100%; max-width: 210px; height: 100%;
                img{ height: auto; max-height: 100%; max-width: 100%; }
            }    
        }
        .swiper-button-next, .swiper-button-prev {
            color: #00ACB7;
        }   
    }
}


/* 서브페이지 회사소개 company */
.contents-wrap{ width: 1000px;}
.sub-visual{
    display: flex;
    width: 100%;
    height: 400px;
    flex-direction: column;
    gap: 16px;
    padding-top: 56px;
    background-repeat: no-repeat;
    background-position: center;
    color: #fff;
    
    h2{ font-size: 4.8rem; font-weight: 600;}
    p{ font-size: 1.8rem; font-weight: 300;}
 
    &.company{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), 
        linear-gradient(328.78deg, rgba(0, 172, 183, 0) 12.05%, rgba(0, 172, 183, 0.9) 80.89%), 
        linear-gradient(273.13deg, rgba(0, 172, 183, 0) 1.16%, rgba(0, 172, 183, 0.7) 94.71%), 
        linear-gradient(0deg, rgba(0, 172, 183, 0.7), rgba(0, 172, 183, 0.7)), 
        url("/_images/sub/company.png") center;}
    &.service{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(328.8deg, rgba(21, 105, 215, 0) 12.04%, rgba(0, 155, 183, 0.7) 88.63%), linear-gradient(273.13deg, rgba(0, 43, 183, 0) 3.97%, rgba(0, 113, 183, 0.7) 94.71%), linear-gradient(0deg, rgba(1, 89, 204, 0.7), rgba(1, 89, 204, 0.7)), url("/_images/sub/service.png") center;}
    &.news{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(54.89deg, rgba(73, 136, 254, 0) 24.05%, rgba(132, 81, 219, 0.7) 82.93%), linear-gradient(276.21deg, rgba(87, 101, 255, 0.35) 2.94%, rgba(42, 0, 228, 0.7) 91.44%), linear-gradient(0deg, rgba(239, 65, 255, 0.7), rgba(239, 65, 255, 0.7)), url("/_images/sub/news.png") center;}
    &.contact{
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(54.89deg, rgba(73, 136, 254, 0) 24.05%, rgba(4, 182, 232, 0.7) 82.93%), linear-gradient(273.13deg, rgba(87, 154, 255, 0.35) 3.97%, rgba(68, 255, 255, 0.7) 94.71%), linear-gradient(0deg, rgba(125, 186, 255, 0.7), rgba(125, 186, 255, 0.7)), url("/_images/sub/contact.png") center;}
}

.sub-navi-wrap{
    position: sticky;
    top: 0;
    background-color: #fff;
    border-bottom: 1px solid #DFDFDF;
    z-index: 99;

    .sub-navigation{
        gap: 5.6rem;
        a{ color: #555555; font-size: 1.8rem; font-weight: 400; line-height: 5.6rem;}
        a:hover{ color: #222; font-weight: 500;}
        a.active{ color: #191919; font-weight: 500; border-bottom: 3px solid #00ACB7;}
    }
}
.contents-area.sub{
    padding: 64px 0 80px;
}
/* CEO인사말 */
.ceo{
    .text{
        display: flex;
        flex-direction: row;
        gap: 56px;
        line-height: 1.5;
        margin: 32px 0 56px;
        word-break: keep-all;

        h3{ font-size: 2.2rem; color: #191919; font-weight: 600;}
        p{ font-size: 1.7rem; color: #666;
            span{ display: block; font-size: 1.7rem; font-weight: 600; color: #444; margin-top: 32px;}
        }
    }
    .company_img{
        img{ width: 100%;}
    }
}
/* 경영이념 */
.sub.ideology{ height: auto;}
.ideology{ 
    gap: 6.4em; height: 100vh;
    .value{ flex-direction: column; gap: 5.6rem; padding: 4rem;}
    .list{ 
        flex-direction: row; display: flex; gap: 4rem; 
        li{ 
            display: flex; flex-direction: column; gap: 3.2rem; align-items: center; flex: 1; word-break: keep-all;
            img{
                width: fit-content;
            }
            .item{ 
                display: flex; flex-direction: column; gap: 1.6rem; color: #191919;
                strong{ display: block; font-size: 2.4rem; line-height: 1.5; font-weight: 500; word-wrap: keep-all;}
                span{ font-size: 1.5rem; line-height: 1.5; word-wrap: keep-all;}
            }
        }
    }
    .subValue{
        width: 100%; background-color: #F0F5F7; padding: 6.4rem 2.4rem;
        .list{
            flex-direction: column; justify-content: center;
            .item{
                flex-direction: row; gap: 4rem; align-items: flex-start;
                span.img{
                    display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; background: #fff;
                    img{ width: fit-content;}
                }
                div{
                    display: flex; flex-direction: column; justify-content: flex-start; gap: 2rem; align-items: flex-start; flex: 1;
                    strong{ display: block; font-size: 2.4rem; line-height: 1.5; font-weight: 500; color: #222; word-wrap: keep-all;}
                    span{ font-size: 1.5rem; line-height: 1.5; color: #444; word-wrap: keep-all; text-align: left;}
                }
            }
        }
    }
}
/* 연혁 */
.history{
    gap: 6.4rem; flex-direction: column; margin-bottom:6.4rem;
    .history_list{
        flex-direction: column; gap: 4rem; border-left: 2px solid #D9D9D9; padding: 0.8rem 2.4rem; 
        li{
            display: flex; flex-direction: column; justify-content: flex-start; font-size: 1.6rem; line-height: 1.7; color: #444; word-wrap: keep-all; text-align: left; position: relative; width: -webkit-fill-available;
            strong{ font-size: 2rem; font-weight: 600}
            &::before{
                content:''; width: 10px; height: 10px; background: #fff; border: 3px solid #00ACB7; border-radius: 50%; position: absolute; left: -33px; top: 8px;
            }
        }
    }
}
.award {
    width: 100%; background-color: #F0F5F7; padding: 6.4rem 2.4rem; flex-direction: column; gap: 4rem;
    .award_list{
        flex-direction: column; justify-content: center; align-items: flex-start; gap: 1.6rem;
        .item{
            display:flex; flex-direction: row; gap: 4rem; padding: 24px; background: #fff; width: 100%; border-radius: 1rem; 
            span.img{
                display: flex; align-items: center; justify-content: center; width: 160px; height: 200px; border-radius: 5px; background: #fff; border: 1px solid #DFDFDF; padding: 8px;
                img{ height: 100%;}
            }
            div{
                display: flex; flex-direction: column; justify-content: center; gap: 2rem; align-items: flex-start; flex: 1;
                strong{ font-size: 2rem; line-height: 1.5; font-weight: 500; color: #222; word-wrap: keep-all;}
                span{ font-size: 1.5rem; line-height: 1.5; color: #444; word-wrap: keep-all; text-align: left;
                    strong{ font-size: 1.5rem; font-weight: 500;}
                }
            }
        }
    }
}
.enterprise {
    width: 100%; padding: 6.4rem 2.4rem; flex-direction: column; gap: 4rem;
    .enterprise_list{
        flex-direction: row; justify-content: center; align-items: center; gap: 3.2rem;
        .item{
            display: flex; flex-direction: column; align-items: center; gap: 1.6rem; background: #fff;
            span.img{
                display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 5px; background: #fff; border: 1px solid #DFDFDF;
                img{ width: 70%;}
            }
            div{
                display: flex; flex-direction: column; justify-content: center; gap: 0.8rem; align-items: center; flex: 1;
                strong{ font-size: 2rem; line-height: 1.5; font-weight: 500; color: #222; word-wrap: keep-all;}
                span{ font-size: 1.5rem; line-height: 1.5; color: #444; word-wrap: keep-all; text-align: left;
                    strong{ font-size: 1.5rem; font-weight: 500;}
                }
            }
        }
    }
}
/* 오시는 길 */
.map{
    .maparea{
        width: 90%;
        iframe{ border-radius: 1rem;}
    }
    .mapWrap{
        display: flex; flex-direction: row; justify-content: space-between; margin: 4rem 0;
        .text{
            display: flex; flex-direction: column; justify-content: center; word-break: keep-all; gap: 2.4rem;
            .group{
                display: flex; flex-direction: row; align-items: center;
                p.img{ 
                    display: flex; align-items: center; justify-content: center;
                    width: 5.6rem; aspect-ratio: 1; border-radius: 50%; background-color: #F0F5F7;
                }
                div{
                    display: flex; flex: 1; flex-direction: column; gap: 1.2rem;
    
                    h3{ font-size: 1.7rem; color: #191919; font-weight: 600;}
                    p{ font-size: 1.5rem; color: #666; line-height: 1.5; text-decoration: none;
                        a{ color: #666; text-decoration: none;}
                    }
                }
            }
        }
        .imgbox{ width: 40%; position: relative;
            div{
                margin-left: 0; width: 80%; margin-left: 0;
                img{ width: 100%; border-radius: 20px;}
                &:nth-child(2){ position: absolute; z-index: -1; margin-left: 20%; margin-top: -40px;}
            }
        }
    }    
}
/* 조직도 */
.group{
    div{
        padding: 0 2.4rem;
        img{ width: 100%;}
    }
}
/* 공공기관 보호수준 평가 컨설팅 */
.contents-nav{
    position: sticky; top: 60px; z-index: 99; gap: 8px; padding: 16px 0; background: #f8f8fa; border-bottom: 1px solid #ededed; width: 100%; box-shadow: 0px 4px 4px rgba(0, 0, 0, .05);

    a{ font-size: 1.5rem; color: #555; padding: 12px 24px; background: #fff; border: 1px solid #e0ecf3; border-radius: 40px; 
        &:hover{ color: #0159CC; border: 1px solid #0159CC; font-weight: 600;}
        /* &.active{ color: #fff; background: #0159CC; border: 0 none;} */
    }
}
.consulting, .education{ flex-direction: column;}
.linkPoint{ width: 0; height: 0; margin-left: -5000px; position: absolute; margin-top: -16px;}
section{
    gap: 4rem; padding: 6.4rem 0; flex-direction: column; width: 100%;
    &:first-child{ padding: 14rem 0 6.4rem;}

    h3{ font-size: 1.6rem; color: #0159CC; font-weight: 600; padding: 12px 24px; background: rgba(1,89,204,.1); border-radius: 40px; display: inline-flex;}
    .group{
        gap: 1.6rem; flex-direction: column; align-items: flex-start; width: 100%;

        h4{ font-size: 1.8rem; color: #333; font-weight: 600; line-height: 1.5;}
        article{ font-size: 1.6rem; color: #333; text-align: left; line-height: 1.5; word-break: keep-all; flex-direction: column; gap: 8px; align-items: flex-start;
            dl{ display: flex; flex-direction: row;
                dt{ color: #191919; margin-right: 8px; font-weight: 500; display: inline-block;
                &::before{ content: 'ㆍ'; }
                }
                dd{ flex: 1;}
            }
        }
        .box{
            gap: 1.6rem; flex-direction: column; align-items: flex-start; padding: 24px; background: #fff; border: 1px solid #DFDFDF; width: 100%; border-radius: 1rem;
            h5{ font-size: 1.6rem; color: #444; font-weight: 600;
                span{ font-size: 1.3rem; color: #767676; border: 1px solid #CECECE; margin-left: 8px; padding: 4px 8px; border-radius: 2rem; font-weight: 500; }
            }
            dl{ width: 100%; gap: 1.6rem;
                dd{ font-size: 1.6rem; color: #333;  padding: 2.4rem; background: #F4F9FD; flex: 1; border-radius: 1rem; line-height: 1.4; word-break: keep-all;}
            }
        }
        .boxRound{            
            padding: 24px 80px 24px 40px; background: #FFFFFF; border: 1px solid #F1F1F1; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08); border-radius: 30px 300px 300px 30px; width: 100%; justify-content: flex-start; gap: 2.4rem;
            &:nth-child(odd){ border-radius: 300px 30px 30px 300px;flex-direction: row-reverse; padding: 24px 40px 24px 80px;}
            span.img{
                img{ width: 100%; border-radius: 10px;}
            }
            div{ gap: 2.4rem; flex-direction: column; align-items: flex-start;
                h5{ font-size: 2rem; line-height: 1.5; color: #222; font-weight: 600; text-align: left; word-break: keep-all;}
                ul{ width: 100%; gap: 1rem; flex-direction: column; align-items: flex-start;
                    li{ font-size: 1.7rem; color: #333; flex: 1; line-height: 1.5; word-break: keep-all; position: relative; text-align: left; padding-left: 32px;
                    &::before{ position: absolute; content: ''; width: 24px; height: 24px; background: url("/_images/sub/ico_chat-check.png") center no-repeat; top: 0; left: 0;} 
                    }
                }
            }
        }
    }        
}
.eduList{
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: stretch; justify-items: stretch; width: 100%; padding: 0 !important; 
        .eduItem{  
            flex-direction: column; border-radius: 1rem; padding: 1.6rem; background: #F4F9FD; gap: 1.6rem; flex: 1;
        > p{
            background: #fff; width: 100%; height: 86px; border-radius: .8rem; overflow: hidden;
            img{width: 100%; height: 100%;}
        }
        > strong{ font-size: 1.6rem; line-height: 1.3; color: #333; font-weight: 600; word-break: keep-all;}
        > span.date{ font-size: 1.4rem; color: #767676; flex: 1; line-height: 1.5; word-break: keep-all; display: none;}
    }

}
.newsList{
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 16px; align-items: stretch; justify-items: stretch; width: 100%; padding: 0 !important; margin: 4rem 0;
    > .newsItem{
        border-radius: 1rem; padding: 2rem 2rem 8rem 2rem; background: #fff; gap: 1.6rem; border: 1px solid #DFDFDF; flex: 1; position: relative;
        &:hover{box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16);
            > div{
                > p{
                    img{ scale: 1.2;}
                }
            }
        }
        > div{ flex-direction: column; gap: 1.6rem;    
            > p{
                background: #fff; border: 1px solid #ededed; width: 100%; height: 140px; border-radius: .8rem; position: relative; overflow: hidden;
                img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: 2s;}
            }
            > div{
                display: flex; flex-direction: column; gap: 1.6rem; align-items: center;
                > span.date{ font-size: 1.4rem; color: #767676; display: block; line-height: 1.5; }
                > strong{ font-size: 1.8rem; line-height: 1.4; color: #333; font-weight: 600; word-break: keep-all; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
                > ul{
                    display: flex; flex-direction: row; gap: .8rem;
                    > li{ font-size: 1.3rem; color: #767676; display: block; line-height: 1.5; color: #60646A; background: #F0F5F7; padding: 2px 8px; border-radius: 20px; max-width: 48%; min-width: fit-content; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                    }
                }
            }
        }
        .btn_Newlink{
            background: url("/_images/sub/ico_link.png") no-repeat center #00ACB7;
            border-radius: 50%; width: 40px; height: 40px; position: absolute; right: 24px; bottom: 24px;
        }
    }
}
.procedure{
    > .list{ gap: 1.6rem; flex-direction: column; align-items: flex-start; position: relative; padding-left: 0 0.6rem;
        &::before{
            position: absolute; width: 5px; height: 0; top: 0; left: 0; content: ''; animation: line 10s 2s infinite; border-radius: 3px; z-index: 9; transition-property: background-color; animation-fill-mode: forwards; transition-timing-function: ease-out;
        }
        &::after{
            position: absolute; width: 4rem; height: 4rem; top: -2.4rem; left: -1.8rem; content: ''; background: url("/_images/sub/shield-check.png") no-repeat center; animation: line-icon 10s 2s infinite; z-index: 9; border-radius: 3px;animation-fill-mode: forwards; transition-timing-function: ease-out;
            /* -webkit-animation-fill-mode:both;  */
        }
        > li{
            display: flex; gap: 2.4rem; align-items: center; border: 1px solid #ededed; border-radius: 10px; padding: 1.6rem 2.4rem;
            > .img{ display: flex; align-items: center; justify-content: center;  background: #F2F9FF; width: 96px; height: 96px; border-radius: 1rem;}
            div{ align-items: flex-start; flex-direction: column; flex: 1; gap: 1.6rem;
                strong{ font-size: 1.8rem; color: #444; font-weight: 600;}
                p{ font-size: 1.6rem; color: #333; line-height: 1.4; word-break: keep-all; text-align: left; }
            }
        }
    }
}
.card-wrap{
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: stretch; justify-items: stretch; width: 100%; 

    .card-item{ display: flex; flex-direction: column; border: 1px solid #ededed; background: #fff; border-radius: 1rem; position: relative; padding-bottom: 6rem;
        &.np{ padding-bottom: 4.8rem;}
        p{ display: flex; align-items: center; justify-content: center; height: 88px; padding: 16px 10px; overflow: hidden;
            img{ object-fit: contain; max-width: 94%; max-height: 70%;}
        }
        .edu{ width: 94%; margin: 0 auto;
            img{ width: 100%; border-radius: 10px;}
        }
        strong{ font-size: 1.8rem; color: #333; font-weight: 600; word-break: keep-all; letter-spacing: -0.5px; line-height: 1.4; padding: 0 24px; width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
        span.date{ display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px; font-size: 1.5rem; color: #333; background: #F2F6FC; padding: 12px; position: absolute; bottom: 0; width: 100%; border-radius: 0 0 9px 9px;
            em{ color: #222; font-weight: 600;}
        }
        div.txt{
            display: flex; gap: 8px; flex-direction: column; margin-top: 24px;
            span{font-size: 1.5rem; color: #767676; font-weight: 600;}
            p{font-size: 1.6rem; color: #497DFF; font-weight: 600; height: inherit; padding: 0; line-height: 2; }
        }
    }
}
.recruit{ 
    flex-direction: column; gap: 10rem;
    .benefit{ width: 100%;     
        .benefitList{
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; justify-items: stretch; margin-top: 4rem;
            .benefitItem{
                display: flex; flex-direction: column; align-items: flex-start; background: #F4F4F4; border-radius: 10px;
                strong{ font-size: 2rem; color: #222; font-weight: 600; word-break: keep-all; letter-spacing: -0.5px; line-height: 1.4; margin: 16px; width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; }
                ul{ display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 16px; 
                    li{font-size: 1.4rem; color: #666; padding: 4px 8px; border-radius: 20px; background: #fff;}
                }
                p.img{ position: relative; width: 100%; aspect-ratio: 2/0.8; overflow: hidden; border-radius: 0 0 10px 10px;
                    img{width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
                }
            }
        }
    }
    .office{ width: 100%;
        .officeList{
            display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; justify-items: stretch; margin-top: 4rem;
            p{ position: relative; width: 100%; height: 220px; overflow: hidden; border-radius: 10px; 
                &:nth-child(4) { grid-column: 1 / 3; grid-row: 2 / 2;}
                img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 10px;  }
            }
        }
    }
    .talent{
        img.talent{ margin: 4rem 0;}
        .talentList{ display: flex; flex-direction: column; gap: 3.2rem; align-items: flex-start; 
            .talentItem{ display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
                strong{ display: flex; flex-direction: row; gap: .8rem; font-size: 2rem; color: #222; font-weight: 600; align-items: center; justify-content: center; 
                    span{ display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #666; padding: 8px 12px; border-radius: 16px; background: rgba(0, 172, 183, 0.16); }
                }
                p{ font-size: 1.7rem; color: #555; text-align: left; line-height: 1.5;}
            }
        }
    }
    .recruiting{ width: 100%; margin-bottom: 6rem;
        .recruitingList{ margin-top: 4rem;
            .recruitingItem{ width: 100%;
                display: flex; flex-direction: row; gap: 4rem; align-items: center; justify-content: center; background: #fff; border:1px solid #00ACB7; border-radius: 1rem; padding: 24px;
                &:hover{ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
                    .btn_recruit{ background: #0159CC; padding: 16px 56px; }
                }  
                .badge{ display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: #666; padding: 8px 12px; border-radius: 20px; background: #fff; border:1px solid #ddd}
                div{display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem;
                    flex: 1;
                    strong{ font-size: 2rem; color: #222; font-weight: 600; word-break: keep-all; letter-spacing: -0.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; text-align: left;}
                    span{ font-size: 1.4rem; color: #767676; }
                }
                .btn_recruit{
                    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.8rem; font-weight: 600; background: #00ACB7; border-radius: 1rem; padding: 16px 40px; transition: 0.5s;
                }
            }
        }
    }
}

.go_top{ position: fixed; right: 40px; bottom: 120px; z-index: 999;}
.SettingView-module__top{ display: flex; width: 56px; aspect-ratio: 1; background: url("/_images/common/arrow-up-line.png") no-repeat center rgba(0,0,0,0.2); border-radius: 50%;}


.footer{
    border-top: 1px solid #DFDFDF;
    div{
        display: flex; justify-content: space-between; align-items: center;         
    }
    .contentinfo{ 
        padding: 8px 40px;    
        ul{ 
            display: flex; gap: 16px; align-items: center; 
            li{
                a{ font-size: 1.4rem; font-weight: 400; color: #767676;
                    &.privacy{
                        color: #191919;
                    }
                }
            }
        }
    }
    .bt{
        padding: 12px 40px; 
        background-color: #00ACB7;
        img{ width: 70%;}
        .copyright{
            display: flex; align-items: flex-end; flex-direction: column; color: #fff; font-size: 1.3rem; line-height: 1.5;}
    }
}


@media screen and (max-width: 1260px) {
    .contents-area{ height: auto; padding: 8rem 0rem;}
    .intro_box{ background-size: 30%;}

    .tab_content .titleType01{ text-align: center; display: flex; align-items: center;}

    #all:checked ~ #all_content,
    #programming:checked ~ #programming_content{ flex-direction: column !important;}
    .tab_content div:nth-child(2){ width: 90%; }
}
@media screen and (max-width: 1030px) {
    .header,
    .header .menu_wrap,
    .container { min-width:auto; width: 100%;}
    .header { position: fixed; background: #fff; color: #191919; border-bottom: 1px solid #eee; padding: 8px 24px; display: contents;}
    .header h1.logo a{background-image: url("/_images/common/ci_g.png"); width: 150px; margin: 0;}
    .menu_wrap{ padding: 20px 24px;}
    .menu_wrap ul.gnb,
    .menu_wrap .user{ display: none !important;}
    .m_menu{ display: inline-block;}
        
    .contents-wrap{ width: calc(100% - 4.4rem);}  
    .m-news{
        .newsList{
            width: 90%; margin: 4rem auto; padding: 1.6rem;
            grid-template-columns: repeat(2, 1fr);
            > a:last-child{ display: none;}
        }
    } 
    .eduList{
        grid-template-columns: repeat(3, 1fr);
    }
    .newsList{
        grid-template-columns: repeat(2, 1fr);
    }
    .card-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
    .recruit{ 
        .benefit{
            .benefitList{grid-template-columns: repeat(2, 1fr);
            }
        }
        .office {
            .officeList {grid-template-columns: repeat(2, 1fr);
                p { height: 130px;}
            }
        }
    }
    .map{
        .mapWrap{ flex-direction: column;
            & .imgbox { flex-direction: row; display: flex; gap: 24px; width: 100%; padding: 4rem 0 0;
                & div { width: 100%;
                    &:nth-child(2) {
                        position: relative;
                        z-index: -1;
                        margin-left: 0;
                        margin-top: 0;
                    }
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {  
    .main_Txt{
        h2{ font-size: 3.6rem; margin-bottom: 40px;}
        p{ font-size: 1.6rem; margin-bottom: 80px; line-height: 1.5;}
    } 

    .intro_list{ flex-direction: column;}
    .intro_list li{ display: inline-block; width: 100%; margin: 0; min-height: inherit;} /* .intro_list li{ width: 47%; margin: 1.2%; } 6개*/
    .intro_box{ padding: 2.4rem 1.6rem; align-items: center; background: #00ACB7; }
    .m-news{ padding: 6rem 0; height: auto;
        .newsList{
            grid-template-columns: repeat(1, 1fr);
        }
    } 
    .slideBanner{ display: none;}
    .titleType01 {
        padding: 0 4rem;
        h2{ font-size: 3rem;}
        p{ font-size: 1.5rem; }
    }
    .sub-visual {
        height: 240px; padding-top: 0px; gap: 1rem;
        h2 {
            font-size: 3.6rem;
        }
        p{
            font-size: 1.5em;
        }
    }
    .sub-navi-wrap {
        .sub-navigation {
            gap: 2rem;
            a {
                font-size: 1.5rem;
                line-height: 5.6rem
            }
        }
    }
    .ceo {
        .text {
            flex-direction: column;
            gap: 32px;
            h3 { font-size: 2rem; letter-spacing: -0.5px;}
        }
    }
    .ideology {
        .list {
            flex-direction: column; gap: 4rem;
            li {
                gap: 1.6rem;            
                img { width: 60px;}
                .item { gap: 8px}
            }
        }
        & .subValue {
            & .list {
                & .item { gap: 2rem;
                    span.img {
                        width: 64px;
                        height: 64px;
                        img {width: 50%;}
                    }
                    div {
                        gap:0.8rem;
                        strong { font-size: 2rem;}
                    }
                }
            }
        }
    }
    .history {
        .history_list {margin-left:0;}
    }
    .award {
        & .award_list {
            width: 100%;
            .item {
                flex-direction: column;
                align-items: center;
                gap: 2rem;
                div{ padding: 0; align-items: center;
                    span { text-align: center;}
                    strong {font-size: 1.8rem;}
                }
            }
        }
    }
    .enterprise {
        .enterprise_list {
            width: 100%; gap: 1.6rem;
            & .item {
                span.img { width: 90px; height:90px}
            }
        }
    }
    .map{
        .mapWrap{ 
            & .imgbox { flex-direction: column; gap: 24px; width: 100%; padding: 4rem 0 0;
                & div { width: 100%;}
            }
        }
    }
    .contents-nav { display: none;}

    .consulting, .education {
        & section {
            &:first-child {padding: 4rem 0 4rem;}
            & .group {
                & .box {
                    dl {flex-direction: column; gap: 0.8rem;
                        dd{ width: 100%; padding: 16px;}
                    }
                }
            }
        }
    }
    section {
        & .group {
            .boxRound {
                padding: 24px;
                border-radius: 10px;
                justify-content: center;
                flex-direction: column;
                gap: 4rem;
                &:nth-child(odd) {                    
                    padding: 24px;
                    border-radius: 10px;
                    justify-content: center;
                    flex-direction: column;
                }
            }
        }
    }
    .eduList{
        grid-template-columns: repeat(2, 1fr);
    }
    .newsList{
        max-height: inherit;
        grid-template-columns: repeat(1, 1fr);
    }
    .recruit{ 
        .benefit{
            .benefitList{grid-template-columns: repeat(1, 1fr); 
                .benefitItem{              
                    ul {margin: 0 12px 16px;}     
                    p.img { aspect-ratio: 2 / 0.7;}               
                }                                    
            }
        }
        & .recruiting {
            & .recruitingList {
                & .recruitingItem {
                    flex-direction: column; align-items: flex-start; gap: 1.2rem;
                    .btn_recruit{ margin: 24px auto 0;}
                }
            }
        }
    }
    .procedure {
        & > .list {
            > li { flex-direction: column; padding: 2.4rem 3.2rem;
                & div { p { word-break: normal;}}
            }
        }
    }
    .card-wrap { grid-template-columns: repeat(2, 1fr); gap: 16px; 
        & .card-item {
            strong { font-size: 1.5rem; padding: 0 16px;}
        }
    }

    .contact{
        .container { width: 100%;        
            form{ width: 90%;}
        }
        &.main{
            .container { form{ width: 100%;}}
        }
        .mapWrap { width: 90%;
            .text {
                flex-direction: column; gap: 2.4rem;}
            }
    }

    .footer{
        .contentinfo{ padding: 8px 12px;
            & ul {
                gap: 12px;
                & li {
                    a {font-size: 1.3rem;}
                }
            }
        }
        .bt {
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            gap: 12px;
            .copyright {
                align-items: flex-start;
            }
        }
    }

    .go_top{ right: 24px; bottom: 40px;}
    .SettingView-module__top{ width: 40px;}

}





/**
 * ----------------------------------------
 * animation
 * ----------------------------------------
 */
 .blink {
    -webkit-animation: blink-effect 1s step-end infinite;
    animation: blink-effect 1s step-end infinite;
  }
  
@keyframes blink-effect {
    50% {
        opacity: 0;
    }
}

@keyframes down {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translateY(15px);
    }
    40% {
        transform: translate(0);
    }
}
  
@-webkit-keyframes down {
    0% {
        transform: translate(0);
    }
    20% {
        transform: translateY(15px);
    }
    40% {
        transform: translate(0);
    }
}
  

@keyframes line {
    0% {
        width: 5px;
        height: 0%;
        background: #00ACB7;
    }
    25% {
        width: 5px;
        height: 25%;
        background: #00ACB7;
    }
    50% {
        width: 5px;
        height: 50%;
        background: #00ACB7;
    }
    75% {
        width: 5px;
        height: 75%;
        background: #00ACB7;
    }
    100% {
        width: 5px;
        height: 100%;
        background: linear-gradient(180deg, #00ACB7 30%, #0159CC 100%);
    }
}
@-webkit-keyframes line {
    0% {
        width: 6px;
        height: 0%;
        background: #00ACB7;
    }
    25% {
        width: 6px;
        height: 25%;
        background: #00ACB7;
    }
    50% {
        width: 6px;
        height: 50%;
        background: #00ACB7;
    }
    75% {
        width: 6px;
        height: 75%;
        background: #0159CC;
    }
    100% {
        width: 6px;
        height: 100%;
        background: #0159CC;
    }
}

@keyframes line-icon {
    0% {
        top: -3%;
    }
    25% {
        top: 25%;
    }
    50% {
        top: 50%;
    }
    75% {
        top: 75%;
    }
    100% {
        top: 97%;
    }
}
@-webkit-keyframes line-icon {
    0% {
        top: -3%;
    }
    25% {
        top: 25%;
    }
    50% {
        top: 50%;
    }
    75% {
        top: 75%;
    }
    100% {
        top: 97%;
    }
}

/* 스크롤 커스텀 */
*::-webkit-scrollbar {
    width: 14px;
}
::-webkit-scrollbar {
    width: 14px;
}
*::-webkit-scrollbar-thumb {
    background-color: #00ACB7;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}
::-webkit-scrollbar-thumb {
    background-color: #00ACB7;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid transparent;
}
*::-webkit-scrollbar-track {
    background-color: #FFFFFF;
    box-shadow: inset 0px 0px 1px white;
}
::-webkit-scrollbar-track {
    background-color: #FFFFFF;
    box-shadow: inset 0px 0px 1px white;
}