@charset "utf-8";
@charset "UTF-8";


html { 
margin: 0;  padding: 0;  box-sizing: border-box;  font-size: 20px; 
-webkit-text-size-adjust: none;  -moz-text-size-adjust: none;  -ms-text-size-adjust: none;  width: 100%;  height: 100%;}



/* body {    transition: all 1s;} */
.layout {
width: 65rem; 
max-width: 100%; 
margin: auto; 
position: relative;}
.layout::after { 
display: block; 
content: ""; 
clear: both;}

/* section-title */
.section-title { 
display: block; 
text-align: center; 
margin-top: 5rem;
margin-bottom: 4rem; 
position: relative;  }

.section-title span { 
display: inline-block; 
font-size: 2rem; 
font-family: "Metropolis"; 
color: #000; 
font-weight: 800; 
position: relative;}

/* 모바일 화면 최적화 */
@media (max-width: 768px) {
    .section-title { 
        margin-top: 3rem; /* 모바일 환경에 맞게 상단 마진 축소 */
        margin-bottom: 1rem; /* 하단 마진 축소 */
    }

    .section-title span { 
        font-size: 1.5rem; /* 모바일 환경에 맞게 글꼴 크기 감소 */
    }
}



.section-title span::before { 
display: block;
content: ""; 
position: absolute; 
left: -1.5rem; 
top: -1rem;}
.section-title b { 
display: block;
font-weight: 300; 
font-size: 1.1rem; 
color: #fff; 
margin-top: 1.2rem;
line-height: 1.53rem;}

/* section1 */
#section1 {
    background: #fff;
}
#section1 .table {
    display: table;
    width: calc(100% + 3rem);
    table-layout: fixed;
    border-spacing: 1.5rem;
    margin: 0 -1.5rem;
}
#section1 .table > div { 
display: table-cell; 
height: 100%;
vertical-align: top;}
#section1 .table .table-box {
padding: 3.9rem; 
height: 100%; 
color: #fff;}
#section1 .table-box.type1 { 
background: url(/images/main/table-box1.jpg) no-repeat center center/ cover;}
#section1 .table-box.type2 {
background: url(/images/main/table-box2.jpg) no-repeat center center/ cover;}
#section1 .table-box.type3 { 
background: url(/images/main/table-box3.jpg) no-repeat center center/ cover;}

#section1 .table .table-boxWrap .table-box:nth-of-type(1) { 
margin-bottom: 1.5rem;}
/* 모바일 화면 최적화 */
@media (max-width: 768px) {
#section1 .table .table-boxWrap .table-box:nth-of-type(1) { 
margin-bottom: 0.2rem;}
    }

/*웹지원센터 A05 샘플 */
.section-md-90 {
    padding-top: 90px;
    padding-bottom: 90px;
}

