#ctt {padding: 0 !important;margin: 0 !important;} .container {max-width: 1380px !important;} .txt-black {color: var(--black);} .txt-gray {color: var(--c66);} /* 인사말 */ #greeting {position: relative;} #greeting .dummy {position: absolute;left: 0; bottom: 0;background-color: #f7f7f7;width: 100%;height: 64rem;z-index: 0;} #greeting .container {position: relative;display: flex; flex-direction: row;z-index: 1;padding-bottom: 18.7rem;} #greeting .left {} #greeting .right {flex: 1;margin-left: 100px;} #greeting .right p.title {font-size: 3.6rem;line-height: 5.2rem;color: #3a3a3a;margin-bottom: 11rem;} #greeting .right p.title strong {color: #0a4595;} #greeting .right p.content {font-size: 2rem;line-height: 3rem;color: #555555;margin-bottom: 6rem;} #greeting .right p.content strong {color: var(--black);} #greeting .right .sign {font-size: 2rem;} #greeting .right .sign span.sign_title {margin-right: 2rem;} /* 오시는길 */ #contact {} #contact .root_daum_roughmap_landing { width:100% !important; } #contact .wrap_controllers { display:none !important; } #contact .location {position: relative;top: -100px; z-index:2;} #contact .location .container {display: flex;flex-direction: row;justify-content: space-around;background-color: #ffffff;padding-top: 5rem;} #contact .location .container .item {flex:1;display: flex;flex-direction: column;justify-content: center;align-items: center;border-right: 1px solid #eaeaea;padding: 5rem 0;} #contact .location .container .item:last-child {border: none;} #contact .location .container .item i {display: flex;flex-direction: column;width: 40px;height: 40px;background-position: center center;background-repeat: no-repeat;margin-bottom: 3.1rem; flex-shrink:0; } #contact .location .container .item .ico-contact1 {background-image: url('../img/content/ico-contact01.png');} #contact .location .container .item .ico-contact2 {background-image: url('../img/content/ico-contact02.png');} #contact .location .container .item .ico-contact3 {background-image: url('../img/content/ico-contact03.png');} #contact .location .container .item .tit {margin-bottom: 2.4rem;font-size: 2rem;color: #010101;font-weight: 700;} #contact .location .container .item .info {font-size: 1.8rem;color: #3a3a3a;text-align: center;} /* 기술의개요 */ #techIntro {} #techIntro .container .content {font-size: 2rem;color: #3a3a3a;margin-bottom: 3rem;} #techIntro .container .content:last-child {} #techIntro .container .content strong {color: var(--black);} #techIntro .container .content strong.blue {color: #0a4595;} #techIntro .container > ul {display: flex;flex-direction: row;justify-content: space-around;padding-top: 6rem;} #techIntro .container > ul > li {flex: 1;display: flex;flex-direction: column;justify-content: start; padding-left: 5rem;border-right: 1px solid #eaeaea;} #techIntro .container > ul > li:first-child {padding: 0;} #techIntro .container > ul > li:last-child {border: none;} #techIntro .container > ul > li i {display: inline-block;width: 80px;height: 80px;background-position: center;background-repeat: no-repeat;margin-bottom: 1.6rem;} #techIntro .container > ul > li i.ico-techintro1 {background-image: url('../img/content/ico-techintro1.png')} #techIntro .container > ul > li i.ico-techintro2 {background-image: url('../img/content/ico-techintro2.png')} #techIntro .container > ul > li i.ico-techintro3 {background-image: url('../img/content/ico-techintro3.png')} #techIntro .container > ul > li i.ico-techintro4 {background-image: url('../img/content/ico-techintro4.png')} #techIntro .container > ul > li .tit {font-size: 2.4rem;color: var(--black);font-weight: 700;margin-bottom: 4rem;} #techIntro .container > ul > li .sub {font-size: 2.2rem;color: var(--c66);margin-bottom: 1.7rem;} #techIntro .addtion {line-height: 7rem;vertical-align: bottom;} #techIntro .addtion.percent {display: flex;flex-direction: row;align-items: baseline;} #techIntro .addtion.percent > span {display: inline-flex;align-items: baseline;} #techIntro .addtion .percent {font-family: var(--mont);font-weight: 700;font-size: 7rem;color: #0a4595;margin-right: 1.9rem;} #techIntro .addtion .percent small {font-size: 4rem;} #techIntro .addtion .txt {font-size: 2.2rem;font-weight: 700;color: #3a3a3a;vertical-align: bottom;} #techIntro .addtion img {vertical-align: bottom;margin-left: 0.7rem;height: auto;} #techIntro .addtion .box {align-items: center;justify-content: center;padding: 1rem 2rem;font-size: 2.2rem;font-weight: 700;color: #ffc600;background-color: #0a4595;border-radius: 1rem;} /* 신기술 개선사항 */ #techImprove {} #techImprove .list {display: flex;flex-direction: column;} #techImprove .list .item {display: flex;flex-direction: row;justify-content: space-between;padding: 5.2rem 5rem 5.2rem 6rem;margin-bottom: 1rem;background-color: #fafafa;border: 1px solid #dadada; align-items:start; } #techImprove .list .item:last-child {margin-bottom: 0;} #techImprove .list .item .left {flex: 1; display: inline-flex;flex-direction: column;justify-content: center; padding-right: 3rem; box-sizing:border-box; } #techImprove .list .item dt {font-size: 3rem;color: #0a4595;font-weight: 700;margin-bottom: 2.7rem;} #techImprove .list .item dt .num { display:block; font-size:6rem; color:var(--black); font-weight: 700; opacity:0.1; font-family: var(--mont); margin-bottom: 3rem; } #techImprove .list .item dd {font-size: 1.8rem;color: #333333;font-weight: 700;line-height: 2.3rem;} #techImprove .list .item .right { flex:1; padding-left: 5rem; box-sizing:border-box; position:relative; } #techImprove .list .item .right:before { content:""; display:inline-block; width:1px; height:calc(100% + (5.2rem * 2)); background:#dadada; position:absolute; left:0; top:-5.2rem; } #techImprove .list .item .right img { width:100%; } /* 신기술 구성요소 */ #tech_element {} #tech_element h3.tit {position: relative;display: flex;flex-direction: row;align-items: center;font-size: 3rem;color: #3a3a3a;font-weight: 400;margin-bottom: 3rem;gap: 1rem;} #tech_element h3.tit:before {position: absolute;top: -3rem;content: "";display: block;width: 8rem;height: 0.5rem;background-color: #959595;} #tech_element h3.tit strong.blue {color: #0a4595;line-height: normal;} #tech_element h3.tit img {vertical-align: middle;margin-left: } #tech_element .content {display: flex;background-color: #fafafa;padding: 5rem;padding-left: 6rem;} #tech_element .content .txtbox {flex: 1;display: flex;flex-direction: column;} #tech_element .content .element {position:relative;} #tech_element .content .txtbox .txt-tit {font-size: 2.6rem;color: #3a3a3a;font-weight: 700;border-bottom: 1px solid #dadada;padding-bottom: 2rem;margin-bottom: 4rem;max-width: 43rem;} #tech_element .content .txtbox .txt-tit small {font-size: 2.2rem;color: #888888;} #tech_element .content .txtbox .txt-list {display: flex;} #tech_element .content .txtbox .txt-list li {display: flex;flex-direction: row;align-items: stretch;color: #3a3a3a;font-size: 2rem;margin-bottom: 2rem;line-height: 2.6rem;} #tech_element .content .txtbox .txt-list li:before {content: ""; display: inline-block;width: 19px;height: 19px;background: url('../img/ico-check02.png') no-repeat;margin-right: 1rem;margin-top: 5px; flex-shrink:0; } #tech_element .content .element {flex: 1;display: flex;justify-content: space-between;} #tech_element .content .element-1 {position: relative;} #tech_element .content .element .label {display: flex;justify-content: center;align-items: center;background-color: #eaeaea;border-radius: 1rem;font-size: 1.8rem;text-align: center;padding-top: 1rem; padding-bottom: 1rem;color: #666666;} #tech_element .article01 {margin-bottom: 10rem;} #tech_element .article01 .content .txtbox .txt-list {flex-direction: column;} #tech_element .article01 .content .element .label {position: absolute;right: -20rem;bottom: 0;padding-left: 1.3rem;padding-right: 1.3rem} #tech_element .article02 {margin-bottom: 10rem;} #tech_element .article02 .content {flex-direction: column;padding-top: 7rem;padding-right: 9rem;} #tech_element .article02 .content .txtbox .txt-list li {margin-right: 5rem;} #tech_element .article02 .content .element {margin-top: 5rem;} #tech_element .article02 .content .element [class^=element] {display: flex;flex-direction: column;align-items: center; justify-content:start; } #tech_element .article02 .content .element .label {display: inline-flex;min-width: 17.2rem;padding-left: 1rem;padding-right: 1rem;} #tech_element .article02 .content .element .image {margin-top: 3rem;} #tech_element .article02 .content .element .element-1 {flex-basis: 30rem;} #tech_element .article02 .content .element .element-1 .image {margin-top: 0;margin-bottom: 1rem;} #tech_element .article02 .content .element .element-2 {flex-direction: column-reverse;justify-content: center;} #tech_element .article02 .content .element .element-3 {flex-direction: column-reverse;justify-content: center;} #tech_element .article02 .content .element .element-4 {flex-direction: column-reverse;justify-content: center;} #tech_element .article02 .content .element .element-5 {flex-direction: column-reverse;justify-content: center;} #tech_element .article03 {margin-bottom: 5rem;} #tech_element .article03 .content {padding-top: 7rem;padding-right: 8.4rem;} #tech_element .article03 .content .txtbox .txt-list {flex-direction: column;} #tech_element .article03 .content .element [class^=element] {display: flex;} #tech_element .article03 .content .element [class^=element] .label {margin-bottom: 1.5rem;} #tech_element .article03 .content .element .element-2 {flex-direction: column-reverse;} #tech_element .article03 .content .element .element-3 {flex-direction: column-reverse;} #tech_element .article04 .images {display: flex;flex-direction: row;gap: 5rem;} #tech_element .article04 .images figure {position: relative;} #tech_element .article04 .images figcaption {position: absolute;bottom: 0;left: 0;width: 100%;height: 5rem;background: rgba(0,0,0,0.5);color: #ffffff;display: flex;justify-content: center;align-items: center;font-size: 1.8rem;font-weight: 700;} /* 신기술의 차수의 원리*/ #tech_principle {} #tech_principle p.head_txt {font-size: 2rem;color: #3a3a3a;} #tech_principle p.head_txt strong {color: var(--black);} #tech_principle .left {flex: 1;} #tech_principle .right {flex: 1;} #tech_principle .article1 {display: flex;justify-content: center;margin-top: 2.1rem;margin-bottom: 6rem;padding: 5.9rem 0 4rem 0;background-color: #fafafa;border: 1px solid #eaeaea;} #tech_principle .article2 {display: flex;flex-direction: row;justify-content: space-between;gap: 5rem;} #tech_principle .article2 .left, #tech_principle .article2 .right {display: flex;flex-direction: column} #tech_principle .article2 span.tit {display: flex;justify-content: center;align-items: center;font-size: 2.4rem;background-color: #222222;color: #ffffff;text-align: center;height: 6rem;} #tech_principle .article2 .left > div.principle, #tech_principle .article2 .right > div.principle {display: flex;justify-content: center; align-items: center;height: 35.2rem;background-color: #fafafa;border: 1px solid #eaeaea;margin-bottom: 5rem;} /* 리핑병행 시공순서 */ #phasing {} #phasing h3.tit {position: relative;font-size: 3.6rem;color: #3a3a3a;font-weight: 400;margin-bottom: 6.2rem;} #phasing h3.tit:before {position: absolute;top: -3rem;content: "";display: block;width: 8rem;height: 0.5rem;background-color: #959595;} #phasing .content .list {display: flex;flex-direction: row;flex-wrap: wrap; margin-left: -2rem; } #phasing .content .list .item { width:33.33%; padding-left: 2rem; } #phasing .content .list .item:nth-child(-n+3) {margin-bottom: 50px;} #phasing .content .list .image {border: 1px solid #dadada;} #phasing .content .head {display: flex;flex-direction: row;align-items: center;margin-bottom: 2.5rem;} #phasing .content .head em.num {font-family: var(--mont);font-size: 4rem;font-weight: 700;color: #84a2ca;font-style: normal;} #phasing .content .head span {font-size: 2.2rem;color: #000000;font-weight: 700;margin-left: 2.4rem;} #phasing .content .caution {display: flex;flex-direction: column;justify-content: center;align-items: center;background: #fafafa;margin-top: 2rem;margin-bottom: 5rem;padding: 3.4rem 0;font-size: 3.6rem;color: #000000;font-weight: 700;} #phasing .content .caution p {display: flex;flex-direction: row;justify-content: center;align-items: baseline;} #phasing .content .caution i.ico-caution {display: block;width: 31px;height: 32px;background: url('../img/ico-caution.png');margin-right: 2rem;flex-shrink:0;} #phasing .content .images {display: flex;flex-direction: row;justify-content: space-between;} #phasing .content .images .item {} #phasing .content .images .item figure {position: relative;} #phasing .content .images .item figcaption {position: absolute;bottom: 0;display: flex;justify-content: center;align-items: center;width: 100%;height: 5rem;background-color: rgba(0,0,0,0.5);color: #ffffff;font-size: 1.8rem;font-weight: 700;} /* 시공순서 */ #sequence {} #sequence h3.tit {position: relative;font-size: 3rem;color: #3a3a3a;font-weight: 400;margin-bottom: 6.2rem;} #sequence h3.tit:before {position: absolute;top: -30px;content: "";display: block;width: 8rem;height: 0.5rem;background-color: #959595;} #sequence .content .list {display: flex;flex-direction: row; margin-left: -2rem; } #sequence .content .list .item { width:25%; padding-left: 2rem; box-sizing:border-box; } #sequence .content .list .image {border: 1px solid #dadada;} #sequence .content .head {display: flex;flex-direction: row;align-items: center;margin-bottom: 2.5rem;} #sequence .content .head em.num {font-family: var(--mont);font-size: 4rem;font-weight: 700;color: #84a2ca;font-style: normal;} #sequence .content .head span {font-size: 2.2rem;color: #000000;font-weight: 700;margin-left: 2.4rem;} #sequence .content .caution {display: flex;flex-direction: column;justify-content: center;align-items: center;background: #fafafa;margin-top: 2rem;margin-bottom: 5rem;padding: 3.4rem 0;font-size: 3.6rem;color: #000000;font-weight: 700;} #sequence .content .caution p {display: flex;flex-direction: row;justify-content: center;align-items:baseline;} #sequence .content .caution i.ico-caution {display: block;width: 31px;height: 32px;background: url('../img/ico-caution.png');margin-right: 2rem;flex-shrink:0;} /* 차수성 */ #waterproofness {} #waterproofness hr {display: block;border: none;border-bottom: 1px solid #dadada;margin: 7rem 0 7rem 0;} #waterproofness p.ment {font-size: 2rem;color: #3a3a3a;margin-bottom: 5rem;} #waterproofness h3.tit {font-size: 2.6rem;color: #3a3a3a;font-weight: 700;} #waterproofness h3.tit em.num {display: inline-flex;justify-content: center;align-items: center;background-color: #0a4595;border-radius: 50%;color: #ffffff;width: 50px;height: 50px;font-family: var(--mont);font-style: normal;margin-right: 2rem;font-size:2.2rem;} #waterproofness .table {display: flex;flex-direction: column;} #waterproofness .table .rows {display: flex;flex-direction: row;justify-content: space-between;align-items: center;} #waterproofness .table .rows:not(.head) {padding: 2rem 0 2rem 0;border-bottom: 1px solid #eaeaea;} #waterproofness .table .rows.head {background-color: #f7f7f7;overflow: hidden;color: #666666;font-size: 1.8rem;font-weight: 700;height: 5rem;} #waterproofness .table .rows.head:first-child {border-top-left-radius: 5rem;border-bottom-left-radius: 5rem;} #waterproofness .table .rows.head:first-child {border-top-right-radius: 5rem;border-bottom-right-radius: 5rem;} #waterproofness .table .column {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 1.8rem;color: #3a3a3a;} #waterproofness .table .rows:not(.head) .column {border-left: 1px solid #eaeaea;} #waterproofness .table .rows:not(.head) .column:first-child {border-left: none;} #waterproofness .table.non-border .column {border-left: none !important;} #waterproofness .article01 .image {padding: 3rem 0 8.5rem 0;text-align: center;} #waterproofness .article02 {margin-bottom: 5rem;} #waterproofness .article02 .table .column {flex-basis: 25%;} #waterproofness .article02 .table .column:first-child {flex-basis: 20%;} #waterproofness .article03 .table .rows.red .column {color: #de3d4c;font-weight: 700;} #waterproofness .article03 .table .column {flex-basis: 14.3%;} #waterproofness .article03 .table .column.colspan {flex-basis: 80%;align-items: flex-start;} #waterproofness .article03 .table .column:first-child {flex-basis: 25% !important;} #waterproofness .article03 .ment {font-size: 1.4rem;color: #de3d4c;margin-top: 1rem;} #waterproofness .article04 {margin-bottom: 6.5rem;} #waterproofness .article04 .content {padding-left: 8rem;} #waterproofness .article04 .ment {margin-top: 1rem;} #waterproofness .article04 .images {display: flex;flex-direction: row;justify-content: space-between;margin-top: 4rem;padding-right: 4rem;} #waterproofness .article05 {margin-bottom: 5rem;} #waterproofness .article05 .images {display: flex;flex-direction: row;justify-content: space-between;padding-left: 8rem;padding-right: 4rem;gap: 3rem;align-items: center;} #waterproofness .article06 .table .rows.red .column {color: #de3d4c;font-weight: 700;} #waterproofness .article06 .table .column {flex-basis: 25%;} #waterproofness .article06 .table .column.colspan {flex-basis: 80%;align-items: flex-start;} #waterproofness .article06 .table .column:first-child {flex-basis: 25% !important;} #waterproofness .article07 .content {padding-left: 8rem;margin-top: 1rem;} #waterproofness .article07 p {font-size: 2rem;color: #3a3a3a;} /* 안전성 */ #safety {} #safety hr {display: block;border: none;border-bottom: 1px solid #dadada;margin: 7rem 0 7rem 0;} #safety h3.tit-circle {font-size: 2.6rem;color: #3a3a3a;font-weight: 700; display:flex;align-items:baseline;} #safety h3.tit-circle em.num {display: inline-flex;justify-content: center;align-items: center;background-color: #0a4595;border-radius: 50%;color: #ffffff;width: 50px;height: 50px;font-family: var(--mont);font-style: normal;margin-right: 2rem; font-size:2.2rem;flex-shrink:0;} #safety h3.tit-line {position: relative;font-size: 3rem;color: #3a3a3a;font-weight: 400;margin-bottom: 6.2rem;margin-top: 3rem;} #safety h3.tit-line:before {position: absolute;top: -3rem;content: "";display: block;width: 8rem;height: 0.5rem;background-color: #959595;} #safety p.ment {font-size: 2rem;color: #3a3a3a;} #safety .table {display: flex;flex-direction: column;} #safety .table .rows {display: flex;flex-direction: row;justify-content: space-between;align-items: center;} #safety .table .rows:not(.head) {padding: 2rem 0 2rem 0;border-bottom: 1px solid #eaeaea;} #safety .table .rows.head {background-color: #f7f7f7;overflow: hidden;color: #666666;font-size: 1.8rem;font-weight: 700;height: 5rem;} #safety .table .rows.head:first-child {border-top-left-radius: 5rem;border-bottom-left-radius: 5rem;} #safety .table .rows.head:first-child {border-top-right-radius: 5rem;border-bottom-right-radius: 5rem;} #safety .table .column {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;font-size: 1.8rem;color: #3a3a3a;flex-shrink:0;} #safety .table .rows:not(.head) .column {border-left: 1px solid #eaeaea;} #safety .table .rows:not(.head) .column:first-child {border-left: none;} #safety .table.non-border .column {border-left: none !important;} #safety .table .rows .column:first-child { width:120px; flex:unset; } #safety .content {margin-left: 8rem;margin-top: 1rem;} #safety .article01 .images {display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 7rem;margin-top: 5rem;} #safety .article02 .images {display: flex;flex-direction: row;justify-content: center;align-items: center;gap: 7rem;margin-top: 5rem;} #safety .article06 { background:#fafafa; padding: 13rem 0 13rem; box-sizing:border-box; margin: 13rem 0 15rem; } #safety .article06 .lineBox { display:flex; align-items:start; margin-top: 7rem; } #safety .article06 .lineBox.first { margin-top: 0; } #safety .article06 .lineBox .img { width:880px; flex-shrink:0; } #safety .article06 .lineBox .right { width:600px; margin-left: -100px; padding-top: 2.4rem; box-sizing:border-box; flex-shrink:0; } #safety .article06 .lineBox .right .rtit { font-size:2.8rem; color:var(--blue); font-weight: 600; border-bottom: 1px solid #dadada; box-sizing:border-box; padding-left: 15rem; padding-bottom: 12px; margin-bottom: 2rem; } #safety .article06 .lineBox .right .list { padding-left: 22px; box-sizing:border-box; display:flex; } #safety .article06 .lineBox .right .list li { padding-left: 9px; box-sizing:border-box; width:50%; } #safety .article06 .lineBox .right .list li:first-child { } #safety .article06 .lineBox .right .list li img { box-shadow:5px 5px 35px 0 rgba(0, 0, 0, 0.15); } #safety .article07 .content {margin-left: 0;} .flow { } .flow .gallery-container { } .flow .category-buttons { display: flex; justify-content: center; margin-bottom: 20px; /* 메인 슬라이더와 간격 */ } .flow .category-buttons button { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; } .flow .category-buttons button:hover { background-color: #0056b3; } .flow .swiper-container { width: 100%; overflow: hidden; } .flow .gallery-main img, .flow .gallery-thumbs img { width: 100%; } .flow .gallery-thumbs .swiper-slide { cursor: pointer; } .flow .buttonOutter { } .flow .category-buttons { flex-wrap:wrap; margin-left: -5px; margin-top: -5px; } .flow .category-buttons button { display:inline-block; margin: 0; margin-left: 5px; margin-top: 5px; width:calc(20% - 5px); background:var(--blue); transition:all 0.5s; } .flow .slideOutter { background:#f7f7f7; padding: 5rem; box-sizing:border-box; margin: 0 auto; } .flow .slideOutter > .swiper-container { position:relative; } .flow .slideOutter > .swiper-container .swiper-slide img { max-height:800px; object-fit:contain; } .flow .thumbsOutter { /*padding: 1rem;*/ box-sizing:border-box; margin: 10px auto 0; } .flow .thumbsOutter .swiper-slide { transition:all 0.3s; } .flow .thumbsOutter .swiper-slide-thumb-active { opacity:0.3; } .flow .category-buttons button:hover { opacity:0.3; } .flow .category-buttons button.active { color:var(--yellow); } #instream.flow .category-buttons button, #roadwork.flow .category-buttons button { width:calc(33.33% - 5px); }