@charset "UTF-8";

/* 페이지 전용 스타일 */
.content_html .type_c {display: flex; justify-content: space-between; flex-wrap: wrap; margin: 0; align-items: stretch;}
.content_html .type_c >li{width: calc(33.33% - 15px); border: solid 1px #ddd; border-top: solid 3px #304153; display: flex; flex-direction: column; justify-content: space-between;}
.content_html .type_c >li:nth-child(n+3){margin-top: 0px;}
.content_html .type_c li .top{padding: 50px 42px;}
.content_html .type_c li .top p { font-size:18px; font-weight: 400;line-height:1.65; display: contents;}
.content_html .type_c li h3{display: flex; justify-content: space-between; align-items: center; padding-bottom: 40px; border-bottom: solid 1px #ddd; font-size:1.5em; font-weight: 700; letter-spacing:-0.05em;}
.content_html .type_c li .bot{background-color: #f7f7f7; padding: 50px 42px; display: flex;}
.content_html .type_c li .bot i{display: block; margin-right: 15px;}
.content_html .type_c li .bot p { font-size:18px; margin-top:10px; font-weight:400}
.content_html .type_c .text_warp p { font-size:18px}

.content_html .type_c .dot_list{margin-top: 40px; color:#555 }
.content_html .type_c .dot_list p { font-size:18px}
.content_html .type_c .dot_list li{display: flex; padding-left: 12px; position:relative; margin-bottom: 10px;}
.content_html .type_c .dot_list li:last-child{margin: 0;}
.content_html .type_c .dot_list li::before{content: ''; display: block; width: 5px; height: 5px; background-color: #000; border-radius: 50%; position: absolute; top: 12px; left: 0; }
.content_html .type_c .dot_list li .fs_20{min-width: 140px;}
.content_html .type_c .dot{margin-top: 40px; position: relative; padding-left: 12px;}
.content_html .type_c .dot::before{content: ''; display: block; width: 5px; height: 5px; background-color: #000; border-radius: 50%; position: absolute; top: 12px; left: 0; }

.content_html .type_c.ea4 > li{width: calc(25% - 15px);}
.content_html .type_c.ea4 > li:nth-child(n+4){margin-top: 0px;}


h3 > span{word-break:break-all;}

.html_head_info{
    margin-top:60px;
    margin-bottom:60px;
}

.html_head_info > .box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    background-color:#f4f4f4;
}

.html_head_info > .box .img{
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;    
}

.html_head_info > .box .img > img{
    width:100%;
}
.html_head_info > .box .txt_wrap{
    width:100%;
    padding:0 60px;
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}

.html_head_info > .box .txt_wrap .half-round-tit{font-size:2.125rem; font-weight:500; margin-bottom:1.9rem; letter-spacing:-0.05em;}
.html_head_info > .box .txt_wrap .txt{
    font-size:1.25em;
    line-height:1.5;
}



.html_info{
    margin-top:60px;
    margin-bottom:60px;
}

.html_info > .box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
}

.html_info > .box .img{
    width:100%;
}

.html_info > .box .img > img{
    width:100%;
}
.html_info > .box .txt_wrap{
    width:100%;
    padding:0 60px;
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
}

.html_info > .box .txt_wrap .half-round-tit{font-size:2.125rem; font-weight:500; margin-bottom:1.9rem;}
.html_info > .box .txt_wrap .txt{
    font-size:1.25rem;
    line-height:1.5;
}



.html_vtab_cnt:not(.is-active){
    display:none;
}

.html_vtab_cnt.is-active, .html_vtab_cnt.active{
    display:block;
}



.content_html h1{
    font-size: 2.5rem;
    color: #000;
    margin-bottom:0.6rem;
}

.content_html h1 + p {
    font-size:1.25rem;
    margin-bottom:0.6rem;
    position:relative;
}

.html_content_list{
    padding-top:2rem;
    position:relative;
}
.html_content_list:before{
    content:'';
    position:absolute;
    width:100%;
    height:5px;
    left:0;
    top:0;
    background-color:transparent;
    box-shadow:inset 0px 0px 3px rgba(0,0,0,0.25);
}

.html_vtab_cnt{
    position:relative;
    padding-left:2rem;
}

.html_vtab_cnt:before{
    content:'';
    position:absolute;
    display:block;
    left:0;
    top:0;
    height:100%;
    width:2px;
    background-color:transparent;
    border-left:2px dashed #eeeeee;
}
.html_vtab_section div:has(iframe){
    width:100%;
    margin:1rem auto;
}
.html_vtab_section div > iframe{
    width:100%;
    height:initial;
    aspect-ratio:16/9;
}

#bo_v_con .html_vtab_cnt{
    padding-left:0;
}

#bo_v_con .html_vtab_cnt:before {
    display:none;
}

#bo_v_con .img > img{
    width:auto !important;
    max-width:100% !important;
}

#bo_v_con .img {}


#bo_v_con .iframe > iframe{
    max-width:900px;
}

