/* include 공통 CSS */


/************************* header_inc 시작*************************/


.header_t			{width:100%; margin:0 auto; height:100px; position:absolute; left:0; top:0px; z-index:99; background:transparent; -webkit-transition: all 300ms ease-out;-moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out;	transition: all 300ms ease-out; border-bottom: 1px solid rgba( 255, 255, 255, 0.1);}
	
.head_inner{position:relative; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content: space-between; padding: 0 0 0 40px; }
	
.head_logo{  }
.head_logo .w_logo {display: block; position:relative; width: 100%; max-width: 178px;}
.head_logo .c_logo {display: none; width: 100%; max-width: 178px; }
.header_gnb_bg{ height: 100px; }
.head_right{ }
.hr_nav{ align-items: center; margin-right: 60px; }
.hr_nav a{ font-size: 14px; color: var(--w-color); line-height: 1; text-transform: uppercase;}
.hr_nav span{ display: block; width: 1px; height: 10px; background-color: var(--w-color); margin: 0 15px; }

/* 햄벅 */
.mo_nav				{ display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; }
.mo_nav *{ -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; transition: all 300ms ease-out;}
.mo_nav .navbar-toggle { position: relative; padding: 0;  background-color: transparent; background-image: none;  border: 0;}
.mo_nav .navbar-toggle:focus { outline: 0;}
.mo_nav .navbar-toggle .icon-bar {background: var(--w-color); display:block; width:20px; height:2px; }
.mo_nav .navbar-toggle .icon-bar + .icon-bar { width:15px; height:2px; margin: 6px 0 0 auto;}
.mo_nav .navbar-toggle .icon-bar + .icon-bar + .icon-bar{ width:20px; height:2px; margin-top:6px; }

