@charset 'utf-8';

.page {}

.page #tab-menu { display: flex; margin: 0 0 70px;}
.page #tab-menu li { flex:1; }
.page #tab-menu li a { display: block; padding: 18px 10px;  width: 100%; height: 100%; font-weight: 500; line-height: 1.2; text-align: center; border: 1px solid #cfcfcf;}
.page #tab-menu li a.on { background: #003371; color: #fff; border: 1px solid #003371;}

@media (max-width:991px){
    .page #tab-menu { display: flex; margin: 0 0 60px;}
}
@media (max-width:768px){
    .page #tab-menu { display: flex; margin: 0 0 50px;}
}
@media (max-width:576px){
    .page #tab-menu { display: flex; margin: 0 0 40px;}
    .page #tab-menu li a { padding: 15px 5px;}
}


.greeting { }
.greeting .box { padding: 100px 10px; background: url('/img/dw/greeting_bg.jpg') no-repeat center / cover;  }
.greeting .box p {color: #fff; text-align: center;  }
.greeting .box .p1 { font-size: 46px; font-weight: 700; }
.greeting .box .p2 { font-size: 25px; font-weight: 400; }
.greeting .txt { padding: 70px 0 0 ;}
.greeting .txt p { max-width: 1130px ;}
.greeting .txt p span { display: block;}
.greeting .txt .p1 { font-size: 35px; font-weight: 500;}
.greeting .txt .p1 b { font-weight: 500; color: #003371;}
.greeting .txt .p2  { padding: 10px 0 40px; font-size: 20px; font-weight: 400; }
.greeting .txt .p3  {}
.greeting .txt .p4  { padding: 30px 0 40px;}
.greeting .txt .sing  {}

@media (max-width:1300px){
    .greeting .box { margin: 0 -10px;}
}

@media (max-width:991px){
    .greeting .box { padding: 90px 10px}
    .greeting .box .p1 { font-size: 44px;}
    .greeting .box .p2 { font-size: 22px; }
    .greeting .txt { padding: 60px 0 0 ;}
    .greeting .txt .p1 { font-size: 33px; }
}

@media (max-width:768px){
    .greeting .box { padding: 80px 10px}
    .greeting .box .p1 { padding: 0 0 5px; font-size: 34px;}
    .greeting .box .p2 { font-size: 18px; }
    .greeting .txt { padding: 50px 0 0 ;}
    .greeting .txt .p1 { font-size: 30px; }
}


@media (max-width:576px){
    .greeting .box { padding: 70px 10px}
    .greeting .box .p1 { padding: 0 0 15px; line-height: 1.3;}
    .greeting .box .p2 { font-size: 16px; }
    .greeting .txt .p1 { font-size: 26px; }
    .greeting .txt .p2 { padding: 10px 0 20px; font-size: 18px; }
    .greeting .txt .p4 { padding: 20px 0 30px; }
}

@media (max-width:480px){
    .greeting .box { padding: 60px 10px}
    .greeting .box .p1 { font-size: 30px;}
    .greeting .box .p2 { font-size: 15px; }
    .greeting .box .p2 br { display: none;}
    .greeting .txt { padding: 40px 0 0;}
    .greeting .txt .p1 { font-size: 22px; }
    .greeting .txt .p2  { font-size: 15px;}
    .greeting .txt .p2 br { display: none;}
}


.history {}
.history .box { display: flex; padding: 0 0 50px;}
.history .box p { position: relative; width: 230px; font-size: 35px; font-weight: 700; line-height: .8; color: #003371;}
.history .box p:before,
.history .box p:after { content:''; display: block; position: absolute; background: #cfcfcf;}
.history .box p:before {  top: 12px; left:110px; width: 7px; height: 7px; border-radius: 50%; }
.history .box p:after {  top: 15px; left:110px; width: 100px; height: 1px; }
.history .box dl { display: flex; flex-wrap:wrap; width: calc(100% - 230px); line-height: 1.2;}
.history .box dl dt,
.history .box dl dd { padding: 0 0 15px; }
.history .box dl dt { width: 105px;}
.history .box dl dt span {display: block; width: 75px; height: 35px; background: #333; font-size: 20px; line-height: 35px; font-weight: 400; text-align: center; color: #fff; border-radius: 18px;}
.history .box dl dd { padding-top: 7px; width: calc(100% - 105px);}

@media (max-width:768px){
    .history .box p { width: 160px;}
    .history .box dl { width: calc(100% - 160px);}
    .history .box p:before { left: 95px;}
    .history .box p:after { left: 95px; width: 45px;}
    .history .box dl dt { width: 90px;}
    .history .box dl dt span { width: 70px; height: 30px; line-height: 30px; }
    .history .box dl dd { padding-top: 0; width: calc(100% - 90px); line-height: 1.5;}
}
@media(max-width:576px){
    .history .box { flex-wrap:wrap; padding: 10px 10px 20px; margin-bottom: 20px; border-bottom: 1px solid #ddd;}
    .history .box p { padding: 0 0 15px; width: 100%; font-size: 25px;}
    .history .box p:before,
    .history .box p:after { display: none;}
    .history .box dl { width: 100%;}
    .history .box dl dt { width: 60px;}
    .history .box dl dt span { width: 45px; height: 25px; font-size: 16px; line-height: 25px;}
    .history .box dl dd { width: calc(100% - 60px);}
}

.group img { width: 100%;}



.root_daum_roughmap { width: 100%;}
.root_daum_roughmap .map_border { display: none;}
.location .con1 > .map { border: 1px solid #cfcfcf;}
.location .add { padding: 40px 0 10px ; font-size: 26px; font-weight: 500;}
.location .tel { padding: 0 0 40px; font-size: 22px; }
.location .tel span { display: inline-block; padding: 0 25px 0 0;}
.location dl { display: flex; flex-wrap:wrap; border-top: 2px solid #0a3281;}
.location dl dt,
.location dl dd { padding: 15px 17px; border-right: 1px solid #cfcfcf; border-bottom: 1px solid #cfcfcf;}
.location dl dt { width: 150px; background: #f9f9f9; font-weight: 500; }
.location dl dd { width: calc(50% - 150px); background: #fff;   }
.location dl dd:nth-of-type(even) { border-right: none;}
.location dl dt span { display: inline-block;}
@media (max-width:1199px){
    .location dl dt,
    .location dl dd { padding: 15px 10px;  }
    .location dl dt { width: 140px;}
    .location dl dd { width: calc(50% - 140px);}
}
@media (max-width:991px){
    .location .add { font-size: 28px; }
    .location .tel { font-size: 22px;}
    .location dl dt,
    .location dl dd { padding: 15px   }
    .location dl dt { width: 110px;}
    .location dl dd { width: calc(50% - 110px);}
}
@media (max-width:768px){
    .location .add { padding: 40px 0 10px; font-size: 22px; }
    .location .tel { padding: 0 0 40px; font-size: 20px;}
    .location dl dt,
    .location dl dd { padding: 12px 20px  }
    .location dl dt { width: 160px}
    .location dl dd { width: calc(100% - 160px);}
    .location dl dd { border-right: none;}
}

@media(max-width:576px){
    .location .add { padding: 30px 0 10px; font-size: 20px; }
    .location .tel { padding: 0 0 30px; font-size: 18px;}
    .location dl dt ,
    .location dl dd { padding: 10px  }
    .location dl dt { width: 100px}
    .location dl dd { width: calc(100% - 100px);}
}

.prod {}
.prod article { padding:70px 0; margin: 0 0 20px; border-bottom: 1px solid #cfcfcf; }
.prod article:last-of-type { border: none;}
.prod .wrap .img{ width: 40%;  }
.prod .wrap .txt{ width: 60%;  }
.prod .wrap figure { width: 48.07%;  }
.prod .wrap .img img,
.prod .wrap figure img { width: 100%; max-width: 780px !important; border: 1px solid #cfcfcf; }
.prod .wrap .img { text-align: center; }
.prod .wrap .txt h4 {height: 55px; font-size: 24px; font-weight: 600; color: #111; line-height: 55px;position: relative;padding-left: 30px;}
.prod .wrap .txt h4::before{ content: ""; display: inline-block; width: 8px; height: 8px; background: #004ba7; position: absolute; top:21px; left: 0px; border-radius: 50%;}
.prod .wrap .txt dl { padding: 20px 0 20px 32px; margin: 0 0 -20px;}
.prod .wrap .txt dl dt { padding: 0 0 7px; font-size: 20px; font-weight: 600; color: #333;}
.prod .wrap .txt dl dd { padding: 0 0 7px; font-size: 17px; line-height: 35px; color: #555;}
.prod .wrap .txt dl dd p { font-weight: 400;}
.prod .wrap .txt dl dd span  { display: block; padding: 0 0 0 10px; text-indent: -10px;}
.prod .wrap .txt dl dd span:last-of-type  { padding-bottom: 10px}

.prod .wrap figure { margin: 0;}
.prod .wrap figure figcaption { padding: 15px 0 0; text-align: center; font-size: 20px; font-weight: 500; line-height: 1.2;  }

.prod table { width: 100%;}
.prod table.spec thead {}
.prod table.spec th,
.prod table.spec td { padding: 15px 5px; font-size: 16px; line-height: 1.2; text-align: center;  border: 1px solid #ccc; word-break: break-all; }
.prod table.spec th {background: #e5e5e5;  font-weight: 500; }
.prod table.spec td:first-of-type { background: #f5f5f5;}

@media (max-width:991px){
    .prod .wrap .img, .prod .wrap .txt, .prod .wrap figure { width: 49%;  }
    .prod .wrap .txt dl { padding: 20px 30px;}
    .prod .wrap.tail { flex-wrap:wrap}
    .prod .wrap.tail .img { margin: 0 0 30px; width: 100%;}
    .prod .wrap.tail .txt { width: 100%;}
}
@media (max-width:768px) {



    .prod .wrap .txt h4 { height: 50px; line-height: 50px;}
    .prod .wrap .txt dl  { padding: 20px 30px 0;}
    .prod table.spec th, .prod table.spec td { font-size: 15px;}
}
@media (max-width:576px){
    .prod article { padding: 0 0 40px; margin: 0 0 40px; }
    .prod .wrap .txt h4 {font-size: 18px; line-height: 22px;}
    .prod .wrap .txt h4::before{ top:5px;}
    .prod .wrap .txt dl dt { font-size: 18px; }
    .prod .wrap .txt dl dd p.pt10  { padding-top: 5px !important; }
    .prod .wrap figure figcaption { padding: 10px 0 0; font-size: 16px;}
    .prod table.spec th, .prod table.spec td { font-family: 'dotum',san-serif; font-size: 12px;}
}
@media (max-width:480px){
    .prod .wrap .txt h4 { display: inline-block; width: auto;}
    .prod .wrap .txt dl { padding: 0 ; margin: 0;}
    .prod .wrap .txt dl dt { font-size: 16px; padding:0;}
    .prod .wrap .txt dl dd { line-height: 21px; font-size: 14px;}
    .prod .wrap.img-box { flex-wrap:wrap}
    .prod .wrap.img-box figure { margin: 0 0 20px; width: 100%;}
    .prod .wrap.img-box figure:last-of-type { margin: 0;}
}

.equipment table{width: 100%;}
.equipment table th, .equipment table td{padding: 15px 5px; font-size: 16px; line-height: 1.2; text-align: center;  border: 1px solid #ccc; word-break: break-all; }
.equipment table th{background: #f2f2f2;  font-weight: 500; }
@media (max-width:768px) {
.equipment table th, .equipment table td{ font-size: 12px; padding: 10px 5px;}

}