@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2019-01-03
******************************************************** */



/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1120px){
	.sub-scroll{}
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.sub-scroll{overflow-x:auto}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px;}
	
}
@media all and (max-width:800px){
	/* -------- 공통 탭  -------- */
	.sub-cm-tab-container ul.menu3 {margin-right:-4px}
	.sub-cm-tab-container ul.menu3 li{width:33.33%; max-width:185px; margin:0; margin-left:-4px;}
	/* -------- 공통 :: 레이아웃 -------- */
	.cm-sub-content-top .cm-sub-top-txt{font-size:25px;}
	.cm-sub-main-tit h3{font-size:130px;}
	.cm-sub-main-up-txt .up-txt1{font-size:30px; line-height:1.5}
	.cm-sub-main-up-txt .up-txt1 br{display:block;}
	.cm-sub-main-up-txt2{position:static;  -webkit-transform: translateY(0);  transform: translateY(0);}
	.cm-sub-main-up-txt .up-txt2	{font-size:20px;}
	/* -------- 공통 :: 탭 -------- */
	.sub-cm-tab-list li a{font-size:13px;}
}
@media all and (max-width:480px){
	/* -------- 공통 탭  -------- */
	.sub-cm-tab-container{}
	.sub-cm-tab-container ul.menu3 {margin-right:-3px}
	.sub-cm-tab-container ul li{width:33.33%; display:block; float:left;  margin:0; margin-left:-1px;}
	.sub-cm-tab-container ul li:first-child{margin-left:0;}
	.sub-cm-tab-container ul.menu2 li{width:50%;}
	.sub-cm-tab-container ul.menu3 li{width:33.33%; margin-left:-1px;}
	.sub-cm-tab-container ul li a{}
	/* -------- 공통 :: 레이아웃 -------- */
	.cm-sub-content-top .cm-sub-top-txt{font-size:19px;}
	.cm-sub-main-tit h3{font-size:85px;}
	.cm-sub-main-up-txt .up-txt1{font-size:24px}
	.cm-sub-main-up-txt .up-txt2	{font-size:15px;}
}



/* ******************  회사소개 ********************** */
/* -------- 회사소개 :: 인사말 -------- */
@media all and ( max-width: 1024px ){	
	.greeting-txt-rt .greeting-txt p br{display:none}
}
@media all and ( max-width: 800px ){	
	.greeting-bottom{margin-top:35px}
	/* 인사말 :: 왼쪽 인사말 */
	.greeting-txt-lf{float:none; width:100%; padding-right:0}
	.greeting-txt-lf h4{font-size:23px}
	/* 인사말 :: 오른쪽 텍스트 */
	.greeting-txt-rt{float:none; width:100%; margin-top:40px}
	.greeting-txt-rt .greeting-txt{margin-bottom:30px}
	.greeting-txt-rt .greeting-txt span:after{width:calc(100% - 85px); top:9px}
	.greeting-txt-rt .greeting-txt span strong{font-size:17px;}
	.greeting-txt-rt .greeting-txt p{font-size:14px; margin-top:10px}
	.greeting-txt-rt .ceo-txt{font-size:15px;}
	/* 인사말 :: 하단 이미지 */
	.greeting-bt-img{position:relative; width:auto; display:block; margin-top:40px}
}

