@charset "UTF-8";
/* hanbom.com _ project _ name _ yymmdd */

/* for Developer */
.sub.publications .total-area + #data-form {border-top: 1px solid var(--bluegray-dark); padding-top: 40px; margin-top: 16px;}
.sub.publications.list #data-form + div {margin-top: 60px;}
@media all and (max-width: 768px) {
    .sub.publications.list #data-form + div {margin-top: 30px;}
    .sub.publications .total-area + #data-form {padding-top: 30px; margin-top: 20px;}
}

.article-body .text-wrap *:not(img):not(figure *) em{font-style: italic;}

/* page search */
.sub.search{}
.sub.search .search-color{color: var(--blue); font-weight: 700}
.sub.search #data-form .search-form{ max-width: 820px; margin: 0 auto;}
.sub.search #data-form .search-form .input-text{background-color: var(--white); color: #000; caret-color: #000;}
.sub.search .button-area.pack-center{margin-top: clamp(24px,6.4vw,40px); flex-wrap: wrap;}
.sub.search .button-area.pack-center .btn.keywords{padding-inline: 16px; height: clamp(32px,8.53vw,40px); font-size: clamp(14px,3.73vw,16px); border-radius: 100px; background-color: var(--dark-gray)}

.sub.search #data-form + .content-wrap{margin-top: 120px}

.sub.search .item.normal{ background-color: var(--dark-gray); }
.sub.search .item.normal:not(.thumnail) .text-wrap{ background-color: var(--dark-gray); gap:10px;}
.sub.search .item.normal .text-wrap .title{}
.sub.search .item.normal .text-wrap .text{font-weight: 400}

.sub.search .title-wrap .section-title{ font-weight: 400; margin-right: 6px;}
.sub.search .title-wrap .count{padding: 10px 15px; background-color: var(--blue); border-radius: 25px; line-height: 1;}
.sub.search .title-wrap .btn.page-more{ }
.sub.search .title-wrap + .pack-down,
.sub.search .title-wrap + .data-list,
.sub.search .title-wrap + .board-list,
.sub.search .data-list + .button-area{margin-top: 40px;}
.sub.search .button-area{}
.sub.search .button-area .btn.more{padding: 10px 20px; background-color: var(--blue); border-radius: 100px; font-size: 18px;}


.sub.search .section.news .data-list li{display: none;}
.sub.search .section.news .item{height: 100%;}
.sub.search .section.news .item:hover .text-wrap > .title{color: var(--white)}

.sub.search .pack-down{
    display: flex; flex-direction: column;
}
.sub.search .pack-down .section-title.small{font-weight: 500;}


@media all and (max-width: 768px) {
    .sub.search #data-form + .content-wrap{margin-top: 30px}
    .sub.search .title-wrap + .pack-down,
    .sub.search .title-wrap + .data-list,
    .sub.search .title-wrap + .board-list,
    .sub.search .data-list + .button-area{margin-top: 20px;}
    .sub.search .button-area .btn.more{font-size: 16px;}
    .sub.search .title-wrap .count{padding: 8px 14px}
}

/* 20250110  Ctrl + F 사용을 위한 수정 */
body{ -ms-overflow-style: none; }
::-webkit-scrollbar { display: none; }
/* // 20250110  Ctrl + F 사용을 위한 수정 */

/* 20250113 메인 뉴스 버튼 수정 */
.main .section.news .title-wrap.flex-both .section-title.large{ width: auto; }

/* 20250331 스팩 팝업수정 */
#popupSpec2 .img-wrap{max-height: none;}


/* =====================================
[Life CSS 20250818] 신규 Index Css
===================================== */
#lifeVisual{overflow: visible;}
#lifeVisual ul{ transform: translateY(90vh);}
#lifeVisual ul .video-area img{ width: 100%; height: 100%; object-fit: cover;}
#lifeVisual .title-wrap{
    display: flex; flex-direction: column; gap: 28px;
}
#lifeVisual .main-title{position: static; font-size: 60px;}
#lifeVisual .main-text{font-size: 20px;}

#lifeVisual .swiper-utils{
    position: absolute; bottom:40px; left: var(--gutter-100); z-index:1;
    display: flex; align-items: center; gap: 10px;
}
#lifeVisual .swiper-utils .swiper-pagination{margin-top: 0px;}
#lifeVisual .swiper-utils .swiper-pagination span{
    transition: width 0.2s ease;
    width: 10px; height: 10px; border-radius: 100px;
}
#lifeVisual .swiper-utils .swiper-pagination .swiper-pagination-bullet-active{width: 30px;}

#lifeVisual #btnPlayOff .ico{
    width: 32px; height: 32px;

    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: cover;
            mask-size: cover;
    -webkit-mask-position: center center;
            mask-position: center center;

    -webkit-mask-image: url("/tomocube_prec/@resource/images/@uio/pause_circle.svg");
            mask-image: url("/tomocube_prec/@resource/images/@uio/pause_circle.svg");

    background-color: #fff;
}
#lifeVisual #btnPlayOff.active .ico{
    -webkit-mask-image: url("/tomocube_prec/@resource/images/@uio/play_circle.svg");
            mask-image: url("/tomocube_prec/@resource/images/@uio/play_circle.svg");
}

@media all and (min-width: 961px) and (max-width: 1150px){
    #lifeVisual .main-title{font-size: 48px;}
    #lifeVisual .main-text{ font-size: 18px;}
}
@media all and (min-width: 769px) and (max-width: 960px){
    #lifeVisual .main-title{font-size: 38px;}
    #lifeVisual .main-text{ font-size: 16px;}
}
@media all and (min-width: 769px) {
    #lifeVisual .title-wrap {position: absolute; top: 180px; left: var(--gutter-100); z-index: 1;}
}
@media all and (max-width: 768px) {
    #lifeVisual li{
        display: flex; justify-content: center;
        flex-direction: column;
    }
    #lifeVisual .visual-wrap{
        flex-direction: initial; justify-content: initial;
    }
    #lifeVisual .main-title{font-size: 24px;}
    #lifeVisual .main-text{font-size: 14px; padding-left: 15px; padding-right: 15px;}
}


/* 20250827 */
.sub.products.view .section.model .img-area .img-wrap{ padding: 0; }


#wrap.dark input{caret-color: white;}