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


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width:1220px){
	.custom-scrollbar-wrapper .scroll-object{max-width:100%;}
}
@media all and (max-width:800px){
	.custom-scrollbar-wrapper{position:relative;/* margin-right:-15px; */ cursor:move}
	.custom-scrollbar-wrapper .scroll-object{max-width:none; width:800px; }
	.custom-scrollbar-cover{display:block; position:absolute; top:0px; left:0px; right:0px; bottom:0px; background-color:rgba(0,0,0,0.5); z-index:1;}
	.custom-scrollbar-cover .scroll-cover-txt{position:absolute; top:50%; left:0; width:100%; text-align:center; color:#fff; font-size:300; font-size:15px;}
	.custom-scrollbar-cover .scroll-cover-txt i{font-size:30px; display:block; margin-bottom:20px; }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width:1220px){
	.sub-tab-list-style .area{padding:0}
}
@media all and (max-width:1024px){
	/* Tab Fixed Move*/
	.sub-tab-list-style.top-fixed{top:80px;}
}
@media all and ( max-width: 800px ){
	/* Tab 공통 스타일 */
	.sub-tab-wrapper-style{z-index:11;}
	.sub-tab-wrapper-style,
	.sub-tab-list-style.top-fixed,
	.sub-tab-list-style ul li a{height:40px; }
	.sub-tab-list-style ul li a em{font-size:13px; text-align:left;}
	/* Tab Fixed Move*/
	/* Mobile Tab Drop Menu */
	.sub-drop-menu-style{position:relative;}
	.sub-drop-open-btn-style{display:block; position:relative; padding:0 15px; height:40px; line-height:40px; font-size:15px; background-color:#333; box-sizing:border-box;}
	.sub-drop-open-btn-style span{color:#fff; }
	.sub-drop-open-btn-style .arrow{color:#fff; position:absolute; top:50%; right:15px; margin-top:-7px}
	.sub-drop-open-btn-style.open .arrow{transform:rotate(180deg)}
	.sub-drop-menu-style ul{display:none; margin:0; height:auto; position:absolute; top:100%; left:0px; right:0px; background-color:#fff; border:1px solid #ddd; border-top:0; z-index:11; box-sizing:border-box;}
	.sub-drop-menu-style ul li{position:static; display:block; float:none; border:0; border-top:1px solid #eee; width:auto; background-color:transparent; margin-left:0;}
	.sub-drop-menu-style ul li:first-child{border-top:0; border-left:0}
	.sub-drop-menu-style ul li a{display:block; width:auto; height:auto; padding:10px 15px; border:0;}
	.sub-drop-menu-style ul li a em{font-size:13px;}
	.sub-drop-menu-style ul li.selected a{background-color:transparent;}
	.sub-drop-menu-style ul li.selected a em{color:#0053a0; font-weight:600; }
}
@media all and (max-width:480px){
	/* Tab Fixed Move*/	
	.sub-tab-list-style.top-fixed{top:60px;}
}
/* ******************  공통 ********************** */
@media all and (max-width:800px){
	.cm-txt{font-size:13px;}
	.cm-txt-02{font-size:14px;}
	.cm-dotted:before{top:9px;}
	.cm-dashed:before{top:9px;}
	.cm-tit-dotted{font-size:16px;}
	.cm-tit-dotted:before{top:1px}
	.cm-tit-dotted:after{top:8px;}
}

/* ******************  회사소개 ********************** */
/* --------- 경영이념 --------- */
@media all and (max-width:1024px){
	.ideology-con .ideology-content-tit{font-size:38px;}
	.ideology-box-01 .inner-con{width:49%; margin-bottom:2%;}
}
@media all and (max-width:800px){
	.ideology-con .ideology-content-tit{font-size:29px; margin-bottom:20px;}
	.ideology-box-01 .inner-con .tit{font-size:18px;}
	.quality-txt-box .txt{font-size:18px;}
	.ideology-box-02 .inner-box-wrap .quality-tit{font-size:15px;}

	.ideology-con{margin-bottom:6em;}	
	/* 경영이념 */
	.ideology-box-01 .inner-con .icon{margin:20px auto;}
	/* 품질환경 */
	.quality-txt-box .txt{margin-bottom:15px;}
	.ideology-box-02{margin-top:20px;}
	.ideology-box-02 .inner-box-wrap{width:100%; margin-bottom:20px;}
	.ideology-box-02 .inner-box-wrap:last-child{margin-bottom:0;}
	.ideology-box-02 .inner-box-wrap .quality-tit{margin-top:5px;}
}

/* --------- 회사 연혁 --------- */
@media all and (min-width:801px){
	.history-tab-list-style ul li.selected a:before, .history-tab-list-style ul li a:hover:before{opacity:1;}
	.history-tab-list-style ul li.selected a em, .history-tab-list-style ul li a:hover em{color:#0053a0; }	
}

@media all and (max-width:800px){
	.history-top-box{border-top:0; margin-bottom:50px; padding:10% 15px; z-index:-1;}
	.history-top-box .tit-box .sub-tit{font-size:17px; margin-bottom:10px;}
	.history-top-box .tit-box .tit{font-size:40px; margin-bottom:35px;}
	.history-top-box .tit-box .txt{font-size:16px;}
}

/* --------- 인사말 --------- */
@media all and (max-width:1024px){
	.cm-company-txt-table{display: block;}
	.cm-company-txt-table .right-txt-box{display: block; width:100%; margin-bottom:30px;}
	.cm-company-txt-table .left-txt-box{display: block; width:100%;}
}
@media all and (max-width:800px){
	.cm-company-img-box .tit-en{font-size:13px;}
	.cm-company-img-box .txt{font-size:23px;}
	.cm-company-img-box .txt-en{font-size:14px;}
	.cm-company-txt-table .right-txt-box .txt{font-size:26px;}
	.cm-company-txt-table .left-txt-box .txt{font-size:14px; }
	.cm-company-img-box .txt-en-02{font-size:13px; margin-bottom:15px;}

	.cm-company-img-box{height:250px; margin-bottom:40px;}
	.cm-company-img-box .txt-sub{font-size:17px; margin-top: 20px;}
	.cm-company-img-box .tit-en{margin-bottom:20px;}
	.cm-company-img-box .txt-en{margin-top:15px;}
	.cm-company-txt-table .right-txt-box{margin-bottom:20px;}
	.cm-company-txt-table .left-txt-box .txt{margin-bottom:10px;}
}
@media all and (max-width:480px){
	.ideology-box-01 .inner-con{width:100%; margin-bottom:10px;}
	.ideology-box-01 .inner-con:last-child{margin-bottom:0;}
}

/* --------- 조직구성 --------- */
@media all and (min-width:801px){
	.org-con-wrap .mCSB_container{width:100% !important;}
}
@media all and (max-width:800px){
	.org-con-wrap{margin-top:20px;}	
}
/* --------- 오시는길 --------- */
@media all and (max-width:1420px){
	.global-map-con{height:0; padding-top:40.56%; background-size:cover;}
	.nation-circle{width:9.61%; padding-top:9.61%;}
	.nation-circle.circle-01{left:42.1%; top:23%;}
	.nation-circle.circle-01 .map-txt{bottom:-15px;}
	.nation-circle.circle-02{left:32.5%; top:46%;}
}
@media all and (max-width:800px){
	.global-map-con{padding-top:290px; background-position:center;}
	.nation-circle:before{width:3px; height:3px;}
	.nation-circle{left:50% !important; top:50% !important; transform:translate(-50%, -50%); bottom:auto;}
	.nation-circle.circle-01{margin-top:-47px; margin-left:-22px;}
	.nation-circle.circle-02{margin-top:21px; margin-left:-85px;}
	.map-txt{font-size:12px;}
}
@media all and (max-width:640px){
	.nation-circle.circle-01 .map-txt{bottom:-30px;}
	.nation-circle.circle-02 .map-txt{bottom:-60px; width:100px;}		
}
/* 오시는길 :: 정보 */
@media all and (max-width:1024px){
	.lcoation-info-con{display: block;}
	.lcoation-info-con .info-tit-box{display: block; width:100%; margin-bottom:30px;}
	.lcoation-info-con .info-txt-box{display: block; width:100%;}
}
@media all and (max-width:800px){
	.lcoation-info-con .info-tit-box .tit{font-size:23px;}
	.lcoation-info-con .info-tit-box .sub-tit{font-size:16px;}

	.location-info-wrap{margin-top:20px;}
	.lcoation-info-con{margin-bottom:20px; padding-bottom:20px;}
	.lcoation-info-con .info-tit-box{margin-bottom:15px;}

	.lcoation-info-con .info-txt-box dl dd{margin-left:135px;}
	.lcoation-info-con .info-txt-box dl dd:before{left:-12px; top:3px; height:12px}

	.map-link-wrap .map-link-btn{width:100%; margin-bottom:15px; padding:15px;}
	.map-link-wrap .map-link-btn:last-child{margin-bottom:0;}
}

/* ******************  사업소개 ********************** */
/* --------- 표면처리약품 --------- */
@media all and (max-width:1420px){
	.sub-left-box-wrapper-style{width:220px;}
	.sub-left-box-wrapper-style.bottom-fixed{width:220px;}
	.sub-left-box-wrapper-style.box-fixed .left-box-item{width:220px;}
	.left-list-item .left-item-tit-box{padding:0 10%;}
	.left-list-item .item-list{padding:15px 10%;}

	.sub-right-con-box{padding-left:260px;}
}
@media all and (max-width:1220px){
	.sub-left-box-wrapper-style.box-fixed .left-box-item{top:100px;}
}
@media all and (max-width:1024px){
	.surface-page{display: block;}
	.sub-left-box-wrapper-style{display: none;}
	.sub-right-con-box{display: block; width:100%; padding-left:0;}
}
@media all and (max-width:800px){
	.sub-right-con-box .right-con-tit{font-size:23px; margin-bottom:15px;}
	.surface-table thead tr th{padding:14px 3px;}
	.surface-table tbody tr td{padding:14px 10px;}
	.surface-item-wrap{margin-bottom:30px;}
	.surface-item-tit{font-size:18px; margin-bottom:5px;}
	.surface-item-tit i{font-size:15px;}

	.right-sub-tit, .editor-inner-box{margin-bottom:30px;}
}

@media all and (max-width:800px){
	/* 리스트 */
	.cm-board-page .bbs-subject-con .bbs-subject-txt {font-size:14px;}
	.cm-board-page .bbs-list-row .bbs-title a {padding-right:15px;}
	.cm-board-page .bbs-list-row.notice-row .notice-tit {width:auto; height:auto; padding:5px 10px; font-size:12px; line-height:1;}
	.cm-board-page .bbs-list-row .column {padding:3px 0; font-size:14px; }
	.cm-board-page .bbs-list-row .column.download a i {vertical-align:middle;}
	/* 상단정보 */
	.cm-board-page .bbs-view-top {padding: 0 30px 30px;}
	.cm-board-page .bbs-view-top .notice {width:auto; height:auto; line-height:1; padding:5px 10px; font-size:12px; }
	.cm-board-page .bbs-view-top .bbs-tit {font-size: 25px;}
	.cm-board-page .bbs-view-top .bbs-write-info {margin-top:10px; font-size: 13px;}
	.cm-board-page .bbs-view-top a {margin-top: -30px; font-size: 28px;}
	.cm-board-page .bbs-view-top a.prev-btn{left: -5px;}
	.cm-board-page .bbs-view-top a.next-btn{right: -5px;}
	/* 첨부파일 */
	.cm-board-page .bbs-view-file-info-box {padding:20px 0; }
	.cm-board-page .bbs-view-file-info-box .tit  {font-size:20px; margin-bottom:5px;}
	.cm-board-page .bbs-view-file-info-box .bbs-file-list a {font-size:14px; padding-left:20px;}
	/* 이전글,다음글 보기 */
	.cm-board-page .bbs-view-prev-next-list {padding:20px;}
	.cm-board-page .bbs-prev-next-tbl th, .cm-board-page .bbs-prev-next-tbl td {font-size:14px;}
	.cm-board-page .bbs-prev-next-tbl .bbs-prev-next-tit {padding-left: 25px;}
	.cm-board-page .bbs-prev-next-tbl .bbs-prev-next-tit i {top:50%; margin-top:-10px;}
	.cm-board-page .bbs-prev-next-tbl td {padding-right: 80px;}
	.cm-board-page .bbs-prev-next-tbl td .date {font-size:13px;}
	/* 목록버튼 */
	.cm-btn-controls .btn-style04{width:140px; height:40px; line-height:36px; font-size:14px; border-width:2px;}

	.select-input .bbs-search-btn{position: absolute; top:50%; right:0; -webkit-transform:translateY(-50%);transform:translateY(-50%); font-size:15px;}

}
@media all and (max-width:480px){
	.cm-board-page .board-search-box-style04 .select-custom{width:90px;}
	.cm-board-page .board-search-box-style04 .select-input{width:calc(100% - 90px);}
}

/* --------- 표면처리설비 --------- */
@media all and (min-width:801px){
	.technology-page .mCSB_container, .technology-page .mCustomScrollBox{overflow:visible;}
}
@media all and (max-width:1024px){
	/* 표면처리설비 :: 상단 공통 */
	.plating-item-wrap{display: block;}
	.plating-item-wrap .left-box{display: block; width:100%; padding: 20px 15px;}
	.plating-item-wrap .left-box .plating-txt{display: inline-block; width:30%; vertical-align:middle;}
	.plating-item-wrap .left-box span{display: inline-block; width:35%; margin:0;}
	.plating-item-wrap .right-box{display: block; width:100%; padding:30px 20px;}
	/* 표면처리설비 :: 슬라이드 */
	.plating-img-slide-wrap{padding-bottom:20px;}
	.plating-img-slide .slick-arrow{top:auto; bottom:-35px; transform:translateY(0);}
	.plating-img-slide .slick-arrow.slick-prev{left:0px;}
	.plating-img-slide .slick-arrow.slick-next{right:0px;}
}
@media all and (max-width:800px){
	/* 표면처리설비 :: 상단 공통 */
	.plating-item-wrap{margin-bottom:60px;}
	.plating-item-wrap .left-box .plating-txt{font-size:18px;}
	.plating-right-list li .plating-list-tit span{font-size:16px;}
	.plating-right-list li .plating-list-tit{height:70px;}
	/* 표면처리설비 :: 테이블 공통 */
	.plating-tab-03-con .gray-box .sub-tit{font-size:20px;}
	.plating-tab-style .sub-tab-wrapper-style{margin-bottom:20px;}
	.plating-table{margin-top:0;}
	.plating-img-slide-wrap{margin-top:30px;}
}
@media all and (max-width:480px){
	/* 표면처리설비 :: 상단 공통 */
	.plating-right-list li{display: block;}
	.plating-right-list li .plating-list-tit{width:100%; height:auto; padding:10px; box-sizing:border-box; margin-bottom:10px}
	.plating-right-list li .plating-list-tit:before{display: none;}
	.plating-right-list li .plating-list-tit span br{display: none;}
	.plating-right-list .plating-list-txt{display: block; width:100%; padding:0;}
}

/* --------- 기술연구소 --------- */
/* 연구소소개 */
@media all and (max-width:1024px){
	.institute-con-wrap .swiper-button-prev{left:-50px;}
	.institute-con-wrap .swiper-button-next{right:-50px;}
}
@media all and (max-width:800px){
	.institute-con-wrap{overflow:hidden; padding-bottom:30px; margin:30px auto 0; width:90%;}
	.institute-wrap{width:100%; padding-top:58.37%;}
	.institute-wrap .tit{font-size:29px; padding:0 15px 30px;}

	.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{bottom:30px !important;}
	.institute-con-wrap .swiper-button-prev, .institute-con-wrap .swiper-button-next{top:auto !important; bottom:0px; font-size:20px; }
	.institute-con-wrap .swiper-button-prev{left:0}
	.institute-con-wrap .swiper-button-next{right:0}
	.tech-rolling-control{bottom:50px;}

}
@media all and (max-width:480px){
	.institute-wrap{padding-top:250px;}
}
/* 장비보유현황 */
@media all and (max-width:1024px){
	
	.technology-con:nth-child(-n+2){margin-top:3.8%;}
	.equipment-list .technology-con:nth-child(3){margin-top:4%;}
	.certification-list .technology-con:nth-child(3){margin-top:9%;}
	.technology-con{width:49%;}
	.technology-con:nth-child(3n){margin-right:2%;}
	.technology-con:nth-child(2n){margin-right:0%;}
}
@media all and (max-width:800px){
	.technology-con .img-box{margin-bottom:7px;}
	.equipment-info-box .tit{font-size:17px; padding-bottom:5px; margin-bottom:4px;}
	.equipment-info-box dl{margin-bottom:4px;}
	.equipment-info-box dl dt p:before{top:10px;}
	.equipment-info-box dl dd{padding-left:60px;}
}
@media all and (max-width:480px){
	.technology-con{width:100%; margin-right:0 !important; margin-top:4% !important;}
}
/* 연구소 둘러보기 */
@media all and (max-width:1024px){
	.around-txt-list li a em{font-size:14px;}
}
@media all and (max-width:800px){
	.around-top-box{margin:40px 0;}
	.around-top-box .top-tit{font-size:26px; margin-bottom:20px;}

	.around-con-list-box{display: block;}
	.around-con-list-box .around-item{width:100%; margin-bottom:25px;}
	.around-item .cm-tit-dotted{margin-bottom:10px;}
	.slick-arrow.around-slick i{font-size:15px;}
}
/* 특허현황 */
@media all and (max-width:800px){
	.certification-info-box .tit{font-size:18px; margin-bottom:5px;}
}

/* ****************** 베트남법인 ********************** */
/* --------- 회사개요 --------- */
@media all and (max-width:1024px){
	.summary-list-wrap{flex-wrap:wrap;}
	.summary-list-wrap .list-con{width:31%; margin-bottom:4%;}
}
@media all and (max-width:800px){
	.summary-list-wrap .list-con .icon{width: 53.52%; padding-top:53.52%; margin:0 auto 5px;}
	.summary-con{margin-bottom:40px;}
	.summary-table colgroup col:first-child{width:70px !important;}
	.summary-table tbody td{padding:15px;}
	.summary-table tbody td .inner-list li{width:100%; padding-right:0;}
}
@media all and (max-width:480px){
	.summary-list-wrap .list-con{width:48%; margin-bottom:4%;}
}
/* --------- 법인안내 --------- */
@media all and (max-width:800px){
	.intro-list-con .intro-item dt .tit, .intro-inner-box .inner-con .cm-tit-dotted{font-size:15px;}
	.intro-list-con .intro-item dt, .intro-list-con .intro-item dd{padding:15px;}
	.intro-list-con .intro-item dt span{right:15px;}
	.inner-box-double{display: block;}
	.inner-box-double .box-double{width:100%; padding-right:0;}
}
/* ******************  투자정보 ********************** */
/* --------- 내부정보관리규정 --------- */
@media all and (max-width:800px){
	.regulation-con{margin-bottom:30px;}
	.regulation-con .gray-tit-box{margin-bottom:10px; padding:8px;}
	.regulation-con .regulation-inner{margin-bottom:15px; padding:0 8px;}
}

/* ******************  홍보실 ********************** */
/* --------- 카달로그 --------- */
@media all and (max-width:800px){
	.cadalog-con-wrap .txt-box .tit-en, .cadalog-con-wrap .txt-box .cadalog-btn em{font-size:13px;}
	.cadalog-con-wrap .txt-box .tit{font-size:23px;}
	.cadalog-con-wrap .txt-box .txt{font-size:14px;}

	.cadalog-con-wrap .txt-box .tit{margin:10px 0;}
	.cadalog-con-wrap .txt-box .cadalog-btn{width:130px; height:40px; margin-top:25px;}
}
@media all and (max-width:480px){
	.cadalog-con-wrap{background-position: bottom; background-size:contain; background-color:#f4f4f4; padding-bottom:20%;}
	.cadalog-con-wrap .txt-box{width:100%; padding:0 15px;}
}

/* --------- 온라인문의 --------- */
@media all and (max-width:800px){
	.online-page .bbs-inquiry-agree-con{margin:15px 0 10px;}
	.online-page .bbs-inquiry-agree-con .agree-txt{font-size:14px;}
	.policy-modal-btn{width:25px; height:25px; line-height:25px;}
	.policy-modal-btn i{font-size:12px;}
	.cm-btn-controls .cm-txt{margin-bottom:10px;}
	.cm-btn-controls .btn-style05{width:130px; height:40px; line-height:40px;}
}
@media all and (min-width:1025px){
	#surfaceLeftBox{display: none;}
}
@media all and (max-width:1024px){
	/*  SUB LAYOUT :: 서브메뉴 모바일 (스타일1) */
	#surfaceLeftBox{display:block; position:relative; height:45px; margin:30px 0; z-index:1;}
	#surfaceLeftBox .side-menu-inner{height:44px; /* padding-left:44px; */ /* border-bottom:1px solid #ddd; */}
	#surfaceLeftBox .menu-location{position:relative; float:left; width:50%;}
	#surfaceLeftBox .menu-location > .cur-location{position:relative; display:block; width:100%; text-align:left; height:44px; padding:0 30px 0 10px; border:1px solid #ddd; border-left:0; box-sizing:border-box;}
	#surfaceLeftBox .menu-location > .cur-location span{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:43px; color:#222; font-weight:400; font-size:15px;}
	#surfaceLeftBox .menu-location > .cur-location .arrow{position:absolute; top:50%; right:10px; width:20px; height:20px;margin-top:-10px; font-size:20px;}
	#surfaceLeftBox .menu-location.open > .cur-location .arrow{transform:rotate(-180deg); margin-top:-10px;}
	#surfaceLeftBox .menu-location .location-menu-con{display:none; position:absolute; top:44px; left:0px; width:calc(100% - 2px); border:1px solid #ddd; border-top:0; background-color:#fff; z-index:11; }
	#surfaceLeftBox .menu-location.location1{background:#0053a0; }
	#surfaceLeftBox .menu-location.location1 > .cur-location{border:0;}
	#surfaceLeftBox .menu-location.location1 > .cur-location span, #surfaceLeftBox .menu-location.location1 > .cur-location .arrow{color:#fff;}
	
	#surfaceLeftBox .menu-location.location1 .location-menu-con{width:calc(100% - 1px);}
	#surfaceLeftBox .menu-location .location-menu-con li a{display:block; padding:7px 10px; font-size:14px; line-height:1.5; word-break:keep-all;}
	#surfaceLeftBox .menu-location .location-menu-con li.cur{position:relative;}
	#surfaceLeftBox .menu-location .location-menu-con li.cur a{color:#0053a0; font-weight:500;}
}