@charset "utf-8";



/* sub banner
--------------------------------------------------------------------------------------*/
.snav_box {position:relative; height:23rem; width:100%;} 
.snav_box .snav_banner {position:relative; width:100%; height:23rem; overflow:hidden; background-size:cover;}
.snav_box .snav_banner div {position:absolute; width:inherit; height:inherit; background-size:cover; animation:ani_banner 2s ease-in-out; z-index:0;}
@keyframes ani_banner{
	0%{transform:scale(1.1)}
	100%{transform:scale(1)}
}
.snav_box .snav_banner .sb01 {background:url(../img/sub/img_snav_banner_01.jpg) no-repeat center; background-size:cover;}
.snav_box .snav_banner .sb02 {background:url(../img/sub/img_snav_banner_02.jpg) no-repeat center; background-size:cover;}
.snav_box .snav_banner .sb03 {background:url(../img/sub/img_snav_banner_03.jpg) no-repeat center; background-size:cover;}
.snav_box .snav_banner .sb04 {background:url(../img/sub/img_snav_banner_04.jpg) no-repeat center; background-size:cover;}
.snav_box .snav_banner .sb05 {background:url(../img/sub/img_snav_banner_05.jpg) no-repeat center; background-size:cover;}

/* content
--------------------------------------------------------------------------------------*/
.content {padding:10vh 0;}
.content_2 {padding:10vh 0 0;}
.catalogue {height:72rem;}

/* title
--------------------------------------------------------------------------------------*/
.caption {display:block; margin-bottom:5vh; text-align:center; font-size:2rem; font-weight:600;}
.sbr {display:block; font-weight:300}

