@charset "utf-8";
/* 공통 */
*{margin:0; padding:0;}
img{border:0px; vertical-align:top;}
ul{list-style:none; margin:0; padding:0; border:0 none; font-size:100%; font-weight:normal;}
ul li{font-size:0px; line-height:0.5em;} /* ul li 안에있는 이미지 필요없는 여백 없애는 css */
a{outline:none; select-dummy:expression(this.hideFocus=true);} /* 링크점선없애기위한 css */
input{font-size:13px !important;}

/* body{font:normal 12px "굴림",gulim,sans-serif; color:#888888; line-height:150%;} */
/* body{font:normal 12px "Colaborate Light", Helvetica, Arial, sans-serif,"굴림",gulim; color:#272727; line-height:150%;} */
html{/*height:100%;*/}

/* @init_font */
.init *
, body, a, h1, h2,h3 ,h4 ,h5 ,h6 ,pre
,[type=text], [type=password], [type=file], [type=email], select ,textarea
{font-family:"nbg", "맑은 고딕", "굴림", "tahoma" ;font-size:13px;color:#494848;line-height:160%;} /*font-family : 기본값 한글로 써야 오페라까지 잘 먹음*/
/* ng는 나눔고딕 사용시 head.php 나눔고딕 관련 주석을  풀어줍니다. */

::-moz-selection{
          background: black;
          color: white;
          text-shadow: black;
}
::selection{
          background: black;
          color: white;
          text-shadow: black;
}
a {text-decoration: none;}


#intro {height: 100%; position: relative; background-color: #fff; min-width: 1400px;}
#intro .intro_w {background: url(../images/intro/intro_bg.jpg) no-repeat center top #fff; position: relative; height: 834px;}
#intro .ttl_bx {position: relative; width: 1200px; margin: 0 auto; box-sizing: border-box; padding-top: 64px;}
#intro .ttl_bx .ttl_w {text-align: center;}
#intro .ttl_bx .ttl_w p {font-size: 17px; padding-top: 15px; color: #fff;}
#intro .lang_bx {position: absolute; right: 90px; top: 52px; font-size: 0;}
#intro .lang_bx > li {display: inline-block; padding-right: 14px; position: relative;}
#intro .lang_bx > li:last-child {padding-right: 0;}
#intro .lang_bx > li::before {content: ''; width: 1px; height: 9px; background-color: rgba(255,255,255,.3); position: absolute; right: 6px; top: 50%; margin-top: -7px;}
#intro .lang_bx > li:last-child::before {display: none;}
#intro .lang_bx > li > a {font-size: 12px; color: #9b9b9b; text-decoration: none;}
#intro .lang_bx > li.on > a {color: #fff;}

#intro .con_bx {display: flex; flex-flow: wrap; max-width: 1360px; margin: 52px auto 0; position: relative;}
#intro .con_bx::before {content: ''; width: calc(100% + 40px); height: calc(100% + 40px); box-sizing: border-box; position: absolute; left: -20px; top: -20px; background: url(../images/intro/con_bg.png) repeat-x left top;}
#intro .con_bx .l_bx {width: calc(100% - 300px); box-sizing: border-box; position: relative; z-index: 1;}
#intro .con_bx .l_bx .t_bx {background-color: #fff; box-sizing: border-box; padding: 30px 30px 24px; height: 470px;}
#intro .con_bx .l_bx .t_bx .ttl {border-bottom: 1px solid #bdbdbd; position: relative; height: 46px;}
#intro .con_bx .l_bx .t_bx .ttl p img {padding-right: 12px;}
#intro .con_bx .l_bx .t_bx .ttl p span {font-size: 12px; color: #757575; padding: 8px 0 0 10px; display: inline-block; position: relative;}
#intro .con_bx .l_bx .t_bx .ttl p span::before {content: ''; width: 1px; height: 12px; background-color: #bdbdbd; position: absolute; left: 0; top: 50%; margin-top: -4px;}
/*#intro .con_bx .l_bx .t_bx .ttl a {position: absolute; right: 0; top: -12px; line-height: 40px; padding: 0 20px; background-color: #161616; color: #fff; font-size: 14px; font-weight: 700; border-radius: 20px; text-decoration: none;}*/
#intro .con_bx .l_bx .t_bx .ttl a {position: absolute; right: 0; top: 1px; line-height: 30px; padding: 0 10px; background-color: #161616; color: #fff; font-size: 10px; font-weight: 700; border-radius: 20px; text-decoration: none;}
#intro .mbusiness{width:1000px; overflow:hidden; margin-top:23px;}
#intro .mbusiness li{float:left; margin-left:30px; cursor:pointer;}
#intro .mbusiness li:first-child{margin-left:0 !important;}
#intro .mbusiness li a {display: block; text-decoration: none;}

#intro .mbusiness .mb_img{width:176px; height:130px; overflow:hidden;}
#intro .mbusiness .mb_cont{font-size:13px; color:#757575; line-height:160%; margin-top:26px;}
#intro .mbusiness .mtit{font-size:16px; color:#1c1c1c; font-weight:800; padding-bottom:11px;}
#intro .mbusiness .mmore{font-size:14px; color:#1c1c1c; font-weight:800; padding-top:25px;}
#intro .mbusiness .mmore img{vertical-align:-4px; padding-left:7px;}

#intro .mbusiness li .mb_img img {
  -webkit-transition: -webkit-transform 0.4s ease;
  -moz-transition: -moz-transform 0.4s ease;
  -o-transition: -o-transform 0.4s ease;
  transition: transform 0.4s ease;
}
#intro .mbusiness li:hover .mb_img img {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