/* -------- 회사소개 :: 연혁 -------- */
@media all and ( max-width:1024px ){
    .history-list-box-style02 .history-year-box{ padding-left:200px}
}
@media all and ( max-width:800px ){
    .history-list-box-style02 .history-year-box{padding-left:0}
    .history-list-box-style02 .history-year-box h4{position:relative; left:auto; top:auto; margin-bottom:25px; font-size:26px;}
    .history-list-box-style02 .history-year-box h4:after{top:100%; left:0; margin-top:5px;}
    .history-list-box-style02 .history-year-box .history-year-item:first-child:before{bottom:-16px;}
	.history-list-box-style02 .history-year-box .history-year-item:last-child:before{bottom:0px;}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con p{font-size:14px}
}
@media all and ( max-width:480px ){
    .history-list-box-style02 .history-year-box{margin-bottom:50px}
    .history-list-box-style02 .history-year-box h4{font-size:20px;}
    .history-list-box-style02 .history-year-box h4:after{width:45px; height:2px}
    .history-list-box-style02 .history-year-box .history-year-item .history-year{width:60px;}
    .history-list-box-style02 .history-year-box .history-year-item .history-year strong{font-size:17px}
    .history-list-box-style02 .history-year-box .history-year-item:before{left:60px}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con{padding-left:90px; }
    .history-list-box-style02 .history-year-box .history-year-item:last-child .history-info-con{padding-bottom:0}
    .history-list-box-style02 .history-year-box .history-year-item .history-info-con p{font-size:13px}
}


/* -------- 회사소개 :: 특허 및 인증 -------- */
@media all and (max-width:800px){
	.certifi-list-style04{max-width:480px; margin:0px auto;}
    .certifi-list-style04 > ul li{width:48%;}
    .certifi-tit{height:30px; line-height:30px; font-size:15px; padding-top:10px;} 
}


/* -------- 회사소개 :: 조직도 -------- */
@media all and (max-width:800px){
	.org-img img.pc-img{display:none}
	.org-img img.mb-img{display:inline-block}
}

/* -------- 회사소개 :: 오시는 길 -------- */
@media all and ( max-width:800px ){
    /* 오시는길 :: 상단 */
    .map-script-wrapper{height:300px; margin-bottom:15px;}
    .map-script-wrapper .map-script-con{height:300px; margin-top:-150px;}
    /* 오시는길 :: 하단정보1 */
    .map-tbl th,.map-tbl td{padding:15px 10px; font-size:13px; vertical-align:top;}
    .map-tbl th{width:60px}
}


/* ******************  사업분야 ********************** */
@media all and ( min-width:800px ){		
	/* -----사업분야:: 리스트----- */
	.business-list li a:hover .list-img:after,
	.business-list li a:hover .list-hover-icon{opacity:1}
}
@media all and ( max-width:960px ){	
	#businessPop{max-width:800px}
}
@media all and ( max-width:800px ){	
	/* -----사업분야:: 리스트----- */
	.business-list li{}
	.business-list li .list-tit p{font-size:13px; padding:10px 5%}
	/* -----사업분야:: 상세 팝업------ */
	#businessPop{max-width:640px}
	/* 상세 팝업 :: 슬라이드 */
	.business-slide .slick-arrow{width:35px; height:120px}
	.business-slide .slick-arrow i{font-size:25px;}
	.business-slide .slick-dots li button{width:50px; height:2px}
	/* 상세 팝업 :: 하단정보 */
	.business-info-con .info-tit{padding:20px}
	.business-info-con .info-tit strong{font-size:14px}
	.business-info-con .info-tit h4{font-size:25px}
	.business-info-con .info-list{padding:22px 25px}
	.business-info-con .info-list li{margin-bottom:15px}
	.business-info-con .info-list li span, .business-info-con .info-list li p{font-size:14px;}
	.business-info-con .info-list li span{padding-left:20px; width:50px}
	.business-info-con .info-list li span:before{width:12px; height:13px; top:4px}
	.business-info-con .info-list li p{width:calc(100% - 70px)}

}
@media all and ( max-width:640px ){	
	/* -----사업분야:: 상세 팝업------ */
	#businessPop{max-width:480px}
}
@media all and ( max-width:480px ){	
	/* -----사업분야:: 상세 팝업------ */
	#businessPop{max-width:330px}
	/* 상세 팝업 :: 슬라이드 */
	.business-slide .slick-arrow{width:30px; height:100px}
	.business-slide .slick-arrow i{font-size:20px;}
	.business-slide .slick-dots li button{width:30px}
	/* 상세 팝업 :: 하단정보 */
	.business-info-con .info-list{background:url("../images/content/business_info_bg.jpg") no-repeat 65% 0}
}