/* sub nav
--------------------------------------------------------------------------------------*/
.sb_menu_box {position:absolute; right:0; bottom:0; width:calc(50vw + 600px); height:60px; background-color:rgba(0, 0, 0, .5);}
.sb_menu_box .sb_sel_box {float:left; color:#fff; z-index:2;}
.sb_menu_box .sb_sel_box > * {float:left;}
.sb_menu_box .sb_sel_box .btn_home {display:block; width:60px; height:60px; font-size:0; text-indent:-999999px; background:#000 url(../img/sub/ico_home.gif) no-repeat center; background-size:60px;}
.sb_menu_box .sb_sel_box .menu_select_box {position:relative;}
.sb_menu_box .sb_sel_box .menu_select_box {overflow:hidden;}
.sb_menu_box .sb_sel_box .menu_select_box > * {float:left; display:block; padding:0 1.5rem; width:200px; height:60px; line-height:60px; color:#fff;}
.sb_menu_box .sb_sel_box .menu_select_box .menu_bar {position:relative; background-color:#0058a3; z-index:1;}
.sb_menu_box .sb_sel_box .menu_select_box .select_bar {position:relative; text-align:center; border-right:1px solid rgba(255, 255, 255, .2); cursor: pointer;}
.sb_menu_box .sb_sel_box .menu_select_box .select_bar.on {color:#4dc1ff; /* background-color:#2c98d7; */}
.sb_menu_box .sb_sel_box .menu_select_box .select_bar.on::before {content:""; display:block; position:absolute; top:0; left:0; width:100%; height:4px; background-color:#3bbbff;}
.menu_select_box .list {display:none; position:absolute; top:60px; left:0; width:100%; border:2px solid #ccc; border-width:0 2px 2px 2px; background-color:#fff; z-index:3;}
.menu_select_box .list li {height:50px; line-height:50px;}
.menu_select_box .list li a {display:block; padding:0 10px; border-bottom:1px solid #ddd;}
.menu_select_box .list li a:hover {background-color: #d8edfb;}
.menu_select_box .list li:last-child a {border-bottom:0;}


/* 인사말 이미지
--------------------------------------------------------------------------------------*/
.idea_box {margin:5rem auto 3rem; width:692px; background:url(../img/sub/img_idea.jpg) no-repeat 0 top; background-size:692px;}
.idea_box p {float:left; padding-top:305px; width:33.33%; font-size:1.5rem; text-align:center;}
.idea_box p.safety {padding-left:3rem; color:#2081ba;}
.idea_box p.quality {color:#249119;}
.idea_box p.environment {padding-right:3rem; color:#9d7e54;}
.cont_t {line-height:1.8; font-weight:300; font-size:1.1rem;}
.sign {margin:30px 0 0; font-size:1.1rem; text-align:right;}

/* 조직도
--------------------------------------------------------------------------------------*/
.img_chart {display:block; margin:3rem auto; width:700px;}

/* 오시는 길
--------------------------------------------------------------------------------------*/
.map_box {margin-top:5vh; height:700px; background-color:#ddd;}
.map_box .kakao_map {width:100%; height:100%;}


/* 인증형황
--------------------------------------------------------------------------------------*/
.certi_box, .exe_box {margin-top:3rem; padding:4rem 0; background:#e9ebf0 url(../img/sub/img_pattern.png) repeat 0 0;}
.exe_box {margin:3rem 0;}
.ul_patent {text-align:center;}
.ul_patent li {display:inline-block; width:30%;}
.ul_patent li img {display:block; width:100%; box-shadow:15px 15px 30px rgb(0, 0, 0, .1);}
.ul_patent li strong {display:block; margin-top:3vh;}

.tb1.mb {display:none;}

/* 온라인 문의
--------------------------------------------------------------------------------------*/
.item_enclosure {padding:2rem 0 4rem 18px; border-top:1px solid #ddd; font-size:15px; color:#a86c57; font-weight:300; text-indent:-18px; line-height:1.3;}
.item {margin-bottom:15px; width:100%;}
.item.w1 {float:left; width:49%;}
.mg {margin-right:2%;}
.item label {display:block; margin-bottom:10px;}
.item em {display:inline-block; margin-right:2px; color:#f7691c;}
.btn_bottm {padding:3rem 0; text-align:center;}
.btn_bottm a {display:inline-block; padding:0 2vh; margin:0 5px; height:45px; line-height:45px; width:150px; color:#fff; border-radius:3px;}
.btn_send {background-color:#f19c1e;}
.btn_reset {background-color:#8f8f8f;}


/* 공법소개 플로우
--------------------------------------------------------------------------------------*/
.flow_box {margin:2rem 0 5rem; padding:3rem; background-color:#f4f4f4;}
.flow_box .col {position:relative; float:left; width:33.33%; z-index:1;}
.flow_box .col .box {position:relative; display:block; margin:0 auto 3rem; padding:1rem; width:15rem; min-height:73px; line-height:1.3; color:#fff; text-align:center; font-size:1rem; font-weight:300; border-radius:5px;}
.flow_box .col.first .box::after {content:""; display:block; position:absolute; left:50%; bottom:-37px; margin-left:-19px; width:29px; height:29px; background:url(../img/sub/img_flow_plus.png) no-repeat 0 0; background-size:29px;}
.flow_box .col .box.st1 {background-color:#4ca65d;}
.flow_box .col .box.st2 {line-height:40px; background-color:#44a47c;}
.flow_box .col .box.st3 {margin-bottom:0; background-color:#316b62;}
.flow_box .col .box.st3::after {width:0; height:0; background-image:none;}
.flow_box .col .box.st4 {margin-top:1.5rem; padding:1rem 2rem; min-height:110px; background-color:#4488a4;}
.flow_box .col .box.st5 {margin-bottom:0; padding:2rem; min-height:110px; background-color:#449ca4;}
.flow_box .col .box.st6 {margin-top:1.5rem; padding:2rem; min-height:110px; background-color:#4473a4;}
.flow_box .col .box.st7 {margin-bottom:0; padding:2rem; min-height:110px; background-color:#415887;}
.flow_box .col .box li {margin-top:5px; padding-left:6px; font-size:1rem; text-align:left; font-weight:300; text-indent:-6px;}
.flow_box .col .box li:first-child {margin-top:0;}
.flow_box .col .box li::before {content:"·"; display:inline-block; margin-right:5px; vertical-align:middle;}
.flow_arr::after {content:""; position:absolute; top:50%; right:-55px; display:block; margin-top:-45px; width:143px; height:88px; background:url(../img/sub/img_flow_arrow.png) no-repeat 0 0; z-index:-1;}
.st4.flow_arr::after, .st5.flow_arr::after {right:-123px;}

.topic {display:block; margin:1.5rem 0; padding-left:22px; font-size:1.1rem; font-weight:600; background:url(../img/sub/bl.png) no-repeat 0 center; background-size:18px;}
.topic.st2 {display:block; margin:0 auto 1.5rem; width:1200px; font-size:1.1rem; font-weight:600; background:url(../img/sub/bl.png) no-repeat 0 center; background-size:18px;}
.img_st0 {display:block; margin:0 auto; width:100%;}
.img_st1 {display:block; margin:0 auto; width:70%;}
.img_st2 {display:block; margin:0 auto; width:50%;}
.img_st3 {display:block; margin:0 auto; width:80%;}
.md_con_box {padding:3rem; background-color:#f0f3f5;}
.md_con_box .md_part {margin-bottom:4rem;}
.md_con_box .md_part .col {float:left; overflow:hidden; margin-left:4%; width:48%; border-radius:10px; background-color:#fff; box-shadow:5px 5px 20px rgba(11, 47, 132, .1);}
.md_con_box .md_part .col:first-child {margin-left:0;}
.md_con_box .md_part .col strong {display:block; height:3rem; line-height:3rem; text-align:center; background-color:#f4f5f6;}




/* 공법적용
--------------------------------------------------------------------------------------*/
.ul_exe_box li {position:relative; float:left; margin:0 0 5% 5%; width:30%; border-radius:10px; background-color:#fff; box-shadow: 0px 0px 49px 0px rgba(11, 47, 132, 0.2); z-index:1;}
.ul_exe_box li:nth-child(1), .ul_exe_box li:nth-child(4), .ul_exe_box li:nth-child(6) {margin-left:0;}
.ul_exe_box li:nth-child(6), .ul_exe_box li:nth-child(7), .ul_exe_box li:nth-child(8) {margin-bottom:0;}
.ul_exe_box li.wd {width:65%;}
.ul_exe_box li strong {display:block; height:3rem; line-height:3rem; text-align:center; border-radius:10px 10px 0 0; background-color:#f4f5f6;}
.ul_exe_box li span {display:block; padding:1rem 1.7rem; height:6rem; line-height:1.3; font-weight:300; border-radius:0 0 10px 10px; background-color:#fff;}
.ul_exe_box li img {display:block; /* height:16rem; */ background-color:#ddd;}
.ul_exe_box .img_tow {position:relative; overflow:hidden; /* height:16rem; */}
.ul_exe_box .img_tow img {float:left; width:50%;}
.ul_exe_box .img_tow span {position:absolute; bottom:0; padding:0; width:50%; height:2.5rem; line-height:2.5rem; color:#fff; text-align:center; font-size:1rem; border-radius:0; background-color:rgba(0, 0, 0, .5);}
.ul_exe_box .img_tow span.txt1 {left:0;}
.ul_exe_box .img_tow span.txt2 {right:0;}

.ul_exe_box li::after {content:""; position:absolute; top:50%; right:-55px; display:block; margin-top:-45px; width:143px; height:70px; background:url(../img/sub/img_flow_arrow.png) no-repeat 0 0; background-size:100% 100%; z-index:-1;}
.ul_exe_box li.bottom::after {content:""; position:absolute; top:auto; left:50%; right:auto; bottom:-55px; margin-top:0; margin-left:-45px; width:70px; height:143px; background:url(../img/sub/img_flow_arrow_down.png) no-repeat 0 0; background-size:100% 100%; z-index:-1;}
.ul_exe_box li.left::after {content:""; position:absolute; left:-55px; right:auto; background:url(../img/sub/img_flow_arrow_left.png) no-repeat 0 0; background-size:100% 100%; z-index:-1;}
.ul_exe_box li.none::after {width:0; height:0; background:transparent;}


/* 특허 이미지 팝업
--------------------------------------------------------------------------------------*/
.modal_img {position:relative; cursor:pointer;}
.pup_modal {display:none; position:fixed; top:0; left:0; padding:2% 0; width:100%; height:100vh; z-index:500;background-color: rgba(0, 0, 0, .7);}
.pup_modal .modalBox {margin:0 auto; width:max-content; height:100vw;}
.pup_modal .modalBox img {display:block; height:100%;}
.btn_close {position:absolute; right:32px; top:32px; width:32px; height:32px; opacity:0.3;}
.btn_close:hover {opacity:1;}
.btn_close:before, .btn_close:after {position:absolute; left:15px; content:' '; height:33px; width:2px; background-color:#333;}
.btn_close:before {transform:rotate(45deg);}
.btn_close:after {transform:rotate(-45deg);}
.txt_enclosure {position:absolute; bottom:-45px; left:0; padding:13px 0 0; line-height:1.3; font-size:14px; color:#f76b00; font-weight:300;}

.flipbook::after {content:"책장을 넘길수 있습니다 →"; display:block; position:absolute; top:15px; right:70px; padding:10px 25px; font-size:15px; color:#fff; border-radius:50px; background-color:rgba(0, 0, 0, .5); animation:explain 1s infinite; z-index:20;}
@keyframes explain {
	0%{right:70px;}
	50%{right:80px;}
	100%{right:70px;}
}


.tb1.txh td{height:9rem;}
.tb1.txh .tb_last td {height:auto;}
.tb1 td.pst_img {padding:2rem;}