@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); 
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(http://cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/nanumbarungothic.css);
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900');

*{margin:0; padding:0; box-sizing:border-box;letter-spacing:-0.04em;color:inherit;}
img {border:0; vertical-align:top;}
a {border:0; text-decoration:none;}
ul, li {list-style:none;}
body {font-family: 'Nanum Gothic', 'Roboto', sans-serif; color:#303030;}
div {display:block;}
h1,h2,h3,h4,h5 {font-family: 'Noto Sans KR','Nanum Barun Gothic';font-weight:300;letter-spacing:-0.08em;line-height:1.25}
h1 b,h2 b,h3 b,h4 b,h5 b {font-weight:500}
.inner {width:1200px;margin:auto;}
.c_main {color:#21437c !important}
.c_black {color:#303030 !important}
.c_sky {color:#1ab9f4 !important;}
.c_lightgray {color:#a0a0a0 !important}
.c_darkgray {color:#535353 !important}
.c_gray {color:#808080 !important}
.c_white {color:#fff !important}
h1 {font-size:46px;font-weight:100;}
h2 {font-size:36px}
h3 {font-size:28px;}
h4 {font-size:22px;}
h5 {font-size:20px;line-height:1.5}
p {font-size:16px;line-height:180%;color:inherit}

span {color:inherit}

.left {float:left;}
.right {float:right}
.center {text-align:center}
.half {width:50%}
.al_left {text-align:justify}
.al_right {text-align:right}


/* 마진,패딩 설정 */
.mg0 {margin-left:0 !important;margin-right:0 !important}

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}

.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}

.pl05 {padding-left:5%}
.pl10 {padding-left:10%}
.pl15 {padding-left:15%}
.pl20 {padding-left:20%}

.pr05 {padding-right:5%}
.pr10 {padding-right:10%}
.pr15 {padding-right:15%}
.pr20 {padding-right:20%}


.bd_b {border-bottom:1px #e0e0e0 solid}
.bd_t {border-top:1px #e0e0e0 solid}





/* 공통 */
#wrap {width:100%; min-width:1200px; margin:auto;}
#header {width:100%; min-width:1200px; height:100px;position:relative;margin:auto;border-top:8px #21437c solid;text-align:center}
#header .logo {padding-top:28px;margin-bottom:28px;float:left}
#header .logo img.buy{ padding: 10px; 0 0 10px;}

#header #gnb {float:right; text-align:center; position:relative;height:92px;line-height:92px;display:inline-block;}
#header #gnb > ul {margin:auto;display:inline-block}
#header #gnb > ul > li {float:left; font-size:18px;}
#header #gnb > ul > li a:hover,#header #gnb > ul > li a.on:hover {background:#1ab9f4;color:#fff;}
#header #gnb > ul > li a.on {background:#1ab9f4;color:#fff;}
#header #gnb > ul > li a {display:block;padding:0 30px;-webkit-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}


span.more {display:inline-block;height:27px;width:27px;}
span.more_w {display:inline-block;height:27px;width:27px;}
span.more a {background:url(images/btn_more.gif) center no-repeat;}
span.more_w a {background:url(images/btn_more_w.gif) center no-repeat;}
span.more a,span.more_w a {display:block;text-indent:-3333px;cursor:pointer;height:27px;}
span.more:hover,span.more_w:hover {background:#303030}



/* 메인 컨테이너 */
#main {width:100%; min-width:1200px;margin:0 auto 50px;display:inline-block;position:relative;line-height:0}
#main .main_sl1 {width:100%; min-width:1200px; background:url(images/main_sl1.jpg) top center;height:522px;}
#main .main_sl2 {width:100%; min-width:1200px; background:url(images/main_sl2.jpg) top center;height:522px;}
#main .flexslider ul li .inner {background:url(images/main_sl_txt.png) center no-repeat;height:522px;}



#main .content {margin:50px auto;}
#main .content > div{overflow:hidden;}
#main .content .top_box > div {float:left;width:290px; height:300px;margin-left:13px;overflow:hidden;position:relative;color:#fff}
#main .content > div span.link {border:1px #fff solid;width:90px; line-height:24px;display:inline-block;font-size:13px;margin-top:10px}
#main .content > div span.link a {display:block;height:24px;}
#main .content .top_box > div.product1 {margin-left:0px;}
#main .content .product1,#main .content .product2 {webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out;padding:90px 0}
#main .content .product1 img,#main .content .product2 img {-webkit-transition: all 0.4s ease-out;transition: all 0.4s ease-out;position:absolute;top:0;left:0;z-index:-1}
#main .content .product1:hover img,#main .content .product2:hover img {-webkit-transform: scale(1.1);transform: scale(1.1);}
#main .content .product1:hover,#main .content .product2:hover {background:rgba(0,0,0,0.5);}

#main .content .btm_box {margin-top: 18px;}

#main .one_stop {height: 48px; background-color:#fd501d; }
#main .one_stop h4{font-size: 19.5px;line-height: 48px; font-weight: 600; letter-spacing: 0.1em;}



#footer {width:100%; min-width:1200px;margin:auto;display:inline-block;position:relative;border-top:1px #d0d0d0 solid}
#footer .footer_txt {width:1200px;margin:20px auto;text-align:left;font-size:12px;color:#808080;letter-spacing:-0.5px;line-height:170%;}
#footer .footer_txt span {padding-right:15px;}



/* 서브 */
#sub {width:100%; min-width:1200px; display:inline-block;position:relative;}
#sub .subtop {width:100%; min-width:1200px;height:226px; background:url(images/subtop.jpg) center no-repeat;}
#sub .subtop .inner {height:226px; background:url(images/subtop_txt.png) center no-repeat;}


#sub > .inner {margin-top:50px}
#sub .title {float:left;width:230px;height:230px;background:url(images/title.gif) center no-repeat;color:#fff;padding:75px 40px}
#sub .title.sub5 {padding:50px 30px}
#sub .title span {color:#a0a0a0;font-size:13px;margin-top:10px;display:inline-block}



#sub #content  {float:right; width:900px; display:inline-block;position:relative;}
#sub #content .paragraph {width:100%; margin-bottom:80px;display:inline-block;}
#sub #content .paragraph p {color:#606060}
#sub #content .paragraph .row {width:100%; display:inline-block}
#sub #content .paragraph h3.subject {background:url(images/subject.png) top left no-repeat;padding-top:20px;margin-bottom:15px;color:#21437c;font-size:30px}
#sub #content .paragraph h4 {margin-bottom:5px}
#sub #content .paragraph h4.number {font-weight:300;margin-bottom:10px}
#sub #content .paragraph h4.number span {background:#3a4c88;height:29px;width:29px;border-radius:29px;color:#fff;font-family: 'Roboto', sans-serif;font-weight:100;margin-right:10px;font-size:20px;display:inline-block;line-height:29px;text-align:center}




#sub #content .paragraph .map {width:100%;height:70px;background:url(images/maplist.png) center no-repeat;}
#sub #content .paragraph .map li {float:left;width:33.33%;height:70px;}
#sub #content .paragraph .map li a {display:block;height:70px;text-indent:-3333px}

#sub #content .paragraph table.bagic th,#sub #content .paragraph table.bagic td {padding:10px 15px}
#sub #content .paragraph table.bagic th {border-bottom:1px #21437c solid;text-align:left;font-weight:normal;}
#sub #content .paragraph table.bagic th p {color:#21437c}
#sub #content .paragraph table.bagic td {border-bottom:1px #d0d0d0 solid}
#sub #content .paragraph table.bagic .top th {border-top:1px #21437c solid}
#sub #content .paragraph table.bagic .top td {border-top:1px #d0d0d0 solid}
#sub #content .paragraph table.bagic .article {background:#21437c;color:#fff;}
#sub #content .paragraph table.bagic .article th {text-align:center}
#sub #content .paragraph table.bagic.center th {text-align:center}


#sub #content .paragraph .device {width:567px;}
#sub #content .paragraph .device > img {border:1px #e0e0e0 solid;margin-bottom:20px}
#sub #content .paragraph .device h2 {margin-bottom:10px}


#sub #content .paragraph ul.bullet {display:inline-block}
#sub #content .paragraph ul.bullet li {background:url(images/bullet.png) 0 12px no-repeat;padding-left:10px;margin-bottom:5px}




#sub #content .board_box {width:100%;display:inline-block;min-height:400px;font-size:13px !important;margin-bottom:80px}


/* 서브페이지 탭 */
#sub #content .tab_list {height:62px; line-height:60px; margin-bottom:40px; background:url(images/tab_bg.gif) center repeat-x}
#sub #content ul.tabs {	 ; float:right; position:relative; left:-50%;}
#sub #content ul.tabs li { display:inline-block;	float:left; position:relative; left:50%; text-align:center; font-size:17px;  border:1px #e0e0e0 solid; background:#fff; margin:0 2px; width:160px}
#sub #content ul.tabs li a {display:block;}
#sub #content ul.tabs li.active  { background:#00335f; color:#fff;  border:1px #00335f solid}
#sub #content .tab_container {width:100%;display:inline-block; }
#sub #content .tab_content {padding: 30px 0 0 0; width:100%;display:inline-block; min-height:280px;}