@import url('https://cdn.jsdelivr.net/gh/fonts-archive/BM DOHYEON/BM DOHYEON.css');

/*헤더*/
body #hd{border-bottom: 1px solid #D5D5D5; background: rgb(0,0,0,0); position: absolute; top:0; width: 100%; z-index: 999;}
body #hd_wrapper{height: 100px;}
#hd_wrapper #logo{padding: 0;}
#hd_wrapper #logo a{line-height: 100px;}
#hd_wrapper #logo img{width: 249px; height: auto; margin: 0;}
#hd_wrapper #gnb{background: unset; float: right;}
#hd_wrapper #gnb .gnb_wrap{width: auto;}
#hd_wrapper #gnb #gnb_1dul{border: 0;}
#hd_wrapper #gnb #gnb_1dul .bg{display: none;}
#hd_wrapper #gnb #gnb_1dul .gnb_1da{color: white;padding: 0;padding-left: 60px; font-weight: 500; line-height: 100px;}
#hd_wrapper #gnb .gnb_1dli.brochure{margin-left: 90px;}
#hd_wrapper #gnb .gnb_1dli.location{margin-left: 15px;}
#hd_wrapper #gnb .gnb_1dli.brochure a, #hd_wrapper #gnb .gnb_1dli.location a{line-height: 100px;}
#hd_wrapper #gnb .gnb_1dli .gnb_2dul{top: 98px;min-width: 200px; font-weight: 500;}
#hd_wrapper #gnb .gnb_1dli .gnb_2dul .gnb_2dul_box{border: 0; padding: 20px; border-top: 3px solid #E60011; width:max-content;margin-left: 45px; background: white;}
#hd_wrapper #gnb .gnb_1dli .gnb_2dul .gnb_2dul_box .gnb_2da{line-height: 2; font-size: 17px; word-break: keep-all; letter-spacing: -0.5px;}
#hd_wrapper #gnb .gnb_1dli .gnb_2dul .gnb_2dul_box .gnb_2da:hover{color: #E60011;}

/*푸터*/
body #ft{border-top: 1px solid #D5D5D5; background: unset;margin-top: 100px;}
#ft #ft_wr .ft_cnt{padding: 0;width: unset; color: #555; font-size: 17px; line-height: 30px; letter-spacing: -0.5px;}
#ft #ft_wr .ft_cnt p{word-break: keep-all;}
#ft .aside_call{position: fixed; bottom: 20px; right: 20px; width: 125px; height: 100px; border: 0; z-index: 90;}

