@charset "utf-8";
.sub_content{margin-bottom: 0px;}
.top_img_tabel{background-image:url(../../images/com/fo/it_bg.jpg)}
.sub_title{margin-top: 0px;}
.sub_title p{font-size: 36px; letter-spacing: -2px;}
.sub_title span{font-size: 16px; letter-spacing: -0.7px;}
.content_1200{width: 100%;}
.top_img_tabel .top_img_td{background-color: transparent;}
.sub_content{margin-top: 0px;}


.con1{width: 1200px; margin: auto; padding-top: 20px;}
.con1 .s_title{text-align: center; color: #000000; margin-top:50px; font-size:30px; color: #000000; padding-bottom: 18px; padding-top: 20px;}
.con1 .content_total{background-color: #efefef; padding-bottom: 20px; margin-bottom: 100px;}
.con1 .content_total::after{content: ""; clear: both; float: none; display: block;}
.con1 .s_title p{display: inline-block;}
.con1 .s_title span{font-size: 18px;}



.con1::after{content: ""; float: none; clear: both; display: block;}
.table_con{float: left; }
.table_con .height_con{height: 525px; width:171px; float: left; background-color: #ffffff; margin-left: 6px;}
.table_con .height_con .title{text-align: center; height: 45px; line-height: 49px; color: #000000; font-size: 16px; font-weight: bold;}
.table_con .height_con .title_txt{background-color: #a50034; color: #ffffff; text-align: center; width: 100%; height: 32px; line-height: 32px;}
.table_con .height_con .txt{font-size: 12px; padding: 10px 15px 25px 20px; color:#555555; font-family: 'Malgun Gothic', '맑은 고딕'; letter-spacing: -0.5px;}

.table_con .height_con .txt span{line-height:normal; padding:2.5px 0px; display: block; position: relative;}
.table_con .height_con .txt span::BEFORE{content: ""; position: absolute; width: 2px; height: 2px; background-color:#555555; left: -8px; top: 10px;}


.table_con .height_con2{float: left; background-color: #ffffff; margin-left: 6px; height: 525px;}
.table_con .height_con2 .height_con{height: auto;}
.table_con .height_con2 .height_con:first-of-type{margin-left: 0px;}
.table_con .height_con2 .title{text-align: center; height: 45px; line-height: 49px; color: #000000; font-size: 16px; font-weight: bold;}



.height_right1{float: left; position:relative; width:31px; height: 540px; background-color: #616161; margin-top: -7px; margin-left: 8px; text-align: center; line-height: 540px;}
.height_right1 span{line-height: 25px; vertical-align: middle; display: inline-block; color: #ffffff; font-size: 14px;}
.height_right1::after{content: "";height: 100%; position:relative; display: inline-block; vertical-align: middle;}
.table_con::after{content: ""; float: none; clear: both; display: block;}


.height_right2{float: left; position:relative; width:31px; height: 540px; background-color: #c8c8c8; margin-top: -7px; margin-left: 1px; text-align: center; line-height: 540px;}
.height_right2 span{line-height: 25px; vertical-align: middle; display: inline-block; color: #000000; font-size: 14px; font-weight: 600;}
.height_right2::after{content: "";height: 100%; position:relative; display: inline-block; vertical-align: middle;}


.height_right3{float: left; position:relative; width:66px; height: 540px; margin-top: -7px; text-align: center;}
.height_right3 li{display: inline-block; width: 100%; margin-top: 78px; font-size: 14px; color: #000000;}
.height_right3 li::BEFORE{content: ""; display: inline-block; margin-bottom:5px; width: 100%; height: 45px; background-repeat: no-repeat; background-position: center bottom;}
.height_right3 li.h_icon_1::BEFORE{background-image:url(../../images/com/fo/itsolution/icon_1.png);}
.height_right3 li.h_icon_2::BEFORE{background-image:url(../../images/com/fo/itsolution/icon_2.png);}
.height_right3 li.h_icon_3::BEFORE{background-image:url(../../images/com/fo/itsolution/icon_3.png);}

.footer_table{display: block;float: left; clear: both; width: 1070px; text-align: center; color: #ffffff;  font-size: 14px;}
.footer_table .footer_txt1{width: 100%; background-color: #616161;  height: 31px; line-height: 31px;}
.footer_table .footer_txt2{width: 100%; margin-top: 4px;  height: 31px; line-height: 31px;}
.footer_table .footer_txt2 li{width: 20%; float: left; text-align: center; background: #a50034; box-sizing:border-box; border-left: 4px solid #ffffff;}
.footer_table .footer_txt2 li:FIRST-CHILD{border: none;}
.con1::after{content: ""; float: none; clear: both; display: block;}
.footer_table .footer_txt2::after{content: ""; float: none; clear: both; display: block;}






.con2{background-color: #f7f7f7; padding-top:100px; padding-bottom:100px;}
.con2 .map_con{position:relative; width: 1203px; height: 604px; margin: auto; background-image:url(../../images/com/fo/itsolution/bg.png);}
.con2 .map_con .left_con{margin-left: 80px; padding-bottom:103px; width:105px; float: left; text-align: center; margin-top: 100px; opacity:0; background-image:url(../../images/com/fo/itsolution/arrow_down.png); background-repeat: no-repeat; background-position: center bottom;}
.con2 .map_con .left_con p{font-size: 18px; color: #000000; display: block; margin-bottom: 10px; position: relative;}
.con2 .map_con .left_con p::after{content: ""; position: absolute; width: 100%; height: 1px; background-color: #000000; left: 0px; bottom:-3px;}
.con2 .map_con .left_con span{font-size: 14px; color: #666666; display: block; margin-bottom: 2px; word-wrap:break-word;}


.con2 .map_con .center_con{position: absolute; width:572px; height:572px; left: 50%; margin-left:-286px;   text-align: center; background-image:url(../../images/com/fo/itsolution/bg1.png); background-repeat: no-repeat; background-position: center center;}
.con2 .map_con .center_con::BEFORE{content: ""; top:-9px; left:-7px;  position: absolute; width: 100%; height: 100%; background-image:url(../../images/com/fo/itsolution/line.png); background-repeat: no-repeat; background-position: center center;
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes slidein {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.con2 .map_con .center_con .btn_total{position: absolute; left: 0px; top: 0px; z-index: 5; cursor: pointer;}
.con2 .map_con .center_con .btn_total ul{position:absolute; width: 1px; height: 1px;}
.con2 .map_con .center_con .btn_total ul.btn1{left: 76px; top: 157px;}
.con2 .map_con .center_con .btn_total ul.btn2{left: 172px; top: 510px;}
.con2 .map_con .center_con .btn_total ul.btn3{left: 436px; top: 472px;}
.con2 .map_con .center_con .btn_total ul.btn4{left: 524px; top: 244px;}

.con2 .map_con .center_con .btn_total ul span{display: block; position: absolute; width:100px; height: 100px; margin-left: -50px; margin-top:-50px; background-color: #616161; color: #ffffff; line-height: 100px; font-size: 20px; border-radius:100px;
transition: all .4s ease .0s;}
.con2 .map_con .center_con .btn_total ul.btn_on span{position:relative; background-color: #a50034; width:150px; height: 150px; line-height: 150px;  border-radius:150px; margin-left: -75px; margin-top: -75px; font-size: 30px;}
.con2 .map_con .center_con .btn_total ul.btn_on span::after{position: absolute; width: 242px; height: 242px;}


.con2 .map_con .center_con .txt_total{position: absolute; z-index: 4; width: 100%; display: none;}

.con2 .map_con .center_con .txt_total .img_con{transition: all .4s ease .0s; width: 100%; height: 240px;  background-repeat: no-repeat; background-position: center 100px;}
.con2 .map_con .center_con .txt_total.txt_total_1 .img_con{background-image:url(../../images/com/fo/itsolution/top_icon_1.png);}
.con2 .map_con .center_con .txt_total.txt_total_2 .img_con{background-image:url(../../images/com/fo/itsolution/top_icon_2.png);}
.con2 .map_con .center_con .txt_total.txt_total_3 .img_con{background-image:url(../../images/com/fo/itsolution/top_icon_3.png);}
.con2 .map_con .center_con .txt_total.txt_total_4 .img_con{background-image:url(../../images/com/fo/itsolution/top_icon_4.png);}
.con2 .map_con .center_con .txt_total .title_con{position:relative; color: #a50034; font-size: 30px; margin-top:33px;}
.con2 .map_con .center_con .txt_total .title_con::after{content: ""; top:52px; width: 284px; height: 1px; background-color: #cfcfcf; position: absolute; left: 50%; margin-left: -142px;}
.con2 .map_con .center_con .txt_total .txt_con{color: #555555; font-size: 16px; margin-top: 30px;}


.con2 .map_con .center_con .txt_total.txt_total_0{position: relative;}
.con2 .map_con .center_con .txt_total.txt_total_0 .icon_con{position: absolute; top:-67px; right:90px; width: 132px; height: 78px; background-image:url(../../images/com/fo/itsolution/bird.png); }
.con2 .map_con .center_con .txt_total.txt_total_0 .t1{font-size: 48px; color: #a50034; margin-top: 180px;}
.con2 .map_con .center_con .txt_total.txt_total_0 .t2{position:relative; font-size: 15px; color: #939393; margin-top:30px; margin-bottom: 30px;}
.con2 .map_con .center_con .txt_total.txt_total_0 .t2::BEFORE{content: ""; position:absolute; left:50%; margin-left:-175px; top:-12px; width:350px; height: 1px; background-color: #a3a3a3; }
.con2 .map_con .center_con .txt_total.txt_total_0 .t2::after{content: ""; position:absolute; left:50%; margin-left:-137px; bottom:-12px; width:274px; height: 1px; background-color: #cfcfcf; }

.con2 .map_con .center_con .txt_total.txt_total_0 .t3{font-size: 24px; color: #717171;}


.con2 .map_con .center_con .txt_total.txt_on{display: block;}
.con2 .map_con .center_con .txt_total.txt_on .img_con{background-position:center bottom;}

.con2 .map_con .info_txt{display: inline-block; background-color: rgba( 255, 255, 255, 0.5 ); border: 1px solid #eaeaea; padding: 8px; position: absolute; bottom: 18px; right: 2px;}


.con2 .map_con .right_con{margin-right: 80px; padding-top:103px; float: right;  text-align: center; margin-top: 300px; opacity:0; background-image:url(../../images/com/fo/itsolution/arrow_up.png); background-repeat: no-repeat; background-position: center top;}
.con2 .map_con .right_con p{font-size: 18px; color: #a50034; display: block; margin-top: 10px; position: relative;}
.con2 .map_con .right_con p::BEFORE{content: ""; position: absolute; width: 100%; height: 1px; background-color: #a50034; left: 0px; top:-3px;}
.con2 .map_con .right_con span{font-size: 14px; color: #666666; display: block; margin-bottom: 2px;}


.con2 .map_con::after{content: ""; float: none; clear: both; display: block;}




.con2 .block_total{width: 1200px; margin: auto; background-color: #c8c8c8; padding-top: 11px; padding-bottom: 11px;}
.con2 .block_total > ul{background-color: #ffffff;}
.con2 .block_total > ul.td2{width:584px; float: left; margin-left:11px; }
.con2 .block_total > ul .title{background-color: #a50034; color: #ffffff; font-size: 18px; text-align: center; height: 43px; line-height: 43px;}
.con2 .block_total > ul.td2 .in_block{position: relative; text-align: center; height:180px; }
.con2 .block_total > ul.td2 .in_block .s_title{font-size: 14px; color: #000000; padding-top: 27px;}
.con2 .block_total > ul.td2 .in_block .block_list{padding: 0 16px; margin-top: 53px; position: relative;}
.con2 .block_total > ul.td2 .in_block .block_list::BEFORE{content: ""; position: absolute; width: 1px; height: 14px; background-color: #3c3c3c; left: 50%; top: -39px;}
.con2 .block_total > ul.td2 .in_block .block_list p{display: table; float: left; position: relative; width: 25%;}
.con2 .block_total > ul.td2 .in_block .block_list p span{display: table-cell; vertical-align:middle; width: 100%; height: 50px; background-color: #eeeeee; border-left: 7px solid #ffffff; border-right: 7px solid #ffffff;}
.con2 .block_total > ul.td2 .in_block .block_list p span::BEFORE{content: ""; position: absolute; width: 1px; height: 14px; background-color: #3c3c3c; left: 50%; top: -26px;}
.con2 .block_total > ul.td2 .in_block .block_list p:FIRST-CHILD span::after{content: ""; position: absolute; width: 415px; height: 1px; background-color: #3c3c3c; left: 69px; top: -26px;}

.con2 .block_total > ul.cont_2 .block_link{width:101px; margin: 31px 22px 0; float: left;}
.con2 .block_total > ul.cont_2 .block_link .link_img{width: 101px; height: 61px; background-repeat: no-repeat; background-position: center center; border: 1px solid #ededed;}
.con2 .block_total > ul.cont_2 .block_link.link1 .link_img{background-image:url(../../images/com/fo/itsolution/link_btn_1.png);}
.con2 .block_total > ul.cont_2 .block_link.link2 .link_img{background-image:url(../../images/com/fo/itsolution/link_btn_2_lx.png);}
.con2 .block_total > ul.cont_2 .block_link.link3 .link_img{background-image:url(../../images/com/fo/itsolution/link_btn_3.png);}
.con2 .block_total > ul.cont_2 .block_link.link4 .link_img{background-image:url(../../images/com/fo/itsolution/link_btn_4_now.png);}

.con2 .block_total > ul.cont_2 .block_link .link_title{font-size: 11px; color: #555555; margin-top: 10px;}
.con2 .block_total > ul.cont_2 .block_link .link_btn{font-size: 14px; color: #ffffff; background-color:#a50034; height:25px; line-height:27px; margin-top: 10px; position: relative;}
.con2 .block_total > ul.cont_2 .block_link .link_btn::BEFORE{content:"";top:50%; margin-top:-3px; width: 8px; height: 1px; background-color: #ffffff; position: absolute; right: 10px; transform: rotate(45deg)}
.con2 .block_total > ul.cont_2 .block_link .link_btn::after{content:"";top:50%; margin-top:2px; width: 8px; height: 1px; background-color: #ffffff; position: absolute; right: 10px; transform: rotate(-45deg)}


.con2 .block_total > ul.td1{width:1179px; float: left; margin-left:11px; margin-top: 11px;}

.con2 .block_total > ul.td1 .ct1{width: 125px; float: left;}
.con2 .block_total > ul.cont_3 .in_block>div{margin-left: 52px;}
.con2 .block_total > ul.cont_3 .in_block>div:FIRST-CHILD{margin-left: 25px;}
.con2 .block_total > ul.td1 .in_block{position: relative; text-align: center; height:135px; }
.con2 .block_total > ul.td1 .in_block .s_title{font-size: 14px; color: #000000; padding-top: 19px; padding-bottom: 5px;}
.con2 .block_total > ul.td1 .in_block .block_list{padding: 0 18px; margin-top: 21px; position: relative;}




.con2 .block_total > ul.td1 .in_block .block_list p{display: table; float: left; position: relative;}
.con2 .block_total > ul.td1.cont_3 .in_block .ct1 .block_list p{width: 100%;}
.con2 .block_total > ul.td1.cont_3 .in_block .ct2 .block_list p{width: 65px;}
.con2 .block_total > ul.td1.cont_3 .in_block .ct3 .block_list p{width: 85px;}
.con2 .block_total > ul.td1.cont_3 .in_block .ct4 .block_list p{width: 100%;}


.con2 .block_total > ul.td1.cont_4 .in_block .ct1 .block_list p{width: 25%;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct2 .block_list p{width: 25%;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct3 .block_list p{width: 50%;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct4 .block_list p{width: 50%;}

.con2 .block_total > ul.td1 .in_block  .block_list p span{display: table-cell; vertical-align:middle; height: 50px; background-color: #eeeeee; border-left: 7px solid #ffffff; border-right: 7px solid #ffffff;}

.con2 .block_total > ul.td1 .in_block .block_list p span::BEFORE{content: ""; position: absolute; width: 1px; height: 8px; background-color: #3c3c3c; left: 50%; top: -16px;}
.con2 .block_total > ul.td1 .in_block .ct2 .block_list::BEFORE{content: ""; position: absolute; width: 1px; height: 8px; background-color: #3c3c3c; left: 50%; top: -25px;}
.con2 .block_total > ul.td1 .in_block .ct2 .block_list p:FIRST-CHILD span::after{content: ""; position: absolute; width: 326px; height: 1px; background-color: #3c3c3c; left: 33px; top: -17px;}



.con2 .block_total > ul.td1 .ct2{width: 431px;  float: left;}
.con2 .block_total > ul.td1 .in_block .ct2 .block_list p span{width: 100%; border-left:2px solid #ffffff; border-right: 2px solid #ffffff; }

.con2 .block_total > ul.td1 .ct3{width: 293px;  float: left;}
.con2 .block_total > ul.td1 .in_block .ct3 .block_list p span{width: 100%; position:relative; border-left:2px solid #ffffff; border-right: 2px solid #ffffff; }
.con2 .block_total > ul.td1.cont_4 .in_block .block_list p span{width: 86px; border-left:2px solid #ffffff; border-right: 2px solid #ffffff; }
.con2 .block_total > ul.td1.cont_4 .in_block .ct3 .block_list p span{width: 100%;}
.con2 .block_total > ul.td1.cont_4 .in_block .block_list{padding: 0 5px;}

.con2 .block_total > ul.td1 .in_block .ct3 .block_list::BEFORE{content: ""; margin-left:-1px; position: absolute; width: 1px; height: 8px; background-color: #3c3c3c; left: 50%; top: -25px;}
.con2 .block_total > ul.td1 .in_block .ct3 .block_list p:FIRST-CHILD span::after{content: ""; position: absolute; width: 171px; height: 1px; background-color: #3c3c3c; left: 41px; top: -17px;}


.con2 .block_total > ul.td1.cont_4 .ct1{width:394px; }
.con2 .block_total > ul.td1.cont_4 .in_block .block_list p span{width: 100%;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct1 .block_list::BEFORE{content: ""; position: absolute; width: 1px; height: 8px; background-color: #3c3c3c; left: 50%; top: -25px;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct1 .block_list p:FIRST-CHILD span::after{content: ""; position: absolute; width: 289px; height: 1px; background-color: #3c3c3c; left: 48px; top: -17px;}


.con2 .block_total > ul.td1.cont_4{margin-top: 0px;}
.con2 .block_total > ul.td1.cont_4 .ct3{width:190px; }
.con2 .block_total > ul.td1.cont_4 .in_block .ct3 .block_list::BEFORE{content: ""; position: absolute; width: 1px; height: 8px; background-color: #3c3c3c; left: 50%; top: -25px;}
.con2 .block_total > ul.td1.cont_4 .in_block .ct3 .block_list p:FIRST-CHILD span::after{content: ""; position: absolute; width: 91px; height: 1px; background-color: #3c3c3c; left: 43px; top: -17px;}
.con2 .block_total > ul.td1.cont_4  .in_block>div{margin-left: 1px;}
.con2 .block_total > ul.td1.cont_4  .in_block>div:FIRST-CHILD{margin-left: 5px;}


.con2 .block_total > ul.cont_5{margin-top:0px;}
.con2 .block_total > ul.cont_5 li{display: block;}
.con2 .block_total > ul.cont_5 .title{background-color: #616161;}
.con2 .block_total > ul.cont_5 .arrow_con{background-color: #c8c8c8; height: 105px; position: relative;}
.con2 .block_total > ul.cont_5 .arrow_con>div{width: 40px; position: absolute; text-align: center; left: 50%; margin-top: -9px;}
.con2 .block_total > ul.cont_5 .arrow_con>div .arrow_top{display:inline-block; width:0; height:0; border-style:solid; border-width:20px; border-color: transparent transparent #ffffff transparent;}
.con2 .block_total > ul.cont_5 .arrow_con>div .arrow_top_body{width:20px; height:20px; background-color: #ffffff; margin:auto;}
.con2 .block_total > ul.cont_5 .arrow_con>div .arrow_body{width:20px; height:6px; background-color: #ffffff; margin:auto; margin-top:5px;}

.con2 .block_total > ul.cont_5 .arrow_con>div.left_arrow{margin-left: -70px; transform: rotate(180deg); margin-top: 12px;}
.con2 .block_total > ul.cont_5 .arrow_con>div.right_arrow{margin-left: 70px;}




.con2 .block_total > ul.cont_5 .icon_total .icon_ct{float: left; width: 12.5%; text-align: center; padding: 15px 0px;}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct::BEFORE{content:""; display: block; width: 92px; height: 92px; background-position: center center; background-repeat: no-repeat; margin: auto; border-radius:92px; background-color: #eeeeee; margin-bottom: 10px;}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct1::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/1.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct2::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/2.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct3::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/3.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct4::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/4.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct5::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/5.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct6::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/6_lx.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct7::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/7.png);}
.con2 .block_total > ul.cont_5 .icon_total .icon_ct.icon_ct8::BEFORE{background-image:url(../../images/com/fo/itsolution/icon/8.png);}
.con2 .block_total > ul.cont_5 .icon_total::after{content: ""; float: none; clear: both; display: block;}

.con2 .block_total::after{content: ""; display: block; float: none; clear: both;}

.con2 .block_total > ul{position: relative;}
.con2 .block_total > ul.td_on::after{content: ""; position: absolute; top:0px; left:0px; width: 5px; height: 100%; background-color:#a50034;}
.con2 .block_total > ul.td_on::BEFORE{content: ""; position: absolute; top:0px; right:0px; width: 5px; height: 100%; background-color:#a50034;}
.con2 .block_total > ul.td_on .in_block::after{content: ""; position: absolute; bottom:0px; left:0px; width: 100%; height: 5px; background-color:#a50034;}

.con2.scroll .map_con .left_con{margin-top: 200px; opacity:1; transition: all .4s ease .0s;}
.con2.scroll .map_con .right_con{margin-top: 200px; opacity:1; transition: all .4s ease .0s;}