@charset "utf-8";
/* 서브 섹션  */
#sub_top{display:block; width:100%; height:340px; text-align:center; color:#fff; padding-top:180px; box-sizing:border-box}

#sub_top.sub_01{width:100%; background:#5883a3 url("../img/sub/subtop_01.png") no-repeat center bottom; margin:0 auto}
#sub_top h2{font-size:48px; font-weight:500; margin-bottom:20px}

.dir li{position:relative; display:inline-block}
.dir li a{position:relative; display:block;  color:#fff; font-size:14px; padding:0 10px 0 15px; background:url("../img/sub/icon_dir.png") no-repeat left center }
.dir li a::after{position:absolute; top:0; right:0; display:block; width:5px; height:9px}
.dir li:first-child a{padding:0 10px 0 20px; background:url("../img/sub/icon_home.png") no-repeat left center}

.sub_container{width:100%; color:#444; line-height:1.5; display:table}
.sub_wrap{width:1400px; margin:0 auto; padding:50px 0}


.sub_headcopy{position:relative; display:block; text-align:center; font-size:30px; font-weight:400; line-height:45px; color:#000; letter-spacing:-1px; padding-bottom:30px; margin-bottom:30px}
.sub_headcopy strong{font-weight:600}
.sub_headcopy::after{content:""; position:absolute; bottom:0; left:calc(50% - 60px); display:block; width:120px; height:1px; background:#000}

/* 아카넷소개 */
.company_info{width:100%; display:flex; justify-content: space-evenly; margin-top:50px}

.outline {width:30%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:center}
.outline dt{width:120px; font-size:24px; color:#000; font-weight:500; padding-bottom:15px; margin-bottom:15px}
.outline dd{width:calc(100% - 120px); font-size:18px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #eee}

.main_busi{width:50%}
.main_busi p.tit{position:relative; display:block;  width:100%; font-size:24px; color:#000; font-weight:500}
.main_busi p.tit::after{content:""; position:absolute; width:calc(100% - 120px); height:1px; top:50%; right:0; background:#ff3c00}

.main_busi dl{margin-top:40px; width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-start }
.main_busi dt{position:relative; width:230px; font-size:20px; color:#000; font-weight:500; padding:0 0 20px 18px; margin-bottom:15px; box-sizing:border-box}
.main_busi dt::before{content:"";position:absolute; top:15px; left:0; width:6px; height:2px; background:#ff3c00 }
.main_busi dd{width:calc(100% - 230px); font-size:16px; padding-bottom:15px; margin-bottom:15px; border-bottom:1px solid #eee}



/* 사업실적 메뉴 */

.si_menu{width:100%; height:60px; border-bottom:1px solid #ddd; margin:0 auto}
.si_menu ul{display:flex; width:1400px; height:100%; margin:0 auto; align-items:center; justify-content:space-between; flex-wrap:wrap}
.si_menu li{border-right:1px solid #eee; width:10%;  height:100%; text-align:center; box-sizing:border-box}
.si_menu li a{position:relative; display:flex; align-items:center; justify-content:center; text-align:center;  width:100%; height:100%; font-size:18px; font-weight:500 }
.si_menu li:last-child{border-right:none}

.si_menu li a.on{font-size:20px; font-weight:600}
.si_menu li a.on::after{content:""; position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:#ff3c00}


/* 연도별 실적 */
.si_info{position:relative; width:1400px; display:block; margin:50px auto 0 auto; padding:0 0 0 240px }
.si_info p.year{position:absolute; top:0; left:0; font-size:62px;font-family:'GmarketSans'; color:#005baf; font-weight:500; line-height:62px; text-align:center}

.si_info td:nth-child(1){text-align:left; padding-left:30px; box-sizing:border-box}
.si_info td:nth-child(2){text-align:left}

.si_info col:nth-child(1){width:30%}
.si_info col:nth-child(3){width:20%}


/*연혁*/

.history{position:relative; width:900px; display:block;margin:0 auto}
.history div{position:relative; width:100%; display:block; padding:0 0 0 200px }
.history p{position:absolute; top:0; left:0; font-size:50px;font-family:'GmarketSans'; color:#005baf; font-weight:500; line-height:50px; text-align:center}

.history ul{position:relative; border-left:1px solid #eee; padding:0 0 50px 0}
.history ul::before{content:""; position:absolute; top:6px; left:-12px; display:block; width:23px; height:23px; background:url("../img/sub/history_cir.png") no-repeat center}
.history li{position:relative; width:100%; display:block; padding:0 0 30px 120px; font-size:18px }
.history li strong{position:absolute; top:5px; left:50px; display:block; font-size:20px; color:#000; font-weight:500; line-height:20px; text-align:center}



/* ci */
.ci{width:100%; text-align:center}

.ci h3{font-size: 24px; color: #000; text-align:left; background: url("../img/sub/dot_gray.png") repeat-x left center; margin-bottom:20px;
    widht:100%; display:block}
.ci h3 span{background:#fff; padding-right:20px}
.ci h4{font-size:18px; text-align:left; font-weight:400; line-height:26px;}
.ci h4 strong{font-weight:500; color:#000}

.ci_01{width:100%; display:block; padding:50px 20px 70px 20px; box-sizing:border-box}
.ci_01 p{algin-text:center}
.ci_01 ul{display:inline-flex; align-items: center; text-align:center; margin-top:50px}
.ci_01 li:nth-child(1){font-size:30px; font-weight:600; color:#000}
.ci_01 li:nth-child(2){font-size:26px; padding-left:20px; letter-spacing:-1px}

.ci_eng{width:100%; display:block; ; margin:20px auto 60px auto}
.ci_eng ul{width:100%; padding:60px 10%; display:flex; justify-content:space-between; box-sizing:border-box}
.ci_eng li{width:20%} 
.ci_eng li:nth-child(1){width:33%}

.ci_kor{width:100%; display:block; margin:20px auto 60px auto}
.ci_kor ul{width:100%; padding:60px 10%; display:flex; justify-content:space-between; box-sizing:border-box}
.ci_kor li{width:27%} 

.ci_color{width:100%; display:flex; justify-content:space-between;  padding:60px 5% 100px 10%; box-sizing:border-box}
.ci_color div{width:30%;  display:flex; justify-content: flex-start; align-items: center}
.ci_color p{display:block; width:90px; height:90px; border-radius:100px; text-indent:-9999px}
.ci_color ul{margin-left:35px; text-align:left}
.ci_color li{font-size:16px; font-weight:500; text-align:left}

.color_01{background:#116CA8}
.color_02{background:#c30e3d}
.color_03{background:#999}

.btn_down2{display:inline-block; background:#0060bf url("../img/common/icon_down.png") no-repeat 88% center; padding:12px 100px 12px 40px; color:#fff; font-size:18px; text-align:left}
.btn_down2:hover{background:#3c455c url("../img/common/icon_down.png") no-repeat 88% center;}



@media (max-width:1600px) {
#sub_top{height:300px; padding-top:150px}   
    
    
.sub_wrap{width:90%}   
.company_info{justify-content:space-between} 
.outline {width:40%} 
.main_busi{width:55%}

    
.si_menu ul{width:100%}
.si_info {width:100%; padding:0 0 0 220px}
}


@media (max-width:1400px) {

.ci_kor li img{max-width:100%}
    
}


@media (max-width:1150px) {
.sub_headcopy{font-size:26px; line-height:40px}
.sub_headcopy br{display:none}    
.company br{display:none} 
  
    
.outline {width:320px} 
.main_busi{width:calc(100% - 370px)}
.outline dt{width:80px; font-size:20px; }  
.outline dd{font-size:16px; }
.main_busi p.tit{font-size:20px;}
.main_busi p.tit::after{width:calc(100% - 90px); }
.main_busi dt{position:relative; width:170px; font-size:16px; }
.main_busi dt::before{top:12px; left:0; width:6px;} 
.main_busi dd{width:calc(100% - 180px)}
	
.ci_01 li:nth-child(1){font-size:25px}
.ci_01 li:nth-child(2){font-size:20px}  
     
}



@media (max-width:940px) {
  
 #sub_top{height:220px; padding-top:110px}      
    
.outline{align-items:flex-start} 
.outline dt{padding-bottom:15px; margin-bottom:10px}
.outline dd{padding-bottom:15px; margin-bottom:10px}
    
.main_busi dl{margin-top:10px; width:100%; display:block; }    
.main_busi dt{width:100%; padding:0 0 0 13px; margin-bottom:0;}
.main_busi dt::before{content:"";position:absolute; top:12px;}
.main_busi dd{width:100%; padding:0 0 5px 13px;  border-bottom:none}    
    
    
.si_info {width:100%; padding:0; margin:0 0 30px 0}
.si_info p.year{position:static; font-size:40px; text-align:left} 
.si_info p.year br{display:none}
    

.si_info col:nth-child(1){width:30%}
.si_info col:nth-child(3){width:20%} 
.si_info td:nth-child(1){padding-left:10px}
    
.history{width:100%;}
.history div{ padding:0 0 0 140px }
.history p{font-size:40px;}
.history ul{padding:0 0 30px 0}
.history ul::before{top:6px; left:-9px; width:18px; height:18px; background:url("../img/sub/history_cir.png") no-repeat center / cover}
.history li{padding:0 0 20px 100px; font-size:16px }
.history li strong{top:0; left:30px; display:block; font-size:20px}
	
.ci h4 br{display:none}
	

.ci_color p{width:60px; height:60px; }
.ci_color ul{margin-left:10px}
.ci_color li{display:block; padding-left:10px; font-size:14px}  
    
}



@media (max-width:800px) {
    
.ci h4{font-size:16px; line-height:22px}
    
.ci_01{padding:20px 0 50px 0}
.ci_01 ul{display:block; text-align:center; margin-top:20px}   
    
.ci_eng,
.ci_kor{margin:20px auto}
.ci_eng ul,
.ci_kor ul,
.ci_color{padding:20px 0 30px 0}
}


@media (max-width:700px) and (min-width:451px){    

.ci_eng ul{padding: 30px 0}
.ci_color div{display:block} 
.ci_color ul{margin:10px 0}
.ci_color li{padding-left:0}    
}



@media (max-width:640px) {
 
#sub_top.sub_01{background:#5883a3}
#sub_top h2{font-size:40px; margin-bottom:15px}
	
.sub_headcopy{font-size:22px; line-height:30px}	
.company.center{display:none}
    
.company_info{display:block; }    
.outline {width:100%}     
/*.main_busi{width:100%; display:flex; align-items:flex-start; justify-content:space-between} */
.main_busi{width:100%; display:block}
/*.main_busi p.tit{width:80px; padding-bottom:10px}*/
.main_busi p.tit::after{display:none} 
/*.main_busi dl{width:calc(100% - 120px); margin-top:0}  */ 
.main_busi dd br{display:none}
    
    
.si_menu{height:90px; border-bottom:none}
.si_menu li{height:50%; border-bottom:1px solid #ddd}
.si_menu li{width:20%}
.si_menu li:nth-child(5){border-right:none}
    
.si_info col:nth-child(3),
.si_info th:nth-child(3),
.si_info td:nth-child(3){display:none}
    
    
}

@media (max-width:500px) {
.history{width:100%;}
.history div{padding:0; margin:0 0 40px 0}
.history p{position:static; text-align:left}
.history ul{padding:0; border:none; margin:0; border-top:1px solid #ddd; padding-top:20px}
.history ul::before{display:none}
.history li{padding:0 0 10px 50px; font-size:16px }
.history li strong{top:0; left:0; display:block; font-size:18px}

}

@media (max-width:450px) {
	
.ci_eng li:nth-child(1){width:auto}
.ci_eng li{width:auto}
	
.ci_kor li{width:33%}	
	
.ci_color{display:block; padding:20px 0 50px 0}
.ci_color div{width:100%; margin-bottom:20px} 
.ci_color p{width:40px; height:40px}
.ci_color li{display:inline-block}
}