@charset "utf-8";
/* 공통 */
*{
	margin:0; padding:0;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
			    box-sizing: border-box;
	-webkit-text-size-adjust:none;
}
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%;}
body{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:150%;} /*font-family : 기본값 한글로 써야 오페라까지 잘 먹음*/
/* ng는 나눔고딕 사용시 head.php 나눔고딕 관련 주석을  풀어줍니다. */
a {text-decoration: none;}




#intro .intro_w {background: url(../images/intro/m_intro_bg.jpg) no-repeat center top #394046; position: relative; background-size: 100% auto; padding: 50px 20px 0;}

#intro .ttl_bx {text-align: center;}
#intro .ttl_bx img {max-width: 240px; width: 100%;}
#intro .ttl_bx p {font-size: 12px; color: #fff; letter-spacing: -0.05em; word-break: keep-all; font-weight: 700; margin-top: 5px;}

#intro .lang_bx {position: absolute; right: 20px; top: 15px; font-size: 0;}
#intro .lang_bx li {display: inline-block; padding-right: 15px; 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,.2); position: absolute; right: 7px; top: 50%; margin-top: -6px;}
#intro .lang_bx li:last-child::before {display: none;}
#intro .lang_bx li a {display: inline-block; font-size: 13px; color: rgba(255,255,255,.4);}
#intro .lang_bx li.on a {color: #fff;}

#intro .list01 {position: relative; /*margin-top: 15px;*/}
#intro .list01 .ttl {position: absolute; width: calc(100% - 40px); left: 20px; top: 15px; text-align: center; padding-bottom: 4px; border-bottom: 1px solid #bdbdbd;}
#intro .list01 .link_bx li a {display:flex; justify-content:center; align-items:center; table-layout:fixed; height: 120px;}
#intro .list01 .link_bx li a.bg01 {background: url(../images/intro/list01_bg_01.jpg) no-repeat center; background-size: cover; padding-top: 43px; height: 163px;}
#intro .list01 .link_bx li a.bg02 {background: url(../images/intro/list01_bg_02.jpg) no-repeat center; background-size: cover;}
#intro .list01 .link_bx li a.bg03 {background: url(../images/intro/list01_bg_03.jpg) no-repeat center; background-size: cover;}
#intro .list01 .link_bx li a.bg04 {background: url(../images/intro/list01_bg_04.jpg) no-repeat center; background-size: cover;}
#intro .list01 .link_bx li a.bg05 {background: url(../images/intro/list01_bg_05.jpg) no-repeat center; background-size: cover;}
#intro .list01 .link_bx .txt_w {width: 100%; text-align: center;}
#intro .list01 .link_bx .txt_w img {max-width: 100%;}
#intro .list01 .link_bx .txt_w p {font-size: 10px; line-height: 15px; color: #444444; letter-spacing: -0.05em; word-break: keep-all; margin-top: 12px;}

#intro .list01.type2 {background-color: #fff; padding: 20px 20px 27px;}
#intro .list01.type2 .ttl {position: relative; text-align: left; width: 100%; left: auto; top: auto; padding-bottom: 14px;}
#intro .list01.type2 .link_bx {display: flex; flex-flow: wrap; margin-top: 15px;}
#intro .list01.type2 .link_bx li {width: calc(50% - 5px); margin-right: 10px; margin-top: 26px;}
#intro .list01.type2 .link_bx li:nth-child(2n) {margin-right: 0;}
#intro .list01.type2 .link_bx li:nth-child(1), #intro .list01.type2 .link_bx li:nth-child(2) {margin-top: 0;}
#intro .list01.type2 .link_bx li a {background: none!important; padding-top: 0; height: auto;}
#intro .list01.type2 .link_bx .txt_w {text-align: left;}
#intro .list01.type2 .link_bx .txt_w .logo {height: 12px; background-size: auto 100%; background-position: left center; background-repeat: no-repeat;}
#intro .list01.type2 .link_bx li a.bg01 .txt_w .logo {width: 71px;}
#intro .list01.type2 .link_bx li a.bg02 .txt_w .logo {width: 106px;}
#intro .list01.type2 .link_bx li a.bg03 .txt_w .logo {width: 113px;}
#intro .list01.type2 .link_bx li a.bg04 .txt_w .logo {width: 110px;}
#intro .list01.type2 .link_bx li a.bg05 .txt_w .logo {width: 120px;}

