﻿@charset "utf-8";

.top_img_tabel{background-image:url(../../images/com/fo/about_bg.jpg)}
.top_img_tabel .top_img_td{background-color:  transparent;}
.w1200{width: 1200px; margin: auto;}


.content1 .img_con{position:relative; opacity:0;  width: 1120px; height:150px;margin: auto; left:110%; background-image:url(../../images/com/fo/about/con1_img.png); background-position: top right; background-repeat: no-repeat; margin-top: 110px;  transition: all .4s;}
.content1.scroll .img_con{left:0; opacity:1;}


.content1 .img_con>div{position: absolute; letter-spacing:-0.5px; width: 100px; margin-right: -50px; text-align: center; color: #575757; font-size: 12px;}
.content1 .img_con>div.con_row1{top:60px; }
.content1 .img_con>div.con_row1.con1{right:975px;}
.content1 .img_con>div.con_row1.con2{right:883px;}
.content1 .img_con>div.con_row1.con3{right:783px;}
.content1 .img_con>div.con_row1.con4{right:680px;}
.content1 .img_con>div.con_row1.con5{right:573px;}
.content1 .img_con>div.con_row1.con6{right:480px;}
.content1 .img_con>div.con_row1.con7{right:352px;}
.content1 .img_con>div.con_row1.con8{right:253px;}
.content1 .img_con>div.con_row1.con9{right:146px;}
.content1 .img_con>div.con_row1.con10{right:43px;}
.content1 .img_con>div.con_row2{top:140px; }
.content1 .img_con>div.con_row2.con1{right:352px;}
.content1 .img_con>div.con_row2.con2{right:253px;}



.content1 .img_con .con_title{position: absolute; left:-200px; opacity:0; top:20px; display: inline-block; width:75px; height: 30px; background-color: #a50034; color: #ffffff; font-size: 14px; line-height: 31px; box-sizing:border-box; padding-left:30px; transition: all .4s ease .4s;}
.content1.scroll .img_con .con_title{left:0px; opacity:1; }
.content1 .img_con .con_title::after{content: ""; position: absolute;border-top: 15px solid transparent;border-bottom: 15px solid transparent;border-left: 20px solid #a50034; right: -20px;}



.content1 .table_con{ width:1085px; margin:auto; margin-top: 35px; background-color: #e9e9e9; position: relative;}
.content1 .table_con .title{position: absolute; font-size: 14px; color: #181818; width: 100px; top: 50%; margin-top: -7.5px; text-align: center; font-weight: bold;}

.content1 .table_con .table_right{display: block; padding-left: 100px;}

.content1 .table_con .table_right .thaed{padding-top: 6px;}
.content1 .table_con .table_right .thaed li{width: 322px; float: left; text-align: center;margin-right:6px; font-size:14px; height: 28px; line-height: 28px; }

.content1 .table_con .table_right .thaed li:nth-child(1){ background-color: #a50034; color: #ffffff;}
.content1 .table_con .table_right .thaed li:nth-child(2){ background-color: #616161; color: #ffffff;}
.content1 .table_con .table_right .thaed li:nth-child(3){ background-color: #c8c8c8; color: #575757;}


.content1 .table_con .table_right .tbody{padding-top: 6px;}
.content1 .table_con .table_right .tbody1 li{box-sizing:border-box; padding:20px; width: 322px; background-color:#ffffff; float: left; text-align: left;margin-right:6px; font-size:12px; color:#575757; height: 122px; line-height: 20px; }

.content1 .table_con .table_right .tbody1 li:nth-child(2){background-color: transparent; position: relative;}
.content1 .table_con .table_right .tbody1 li .txt1{position: absolute; line-height:15px; box-sizing:border-box; width: 165px; height: 39px; bottom: 0px;left: 0px;  padding:13px; background-color: #ffffff; text-align: center;}
.content1 .table_con .table_right .tbody1 li .txt2{position: absolute; line-height:15px; box-sizing:border-box; width: 149px; height: 97px; top: 0px;right: 0px;  padding:20px; background-color: #ffffff;}


.content1 .table_con .table_right .tbody2 li{box-sizing:border-box; width: 486px; height:39px; background-color:#ffffff; float: left; text-align: center;margin-right:6px; font-size:12px; color:#575757; line-height: 39px; }
.content1 .table_con .table_right .tbody3{padding-bottom: 6px;}
.content1 .table_con .table_right .tbody3 li{box-sizing:border-box; width: 978px; height:39px; background-color:#ffffff; float: left; text-align: center;margin-right:6px; font-size:12px; color:#575757; line-height: 39px; }




.content1 .table_con .table_right ul::after{content: ""; clear: both; float: none; display: block;}


.content2 .con{margin-top:82px; }
.content2 .con ul{float: left; height:228px; width:382px; text-align: center; margin-left: 27px; position: relative;}

.content2 .con ul:FIRST-CHILD{margin-left: 0px;}

.content2 .con ul .img_block{background-position: center center; background-repeat: no-repeat; width: 382px; }
.content2 .con ul.block_1 .img_block{background-image: url(../../images/com/fo/about/con2_1.png);  transition: all .4s ease .0s; height: 0px;}
.content2.scroll .con ul.block_1 .img_block{height: 228px;}
.content2 .con ul.block_2 .img_block{background-image: url(../../images/com/fo/about/con2_2.png); margin-top:228px;  transition: all .4s ease .0s; height: 0px;}
.content2.scroll .con ul.block_2 .img_block{height: 228px; margin-top: 0px;}
.content2 .con ul.block_3 .img_block{background-image: url(../../images/com/fo/about/con2_3.png);  transition: all .4s ease .0s; height: 0px;}
.content2.scroll .con ul.block_3 .img_block{height: 228px;}
.content2 .con::after{content: ""; clear: both; float: none; display: block;}

.content2 .con ul .txt_block{   position: absolute; bottom: 8px; width: 100%; text-align: center; opacity:0; transition: all .4s ease .4s;}
.content2.scroll .con ul .txt_block{opacity:1;}
.content2 .con ul .txt_block span{color: #ffffff; letter-spacing:0.3px; padding: 4px 20px; font-size: 12px; background-color: #44484a; display: inline-block; font-family:'Malgun Gothic', '맑은 고딕';}


.content3{position:relative; height: 450px; background-image: url(../../images/com/fo/about/bg1.jpg); background-position: center center; background-repeat: no-repeat; overflow: hidden; margin-top: 130px;}
.content3 .title{position: absolute; left: 50%; margin-left: -533px; margin-top: 128px; font-size: 36px; color: #ffffff;}
.content3 .slide_con .swiper-container .swiper-wrapper .swiper-slide ul{position: absolute; left: 50%; margin-left: -533px; top:40px; }
.content3 .slide_con .swiper-container .swiper-wrapper .swiper-slide ul li{font-size: 18px; padding-left:30px; color: #ffffff;  background-image: url(../../images/com/fo/about/check_icon.png); background-position: left center; background-repeat: no-repeat; margin-bottom:24px; }


.content3 .swiper-container{height: 315px; position:static; margin-top:286px;opacity:0; transition: all .4s ease .0s;}
.content3.scroll .swiper-container{margin-top: 186px; opacity:1;}
.content3 .swiper-container::BEFORE{content:""; position: absolute; width: 100%; height: 100%; top: 0px;}
.content3 .swiper-container-vertical > .swiper-pagination-bullets{right:50%; margin-right: -661px;}
.content3 .swiper-pagination-bullet{background-color: transparent; border: 1px solid #ffffff;}
.content3 .swiper-pagination-bullet-active{background-color: #ffffff; border: 1px solid #ffffff;}


.content4{padding-top: 100px; margin-bottom:0px; padding-bottom:250px; margin-top: 0px; background-color: #e0e0e0; letter-spacing: -0.7px;}
.content4 .con{ background-image: url(../../images/com/fo/about/history_bg.png); text-align: center; background-position: top center; background-repeat: no-repeat; height: 534px; width: 1089px; margin: auto; margin-top: 168px; padding-bottom: 224px; position: relative;
opacity:0; transition: all .4s ease .0s}
.content4.scroll .con{opacity:1;}

.content4 .con .big_title{position: absolute; font-size: 39px; color: #a50034; font-weight: bold; background-color: #e0e0e0; padding: 20px; left: 400px; top: 210px;
opacity:0; top:310px; transition: all .4s ease .1s;}
.content4.scroll .con .big_title{opacity:1; top:210px;}
.content4 .con .row_1{margin-top: -70px; position: absolute;}
.content4 .con .row_1 ul{width:250px; margin-left: -125px; position: absolute;}
.content4 .title{font-size: 24px; color: #000000; padding-bottom: 7px;}
.content4 .con .row_1 ul .title::BEFORE{content: ""; position: absolute; width: 25px; height: 4px; background-color: #a50034; left: 50%; margin-left: -12.5px; margin-top: -14px; }
.content4 .txt{line-height: 18px; }
.content4 .txt p{color:#333333; font-size: 14px; font-weight: 700;}
.content4 .txt span{color:#797979; font-size: 11px;font-family:'Malgun Gothic', '맑은 고딕';}
.content4 .con .row_1 ul.year_2018{left: 212px;}
.content4 .con .row_1 ul.year_2016{left: 466px;}
.content4 .con .row_1 ul.year_2015{left: 712px;}
.content4 .con .row_1 ul.year_2014{left: 919px;}


.content4 .con .row_2{margin-top: 348px; position: absolute;}
.content4 .con .row_2 .title{padding-bottom: 3px;}
.content4 .con .row_2 ul{width:400px; margin-left: -200px; position: absolute;}
.content4 .con .row_2 ul.year_2013{left: 921px;}
.content4 .con .row_2 ul.year_2011{left: 212px;}



.content4 .con .row_3{margin-top: 550px; position: absolute;}
.content4 .con .row_3 ul{width:400px; margin-left: -200px; position: absolute;}
.content4 .con .row_3 ul.year_2009{left: 211px;}
.content4 .con .row_3 ul.year_2008{left: 550px;}
.content4 .con .row_3 ul.year_2007{left: 920px;}

.content4 .con .row_3 ul .txt::BEFORE{content: ""; position: absolute; width: 25px; height: 4px; background-color: #a50034; left: 50%; margin-left: -12.5px; bottom:-15px;}



.sub_content{margin-bottom: 0px;}


.content1 .table_con .table_right .tbody1 li{line-height:17px; }