body {word-break: keep-all;}
.max-img { max-width:100%; }
.s-blue {color:#4379ce;}
.s-magenta {color:#be0046;}


/*¸ÞÀÎ ºê·£µå*/
.mainbanner{position:relative; color:#fff!important;}
.txt_box{position:absolute; top:15%; left:50%; transform:translate(-50%,0);}
.txt_box h2 {color:#fff; margin-bottom:10px;}

.mbrand_img{width:100%; text-align:center; display:block; overflow:hidden;}
.mainbanner img {
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    -ms-transform:scale(1); 
    -o-transform:scale(1);  
    transform:scale(1);
    -webkit-transition:.3s;
    -moz-transition:.3s;
    -ms-transition:.3s;
    -o-transition:.3s;
    transition:.3s;
}
.mainbanner:hover img {
    -webkit-transform:scale(1.2);
    -moz-transform:scale(1.2);
    -ms-transform:scale(1.2);   
    -o-transform:scale(1.2);
    transform:scale(1.2);
}

div.row>div.mainbanner img.img-responsive {min-height:250px;}





/*¸ÞÀÎ ¹öÆ°*/
a.btn-default3 {
    padding: 10px 30px !important;
    letter-spacing: 0;
    font-family: 'Roboto',sans-serif;
    color: #fff !important;
    border: 1px #fff solid;
}

a.btn-default3:hover{color:#fff!important; background:#101010;}

a.btn-default2 {
    padding: 10px 30px !important;
    letter-spacing: 0;
    font-family: 'Roboto',sans-serif;
    color: #222!important;
    border: 1px #222 solid;
}

a.btn-default2:hover{color:#fff!important; background:#101010;}




/***¸ÞÀιٷΰ¡±â***/

.bannerBox .infobox { /*box »çÀÌÁî*/
  display:block;
  min-height:300px;
  padding:20px 0;
  color:#fff;
  text-align:center;
}
.bannerBox .infobox2 {color:#222!important;} 

.info1{background:#72c9c3;}
.info2{background:#364759;}
.info3{background:#e0e1e1;}
.info4{background:#307cae;}


.bannerBox .infobox span { display:block; }
.bannerBox .infobox span:first-child { /*ŸÀÌƲ*/
  padding-top:20px;
  padding-bottom:7px;
  font-weight:400; 
  font-size:30px;
  letter-spacing:-0.06em;
}
.bannerBox .infobox span:last-child { /*¾ÆÀÌÄÜ*/
  padding-top:30px;
}




/**°øÅëcss**/
ul,li,a{text-decoration:none; list-style:none;}


/*¿ìÃø Äü¸Þ´º ÀüÈ­¹®ÀÇ ¹öÆ° css*/
.btnCall { 
  display:block;
  margin-top:5%;
}
.btnCall a { 
  display:block;
  width:99%;
  height:37px;
  margin:0 auto;
  line-height:36px; 
  color:#fff;
  font-weight:bold; 
  font-size:12px;
  text-align:center;
  border-radius:3px;
  background:#484848;
}
.btnCall a:hover { 
  color:#fff;
  background:#888;
}


.br_ul {padding:0; margin:70px 0; text-align:center; font-size:0; }
.br_ul li {display:inline-block; padding:20px;}


.history { position:relative; margin:0 auto 70px; text-align:right; }
.history h2 { text-align:center; }
.history ul { position:relative; margin:0 auto; padding:0 0 10px; }
.history ul:after { content: ''; position:absolute; top:20px; left:50%; width:1px; height:100%; background:#dfdfdf; } 
.history ul li { position:relative; margin-bottom:30px; padding-right:50%; }
.history ul li dl { position:relative; padding-right:40px; }
.history ul li dl dt { margin-bottom:15px; color:#333; font-size:26px; font-weight:600; font-family:'Open Sans', sans-serif; }
.history ul li.his-right dl dt:before,
.history ul li dl dt:before { content: ''; position:absolute; top:24px; width:23px; height:1px; background: #ddd; z-index: 1; }
.history ul li dl dt:before { right:0;}
.history ul li dl:after { content:''; position:absolute; top:20px; right:-5px; display:block; width:9px; height:9px; border-radius:50%; background:#be0046; z-index:2; }
.history ul li dl dd { margin-bottom:6px; font-size:15px; overflow: hidden; clear: both; }
.history ul li dl dd .tit { float: right; width: 27px; font-weight:600; }
.history ul li dl dd .txt { float: right; width: calc(100% - 27px); }
.history ul li.his-right { padding:0 0 0 50%; text-align:left; }
.history ul li.his-right dl:after { right:inherit; left:-4px; }
.history ul li.his-right dl { padding:0 0 0 40px; }
.history ul li.his-right dl dt:before { left: 0; }
.history ul li.his-right dl dd .tit { float: left; width: 27px; font-weight:600; }
.history ul li.his-right dl dd .txt { float: left; width: calc(100% - 27px); }


@media only screen and (max-width: 768px) {
    .history { text-align:left; }
    .history ul { padding-left:35px }
    .history ul:after { top: 10px; left:5px; }
    .history ul li { margin-bottom:20px; padding-right:0; }
    .history ul li.his-right { padding-left:0; }
    .history ul li dl { padding-right:0; }
    .history ul li dl:after{ top:8px; left: -34px !important; right:auto !important; width:9px; height:9px; }
    .history ul li dl dt { margin-bottom:10px; font-size:18px; }
    .history ul li.his-right dl dt:before,
    .history ul li dl dt:before { top:12px; left:-30px !important; right:auto !important; width:20px; height:1px; }
    .history ul li dl dd { font-size:14px; }
    .history ul li dl dd .tit { float: left; width: 30px; }
    .history ul li dl dd .txt { float: left; width: calc(100% - 30px); }
    .history ul li.his-right dl{ padding:0; }
}