.center {text-align:center}
.inner {
width: 100%;
max-width: 1320px;
margin: 0 auto;
position: relative;
}

.inner_s {
width: 100%;
padding:0px 100px;
margin: 0 auto;
position: relative;
border-top:1px solid #dbdbdb
}

.sub_banner{padding: 110px 20px 110px 80px; background-size: cover;}
.sub_banner.company {background:url('../img/company/banner01.png') no-repeat center; background-size: cover;}
.sub_banner.community {background:url('../img/company/banner02.png') no-repeat center; background-size: cover;}
.sub_banner.contact {background:url('../img/company/banner03.png') no-repeat center; background-size: cover;} 
.sub_banner.product {background:url('../img/company/banner04.png') no-repeat center; background-size: cover;}
.sub_banner.process {background:url('../img/company/banner05.png') no-repeat center; background-size: cover;}
.sub_banner.dafara {background:url('../img/company/banner05.png') no-repeat center; background-size: cover;}

.tab-menu{width: 100%; margin: 50px 0;}
.tab-menu ul{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.tab-menu ul li{width: 24%; text-align: center; border-bottom: 1px solid #656565; box-sizing: border-box; padding-bottom: 10px; transition: 0.2s; margin-top: 10px;}
.tab-menu.tab-01 ul li{width: 100%;}
.tab-menu.tab-02 ul li{width: 49%;}
.tab-menu.tab-03 ul li{width: 32.33%;}

.tab-menu ul li a{transition: 0.2s; color: #656565;}
.tab-menu ul li:hover,
.tab-menu ul li.on{border-bottom: 1px solid #004589;}
.tab-menu ul li:hover a,
.tab-menu ul li.on a{color: #004589;}

.pocess01 {padding:50px 0px 100px}
.pocess01 ul {display: flex; flex-wrap: wrap; justify-content: space-between;}
.pocess01 ul li{width: 49%; margin-bottom:2%}
.pocess01 ul li img {width:100%}

.pocess02 {padding:50px 0px 100px}
.pocess02 img {width:100%}

.sub_company .text01 {padding:80px 0px; color: #343b6e; word-break: keep-all;}

.fir-banner{background-image: url(../img/company/sub-banner.png); background-repeat: no-repeat; background-size: cover; background-position: center; padding: 100px 20px; text-align: center; margin: 100px 0;}

.sub_company .overview ul {display:flex; flex-wrap: wrap; padding:50px 0px 100px; position: relative;}
.sub_company .overview ul::after{content: ""; position: absolute; width: 80%; height: 1px; background-color: #acacac; top: 38%; left: 50%; transform: translateX(-50%); z-index: -1;}
.sub_company .overview ul li {width:calc(33.3% - 20px); margin-right:20px; text-align: center;}
.sub_company .overview ul li:last-child {margin-right:0px}
.sub_company .overview ul li > div img{display: inline;}
.sub_company .overview ul li h3 {padding-top:20px}
.sub_company .overview ul li p{color: #656565;}


.ab_flex {display:flex; justify-content: space-between;}
.ab_flex > div:first-child {padding-right:50px}

.map {padding-bottom:150px}
.map ul {display:flex; gap:30px;     flex-wrap: wrap;}
.map ul li {width:calc(50% - 15px)}
.map ul li > div:first-child {display:flex;     align-items: center;}
.map ul li > div:first-child img {margin-right:10px} 
.map ul li > div:nth-child(2) {padding-bottom:10px}
.seongju_lay  {padding:50px 0px 100px}
.seongju_lay .download {text-align:center; padding-bottom:40px}
.seongju_lay .download a {color:#656565; border:1px solid #e2e2e2; padding:20px 80px; display:inline-block; transition: 0.2s;}
.seongju_lay .download a:hover  {border:1px solid #004589; background:#004589; color:#fff}

.seongju_lay .img img{width:100%; max-width:520px; margin: 0 auto;}
.yasuda .img img{width:100%; max-width:800px; margin: 0 auto;}


.yasuda  {padding:50px 0px 100px}

.yasuda ul {display:flex; gap:20px; justify-content: center; padding-top:50px}
.yasuda ul img {width:100%; max-width:332px}


.main_pcs{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; padding:50px 0px 100px}
.main_pcs li{width: calc(33.3333% - 10px); min-height: 300px; padding: 20px; border-top: 1px solid #c8c8c8; position: relative; transition: .25s;}
.main_pcs li > img{position: absolute; right: 20px; top: 20px;}
.main_pcs li .hide{position: absolute; bottom: 20px; left: 20px; height: 38px; overflow: hidden; line-height: 38px; transition: .25s;}
.main_pcs li .hide p{line-height: 150%;}
.main_pcs li:nth-child(1n+7){border-bottom: 1px solid #c8c8c8;}
.main_pcs li:last-child {border-bottom:0px;}

.main_pcs li:hover .hide{height: auto;}
.main_pcs li:hover .hide p{opacity: 1; visibility: visible;}
.main_pcs li:hover .hide h3{color: #043292;}
.main_pcs li:hover{border-top: 1px solid #043292;}

.main_pcs li .icon {
    position: absolute;
    bottom: 20px;
    right: 20px;
}

#f_top {position:absolute; right:0; top:0px;}

@media screen and (max-width : 1200px) {
}
@media screen and (max-width : 1020px) {
}
@media screen and (max-width : 900px) {
	.main_pcs li{width: calc(50% - 10px);  min-height: 350px; padding: 20px 10px;}
	.main_pcs li:nth-child(4){border-bottom: 0;}
	.main_pcs li .hide{left: 10px; height: auto; line-height: 30px;}
	.main_pcs li .hide p{opacity: 1; visibility: visible;}
	
	.tab-menu ul {flex-wrap: wrap;}
	.tab-menu.tab-03 ul li {width:49%}	
	
	.pocess01 ul li{width:100%; margin-bottom:10px}
	
	.yasuda ul  {flex-wrap: wrap;}
	.yasuda ul li {width:100%}
.yasuda ul img {width:100%; max-width:900px}
}
@media screen and (max-width : 550px) {
	.main_pcs li{width: calc(100%);  min-height: 200px;}
	.main_pcs li:nth-child(3){border-bottom: 0;}
	.main_pcs li > img{height: 60px;}
}


@media screen and (max-width:1024px){
.map ul {gap:50px}
.map ul li {width:calc(100%)}
.ab_flex {flex-wrap: wrap;}
.ab_flex > div:first-child {padding-right:0px; padding-bottom:30px; width: 100%;}
.ab_flex img {width:100%}
}







.sec-banner{padding: 140px 20px; background-image: url(../img/company/about-bg.png); background-repeat: no-repeat; background-size: cover; background-position: center; margin: 50px 0 100px;}
.sec-banner ul{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding-top:50px}
.sec-banner ul li{padding: 20px 0;  margin:20px 0px; display: flex; width: 50%; justify-content: center;}
.sec-banner ul li img{margin-right: 20px;}
.sec-banner ul li:nth-child(even){border-left: 1px solid #fff; box-sizing: border-box;}

.root_daum_roughmap .cont .section.lst, .root_daum_roughmap .wrap_controllers {display:none}
.history{background-image: url(../img/sub/history-bg.png); background-repeat: no-repeat; background-size: cover;  background-position: center center;}
.history .history-ctt{margin-top: 20px;}
.history .history-ctt > ul{display: flex;}
.history .history-ctt > ul > li{margin-right: 20px; cursor: pointer; color: #f42717; transition: 0.2s;}
/* .history .history-ctt > ul > li:hover,
.history .inner .history-ctt > ul > li.on{color: #f42717;} */

.history .history-ctt .tab-list{ margin-bottom: 100px;}
.history .history-ctt .tab-list ul{display: none;}
.history .history-ctt .tab-list ul:nth-child(1){display: flex;}
.history .history-ctt .tab-list{width: auto;  overflow-x: scroll; margin-top: 40px;  position: relative;}
.history .history-ctt .tab-list > ul{width: auto; height: 300px;}
.history .history-ctt .tab-list > ul:nth-child(1){min-width: 4000px; display: flex;}
.history .history-ctt .tab-list > ul:nth-child(2){min-width: 2500px;}
.history .history-ctt .tab-list > ul:nth-child(3){min-width: 2500px;}
.history .history-ctt .tab-list > ul::before{content: ""; width: 4000px; border-top: 1px solid #acacac; left: 0; position: absolute; top: 4px; z-index: 2;}
.history .history-ctt .tab-list > ul:nth-child(2):before {width: 2500px;}
.history .history-ctt .tab-list > ul:nth-child(3):before {width: 2500px;}

.history .history-ctt .tab-list > ul > li:not(:last-child){margin-right: 80px;}
.history .history-ctt .tab-list > ul > li .dot{width: 8px; height: 8px; background-color: #f42717; border-radius: 100%; position: relative; z-index: 3;}
.history .history-ctt .tab-list > ul > li p:nth-child(2){color: #f42717; padding: 20px 0 10px;}
.history .history-ctt .tab-list > ul > li p{padding: 5px 0;}

.history .history-ctt .tab-list::-webkit-scrollbar{width: 100%; height: 6px; background: #b6b6b6; border-radius: 20px;}
.history .history-ctt .tab-list::-webkit-scrollbar-thumb{background: #000; border-radius: 20px;}

.certifi-ctt{margin: 50px 0 150px;}
.certifi-ctt .certifi_item{width: 100%;}
.certifi-ctt .certifi_item .item{text-align: center;}

.certifi-ctt .slick-next{left: 0 !important; bottom: 50%;}
.certifi-ctt .slick-prev{right: 0 !important; bottom: 50%;}



@media screen and (max-width: 1800px){
    .inner {padding: 0px 20px; }
    .sub_banner{margin-left: 0 !important;}
	.inner_s  {padding: 0px 20px; }

}
@media screen and (max-width: 1600px){
    /* .sub_company{padding: 0 20px;} */
}

@media screen and (max-width: 1400px){
    .sub_company .overview ul li > div{width: 70%; margin: 0 auto;}
    .sub_company .overview ul li > div img{width: 100%; }

    .sec-banner{padding: 100px 20px;}
    .sec-banner ul li{width: 50%;}
    .sec-banner ul li:nth-child(3){border-left: 0; margin-top: 20px;}
    .sec-banner ul li:nth-child(4){margin-top: 20px;}
}

@media screen and (max-width:1200px){

    .sub_company .overview ul::after{top: 35%;}
}

@media screen and (max-width:1024px){
    .sub_company .overview ul::after{top: 30%;}

    
}

@media screen and (max-width: 900px){

}

@media screen and (max-width:768px){
    /* .sub_company .overview ul{padding: 20px 0;} */
    .sub_company .overview ul li {width:100%; margin-right: 0;}
    .sub_company .overview ul li:not(:last-child){margin-bottom: 40px;}
    .sub_company .overview ul li > div{width: 60%; margin: 0 auto;}
    .sub_company .overview ul::after{display: none;}

    .sec-banner{padding: 50px 20px;}
    .sec-banner ul li{width: 100%;}
    .sec-banner ul li:nth-child(2){border-left: 0;}
    .sec-banner ul li:nth-child(4){border-left: 0;}
    .sec-banner ul li{border-top: 1px solid #fff; margin-top: 20px;}
    .sec-banner ul li:first-child{border-top: 0; margin-top: 0px;}

    .history .inner .history-ctt > ul{flex-direction: column;}

}

@media screen and (max-width:600px){
    .sub_banner{padding: 100px 20px 100px 40px;}

    .history .history-ctt > ul{flex-direction: column;}
}

@media screen and (max-width:480px){
    .sub_banner{padding: 90px 20px 90px 20px;}

}