@charset "utf-8";

.khready{text-align:center}


/* ks 마크 */
.ksmark { width: 200px;height: 200px;background: #f8f4f4;border:1px solid #efe6e6;display: flex; justify-content: center;align-items: center;border-radius: 100%;margin-left: 50px;margin-top: 30px;}
.ksmark img {width: 100px; display: flex; justify-content: center; align-items: center;}

/* 테이블 */
#container .table table{width:100%;table-layout:fixed;border-top:1px solid #888;border-bottom:1px solid #888;border-collapse:collapse;border-spacing:0}
#container .table table th,
#container .table table td{padding:12.5px 20px 12.5px 20px;font-size:14px;line-height:24px;font-weight:400}
#container .table table th{background:#f5f5f5;vertical-align:middle}
#container .table table tr{border-top:1px solid #e6e6e6}
#container .table table tr:first-child{border-top:none}

/**/
#container .tabs{position:relative;top:0;left:0;z-index:11;width:100%;margin:0 0 10px 0;background:none}
#container .tabs.fixed{position:fixed;z-index:11;top:0;left:50%;width:100%;background:#fff;border-top:2px solid #0c4da2; box-shadow:5px 5px 10px rgba(0,0,0,0.05);transform:translateX(-50%)}
#container .tabs ul{background:transparent;display:table;width:100%;margin:0 auto;max-width:1080px;overflow:hidden;border:1px solid #eee;text-align:center}
#container .tabs li{position:relative;display:table-cell;vertical-align:middle}
#container .tabs li a{position:relative;display:block;line-height:58px;font-size:17px;font-weight:500;text-align:center;color:#585858;background:#fff;text-transform:uppercase}
#container .tabs li a:before{content:'';position:absolute;top:50%;left:0;margin-top:-12px;width:1px;height:24px;background:#ccc}
#container .tabs li:nth-child(1) a:before{display:none}
#container .tabs li a:hover,
#container .tabs li a.sel{color:#000}



/* 연혁 */
.sub-content.history-back  {position: relative;}
.history-back:before {content:'';position: absolute;left: 0;top: 0;background: #f6f6f6;width: 100%;height: 300px;}
.history-about {clear: both;position: relative;}
.history-tab {flex: 0 50%;font-size: 50px;color: #333;font-family: 'ONE-Mobile-Title';border-bottom: 1px solid #d4d5d8;padding-bottom: 15px;}
.history-tab span.on {color: rgba(24,41,69,1);font-weight: 900;border-bottom: 1px solid #0d7abf;}
.history-year {clear: both;padding-top: 60px;position: relative;}
.history-year::after {content: '';position:absolute;left: 13.45%;top:17px; width: 1px;height: 100%;background: #e2e3e5;z-index: -1;}
.history-year > ul > li {padding-bottom: 30px;position: relative;margin-left: 6%;}
.history-year > ul > li::before {content: '';position: absolute;left:0;top:2px;width: 12px;height: 12px;background: #0d7abf;border-radius: 100%;}
.history-year > ul > li dl {clear: both;position: relative;margin-top: 10px;width: 55%;height: 60px;margin-bottom: 15px;}
.history-year > ul > li dl dt {position: absolute;left:0;top:0;font-size: 18px;font-weight: 800;color: #182945;width: 150px;padding-left: 25px;}
.history-year > ul > li dl dt span {position: absolute; left: 100px;  top: -25px; font-size: 18px; color: #fff;width: 70px; display: inline-block; /* padding-left: 100px; */ background: #333; height: 70px; border-radius: 100%; display: flex;  justify-content: center;align-items: center; }
.history-year > ul > li dl dd {font-size: 16px;line-height: 140%;padding-left: 200px;}
.history-2013 {margin-left: 0%;}
.history-year > ul > li > dl > dd,
.history-year > ul > li > dl > dd > ul > li {color: #000;font-weight: 300;}
.history-year > ul > li dl::after{content:"."; display:block; height:0; clear:both; visibility:hidden;}

.history-year ul li dl:nth-child(1) dt span { background: rgba(13,122,191,1);}
.history-year ul li dl:nth-child(2) dt span { background: rgba(13,122,191,0.7);}
.history-year ul li dl:nth-child(3) dt span { background: rgba(13,122,191,0.6);}
.history-year ul li dl:nth-child(4) dt span { background: rgba(13,122,191,0.5);}
.history-year ul li dl:nth-child(5) dt span { background: rgba(13,122,191,1);}

.history-year::after { width: 300px;height: 300px;background: rgba(140,171,78,1); border-radius: 100%;content: '';position: absolute;left: 50px;top: 0;}
.history-2013:after { content:''; position: absolute;width: 400px;height:400px;opacity: 0.2;background: url(/theme/mechatron/img/main-v-2.jpg) center no-repeat;background-size: cover;z-index: 1; top: 160px; left: 55%; border-radius: 100%;;}
.history-2013::before { content:''; position: absolute;width: 400px;height:400px;opacity: 0.25;background: url(/theme/mechatron/img/main-v-3.jpg) center no-repeat;background-size: cover;z-index: 1; top: 53px; left: 67%; border-radius: 100%;;}

.list-dot { padding: 40px;}
.list-dot li {position: relative;padding-left: 15px;line-height: 200%;font-size: 15px;text-align: left;}
.list-dot li::before {content: 'ㆍ';position: absolute;left: 0;top: 0;}


/* 비지니스 */
.business-wrap {display: flex; flex-wrap: wrap;padding-bottom: 0;}
.busi-conts { clear: both;width:calc((100% - 60px)/3); border: 1px solid #0d7abf;box-shadow: 2px 3px 5px rgba(0,0,0,0.02);margin-right: 30px;border-radius: 10px 0 10px 0;}
.busi-conts:nth-child(3n+3) { margin-right: 0;}
.busi-top {padding: 50px 10px; text-align: center; font-size: 30px; font-family: 'ONE-Mobile-Title';}
.busi-conts:nth-child(1) .busi-top {background: rgba(37, 156, 215, 0.15); color: rgba(37, 156, 215, 0.5);}
.busi-conts:nth-child(2) .busi-top {background: rgba(37, 156, 215, 0.20); color: rgba(37, 156, 215, 0.7);}
.busi-conts:nth-child(3) .busi-top {background: rgba(37, 156, 215, 0.25); color: rgba(37, 156, 215, 0.9);}


.business-wrap.busi-2col .busi-conts {clear: both;width:calc((100% - 30px)/2);}
.business-wrap.busi-2col .busi-conts:nth-child(2n+2) { margin-right: 0;}

.cntbox {padding-bottom: 10%;}

.busi-tbl {border-top: solid 1px #454545; }
.busi-tbl .brdList { width:100%; border:0; padding:0; margin:0; border-collapse:collapse;}
.busi-tbl .brdList th,
.busi-tbl .brdList td {text-align: center; padding: 15px 10px; font-size: 11pt;}
.busi-tbl .brdList th {border-bottom: solid 1px #ccc; font-weight: 500; background: #fafafa;border-right: solid 1px rgba(204, 204, 204, 0.5);}
.busi-tbl .brdList td {border-bottom: solid 1px #ccc;border-right: solid 1px rgba(204,204,204,0.5);}
.busi-tbl .brdList tr td:last-child { border-right:none;}



/* 제품소개 */
.pro2Conts-wrap { clear: both; display: flex;flex-wrap: wrap;}
.pro2Conts-wrap > .txt {width:calc((100% - 30px)/2);margin-right: 30px;}
.pro2Conts-wrap > .txt:nth-child(2n+2) { margin-right: 0;}
.pro2Conts-wrap .list-dot { padding: 0;}

.conts-subTtl { background:linear-gradient(to right, #0457a8, #259cd7);color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0px;text-align: center;padding: 15px;border-radius: 15px;}
.pro2Conts-wrap ul.list-dot {background: rgba(37, 156, 215, 0.08);border-radius: 15px;padding: 15px;border: 1px solid rgba(37, 156, 215, 0.5); box-shadow: 3px 3px 0px 0px rgba(96, 133, 23, 0.1);padding-left: 6%; margin-top: 5px;}
.pro2Conts-wrap ul.list-dot li { line-height: 170%;}


.pro2Conts-wrap .busi-tbl { border-top: solid 1px #454545; margin: 5px 0 0 0; border-radius: 15px;}

/* 유니티 모니터링*/
.pro3Conts-top { clear: both;display: flex; flex-wrap: wrap;margin-bottom: 3%;}
.pro3Conts-top ul {width:calc((100% - 30px)/3);margin: 20px 5px;}
.pro3Conts-top ul:nth-child(1) { background: rgba(37, 156, 215, 0.1);border-radius: 15px;padding: 15px;border: 1px solid rgba(37, 156, 215, 0.3);box-shadow: 3px 3px 0px 0px rgba(37, 156, 215, 0.1);}
.pro3Conts-top ul:nth-child(2) { background: rgba(37, 156, 215, 0.06);border-radius: 15px;padding: 15px;border: 1px solid rgba(37, 156, 215, 0.5);box-shadow: 3px 3px 0px 0px rgba(37, 156, 215, 0.1);}
.pro3Conts-top ul:nth-child(3) { background: rgba(37, 156, 215, 0.1);border-radius: 15px;padding: 15px;border: 1px solid rgba(37, 156, 215, 0.3);box-shadow: 3px 3px 0px 0px rgba(37, 156, 215, 0.1);}
.pro3Conts-top ul li {position: relative;padding-left: 15px;line-height: 200%;font-size: 15px;}
.pro3Conts-top ul li::before {content: 'ㆍ';position: absolute;left: 0;top: 0;}

.proTbl table.brdList thead { border-bottom:1px solid rgba(37, 156, 215, 0.2);}
.proTbl table.brdList thead th { background:linear-gradient(to right, #0457a8, #259cd7);color: #fff;font-weight: 500; font-size: 18px; letter-spacing: 0px;}

.pro3-img {text-align: center;padding: 30px;display: flex; justify-content: center; align-items:center;}

.imgBox-pro2 {text-align: center;padding: 30px;}

.tblTh thead tr:nth-child(1) th {background: #eaeee3;}
.tblTh .thBG {background: rgba(37, 156, 215, 0.1) !important;border-right: 1px solid #d6dacd;color: #0b5dac;}

/* 회사소개 */
.greeting { height:400px;background: url(/theme/mechatron/img/comp-img.png) center no-repeat;background-size: cover; border-radius: 30px 0 30px 0;position: relative;}
.greeting p:nth-of-type(1) { font-size: 32px;color: #259cd7;padding: 70px 0 30px;text-align: center;}
.greeting .greeting-conts { width: 100%;color: #fff; position: absolute; left: 0; bottom: 0; background: rgba(96, 133, 23, 0.2); padding: 30px;}
.greeting .greeting-conts p:nth-of-type(1) { font-size: 20px;color: #fff;padding: 30px 0;}

.greeting:after {content: ''; position: absolute; right: -70px; top: -70px; width: 500px; height: 300px; opacity: 0.5; background: url(/theme/mechatron/img/comp-img.png) center no-repeat; background-size: cover; z-index: -1; border-radius: 30px 0 30px 0;}
.greeting:before {content: '';position: absolute;left: -70px;top: 170px;width: 500px;height: 300px;opacity: 0.2;background: url(/theme/mechatron/img/main-v-3.jpg) center no-repeat;background-size: cover;z-index: -1;border-radius: 30px 0 30px 0;}


/* 하이드로 애널라이저 */
.pro4-conts {background: rgba(37, 156, 215, 0.08); border-radius: 15px; padding: 15px;border: 1px solid rgba(37, 156, 215, 0.3); box-shadow: 3px 3px 0px 0px rgba(37, 156, 215, 0.1);padding:20px; margin-bottom: 20px;text-align: left;}
.pro4-img { margin-top: 30px;border: 1px solid rgba(0, 0, 0, 0.1);border-radius: 7px;}


.chartconts { padding: 0 0 100px 0; }
.chartconts img { width: 65%;}


@media all and (max-width:1024px) {
	

    .history-year > ul > li dl { width: 100%;}
    .history-tab { padding: 0 15px;}
    
	
}


@media all and (max-width:747px) {
	
	
	
    .comp_1 { margin-top: 100px;}
    .greeting p:nth-of-type(1) { font-size: 24px;padding: 70px 50px 0;}
    .greeting .greeting-conts p:nth-of-type(1) { font-size: 18px;}
    .greeting {height: 550px;}

    .history-year > ul > li { margin-left: 0;}

    .busi-conts { width: calc((100% - 0px) / 1);margin-right: 0; margin-bottom: 30px;}
    .busi-top { padding: 20px 10px; font-size: 20px;}
    .list-dot { padding: 20px 20px;}

    .business-wrap.busi-2col .busi-conts { width: calc((100% - 0px)/1);}
    .pro2Conts-wrap {display: block;}
    .pro2Conts-wrap > .txt {width: calc((100% - 0px) / 1);margin-right: 0; margin-bottom: 30px;}
    .pro3Conts-top ul li { line-height: 150%;margin-bottom: 10px;}

    .pro3-img {display: block;}
    
    .chartconts img { width: 100%;}

    .history-year > ul > li dl dt { padding-left: 0;width: 100px;top: -3px;}
    .history-year > ul > li dl dd {padding-left: 180px;}
    .history-year > ul > li > dl > dd, .history-year > ul > li > dl > dd > ul > li { text-align: left;}

    .busi-tbl .brdList th, .busi-tbl .brdList td {font-size: 13px;padding: 10px 5px;}

    .conts-subTtl span { display: block;}

    .pro3Conts-top { display:block;}
    .pro3Conts-top ul {width: calc((100% - 0px) / 1);text-align: left;}
    .pro3Conts-top ul li:last-child {margin-bottom: 0;}
	
	
}




@media all and (max-width:480px) {
	
	
	.history-year > ul > li dl dt span {position: absolute;top: 30px;left: 10px;}
    .history-year > ul > li dl dd {padding-left: 90px;padding-top: 43px; font-size: 15px;}
    .history-tab { font-size: 36px;padding-left: 0; padding-bottom: 10px; text-align: center; font-weight: 600;}

    .pro3-img img {width: 100%;}

    .ksmark img {width: 100px !important;}
    .ksmark { margin-left: 0;margin: 0 auto;}

    .list-dot li { font-size: 13px;line-height: 150%;margin-bottom: 7px;}
	
	
}