@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:100,300,400');
/* CSS Document */
html {font-size: 62.5%;}
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video, button, input, select, textarea{
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 1.4rem;
    font-family: 'Malgun Gothic', sans-serif;
    vertical-align: baseline;
    box-sizing: border-box;
    text-decoration: none;
    color: #666;
    list-style: none;
    background: none;
    line-height: 1;
    outline: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a, span {display: inline-block;}
a:hover {text-decoration: none;}
p, span {line-height: 1.4;}
button {cursor: pointer;}
button:focus, button:active, input:focus {outline: none;}
label {cursor: pointer;}
legend {display: none;}
/*main*/
.wrap { overflow: hidden; position: relative; min-width: 1400px;}
.header_wrap {width: 100%; background:#fff;}
.header_wrap .header_link_wrap {background: #f4f4f4;}
.header_wrap .header_link {position:relative; height: 40px; width: 1200px; margin:0 auto; text-align: right; }
.header_wrap .header_link > a { color: #666; height: 40px; line-height: 40px; padding:0 1.5rem; }
.header_wrap .header_link > a:last-child { vertical-align: top; }
.header_wrap .header { position:relative; width: 1200px; margin:0 auto; overflow: hidden; height: 100px;}
.header_wrap .header h1 {position:absolute; top:15px; left: 0; z-index: 9;} 
.header_wrap .header .nav_box {position: absolute; top:10px; left: 0; padding-left: 300px; width: 100%; }
.header_wrap .header .nav_box li {float: left; width: 16%; position: relative;}
.header_wrap .header .nav_box li:after {content:'·'; display: inline-block; font-size: 30px; color: #666; position: absolute; top:23px; right: 0;}
.header_wrap .header .nav_box li:last-child:after {display: none;}
.header_wrap .header .nav_box li a {font-size: 1.8rem; color: #222; letter-spacing: -0.5px; font-weight: bold; height: 80px; line-height: 80px; display: block; text-align: center; }
.header_wrap .header .nav_box li a:hover {color:#003366;}
.header_wrap .header .nav_box li a.on {color:#003366;}
.header_wrap .nav_drop_wrap { background:#003366; display: none; width: 100%; position: absolute; top:140px; z-index: 99; }
.header_wrap .nav_drop_wrap .nav_drop {width: 1200px; margin:0 auto; overflow: hidden; padding:20px 0 20px 300px;} 
.header_wrap .nav_drop_wrap .nav_drop ul {float: left; width: 16%;}
.header_wrap .nav_drop_wrap .nav_drop ul li a {padding:15px 0; color: #fff; display: block; text-align: center; font-size: 1.4rem;}
.header_wrap .nav_drop_wrap .nav_drop ul li a:hover {color: #6aaed0; font-weight: bold;}
.header_wrap .search_box {position: absolute; top:34px; right: 0;}
.header_wrap .search_box select {background: #a2a6ab; color: #333; width: 100px; border:1px solid #ddd; height: 32px; vertical-align: middle;}
.header_wrap .search_box .search_area {background: #a2a6ab; color: #fff; padding-right: 10px; width: 215px; border:0;  vertical-align: middle; position: relative; }
.header_wrap .search_box .search_area input {border:0; background:none; height: 32px; padding-left:15px; width: 77%; color: #fff;}
.header_wrap .search_box .search_area .search_btn {width: 30px; height: 30px; background: url('http://127.0.0.1/images/search_ico.png') no-repeat right 4px; vertical-align: middle; position: absolute; top:0; right: 10px; z-index:99;}


.mobile_gnb {display: none;}
.mobile_gnb_open_btn {position: absolute; top:63px; right: 20px;}
.mobile_gnb_list {position: absolute; top:0px; left: 100%; width: 100%; background: #003366; z-index: 99999; 
-webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    overflow-y: auto;
}
.mobile_gnb_list .gnb_area {margin:30px; margin-top: 50px;}
.mobile_gnb_list .gnb_area a {display: block; padding:20px 0; color: #fff;}
.mobile_gnb_close_btn { position: absolute; top:20px; right: 20px; }
.mobile_gnb_list .gnb_area .oneD {border-bottom: 1px solid #114981; font-size: 15px;}
.mobile_gnb_list .gnb_area .oneD.on {font-weight: bold;}
.mobile_gnb_list .gnb_area .twoD {display: none; border-bottom: 1px solid #114981; padding: 15px 0;}
.mobile_gnb_list .gnb_area .twoD a {padding:7px 0; font-size: 13px; padding-left: 10px;}

/*메인비주얼*/
.main_visual_wrap {width: 100%;}
.main_visual_wrap .inner { width: 1200px; margin:0 auto; padding-top:220px;}
.main_visual_wrap .owl-stage .item.slide1 { background:url('../images/main_visual1.jpg') no-repeat center center; background-size: cover; }
.main_visual_wrap .item {height: 58rem; }
.main_visual_wrap .inner > strong {font-size:5rem; color:#003366; letter-spacing: -2px; line-height: 1.2; text-align: center; display: block;}
.main_visual_wrap .inner > strong:after {content: ''; display: block; width: 150px; border-bottom: 1px solid #ad1724;  margin:30px auto;}
.main_visual_wrap .inner p {font-size:2.3rem; color: #fff; margin:15px 0 7%; text-align: center; letter-spacing: -2px;}

/*메인컨텐츠*/
.main_content_wrap {padding: 5rem 0 8rem; background: #f6f6f6;}
.main_content  {width: 1200px; margin:0rem auto; overflow: hidden;}
.main_content .main_product { position: relative; padding-top: 5px;}
.main_content .main_product h2 {font-size:1.8rem; color:#333; font-weight: bold; }
.main_content .main_product ul {overflow: hidden; margin-top: 20px;}
.main_content .main_product ul li {float: left; width: 24.2%; margin-right:1%; margin-bottom:1%; background:#fff; border:1px solid #ddd;}
.main_content .main_product ul li .thumbnail {padding-top: 94%;}
.main_content .main_product ul li > a {display: block;}
.main_content .main_product ul li:nth-child(4) {margin-right: 0;}
.main_content .main_product ul li .txt_box {margin:10px; background:#003366; padding:20px; text-align: center;}
.main_content .main_product ul li .txt_box span {color: #fff; display: block;}
.main_content .main_product .more_btn {position: absolute; top:0; right: 0; background: url('../images/more_btn.png') no-repeat right center; padding:5px 0; padding-right: 30px; }
.main_content .main_banner {overflow: hidden; margin-top: 30px;}
.main_content .main_banner li {float: left; margin-right: 1%; width: 32.6%; margin-bottom: 1%;}
.main_content .main_banner li:last-child {margin-right: 0;}
.main_content .main_banner li a {display: block; box-sizing: border-box; border:5px solid #ddd; transition: all .2s ease-in-out;}
.main_content .main_banner li a:hover {border:5px solid #003366; }
.main_content .main_banner li a img {width: 100%;}

.quick_cs_banner {position: fixed; top:500px; right: 5%; z-index: 9;}
/*섬네일설정*/
.thumbnail {position: relative; padding-top: 87%; overflow: hidden;}
.thumbnail img {position: absolute; top:0; left:0; height: auto; width: 100%;}
.thumbnail .centered {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform: translate(50%,50%); -ms-transform: translate(50%,50%); transform: translate(50%,50%);}
.thumbnail .centered img { position: absolute; top: 0; left: 0; width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.thumbnail .landscape {width: auto !important; width:none !important; height: 100% !important;}
.thumbnail .portrait  {width: 100% !important; height: auto !important;}
/* 탭설정 */
.tabsContainer{overflow:hidden;}
.tabs-nav{overflow:hidden; width: 100%; border:1px solid #ddd; padding:30px 20px; margin-bottom: 40px;}
.tabs-nav li {display: inline-block;}
.tabs-nav li.active a {color: #003366;}
.tabs-nav li a {display: block; font-size: 1.5rem; color: #666; font-weight: bold; padding:0 30px;}
.tabs-nav li a:hover {color: #003366}
.tabs-nav li:first-child a {border-right: 1px solid #ccc;}
.tabs-content {overflow:hidden;}
.tabs-content .tabs{overflow:hidden; display:none; }
.tabs-content .tabs.active{display:block;}

.footer_wrap {width: 100%; background:#20242d;}
.footer_wrap .footer_link {width: 100%; background:#c2c2c2;}
.footer_wrap .footer_link .footer_link_inner {width: 1200px; margin:0 auto; text-align: left; overflow: hidden;}
.footer_wrap .footer_link .footer_link_inner a {height: 5rem; line-height: 5rem; color: #333; font-size: 1.3rem; padding:0 2rem; border-left: 1px solid #ddd;}
.footer_wrap .footer_link .footer_link_inner a:last-child {border-right:1px solid #ddd;}
.footer_wrap .footer_link .footer_link_inner a.link_intro {background:#273b5a; color: #fff; font-weight: bold; font-size:1.4rem; padding:0 2rem; float: left; border-left: 0;}
.footer_wrap .footer .footer_inner {width: 1200px; margin:0 auto; position: relative; padding: 4rem 0;}
.footer_wrap .footer .footer_inner .txt_box { }
.footer_wrap .footer .footer_inner .txt_box span { color: #888; font-size: 1.3rem; display: block; margin-bottom:0.5rem;}
.footer_wrap .footer .footer_inner .family_site {position: absolute; top:4rem; right: 0px; }
.footer_wrap .footer .footer_inner .family_site button {padding:10px 10rem 10px 2rem; border:1px solid #999; color: #999; position: relative; }
.footer_wrap .footer .footer_inner .family_site button:after {content:''; position: absolute; top:13px; right: 10px; width:13px; height: 8px; background: url('../images/family_site_ico.png') no-repeat 0 0; -webkit-transform: rotate(0deg); transform: rotate(0deg); transition: all .5s ease-in-out;}
.footer_wrap .footer .footer_inner .family_site button.on:after {transform:rotateY(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);}
.footer_wrap .footer .footer_inner .family_site ul {position: absolute; bottom:36px; left: 0; width: 100%; display: none;}
.footer_wrap .footer .footer_inner .family_site ul li {background: #fff; border-bottom: 1px solid #eee; }
.footer_wrap .footer .footer_inner .family_site ul li a {padding: 10px; }


@media all and (width: 1000px) {
    .quick_cs_banner {display: none;}
}

/*탑버튼
.top_btn {position: absolute; top:20px; right: 0; width: 46px; height: 46px; background: url('../images/top_btn.png') no-repeat 0 0; cursor: pointer;}


/*
@media all and (width: 1200px) {
    html {font-size: 59%;}
    .header_wrap .header, .main_content, .footer_wrap .footer .footer_inner {margin-right: 20px; margin-left: 20px;}
    .header_wrap .header .nav_box {padding-left: 220px;}
    .header_wrap .nav_drop_wrap .nav_drop {padding-left: 220px;}

    .main_visual_wrap .inner {}
}

@media all and (width: 1100px) {
    .header_wrap .header .nav_box {padding-left: 200px;}
    .header_wrap .nav_drop_wrap .nav_drop {padding-left: 200px;}
    .quick_cs_banner {display: none;}
}

@media all and (width: 980px) {
    .header_wrap .header .nav_box {display: none;}
    .header_wrap .header {height: 60px;}
    .header_wrap .header h1 {top:1rem;}
    .header_wrap .header h1 img {width: 125px;}
    .mobile_gnb {display: block;}
    .main_content {margin:2rem 2rem 6rem 2rem;}
    .main_content .section .mid_banner, .main_content .section .cs_box {float: none; width: 100%;}
    .main_content .service ul li {width: 33.3%; margin-bottom: 3%;}
    .main_content .service ul li:nth-child(3):after {display: none;}
    .main_content .service ul li a {font-size: 1.6rem; background-size: auto 35px !important; background-position: center 22px !important;}
    .footer_wrap .footer .footer_inner {padding:3rem 0;}
    .footer_wrap .footer .footer_inner p {top:5.5rem; left: 25%;}
    .footer_wrap .footer .footer_inner .family_site {position: relative; top:0!important; left: 0;}
    .footer_wrap .footer .footer_inner .txt_box {position: relative; top:0; left: 0; margin: 2rem 0;}
    .footer_wrap .footer .footer_inner h2 img {width: 150px;}


}

@media all and (width: 768px) {
    html {font-size: 50%;}
    
    .header_wrap .search_box {display: none;}
    .header_wrap .search_box .search_area {width: 160px;}
    .main_visual_wrap .item {height: 50rem; padding-top:0rem;}
    .main_visual_wrap .inner {text-align: center; padding:205px 20px 0 20px;}
    .main_visual_wrap .inner strong {font-size: 4rem;} 

    .main_content .main_product ul li {width: 49.5%;}
    .main_content .main_product ul li:nth-child(2n) {margin-right: 0;} 
    .main_content .main_banner li {width: 49%;}
    .top_btn {top:0px;}


}
@media all and (width: 640px) {
    .footer_wrap .footer .footer_inner p {position: relative; top:0; left: 0; text-align: left; margin-top:10px;}
    .main_visual_wrap .owl-carousel .owl-nav .owl-next, .main_visual_wrap .owl-carousel .owl-nav .owl-prev {display: none;}

    .footer_wrap .footer_link .footer_link_inner a.link_intro {display: none;}
    .footer_wrap .footer_link .footer_link_inner a {width: 19.99%; float: left; text-align: center; padding:0;}
    .footer_wrap .footer .footer_inner p {position: relative; top:0; left: 0; text-align: left; margin-top:10px;}
    .footer_wrap .footer .footer_inner .family_site {top:4.3rem;}
    .footer_wrap .footer .footer_inner .family_site button {padding:10px 7rem 10px 2rem;}

}

@media all and (width: 480px) {
    .main_visual_wrap .inner {padding:175px 20px 0 20px;}
    .main_visual_wrap .inner strong {font-size: 3.5rem;}
    .main_visual_wrap .inner strong span{font-size: 3.5rem;} 
    .main_visual_wrap .item {height: 45rem;}

    .main_content .main_product ul li {width: 100%; float: none; margin-right: 0;}
    .main_content .main_banner li {width: 100%; float: none;}

}
@media all and (width: 380px) {
}

*/