/* ****************** 홍보센터 ********************** */

@media all and ( max-width:1220px ){	
	/* 상단탭 */
	.ci-tab.fixed .ci-tab-inner{top:90px; border-top:1px solid #eee; border-bottom:1px solid #eee}
	/* --------BI-------- */
	#bi-content{margin:0 -15px}
	.bi-con-wrap{padding:0 15px}
}
@media all and ( max-width:1024px ){	
	/* --------CI-------- */
	/* CI  :: Color */
	.ci-color-con .color-detail .detail-inner strong{font-size:17px}
	.ci-color-con .color-detail .detail-inner p span{font-size:15px}
}
@media all and ( max-width:800px ){	
	/* 상단탭 */
	.ci-tab li{height:40px; width:150px}
	.ci-tab li a{font-size:14px; line-height:40px}
	/* 공통 */
	.ci-tit{font-size:20px; margin-bottom:10px}
	.ci-sub-tit{font-size:18px; margin-bottom:10px}
	.ci-sub-txt{font-size:14px; margin-bottom:15px}
	.ci-sub-txt br{display:none}
	.ci-down-btn{font-size:12px; padding:7px 15px; }
	.ci-down-btn i{font-size:15px; margin-right:5px}
	.border-top{padding-top:15px}
	/* --------CI-------- */
	.ci-con{margin-bottom:30px}
	.ci-con:last-child{margin-bottom:45px}
	.ci-logo-detail-box .ci-logo-box{padding:40px 5%}
	.ci-logo-detail-box .ci-logo-box span{display:inline-block}
	.ci-logo-detail-box .ci-logo-box span img{max-width:80%}
	.ci-double-con .ci-logo-detail-box .ci-logo-box{padding:25px 5%}
	.ci-double-con ul{margin:0}
	.ci-double-con ul li{float:none; width:100%; margin:0}
	.ci-double-con ul li:first-child{margin-bottom:30px}
	/* CI  :: Concept */
	.ci-concept .concept-con:first-child{margin-bottom:25px}
	.ci-concept .concept-con .concept-tit{font-size:15px; margin-bottom:5px}
	.ci-concept .concept-con .concept-list{padding:10px}
	.ci-concept .concept-con .concept-list p{font-size:13px; padding-left:18px;}
	.ci-concept .concept-con .concept-list p:before{width:13px; height:12px;}
	/* CI  :: Slogan */
	.ci-slogan span{display:block}
	.ci-slogan img{max-width:80%}
	/* CI  :: Color */
	.ci-color-con{height:100px}
	.ci-double-con.ci-color-con li:first-child{margin-bottom:15px}
	.ci-color-con .color-name{font-size:14px; width:30%}
	.ci-color-con .color-detail{width:70%}
	.ci-color-con .color-detail .detail-inner{padding:0 3% 0 7%}
	.ci-color-con .color-detail .detail-inner strong{font-size:14px; }
	.ci-color-con .color-detail .detail-inner p{margin-top:10px}
	.ci-color-con .color-detail .detail-inner p span{font-size:13px; margin:0 5% 10px 0}
	/* --------BI-------- */
	#bi-content{padding-top:40px}
	.bi-con.ci-con:last-child{padding-bottom:90px}
	.bi-con .ci-logo-detail-box .ci-logo-box{padding:35px 5%}
	/* BI  :: Color */
	.bi-triple-con ul{margin:0}
	.bi-triple-con ul li{float:none; width:100%; margin:0 0 15px}
	.bi-triple-con .ci-color-con .color-name{width:30%}
	.bi-triple-con .ci-color-con .color-detail{width:70%}
}
@media all and ( max-width:480px ){	
	/* 상단탭 */	
	.ci-tab li{float:left; margin:0; width:50%}
	.ci-tab.fixed .ci-tab-inner{top:61px;}
}