.mo_nav:hover .navbar-toggle .icon-bar								{transform:translateX(5px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar		{transform:translateX(16px);}
.mo_nav:hover .navbar-toggle .icon-bar + .icon-bar + .icon-bar		{transform:translateX(3px);}


/* header-fixed style */
.f-nav{width:100%; padding:0; height:100px; background: var(--w-color);  box-shadow:1px 1px 10px rgba(0,0,0,0.05); position: fixed;}
.f-nav .head_logo .w_logo{display: none;}
.f-nav .head_logo .c_logo{display: block;}
.f-nav .menu .major > ul > li > a{ color: var(--font-m-color);}
.f-nav .menu .major > ul > li + li > a::before{ background: var(--bg-color);}
.f-nav .mo_nav .navbar-toggle .icon-bar{ background: var(--main-color);}
.f-nav .hr_nav a{ color: var(--font-b-color);}
.f-nav .hr_nav span{ background-color: var(--font-b-color);}


@media(max-width: 1300px){
	.hr_nav{ display: none;}
}
@media(max-width: 900px){
	.f-nav{ height: 80px;}
	.head_inner{ padding: 0 0 0 5%;}
	.header_gnb_bg{ display: none;}
	.head_logo .w_logo, .head_logo .c_logo{ max-width: 148px;}
	.mo_nav{ width: 80px; height: 80px; s}
}

/************************* header_inc 끝 *************************/

/************************* sub 시작 *************************/

/* sub_visual&title */
.sv_inner{ color: var(--w-color); padding-top: 70px;}
.sv_tnavi ul{ display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
.sv_tnavi ul li{ font-size: 14px; line-height: 1; }
.sv_tnavi ul li::after{ content: ""; display: inline-block; vertical-align: middle; width: 2px; height: 2px; margin: 0 8px; background-color: var(--w-color);}
.sv_tnavi ul li:last-child::after{ display: none;}
.sv_title h1{ font-size: 50px; line-height: 1; font-weight: 700;}
.sv_title p{ font-size: 20px; line-height: 1.6; margin-top: 20px;}

.sub_title_navi, .sub_tab{ display: none; }

.sub_bcon .sub_round{ position: relative; padding-top: 135px; text-align: center; z-index:-1;}
.sub_bcon .sub_round::before{ content: ""; display: block; width: 40px; height: 40px; background-color: var(--main-color); position: absolute; left: 50%; top: -23px; border-radius: 50%; transform: translate(-50%,0); opacity: .5;}
.sub_bcon .sub_round::after{ content: ""; display: block; width: 40px; height: 40px; background-color: var(--main-color); position: absolute; left: 50%; top: -23px; border-radius: 50%; transform: translate(-50%,0);   }
.sub_bcon .sub_round.dot::before{ animation: doton 2s infinite; }

@keyframes doton {
    0%{
        transform: translate(-50%,0) scale(1); opacity: .5;
    }
		100%{
        transform: translate(-50%,0) scale(3); opacity: 0;
    }
}

@media(max-width: 1080px){
	.sv_inner{ top: 375px; left: 35px; right: 35px; }
	.sv_title h1{ font-size: 44px; }
	.sv_title p{ font-size: 18px; margin-top: 15px; }
	.sv_tnavi ul{ margin-bottom: 55px; }
}
@media(max-width: 780px){
	.sub_bcon .sub_round{ padding-top: 100px;}
	.sv_inner{ top: 375px; left: 35px; right: 35px; }
	.sv_title h1{ font-size: 38px; }
	.sv_title p{ font-size: 16px; margin-top: 10px; }
	.sv_tnavi ul{ margin-bottom: 45px; }
}
@media(max-width: 500px){
	.sv_inner{ top: 280px; left: 25px; right: 25px; }
	.sv_title h1{ font-size: 30px; }
	.sv_title p{ font-size: 13px; margin-top: 10px; }
	.sv_tnavi ul{ margin-bottom: 35px; }
	.sv_tnavi ul li{ font-size: 13px; }
}
/*  */

/* sub_content */
.sub_wrap{ position: relative; }
.sub_inner{ max-width: 1240px; margin: 0 auto;}
.sb_pding_b{ padding-bottom: 135px; }
.sub_con{ position: relative; width: 100%; }
.sub_bg{ background-color: var(--bg-color1);}
.sub_bg1{ background-color: var(--w-color);}
.sc_pding{ padding-top: 100px; padding-bottom: 100px;}
.sc_pding_b{ padding-bottom: 100px;}
.sc_in_content{ margin-top: 50px; padding: 30px;}
.sb_title{ margin-bottom: 80px;}
.sb_tit{ display: inline-block; font-size: 40px; font-weight: 700; line-height: 1; position: relative; text-transform: uppercase; }
.sb_tit::before{ content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; background-color: var(--font-m-color); position: absolute; right: -10px; bottom: 5px; }
.sb_txt{ font-size: 17px; line-height: 26px; font-weight: 500; color: var(--font-b-color); margin-top: 20px;}
.sc_title{ margin-bottom: 50px; }
.sc_tit{ font-size: 30px; font-weight: 600; line-height: 34px; margin-bottom: 15px; font-family: var(--font-noto);}
.sc_txt{ color: var(--font-b-color); font-family: var(--font-noto);}
.sc_name{ font-size: 20px; font-weight: 500; line-height: 1; padding-top: 90px; }
.sc_name strong{ font-size: 22px; font-weight: 600; }
.sub_con .sc_tit1{ line-height: 1; position: relative; display: inline-block; }
.sub_con .sc_tit1::after{ content: ""; display: block; width: 7px; height: 7px; border-radius: 7px; background: var(--main-color); position: absolute; bottom: 0; right: -10px; }
.sub_con i{ font-size: 24px; color: var(--main-color);}
.info .ss_txt{ margin-top: 15px; }
.ss_tit{ font-size: 18px; font-weight: 600; line-height: 1; font-family: var(--font-noto);}
.ss_txt{ color: var(--font-b-color); font-family: var(--font-noto); }
.sline_tit{ font-size: 20px; font-weight: 600; line-height: 1; font-family: var(--font-noto);}
.sline_tit strong{ font-size: 22px; font-weight: 700; color: var(--main-color); font-family: var(--font-jost);}
.sline_title .sline{ display: block; background-image: linear-gradient(to right, #004729, #02be6e, #afe2cc); width: 40px; height: 3px; margin: 20px 0;}
.sline_title2{ position: relative; width: 80%; margin: 0 auto -30px; background: var(--main-color); border-radius: 10px; text-align: center; padding: 20px 0; color: var(--w-color); z-index: 1;}
.sline_title2::before{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--w-color); border: 2px solid var(--main-color); position: absolute; left: -4px; top: 25px;}
.sline_title2::after{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--w-color); border: 2px solid var(--main-color); position: absolute; right: -4px; top: 25px; }
.sline_tit2{ font-size: 17px; font-weight: 600; line-height: 1; text-transform: uppercase;}
.sline_tit2 strong{ font-size: 19px; font-weight: 700;  }


/* link_button */
.link_wrap{ position: relative; z-index: 1; }
.sub_link{ position: relative; display: block; overflow: hidden; font-size: 17px; width: 100%; max-width: 340px; height: 60px; text-align: center; line-height: 57px; font-weight: 500; color: var(--main-color) !important; border-radius: 10px; border: 2px solid var(--main-color); margin: 0 auto; transition: all .4s;}
.sub_link span{ position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: var(--main-color); transition: width 0.4s ease-in-out, height 0.4s ease-in-out; transform: translate(-50%, -50%); z-index: -1;}
.sub_link:hover { color: var(--w-color) !important;}
.sub_link:hover span{ width: 225%; height: 560px;}
.sub_link:active{ background-color: var(--main-color);}


/* table */
.sub_table{ border-top: 2px solid var(--font-m-color); }
.sub_table .st_tr{ width: 100%; display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line-color); padding: 25px 0; line-height: 1; align-items: center; }
.sub_table .st_th{ width: 200px; font-size: 20px; font-weight: 600; display: flex; align-items: center; padding-left: 25px; }
.sub_table .st_th i{ margin-right: 10px; }
.sub_table .st_td{ width: calc( 100% - 200px); font-size: 17px;  color: var(--font-b-color); padding-right: 15px; }


/* s11 */
.s11 .sub_img{ position: relative; width: 100%; height: 550px; margin-bottom: -30px;}
.s11 .sub_img .simg_bg{ position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background: url("img/s11_img01.jpg") no-repeat center; transition: all .6s ease-out; background-size: cover;  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); opacity: 1;}
.s11 .sub_con::before{ content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 370px; background-color: var(--bg-color1); clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 0% 0%);  z-index: -1;}
.s11 .sub_con::after{ content: ""; display: block; position: absolute; bottom: 0; right: 0; z-index: -2; background-color: var(--main-color); width: 100%; height: 275px; clip-path: polygon(0% 100%, 100% 0, 100% 100%, 0% 0%);}

/* s12 */
.s12 .sub_con.flex > div{ width: 50%; margin-top: 50px;}
.s12 .sc_tit{ line-height: 1.4;}

/* s13_history */
.s13 .sub_img{ position: relative; width: 100%; height: 550px;}
.s13 .sub_img .simg_bg{ position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background: url("img/s13_img01.jpg") no-repeat center; transition: all .6s ease-out; background-size: cover;  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); opacity: 1;}

