/* company.css */

.intro_sec1 .inner{display: table;}
.intro_sec1 .tit_area{display:table-cell; padding: 20px 50px 40px 0; width: 50%; vertical-align: middle;}
.intro_sec1 .figure_area{display:table-cell; width: 50%; background: url(../../img/company/section1_img1_2.jpg); background-size: cover; background-position: center;}
.intro_sec1 .figure_area img{width: 100%; display: none;}
.intro_sec2{position: relative; padding: 0;}
.intro_sec2::before{display: block; content: ""; position: absolute; width: 100%; height: 50%; top: 0; background: #fff;}
.intro_sec2::after{display: block; content: ""; position: absolute; width: 100%; height: 50%; bottom: 0; background: #f5f5f5;}
.intro_sec2 .list_area{background: #fff; position: relative; z-index: 10; border: 1px solid #ddd;}
.intro_sec2 .list_area li{float: left; padding: 40px 30px 50px 30px; width: 25%;}
.intro_sec2 .list_area li .num{display: block; margin: 0 auto; width: 40px; height: 40px; background: #fac60e; border-radius: 50%; text-align: center; line-height: 40px; color: #fff; font-size: 18px; font-weight: 700;}
.intro_sec2 .list_area li .tit{margin: 20px auto 10px; font-size: 18px; font-weight: 700; text-align: center;}
.intro_sec2 .list_area li .desc{text-align: center; font-size: 14px; line-height: 20px; color: #888;} 
.intro_sec3{background: #f5f5f5;}
.intro_sec3 .figure_area{margin-bottom: 50px;}
.intro_sec3 .figure_area img{width: 100%;}
.intro_sec3 .tit_area.subpage .parallelogram{margin-left: auto; margin-right: auto;}
.intro_sec3 .tit_area.subpage *{text-align: center;}
.intro_sec4 .tit_area.subpage .parallelogram{margin-left: auto; margin-right: auto;}
.intro_sec4 .tit_area.subpage *{text-align: center;}
.intro_sec4 .tit_area.subpage .sub_tit{margin: 35px auto 0;}
.intro_sec4 .timeline_area{margin-top: 60px;}
.intro_sec4 .timeline > ul{float: left; width: 48%;}
.intro_sec4 .timeline .right{float: right;}
.intro_sec4 .timeline_1li{float: left; margin-bottom: 40px; width: 100%;}
.intro_sec4 .timeline_1li .year_box{float: left; position: relative; width: 190px; height: 110px;}
.intro_sec4 .timeline_1li .year{background: #fac60e; width: 110px; height: 100%; border-radius: 50%; text-align: center; line-height: 110px; color: #fff; font-size: 24px;}
.intro_sec4 .left .timeline_1li:nth-child(2n) .year, .intro_sec4 .right .timeline_1li:nth-child(2n-1) .year{background: #3a3838;}
.intro_sec4 .timeline_1li .circle{float: right; display: block; position: absolute; width: 65px; height: 1px; background: #ccc; top: 50%; left: 110px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}
.intro_sec4 .timeline_1li .circle::after{display: block; content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ccc; position: absolute; right: 0; top: -3px;}
.intro_sec4 .timeline_1li .detail_box{float: right; width: 64%;}
.intro_sec4 .timeline_1li .detail_box ul{float: left; width: 100%;}
.intro_sec4 .timeline_1li .detail_box li *{display: inline-block; float: left;}
.intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 43px;}
.intro_sec4 .timeline_1li .detail_box .month{color: #444; font-weight: 700; font-size: 18px; width: 20%;}
.intro_sec4 .timeline_1li .detail_box .detail{width: 80%; color: #888; font-size: 18px;}
.dir_sec1 .tit_area.subpage .parallelogram{margin-left: auto; margin-right: auto;}
.dir_sec1 .tit_area.subpage *{text-align: center;}
.dir_sec1 .dir_con{margin-top: 45px;}
.dir_sec1 .map_area{width: 100%; height: 490px;}
.dir_sec1 .map_box{height: 100%;}
.dir_sec1 .map_box .map_img{display: block; height: 100%;}
.dir_sec1 .map_box .root_daum_roughmap{width: 100%; height: 100%;}
.dir_sec1 .map_box .root_daum_roughmap .wrap_map{height: 100%;}
.roughmap_maker_label, .root_daum_roughmap .wrap_btn_zoom{display: none !important;}
.dir_sec1 .desc_area{padding: 45px 0 0;}
.dir_sec1 .desc_area ul{float: left; width: 50%;}
.dir_sec1 .desc_area .info{}
.dir_sec1 .desc_area .tit{font-size: 18px; font-weight: 700;}
.dir_sec1 .desc_area .tit::before{display: inline-block; margin: 0 25px 8px 0; content: ""; width: 45px; height: 2px; background: #fac60e;}
.dir_sec1 .desc_area li{padding-left: 70px;}
.dir_sec1 .desc_area li .tit2{margin: 20px 0 10px; font-size: 18px; font-weight: 300; word-break: keep-all;}
.dir_sec1 .desc_area li .desc{font-size: 14px; color: #666;}
.dir_sec1 .desc_area li .desc::before{display: inline-block; margin: 0 8px 5px 0; content: ""; width: 5px; height: 1px; background: #666;}
@media screen and (max-width: 1199px){
    .intro_sec2 .list_area li{padding: 35px 20px 40px 20px;}
    .intro_sec2 .list_area li .num{font-size: 16px;}
    .intro_sec2 .list_area li .tit{margin: 15px auto 10px; font-size: 16px;}
    .intro_sec2 .list_area li .desc{font-size: 13px;} 
    .intro_sec4 .tit_area.subpage .sub_tit{margin: 32px auto 0;}
    .intro_sec4 .timeline_1li{margin-bottom: 30px;}
    .intro_sec4 .timeline_1li .year_box{width: 160px; height: 100px;}
    .intro_sec4 .timeline_1li .year{width: 100px; line-height: 100px; font-size: 18px;}
    .intro_sec4 .timeline_1li .circle{width: 50px; left: 100px;}   
    .intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 38px;}
    .intro_sec4 .timeline_1li .detail_box .month{font-size: 16px;}
    .intro_sec4 .timeline_1li .detail_box .detail{font-size: 16px;}
    .dir_sec1 .dir_con{margin-top: 40px;}
    .dir_sec1 .map_area{height: 450px;}
    .dir_sec1 .desc_area{padding: 40px 0 0;}
    .dir_sec1 .desc_area ul{width: 48%;}
    .dir_sec1 .desc_area .transit{float: right;}
    .dir_sec1 .desc_area .tit{font-size: 16px;}
    .dir_sec1 .desc_area .tit::before{margin: 0 25px 6px 0; width: 40px;}
    .dir_sec1 .desc_area li{padding-left: 65px;}
    .dir_sec1 .desc_area li .tit2{margin: 15px 0 8px; font-size: 16px;}
    .dir_sec1 .desc_area li .desc{font-size: 13px;}
}
@media screen and (min-width: 768px) and (max-width:1024px){
    .intro_sec4 .timeline > ul{width: 49%;}
    .intro_sec4 .timeline_1li .year_box{width: 130px; height: 90px;}
    .intro_sec4 .timeline_1li .year{width: 90px; line-height: 90px;}
    .intro_sec4 .timeline_1li .circle{width: 40px; left: 90px;}   
    .intro_sec4 .timeline_1li .detail_box{width: 60%;}
    .intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 33px;}
    .intro_sec4 .timeline_1li .detail_box .month{width: 25%;}
    .intro_sec4 .timeline_1li .detail_box .detail{width: 75%;}  
} 
@media screen and (max-width: 767px){
    .intro_sec1 .tit_area{display:block; padding: 0; width: 100%; vertical-align: middle;}
    .intro_sec1 .figure_area{display:block; margin-top: 40px; width: 100%; background: none}
    .intro_sec1 .figure_area img{width: 100%; display: block;}
    .intro_sec2 .list_area li{width: 50%;}
    .intro_sec3 .figure_area{height: 300px;}
    .intro_sec3 .figure_area .figure{width: 100%; height: 100%; overflow: hidden;}
    .intro_sec3 .figure_area img{position: relative; width: auto; height: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
    .intro_sec3 .tit_area.subpage .parallelogram{margin-left: auto; margin-right: auto;}
    .intro_sec3 .tit_area.subpage *{text-align: center;}
    .intro_sec4 .timeline_area{margin-top: 40px;}
    .intro_sec4 .timeline > ul{width: 100%;}
    .intro_sec4 .timeline_1li .year_box{width: 150px;}
    .intro_sec4 .timeline_1li .circle{width: 40px;}   
    .intro_sec4 .timeline_1li .detail_box{float: left; padding-left: 20px; width: 63%;}
    .intro_sec4 .timeline_1li .detail_box li{overflow: hidden;}
    .intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 38px;}
    .intro_sec4 .timeline_1li .detail_box .month{width: 65px;}
    .intro_sec4 .timeline_1li .detail_box .detail{width: 73%;} 
    .dir_sec1 .map_area{height: 400px;}
    .dir_sec1 .desc_area ul{margin-bottom: 30px; width: 100%;}
}
@media screen and (max-width:480px){
    .intro_sec2 .list_area li{padding: 30px 20px; width: 100%;}
    .intro_sec2 .list_area li .num{font-size: 14px;}
    .intro_sec2 .list_area li .tit{font-size: 14px;}
    .intro_sec2 .list_area li .desc{font-size: 12px; line-height: 18px;} 
    .intro_sec3 .figure_area{height: 260px;}
    .intro_sec4 .tit_area.subpage .sub_tit{margin: 30px auto 0;}
    .intro_sec4 .timeline_area{margin-top: 35px;}
    .intro_sec4 .timeline_1li .year_box{width: 115px; height: 80px;}
    .intro_sec4 .timeline_1li .year{width: 80px; line-height: 80px; font-size: 16px;}
    .intro_sec4 .timeline_1li .circle{width: 30px; left: 80px;}   
    .intro_sec4 .timeline_1li .detail_box{float: left; padding-left: 10px; width: 65%;}
    .intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 28px;}
    .intro_sec4 .timeline_1li .detail_box .month{width: 45px; font-size: 14px;}
    .intro_sec4 .timeline_1li .detail_box .detail{width: 79%; font-size: 14px;} 
    .dir_sec1 .dir_con{margin-top: 30px;}
    .dir_sec1 .map_area{height: 300px;}
    .dir_sec1 .desc_area{padding: 30px 0 0;}
    .dir_sec1 .desc_area ul{margin-bottom: 20px;}
    .dir_sec1 .desc_area .tit{font-size: 15px;}
    .dir_sec1 .desc_area .tit::before{margin: 0 15px 6px 0; width: 25px;}
    .dir_sec1 .desc_area li{padding-left: 40px;}
    .dir_sec1 .desc_area li .tit2{margin: 15px 0 5px; font-size: 14px;}
    .dir_sec1 .desc_area li .desc{font-size: 12px;}   
}
@media screen and (max-width: 400px){
    .intro_sec4 .timeline_1li .year_box{float: none; margin: 0 auto; width: 80px; height: 115px;}
    .intro_sec4 .timeline_1li .year{height: 80px;}
    .intro_sec4 .timeline_1li .circle{width: 1px; height: 30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); top: 80px;}
    .intro_sec4 .timeline_1li .circle::after{top:30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}
    .intro_sec4 .timeline_1li .detail_box{padding: 0; width: 100%;}
    .intro_sec4 .timeline_1li .detail_box ul{position: relative; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: auto; min-width: 282px;}
    .intro_sec4 .timeline_1li .detail_box li:first-child{margin-top: 20px;}
    .intro_sec4 .timeline_1li .detail_box .month{width: 15%;}
    .intro_sec4 .timeline_1li .detail_box .detail{width: 85%;}
}