.section-66 {
    padding-top: 66px;
    padding-bottom: 66px;
}
.bg-image {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.bg-black {
    background: #000;
    fill: #000;
}
.context-dark, .bg-black, .bg-gray-darker, .bg-gray-dark, .bg-mine-shaft, .bg-cod-gray, .bg-tuatara, .bg-accent {
    color: rgba(255, 255, 255, 0.5);
}

.context-dark h1, .bg-black h1, .bg-gray-darker h1, .bg-gray-dark h1, .bg-mine-shaft h1, .bg-cod-gray h1, .bg-tuatara h1, .bg-accent h1, .context-dark h2, .bg-black h2, .bg-gray-darker h2, .bg-gray-dark h2, .bg-mine-shaft h2, .bg-cod-gray h2, .bg-tuatara h2, .bg-accent h2, .context-dark h3, .bg-black h3, .bg-gray-darker h3, .bg-gray-dark h3, .bg-mine-shaft h3, .bg-cod-gray h3, .bg-tuatara h3, .bg-accent h3, .context-dark h4, .bg-black h4, .bg-gray-darker h4, .bg-gray-dark h4, .bg-mine-shaft h4, .bg-cod-gray h4, .bg-tuatara h4, .bg-accent h4, .context-dark h5, .bg-black h5, .bg-gray-darker h5, .bg-gray-dark h5, .bg-mine-shaft h5, .bg-cod-gray h5, .bg-tuatara h5, .bg-accent h5, .context-dark h6, .bg-black h6, .bg-gray-darker h6, .bg-gray-dark h6, .bg-mine-shaft h6, .bg-cod-gray h6, .bg-tuatara h6, .bg-accent h6, .context-dark .h1, .bg-black .h1, .bg-gray-darker .h1, .bg-gray-dark .h1, .bg-mine-shaft .h1, .bg-cod-gray .h1, .bg-tuatara .h1, .bg-accent .h1, .context-dark .h2, .bg-black .h2, .bg-gray-darker .h2, .bg-gray-dark .h2, .bg-mine-shaft .h2, .bg-cod-gray .h2, .bg-tuatara .h2, .bg-accent .h2, .context-dark .h3, .bg-black .h3, .bg-gray-darker .h3, .bg-gray-dark .h3, .bg-mine-shaft .h3, .bg-cod-gray .h3, .bg-tuatara .h3, .bg-accent .h3, .context-dark .h4, .bg-black .h4, .bg-gray-darker .h4, .bg-gray-dark .h4, .bg-mine-shaft .h4, .bg-cod-gray .h4, .bg-tuatara .h4, .bg-accent .h4, .context-dark .h5, .bg-black .h5, .bg-gray-darker .h5, .bg-gray-dark .h5, .bg-mine-shaft .h5, .bg-cod-gray .h5, .bg-tuatara .h5, .bg-accent .h5, .context-dark .h6, .bg-black .h6, .bg-gray-darker .h6, .bg-gray-dark .h6, .bg-mine-shaft .h6, .bg-cod-gray .h6, .bg-tuatara .h6, .bg-accent .h6 {
    color: #fff;
}

.context-dark a, .bg-black a, .bg-gray-darker a, .bg-gray-dark a, .bg-mine-shaft a, .bg-cod-gray a, .bg-tuatara a, .bg-accent a, .context-dark a:active, .bg-black a:active, .bg-gray-darker a:active, .bg-gray-dark a:active, .bg-mine-shaft a:active, .bg-cod-gray a:active, .bg-tuatara a:active, .bg-accent a:active, .context-dark a:focus, .bg-black a:focus, .bg-gray-darker a:focus, .bg-gray-dark a:focus, .bg-mine-shaft a:focus, .bg-cod-gray a:focus, .bg-tuatara a:focus, .bg-accent a:focus {
    color: #fff;
}

.context-dark a:hover, .bg-black a:hover, .bg-gray-darker a:hover, .bg-gray-dark a:hover, .bg-mine-shaft a:hover, .bg-cod-gray a:hover, .bg-tuatara a:hover, .bg-accent a:hover {
    color: #049c9c;
}

.context-dark .big, .bg-black .big, .bg-gray-darker .big, .bg-gray-dark .big, .bg-mine-shaft .big, .bg-cod-gray .big, .bg-tuatara .big, .bg-accent .big, .context-dark .text-bigger, .bg-black .text-bigger, .bg-gray-darker .text-bigger, .bg-gray-dark .text-bigger, .bg-mine-shaft .text-bigger, .bg-cod-gray .text-bigger, .bg-tuatara .text-bigger, .bg-accent .text-bigger, .context-dark .text-extra-large-bordered, .bg-black .text-extra-large-bordered, .bg-gray-darker .text-extra-large-bordered, .bg-gray-dark .text-extra-large-bordered, .bg-mine-shaft .text-extra-large-bordered, .bg-cod-gray .text-extra-large-bordered, .bg-tuatara .text-extra-large-bordered, .bg-accent .text-extra-large-bordered {
    color: #fff;
}

.bg-black {
    background: #000;
    fill: #000;
}

.bg-gray-darker {
    background: #00030a;
    fill: #00030a;
}

.bg-gray-dark {
    background: #2a2b2b;
    fill: #2a2b2b;
}

.bg-mine-shaft {
    background: #333;
    fill: #333;
}
article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
    display: block;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
* {
    box-sizing: border-box;
}

.page .text-white {
    color: #fff;
}













#section1 .table .table-box strong { 
display: block; 
font-size: 1.25rem; 
font-weight: 700; 
margin-bottom: 1rem;}
#section1 .table .table-box span { 
display: block; 
font-size: 1rem; 
line-height: 1.3rem; 
margin-bottom: 1rem;}
.view { 
display: block; 
width: 4.6rem; 
height: 2.1rem; 
border: 2px solid #fff; 
line-height: calc(2.1rem - 4px); 
opacity: 0.8; 
text-align: center; 
border-radius: 2rem; 
transition: all 0.2s;}
.view:hover { 
background: #fff; 
color: #000; 
opacity: 1;}
/* 모바일 화면 최적화 */
@media (max-width: 768px) {
    #section1 .table {
        display: block; /* 테이블 레이아웃을 블록 레이아웃으로 변경 */
        width: 100%; /* 너비 조정 */
        margin: 0;
        border-spacing: 0;
    }
    #section1 .table > div, #section1 .table-boxWrap {
        display: block; /* 각 셀과 Wrap을 블록으로 표시 */
        width: 100%; /* 전체 너비 사용 */
    }
    #section1 .table .table-box, #section1 .table-boxWrap .table-box {
        padding: 2.0rem; /* 모바일에서 패딩 설정 */
        margin-bottom: 0.2rem; /* 모든 박스에 동일한 마진 설정 */
    }
    #section1 .table .table-box strong, #section1 .table .table-box span {
        font-size: 0.9rem; /* 글꼴 크기 감소 */
    }
    .view {
        width: 3rem; /* 버튼 크기 조정 */
        height: 1.5rem;
        line-height: calc(1.5rem - 4px); /* 라인 높이 조정 */
    }
}