.s13 .sub_con::before{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; position: absolute; left: 21.5%; top: 0; z-index: 1; background: var(--font-s-color);}
.sub_con .history::before{ content: ""; display: block; width: 1px; height: 100%; background: var(--line-color); position: absolute; left: 21.8%; top: 0;}
.year{ padding-top: 60px;}
.year .sc_title{ width: 10%; margin-right: 30px;}
.year .sc_title .sc_tit{ font-size: 32px; font-weight: 700; margin-bottom: 0; padding-top: 10px; font-family: var(--font-jost);}
.year .md{ width: 20%; margin-top: 25px;}
.year .md span{ position: relative; display: block; width: 100%; height: 1px; background: var(--line-color); }
.year .md span::before{ content: ""; display: block; width: 6px; height: 6px; background: var(--font-s-color); position: absolute; right: 0; top: 49%; transform: translateY( -49% ); margin: 0 0 0 auto;}
.year .md span::after{ content: ""; display: block; width: 15px; height: 15px; background: var(--w-color); border: 3px solid var(--main-color); border-radius: 50%; left: 0; top: 50%; transform: translateY( -50% );  }
.year .rg{ width: 70%; margin-left: 35px; }
.year .rg ul li{ padding: 15px 0 25px; flex-flow: row wrap; }
.year .rg .sline_tit{ width: 70px; font-size: 17px; font-weight: 600; position: relative; padding-left: 15px; }
.year .rg .sline_tit::before{ content: ""; display: block; width: 4px; height: 4px; background: #999; position: absolute; left: 0; top: 13px; }
.year .rg .info{ width: calc( 100% - 70px); margin-bottom: 5px; color: var(--font-b-color); padding-left: 20px;}
.year .rg .info .ss_txt{ margin-top: 0; position: relative; padding-bottom: 5px; }



/* s21_start */
.s21 .sub_img{ position: relative; width: 100%; height: 550px;}
.s21 .sub_img .simg_bg{ position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background: url("img/s21_img01.jpg") no-repeat center; transition: all .6s ease-out; background-size: cover;  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); opacity: 1;}

/* s21_주요인력보유_diagram */
.s_diagram{ justify-content: space-between; align-items: center;}
.s_diagram .sd_g1, .s_diagram .sd_g3{ width: 37%;}
.s_diagram .sd_g2{ position: relative; width: 22%; text-align: center; border-radius: 50%; background: var(--main-color); color: var(--w-color); padding: 100px 0;}
.s_diagram .sd_g2::before{ content: ""; display: block; width: 112%; height: 112%; position: absolute; top: -6%; left: -6%; border: 3px dotted var(--main-color); border-radius: 50%;  }
.s_diagram .sd_g2::after{ content: ""; display: block; background: url("img/s21_diagram_line1.png") no-repeat; width: 329px; height: 213px; position: absolute; top: 30px; left: -28px; z-index: 1;}
.s_diagram .sd_g2 > div{ font-size: 22px; line-height: 34px; font-weight: 600; }
.s_diagram .sd_g2 > div strong{ font-size: 40px; font-weight: 700; }
.s_diagram .sd_ginfo{ background: var(--w-color); box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.1); padding: 40px 60px; border-radius: 85px; width: 100%; align-items: center; position: relative; }
.s_diagram .sd_ginfo:nth-child(1){ margin-bottom: 60px; }
.s_diagram .sd_ginfo .icon{ margin-right: 30px; }

/* s21_분석설계구축 */
.s_chart{ justify-content: space-between; align-items: center;}
.sch_art{ text-align: center;}
.sch_art div{ border-radius: 10px;  }
.sch_a1{ width: 20%;  align-items: center;}
.sch_a1 .ss_tit{ width: 100%; max-height: 200px;  background: var(--main-color); color: var(--w-color); font-weight: 500; line-height: 1.6; padding: 30px 0 30px 10px;}
.sch_a1 i{ font-size: 25px; margin-left: 15px; }
.sch_a2{ width: 17%; height: 200px; flex-wrap: wrap; align-content: space-between;}
.sch_a2 .ss_txt{ width: 100%; background: var(--w-color); border: 1px solid var(--main-color); padding: 30px 0; font-weight: 500; }
.sch_a3{ width: 60%;}
.sch_a3_box{ justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.sch_a3_box::after{ content: ""; display: block; width: 55%; height: 1px; background: var(--line-color); position: absolute; top: 25px; left: 25%; z-index: -1; }
.sch_a3_box div{ width: 22%; border: 1px solid var(--line-color); background: var(--w-color); padding: 12px 0; color: var(--font-b-color);}
.sch_a3_box div:nth-child(1){ width: 30%;  color: var(--w-color); background: var(--main-color); border: 1px solid var(--main-color); }
.sch_a3_box:nth-child(2){ margin: 20px 0;}

.sc_list_wrap ul{ height: 350px;  flex-flow: row wrap; align-content: space-between; font-family: var(--font-noto);}
.sc_list_wrap ul li{ position: relative; width: 15%; border-radius: 5px; background: var(--w-color); border: 1px solid var(--main-color); font-size: 15px; color: var(--font-b-color); text-align: center; line-height: 1; padding: 20px 0; margin-right: 23px;}
.sc_list_wrap ul li::before{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--w-color); border: 2px solid var(--main-color); position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto; }
.sc_list_wrap ul li:nth-child(6n){ margin-right: 0;}
.sc_list_wrap ul li:nth-child(odd){ background: var(--main-color); color: var(--w-color);}
.sc_list_wrap ul li:last-child{ width: 32%;}

/* s21_프로젝트 운영 */
.sc_list_box{ justify-content: space-between; }
.sc_list_box > div{ width: 48%;}
.sc_box_info{ background: var(--w-color); border: 1px solid var(--line-color); box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.1);}
.sc_box_info ul{ flex-flow: row wrap; justify-content: space-between; align-items: center; padding: 60px 110px 30px;}
.sc_box_info ul li{ position: relative; padding-left: 12px;}
.sc_box_info ul li::before{ content: "·"; display: block; font-size: 15px; color: var(--font-b-color); position: absolute; left: 0; top: 0px; }
.sc_box2 .sc_box_info ul li{ width: 30%; }