#intro .mbusiness02 {display: flex; flex-flow: wrap; margin-top: 23px;}
#intro .mbusiness02 li {width: 20%; box-sizing: border-box;}
#intro .mbusiness02 li a {display: block; position: relative; height: 370px; overflow: hidden;}
#intro .mbusiness02 li a::before {content: ''; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0,0,0,.8); position: absolute; z-index: 1; opacity: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s;}
#intro .mbusiness02 li a:hover::before {opacity: 1;}
#intro .mbusiness02 li a .mb_img {position: absolute; width: 100%; top: 0; left: 0; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; -webkit-transition: transform 0.3s; -moz-transition: transform 0.3s; transition: transform 0.3s;}
#intro .mbusiness02 li a:hover .mb_img {transform: scale(1.2);}
#intro .mbusiness02 li a .mtit {position: absolute; width: 100%; left: 0; top: 29px; box-sizing: border-box; padding: 0 20px; font-size: 16px; color: #ffffff; font-weight: 700; z-index: 2;}
#intro .mbusiness02 li a .mmore {position: absolute; width: 100%; left: 0; bottom: 28px; box-sizing: border-box; padding: 0 20px; font-size: 12px; color: #ffffff; z-index: 2;}
#intro .mbusiness02 li a .mmore span {display: inline-block; padding-right: 25px; background: url(../images/intro/mbusi02_arrow.png) no-repeat right center;}

#intro .con_bx .l_bx .btm_bx {position: relative; z-index: 1;}
#intro .con_bx .l_bx .btm_bx .ttl {position: absolute; top: 30px; left: 30px; width: calc(100% - 60px); border-bottom: 1px solid #bdbdbd; padding-bottom: 10px;}
#intro .con_bx .l_bx .btm_bx .link_bx {display: flex; flex-flow: wrap;}
#intro .con_bx .l_bx .btm_bx .link_bx li {width: 20%; box-sizing: border-box;}
#intro .con_bx .l_bx .btm_bx .link_bx li a {height: 240px; box-sizing: border-box; display: block; padding-top: 107px;}
#intro .con_bx .l_bx .btm_bx .link_bx li a.bg01 {background: url(../images/intro/btm_01_bg.jpg) no-repeat center; background-size: cover;}
#intro .con_bx .l_bx .btm_bx .link_bx li a.bg02 {background: url(../images/intro/btm_02_bg.jpg) no-repeat center; background-size: cover;}
#intro .con_bx .l_bx .btm_bx .link_bx li a.bg03 {background: url(../images/intro/btm_03_bg.jpg) no-repeat center; background-size: cover;}
#intro .con_bx .l_bx .btm_bx .link_bx li a.bg04 {background: url(../images/intro/btm_04_bg.jpg) no-repeat center; background-size: cover;}
#intro .con_bx .l_bx .btm_bx .link_bx li a.bg05 {background: url(../images/intro/btm_05_bg.jpg) no-repeat center; background-size: cover;}
#intro .con_bx .l_bx .btm_bx .link_bx .txt_w {width: 100%; text-align: center;}
#intro .con_bx .l_bx .btm_bx .link_bx .txt_w p {font-size: 13px; line-height: 18px; color: #444444; letter-spacing: -0.05em; word-break: keep-all; margin-top: 17px;}

#intro .con_bx .l_bx .btm_bx.type2 .link_bx {padding: 0 30px; background-color: #fff;}
#intro .con_bx .l_bx .btm_bx.type2 .link_bx li a {background: none!important; padding-top: 91px; height: 230px;}
#intro .con_bx .l_bx .btm_bx.type2 .link_bx .txt_w {text-align: left;}

#intro .con_bx .r_bx {width: 300px; box-sizing: border-box; background-color: #161616; position: relative; z-index: 1; padding: 37px 30px 0;}
#intro .con_bx .r_bx .con_w {margin-bottom: 30px;}
#intro .con_bx .r_bx .con_w:last-child {margin-bottom: 0;}
#intro .con_bx .r_bx .con_w .ttl {font-size: 14px; color: #fff; font-weight: 700; border-bottom: 1px solid #aaaaaa; padding-bottom: 5px;}
#intro .con_bx .r_bx .con_w ul {margin-top: 19px;}
#intro .con_bx .r_bx .con_w ul li {margin-bottom: 14px;}
#intro .con_bx .r_bx .con_w ul li:last-child {margin-bottom: 0;}
#intro .con_bx .r_bx .con_w ul li a {display: inline-block; position: relative;}
#intro .con_bx .r_bx .con_w ul li a img.on {display: none; position: absolute; top: 0; left: 0; z-index: 1;}

#intro .f_bx {text-align: center; padding: 60px 0 35px;}
#intro .f_bx p {font-size: 14px; color: #989898; letter-spacing: -0.05em; word-break: keep-all;}