/* section4 */
 .news-sliderWrap {  margin-bottom: 4rem; 
 /* overflow: hidden; */
 }.news-slider .news {  overflow: hidden;}.news-slider .slick-list {  margin: 0 -1.2rem;}.news-slider .slick-slide {  margin: 0 1.2rem;}
 .news-slider .img {  width: 100%;  height: 12.25rem;  position: relative;  overflow: hidden;}
 .news-slider .img::after {  display: block;  content: "";  width: 100%;  height: 100%;  position: absolute;  top: 75%;  left: 0;  box-shadow: 0 0 5rem #000;  z-index: 2;  background: rgba(0, 0, 0, 0.6);  filter: blur(1rem);}
 .news-slider .img img {  width: 100%;  height: 100%;}
 .news-slider .img .date {  position: absolute;  bottom: 1.4rem;  left: 2.3rem;  display: block;  font-size: 1rem;  font-family: "Metropolis";  color: #fff;  opacity: 0.8;  z-index: 3;  font-weight: 600;}
 .news-slider .title {  display: block;  overflow: hidden;  text-overflow: ellipsis;  font-size: 1.1rem;  color: #393d48;  margin: 1.4rem 0 0.7rem;  white-space: nowrap;}
 .news-slider .txt {  font-size: 1rem;  height: 2.6rem;  display: -webkit-box;  -webkit-line-clamp: 3;  text-overflow: ellipsis;  overflow: hidden;  -webkit-box-orient: vertical;  font-weight: 400;  line-height: 1.3rem;  color: #393d48;}
 .news-slider .news a {outline:none;}

 
/* section5( section2-new) */
#section5 {
    background: url(/images/main/section2-bg1.jpg) no-repeat center center / cover;
    overflow: hidden; /* 마진 상쇄 방지를 위해 추가 */
}
#section5 .section-title span { 
    color: #fff;
}
.product-cate { 
    display: block; 
    margin-top:4rem;
    margin-bottom: 8rem !important; /* !important를 추가하여 우선순위를 높임 */
}
.product-cate ul {  
    width: 100%;  
    display: table;  
    table-layout: fixed;
}
.product-cate ul li {  
    display: table-cell;  
    vertical-align: middle;  
    width: 33.3333%;  
    text-align: center;
}
.product-cate ul li div {  
    display: block;  
    position: relative;
}
.product-cate ul li div::after {  
    display: block;  
    content: "";  
    width: 1px;  
    height: 100%;  
    position: absolute;  
    left: calc(100% - 0.5px);  
    top: 50%;  
    transform: translateY(-50%);  
    background: #585d6c;
}
.product-cate ul li:last-child div::after {  
    display: none;
}
.product-cate ul li .icon {  
    display: table;  
    width: 100%;  
    table-layout: fixed;  
    margin-bottom: 1rem;
}
.product-cate ul li .icon i {  
    display: table-cell;  
    width: 100%;  
    height: 6rem;  
    vertical-align: middle;
}
.product-cate ul li .title {  
    display: block;  
    font-size: 1.1rem;  
    color: #fff;  
    margin-bottom: 1rem;  
    font-weight: 500;
}
.product-cate ul li .view {  
    color: #fff;  
    margin: auto;
}
.product-cate ul li .view:hover {  
    color: #000;
}
.product-cate .pc1 .icon img {  
    width: 5.95rem;  
    height: 4.45rem;
}
.product-cate .pc2 .icon img {  
    width: 4.55rem;  
    height: 4.6rem;
}
.product-cate .pc3 .icon img {  
    width: 5.25rem;  
    height: 3.85rem;
}

/* 모바일 화면 최적화 */
@media (max-width: 768px) {
    #section5 
	.section-title span {
        margin-top: 4rem; /* 모바일에서 상단 마진 조정 */
    }
	.section-title b {
        font-size: 0.9rem;
    }
    .product-cate { 
        margin-top: 4rem; /* 모바일에서 상단 마진 축소 */
        margin-bottom: 4rem; /* 모바일에서 하단 마진 축소 */
    }
    .product-cate ul li {  
        display: block; /* 테이블 셀 대신 블록 레이아웃 사용 */
        width: 100%; /* 전체 너비 사용 */
        margin-bottom: 2rem; /* 아이템 간 마진 추가 */
    }
    .product-cate ul li div::after {  
        display: none; /* 세로 분리선 제거 */
    }
    .product-cate ul li .icon {  
        margin-bottom: 0.5rem; /* 아이콘 하단 마진 조정 */
    }
    .product-cate ul li .icon i {  
        height: auto; /* 아이콘 높이 자동 조절 */
    }
    .product-cate ul li .title, 
    .product-cate ul li .view {  
        font-size: 0.9rem; /* 모바일에서 글꼴 크기 축소 */
    }
}