.s_diagram2{ justify-content: space-between; align-items: center; margin-top: 50px; }
.sdg2_1{ position: relative; width: 23%; max-width: 270px; height: 270px; text-align: center; border-radius: 50%; padding: 60px 28px; box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.1); background: var(--w-color);}
.sdg2_3{ background: var(--main-color); color: var(--w-color);}
.sdg2_3 .ss_txt{ color: var(--w-color);}
.sdg2_info{ flex-direction: column; align-items: center; justify-content: center;}
.sdg2_info .icon{ margin-bottom: 15px; }
.sdg2_info .ss_txt{ line-height: 1.3; }

/* s21_품질관리 */
.s_chart4{ padding: 30px;}
.sch_r1 .sch_a3_box div{ width: 23%; color: var(--w-color); background: var(--main-color); border: 1px solid var(--main-color); position: relative; margin-bottom: 38px; font-weight: 500;}
.sch_r1 .sch_a3_box div::after{ content: ""; display: block; width: 1px; height: 40px; background: var(--line-color); position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -40px; z-index: -1;}
.sch_r1 .sch_a3_box::after{ display: none;}
.sch_r1 .sch_a2{ width: 33%; height: 78px; margin: 40px auto 50px; position: relative;}
.sch_r1 .sch_a2::before{ content: ""; display: block; background: url("img/s21_4_line1.png") no-repeat; width: 15px; height: 164px; position: absolute; left: 0; right: 0; margin: 0 auto; bottom: -45px; }
.sch_r1 .sch_a2 .ss_txt{ padding: 25px 0; position: relative; border-radius: 25px;}
.sch_r1 .sch_a2 .ss_txt::before{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--w-color); border: 2px solid var(--main-color); position: absolute; top: -5px; left: 0; right: 0; margin: 0 auto;}
.sch_r1 .sch_a2 .ss_txt::after{ content: ""; display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--w-color); border: 2px solid var(--main-color); position: absolute; bottom: -5px; left: 0; right: 0; margin: 0 auto;}
.sch_line{ width: 77%; height: 1px; background: var(--line-color); margin: 0 auto;}
.sch_r2{ background: var(--w-color); border: 10px solid #f8f8f8; justify-content: space-between; padding: 30px; text-align: left; }
.sch_r2 > div{ width: calc( 100% / 5);}

/* s21_방향진행사업 */
.s21_5 .sc_list_box > div{ width: 30%; }
.s21_5 .sc_box .img{ width: 270px; height: 270px; border-radius: 100%; overflow: hidden; margin: 0 auto 30px; box-shadow: 0px 0px 25px rgba( 0, 0, 0, 0.2);}
.s21_5 .sc_list_box{ padding: 30px 30px 0;}
.s21_5 .sc_box_info ul{ padding: 60px 30px 30px; min-height: 260px;}
.s21_5 .sc_box_info ul li{ margin-bottom: 5px; }
.s21_5 .sub_bg{ padding: 30px;}
.sc_box_list ul{ flex-flow: row wrap; align-content: space-between;}
.sc_box_list ul li{ position: relative;  width: 48%; background: var(--w-color); border-radius: 5px; padding: 25px 30px; margin: 0 3% 3% 0; }
.sc_box_list ul li::before{ content: "·"; display: block; font-size: 15px; color: var(--font-b-color); position: absolute; left: 20px; top: 25px; }
.sc_box_list ul li:nth-child(2n){ margin-right: 0; }



/* s31_스마트도로경광판 */
.s31_2 .flex{ flex-wrap: wrap; align-items: center; justify-content: space-between;}
.s31_2 .flex > div{ position: relative; width: 50%;}
.s31_2 .sc_title{ padding-right: 10%;}
.s31_2 .ss_tit{ line-height: 1.6; font-weight: 500; margin-bottom: 30px; }
.sc_img_box{ position: relative;  }
.img_ani {position: relative; top: 0; left: 0; width: 35vw; height: 35vw; max-width: 620px; max-height: 620px; border-radius: 50%; overflow: hidden; transform: scale(0.8); opacity: 0;}
.img_ani .img_g{ position: relative; width: 100%; height: 100%; display: block;}
.s31_2 > div.sub_con:nth-child(even) .flex{ flex-direction: row-reverse;}
.s31_2 > div.sub_con:nth-child(even) .flex .sc_title{ padding-right: 0; padding-left: 10%; }


/* s32_스마트공간운영시스템 */
.s32 .sub_img{ position: relative; width: 100%; height: 550px;}
.s32 .sub_img .simg_bg{ position: absolute; left: 0; top: 0;  width: 100%; height: 100%; background: url("img/s32_img01.jpg") no-repeat center; transition: all .6s ease-out; background-size: cover;  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 0% 0%); opacity: 1;}

/* 주요기능 */
.s32_1 .sc_list_wrap ul{ height: auto; justify-content: space-between; }
.s32_1 .sc_list_wrap ul li{ width: 48%; margin-right: 0; margin-bottom: 30px; background: var(--w-color); color: var(--font-m-color); text-align: left; padding: 55px 50px;}
.s32_1 .sc_list_wrap ul li:nth-child(odd){ color: var(--font-m-color); }
.s32_1 .sc_list_wrap ul li:nth-child(2), .s32_1 .sc_list_wrap ul li:nth-child(3), .s32_1 .sc_list_wrap ul li:nth-child(6){ border: 1px solid var(--font-s-color); background: var(--bg-color1);}
.sc_list_wrap ul li:nth-child(2)::before, .sc_list_wrap ul li:nth-child(3)::before, .sc_list_wrap ul li:nth-child(6)::before{ border: 2px solid var(--line-color1);}
.s32_1 .sline_title{ padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid var(--line-color);}
.s32_1 .sline_title .icon{ margin-bottom: 30px; }
.s32_1 .ss_tit, .s32_2 .ss_tit{ line-height: 1.6; font-weight: 500; }
.s32_1 .ss_tit strong, .s32_2 .ss_tit strong{ font-weight: 500; color: var(--main-color); }

