@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #163A5F;
    --black-color : #222;
    --white-color : #fff;
    --font-32px: 32px;
    --font-24px: 24px;
    --font-20px: 20px;
    --font-18px: 18px;
    --font-16px: 16px;
    --font-14px: 14px;
}
@media screen and (max-width: 1250px) {
    :root {
        --font-32px: 28px;
        --font-24px: 22px;
        --font-20px: 18px;
        --font-18px: 16px;
        --font-16px: 14px;
    }
}
@media screen and (max-width: 960px) {
    :root {
        --font-32px: 24px;
        --font-24px: 20px;
        --font-20px: 16px;
        --font-16px: 15px;
        --font-14px: 13px;
    }
}
@media screen and (max-width: 650px) {
    :root {
        --font-32px: 20px;
        --font-24px: 18px;
        --font-18px: 15px;
        --font-16px: 14px;
        --font-14px: 12px;
    }
}
/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* 스크롤 커스텀 */
html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;}

/* 드래그 블록 커스텀 */
::selection { background-color:var(--main-color); color:#fff; }


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: 140%;
}

body{ font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }
a:hover{ text-decoration: none; color: inherit;  }

.inner{ width:1200px; margin:0 auto;  }

.paging_box{ margin-top: 20px; padding:10px 0; display:flex; align-items: center; justify-content: center; }
.paging_box .pg_page{ background-color:#FFF; border:1px solid #e6e6e6; }
.paging_box .pg_current{ background-color: #163A5F; color:#fff; border:1px solid #163A5F; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }
p{ word-break: keep-all; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 20px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */
html.side-menu-open{overflow: hidden;}
body.side-menu-open{overflow: hidden;}
/* header */
header{position: fixed; top: 0; left: 0; height: 100px; width: 100%; z-index: 100; transition: all 0.3s ease;}
header .main-menu-box{ height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 30px;}
header .logo{width: 200px; height: 100px;}
header .logo img{width: 100%; height: 100%; object-fit: contain;}
header .logo .white-logo{display: block;}
header .logo .black-logo{display: none;}
header .menu-box{width: 750px; display: flex; align-items: center; justify-content: center; height: 100%;}
header .menu-box li{ color: #fff; font-size: var(--font-18px); font-weight: 600; width: calc(100% / 5); text-align: center;}
header .menu-btn-box{width: 200px;}
header .menu-btn {margin-left: auto; width: 30px; height: 22px;position: relative;}
header .menu-btn span{display: block; width: 100%; height: 2px; background-color: #fff; position: absolute; left: 0; top: 0;}
header .menu-btn span:nth-child(1){top: 0;}
header .menu-btn span:nth-child(2){top: 50%; transform: translateY(-50%);}
header .menu-btn span:nth-child(3){top: 100%;}
header .menu-btn.active span:nth-child(1){top: 50%; transform: translateY(-50%) rotate(45deg);}
header .menu-btn.active span:nth-child(2){opacity: 0;}
header .menu-btn.active span:nth-child(3){top: 50%; transform: translateY(-50%) rotate(-45deg);}
header .sub-menu-box{display: none; justify-content: center; padding: 20px 0; background-color: #fff; border-top: 1px solid #999999;}
header .sub-menu-list-box{display: flex;  justify-content: center;}
header .sub-menu-list{display: flex; flex-direction: column; align-items: center; gap: 20px; width: 150px;}
header .sub-menu-list li{color: #555; text-align: center; line-height: 140%;}
header .sub-menu-list li a{color: #555; text-align: center; line-height: 140%;}
header .sub-menu-list li:hover a{color: var(--main-color); font-weight: 600;}
header.white-header {background: #fff;}
header.white-header .logo .white-logo{display: none;}
header.white-header .logo .black-logo{display: block;}
header.white-header .menu-box li{color: #222;}
header.white-header .menu-btn span{background-color: #222;}

header.sub-white-header {background: #fff;}
header.sub-white-header .logo .white-logo{display: none;}
header.sub-white-header .logo .black-logo{display: block;}
header.sub-white-header .menu-box li{color: #222;}
header.sub-white-header .menu-btn span{background-color: #222;}


.side-menu-box{position: fixed; top:0; right: -100%; opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.3s ease; width: 80%; height: 100%; background-color: #fff; padding: 100px; z-index: 99;}
.side-menu-box.active{right: 0; opacity: 1; visibility: visible; pointer-events: auto;}
.side-menu-box .close-btn{position: absolute; top: 30px; right: 30px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--font-32px);}
.side-menu-box .close-btn .bi.bi-x-lg{ font-size: 30px; }
.side-menu-box .side-menu-item{padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #ddd; display: flex;}
.side-menu-box .side-menu-item:last-child{border-bottom: none;}
.side-menu-box .side-menu-item h1{font-size: var(--font-32px); font-weight: 600; width: 180px;}
.side-menu-box .side-menu-item ul{display: flex; gap: 40px; align-items: center;}
.side-menu-box .side-menu-item ul li{color: #555; text-align: center; line-height: 140%; font-size: var(--font-24px);}
.side-menu-box .side-menu-item ul li:hover a{color: var(--main-color); font-weight: 600;}
@media screen and (max-width: 1250px) {
    header .logo{width: 180px;}
}
@media screen and (max-width: 960px) {
    header .logo{width: 160px;}
    header{height: 80px;}
    header .main-menu-box{padding: 0 20px;}
    header .menu-btn {width: 24px; height: 18px;}
    header .menu-btn span{height: 1px;}
    header .menu-box{display: none;}
    .side-menu-box{padding: 50px; overflow-y: auto;}
    .side-menu-box .close-btn{top: 25px; right: 20px;}
    .side-menu-box .side-menu-item{flex-direction: column; padding-bottom: 20px; margin-bottom: 20px;}
    .side-menu-box .side-menu-item h1{margin-bottom: 20px;}
    .side-menu-box .side-menu-item ul{flex-direction: column; gap: 10px; align-items: flex-start;}
}
@media screen and (max-width: 650px) {
    header .logo{width: 140px;}
    header{height: 70px;}
}
/* footer */
footer{padding: 50px 0; background-color: #F9F9F9;}
footer .top{display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd; padding-bottom: 30px; margin-bottom: 30px;}
footer .top .logo{display: inline-block; width: 200px;}
footer .top .logo img{width: 100%; object-fit: contain;}
footer .top .menu-box{display: flex; align-items: center; gap: 20px;}
footer .top .menu-box li{font-size: var(--font-18px); font-weight: 600;}
footer .bottom{display: flex;justify-content: space-between;}
footer .bottom .info div,
footer .bottom .copyright p{font-size: var(--font-16px);}
footer .bottom .info > div:nth-child(1){margin-bottom: 15px;}
footer .bottom .info > div:nth-child(2){display: flex; gap: 30px;}
@media screen and (max-width: 1250px) {
    footer{padding: 40px 0;}
    footer .top .logo{width: 180px;}
}
@media screen and (max-width: 960px) {
    footer{padding: 30px 0;}
    footer .top {padding-bottom: 20px; margin-bottom: 20px;}
    footer .top .logo{width: 160px;}
}
@media screen and (max-width: 650px) {
    footer .top .logo{width: 140px;}
    footer .bottom{flex-direction: column; gap: 10px;}
    footer .bottom .info > div:nth-child(1){margin-bottom: 10px;}
    footer .top .menu-box{gap: 12px;}
}
@media screen and (max-width: 520px) {
    footer .top{flex-direction: column; gap: 20px; align-items: flex-start;}
}
/*##########################index.html##############################*/
/* sec1 */
.sec1{height: 100vh; position: relative; overflow: hidden;}
.sec1 .bg-box{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.sec1 .bg-box video{ width: 100%; height: 100%; object-fit: cover; }
.sec1 .inner{ position: relative; z-index: 2; width: 100%; height: 100%; }
.sec1 .logo, .sec1 .title{ position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1200px; padding: 0 20px; }
.sec1 .logo{ z-index: 1; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translate(-50%, calc(-50% + 40px)) scale(0.95); transition: opacity 1s ease-out, transform 1s ease-out; }
.sec1 .logo.show{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.sec1 .logo.dim{ opacity: 0.15; transition: opacity 1.2s ease-in-out; }
.sec1 .logo img{ max-width: 600px; width: 100%; height: auto; object-fit: contain; }
.sec1 .title{ z-index: 2; opacity: 0; text-align: center; transform: translate(-50%, calc(-50% + 30px)); transition: opacity 1s ease-out, transform 1s ease-out; }
.sec1 .title.show{ opacity: 1; transform: translate(-50%, -50%); }
.sec1 .title h1{ font-size: 48px; font-weight: 700; text-align: center; line-height: 120%; color: #fff; }
.sec1 .title p{ font-size: var(--font-24px); text-align: center; font-weight: 500; color: #fff; margin-top: 20px; }
@media screen and (max-width: 960px) {
    .sec1 .logo img{max-width: 280px;}
    .sec1 .title h1{font-size: 32px;}
}
@media screen and (max-width: 650px) {
    .sec1 .logo img{max-width: 220px;}
    .sec1 .title h1{font-size: 24px; line-height: 140%;}
    .sec1 .title p{font-weight: 400;}
}
/* sec2 */
.sec2{padding: 150px 0;}
.title-box .label{font-size: var(--font-24px); font-weight: 500; color: var(--main-color); margin-bottom: 10px;}
.title-box h2{font-size: var(--font-32px); font-weight: 600; word-break: keep-all;}
.sec2 p{font-size: var(--font-20px); color: #555; margin: 50px 0;}
.sec2 .img-box{height: 420px; width: calc(100vw - ((100vw - 1200px) / 2));}
.sec2 .img-box img{width: 100%; height: 100%; object-fit: cover;}
.sec2 .more-btn{margin-top: 40px;}
.more-btn a{color: #555; font-size: var(--font-20px); }
@media screen and (max-width: 1250px) {
    .sec2{padding: 100px 0;}
    .sec2 p{margin: 40px 0;}
    .sec2 .img-box{width: 100%; height: auto; aspect-ratio: 16/9;}
    .sec2 .more-btn{margin-top: 30px;}
}
@media screen and (max-width: 960px) {
    .sec2{padding: 80px 0;}
    .sec2 p{margin: 30px 0;}
    .sec2 .more-btn{margin-top: 20px;}
}
@media screen and (max-width: 650px) {
    .sec2{padding: 50px 0;}
    .sec2 p{margin: 20px 0;}
    .sec2 p br{display: none;}
}
/* sec3 */
.sec3{padding: 100px 0; background: url('../img/main/main-sec3-bg.jpg') no-repeat center center / cover;}
.sec3 .title-box h2{color: var(--main-color); text-align: center;}
.sec3 .card{display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 60px;}
.sec3 .card-item{display: flex; flex-direction: column; align-items: center; height: 260px; justify-content: space-between;}
.sec3 .card-item .icon-box{width: 80px; height: 80px; margin: 0 auto;}
.sec3 .card-item .icon-box img{width: 100%; height: 100%; object-fit: contain;}
.sec3 .card-item .title{ margin-top: 30px; flex: 1; display: flex; flex-direction: column; justify-content: space-between;}
.sec3 .card-item .title h3{flex: 1; font-size: var(--font-24px); font-weight: 500; text-align: center; display: flex; justify-content: center; align-items: center;}
.sec3 .card-item .title p{font-size: var(--font-20px); font-weight: 500; text-align: center; color: #555;}
@media screen and (max-width: 1250px) {
    .sec3{padding: 80px 0;}
    .sec3 .card-item{height: 220px;}
    .sec3 .card-item .icon-box{width: 70px; height: 70px;}
    .sec3 .card{gap: 10px;}
    .sec3 .card-item .title{margin-top: 20px;}
}
@media screen and (max-width: 960px) {
    .sec3{padding: 60px 0;}
    .sec3 .card{grid-template-columns: repeat(2, 1fr); gap: 24px; place-items: center; margin-top: 40px;}
    .sec3 .card-item{height: 180px;}
    .sec3 .card-item .icon-box{width: 60px; height: 60px;}
    .sec3 .card-item .title{margin-top: 10px;}
    .sec3 .card-item .title h3{margin-bottom: 0;}
}
@media screen and (max-width: 650px) {
    .sec3{padding: 40px 0;}
    .sec3 .title-box h2{word-break: keep-all;}
    .sec3 .title-box h2 br{display: none;}
    .sec3 .inner{text-align: center;}
    .sec3 .card{margin: 30px auto 0 auto; display: inline-block;} 
    .sec3 .card-item {flex-direction: row; width: 100%; gap: 10px; justify-content: flex-start; height: auto; margin-bottom: 24px;}
    .sec3 .card-item:last-child{margin-bottom: 0;}
    .sec3 .card-item .icon-box{width: 50px; height: 50px;}
    .sec3 .card-item .title{margin-top: 0; margin-left: 20px;}
    .sec3 .card-item .title h3{justify-content: flex-start; margin-bottom: 5px;}
    .sec3 .card-item .title h3 br{display: none;}
    .sec3 .card-item .title h3,
    .sec3 .card-item .title p{flex: unset; text-align: start;}
}
/* sec4 */
.sec4{padding: 150px 0;}
.sec4 .title-box > div{display: flex; align-items: center; justify-content: space-between;}
.sec4 .title-box > div .more-btn{flex-shrink: 0;}
.sec4 .slide-item{display: flex; justify-content: space-between; border-top:1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: 50px;}
.sec4 .slide-item .left{flex: 1; padding: 35px 20px; position: relative;}
.sec4 .slide-item .left .label{font-size: var(--font-18px); font-weight: 500; color: #D89C45; margin-bottom: 5px;}
.sec4 .slide-item .left .title{font-size: 28px; font-weight: 700;}
.sec4 .slide-item .left p{margin: 20px 0 50px 0; font-size: var(--font-16px); color: #777;}
.sec4 .slide-item .left .slide-more-btn{font-size: var(--font-18px); display: flex; align-items: center; gap: 10px; cursor: pointer;}
.sec4 .slide-item .left .slide-more-btn i{font-size: var(--font-18px);}
.sec4 .slide-item .left .icon-box{width: 80px; height: 80px; margin: 0 auto; position: absolute; bottom: 0px; right: 30px;}
.sec4 .slide-item .left .icon-box img{width: 100%; height: 100%; object-fit: contain;}
.sec4 .slide-item .right{flex: 1;}
.sec4 .slide-item .right img{width: 100%; height: 100%; object-fit: cover;}
.sec4 .swiper-btn-box{display: flex; align-items: center; gap: 30px; justify-content: flex-end; margin-top: 50px;}
.sec4 .swiper-btn-box > div{width: 40px; height: 40px; border: 1px solid #999; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
@media screen and (max-width: 1250px) {
    .sec4{padding: 100px 0;}
    .sec4 .slide-item{margin-top: 40px;}
    .sec4 .slide-item .left{padding: 30px 20px;}
    .sec4 .slide-item .left .title{font-size: 24px;}
    .sec4 .slide-item .left p{margin: 20px 0 40px 0;}
    .sec4 .slide-item .left .icon-box{width: 70px; height: 70px; right: 20px;}
    .sec4 .swiper-btn-box{margin-top: 40px;}
}
@media screen and (max-width: 960px) {
    .sec4{padding: 80px 0;}
    .sec4 .slide-item{margin-top: 30px;}
    .sec4 .slide-item .left,
    .sec4 .slide-item .right{width: 100%;}
    .sec4 .slide-item .left{padding: 20px;}
    .sec4 .slide-item .left .title{font-size: 20px;}
    .sec4 .slide-item .left p{margin: 10px 0 20px 0;}
    .sec4 .slide-item .left p br{display: none;}
    .sec4 .slide-item .left .icon-box{width: 60px; height: 60px;}
    .sec4 .swiper-btn-box{gap: 20px; margin-top: 30px;}
    .sec4 .swiper-btn-box > div{width: 30px; height: 30px;}
    .sec4 .swiper-btn-box > div img{width: 16px; object-fit: contain;}
}
@media screen and (max-width: 650px) {
    .sec4{padding: 50px 0;}
    .sec4 .title-box > div{gap: 12px;}
    .sec4 .title-box h2 br{display: none;}
    .sec4 .slide-item{margin-top: 20px; flex-direction: column-reverse; }
    .sec4 .slide-item .left .title{font-size: 18px;}
    .sec4 .slide-item .left .slide-more-btn{gap: 6px;}
    .sec4 .slide-item .left .icon-box{width: 56px; height: 56px; right: 16px; bottom: 8px;}
    .sec4 .swiper-btn-box{margin-top: 20px;}
}
/* sec5 */
.sec5{padding-bottom: 150px;}
.sec5 .title-box p{font-size: var(--font-20px); color: #555; margin-top: 30px; word-break: keep-all;}
.sec5 .project-list-box{margin-top: 50px;}
.project-list-box{display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 24px; column-gap: 50px;}
.project-list{width: 100%; padding-bottom: 50px;}
.project-list .bar{width: 70px; height: 5px; background-color: #D89C45; margin-bottom: 30px;}
.project-list h3{font-size: var(--font-20px); font-weight: 600; margin-bottom: 30px; word-break: keep-all;  overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.project-list p{font-size: var(--font-16px); color: #555; word-break: keep-all; overflow: hidden; text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.sec5 .more-btn{margin-top: 100px; text-align: center;}
.sec5 .more-btn a{color: var(--black-color); font-size: var(--font-20px); font-weight: 600; padding: 15px 50px; border: 1px solid #222;}
@media screen and (max-width: 1250px) {
    .sec5{padding-bottom: 100px;}
    .sec5 .project-list-box{column-gap: 30px; margin-top: 40px;}
    .project-list{padding-bottom: 40px;}
    .sec5 .more-btn{margin-top: 80px;}
    .sec5 .more-btn a{padding: 10px 30px;}
}
@media screen and (max-width: 960px) {
    .sec5{padding-bottom: 80px;}
    .sec5 .title-box p{margin-top: 20px;}
    .sec5 .project-list-box{column-gap: 20px; grid-template-columns: repeat(2, 1fr); margin-top: 30px;}
    .project-list{padding-bottom: 30px;}
    .sec5 .more-btn{margin-top: 60px;}
    .sec5 .more-btn a{padding: 8px 20px;}
}
@media screen and (max-width: 650px) {
    .sec5{padding-bottom: 50px;}
    .sec5 .title-box p br{display: none;}
    .sec5 .project-list-box{row-gap: 12px;}
    .project-list{padding-bottom: 20px;}
    .project-list .bar{width: 50px; height: 3px; margin-bottom: 20px;}
    .project-list h3{margin-bottom: 20px;}
    .sec5 .more-btn{margin-top: 40px;}
    .sec5 .more-btn a{padding: 5px 15px;}
}
/* sec6 */
.sec6{padding: 100px 0; background: url('../img/main/main-sec6-bg.jpg') no-repeat center center / cover;}
.sec6 .title-box{text-align: center;}
.sec6 .content{margin-top: 50px; width: 100%;}
.sec6 .swiper-wrapper{width: 100%;}
.sec6 .swiper-slide {width: calc((100% - 96px) / 5); aspect-ratio: 7 / 5;}
.sec6 .swiper-slide .slide-item{width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; justify-content: flex-end;}
.sec6 .swiper-slide .slide-item .text h3{font-size: var(--font-24px); font-weight: 600; margin-bottom: 10px; color: #fff;}
.sec6 .swiper-slide .slide-item .text > div{display: flex; align-items: center; gap: 10px;}
.sec6 .swiper-slide .slide-item .text > div .bar{width: 30px; height: 1px; background-color: #fff;}
.sec6 .swiper-slide .slide-item .text > div span{font-size: var(--font-14px); color: #fff;}
@media screen and (max-width: 1920px) {
    .sec6 .swiper-slide {width: calc((100% - 72px) / 4);}
}
@media screen and (max-width: 1250px) {
    .sec6{padding: 80px 0;}
    .sec6 .swiper-slide {width: calc((100% - 48px) / 3);}
}
@media screen and (max-width: 960px) {
    .sec6{padding: 60px 0;}
    .sec6 .swiper-slide {width: calc((100% - 24px) / 2);}
}
@media screen and (max-width: 650px) {
    .sec6{padding: 40px 0;}
    .sec6 .content{margin-top: 30px;}
    .sec6 .swiper-slide {width: calc((100% - 12px) / 2);}

}
@media screen and (max-width: 480px) {
    .sec6 .swiper-slide {width: calc(100% - 20px); aspect-ratio:  5 / 3;}
}
/* sec7 */
.sec7{padding: 100px 0; background: url('../img/main/main-sec7-bg.jpg') no-repeat center center / cover;}
.sec7 .title-box{text-align: center;}
.sec7 .title-box > div{display: flex; align-items: center; justify-content: center; gap: 24px;}
.sec7 .title-box > div .bar{width: 45px; height: 1px; background-color: #fff;}
.sec7 .title-box h2{color: #fff; display: inline-block;}
.sec7 .title-box p{margin-top: 30px; font-size: var(--font-24px); color: #ddd; font-weight: 400;}
@media screen and (max-width: 1250px) {
    .sec7{padding: 80px 0;}
}
@media screen and (max-width: 960px) {
    .sec7{padding: 60px 0;}
}
@media screen and (max-width: 650px) {
    .sec7{padding: 40px 0;}
    .sec7 .title-box p{font-size: 16px;}
}
/*##########################about-1.html##############################*/
/* sub-visual-sec */
.sub-visual-sec{height: 480px; background: url('../img/common/sub-visual-bg.jpg') no-repeat center center / cover; padding-bottom: 30px;}
.sub-visual-sec .inner{height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 100px;}
.sub-visual-sec .title .label{display: flex; align-items: center; gap: 20px;}
.sub-visual-sec .title .label div{font-size: var(--font-20px); color: #fff;}
.sub-visual-sec .title .label .bar{width: 30px; height: 1px; background-color: #fff;}
.sub-visual-sec .title h1{font-size: 48px; color: #fff; font-weight: 600; margin: 20px 0 10px 0;}
.sub-visual-sec .title p{font-size: var(--font-20px); color: #fff;}
.sub-visual-sec .sub-visual-menu{display: flex; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch;}
.sub-visual-sec .sub-visual-menu li a{font-size: var(--font-18px); color: #fff; border-right: 1px solid #fff; padding-right: 20px; margin-right: 20px;}
.sub-visual-sec .sub-visual-menu li a.active{color: #D89C45; font-weight: 500;}
.sub-visual-sec .sub-visual-menu li:last-child a{border-right: none;}
@media screen and (max-width: 1250px) {
    .sub-visual-sec{height: 420px;}
    .sub-visual-sec .inner{gap: 80px;}
    .sub-visual-sec .title h1{font-size: 38px;}
}
@media screen and (max-width: 960px) {
    .sub-visual-sec{height: 320px;}
    .sub-visual-sec .inner{gap: 50px;}
    .sub-visual-sec .title h1{font-size: 28px;}
    
}
@media screen and (max-width: 650px) {
    .sub-visual-sec{padding-bottom: 20px;}
    .sub-visual-sec .inner{gap: 30px;}
    .sub-visual-sec .title h1{font-size: 24px;}
    .sub-visual-sec .title p{font-size: 16px; font-weight: 400;}
    .sub-visual-sec .sub-visual-menu{row-gap: 5px; column-gap: 15px;}
    .sub-visual-sec .sub-visual-menu li a{border-right: none; padding-right: 0; margin-right: 0;}
}
/* .about1-sec1 */
.about1-sec1{padding: 150px 0;}
.about1-sec1-1{display: flex; justify-content: space-between; align-items: center; gap: 50px; margin-bottom: 50px;}
.about-common-sec1 .img-box{width: 36px;}
.about-common-sec1 .img-box img{width: 100%; object-fit: contain;}
.about-common-sec1 .img-box:nth-of-type(2){margin-left: auto;}
.about-common-sec1 h2{font-size: var(--font-32px); font-weight: 500; margin: 20px 0;}
.about-common-sec1 h2 b{font-size: var(--font-32px); font-weight: 600; color: var(--main-color);}
.about1-sec1-1 .right h3{font-size: var(--font-24px); font-weight: 600; margin-bottom: 30px;  word-break: keep-all;}
.about1-sec1-1 .right p{font-size: var(--font-20px); color: #777; word-break: keep-all;  word-break: keep-all;}
.about1-sec1-2 .bar{width: 1px; height: 100px; background: #8B9199; margin: 0 auto;}
.about1-sec1-2 .text .top{display: flex; gap: 30px; align-items: center; justify-content: center; margin: 50px 0;}
.about1-sec1-2 .text .top .left{display: flex; gap: 8px;}
.about1-sec1-2 .text .top .left span{font-family: 'Noto Serif KR', serif; font-size: 80px; color: #8B9199; font-weight: 600; opacity: 0; transform: translateY(20px); opacity: 0; transition: 0.3s;}
.about1-sec1-2.active .top .left span{ animation: about1-sec1-2-text-ani 1.5s ease forwards;}
.about1-sec1-2 .text .top .left span:nth-child(1){animation-delay: 0.1s;}
.about1-sec1-2 .text .top .left span:nth-child(2){animation-delay: 0.35s;}
.about1-sec1-2 .text .top .left span:nth-child(3){animation-delay: 0.6s;}
.about1-sec1-2 .text .top .left span:nth-child(4){animation-delay: 0.85s;}
.about1-sec1-2 .text .top .right{font-size: var(--font-24px); word-break: keep-all;}
.about1-sec1-2 .text .bottom{font-size: var(--font-32px); color: var(--main-color); word-break: keep-all; text-align: center; font-weight: 600; margin-bottom: 50px;}
.about1-sec1-2 .text .bottom br{display: none;}
@keyframes about1-sec1-2-text-ani{
    from{opacity: 0; transform: translateY(20px);}
    to{opacity: 1; transform: translateY(0);}
}
@media screen and (max-width: 1250px) {
    .about1-sec1{padding: 100px 0;}
    .about1-sec1 .inner .about1-sec1-1{gap: 30px;}
    .about1-sec1 .left {flex-shrink: 0;}
    .about1-sec1-2 .bar{height: 80px;}
    .about1-sec1-2 .text .top .left span{font-size: 70px;}
    .about1-sec1-2 .text .bottom br{display: block;}
}
@media screen and (max-width: 960px) {
    .about-common-sec1 .img-box{width: 32px;}
    .about1-sec1{padding: 80px 0;}
    .about1-sec1-2 .bar{height: 60px;}
    .about1-sec1-2 .text .top{gap: 20px;}
    .about1-sec1-2 .text .top .left span{font-size: 60px;}
}
@media screen and (max-width: 800px) {
    .about1-sec1{padding: 40px 0 80px 0;}
    .about1-sec1 .inner .about1-sec1-1{flex-direction: column; }
    .about1-sec1-1 .right h3,
    .about1-sec1-1 .right p{text-align: center;}
}
@media screen and (max-width: 650px) {
    .about-common-sec1 .img-box{width: 24px;}
    .about1-sec1{padding: 60px 0;}
    .about1-sec1 p br:not(:nth-of-type(3)){display: none;}
    .about1-sec1 .right h3{margin-bottom: 20px;}
    .about1-sec1-2 .bar{height: 40px;}
    .about1-sec1-2 .text .top .left{gap: 0px;}
    .about1-sec1-2 .text .top .left span{font-size: 40px;}
    .about1-sec1-2 .text .top .right{font-size: 16px;}
}
/* .about1-sec2 */
.about1-sec2{padding: 100px 0; background: url('../img/about/about1-sec2-bg.jpg') no-repeat center center / cover;}
.about1-sec2 .title-box{text-align: center;}
.about1-sec2 .title-box .label div,
.about1-sec2 .title-box h2{color: #fff;}
.about1-sec2 .content{display: flex; gap: 50px; align-items: center; margin-top: 50px; justify-content: center;}
.about1-sec2 .content .item{display: flex; justify-content: center; align-items: center; width: 262px; aspect-ratio: 1 / 1; border-radius: 50%; background: linear-gradient(135deg, #2E78C5 0%, #163A5F 100%);}
.about1-sec2 .content .item .item-inner{display: flex; flex-direction: column; align-items: center; justify-content: center;}
.about1-sec2 .content .item .icon-box{width: 100px; height: 100px; margin-bottom: 10px;}
.about1-sec2 .content .item .icon-box img{width: 100%; height: 100%; object-fit: contain;}
.about1-sec2 .content .item .text{text-align: center;}
.about1-sec2 .content .item .text span{font-size: var(--font-24px); color: #fff; font-weight: 400;}
.about1-sec2 .content .item .text h2{font-size: var(--font-32px); color: #fff; font-weight: 600;}
@media screen and (max-width: 1250px) {
    .about1-sec2{padding: 80px 0;}
    .about1-sec2 .content{gap: 30px; margin-top: 40px;}
    .about1-sec2 .content .item{width: 220px;}
    .about1-sec2 .content .item .icon-box{width: 80px; height: 80px;}
}
@media screen and (max-width: 960px) {
    .about1-sec2{padding: 60px 0;}
    .about1-sec2 .content{gap: 20px; margin-top: 30px;}
    .about1-sec2 .content .item{width: 180px;}
    .about1-sec2 .content .item .icon-box{width: 60px; height: 60px; margin-bottom: 8px;}
}
@media screen and (max-width: 650px) {
    .about1-sec2{padding: 50px 0;}
    .about1-sec2 .content{gap: 10px;}
    .about1-sec2 .content .item{width: 130px;}
    .about1-sec2 .content .item .icon-box{width: 45px; height: 45px; margin-bottom: 0px;}
    .about1-sec2 .content .item .text h2{font-size: 18px;}
}
/* .about1-sec3 */
.about1-sec3{padding: 150px 0; background: url('../img/about/about1-sec3-bg.jpg') no-repeat bottom right / cover;}
.about1-sec3 .inner h2{font-size: var(--font-32px); color: var(--main-color); font-weight: 600; margin-bottom: 50px; word-break: keep-all;}
.about1-sec3 .content .list{display: flex; gap: 24px; padding: 30px 50px; border-top: 5px solid #ddd;}
.about1-sec3 .content .list:last-child{border-bottom: 5px solid #ddd;}
.about1-sec3 .content .list .num{flex-shrink: 0; font-size: var(--font-20px); color: #999; font-weight: 600;}
.about1-sec3 .content .list .text h3{font-size: 28px; font-weight: 600; line-height: normal; word-break: keep-all;}
.about1-sec3 .content .list .text p{font-size: var(--font-20px); color: #555; margin-top: 20px; word-break: keep-all;}
@media screen and (max-width: 1250px) {
    .about1-sec3{padding: 100px 0;}
    .about1-sec3 .inner h2{margin-bottom: 40px;}
    .about1-sec3 .content .list{padding: 30px 40px; gap: 20px;}
    .about1-sec3 .content .list .text h3{font-size: 24px;}
}
@media screen and (max-width: 960px) {
    .about1-sec3{padding: 80px 0;}
    .about1-sec3 .inner h2{margin-bottom: 30px;}
    .about1-sec3 .content .list{padding: 20px 30px; gap: 16px; border-top-width: 3px;}
    .about1-sec3 .content .list:last-child{border-bottom-width: 3px;}
    .about1-sec3 .content .list .text h3{font-size: 22px;}
    .about1-sec3 .content .list .text p{margin-top: 12px;}
}
@media screen and (max-width: 650px) {
    .about1-sec3{padding: 50px 0;}
    .about1-sec3 .inner h2{margin-bottom: 20px;}
    .about1-sec3 .content .list{padding: 20px 10px; gap: 0px; border-top: 3px solid #ddd;}
    .about1-sec3 .content .list:last-child{border-bottom: 3px solid #ddd;}
    .about1-sec3 .content .list .num{font-size: var(--font-16px); min-width: 28px;}
    .about1-sec3 .content .list .text h3{font-size: var(--font-20px);}
    .about1-sec3 .content .list .text p{font-size: var(--font-16px); margin-top: 8px;}
    .about1-sec3 .content .list .text p br{display: none;}
}
/* .about1-sec4 */
.about1-sec4{padding: 50px 0;}
.about1-sec4 .bar{width: 1px; height: 100px; background: #8B9199; margin: 0 auto;}
.about1-sec4 .title-box{text-align: center;}
.about1-sec4 .title-box h2{color: var(--main-color); margin: 50px 0 30px 0;}
.about1-sec4 .title-box p{font-size: var(--font-24px); word-break: keep-all; margin-bottom: 50px;}
.about1-sec4 .title-box p b{font-weight: 500;}
@media screen and (max-width: 1250px) {
    .about1-sec4{padding: 40px 0;}
    .about1-sec4 .bar{height: 80px;}
    .about1-sec4 .title-box h2{margin: 40px 0 20px 0;}
    .about1-sec4 .title-box p{margin-bottom: 40px;}
}
@media screen and (max-width: 960px) {
    .about1-sec4{padding: 30px 0;}
    .about1-sec4 .bar{height: 60px;}
    .about1-sec4 .title-box h2{margin: 30px 0 10px 0;}
    .about1-sec4 .title-box p{margin-bottom: 30px;}
}
@media screen and (max-width: 650px) {
    .about1-sec4{padding: 20px 0;}
    .about1-sec4 .bar{height: 40px;}
    .about1-sec4 .title-box h2{margin: 20px 0 10px 0;}
    .about1-sec4 .title-box p{margin-bottom: 20px;}
    .about1-sec4 .title-box p br{display: none;}
}
/*##########################about-2.html##############################*/
/* .about2-sec1 */
.about2-sec1{padding: 100px 0;}
.about2-sec1 .about-common-sec1{display: inline-block;}
.about2-sec1 p{font-size: var(--font-24px); word-break: keep-all; margin-top: 10px;}
/* .about2-sec2 */
.about2-sec2{padding-bottom: 100px; background: linear-gradient(180deg, rgba(22, 58, 95, 0.00) 0%, rgba(22, 58, 95, 0.10) 100%);}
.about2-sec2 .content{margin-top: 50px;}
.about2-sec2 .content .item{padding-left: 50px; position: relative;}
.about2-sec2 .content .item:before{content: ' '; position: absolute; top: 50px; left: 0; width: 20px; height: 20px; border-radius: 50%; background-color: #8B9199;}
.about2-sec2 .content .item:after{content: ' '; position: absolute; bottom: 0; left: 10px; width: 3px; height: 100%; background-color: #8B9199;}
.about2-sec2 .content .item:nth-of-type(1) .year{padding-top: 0;}
.about2-sec2 .content .item:nth-of-type(1)::before{top: 26px;}
.about2-sec2 .content .item:nth-of-type(1)::after{height: calc(100% - 30px);}
.about2-sec2 .content .year{font-size: 48px; font-weight: 600; color: var(--main-color); padding-top: 30px;}
.about2-sec2 .content .detail .list{display: flex; gap: 20px; margin-top: 30px;}
.about2-sec2 .content .detail .list:last-child{padding-bottom: 30px; border-bottom: 1px solid #ddd;}
.about2-sec2 .content .item:last-child .list:last-child{border-bottom: none;}
.about2-sec2 .content .detail .list .month{flex-shrink: 0; font-size:var(--font-20px); font-weight: 600;}
.about2-sec2 .content .detail .list .desc{flex: 1; min-width: 0;}
.about2-sec2 .content .detail .list .desc p{font-size: var(--font-20px); word-break: keep-all;}
.about2-sec2 .content .detail .list .desc .img-box{width: 148px; aspect-ratio: 3 / 4; margin-top: 10px;}
.about2-sec2 .content .detail .list .desc .img-box img{width: 100%; height: 100%; object-fit: cover;}
@media screen and (max-width: 1250px) {
    .about2-sec1{padding: 80px 0;}
    .about2-sec2{padding-bottom: 80px;}
    .about2-sec2 .content{margin-top: 40px;}
    .about2-sec2 .content .item{padding-left: 40px;}
    .about2-sec2 .content .item:before{width: 18px; height: 18px; top: 44px;}
    .about2-sec2 .content .item:after{left: 8px;}
    .about2-sec2 .content .item:nth-of-type(1)::before{top: 22px;}
    .about2-sec2 .content .year{font-size: 40px; padding-top: 24px;}
    .about2-sec2 .content .detail .list{margin-top: 24px; gap: 16px;}
    .about2-sec2 .content .detail .list:last-child{padding-bottom: 24px;}
    .about2-sec2 .content .detail .list .desc .img-box{width: 130px;}
}
@media screen and (max-width: 960px) {
    .about2-sec1{padding: 60px 0;}
    .about2-sec2{padding-bottom: 60px;}
    .about2-sec2 .content{margin-top: 30px;}
    .about2-sec2 .content .item{padding-left: 32px;}
    .about2-sec2 .content .item:before{width: 16px; height: 16px; top: 38px;}
    .about2-sec2 .content .item:after{left: 7px; width: 2px;}
    .about2-sec2 .content .item:nth-of-type(1)::before{top: 18px;}
    .about2-sec2 .content .item:nth-of-type(1)::after{height: calc(100% - 22px);}
    .about2-sec2 .content .year{font-size: 36px; padding-top: 20px;}
    .about2-sec2 .content .detail .list{margin-top: 20px;}
    .about2-sec2 .content .detail .list .desc .img-box{width: 120px;}
}
@media screen and (max-width: 650px) {
    .about2-sec1{padding: 50px 0;}
    .about2-sec2{padding-bottom: 50px;}
    .about2-sec2 .content{margin-top: 24px;}
    .about2-sec2 .content .item{padding-left: 28px;}
    .about2-sec2 .content .item:before{width: 12px; height: 12px; top: 32px;}
    .about2-sec2 .content .item:after{left: 5px;}
    .about2-sec2 .content .item:nth-of-type(1)::before{top: 14px;}
    .about2-sec2 .content .item:nth-of-type(1)::after{height: calc(100% - 18px);}
    .about2-sec2 .content .year{font-size: 28px; padding-top: 16px;}
    .about2-sec2 .content .detail .list{margin-top: 16px;}
    .about2-sec2 .content .detail .list:last-child{padding-bottom: 20px;}
    .about2-sec2 .content .detail .list .desc p br{display: none;}
}
/*##########################about-3.html##############################*/
/* .about3-sec1 */
.about3-sec1{padding: 100px 0;}
.about3-sec1 .about-common-sec1{display: inline-block;}
/* .about3-sec2 */
.about3-sec2{padding-bottom: 150px;}
.about3-sec2 .img-box{width: 100%; aspect-ratio: 3 / 1; margin-bottom: 50px;}
.about3-sec2 .img-box img{width: 100%; height: 100%; object-fit: cover;}
.about3-sec2 .text-box{display: flex; gap: 50px; align-items: flex-start;}
.about3-sec2 .text-box .left{flex-shrink: 0; font-size: 40px; font-weight: 600; color: rgba(22, 58, 95, 0.20); text-align: end; line-height: 120%; word-break: keep-all;}
.about3-sec2 .text-box .left b{display: block; font-size: 70px; font-weight: 600; color: rgba(22, 58, 95, 0.20);}
.about3-sec2 .text-box .right{flex: 1; min-width: 0;}
.about3-sec2 .text-box .right h3{font-size: 28px; font-weight: 600; margin-bottom: 30px; word-break: keep-all;}
.about3-sec2 .text-box .right .t1{font-size: var(--font-20px); font-weight: 500; margin-bottom: 80px; word-break: keep-all;}
.about3-sec2 .text-box .right .t1:last-child{margin-top: 20px;}
.about3-sec2 .text-box .right .t2{font-size: var(--font-20px); word-break: keep-all;}
@media screen and (max-width: 1250px) {
    .about3-sec1{padding: 80px 0;}
    .about3-sec2{padding-bottom: 100px;}
    .about3-sec2 .img-box{margin-bottom: 40px;}
    .about3-sec2 .text-box{gap: 40px;}
    .about3-sec2 .text-box .left{font-size: 32px;}
    .about3-sec2 .text-box .left b{font-size: 56px;}
    .about3-sec2 .text-box .right h3{font-size: 24px; margin-bottom: 24px;}
    .about3-sec2 .text-box .right .t1{margin-bottom: 50px;}
}
@media screen and (max-width: 960px) {
    .about3-sec1{padding: 60px 0;}
    .about3-sec2{padding-bottom: 80px;}
    .about3-sec2 .img-box{margin-bottom: 30px;}
    .about3-sec2 .text-box{gap: 30px;}
    .about3-sec2 .text-box .left{text-align: left;}
    .about3-sec2 .text-box .left{font-size: 28px;}
    .about3-sec2 .text-box .left b{font-size: 48px;}
    .about3-sec2 .text-box .right h3{font-size: 22px; margin-bottom: 20px;}
    .about3-sec2 .text-box .right .t1{margin-bottom: 40px;}
}
@media screen and (max-width: 650px) {
    .about3-sec1{padding: 40px 0;}
    .about3-sec2{padding-bottom: 50px;}
    .about3-sec2 .img-box{ aspect-ratio: 2 / 1;}
    .about3-sec2 .text-box{gap: 20px; flex-direction: column;}
    .about3-sec2 .text-box .left{font-size: 20px;}
    .about3-sec2 .text-box .left b{font-size: 36px;}
    .about3-sec2 .text-box .right h3{font-size: var(--font-20px); margin-bottom: 16px;}
    .about3-sec2 .text-box .right h3 br{display: none;}
    .about3-sec2 .text-box .right .t1{margin-bottom: 24px; font-size: var(--font-16px);}
    .about3-sec2 .text-box .right .t2{font-size: var(--font-16px);}
    .about3-sec2 .text-box .right .t2 br:not(:nth-of-type(4)):not(:nth-of-type(8)){display: none;}
}
/*##########################about-4.html##############################*/
/* .about4-sec1 */
.about4-sec1{padding: 100px 0;}
.about4-sec1 .about-common-sec1{display: inline-block;}
.about4-sec1 p{font-size: var(--font-24px); word-break: keep-all; margin-top: 10px;}
/* .about4-sec2 */
.about4-sec2{position: relative; padding-bottom: 150px;}
.about4-sec2 .inner{position: relative;}
.about4-sec2 h2{font-size: var(--font-32px); color: var(--main-color); text-align: center; font-weight: 600; margin-bottom: 50px; word-break: keep-all;}
.about4-sec2 .img-box{width: 90%; max-width: 1000px; height: auto; text-align: center; margin: 0 auto;}
.about4-sec2 .img-box img{width: 100%; height: auto; object-fit: contain;}
.about4-sec2 .logo-box{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 750px; max-width: 90%; text-align: center; pointer-events: none;}
.about4-sec2 .logo-box img{width: 100%; height: auto; object-fit: contain;}
@media screen and (max-width: 1250px) {
    .about4-sec1{padding: 80px 0;}
    .about4-sec2{padding-bottom: 100px;}
    .about4-sec2 h2{margin-bottom: 40px;}
    .about4-sec2 .img-box{width: 95%;}
    .about4-sec2 .logo-box{width: 620px; max-width: 88%; top: 52%;}
}
@media screen and (max-width: 960px) {
    .about4-sec1{padding: 60px 0;}
    .about4-sec2{padding-bottom: 80px;}
    .about4-sec2 h2{margin-bottom: 30px;}
    .about4-sec2 .img-box{width: 100%;}
    .about4-sec2 .logo-box{width: 85%; max-width: 480px; top: 54%;}
}
@media screen and (max-width: 650px) {
    .about4-sec1{padding: 40px 0;}
    .about4-sec2{padding-bottom: 50px;}
    .about4-sec2 h2{margin-bottom: 24px;}
    .about4-sec2 .img-box{width: 100%;}
    .about4-sec2 .logo-box{width: 88%; max-width: 320px; top: 56%;}
}
/*##########################about-5.html##############################*/
/* .about5-sec1 */
.about5-sec1{padding: 100px 0;}
.about5-sec1 .about-common-sec1{display: inline-block;}
/* .about5-sec2 */
.about5-sec2{padding-bottom: 150px;}
.about5-sec2 .inner h2{font-size: var(--font-32px); color: var(--main-color); font-weight: 600; word-break: keep-all;}
.about5-sec2 .content{margin-top: 50px;}
.about5-sec2 .content .info .info-item{display: flex; gap: 30px; border-bottom: 1px solid #ddd; padding: 30px 0;}
.about5-sec2 .content .info .info-item:first-child{border-top: 5px solid #ddd;}
.about5-sec2 .content .info .info-item:last-child{border-bottom: none;}
.about5-sec2 .content .info .info-item > div{display: flex; gap: 30px; flex: 1; min-width: 0;}
.about5-sec2 .content .info .info-item > div span{flex-shrink: 0; font-size: var(--font-20px); font-weight: 600; color: #999; width: 100px;}
.about5-sec2 .content .info .info-item > div p{font-size: var(--font-20px); font-weight: 600; color: #555; flex: 1; word-break: keep-all;}
.about5-sec2 .map{width: 100%; height: 500px}
.about5-sec2 .map iframe{display: block; width: 100%; height: 100%; border: 0;}
@media screen and (max-width: 1250px) {
    .about5-sec1{padding: 80px 0;}
    .about5-sec2{padding-bottom: 100px;}
    .about5-sec2 .content{margin-top: 40px;}
    .about5-sec2 .content .info .info-item{gap: 24px;}
    .about5-sec2 .content .info .info-item > div{gap: 20px;}
    .about5-sec2 .content .info .info-item > div span{width: 80px;}
    .about5-sec2 .map{height: 420px;}
}
@media screen and (max-width: 960px) {
    .about5-sec1{padding: 60px 0;}
    .about5-sec2{padding-bottom: 80px;}
    .about5-sec2 .content{margin-top: 30px;}
    .about5-sec2 .content .info .info-item{gap: 16px; padding: 20px 0;}
    .about5-sec2 .content .info .info-item:first-child{border-top-width: 3px;}
    .about5-sec2 .content .info .info-item > div{width: 100%; gap: 10px;}
    .about5-sec2 .map{height: 360px;}
}
@media screen and (max-width: 650px) {
    .about5-sec1{padding: 40px 0;}
    .about5-sec2{padding-bottom: 50px;}
    .about5-sec2 .content{margin-top: 20px;}
    .about5-sec2 .content .info .info-item{gap: 12px; flex-direction: column; }
    .about5-sec2 .content .info .info-item > div{gap: 5px;}
    .about5-sec2 .content .info .info-item > div p{font-weight: 500;}
    .about5-sec2 .map{height: 280px;}
}
/*##########################business-1.html##############################*/
.business-sec1{padding: 100px 0 150px 0;}
.business-title-box .label{font-size: var(--font-20px); color: var(--main-color); font-weight: 500;}
.business-title-box h2{font-size: var(--font-32px); font-weight: 600; word-break: keep-all;}
.business-sec1 .content{display: flex; justify-content: space-between; align-items: center; gap: 50px; border-top: 5px solid #ddd; padding-top: 30px; margin-top: 30px;}
.business-sec1 .content .left{flex: 1; aspect-ratio: 3 / 2; width: 100%;}
.business-sec1 .content .left img{width: 100%; height: 100%; object-fit: cover;}
.business-sec1 .content .right{flex: 1; min-width: 0;}
.business-sec1 .content .right span{color: #D89C45; font-size: var(--font-16px); font-weight: 400;}
.business-sec1 .content .right h3{font-size: var(--font-24px); font-weight: 600; word-break: keep-all; margin: 5px 0 20px 0; color: var(--main-color);}
.business-sec1 .content .right p{font-size: var(--font-20px); word-break: keep-all;}
.business-sec2{padding-bottom: 150px; background: linear-gradient(180deg, rgba(22, 58, 95, 0.00) 0%, rgba(22, 58, 95, 0.10) 100%);}
.business-sec2 .title-box span{color: #D89C45; font-size: var(--font-16px); font-weight: 400;}
.business-sec2 .title-box h3{font-size: var(--font-24px); font-weight: 600; word-break: keep-all; margin-top: 5px; color: var(--main-color);}
.business-sec2 .content{border-top: 5px solid #ddd; padding-top: 30px; margin-top: 30px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;}
.business-sec2 .content img{width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2;}
@media screen and (max-width: 1250px) {
    .business-sec1{padding: 80px 0 100px 0;}
    .business-sec1 .content{gap: 30px; margin-top: 24px; padding-top: 24px;}
    .business-sec2{padding-bottom: 100px;}
    .business-sec2 .content{gap: 16px; margin-top: 24px; padding-top: 24px;}
}
@media screen and (max-width: 960px) {
    .business-sec1{padding: 60px 0 80px 0;}
    .business-sec1 .content{flex-direction: column; gap: 24px; border-top-width: 3px; margin-top: 20px; padding-top: 20px;}
    .business-sec1 .content .left{flex: auto;}
    .business-sec1 .content .right{flex: auto;}
    .business-sec1 .content .right h3{margin-bottom: 12px;}
    .business-sec2{padding-bottom: 80px;}
    .business-sec2 .content{grid-template-columns: repeat(2, 1fr); gap: 16px; border-top-width: 3px; margin-top: 20px; padding-top: 20px;}
}
@media screen and (max-width: 650px) {
    .business-sec1{padding: 40px 0 50px 0;}
    .business-title-box h2 br{display: none;}
    .business-sec1 .content{gap: 16px; margin-top: 16px; padding-top: 16px;}
    .business-sec1 .content .right h3{font-size: var(--font-20px); margin-bottom: 10px;}
    .business-sec1 .content .right p{font-size: var(--font-16px);}
    .business-sec2{padding-bottom: 50px;}
    .business-sec2 .content{gap: 12px;}
}
/*##########################performance-1.html##############################*/
/* .performance-sec1 */
.performance-sec1{padding: 50px 0;}
.performance-sec1 .tab-box{margin-top: 50px;}
.performance-sec1 .tab-box .tab-list{display: flex; flex-wrap: wrap; align-items: center; gap: 20px 50px; border-bottom: 1px solid #999; padding-bottom: 30px;}
.performance-sec1 .tab-box .tab-list li a{font-size: var(--font-20px); color: #999; font-weight: 500; white-space: nowrap;}
.performance-sec1 .tab-box .tab-list li a.active{color: var(--main-color); font-weight: 600;}
.performance-sec1 .content{margin-top: 50px; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 70px; column-gap: 24px; align-items: flex-start;}
.performance-sec1 .content .card{align-self: stretch; display: flex; flex-direction: column;}
.performance-sec1 .content .card .bar{width: 70px; height: 5px; background-color: #D89C45;}
.performance-sec1 .content .card .title{flex: 1; font-size: var(--font-20px); font-weight: 600; word-break: keep-all; margin: 30px 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.performance-sec1 .content .card .info p{font-size: var(--font-16px); color: #555; word-break: keep-all;}
.performance-sec1 .content .card .info p.t2{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.performance-sec1 .paging_box{margin: 100px 0 50px 0; text-align: center;}
@media screen and (max-width: 1250px) {
    .performance-sec1{padding: 40px 0;}
    .performance-sec1 .tab-box{margin-top: 40px;}
    .performance-sec1 .tab-box .tab-list{gap: 16px 30px; padding-bottom: 24px;}
    .performance-sec1 .content{margin-top: 40px; row-gap: 50px; column-gap: 16px;}
    .performance-sec1 .content .card .title{margin: 24px 0;}
    .performance-sec1 .paging_box{margin: 60px 0 40px 0;}
}
@media screen and (max-width: 960px) {
    .performance-sec1{padding: 30px 0;}
    .performance-sec1 .tab-box{margin-top: 30px;}
    .performance-sec1 .tab-box .tab-list{gap: 12px 20px; padding-bottom: 20px;}
    .performance-sec1 .content{grid-template-columns: repeat(2, 1fr); margin-top: 30px; row-gap: 40px; column-gap: 16px;}
    .performance-sec1 .content .card .bar{width: 60px; height: 4px;}
    .performance-sec1 .content .card .title{margin: 20px 0;}
    .performance-sec1 .paging_box{margin: 50px 0 30px 0;}
}
@media screen and (max-width: 650px) {
    .performance-sec1 .tab-box{margin-top: 20px;}
    .performance-sec1 .tab-box .tab-list{flex-wrap: nowrap; overflow-x: auto; gap: 16px; padding-bottom: 16px; -webkit-overflow-scrolling: touch;}
    .performance-sec1 .tab-box .tab-list li{flex-shrink: 0;}
    .performance-sec1 .content{grid-template-columns: 1fr; row-gap: 30px; }
    .performance-sec1 .content .card .bar{width: 50px;}
    .performance-sec1 .content .card .title{ margin: 16px 0;}
    .performance-sec1 .paging_box{margin: 40px 0 20px 0;}
}
/* ##########################status-1.html##############################*/
/* .status-sec1 */
.status-sec1{padding: 50px 0;}
.status-sec1 .content{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; row-gap: 50px; margin-top: 50px;}
.status-sec1 .content .card{background-size: cover; background-position: center; background-repeat: no-repeat; display: flex; flex-direction: column; justify-content: flex-end; height: 270px;}
.status-sec1 .content .card .text{padding: 20px;}
.status-sec1 .content .card .text h3{font-size: var(--font-24px); font-weight: 600; margin-bottom: 5px; color: #fff; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.status-sec1 .content .card .text > div{display: flex; align-items: center; gap: 10px;}
.status-sec1 .content .card .text .bar{width: 30px; height: 1px; background-color: #fff; flex-shrink: 0;}
.status-sec1 .content .card .text span{font-size: var(--font-14px); color: #fff;}
.status-sec1 .paging_box{margin: 100px 0 50px 0; text-align: center;}
@media screen and (max-width: 1250px) {
    .status-sec1{padding: 40px 0;}
    .status-sec1 .content{column-gap: 16px; row-gap: 40px; margin-top: 16px;}
    .status-sec1 .content .card{height: 240px;}
    .status-sec1 .paging_box{margin: 60px 0 40px 0;}
}
@media screen and (max-width: 960px) {
    .status-sec1{padding: 30px 0;}
    .status-sec1 .content{grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; margin-top: 12px;}
    .status-sec1 .content .card .text{padding: 16px;}
    .status-sec1 .content .card{height: 200px;}
    .status-sec1 .paging_box{margin: 50px 0 30px 0;}
}
@media screen and (max-width: 650px) {
    .status-sec1 .content{row-gap: 12px; column-gap: 12px; grid-template-columns: 1fr;}
    .status-sec1 .content .card .text{padding: 14px;}
    .status-sec1 .content .card{height: 180px;}
    .status-sec1 .paging_box{margin: 40px 0 20px 0;}
}
/* ##########################recruit-1.html##############################*/
/* .recruit1-sec1 */
.recruit1-sec1{padding-top: 100px;}
.recruit1-sec1 .title h2{font-size: var(--font-32px); color: var(--main-color); font-weight: 600; margin-bottom: 30px; word-break: keep-all;}
.recruit1-sec1 .title p{font-size: var(--font-20px); color: #555;}
.recruit1-sec1 .content{padding: 50px 0; background: #F3F3F3; margin-top: 100px;}
.recruit1-sec1 .content h3{font-size: 28px; font-weight: 600; margin-bottom: 30px; word-break: keep-all;}
.recruit1-sec1 .content .img-box{width: 70%; text-align: center; margin: 0 auto; max-width: 800px;}
.recruit1-sec1 .content .img-box img{width: 100%; height: auto; object-fit: contain;}
@media screen and (max-width: 1250px) {
    .recruit1-sec1{padding-top: 80px;}
    .recruit1-sec1 .content{margin-top: 80px; padding: 40px 0;}
    .recruit1-sec1 .content h3{font-size: 24px;}
    .recruit1-sec1 .content .img-box{width: 80%;}
}
@media screen and (max-width: 960px) {
    .recruit1-sec1{padding-top: 60px;}
    .recruit1-sec1 .title h2{margin-bottom: 20px;}
    .recruit1-sec1 .content{margin-top: 60px; padding: 30px 0;}
    .recruit1-sec1 .content h3{font-size: 22px; margin-bottom: 20px;}
    .recruit1-sec1 .content .img-box{width: 100%;}
}
@media screen and (max-width: 650px) {
    .recruit1-sec1{padding-top: 40px;}
    .recruit1-sec1 .title p br{display: none;}
    .recruit1-sec1 .content h3{font-size: 20px; margin-bottom: 10px;}
}
/* ##########################recruit-2.html##############################*/
/* .recruit2-sec1 */
.recruit2-sec1{padding: 100px 0 20px 0;}
.recruit2-sec1 .title{border-bottom: 3px solid #222; padding-bottom: 30px; margin-bottom: 30px;}
.recruit2-sec1 .title h2{font-size: var(--font-32px); font-weight: 600; margin-bottom: 10px; word-break: keep-all;}
.recruit2-sec1 .title p{font-size: var(--font-20px); color: #555; word-break: keep-all;}
.recruit2-sec1 .content .menuBox{padding-top: 10px;}
/* .recruit2-sec2 */
.recruit2-sec2.boardArti{padding: 0 0 100px 0;}
.recruit2-sec2.boardArti .basicList > li .item .number.notice{color: #D89C45;}
.recruit2-sec2.basicBoardArti .basicList > li .item .writer{width: 200px;}
.recruit2-sec2.boardArti .paging-wrap{margin-top: 50px; position: relative;}
.recruit2-sec2.boardArti .paging-wrap .inner{display: flex; align-items: center; justify-content: center; position: relative;}
.recruit2-sec2.boardArti .paging-wrap .paging_box{margin-top: 0;}
.recruit2-sec2.boardArti .paging-wrap .menuList{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.recruit2-sec2.boardArti .paging-wrap .menuBox{padding: 0;}

@media screen and (max-width: 1250px) {
    .recruit2-sec1{padding: 80px 0 16px 0;}
    .recruit2-sec1 .title{padding-bottom: 24px; margin-bottom: 24px;}
    .recruit2-sec2.boardArti{padding-bottom: 80px;}
    .recruit2-sec2.basicBoardArti .basicList > li .item .writer{width: 180px;}
    .recruit2-sec2.basicBoardArti .basicList > li .item .date{width: 90px;}
    .recruit2-sec2.boardArti .paging-wrap{margin-top: 40px;}
}
@media screen and (max-width: 960px) {
    .recruit2-sec1{padding: 60px 0 12px 0;}
    .recruit2-sec1 .title{border-bottom-width: 2px; padding-bottom: 20px; margin-bottom: 20px;}
    .recruit2-sec2.boardArti{padding-bottom: 60px;}
    .recruit2-sec2.basicBoardArti .basicList{font-size: 14px;}
    .recruit2-sec2.basicBoardArti .basicList > li .item .writer{width: 150px;}
    .recruit2-sec2.basicBoardArti .basicList > li .item .date{width: 85px;}
    .recruit2-sec2.boardArti .paging-wrap{margin-top: 30px;}
}
@media screen and (max-width: 650px) {
    .recruit2-sec1{padding: 40px 0 10px 0;}
    .recruit2-sec1 .title{padding-bottom: 16px; margin-bottom: 16px;}
    .recruit2-sec1 .title p{font-size: var(--font-16px);}
    .recruit2-sec2.boardArti{padding-bottom: 50px;}
    .recruit2-sec2.boardArti .paging-wrap .inner{ gap: 16px; justify-content: space-between;}
    .recruit2-sec2.boardArti .paging-wrap .menuList{position: static; transform: none; top: auto; right: auto;}
}