.img > h5{
    text-align:center;
    font-weight:500;
    font-size:1.1em;
}

#bo_v_con .html_vtab_section > h3, #bo_v_con .html_vtab_section h4{
    text-transform:uppercase;
}

.blog-list-title{
    text-align:center;
    font-size:2.5em;
    font-weight:700;
    margin:1em auto;
}
.blog-list-box{
    max-width: 1600px;
    margin: 0 auto 100px auto;
}
.blog-list {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    flex-wrap:wrap;
    justify-content:center;
    gap:8px 25px;
}
.blog-item{
    flex:1 0 calc(33.33% - 25px);
    display:flex;
    min-width:250px;
    flex-direction:column;
    align-items: stretch;
    justify-content:center;
    padding:0;
    margin:0;
}

.blog-item > a{
    flex:1;
    padding:0.75em 1em;
    border:1px solid #dedede;
    border-radius:6px;
    text-transform:uppercase;
    position:relative;
    padding-left:40px;
    font-size:1.12em;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:all 0.3s;
}
.blog-item > a.no-link{
    cursor:default;
    color:#666666;
}
.blog-item > a:before{
    content:'\e895';
    color:#588ced;
    font-family:'Material Icons';
    font-size:24px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    margin-right:6px;
    padding-top:2px;
}
.blog-item > a.no-link:before{
    color:#d2d2d2;
}
.blog-item > a:not(.no-link):hover{
    color:#ffffff;
    background-color:#1748a4;
    border-color:#1748a4;
    transition:all 0.3s;
    box-shadow:
        2px 2px 6px #0080ff,
        -2px -2px 6px #ffcc66
    ;
}
.blog-item > a:not(.no-link):hover:before{
    color:#f4f4f4;
}

.html_content_list{
    display:flex;
    align-items:flex-start;
    margin-top:60px;
    margin-bottom:60px;
}
.html_vtabs_wrap{
    flex:0 0 auto;
    width:30%;    
    margin-right:60px;
    position: sticky;
    top: var(--sticky-top, 0px); /* JS에서 동적으로 세팅 */
    z-index: 50;
    background: #fff;
}
.html_vtabs {
    display:flex;
    flex-direction:column;
    gap:35px;
}