/* 기대효과 */
.s32-txt-fixed{font-size: 180px; font-weight: 700; position: absolute; color: var(--w-color); top:100px;left:50%; width: 1920px; transform:translateX(calc(50vw - 500px)); opacity:0.8;}
.s32_2 .flex{ flex-flow: row wrap; align-items: center; margin-bottom: 50px;}
.s32_2 .flex:nth-child(2n){ flex-direction: row-reverse;}
.s32_2 .flex:last-child{ margin-bottom: 0;}
.s32_2 .flex > div{ width: 50%; }
.s32_2 .flex .sline_title{ padding: 0 5%;}
.s32_2 .flex .sline_title .sline_tit{ margin-bottom: 25px; }
.s32_2 .flex img{ display: block; }

/* 상세기능설명 */
.s32_3 .sub_con.flex{ padding: 30px; margin-bottom: 50px;}
.s32_3 .sub_con.flex:last-child{ margin-bottom: 0;}
.s32_3 .sline_title{ width: 20%;}
.s32_3 .list_info_wrap{ width: 80%;}
.list_info_wrap{ justify-content: space-between; flex-flow: row wrap;}
.list_info_wrap > div{ width: 48%; padding: 25px 30px; border-radius: 5px; display: flex; align-items: baseline; margin-bottom: 25px; position: relative; }
.list_info_wrap > div .icon{ margin-right: 30px; }
.s32_3 .sub_bg .list_info_wrap > div{ background: var(--w-color); }
.s32_3 .sc_box_info .list_info_wrap > div{ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background: var(--bg-color2);}

.s32_4 .sc_list_box{ padding: 30px 0 0; flex-flow: row wrap; justify-content: center;}
.s32_4 .sc_list_box > div{ width: 30%; margin-bottom: 50px;}
.s32_4 .sc_list_box > div:nth-child(2){ margin: 0 50px;}
.s32_4 .sc_list_box > div:nth-child(4){ margin-right: 70px; }
.s32_4 .sline_title2{ width: 100%; padding: 20px; min-height: 115px; display: flex; align-items: center;}
.s32_4 .sline_tit2{ line-height: 1.4;}
.s32_4 .sline_title2::before, .s32_4 .sline_title2::after{ top: 50px;}

.s32_5 .sub_bg{ padding: 30px; }
.s32_5 .s_diagram2{ margin-top: 0;}
.s32_5 .sdg2_1::before{ content: ""; display: block; width: 88%; height: 88%; position: absolute; top: 6%; left: 6%; border: 3px dotted var(--main-color); border-radius: 50%;} 
.s32_5 .sdg2_3::before{ border: 3px dotted var(--w-color);}
.s32_5 .s_diagram2 .ss_tit{ font-family: var(--font-jost); line-height: 1.4;}
.s32_5 .s_diagram2 .ss_tit strong{ font-size: 40px; font-weight: 700; }

@media(max-width: 1800px){
	.sub *{ transition: all .3s ease; }
	.sub img{ display: block; width: 100%; }
	.s11 .sub_img, .s21 .sub_img{ margin-bottom: 50px;}
	.s11 .sub_img .simg_bg, .s13 .sub_img .simg_bg, .s21 .sub_img .simg_bg, .s32 .sub_img .simg_bg{ clip-path: polygon(95% 0%, 95% 95%, 3% 95%, 3% 0%) !important; }
	.s21_5 .sc_box .img img{ width: auto;}
	.icon img{ width: auto; }
}
@media(max-width: 1360px){
	.sc_list_wrap ul li{ margin-right: 2%; }
}

@media(max-width: 1300px){
	.sub_inner{ padding: 0 3%;}
	.root_daum_roughmap{ width: 100% !important; }
	.sub_table .st_th{ width: 150px; font-size: 18px; font-weight: 500; }
  .sub_con i{ font-size: 20px; }
  .sub_table .st_td{ width: calc( 100% - 150px); font-size: 16px; }
	.s13 .sub_con::before{ left: 22.7%;}
	.sub_con .history::before{ left: 23%;}

	.s_diagram .sd_ginfo{ padding: 10%;}
	.s_diagram .sd_g2{ width: 20%; padding: 80px 0;}
	.s_diagram .sd_g2::after{ width: 310px; height: 202px; top: 10px; left: -38px; background-size: 100%; }

	.sc_box_info ul{ padding: 10% 5% 5%;}
	.sdg2_1{ height: 220px; border-radius: 10px; padding: 3%; }
	.sdg2_2 img{ height: 50px;}
	.s32_5 .sdg2_1{ height: 100%;}
	.s32_5 .sdg2_3::before, .s32_5 .sdg2_1::before{ display: none;}
}

