@charset "utf-8";
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

/* 초기화 */
html {overflow-y:scroll}
/* 23.10.11. 이재황세무사 : 기본 바디 백그라운드 컬러 변경
   23.10.15. 이재황세무사 : 디자이너 요청으로 기본 바디 백그라운드 rgb(51, 51, 51)-> BLACK으로 변경
*/
body {    overflow: hidden;    position: relative;background-color:black;margin:0;padding:0;font-size:14px;font-family:'Pretendard'}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
div, ul, li {list-style:none; padding:0; margin:0; border:0}
a {text-decoration:none}
section {margin:0 0 100px 0}
#header {    position: relative;
    display:none;visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;}
.pc {display:block}
.m {display:none}

.page01_2 .pdf_btn_m {cursor: pointer; transition: all 0.5s; border: #6354bb solid 1px; display:none}
.page01_2 .pdf_btn_m a{transition: all 0.5s;}

.container {color:rgb(255, 255, 255); max-width:1200px; margin:0 auto}
.clear {clear:both}

/* 23.10.15. 이재황세무사: 스크롤 라인 추가로인하여 z인덱스 추가 */
video {z-index: 300; position: relative;width: 100%; display:block; margin:0 auto 0 auto; }

/* 23.10.15. 이재황세무사 : 디자이너 요청으로 BODY색 BLACK으로 변경하였으므로, 헤더 및 푸터도 이에맞게 변경 18,18,18->(51,51,51)
   + 좌측 라인을 그렸기에, 포지션 릴레이티브와 z인덱스 수정
   23.10.16. 이재황 : 배경색 제거(이미지를 배경으로 사용)
*/
.header {position: fixed;
    top: 0;
    left: 0;
    width: 100%; z-index: 9999 !important;
    background-color: rgba(0,0,0,0.2);box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; color:#fff; height:75px}
.header .logo {float:left; font-size:26px; margin:20px 0; width:20%}
.header .nav {float:left; font-size:15px; padding:20px 0; width:80%}
.header .nav ul {font-size: 10px;text-align: center; display:flex; justify-content: center;}
.header .nav ul li {float:left; margin:8px 50px 0 0}
/* 23.10.11. 이재황 세무사 : box를 header클래스 에서 제외함으로 box_container으로 수정 및 관련 css 추가 */
.box_container {padding: 0px !important; display: flex; justify-content: left; align-items: center; }
.box_container .box {transition: all 0.5s;text-decoration: none; font-weight: bold; font-size: 18px; color: rgb(255, 255, 255); cursor: pointer; background-color: rgb(99, 84, 187); border: 3px solid rgb(99, 84, 187); border-radius: 8px; padding: 10px 20px; margin: 25px 0px; transition: background-color 0.5s ease 0s, color 0.2s ease 0s;}
.box_container .box a {display:block}
.box_container .box:hover {transition: all 0.5s; border-color:rgb(76, 71, 145);}
.box_container a {color:#fff}
.box_container .box:hover a {color:rgb(76, 71, 145);}

.header.lightmode .nav{
    width:calc(80% - 270px)
}

.header.lightmode .nav ul{
    font-size: 15px;
}

.header a {color:#fff}


.main { min-height:300px; font-size:16px; line-height:26px; padding:0}
.main .title {font-size:24px; font-weight:800; position:relative; padding:0 0 0 0}
.main .title::before {
	position: absolute;
    width: 20px;
    height: 4px;
    /*23.10.11. 이재황세무사 : 배경 변경으로인해 before백그라운드 색 변경*/
    background: rgb(255, 255, 255);
    top: 0;
    left:0;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.5s; 
}

/* 23.10.15. 이재황세무사 : 디자이너 요청으로 BODY색 BLACK으로 변경하였으므로, 헤더 및 푸터도 이에맞게 변경 18,18,18->(51,51,51)*/
.footer {    
    position: relative;
    z-index: 9999 !important;
    background-color: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    padding: 10px 0px;
    text-align: center;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
}
.footer .container {position:relative}
.footer p {position:absolute; top:5px; right:0; border:0 solid #fff; color:#fff; border-radius:30px; height:40px; width:150px; line-height:40px; text-align:right; padding:0; margin:0; font-size:16px}
.footer a {color:#fff}

/* 23.10.11. 이재황세무사 : footer css 추가*/
.footer .logo {text-decoration: none; font-size: 18px; font-weight: bold; margin-right: 20px;}
.footer .container {max-width: 960px;    margin: 0px auto;    padding: 0px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;}
.footer .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: 20px;
}
.footer .textarea {
    display: flex;
    flex-direction: row;
    flex: 1 0 0%;
    text-align: left;
    font-size: 0.8rem;
    line-height: 1.1rem;
    margin-left: 100px;
}
.footer a{
    text-decoration: none;
    padding: 8px 10px;
    color: rgb(255, 255, 255);
    transition: background-color 0.2s ease 0s, color 0.2s ease 0s;
    font-size: 0.8rem;
    font-weight: 400;
    border: 1px solid rgba(0, 0, 0, 0.658);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer svg{
    margin-right: 2px;
    font-size: 15px;
}

#floatingButton {
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%; /* makes the button round */
    background-color: rgb(85, 85, 85); /* color of the button */
    color: rgb(255, 255, 255);
    border: none;
    cursor: pointer;
    font-size: 24px; /* font size of the '+' symbol */
    opacity: 0.8;
    transition: opacity 0.5s;
}

#floatingButton:hover {
    opacity: 1;
}

.engineBotton.lightmode {
    color: rgb(0,0,0);
    border: 1px solid rgb(0,0,0);
}

.main.index.lightmode{
    display: none;
}

.main_lightmode.lightmode{
    display: flex;
    flex-direction: column;
}

.scroll-bar.lightmode{
}

#header.lightmode, #header.lightmode .logo a{
    color: black;
}

.lnb.lightmode, .lnb.lightmode a{
    background-color: white;
    color: black;
}

/* 23.10.11. 이재황세무사 : 화이트모드 추가*/
body {transition: background-color 0.5s, color 0.5s;}
.header {transition: background-color 0.5s, color 0.5s;}
.box a{transition: background-color 0.5s, color 0.5s;}

/* 23.0.15. 이재황세무사 : 화이트모드 배경색 흰색 변경 (디자이너 피드백 반영)*/
body.lightmode {background-color: white; transition: background-color 0.5s, color 0.5s;}
.header.lightmode {background-color: rgba(255,255,255,1);transition: background-color 0.5s; }
.header.lightmode a {color:rgb(0,0,0); transition: color 0.5s, background-color 0.5s, transform 0.5s;}
.page02_1 .box.lightmode a {color:rgbwhite; transition: color 0.5s;}
.page02_1 .box.lightmode ul{transition: all 0.5s;    }
.page04_1 .box.lightmode li {color:black; transition: color 0.5s;}
.page04_1 .box.lightmode ul{height: 350px !important;transition: all 0.5s;    background-color: #f7faff !important}

.disabled a {
    color: gray;
    pointer-events: none; /* 클릭을 비활성화 */
    text-decoration: none; /* 밑줄 없애기 */
}

    .disabled a span {
        color: gray;
    }

.page02_1.lightmode .box.lightmode ul{
    background: radial-gradient(circle at center, rgba(0,0,0,0), transparent) !important;

    background-color: #00000073  !important; 
}

.logo a{display: inline-block; font-weight: 700; transition:color 0.5s;  position: absolute;  left: 50px;}
.logo a:hover{color:rgb(143, 136, 215);}
.nav a{display: inline-block; font-weight: 700; transition:color 0.5s, transform 0.5s;}
.nav a:hover{color:rgb(143, 136, 215); transform:scale(1.2);}

.footer {    padding: 30px 0
    ;transition:color 0.5s, background-color 0.5s;}
.footer .container {transition:color 0.5s;}

.footer.lightmode {background-color: rgb(245, 245, 245); transition:color 0.5s, backgorund-color 0.5s;}
.footer.lightmode .container {color:rgb(0,0,0)}
.footer a:hover {background-color: rgb(143, 136, 215); transition: color 0.5s, background-color 0.5s;}

.pagesection.lightmode {color: black; transition: all 0.5s; }

.main .title.lightmode::before { background: rgb(0, 0, 0); transition: all 0.5s; }
.title.lightmode{color: black !important;}
.mainTitle.lightmode{    border: 2px solid rgb(0 0 0) !important;color:black !important;}

/* 23.10.15. 이재황세무사 : 디자이너 요청으로 하이라이트 백그라운드 제거, 색 제거, 강조만 표시*/

#cafeLink { transition: all 0.5s;}

#cafeLink.lightmode{
 background-color: rgb(245, 245, 245);
 color: rgb(0, 0, 0);
 transition: all 0.5s;
}
/*---이상 화이트모드*/

.pagesection{
    padding: 50px 80px;
    line-height: 2;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
    font-size: 18px;
    font-weight: normal;
    transition: all 0.5s;

}

.nav ul li:last-child {
    margin-right: 0;  /* 마지막 li 아이템의 오른쪽 마진을 제거합니다. */
}

.box_container .box {    z-index: 9999;
    position: relative;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    background-color: rgb(255 255 255 / 0%);
    border: 1px solid rgb(255 255 255);
    border-radius: 0px;
    padding: 10px 20px;
    margin: 25px 0px;
    transition: background-color 0.5s ease 0s, color 0.2s ease 0s;}
.box_container .box a {display:block}
.box_container a {color:#fff}
.box_container .box:hover a {color:rgb(143, 136, 215);}

.page01_1 {  }
.page01_2 {  }
.page01_2 img {width:100%; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;}
.page01_2 .pdf_btn {
    display: block;
    background: #6354bb;
    border: 2px solid #6354bb;
    color: #fff;
    border-radius: 10px;
    height: 25px;
    width: 250px;
    margin: 0 0 10px 0;
    line-height: 25px;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 0;
    font-weight: 600;
    color: #ffffff;}
.page01_2 .pdf_btn a {transition: all 0.5s; color:#fff}
.page01_2 .pdf_btn:hover {background-color: rgb(51, 51, 51); border-color:rgb(143, 136, 215);}
.page01_2 .pdf_btn:hover a {transition: all 0.5s; color:rgb(143, 136, 215);}


/* 23.10.12. 이재황세무사: 박스 쉐도우 및 트랜시션 추가
   23.10.15. 이재황세무사: 박스 색을 '신비로운 색'으로 디자이너가 요청하여 그에 맞게 변경 기존background:#2b2020 ->#191970(미드나잇 블루) 변경
   + tit 텍스트 사이즈 키움(제목이기에 조금 더 큰게 좋겠다 판단) 
   + 내부 텍스트 색 조정
*/
.page02_1 .box ul {transition: all 0.5s; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; float:left; background:#191970;border-radius:30px; width:49%; margin:25px 1% 0 0; height: 440px;}
.page02_1 .box ul li {color: rgba(255,255,255,0.61);padding:30px 40px; text-align:center; font-size:16px}
.page02_1 .tit {color: white !important;font-size:28px !important; font-weight:600; padding:0 20px !important}

.page02_1 .box ul li:last-child {padding: 10px 40px;}


.page03_1 {    pointer-events: none;
    font-size:18px}
.page03_1 .date_btn {    
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #6354bb;
        border: 2px solid #6354bb;
        color: #fff;
        border-radius: 4px;
        height: 10px;
        width: 94px;
        margin: 0 25px 10px 0;
        line-height: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
        padding: 10px 0;
        font-weight: 600;
        color: #ffffff;
    }
.page03_2 .engin_btn {box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; cursor: pointer;transition: all 0.5s;border: 1px #46bb94 solid;background:#46bb94; color:#fff; border-radius:30px; height:30px; width:250px; margin:0 auto; line-height:30px; text-align:center; font-size:16px; font-weight:normal; padding:10px 20px; font-weight:600}
.page03_2 .engin_btn a { 
    transition: all 0.5s;display:block; color:#fff}
.page03_2 .engin_btn:hover {transition: all 0.5s; background-color: rgba(0,0,0,0);}
.page03_2 .engin_btn:hover a {transition: all 0.5s; color: #46bb94;}


.page04_1 {font-size:18px}
.page04_1 .date_btn {
    display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #6354bb;
        border: 2px solid #6354bb;
        color: #fff;
        border-radius: 4px;
        height: 10px;
        width: 94px;
        margin: 0 25px 10px 0;
        line-height: 25px;
        text-align: center;
        font-size: 16px;
        font-weight: normal;
        padding: 10px 0;
        font-weight: 600;
        color: #ffffff;
}
/* 23.10.12. 이재황 세무사 : page04_1 box 및 span css 조정
   23.10.15. 이재황 세무사 : page04 내 이미지 박스 색 디자이너 의견으로 수정 (#ffffff1f)*/

.page04_1 .box ul {box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;transition: all 0.5s;float:left; background:#ffffff1f;border-radius:30px; width:24%; margin:50px 1% 0 0; height: 500px; color: white;}

.page04_1 .box ul:last-child {}
.page04_1 .box ul li {transition: all 0.5s;padding:30px 20px; text-align:center; font-size:16px}
.page04_1 .tit {font-size:18px !important; font-weight:600; padding:0 20px !important}
.page04_2 span {display:block; background:#6354bb; border:2px solid #6354bb; color:#fff; border-radius:10px; height:25px; margin:0 0 10px 0; line-height:25px; text-align:center; font-size:16px; font-weight:normal; padding:10px 0; font-weight:600; color:#ffffff}
.page04_2.lightmode span{}

.page04_3 .btn_two {display:flex; justify-content: center; margin:50px 0 0 0}
.page04_3 .btn_two li {float:left}
.page04_3 .btn_two .btn {box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; transition: all 0.5s;cursor: pointer;;border:1px #46bb94 solid;background:#46bb94; color:#fff; border-radius:30px; height:30px; width:250px; margin:0 20px; line-height:30px; text-align:center; font-size:16px; font-weight:normal; padding:10px 20px; font-weight:600}

.page04_3 .btn_two:hover {display:flex; justify-content: center; margin:50px 0 0 0}
.page04_3 .btn_two li {float:left}
.page04_3 .btn_two .btn:hover {transition: all 0.5s; background:rgba(0,0,0,0); color:#46bb94;}


/* 23.10.15 이재황세무사 : 테이블 색 bc8cff  등 수정 */
.list-tb {box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px; border:1px solid #bc8cff; width:100%; margin:0 0 30px 0}
.list-tb img {margin:0 10px 0 0; width:60px}

.list-tb th, .list-tb table td {padding:15px 0;border-top:1px solid #bc8cff ;border-left:1px solid #bc8cff ;text-align: center;line-height: 1.4;}

/* 23.10.12. 이재황 세무사 : list-tb thead tr 백그라운드 기본 색 변경*/
.list-tb thead {border-bottom: solid black 1px;}
.list-tb thead th {font-weight:500;border-left:1px solid #bc8cff }

.list-tb thead th:first-child{border-left:1px solid #bc8cff }
.list-tb thead tr th {font-weight:600 !important}
.list-tb tbody td{border-bottom:1px solid #bc8cff ; text-align:center; padding:15px 0; border-left:1px solid #bc8cff }
.list-tb .title {text-align:left; padding:20px 0 20px 20px}

/* 테이블 본문 스타일 */
.list-tb thead tr {
    padding: 8px 15px;
    border: 1px solid grey;  /* 회색 테두리 */
    background-color: rgba(99, 84, 187, 0.6);
}

.list-tb tbody tr:nth-child(odd) {
    /*background-color: rgba(99, 84, 187, 0.1); */
}

.list-tb tbody tr:nth-child(even) {
    background-color: rgba(99, 84, 187, 0.05);  
}



.mobile_video{
    display: none;
}

@media (max-width:1350px){
    .engineBTN{
    }
    
    .changeBTN {
        height: fit-content !important;
        width: fit-content !important;
        position: absolute;
        right: 30px !important;
    }
    .engineBotton {
    }
    .video_Top.lightmode {
        height: 50px !important;
    }
    .mobile_video {
        display: block;
    }

    .pc_video{
        display: none;
    }

    .pc_vidieo

    .engineBotton {
        padding: 20px !important;       
    }

    .container.desktop{
        display: none !important;
    }

    .container.mobile{
        display: flex !important;
    }

    .pagesection {
        padding: 50px 25px !important;
    }

    #gradientEffect{
        flex-direction: column !important;
    }

    #gradientEffect div li{
        width: fit-content !important;
    }

    .scroll-bar{margin-left: 5px !important;}
    .box.scroll-to {
        position: relative !important;
        flex-direction: ce;
        top: 221px;
    }

    .imageContainer:first-child {
        left: -665px !important;
    }

    .imageContainer:last-child{
        left: -1280px !important;
    }

    .pc {display:none}
    .m {display:block}		
    section {margin:0 0 50px 0}	

    .list-tb th, .list-tb table td {padding:10px 10px;border-top:1px solid #e6e6e6;border-left:1px solid #e6e6e6;text-align: center;line-height: 1.4;}

    .header {display:none; visibility: hidden;}	
    .container {max-width:100%; padding:0 10px}	
    .footer p {position:absolute; top:5px; right:10px; border:0 solid #fff; color:#fff; border-radius:30px; height:30px; width:120px; line-height:30px; text-align:right; padding:0; margin:0; font-size:14px}

    .page01_2 .pdf_btn {display:none}
    .page01_2 .pdf_btn_m { display:block; background:#6354bb; color:#fff; border-radius:10px; height:30px; width:100%; margin:-10px auto 30px auto; line-height:30px; text-align:center; font-size:12px; font-weight:normal; padding:10px 0}
    .page01_2 .pdf_btn_m a {color:#fff}

    .page01_2 .pdf_btn_m:hover {transition: all 0.5s; background-color: rgb(51, 51, 51); border-color:rgb(143, 136, 215);}
    .page01_2 .pdf_btn_m:hover a {transition: all 0.5s; color:rgb(143, 136, 215);}

    .page02_1 .box ul {height:400px}
    .page02_1 .box ul:first-child {margin-top: 100px;}
    .page02_1 .box ul {float:none; border-radius:30px; width:100%; margin:0; height:auto; margin:0 0 100px 0}
    .page02_1 .box ul li {padding:30px 40px; text-align:center; font-size:16px}
    .page02_1 .tit {font-size:18px !important; font-weight:600; padding:0 20px !important}


    .page03_1 {font-size:16px}
    .page03_1 .date_btn {background:#6354bb; color:#fff; border-radius:10px;  text-align:center; font-size:14px; font-weight:normal;   width: 100%; margin: 60px 0 10px 0;}

    .page04_1 {font-size:16px}

    .page04_1 .date_btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #6354bb;
        color: #fff;
        border-radius: 10px;
        height: 10px;
        width: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        margin: 30px 0 10px 0;
    }
    .page04_1 .box {display: flex;    flex-direction: column;margin:50px 0 0 0;    align-items: center;
    }
    .page04_1 .box ul {float:left;border-radius:30px; width:90%;  height: fit-content;}
    .page04_1 .box ul:last-child { width:90%}
    .page04_1 .box ul li {padding:30px 20px; text-align:center; font-size:16px}
    .page04_1 .tit {font-size:18px !important; font-weight:600; padding:0 20px !important}
    .page04_3 .btn_two {display:flex; justify-content: center; margin:50px 0 0 0}
    .page04_3 .btn_two li {float:none}
    .page04_3 .btn_two .btn {background:#46bb94; color:#fff; border-radius:30px; height:30px; width:250px; margin:0 0 20px 0; line-height:30px; text-align:center; font-size:16px; font-weight:normal; padding:10px 20px; font-weight:600}

    #header.lightmode {
    background-color: rgba(255,255,255,0.8);
    }
    #header {    
        box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
        background-color: rgba(0,0,0,0.8);
        position: fixed;
        top:0px;
        z-index: 900009;
        visibility: visible !important;
        display: block;;}
    #header { color:#fff; height:50px}
    #header .logo {float:left; font-size:26px; margin:10px 0 0 5px; width:20%}
    #header .logo a {color:#fff}
    #header .box {margin:0 50px 0 0}
    #header .box a {float:right; background:#6354bb; color:#fff; border-radius:30px; height:30px; width:270px; margin:10px 0; line-height:30px; text-align:center}

    .lnb{min-width: 300px;position:fixed;right:-90%;top:0;z-index:90;width:40%;height:100%;background:#010e21;transition:.3s;overflow:auto}
    .lnb.on {right:0;transition:.3s}

    .lnb .close{text-align:right; height:50px}
    .lnb .close:after {display:inline-block;content: "\00d7"; font-size:40px; margin:0 5px 0 0}

    .lnb.lightmode li{border-top:1px solid rgba(0,0,0,0.1)}
    .lnb li{border-top:1px solid rgba(255,255,255,0.1)}
    .lnb li > a{display:block;height:45px;line-height:45px;font-size:14px;color:#fff;padding-left:20px}
    .lnb li.on > a{color:red}
    .lnb li.on .sub{}
    .lnb .sub{display:none;background:#333}
    .lnb .sub{border-top:1px solid #444}
    .lnb .sub a{display:block;padding:8px 0;line-height:18px;font-size:12px;color:#ddd;padding-left:30px}
    .lnb .sub dd.on a{color:red}

    .lnb_open {margin-right: 10px; position:absolute;top:0;right:0}
    .lnb_open:after {display:inline-block;content: "\2630"; font-size:30px; margin:5px 5px 5px 0; line-height:40px}

    .body_cover.on{position:fixed;left:0;top:0;width:100%;height:100%;background:#000;opacity:0.6;z-index:80}

    .footer .container{
        flex-direction: column;
    }

    .footer .textarea {
        margin: 10px 0px;
    }

    .logo a{
        left: 22px;
    }

    #cafeLink {
        display: none;
    }

    .main .title::before {
        width: 0;
        height: 0;
    }

    .main .title {
        padding:0;
        text-align: center;
        margin-bottom: 100px;
    }


}


/* 23.10.12. 이재황세무사: 특정 단어 강조를 위한 css 추가
   23.10.15. 이재황세무사: 디자이너 요청으로 인하여 하이라이트 백그라운드 제거, 색 제거, 굶게만 표시*/
.highlight {
    font-weight: bold;
    text-decoration: underline;
}

.no-transition * {
    transition: none !important;
}

/* 23.10.15. 이재황 세무사 : 특정 요소 마우스오버시 css효과*/
  
  #gradientEffect {
    border-radius: 15px;
    border: 0.5px solid #ffffff14;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, #183141, transparent);
    transition: opacity 0.1s;
    pointer-events: none;
    margin-bottom: 50px;
    display: flex;
    align-items: center;
    flex-direction: row;
    padding: 30px 0;
  }

  #gradientEffect li img {
    margin-left: 35px !important; 
  }

  #gradientEffect div li{
    text-align: left;
    padding-left: 80px !important;
    width: 80%;
  }
  
  /* 23.10.15. 스크롤바 추가 
    23.10.16. 스크롤바 하이라이트 부분 추가 (반응형)
  */
  .scroll-bar {
    z-index: 5;
    margin-left: 55px;
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    border-radius: 0 5px 5px 0;
    transition: opacity 0.1s;

}

.scroll-bar-bg, .scroll-bar-highlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.1s;
}

.scroll-bar-bg {
    background: linear-gradient( 
        rgba(15, 32, 43, 0.1),
        rgba(15, 32, 43, 1) 47%, 
        rgba(15, 32, 43, 1) 53%, 
        rgba(15, 32, 43, 0.1));
    opacity: 1;
    transition: opacity 0.1s;
}

.scroll-bar-bg.lightmode {
    background: linear-gradient( 
        rgba(15, 32, 43, 0.1),
        rgba(15, 32, 43, 0.1));
    opacity: 1;
    transition: opacity 0.1s;
}

.scroll-bar-highlight {
    background: linear-gradient( 
        rgba(0, 0, 0, 0), 
        rgba(0, 0, 0, 0) 35%, 
        rgb(14 255 35) 40%, 
        rgb(14 255 35) 60%, 
        rgba(0, 0, 0, 0) 65%);
    height: 40%;  /* 이 부분을 조절하여 움직일 수 있는 영역을 설정합니다 */
    opacity: 0;
    transition: top 0.1s;  /* opacity에서 top으로 속성을 변경합니다 */
}

.scroll-bar-highlight.lightmode {
    background: linear-gradient( 
        rgba(107, 107, 107, 0), 
        rgba(107, 107, 107, 0) 35%, 
        rgb(78, 14, 255) 40%, 
        rgb(78, 14, 255) 60%, 
        rgba(107, 107, 107, 0) 65%);
    height: 40%;  /* 이 부분을 조절하여 움직일 수 있는 영역을 설정합니다 */
    opacity: 0;
    transition: top 0.1s;  /* opacity에서 top으로 속성을 변경합니다 */
}


.scroll-bar.scrolled .scroll-bar-highlight {
    opacity: 0.7;  
}



.mainTitle {
    display: inline-block; /* 블록 요소 특성을 갖도록 함 */
    padding: 0px 10px; /* 안쪽 여백을 추가하여 텍스트와 테두리 사이에 간격을 만듦 */
    border: 2px solid rgb(31 127 181);
    border-radius: 3px; /* 동그란 형태를 만들기 위한 border-radius 값 */
    font-size: 14px; /* 글자 크기 */
    text-align: center; /* 글자를 중앙에 배치 */
    font-weight: bold;
    color: rgb(37 127 181);
    pointer-events: none;

}

.page02_1 .title {
    color: rgb(37 127 181);
    font-weight: bold;
    font-size: 45px; 
    margin: -5px 0px 45px 0px;
    pointer-events: none;
}



/* 23.10.15. 이재황세무사 : INTRO페이지 자동 텍스트 입력 관련 CSS*/

.text_container{
    overflow: hidden;
    color: white;
    display: flex;
    flex-direction: column;
    margin-left: 10vw;
    
}
.text_container span:nth-child(odd) {
}

.text_container div{
    padding: 400px 0px;

}

.text_container span{
    position: relative;
    z-index: 10;
    line-height: 40px;
    font-size: 40px;
    font-weight: bold;
    opacity: 0;
    transition: opacity 2s;  /* smooth fade-in effect */
    pointer-events: none;

}

.text_container span p{
    pointer-events: none;

color: gray;
font-size: 25px;
font-weight: lighter;
opacity: 0;
transition: opacity 1s;  /* smooth fade-in effect */
line-height: 40px;
}

.text_container :nth-child(5) div{
}

.text_container video {
    width: 60%;
    position: absolute;
    left: 0px;
    margin-left: 81px;
}

#typeText {
    white-space: pre-wrap; /* 공백과 줄 바꿈을 보존 */
}


@keyframes blink {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.cursor {
    display: inline-block;
    width: 1px;
    height: 1em;
    background-color: black;
    vertical-align: text-bottom;
    animation: blink 1s infinite;
}

/* 23.10.16. 이재황세무사 : 인트로 이미지 추가*/
.introIMG {
    display: block;
    height: auto;
}

.imageContainer {
    position: absolute;
    top:0px;
    display: inline-block;
}

.imageContainer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0), transparent),
     linear-gradient(to top, rgba(0, 0, 0), transparent);

    pointer-events: none;
}

#introIMG3 {
    position: absolute;
    bottom: 0;
    left: 0;
    display: inline-block;
}



.video.intro {
    padding: 50px 0 100px 0;
    background: rgba(0, 0, 0);
    position: absolute;
    bottom: 0;
    width: 100vw;
    z-index: 6;
    opacity: 0.8;
}

.video.intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 1) 50%, transparent);
    pointer-events: none;
}

.imageContainer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.imageContainer:first-child {
    top: 0px;
    left:-220px;
}

.imageContainer:last-child {
    left: -730px;
    top: 200vh; /* 원하는 값으로 조절하세요. */
}

.imageContainer:last-child::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
    linear-gradient(to right, rgba(0, 0, 0, 1), transparent)
    ,linear-gradient(to left, rgba(0, 0, 0, 0.5), transparent)
    ,linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent)
    ,linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
    pointer-events: none;
}

.imageContainer:last-child img{
    height: 210vh;
}



.engineBotton {
    top: 9px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0);
    color: white;
    border: 1px white solid;
    padding: 7px;
    cursor: pointer;
    transition: all 0.5s;
    position: absolute;
    width: fit-content;
    text-align: center ;
}

.engineBotton{
}

.engineBotton a{
    color:white
}


.engineBotton:hover {
    color: rgb(143, 136, 215) !important;
    border:1px rgb(143, 136, 215) solid;
    transition: all 0.5s;
}



.main_lightmode video{
}

.wrap {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.lightmode_Text{
    display: none;
}

.lightmode_Text.lightmode{
    display: block;
}

.page04_1 .lightmode_Text.lightmode{
    display: inline-flex;
}

.page03_1 .lightmode_Text.lightmode{
    display: inline-flex;
}

.heavymode_Text.lightmode{
    display: none;
}

.header .logo{
 width: 10%;
}

.header.lightmode .logo{
    width: 20%;
   }

.haedr .nav{
    width: 80%;
}

.main_lightmode {
    display: none;
}

.main_lightmode.lightmode {
    display: flex;
}

.footnote {
    font-size: small;
}

.container.mobile{
    display: none;
}

.footnote_line{
    margin-bottom: 22px;
    width: 35%;
    border-bottom: #ffffff 1px solid;
}

.footnote_line.lightmode {
    border-bottom: 1px black solid;
}

video.lightmode {
    margin-top:3px;
    max-height: 95%;

}

.video_Top {
    width: 100%;
    height: 75px;
}

.video_box{
    display: flex;
    align-items: center;
    height: 80vh;
}


.active a {
color: #6354bb;
scale:1.2;
}

.active.lightmode a {
color: #6354bb;
scale:1.2;
}

.osBTN {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.osButton a{
    color: white;
    transition: all 0.5s;

}

.osButton:hover a {
    color: #6354bb;
    transition: all 0.5s;
}

.osButton {
    display: block;
    background: #6354bb;
    border: 2px solid white;
    border-radius: 10px;
    height: 25px;
    width: 250px;
    margin: 0 0 10px 0;
    line-height: 25px;
    text-align: center;
    font-size: 16px;
    font-weight: normal;
    padding: 10px 0;
    font-weight: 600;
    position: absolute;
    bottom:-1vh;
    z-index: 9999999999999;
    transition: all 0.5s;

}

.osButton:hover{
    background-color: white;
    transition: all 0.5s;
    border: 2px solid black;

}

.gotoOS {
    float: right;
    background: rgba(0,0,0,0);
    border: 2px solid #6354bb;
    color: #fff;
    border-radius: 5px;
    height: 30px;
    width: fit-content;
    margin: 20px 0;
    /* line-height: 40px; */
    text-align: center;
    padding: 0px 13px;
    position: relative;
    right: 66px;
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}
.gotoOS:hover {
    background-color: rgba(255,255,255,0);
}

.gotoOS:hover a{
    color: #6354bb !important;

}

.changeImg {
    width: 50px;

}

.changeBTN {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5px;
    cursor: pointer;
}

.changeImg.lightmode {
    display: none;
}