.html_vtabs::-webkit-scrollbar { width: 6px;height:6px; } /* 스크롤 바 */
.html_vtabs::-webkit-scrollbar-track { background-color:#e7e7e7; } /* 스크롤 바 밑의 배경 */
.html_vtabs::-webkit-scrollbar-thumb { background: #7e7e7e; border-radius:4px;} /* 실질적 스크롤 바 */
.html_vtabs::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */
.html_vtabs::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */
.html_vtabs::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */

.html_vtabs a{color:#999999; font-size:1.25rem; font-weight:500;position:relative;display:inline-flex;}
.html_vtabs a:hover{
    color:#000000;
    transition:all 0.35s;
}
.html_vtabs a:before{
    position:absolute;
    display:inline-flex;
    height:2px;
    background-color:#242424;
    width:0;
    bottom:-0.25em;
    left:0;
    content:'';
    transition:all 0.35s;
}
.html_vtabs a:hover:before{
    transition:all 0.35s;
    width:100%;
}

.html_vtabs a.active{color:#000000;}
.html_vtabs a.active:before{
    width:100%;
}


.html_vtab_box{
    flex:1;
    overflow:hidden;
}

.html_vtab_section{
    margin-bottom:4em;
    font-size:1rem;
}

.html_vtab_section > p {
    font-size:1.125em;
    line-height:1.6;
    word-break: keep-all; 
    overflow-wrap: break-word;
    hyphens: auto;
    margin:1em 0;
}

.html_vtab_section .img{
    margin:1.5em auto 2em auto;
    text-align: center;
}

.border img{
    border:1px solid #dedede;
    box-shadow:2px 2px 6px rgba(0,0,0,0.15);
}

.html_vtab_section > h3{
    margin-bottom:0.5em;
    font-size:1.5rem;
    font-weight:700;
    color:#405988;
    text-transform:capitalize;
}
.html_vtab_section > h3 > img{height:32px;}



.html_vtab_section h4{
    margin-top:0.2em;
    margin-bottom: 0.5em;
    font-size: 1.3rem;
    font-weight: 700;
    color: #222222;
    text-transform: capitalize;
}

.html_vtab_section ul{
    list-style:none;
    margin:0 0 0 1.5em;
    padding:0;
}

.html_vtab_section ul:not(.list-type-check) > li{
    position:relative;
    font-size:1.125em;
    line-height:1.6;
    padding-left:1em;
}

.html_vtab_section ul:not(.list-type-check) > li:before{
    content:'';
    display:block;
    position:absolute;
    width:6px;
    height:6px;
    background-color:#333333;
    border-radius:50%;
    left:0;
    top:0.5em;
}

.html_vtab_link {
    list-style:none !important;
    margin:1em 0 !important;
    display:flex;
    flex-direction:column;
    gap:0.45em;
}
.html_vtab_link li{
    list-style:none !important;
}
.html_vtab_link li:before{
    display:none !important;
    padding-left:0 !important;
}
.html_vtab_link li a{
    color:#1748a4;
    font-size:1.025em !important;
    font-weight:500;
    position:relative;
    display:inline-flex;
    align-items:center;
}
.html_vtab_link li a:hover:before{
    color:#4880e6;
    content:'';
    display:inline-flex;
    position:absolute;
    bottom:-0.3em;
    height:2px;
    background-color:#1748a4;
    left:0;
    width:100%;
    transition:all .35s;
}
.html_vtab_link li a:before{
    color:#4880e6;
    content:'';
    display:inline-flex;
    position:absolute;
    bottom:-0.3em;
    height:2px;
    background-color:#1748a4;
    left:0;
    width:0;
    transition:all .35s;
}
.html_vtab_link li a:after{
    content:'\e5e1';
    font-size:1em;
    font-weight:500;
    font-family:'Material Icons';
    transition:all 0.35s;
}

.html_vtab_link li a:hover:after{
    transition:all 0.35s;
    margin-left:10px;
}

.list-type-check{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:0.25em;
    margin-top:1.6em;
}

.list-type-check > li{
    list-style:none;
    position:relative;
    padding-left:1.15em;
    line-height:1.45;
    font-size:1.1em;
    color:#666;
}

.list-type-check > li:before{
    content:'\e5ca';
    font-family:'Material Icons';
    position:absolute;
    left:0;
    top:0.1em;
    font-weight:bold;
    color:#242424;
}
.list-type-check > li ul{
    font-size:1em !important;
    padding-left: 0 !important;
    margin-left: 0 !important;    
    margin-top:0.25em !important;
}
.list-type-check > li ul li{
    font-size:1em !important;
    padding-left: 1em !important;    
}


.sub-header.fixed {
    width: 100%;
    position:fixed;
    bottom: initial;
    left: 0;
    top:90px;
    z-index:99;
    background:#000000;
}

.sub-header.fixed ul.sub-position > li {
    padding: 0 30px 0 10px;
}
.img > img{
    width:auto !important;
    max-width:100%;
}

.img > p{
    margin:1em auto;
    font-style:italic;
    font-weight:400;
    font-size:0.9em;
}
ol.ol-list{
    margin-left:0;
    padding-left:0;
}
ol.ol-list > li{
    position:relative;
    font-size:1.025em;
    padding-left:1.5em;
}

ol.ol-list > li:before{
    content:'';
    position:absolute;
    left:0;
    top:5px;
    color:#f4f4f4;
    background-color:#333;
    display:inline-flex;
    width:20px;
    height:20px;
    font-size:0.85em;
    border-radius:4px;
    align-items:center;
    justify-content:center;
}

.txt.lead ol > li:nth-of-type(1):before{content:'1';}
.txt.lead ol > li:nth-of-type(2):before{content:'2';}
.txt.lead ol > li:nth-of-type(3):before{content:'3';}
.txt.lead ol > li:nth-of-type(4):before{content:'4';}
.txt.lead ol > li:nth-of-type(5):before{content:'5';}
.txt.lead ol > li:nth-of-type(5):before{content:'5';}
.txt.lead ol > li:nth-of-type(6):before{content:'6';}
.txt.lead ol > li:nth-of-type(7):before{content:'7';}
.txt.lead ol > li:nth-of-type(8):before{content:'8';}
.txt.lead ol > li:nth-of-type(9):before{content:'9';}

.half-round-tit strong > span { display:inline-flex; vertical-align:middle;padding:3px 5px;font-size:0.9em;background-color:#646464; color:#f4f4f4;border-radius:8px;}

.img-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1em;
}

.img-grid .img > img{width:auto !important; max-width:100%;}

.stepbox-flex{
    display:flex;
    justify-content:space-between;
}

.stepbox-item{
    display:flex;
    align-items:center;
    border-radius:8px;
    padding:1.5em;
    background-color:#eff1f3;
    color:#333333;
    position:relative;
    justify-content: center;    
}

.stepbox-first:after{
    content:'\e5c8';
    font-family:'Material Icons';
    font-size:2.5em;
    position:absolute;
    top:50%;
    right:-45px;
    transform:translateY(-50%);
}

.stepbox-item > p{
    text-align:center;
}
.stepbox-last{
    gap:15px;
}
.stepbox-last .stepbox-item:first-child{
    flex:1;
}
.stepbox-last .stepbox-item:last-child{
    flex:2;
}

.img-tech-01{
    grid-template-columns:repeat(4,1fr);
}
.img-tech-02{
    grid-template-columns:repeat(2,1fr);
}

.iframe {
    text-align:center;
    margin-bottom:2em !important;
}
.iframe > p{
    margin:1em auto;
    font-style:italic;
    font-weight:400;
    font-size:0.9em;
}
.iframe > p > span,.img > p > span{
    display:block;
    text-align:center;
}

.iframe > p,.img > p{
    max-width:85%;
}
.img > a {
    display:block;
    text-align:center;
    margin:1em auto !important;
    position:relative;
}

.external-url{
    display:flex !important;
    align-items:center;
    justify-content:center;
    position:relative;
    gap:5px;
}
.external-url:before{
    content:attr(href);
    color:#4b65b7;
}
.external-url:after{
    content:'\e63a';
    position:relative;
    font-family:'Material Icons';
    font-size:24px;
    color:#4b65b7;
}
.external-url:hover:before,.external-url:hover:after{
    color:#b21023;
    transition:all 0.3s;
} 

ul.html_vtab_link > li{
    padding-left:0 !important;
}

.n-paging-box{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.n-paging-box .pg_current {
    display: inline-block;
    background: #242424;
    border: 1px solid #242424;
    color: #fff;
    font-weight: bold;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    min-width: 30px;
    border-radius: 0px;
}

.n-paging-box .pg_page {
    color: #959595;
    font-size: 1.083em;
    height: 30px;
    line-height: 28px;
    padding: 0 5px;
    min-width: 30px;
    text-decoration: none;
    border-radius: 0px;
}

@media screen and (max-width: 1400px){
    .content_html .type_c li .top{padding: 25px;}
    .content_html .type_c li .top br{display: none;}
    .content_html .type_c li .bot{padding: 25px;}
    .content_html .type_c li h5{padding-bottom: 25px;}
    .content_html .type_c .dot_list{margin-top: 25px;}
    .content_html .type_c .dot{margin-top: 25px;}
}

@media screen and (max-width: 1200px){
    .content_html .type_c .dot_list li{flex-direction: column;}
    .content_html .type_c .dot_list li .arrow{min-width: initial;}
    .content_html .type_c .dot_list li .arrow + span{margin-left: 30px;}
    .content_html .type_c .dot_list li .arrow::after{right: -20px;}
    #bo_v_con .img > img {width:100% !important;}
}

@media screen and (max-width: 992px) {
    .content_html .type_c > li{width: calc(50% - 10px);}
    .content_html .type_c > li:nth-child(n+3){margin-top: 20px;}
    .content_html .type_c li .top{padding: 20px;}
    .content_html .type_c li .bot{padding: 20px;}
    .content_html .type_c li h5{padding-bottom: 20px;}
    .content_html .type_c >li .top i{width: 35px;}
    .content_html .type_c .dot_list{margin-top: 20px;}
    .content_html .type_c .dot_list li{flex-direction: column;}
    .content_html .type_c .dot_list li::before{top: 11px;}
    .content_html .type_c .dot::before{top: 9px;}
    .content_html .type_c .dot{margin-top: 20px;}
    .content_html .type_c .type_a li .bot{align-items: baseline;}
    .content_html .type_c .type_a li .bot i{width: 20px; position: relative; top: -1px;}
    
    .content_html .type_c.ea4 > li{width: calc(50% - 10px);}
    .content_html .type_c.ea4 > li:nth-child(n+3){margin-top: 20px;}
    
    .blog-list {
        grid-template-columns:repeat(2,1fr);
    }
}

@media screen and (max-width: 768px){
    .content_html .type_c >li{width: 100% !important;}
    .content_html .type_c >li:nth-child(n+2){margin-top: 20px;}
    .content_html .type_c >li:nth-child(odd){border-top: solid 3px #000 !important;}
    .content_html .type_c >li:nth-child(even){border-top: solid 3px #000 !important;}
    .blog-item{
        width:100%;
    }
    .list-type-check > li {
        list-style: none;
        position: relative;
        padding-left: 1.15em;
        line-height: 1.45;
        font-size: 0.95em;
        color: #666;
    }
    .html_head_info {
        margin-top: 30px;
        margin-bottom: 30px;
    }
    .blog-list {
        grid-template-columns:repeat(1,1fr);
    }
}    


@media(max-width:1380px){
    .html_head_info > .box {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        background-color: #f4f4f4;
    }
    .html_head_info > .box .txt_wrap {
        padding:2em;
    }
    .html_info > .box {
        display: grid    ;
        grid-template-columns: repeat(1, 1fr);
    }
    .html_info > .box .txt_wrap {
        padding: 2em;
    }
}
@media(max-width:1180px){
    .img-tech-01{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:920px){
    .html_content_list {
        display: flex;
        flex-direction:column;
        align-items: flex-start;
        margin-top: 60px;
        margin-bottom: 30px;
    }
    .html_vtabs_wrap{
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-direction:row;
        top: 137px !important;
    }
    .html_vtabs {
        flex: 0 0 auto;
        width: 100%;
        display: flex;
        flex-direction:row;
        gap: 35px;
        margin-right: 0px;
        margin-bottom:30px;
        overflow-x:auto;
        height:70px;
        align-items:center;
        border-top:0px solid #333;
        scroll-snap-type: x proximity; 
    }
    .html_vtab_cnt:before{display:none;}
    .html_vtabs > li {
        scroll-snap-align: start;
    }
    .html_vtabs > li > a{
        white-space:nowrap;
    }
    .img-tech-01{
        grid-template-columns:repeat(2,1fr);
    }    
}

@media(max-width:1180px){
    .img-tech-01{
        grid-template-columns:repeat(1,1fr);
    }
    .img-tech-02{
        grid-template-columns:repeat(1,1fr);
    }
}

@media(max-width:576px){
    .html_vtabs {
        margin-bottom: 5px;
    }
}