@media(max-width: 1180px){
	.s_diagram{ flex-flow: row wrap;}
	.s_diagram .sd_g2{ order: 0; width: 100%; padding: 3%; border-radius: 10px; margin-bottom: 3%; }
	.s_diagram .sd_g2::after{ display: none;}
	.s_diagram .sd_g2::before{ display: none;}
	.s_diagram .sd_g1, .s_diagram .sd_g3{ width: 48%; order: 1;}
}
@media(max-width: 1080px){
	.sb_title{ margin-bottom: 50px;}
	
	.sub_con .sc_tit1{ line-height: 1.4;}
	.sline_tit strong{ width: 20px;}
	.s11 .sub_img, .s13 .sub_img, .s21 .sub_img, .s32 .sub_img{ height: 400px; margin-bottom: 30px;}
	.year .rg ul li{ padding: 15px 0;}

	.s12 .sub_con.flex{ flex-direction: column;}
	.s12 .sub_con.flex > div{ width: 100%; margin-top: 3%;}
	.s12 .sub_table{ margin-top: 0 !important;}
	.s12 .sc_tit{ margin-bottom: 0;}

	.year .rg ul li{ padding: 15px 0;}
	.s_diagram .sd_ginfo .icon{ margin-right: 20px; }

	.s_chart{ flex-flow: row wrap;}
	.sch_a1{ width: 100%; margin-bottom: 3%;}
	.sch_a1 i{ display: none;}
	.sch_a1 .ss_tit{ max-height: 100%; padding: 3%;}
	.sch_a1 .ss_tit br{ display: none;}
	.sch_a2{ width: 20%;}
	.sch_a3{ width: 78%;}

	.sc_list_box{ flex-flow: row wrap;}
	.sc_list_box > div{ width: 100%; }
	.sc_list_box > div:nth-child(1){ margin-bottom: 3%; }
	.sc_box_info ul{ padding: 5% 5% 3%;}
	.sub .icon img{ width: auto; height: 45px;}

	.sch_r2{flex-flow: row wrap;}
	.sch_r2 > div{ width:48%; }
	.s21_5 .sc_list_box{ padding: 0;}
	.s21_5 .sc_list_box > div{ width: 48%;}
	.s21_5 .sc_box_info ul{ padding: 10% 5% 5%;  min-height: unset;}
	.s21_5 .sc_box .img{ width: 100%; height: auto; border-radius: 10px; margin: 0 auto 3%;}

	.img_ani{ width: 43vw; height: 43vw;}

	.s32_1 .sline_title{ margin-bottom: 20px; padding-bottom: 20px;}
	.s32_1 .sc_list_wrap ul li{ line-height: 1.6; padding: 5%;}
	.s32-txt-fixed{ font-size: 100px; transform: translateX(calc(50vw - 100px));}
	.s32_2 .flex > div{ width: 100%;}
	.s32_2 .flex:nth-child(2n){ flex-direction: unset;}
	.s32_2 .flex .sc_img_box { width: 50%;}
	.s32_2 .flex .sline_title{ padding: 5% 0;}

	.s32_4 .sc_list_box{ justify-content: space-between;}
	.s32_4 .sc_list_box > div{ margin: 0 0 3% 0;}
	.s32_4 .sc_list_box > div:nth-child(2), .s32_4 .sc_list_box > div:nth-child(4){ margin: 0 0 3% 0;}
	.s32_4 .sline_title2{ min-height: unset; margin: 0 auto;}
	.s32_4 .sline_title2::before, .s32_4 .sline_title2::after{ top: 45%;}
	.s32_4 .sc_box .img img{ width: 100%; }

}