#intro .list02 {background-color: #161616; position: relative; display: flex; flex-flow: wrap; padding: 17px 20px 19px;}
#intro .list02 .con_w {width: calc(50% - 10px); margin-right: 20px; box-sizing: border-box; margin-top: 12px;}
#intro .list02 .con_w:nth-child(2n) {margin-right: 0;}
#intro .list02 .con_w:nth-child(1), #intro .list02 .con_w:nth-child(2) {margin-top: 0;}
#intro .list02 .con_w .ttl {font-size: 10px; color: #fff; font-weight: 700; letter-spacing: -0.05em; border-bottom: 1px solid #aaaaaa; padding-bottom: 4px;}
#intro .list02 .con_w ul {font-size: 0; margin-top: 10px;}
#intro .list02 .con_w ul li {margin-bottom: 5px;}
#intro .list02 .con_w ul li:last-child {margin-bottom: 0;}
#intro .list02 .con_w ul li a {display: inline-block; height: 8px;}
#intro .list02 .con_w ul li a img {height: 8px;}

#intro .f_bx {text-align: center; font-size: 11px; line-height: 15px; color: #989898; word-break: keep-all; letter-spacing: -0.05em; padding: 18px 0 16px}


/* main contents */
#m_container{padding:0 20px; background-color: #fff; margin-top: 20px;}
#m_container h2{padding-top:20px; position:relative;}
#m_container h2 div{width:103px;}
#m_container h2 div img {max-width: 100%;}
#m_container h2 p{font-size:9px; color:#757575; font-weight:normal; line-height:150%; padding-top:5px;}
/*#m_container h2 a{position:absolute; top:25px; right:0; width:15px;}*/
#m_container h2 .btn{position:absolute; top:15px; right:0; font-size: 10px; background-color: #111; line-height: 25px; border-radius: 15px; padding: 0 10px; color: #fff;}

.business_ul{overflow:hidden; padding-top:3%; margin-left:-3%; display: flex; flex-flow: wrap;}
.business_ul li{float:left; width:50%; padding:0 0 5% 3%;}
.business_ul li a{text-decoration:none;}
.business_ul li a > img{width:100%;}
.business_ul li a h3{font-size:16px; font-weight:bold; color:#212121; margin-top:10px;}
.business_ul li a p{font-size:11px; color:#757575; padding-top:3px; line-height:150%; height:67px;}
.business_ul li a div{font-size:12px; font-weight:500; color:#212121; margin-top:6px;}
.business_ul li a div img{width:14px; vertical-align:-3px;}

.business_ul02 {border-top: 1px solid #bdbdbd; padding-top: 10px; margin-top: 10px;}
.business_ul02 li a {position: relative; display: block; height: 144px; overflow: hidden;}
.business_ul02 li a .bg {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-repeat: no-repeat; background-position: center;}
.business_ul02 li a h3 {position: absolute; width: 100%; left: 0; top: 16px; padding: 0 15px; box-sizing: border-box; font-size: 14px; color: #ffffff; font-weight: 700; z-index: 2;}
.business_ul02 li a .more_btn {position: absolute; width: 100%; left: 0; bottom: 17px; padding: 0 15px; box-sizing: border-box; font-size: 10px; color: #ffffff; z-index: 2;}
.business_ul02 li a .more_btn span {display: inline-block; padding-right: 18px; background: url(../images/intro/mb02_arrow.png) no-repeat right center;}


@media (max-width: 410px) {
	#intro .list02 {padding: 17px 15px 19px;}
	#intro .list02 .con_w {width: calc(50% - 5px); margin-right: 10px;}
	#intro .list02 .con_w .ttl {font-size: 9px;}
}