/*메인*/
.main-slide-container{height: 100vh; scroll-snap-type: y mandatory; overflow-y: scroll; color: white;}
.main-slide{height: 100vh; display: flex; justify-content: center; align-items: center; scroll-snap-align: start;}
.main-slide-cont{width: 1400px; margin: 100px auto 0;opacity: 0;transform: translateY(100px);transition: opacity 0.5s ease-out, transform 0.5s ease-out;}
.main-slide-cont.show {opacity: 1;transform: translateY(0);}
.main-slide-container h2{font-family: 'BM DOHYEON' !important; font-size: 65px; line-height: 1.2; margin-bottom: 30px; text-align: center; font-weight: normal;}
.main-slide-container p{font-size: 20px; line-height: 30px; text-align: center; padding-bottom: 80px;}
.main-slide-container a.text{font-weight: 500; line-height: 1; padding-bottom: 10px; border-bottom: 2px solid white; color: white;}
.main-slide-container .main-slide .main-slide-cont.main01 h2, .main-slide-container .main-slide .main-slide-cont.main04 h2{text-align: left;}
.main-slide-container .main-slide .main-slide-cont.main01 p, .main-slide-container .main-slide .main-slide-cont.main04 p{text-align: left; margin-bottom: 0;}
.main-slide:has(.main01){background: url(../../../img/main/sec01_bg.png) no-repeat center center / cover; transition: background-image 1s ease-in-out;}
.main-slide:has(.main02){background: url(../../../img/main/sec02_bg.png) no-repeat center center / cover;}
.main-slide:has(.main03){background: url(../../../img/main/sec03_bg.png) no-repeat center center / cover;}
.main-slide:has(.main04){background: url(../../../img/main/sec04_bg.png) no-repeat center center / cover;}
.main-slide:has(.main05){background: url(../../../img/main/sec05_bg.png) no-repeat center center / cover;}
.nav-container{position: fixed; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px;}
.nav-item{width: 10px; height: 10px; background: #9F9F9F; border-radius: 50%; cursor: pointer;}
.nav-item.active{background: white;}

.main02 ul{display: flex;}
.main02 li{position: relative; background-color: transparent; transition: background-color 0.5s ease, transform 0.5s ease; width: calc(100% / 6); height: 240px; text-align: center; padding: 50px 0 50px; overflow: hidden; list-style: none; cursor: pointer;}
.main02 li a{color: white;}
.main02 li::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #E60011 0%, #F28101 100%); opacity: 0; transition: opacity 0.5s ease; z-index: 0;}
.main02 li:hover::before{opacity: 0.8;}
.main02 li .content{position: relative; z-index: 1; height: 100%; padding-top: 110px;}
.main02 li:nth-child(1) .content{background: url(../../../img/main/bu_icon01.png) no-repeat top center;}
.main02 li:nth-child(2) .content{background: url(../../../img/main/bu_icon02.png) no-repeat top center;}
.main02 li:nth-child(3) .content{background: url(../../../img/main/bu_icon03.png) no-repeat top center;}
.main02 li:nth-child(4) .content{background: url(../../../img/main/bu_icon04.png) no-repeat top center;}
.main02 li:nth-child(5) .content{background: url(../../../img/main/bu_icon05.png) no-repeat top center;}
.main02 li:nth-child(6) .content{background: url(../../../img/main/bu_icon06.png) no-repeat top center;}

.main03 ul{display: flex;flex-wrap: wrap}
.main03 li{width: calc(100% / 5); height: 142px; background-size: cover; background-position: center; position: relative; cursor: pointer;}
.main03 li .content{display: flex; align-items: center; justify-content: center; border: 4px solid #E60011; background: none; color: #fff; height: 100%; width: 100%; box-sizing: border-box; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease; z-index: 1;}
.main03 li .content::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #E60011 0%, #F28101 100%); opacity: 0; transition: opacity 0.5s ease; z-index: -1;}
.main03 li:hover .content{opacity: 1; font-weight: 500;}
.main03 li:hover .content::before{opacity: 0.5;}
.main03 ul:nth-of-type(1) li:nth-child(1){background: url('../../../img/main/sec03_img01.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(2){background: url('../../../img/main/sec03_img02.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(3){background: url('../../../img/main/sec03_img03.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(4){background: url('../../../img/main/sec03_img04.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(5){background: url('../../../img/main/sec03_img05.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(6){background: url('../../../img/main/sec03_img06.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(7){background: url('../../../img/main/sec03_img07.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(8){background: url('../../../img/main/sec03_img08.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(9){background: url('../../../img/main/sec03_img09.png') no-repeat;}
.main03 ul:nth-of-type(1) li:nth-child(10){background: url('../../../img/main/sec03_img10.png') no-repeat;}

.last-slide{height: 330px; width: 100%; display: flex; justify-content: center; align-items: center; text-align: center;}
.last-slide .main-slide-cont{width: 100%; display: flex; justify-content: space-between; margin: 0;}
.main-slide.last-slide h2{font-size: 30px; margin-bottom: 30px;}
.main-slide.last-slide p{font-size: 17px; color: #BCBCBC; margin-bottom: 30px; padding: 0;}
.main-slide.last-slide a{color: white; cursor: pointer;}
.main-slide.last-slide div{height: 330px; width: 100%;}
.main-slide.last-slide .banner01{background: url(../../../img/main/sec05_bg1.png) no-repeat center center / cover; padding-top: 90px;}
.main-slide.last-slide .banner02{background: url(../../../img/main/sec05_bg2.png) no-repeat center center / cover; padding-top: 90px;}

.nav-container{position: fixed; top: 50%; right: 200px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px;}
.nav-item{width: 10px; height: 10px; background: #9F9F9F; border-radius: 50%; cursor: pointer;margin-top: 15px;}
.nav-item.active{background: white;}
.nav-item.active::after{font-size: 15px; line-height: 1; font-weight: 500; color: white;margin-left: 18px;position: absolute; margin-top: -2px;}
.nav-item:nth-child(1).active::after{content: 'MAIN';}
.nav-item:nth-child(2).active::after{content: 'BUSINESS';}
.nav-item:nth-child(3).active::after{content: 'MANUFACTURING';}
.nav-item:nth-child(4).active::after{content: 'PORTFOLIO';}
.nav-item:nth-child(5).active::after{content: 'NOTICE';}

.main_footer{height: 195px; text-align: left;}
.main_footer #ft #ft_wr .ft_cnt p{padding: 0; text-align: left; font-size: 17px; line-height: 30px; word-break: keep-all;}

/*서브프레임*/
body #container_wr{margin: 0; width: 100%;}
body #container{width:100%; float: unset;margin: 0;}
.sub-container{width: 1400px; margin: 0 auto 0;}
#container .header_img{height: 460px; line-height: 360px;padding-top: 100px; color: white; font-family: 'BM DOHYEON' !important; font-size: 40px; text-align: center;}
#container .sub_menu{border-bottom: 1px solid #D5D5D5; margin-bottom: 100px;}
#container .sub_menu ul{display: flex;justify-content: center;gap: 50px;}
#container .sub_menu li{list-style: none; font-weight: 500; line-height: 70px;}
#container .sub_menu li a{color: #8D8D8D;}
#container .sub_menu li.on a{font-weight: 700; color: #E60011;}
.board_place{text-align: center; color: #9E9E9E; font-size: 16px; font-weight: 500; line-height: 1;}
.board_title{text-align: center; color: black; font-size: 60px; font-weight: 700; line-height: 1; margin-top: 15px; margin-bottom: 60px;}

/*회사소개*/
body #container .header_img.menu01{background: url(../../../img/subtop_01.png) no-repeat center center/cover;}
body #container .header_img.menu01::before{content: "회사소개"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*건설사업*/
body #container .header_img.menu02{background: url(../../../img/subtop_06.png) no-repeat center center/cover;}
body #container .header_img.menu02::before{content: "건설사업"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*특허공법*/
body #container .header_img.menu03{background: url(../../../img/subtop_02.png) no-repeat center center/cover;}
body #container .header_img.menu03::before{content: "특허공법"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*제조사업*/
body #container .header_img.menu04{background: url(../../../img/subtop_03.png) no-repeat center center/cover;}
body #container .header_img.menu04::before{content: "제조사업"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*시공현장*/
body #container .header_img.menu05{background: url(../../../img/subtop_04.png) no-repeat center center/cover;}
body #container .header_img.menu05::before{content: "시공현장"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*고객지원*/
body #container .header_img.menu06{background: url(../../../img/subtop_05.png) no-repeat center center/cover;}
body #container .header_img.menu06::before{content: "고객지원"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}

/*안전진단*/
body #container .header_img.menu07{background: url(../../../img/subtop_07.png) no-repeat center center/cover;}
body #container .header_img.menu07::before{content: "안전진단"; display: block; opacity: 0; transform: translateY(50px);position: absolute;animation: slideUp 0.5s ease-out forwards;}


.header_img{position: relative;display: flex;justify-content: center;}
@keyframes slideUp {
    from {opacity: 0;transform: translateY(50px);}
    to {opacity: 1; transform: translateY(0);}
}

.mo-only{display: none;}

/* 1400px 이하일때 */
@media (max-width: 1400px){
    .mo-only{display: unset;}
    /*헤더*/
    body #wrapper{width: 100%; min-width: unset;}
    body #hd{z-index: 990 !important; width: 100% !important; min-width: unset;}
    body #hd_wrapper{width: 100%;padding: 0 20px 0; display: flex; align-items: center; justify-content: space-between;}
    body #hd_pop{width: 100%;}
    #hd_wrapper #gnb{display: none;}
    #skip_to_container{display: none;}
    #hd_wrapper:after{display: none !important;}
    /*슬라이드메뉴*/
    #mobileGnb{width: 100%;}
    .slide-box.mo-only{position: fixed; top: 0; right: -300px; width: 300px; height: 100%; background-color: white; box-shadow: -2px 0 25px rgba(0, 0, 0, 0); transition: right 0.3s ease-in-out; z-index: 999; padding: 20px; display: flex; flex-direction: column; align-items: flex-start;}
    .slide-box.mo-only.active{right: 0; box-shadow: -2px 0 25px rgba(0, 0, 0, 0.2);}
    .slide-box.mo-only .close-btn{align-self: flex-end; width: 40px; line-height: 40px; background-color: unset; color: black; border: none; cursor: pointer; position: absolute; margin-top: -10px; font-size: 50px;margin-right: -10px;}
    .accordion-menu{list-style: none; padding: 0; margin: 0; width: 100%;}
    .accordion-item{width: 100%;}
    .accordion-toggle{display: block; padding: 10px 0 10px;cursor: pointer; font-weight: 500; color: black;}
    .accordion-toggle:hover{font-weight: 700; color: #E60011;}
    .submenu{overflow: hidden; max-height: 0; transition: max-height 0.3s ease-in-out; list-style: none; padding: 0; margin: 0;}
    .submenu li{background: #f7f7f7; font-weight: normal; color: #555; display: flex; align-items: center;}
    .submenu li:first-child{border-top: 2px solid #E60011;}
    .submenu li:last-child{border-bottom: 2px solid #E60011;}
    .submenu li a{display: block;padding: 8px;padding-left: 8px;font-size: 17px;line-height: 20px;}
    .submenu li::before{content: "●";color: #E60011;font-size: 6px; margin-left: 10px;}
    /*푸터*/
    body #ft{width: 100%; min-width: unset;height: 179px;}
    #ft .aside_call a img:first-child{display: none;}
    #ft .aside_call{width: 240px; height: 50px; right: 0 !important; bottom: 0;}
    .main_footer{font-size: 15px !important; line-height: 25px !important; height: 179px;}
    #ft_wr{width: 100% !important; max-width: unset !important; padding: 40px 20px 40px !important;}
    /*메인*/
    .main-slide-cont{width: 100%; padding: 0 20px 0; word-break: keep-all;}
    a:has(.nav-container){display: none;}
    .main-slide-container h2{font-size: 55px; line-height: 68px;word-break: keep-all;}
    .main-slide-container p{word-break: keep-all; letter-spacing: -1.5px;}
    .main03 li{width: calc(100%/4); height: 147px; background-size: cover !important; background-position-x:center !important;}
    .main03 li .content{display: none;}
    .main-slide-container a.text{font-size: 17px;}
    .main05 .notice.ft_cnt ul{gap: 50px;}
    .main05 .notice.ft_cnt li{width: 252px;}
    .main05 .notice li a{font-size: 20px; line-height: 30px; word-break: break-all;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}
    .main05 .notice li::before{font-size: 15px;}
    .main05 .notice li div{font-size: 15px;}
    .main-slide.last-slide .main-slide-cont{padding: 0;}
    /*서브공통*/
    #container .header_img{height: 287px; line-height: 187px;}
    .aboutus_title{font-size: 80px !important;}
    #container .sub_menu{margin-bottom: 80px;}
    #container .sub_menu ul{display: none;}
    #container .sub_menu .dropdown{position: relative;display: inline-block;width: 100%;}
    #container .sub_menu .dropdown-toggle{width: 100%;padding: 0 20px 0;cursor: pointer;line-height: 50px; font-weight: 500;}
    #container .sub_menu .dropdown-toggle::after{content: "▼";position: absolute;right: 20px; font-size: 12px;}
    #container .sub_menu .dropdown-menu{display: none;position: absolute;width: 100%;border-bottom: 2px solid #d5d5d5;background: white;z-index: 990;}
    #container .sub_menu .dropdown-menu li{padding: 0 20px 0; line-height: 50px;list-style: none;font-weight: normal;}
    #container .sub_menu .dropdown-menu li:hover{background-color: #f0f0f0;}
    .sub-container{width: 100%;padding: 0 20px 0;}
}

/* 900px 이하일때 */
@media (max-width: 900px){
    /*메인*/
    .main-slide-container h2{font-size: 45px; line-height: 55px;}
    .main-slide-container p{font-size: 18px; line-height: 30px;}
    .main02 ul{flex-wrap: wrap;}
    .main02 li{width: 33.3%;}
    .main02 li .content{background-size: 70px !important; padding-top: 90px; font-size: 16px;}
    .main02 li{height: 198px;padding: 0;}
    .main02 li::before{display: none !important; height: 100px;}
    .main05 .notice ul{gap: calc((100% - (238px * 3))/2) !important;}
    .main05 .notice li{width: 238px !important;}
    .main05 .notice li:nth-child(4){display: none;}
    .main05 .notice li a{font-size: 20px; line-height: 30px;}
    .main05 .notice li::before{font-size: 15px;}
    .main05 .notice li div{font-size: 15px;}
    .main-slide.last-slide div{height: 260px;}
    .main-slide.last-slide{display: block; height: 522px;}
    .last-slide .main-slide-cont{display: block;}
    .main-slide.last-slide .banner01,.main-slide.last-slide .banner02{padding-top: 50px;}
    /*서브공통*/
    .aboutus_title{font-size: 60px !important;} 
    .aboutus_title{letter-spacing: -2px !important;}
    .sub-container .board_title{font-size: 40px; margin-bottom: 40px; margin-top: 10px;}
    .sub-container .board_place{font-size: 15px;}
    /*푸터*/
    body #ft{margin-top: 100px;}
}

/* 500px 이하일때 */
@media (max-width: 500px){
    /*헤더*/
    body #hd_wrapper{height: 70px;}
    #hd_wrapper #logo{height: 24px;}
    #hd_wrapper #logo a{line-height: 24px;}
    #hd_wrapper #logo img{height: 24px; width: auto;}
    #menuButton{height: 20px;}
    #menuButton img{height: 20px;width: auto;margin-top: 4px;}
    /*메인*/
    .main-slide-container h2{font-size: 36px; line-height: 44px; letter-spacing: -2px;}
    .main-slide:has(.main01){background-position-x: -90px;}
    .main-slide-cont{margin-top: 30px;}
    .main02 li{height: 150px;}
    .main02 li .content{padding-top: 80px ;}
    .main-slide-container p{padding-bottom: 60px;}
    .main03 li{width: calc(100%/3); height: 65px;}
    .main05 .notice li:nth-child(3){display: none;}
    .main05 .notice li{width: 47% !important; padding-bottom: 40px;}
    .main05 .notice ul{gap: 6% !important;}
    .main05 .notice li div{margin-top: 90px !important;}
    .main05 .notice{margin: 0 0 60px;}
    .main-slide.last-slide div{height: 130px;}
    .main-slide.last-slide h2{font-size: 20px; line-height: 1; margin-bottom: 15px;}
    .main-slide.last-slide p{font-size: 15px; margin-bottom: 10px; line-height: 1;}
    .main-slide.last-slide a{font-size: 15px;}
    .main-slide.last-slide .banner01, .main-slide.last-slide .banner02{padding-top: 30px;}
    .main-slide.last-slide{height: 260px;}
    /*푸터*/
    #ft #ft_wr .ft_cnt{font-size: 16px; line-height: 25px;}
    .main_footer #ft #ft_wr .ft_cnt p{font-size: 16px; line-height: 25px; padding-bottom: 20px;}
    #ft_wr{padding: 30px 20px 30px !important;}
    body #ft{margin-top: 80px;}
    .main_footer{align-items: flex-start; height: auto; min-height: 400px;}
    /*서브공통*/
    #container .header_img{height: 190px;padding-top: 70px; font-size: 30px; line-height: 127px;}
    .aboutus_title{font-size: 40px !important;}
    .aboutus_title::after{font-size: 20px !important;}
    #container .sub_menu{margin-bottom: 50px;}
    body #ft{height: auto; min-height: 400px;}
}