@media(max-width: 780px){
	.sb_pding_b{ padding-bottom: 100px}
	.sc_pding_b{ padding-bottom: 10%;}
	.sc_pding{ padding-top: 10%; padding-bottom: 10%; }
	.sb_title{ margin-bottom: 6%;}
	.sb_tit{ font-size: 34px;}
	.sb_txt{ font-size: 15px; margin-top: 10px; line-height: 1.6;}
	.sc_tit{ font-size: 24px; line-height: 1.4; margin-bottom: 10px;}
	.sc_txt{ font-size: 15px; line-height: 1.6;}
	.sc_name{ font-size: 18px; padding-top: 60px;}
	.sc_name strong{ font-size: 20px; }
	.ss_tit{ font-size: 16px; line-height: 1.4;}
	.ss_txt{ font-size: 15px; line-height: 1.6;}
	.s_diagram .sd_g2 > div, .s32_5 .s_diagram2 .ss_tit{ font-size: 18px;}
	.s_diagram .sd_g2 > div strong, .s32_5 .s_diagram2 .ss_tit strong{ font-size: 32px;}
	.sline_tit{ font-size: 18px; line-height: 1.4;}
	
	.sline_tit2{ font-size: 15px; }
	.sline_tit2 strong{ font-size: 16px;}

	.sline_title2{ width: 100%; margin: 0 auto 10px;}
	.info .ss_txt{ margin-top: 3%;}
	.s11 .sub_img .simg_bg, .s13 .sub_img .simg_bg, .s21 .sub_img .simg_bg, .s32 .sub_img .simg_bg{ background-position: -500px;}
	.s11 .sub_con::before{ height: 200px;}
	.s11 .sub_con::after{ height: 150px;}

	.s13 .sub_con::before{ display: none;}
	.sub_con .history::before{ display: none;}
	.year{ flex-direction: column; padding-top: 3%;}
	.year:last-child{ margin-bottom: 0;}
	.year .sc_title{ width: 100%; margin-right: 0; margin-bottom: 3%;}
	.year .sc_title .sc_tit{ padding-top: 0;  }
	.year .md{ width: 100%; margin-top: 0;}
	.year .rg{ width: 100%; margin-left: 0; position: relative; }
	.year .rg ul li{ padding: 5% 0% 5% 0; align-items: baseline;}
	.year .rg .sline_tit, .sline_tit strong{ width: 8%;}
	.year .rg .sline_tit::before{ top: 6px;}
	.year .rg .info{ width: 91%; margin-bottom: 2%; padding-left: 0;}
	.year .rg .info .ss_txt{ padding-bottom: 0;  line-height: 1.4;}
	.year .rg .info .ss_txt::before{ top: 2px; }

	.s_diagram .sd_ginfo{ flex-direction: column; padding: 8%; border-radius: 10px; text-align: center; }
	.s_diagram .sd_ginfo:nth-child(1){ margin-bottom: 25px;}
	.s_diagram .sd_ginfo .icon{ margin: 0 auto 20px;}

	.sch_a2{ width: 100%; margin-bottom: 3%; height: 100%;}
	.sch_a2 .ss_txt{  padding: 5% 0;}
	.sch_a2 > div:nth-child(1){ margin-bottom: 3%;}
	.sch_a3{ width: 100%;}
	.sc_list_wrap ul{ height: 100%; justify-content: space-between;}
	.sc_list_wrap ul li{ width: 32%; padding: 4%; font-size: 0.8rem; margin: 0 0 2% 0;}
	.sc_list_wrap ul li:nth-child(6n){ margin: 0 0 2% 0;}
	.sc_list_wrap ul li:nth-child(25), .sc_list_wrap ul li:nth-child(26){ width: 49%;}

	.sc_box_info ul{ padding: 8% 5% 3%;}
	.s_diagram2{ flex-direction: column;}
	.sdg2_1{ width: 100%; height: 100%; max-width: 100%;}
	.sdg2_2{ transform: rotate(90deg); margin: 5% auto;}
	.sdg2_2 img{ height: 40px;}

	.sch_r1 .sch_a2{ width: 100%; height: 100%; margin: 25px auto 12%;}
	.sch_r1 .sch_a2::before{ bottom: -50px;}
	.s21_5 .sc_list_box > div{ width: 100%; margin-bottom: 5%;}
	.s21_5 .sc_box .img{ height: 35vh;}
	.s21_5 .sc_box .img img{ width: 100%; }
	.sc_box_list ul li{ width: 100%; margin: 0 0 3%; padding: 5% 8%;}
	.sc_box_list ul li::before{ top: 18px;}
	.sub_link{ font-size: 15px; max-width: 80%; }

	.s31_2 .flex{ flex-direction: column;}
	.s31_2 .flex > div{ width: 100%;}
	.s31_2 .sc_title{ padding-right: 0;}
	.s31_2 .ss_tit{ margin-bottom: 15px;}
	.s31_2 > div.sub_con:nth-child(even) .flex .sc_title{ padding-left: 0;}
	.img_ani{ width: 100%; height: 45vh; border-radius: 10px; max-width: 100%; max-height: 100%; }

	.s32_1 .sc_list_wrap ul li{ width: 100%; margin-bottom: 5%;}
	.s32_2 .flex{ margin-bottom: 8%; }
	.s32_2 .flex .sc_img_box{ width: 80%;}
	.s32_2 .flex .sline_title .sline_tit{ margin-bottom: 5%;}
	.s32_3 .sub_con.flex{ flex-direction: column; padding: 5%; margin-bottom: 5%;}
	.s32_3 .sline_title{ width: 100%;}
	.s32_3 .list_info_wrap{ width: 100%; }
	.list_info_wrap > div{ flex-direction: column; padding: 5%;}
	.list_info_wrap > div .icon{ margin: 0 0 5%;}
}
@media(max-width: 500px){
	.sb_pding_b{ padding-bottom: 10%;}
	.sb_tit{ font-size: 26px;}
	.sb_txt{ font-size: 14px; }
	.sc_tit{ font-size: 20px; }
	.sc_txt{ font-size: 14px; }
	.sc_name{ font-size: 16px; padding-top: 40px;}
	.sc_name strong{ font-size: 18px; }
	.ss_tit{ font-size: 15px; }
	.ss_txt{ font-size: 14px; }
	.s_diagram .sd_g2 > div, .s32_5 .s_diagram2 .ss_tit{ font-size: 16px;}
	.s_diagram .sd_g2 > div strong, .s32_5 .s_diagram2 .ss_tit strong{ font-size: 24px;}
	.sline_tit{ font-size: 16px;}
	.sub .icon img{ height: 35px;}
	.sub_table .st_tr{ width: 100%; padding: 15px 0;}
  .sub_table .st_th{ font-size: 0.8rem; width: 25%; padding-left: 0;}
  .sub_con i{ font-size: 14px; margin-right: 10px; }
  .sub_table .st_td{ font-size: 14px; }
  .sub_map .map_button{ width: 120px; margin: 0 0;}
  .sub_map a{ width: 120px; font-size: 14px; padding: 10px 0; }
  .sub_map a i{ margin-right: 0;}

	.s11 .sub_img, .s13 .sub_img, .s21 .sub_img, .s32 .sub_img{ height: 300px;}
	.s11 .sub_img .simg_bg, .s13 .sub_img .simg_bg, .s21 .sub_img .simg_bg, .s32 .sub_img .simg_bg{ background-position: -300px;}
	.sc_list_wrap ul li{ width: 49%;}
	.sdg2_2{ margin: 8% auto;}
	.sdg2_2 img{ height: 30px;}
	.sc_box_info ul{ padding: 5%;}
	.sc_box2 .sc_box_info ul li{ width: 50%;}
	.sch_a3_box{ flex-flow: row wrap;}
	.sch_a3_box div{ width: 32%; font-size: 3vw; }
	.sch_a3_box div:nth-child(1) { width: 100%; margin-bottom: 10px;}
	.s21_5 .sc_box .img{ height: 20vh;}

	.img_ani{ height: 30vh;}
	.s32_1 .sc_list_wrap ul li{ padding: 8%;}
	.s32_2 .flex .sc_img_box{ width: 100%; }
	.list_info_wrap > div{ width: 100%;  padding: 10%;}
}
@media(max-width: 300px){
	.s21_5 .sc_box .img{ height: 15vh;}
}



/************************* sub 끝 *************************/

