@charset "utf-8";
html, body {word-break: keep-all;font-size:17px; font-family:'Noto Sans KR', 'Oswald', sans-serif;}
.uppercase{text-transform:uppercase;}
.pages{padding:90px 0;}
.pages.pd-0{padding:0 0;}
.blue-bg{background:url(/images/content/mark_ds.png) left  bottom no-repeat #f2f3f7; width:100%; height:388px; padding-top:90px;}
.blue-bg h3{width:980px; margin:0 auto; letter-spacing:-0.07em;}
.pages h1{font-size:60px; letter-spacing:-0.05em; line-height:1; }
.pages h3{font-size:25px; color:#000; font-weight:500; line-height:1.5;}
.pages h4{font-size:23px;}
.pages h5{font-size:20px; }
.pages p{font-size:17px; color:#000; font-weight:300;}
.pages .fs-20{font-size:20px;}
.pages .wh-box{padding:100px 50px; background: #fff; width: 1200px; margin: 0 auto; margin-top:-156px; }
.pages img.auto{max-width: 100%;  max-height: 100%; width: auto; height: auto;}
.pages img.float-right{float:right !important;}
.pages .title{font-size:40px; font-family: 'Oswald', 'Noto Sans KR', sans-serif; color:#000; text-align:center; text-transform:uppercase;     line-height: 1;}
.pages .fc-blue{color:#24418a;}
ul.ulStyle{display:flex; flex-wrap: wrap; justify-content: space-between; }
ul.ulStyle li{flex:0 1 32%;}



/* 테이블 스타일 */
.overflow-table{overflow-x:auto; width:100%;} 
.overflow-table.tableBg{background:#f2f3f7; padding: 50px;} 
table.basicTb{border-spacing:1px; text-align:center; line-height:1.5; background: #fff;}
table.addTb-1{border-top:3px solid #24418a; }
table.basicTb caption{display:none;}
table.basicTb tr{padding:0.8rem 0; border-bottom:1px solid #ddd;}
table.basicTb tr th{vertical-align:middle; padding:0.8rem 0; border-right:1px solid #ddd;}
table.addTb-1 tr th{background:#e7ebf3;}
table.addTb-2 tr th{background:#24418a;  color:#fff; font-weight:500; padding:0.3rem 0;}
table.basicTb tr td{text-align:left; padding-left:30px;  vertical-align:middle; padding: 0.8rem 0 0.8rem 30px;}
table.addTb-2 tr td{text-align:center; padding-left:0; border-right:1px solid #ddd; padding:0.3rem 0;}
table.addTb-2 tr td:last-child{border-right:none;}
table.basicTb tr td b.psTx {font-size:12px; color:#666; font-weight:400; letter-spacing:-0.01em;}
.bg-color{background:#e4f1ef; }

span.pdSt {width:16px; display:block; float:left;}
span.pdStCts {width: calc(100% - 16px); display:block; float:left;}

@media screen and (max-width:991px){
    .overflow-table.tableBg{padding:0;}
    table.basicTb tr th{background:#f2f3f7;}
}


/* 대송 - 인사말 */
#page-6.pages{}
#page-6 {}
#page-6 .wh-box{position:relative;}
#page-6 .lt-tx{position:absolute; left: -122px; top:353px; transform:rotate(270deg);}
#page-6 .lt-tx:before{content:''; position:absolute; left:231px;  top: 19px;  border:2px solid #000; width:250px; }
#page-6 .rt-tx{width:420px; padding-top:40px;}
#page-6 .rt-tx h3{font-weight:700;}
#page-6 .rt-tx .sign-wrap p{display:inline-block;}
#page-6 .rt-tx .sign-wrap span.sign img{transform: translate(8px,37px);}
/*
#page-6 .rt-tx .sign-wrap span.sign{margin-left:10px; font-family: 'Homemade Apple', cursive; font-size: 23px; }
*/
@media screen and (max-width:1240px) {
    #page-6 .rt-tx {width: auto;}
}

@media screen and (max-width:1090px) {
    .fs-25{font-size:21px;}
    #page-6 .lt-tx {left: -103px; top: 317px;}
    #page-6 .lt-tx:before{border: 1px solid #000; width:228px;  left: 195px;}
    #page-6 .rt-tx{padding-top:0; margin-top:30px;}
    .sign-wrap{margin-top: -30px;}
}

@media screen and (max-width:640px) {
    #page-6 .lt-tx {transform: rotate(0deg); left: 0; top: -44px;}
    #page-6 .lt-tx:before {width: 180px; top: 13px;}
}

@media screen and (max-width: 430px){
    #page-6 .lt-tx:before {width: 66px;}
}


/* 대송 - 경영이념 */
#page-7.pages{}
#page-7.pages .wh-box{margin-top:-119px;}

@media screen and (max-width:800px) {
    #page-7.pages{margin-bottom: 0;}
    #page-7.pages .wh-box {margin-top:0;}
    #page-7 .blue-bg {}
}

/* 대송 - 연혁 */
#page-8{}
#page-8 .historyWrap {position: relative;}
#page-8 .bxStnadard {position: relative;}
#page-8 .squre{color: #fff;padding: 40px; position:absolute; left:195px; top:66px; z-index: 2; text-align:center; line-height:1.2; margin:0 auto;}
#page-8 .squre:before{content:''; position:absolute; left:-22px; top:-11px; background: #415eae;transform: rotate(45deg); width: 210px; height:210px; display:inline-block; z-index: -1;}
#page-8 .squre:after{content:''; position:absolute; left:-46px; top:-11px; background:rgba(65, 94, 174, 0.25); transform: rotate(45deg); width: 210px; height:210px; display:inline-block; z-index: -1;}
#page-8 .squre > div{position:relative;}
#page-8 .squre > div:before{content:''; position:absolute; left:-116px; top:-48px;  background:rgba(65, 94, 174, 0.25); transform: rotate(45deg); width: 210px; height:210px; display:inline-block; z-index: -1;}
#page-8 .squre.rt-squre{position:absolute; left: initial;  right: 185px;}
#page-8 .squre.rt-squre:bofore{content:''; position:absolute; left: -22px;}
#page-8 .squre.rt-squre:after{content:''; position:absolute; left:2px;}
#page-8 .squre.rt-squre > div:before {left: -13px;}
#page-8 .historyWrap:before {content: ''; position: absolute; top:31px; left: 50%; height: 100%; width: 1px;background: #c1c1c1;}
#page-8 .historyWrap .history-box{position: relative; margin-bottom:3vh;}
#page-8 .historyWrap .history-box .md-cir {position: absolute; top:24px; left: 50%;width: 15px; height: 15px; border-radius: 50%; border:3px solid #5e98d1;text-align: center; margin-left:-7px; background: #fff; box-sizing:border-box;}
#page-8 .historyWrap .history-box .md-cir p {background: #fff; display: block; height: 9px; width:9px; border-radius: 100%;}
#page-8 .historyWrap .rt-box {float:right; vertical-align: baseline; width:47%;}
#page-8 .historyWrap .lt-box {float:left; text-align: right; vertical-align: baseline; width:47%;}
#page-8 .historyWrap .years {padding-bottom:10px; font-weight:400; color:#5e98d1;}
#page-8 .historyWrap ul {}
#page-8 .historyWrap ul li {margin-bottom:2vh;}
#page-8 .historyWrap ul li b{font-weight:500; color:#000;}
#page-8 .historyWrap .lt-box ul li b{float:right; margin-left:10px;}
#page-8 .historyWrap .rt-box ul li b{float:left; margin-right:10px; width: 18px;}
#page-8 .historyWrap ul li p{margin-bottom:1vh; color:#1f1f1f; font-weight: 400; padding-left: 30px;}

@media screen and (max-width:1080px){
    #page-8 .squre{left: 69px;}
    #page-8 .squre:before{width: 160px; height: 160px; left: 6px;  top: 6px;}
    #page-8 .squre:after{width: 160px; height: 160px; left: -19px; top: 6px;}
    #page-8 .squre > div:before{width: 160px; height: 160px; left: -80px; top: -34px;}
    #page-8 .squre.rt-squre {right: 56px;}
    #page-8 .squre.rt-squre:before{left: initial; right: 8px;}
    #page-8 .squre.rt-squre:after{left: initial; right: -13px;}
    #page-8 .squre.rt-squre > div:before {left: initial; right: -72px;} 
}


@media screen and (max-width:991px){
    #page-8 .historyWrap{}    
    #page-8 .historyWrap .years {padding-bottom:10px; position: relative;z-index: 2;}
    #page-8 .historyWrap ul {background:none;padding:0;width:100%;}
    #page-8 .historyWrap ul li {letter-spacing: -0.05em;}
    #page-8 .ht{color:#fafafa;  line-height: 0.99;font-weight: 700;position: absolute;right:0;top:1500px;letter-spacing: -0.08em;}
    
}

@media screen and (max-width:640px){
    #page-8 .historyWrap:before {left:0;}
    #page-8 .historyWrap .lt-box{float:left; text-align:left; width:100%;     padding-left: 2vh;}
    #page-8 .historyWrap .lt-box ul li b {float: left; margin-left: 0; margin-right: 10px;}
    #page-8 .historyWrap .rt-box{float:left; width:100%;  padding-left: 2vh;}
    #page-8 .historyWrap .history-box .md-cir{left:0; top:21px;}
    #page-8 .historyWrap ul li p{font-size:15px;}
    #page-8 .squre{display:none;}
}


/* 대송 - ci */
#page-9 {}
#page-9 .ci-wrap{background:url(/images/content/pattern.gif); width:100%; height:322px; padding: 80px; margin: 60px 0 90px;}
#page-9 ul li > div{width:48%; display:block; float: left;}
#page-9 ul li > div:first-child{margin-right:4%;}
#page-9 .colorSt{width:48%; height:auto; background:#24418a; padding:80px 20px 16px 16px;}
#page-9 .colorSt.st02{background:#231f20;}
#page-9 .colorSt.st03{background:#939598;}
#page-9 .txtx p.fc-black{margin:14px 0 7px;}

@media screen and (max-width:991px) {
    #page-9 .ci-wrap{height:auto; padding: 40px; margin: 40px 0 60px;}
}

@media screen and (max-width:768px) {
    #page-9 ul li:last-child{margin-top:30px;}
}

/* 대송 - 오시는 길 */
#page-10 {}
#page-10.pages .wh-box{padding:0 0 20px 0;}
#page-10 .loc{position: relative; margin-bottom: 200px;}
#page-10 .loc .map {width:100%; height: 600px;}
#page-10 .loc .box-location {background:url(/images/content/p10_map_bg.png) no-repeat;  margin: auto;  top: auto;  right: 0; bottom: 0; left: 0;  transform: translateY(60%); position: absolute; width: 100%; height: 180px;}
#page-10 .loc .data{padding: 40px 0 20px; border-bottom:1px solid rgba(255, 255, 255, 0.3); width: 80%; margin: 0 auto;}
#page-10 .loc .data h4{float:left; margin-right:20px; color:#fff;}
#page-10 .loc .data span{color:rgba(255, 255, 255, 0.7);}
#page-10 .loc .info{width: 80%; margin: 0 auto;     padding: 20px 0 30px;}
#page-10 .loc .info p{color:#fff;}
#page-10 .loc .info p > span{color:rgba(255, 255, 255, 0.7); margin-right:8px;}

@media screen and (max-width:991px) {
    #page-10.pages .wh-box{padding:0;}
    #page-10 .loc .box-location{height:auto;}
    #page-10 .loc .data {padding: 30px 0 20px;}
    #page-10 .loc .data h4{float: initial;}
    #page-10 .loc .info {padding:10px 0 30px;}
}

@media screen and (max-width:430px) {
    #page-10 .loc .box-location{background:url(/images/content/p10_map_bg_m.png) no-repeat; }
}

/* 제품소개 -Global Outsourcing - 엔진부품 및 하우징 */
@media screen and (max-width:430px) {
    #page-21.wrap.pdb-20{padding-bottom:0;}
}

/* 제품소개 -Global Outsourcing - 크랭크 샤프트 */
#page-23 {}
#page-23 .crank-wrap{background:#f2f3f7; width:100%; padding: 40px 56px; }
#page-23 .lt-img{width : 100%; height : 0; background:url(/images/content/product_img03_01_bottom.jpg) center center / cover no-repeat; padding-top : calc(160 / 1100 * 100%);}
#page-23 .rt-wh-bx{background:#fff; padding:30px 50px;}
#page-23 p > span.pdSt{width:80px; color:#59abff;}
#page-23 p > span.pdStCts{width: calc(100% - 80px);}
#page-23 .overflow-table{background:#d7dbe8;}

@media screen and (max-width:1208px) {
    #page-23 .rt-wh-bx{padding:23px 50px;}
}

@media screen and (max-width:991px) {
    #page-23 .crank-wrap{padding:18px 30px;}
    #page-23 .lt-img {padding-top: calc(400 / 800 * 100%);}
    #page-23 .rt-wh-bx{padding:16px 20px;}
}




/* 시설현황 - 품질보증 & 관리 시스템 */
#page-27 {}
.tx-wrap{height:500px; position:relative;}
.top-tx{position:absolute; top:0;}
.bt-tx{position:absolute; bottom:0; width:100%;}
.bt-tx ul{border-top: 3px solid #24418a; border-bottom: 1px solid #eee; padding:33px 0;}
.bt-tx .markCheck{position:relative; padding-left:26px; width:95%; line-height: 1.75;}
.bt-tx .markCheck:before{content:''; position:absolute; left:0; top:6px; background:url(/images/content/mark_check.png) no-repeat; width:20px; height:16px;}
.bt-tx .markCheck.w-75{width:75%;}
.bt-tx .markCheck.w-78{width:78%;}
.bt-tx .markCheck.w-79{width:79%;}
#page-27.pages img.float-right, #page-28.pages img.float-right, #page-29.pages img.float-right{margin-right:-24px;}

@media screen and (max-width:1240px) {
    .bt-tx .markCheck.w-75, .bt-tx .markCheck.w-78, .bt-tx .markCheck.w-79{width:95% !important;}
}

@media screen and (max-width:991px) {
    .tx-wrap {height:auto;}
    .top-tx{position:initial; margin:10px 0 30px;}
    .bt-tx{position:initial; }
}

/* 생산라인*/
#page-36 {border-top:1px solid #ddd;}
#page-36 .cts-tx p{border-top: 2px solid #5e98d1; padding-top: 18px;}
#page-36 h1{margin-top:-8px;}

@media screen and (max-width:1240px) {
    #page-36 h1{font-size: 48px;}
}

@media screen and (max-width:768px) {
    #page-36 .cts-tx{margin-top: 40px;}
    #page-36 h1{font-size:34px;}
}

/* 생산라인 - 주요거래처 */
#page-38.pages .blue-bg{background: url(/images/content/mark_ds2.png) left 47px bottom no-repeat #24418a; padding-top: 80px;}
#page-38.pages h3{color:#fff;}


#page-38 li{text-align:center; }
#page-38 li img{border: 1px solid #ddd;  border-radius: 20px; padding: 0 35px;}
#page-38 li a{color:#25428a;}
#page-38 li a:hover{color:#89dcfe; transition:all .3s ease;}
.bgbg img{background:#25428a; }
#page-38 li:nth-child(3){margin-bottom:40px;}
#page-38.pages .wh-box{border-top:2px solid #151515;}



@media screen and (max-width:1240px) {
    #page-38.pages .blue-bg {background: url(/images/content/mark_ds2.png) left 32px bottom 60px no-repeat #24418a; background-size: 30%;}
}

@media screen and (max-width:1024px) {
     ul.ulStyle  li {flex: 0 1 50%;}
    .bgbg{display:none;}
}

@media screen and (max-width:991px) {
    
    #page-38.pages .blue-bg {padding-top:0; background: url(/images/content/mark_ds2.png) left 11px bottom 0 no-repeat #24418a; background-size: 30%;}
    #page-38 li,
    #page-38 li:nth-child(3){margin-bottom:20px;}
    ul.ulStyle  li{flex:0 1 50%; text-align:center;}
}
@media screen and (max-width:800px) {
    ul.ulStyle  li{flex:0 1 100%;}
}


/* 공통 */
@media screen and (max-width:1240px) {
    .blue-bg {background: url(/images/content/mark_ds.png) left 32px bottom 123px no-repeat #f2f3f7; background-size: 30%;}
    .pages .wh-box{width:100%;}
    #page-10.pages .wh-box{padding-top: 60px;}
}



@media screen and (max-width:991px) {
    .pages{padding:45px 0;}
    .pages .blue-bg h3{width: auto; font-size:21px;} 
    .pages .title{font-size:32px;}
    .pages h1{font-size:34px;}
    .pages h3{font-size:21px;}
    .pages h4{font-size:19px;}
    .pages h5{font-size:17px; }
    .fs-35{font-size:30px;}
    .pages .fs-30{font-size:24px;}
    .fs-29{font-size:24px;}
    .fs-25{font-size:21px;}
    .pages .fs-20{font-size:17px;}
    .pages .fs-18{font-size:17px;}
    .pages p{font-size:17px;}
    .pages .wh-box{padding:80px 40px; margin-top: 0 !important;}
    /*#page-7.pages .wh-box{margin-top: 0;}*/

    .pages .blue-bg{background: url(/images/content/mark_ds.png) left 32px bottom 0 no-repeat #f2f3f7; height: auto; padding-top: 0;  background-size: 22%;}
    .pages .blue-bg h3{ padding:60px 0;}
     
}

@media screen and (max-width:640px) {
    .pages .blue-bg h3{width:428px;}
    table.basicTb tr th{font-size:13px;}
    table.basicTb tr td{font-size:12px; padding:0.3rem 0.3rem;}
    .pages .blue-bg{ background: url(/images/content/mark_ds_m.png) left 11px bottom 0 no-repeat #f2f3f7; background-size: 35%;}
    #page-38.pages .blue-bg { background-size: 45%;}
}

@media screen and (max-width:430px) {
    .pages .blue-bg h3{width:auto; font-size: 18px;}
    .pages .fs-20{font-size:16px;}
    .pages .fs-18{font-size:16px;}
    .pages p{font-size:15px;}
    .pages .blue-bg{ background-size: 55%;}
    #page-7 .blue-bg {background-size: 60%;}
    #page-38.pages .blue-bg { background-size: 60%;}
}