/************************* title_navi 시작 *************************/
.navi_all {width:100%; margin:0 auto; background:#fff; height:50px; border-bottom:1px solid #ddd; }
.navi_in	{margin:0 auto; padding:0;max-width:1280px; margin:0 auto;}
.navi_in:after		{clear:both; content:''; display:block; width:100%;}

.home_btn_all						{float:left; width:10%; max-width:50px;  border-right:1px solid #efefef;}
.home_btn_all a					{display:block; height:49px; line-height:50px; text-align:center;}
.home_btn_all a:hover		{background:#f8f8f8; }
.home_btn_all a img			{max-width:100%; height:auto; vertical-align:middle;}

.navi_left					{float:left; width:90%; max-width:550px;}
.navi_left:after		{clear:both; content:''; display:block; width:100%;}
.navi_left div			{float:left;}

.navi_main		{width:50%; max-width:250px; padding:0 0 0 0; height:50px; position:relative; line-height:50px;  cursor:pointer; border-right:1px solid #efefef;}
.navi_title01	{padding:0 0 0 0; height:40px; width:100%; position:relative; line-height:50px; }
.navi_title01 h1 {color:#777; font-size:14px; margin-left:10px; width:100%;}
.navi_title01 h1.sub_menu:hover { color:#333; }

.navi_main h1 { color:#777; font-size:14px; margin-left:10px;}
.navi_main h1.sub_manu:hover { color:#333; }
.navi_main > .deco_right { float:right;  }

.navi_main >a.down_btn1	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn2	{position:absolute; right:10px; top:0px;}
.navi_main >a.down_btn3	{position:absolute; right:10px; top:0px;}

.h1_focus	{color:#333 !important;;}

.navi_sub {width:50%; max-width:250px; padding:0; height:50px; line-height:50px; position:relative; cursor:pointer; border-right:1px solid #efefef;}
.navi_sub > h2						{ color:#333333; font-size:14px;  cursor:pointer; margin-left:10px;}
.navi_sub>a.down_btn4	{position:absolute; right:10px; top:0px; }

.navi_sub > p						{float:right; }

.extend1							{position:relative; top:-1px; width:100%; }
.extend1 > ul				{position:absolute;left:-1px; min-height:1px;width:100%;padding-left: 0px; padding:0px 0 10px 0; border-top:0;z-index: 999; background:#fff; border:1px solid #efefef; display:none;}
.extend1 > ul a { text-decoration:none; }


.extend2							{position:relative; top:-1px; width:100%;}
.extend2 > ul				{position: absolute;left:-1px; min-height:1px; width:100%; padding-left:0px; z-index: 999; background:#fff; border:1px solid #efefef; display:none; padding:0px 0 10px 0; }
.extend2 > ul a { text-decoration:none; }
.extend2 h1 { }


.extend > ul > li		{min-height:20px;}
.down_btn			{cursor:pointer; }

/************************* title_navi 끝 *************************/


/************************* footer_inc 시작 *************************/
.foot_content{ width: 100%; background-color: var(--foot-bg); padding: 60px; font-family: var(--font-noto);}
.foot_top{ width: 100%; display: block; padding-bottom: 25px; border-bottom: 1px solid #2e2e2e;}
.foot_top img{ display: block; }
.foot_bot{ padding-top: 25px; font-size: 13px; color: var(--font-s-color); justify-content: space-between; align-items: flex-end;}
.foot_bot p{  line-height: 24px; }
.foot_bot p span{ font-size: 10px; margin: 0 10px; position: relative; top: -2px; }
.copyright{ padding-top: 35px; }
.copyright a{ color: var(--font-s-color);}
.copyright a:hover{ color: var(--main-color);}

.foot_right .flex{ justify-content: space-between; width: 400px; align-items: center;}
.foot_right li{ position: relative; }
.foot_right li:before{ content: "·"; display: block; font-size: 15px; color: var(--w-color);  position: absolute; left: -15px;}
.foot_right li:nth-child(1):before{ display: none; }
.foot_right li a{ color: var(--w-color); }


@media(max-width: 1200px){
	.foot_content{ padding: 5%;}
	.foot_bot{ flex-direction: column; align-items: flex-start;}
	.copyright{ padding-top: 20px;}
}
@media(max-width: 500px){
	.foot_right .flex{ flex-flow: row wrap; width: 100%; }
	.foot_right li{ margin-right: 10px; }
		.foot_right li:before{ display: none;}
		.foot_top{ padding-bottom: 5%;}
	.foot_top img{ height: 35px; }
}

/************************* footer_inc 끝 *************************/


/************************* ui.totop 시작 *************************/
#toTop {
	display:none;
	text-decoration:none;
	position:fixed;
	bottom:10px;
	right:10px;
	overflow:hidden;
	width:51px;
	height:51px;
	border:none;
	text-indent:100%;
	background:url("img/ui.totop6.png") no-repeat left top;
}

#toTopHover {
	background:url("img/ui.totop6.png") no-repeat left -51px;
	width:51px;
	height:51px;
	display:block;
	overflow:hidden;
	float:left;
	opacity: 0;
	-moz-opacity: 0;
	filter:alpha(opacity=0);
}

#toTop:active, #toTop:focus {
	outline:none;
}
/************************* ui.totop 끝 *************************/

/************************* quick 시작 *************************/
#quick_wrap						{position:relative; display:block; width:100%; max-width:1903px; margin:0 auto; z-index:98;}
.qui_right					{position:fixed;  min-height:110px; right:1.3%; bottom:10%; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;}
.qui_right img{display:block}

.qui_req a{ display: block; width: 50px; height: 50px; border-radius: 100px; transition: all .5s ease-in-out; background-color: var(--main-color); color: var(--w-color); font-size: 15px; font-weight: 500; position: relative; overflow: hidden;}
.qui_txt{ display: flex; align-items: center; height: 50px; width: 210px; position: absolute; left: 14px; }
.qui_txt .q_tt{ opacity: 0; padding-left: 5px;}


.top a{ width: 50px; height: 50px; display: block; font-size: 13px;  border-radius: 100%; background-color: #7f7f7f; text-align: center; color: var(--w-color); transition: all .5s; line-height: 1; font-weight: 500; padding: 20px 0; }
.top a:hover{ background-color: var(--font-b-color); }

@media( hover: hover){
	.qui_req a:hover{ width: 170px; background-color: var(--hover-color); transition: all .5s;}
	.qui_req a:hover .qui_txt .q_tt{  opacity: 1;}

	.qui_req.nohover:hover{ width: 50px; height: 50px; background: var(--main-color); }
	.qui_req.nohover:hover .qui_txt .q_tt{ opacity: 0;}
}

@media(max-width:880px){
.qui_right					{position:fixed;  right:1%; bottom:7%; background-size:100%;}
.qui_right ul li:first-child{margin-bottom:5px;}
.qui_right img{display:block; width:auto; }
}
/************************* quick 끝 *************************/