@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);
/* 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;
    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, strong {display: inline-block;}
button {cursor: pointer;}
button:focus, button:active, input:focus {outline: none;}
label {cursor: pointer;}
p, span, dt, dd, td, th, strong, li {line-height: 1.5; letter-spacing: -0.5px;}
.scroll_wrap {overflow-x:auto;}

/*에디터*/
.bod_view_box .bod_view .section_mid a,
.bod_view_box .bod_view .section_mid span,
.bod_view_box .bod_view .section_mid p,
.bod_view_box .bod_view .section_mid strong,
.bod_view_box .bod_view .section_mid h1,
.bod_view_box .bod_view .section_mid h2,
.bod_view_box .bod_view .section_mid h3,
.bod_view_box .bod_view .section_mid h4,
.bod_view_box .bod_view .section_mid h5,
.bod_view_box .bod_view .section_mid h6, 
.bod_view_box .bod_view .section_mid img, 
.bod_view_box .bod_view .section_mid i, 
.bod_view_box .bod_view .section_mid dl,
.bod_view_box .bod_view .section_mid dt,
.bod_view_box .bod_view .section_mid dd,
.bod_view_box .bod_view .section_mid ol,
.bod_view_box .bod_view .section_mid ul,
.bod_view_box .bod_view .section_mid li,
.bod_view_box .bod_view .section_mid table,
.bod_view_box .bod_view .section_mid tr,
.bod_view_box .bod_view .section_mid th,
.bod_view_box .bod_view .section_mid td,
.bod_view_box .bod_view .section_mid button {
    font-size: inherit;
    font-family:inherit;
    color: inherit;
}

/*섬네일설정*/
.thumbnail {position: relative; padding-top: 145%; 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; max-width: 100%; height: auto; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.thumbnail .landscape {width: auto !important; max-width:none !important; height: 100% !important;}
.thumbnail .portrait  {width: 100% !important; height: auto !important;}

/* 탭설정 */
.tabsContainer{overflow:hidden;}
.tabs-nav{overflow:hidden;}
.tabs-nav li {display: inline-block;}
.tabs-nav li a {display: block;}
.tabs-content {overflow:hidden;}
.tabs-content .tabs{overflow:hidden; display:none; }
.tabs-content .tabs.active{display:block;}

/*main*/
.wrap { overflow: hidden; position: relative; }
.header_wrap.nav_sticky {position: fixed; top: 0px !important; left: 0; right: 0; z-index: 9999; max-width: 100%; border-bottom: 1px solid #ddd;}
.header_wrap {/*max-width: 1300px;*/max-width:100%; margin:0 auto; position: relative; background: #fff;}
.header_wrap .header_link {position:absolute; top:27px; right: 27px; height: 35px; margin:0 auto; text-align: right; overflow: hidden; z-index: 1}
.header_wrap .header_link > a { color: #999; height: 35px; line-height: 33px; padding:0 1.5rem; border:1px solid #ddd; float: left;}
.header_wrap .header_link > a:last-child { vertical-align: middle; border-left: 0;}
.header_wrap .header { position:relative; /*max-width: 1300px;*/max-width:100%; margin:0 auto; height: 90px; }
.header_wrap .header h1 {position:absolute; top:30px; left:0; z-index: 9;} 
.header_wrap .header .nav_box {position: absolute; top:0px; left: 240px; text-align: left; }
.header_wrap .header .nav_box li {display:inline-block; text-align: center; position: relative; text-align: left;  margin-right: 20px;}
.header_wrap .header .nav_box li:before {content: ''; display: block; width: 0%; border-bottom: 1px solid #a50b0e; transition: all .2s ease-in-out; position: absolute; bottom:20px; left: 0; right: 0; margin:0 auto;}
.header_wrap .header .nav_box li.on:before {width: 85%;}
.header_wrap .header .nav_box li > a {font-size: 15px; color: #999; transition: all .2s ease-in-out;  display: inline-block; padding:34px 10px; text-align: left; font-family: 'Lato'; font-weight: 700;}
.header_wrap .header .nav_box li.on > a  {color:#333;}
.header_wrap .nav_drop {width: 210px; z-index: 10; position: absolute; top:90px; left:0px; display: none; background:rgba(0,0,0,0.7); padding:20px;} 
.header_wrap .nav_drop.on {display: block;}
.header_wrap .nav_drop a {color: #979797; padding:0 2rem; height:50px; line-height: 50px; transition: all .1s ease-in-out; display: block; position: relative;}
.header_wrap .nav_drop a:after {content: ''; display: block; position: absolute; top:25px; left: -20px; width: 0px;  transition: all .1s ease-in-out; border-bottom: 1px solid #a50b0e;}
.header_wrap .nav_drop a:hover:after {width: 30px;}
.header_wrap .nav_bg {background:#1d2228; width: 100%; position: absolute; top:130px; left: 0; height: 0; transition: all .2s ease-in-out; z-index: 9;}
.header_wrap .nav_bg.on {height: 50px;}

.mobile_gnb {display: none;}
.mobile_gnb_open_btn {position: absolute; top:36px; right: 20px;}
.mobile_gnb_list {position: absolute; top:0px; left: 100%; width: 100%; background: #1d2228; 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 #444; 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 #444; padding: 15px 0 15px 15px;}
.mobile_gnb_list .gnb_area .twoD a {padding:7px 0; font-size: 13px;}

.owl-carousel.owl-drag .owl-item .item > a {display: block;}
.main_content_wrap { overflow: hidden; }
.main_content_wrap .scroll_arrow {position:absolute; bottom:20px; left:0; right:0; margin:0 auto; width:105px; height: 105px; background:url('../images/scroll_ico.png') no-repeat 0 0; z-index: 99; cursor: pointer;}
.main_content_wrap .content_wide {width: 100%; margin:0 auto; position: relative; margin-bottom: 120px;}
.main_content_wrap .content_wide .content_inner {max-width: 1300px; margin:0 auto; position: relative;}
.main_content_wrap .content {max-width: 1300px; margin:0 auto; position: relative; margin-bottom: 120px;}
.main_content_wrap h3 {font-size: 3rem; color: #666; margin-bottom: 2.5rem; letter-spacing: -1px; font-family: 'Lato', sans-serif; font-weight: bold;}

/*전체메뉴*/
.total_menu_box { background: rgba(0,0,0,0.85); position: absolute; top:90px; right: 0; width: 60%; z-index: 9; display: none;}
.total_menu_box.on {display: block;}
.total_menu_box .top_box {text-align: right;}
.total_menu_box .top_box .total_menu_btn_close {background: url('../images/pop_close.png') no-repeat center center; width: 20px;height: 22px; position: relative; margin:20px 25px 0 0px; }
.total_menu_box .list_box {width: 100%; margin:0 auto; padding:7%;}
.total_menu_box .list_box {overflow: hidden;}
.total_menu_box .list_box .list_sec {float: left; margin:0 3%; width: 19%}
.total_menu_box .list_box .list_sec strong {font-size: 1.5rem; color: #fff; display: block; border-bottom: 1px solid #cc0000; padding-bottom: 10px; margin-bottom: 25px; text-transform: uppercase;}
.total_menu_box .list_box .list_sec strong:nth-of-type(2) {margin-top: 80px;}
.total_menu_box .list_box .list_sec a {color: #fff; width:155px; margin-bottom: 25px; display: block; text-transform: uppercase;}
.total_menu_box .list_box .list_sec a:hover {color:#cc0000; }

/*메인비주얼*/
.main_visual_wrap {width: 100%; position: relative; margin-bottom: 10rem;}
.main_visual_wrap .inner { max-width: 1300px; margin:0 auto; padding-top:15%;}
.main_visual_wrap .owl-stage .item.slide1 { background:url('../images/main_visual1.jpg') no-repeat center center; background-size: cover; }
.main_visual_wrap .inner {width: 40%; float: right;}
.main_visual_wrap .inner > strong {font-size:4.5rem; color:#fff; letter-spacing: -1px; line-height: 1.2; text-align: left; display: block; margin-bottom: 50px; font-family: 'NanumSquare', sans-serif; font-weight: lighter;}
.main_visual_wrap .inner .more_btn { border:1px solid #fff; padding:2rem 3rem; font-size:1.4rem; color: #fff;  font-family: 'Lato', sans-serif; transition: all .2s ease-in-out}
.main_visual_wrap .inner .more_btn:hover { background: #fff; color: #333; }
.main_visual_wrap .owl-carousel .owl-nav .owl-prev {left: 3%; top:47%; width: 76px; height: 76px; opacity: 0.5; transition: all .2s ease-in-out}
.main_visual_wrap .owl-carousel .owl-nav .owl-prev:hover {opacity: 1;}
.main_visual_wrap .owl-carousel .owl-nav .owl-next {right: 3%; top:47%; width: 76px; height: 76px; opacity: 0.5; transition: all .2s ease-in-out}
.main_visual_wrap .owl-carousel .owl-nav .owl-next:hover {opacity: 1;}
.main_visual_wrap .owl-carousel .owl-dots { width: 40%; top:25%; right: 0;}
.main_visual_wrap .owl-carousel .owl-dots span {width: 10px; height: 10px; margin-right: 5px;}

/*메인서비스*/
.main_content_wrap .service {position: relative;}
.main_content_wrap .service > p {font-size:1.6rem; color: #999999; margin-top: -5px;}
ul.service_list {margin-top: 7rem; overflow: hidden;}
ul.service_list li {float: left; width: 25%; margin-bottom: 10rem; font-size:1.6rem; color: #000; padding-top: 9rem; line-height: 1.2; font-family: 'Lato', sans-serif; position: relative; transition: all .2s ease-in-out; cursor: default;}
ul.service_list li:nth-child(1) {background: url('../images/m_serv1.png') no-repeat 0 0;}
ul.service_list li:nth-child(2) {background: url('../images/m_serv2.png') no-repeat 0 0;}
ul.service_list li:nth-child(3) {background: url('../images/m_serv3.png') no-repeat 0 0;}
ul.service_list li:nth-child(4) {background: url('../images/m_serv4.png') no-repeat 0 0;}
ul.service_list li:nth-child(5) {background: url('../images/m_serv5.png') no-repeat 0 0;}
ul.service_list li:nth-child(6) {background: url('../images/m_serv6.png') no-repeat 0 0;}
ul.service_list li:nth-child(7) {background: url('../images/m_serv7.png') no-repeat 0 0;}
ul.service_list li:nth-child(1):hover {background: url('../images/m_serv1_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(2):hover {background: url('../images/m_serv2_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(3):hover {background: url('../images/m_serv3_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(4):hover {background: url('../images/m_serv4_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(5):hover {background: url('../images/m_serv5_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(6):hover {background: url('../images/m_serv6_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(7):hover {background: url('../images/m_serv7_on.png') no-repeat 0 0;}
ul.service_list li:nth-child(6):after {content: ''; display: block; width: 35px; height: 35px; position: absolute; top:-60px; left:-40%; background: url('../images/m_serv_bg.png') no-repeat 0 0;}
ul.service_list li:nth-child(7):after {content: ''; display: block; width: 35px; height: 35px; position: absolute; top:-60px; left:-40%; background: url('../images/m_serv_bg.png') no-repeat 0 0;}
ul.service_list li:nth-child(8):after {content: ''; display: block; width: 35px; height: 35px; position: absolute; top:-60px; left:-40%; background: url('../images/m_serv_bg.png') no-repeat 0 0;}
ul.service_list li:nth-child(8) {padding-top:3rem; text-align: right;}
.main_content_wrap .service .more_btn {background: url('../images/m_serv_more.png') no-repeat 0 bottom; display: block; text-align: right; width: 170px; padding-bottom: 35px; font-family: 'Lato', sans-serif; font-size: 1.2rem; color: #999;}
ul.service_list li:nth-child(n+5):nth-child(-n+8) {margin-bottom: 0;} 

/*메인프로젝트*/
.main_content_wrap .project {padding:0 3rem;}
.main_content_wrap .project .thumbnail {padding-top: 132%;}
.main_content_wrap .project .inner .hover_box {background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; top:0; left:0; z-index: 99; padding:20% 15% 0 15%; opacity: 0; transition: all .2s ease-in-out;}
.main_content_wrap .project .inner:hover .hover_box {opacity: 1;}
.main_content_wrap .project .inner .hover_box strong {font-size:3rem; color: #ffffff;}
.main_content_wrap .project .inner .hover_box strong:after {content:''; display: block; width: 30px; border-bottom: 1px solid #fff; margin: 20px 0 30px;}
.main_content_wrap .project .inner .hover_box p {color: #fff; line-height: 1.8;}
.main_content_wrap .project .inner .hover_box .more_btn {margin-top: 60px; font-size: 1.2rem; color: #fff; border:1px solid #ddd; padding:10px 20px;  transition: all .2s ease-in-out;}
.main_content_wrap .project .inner .hover_box .more_btn:hover {background: #fff; color: #333;}
.main_content_wrap .project .owl-carousel .owl-dots { width: 100%; bottom:-50px; left: 0; top:inherit; text-align: center;}
.main_content_wrap .project .owl-carousel .owl-dots .owl-dot {float: none; display: inline-block; margin:0 5px;}
.main_content_wrap .project .owl-carousel .owl-dots .owl-dot span {width: 10px; height: 10px; border-radius:0; background: #ccc;}
.main_content_wrap .project .owl-carousel .owl-dots .owl-dot.active span {background: #333;}


/*메인뉴스*/
.main_content_wrap .news {position: relative;}
.main_content_wrap .news .thumbnail {padding-top: 67%;}
.main_content_wrap .news .txt_box {margin-top: 20px;}
.main_content_wrap .news .txt_box .date {}
.main_content_wrap .news .txt_box h4 {font-size: 1.6rem; color: #666; margin:10px 0 20px; font-weight: bold;}
.main_content_wrap .news .txt_box p {font-size: 1.3rem;}
.main_content_wrap .news .txt_box .more_btn {margin-top: 3rem; font-size: 1.2rem; color: #999; border:1px solid #ddd; padding:10px; transition: all .2s ease-in-out;}
.main_content_wrap .news .txt_box .more_btn:hover { background: #333; color: #fff; border-color:#333;}
.main_content_wrap .news > .more_btn {position: absolute; top:0; right: 0; font-size: 1.2rem; color: #999; border:1px solid #ddd; padding:10px 20px; }

/*헤더검색*/
.header_wrap .search_box {position: absolute; top:33px; right: 0;}
.header_wrap .search_box .filter_btn {margin-right:1rem; font-size: 1.3rem;}
.header_wrap .search_box .filter_btn:before {content: ''; display:inline-block; height: 9px; border-left: 1px solid #ddd; padding-right:15px;}
.header_wrap .search_box .filter_btn:first-child:before {display: none;}
.header_wrap .search_box select {background: #fff; color: #333; width: 100px; border:1px solid #ddd; height: 32px; vertical-align: middle;}
.header_wrap .search_box .search_area {background: #fff; color: #333; padding-right: 10px; width: 215px; border:1px solid #ddd;  vertical-align: middle; position: relative; border-radius: 20px;}
.header_wrap .search_box .search_area input {border:0; background:none; height: 32px; padding-left:15px; width: 77%; color: #333;}
.header_wrap .search_box .search_area .search_btn {width: 30px; height: 30px; background: url('../images/search_ico.png') no-repeat right 4px; vertical-align: middle; position: absolute; top:0; right: 10px; z-index:99;}
.header_wrap .search_box .search_relate {text-align: center; margin-top: 20px;}
.header_wrap .search_box .search_relate a {font-size:1.5rem; color: #666; padding:0 10px; }
.header_wrap .search_box input:-ms-input-placeholder { color: #666; }
.header_wrap .search_box input::-webkit-input-placeholder { color: #666; }
.header_wrap .search_box input::-moz-placeholder { color: #666; } 
.header_wrap .search_box input::-moz-placeholder { color: #666 } 



.footer_wrap {width: 100%; background:#333333; margin-top: 10rem;}
.footer_wrap .footer_link {width: 100%; background:#c2c2c2;}
.footer_wrap .footer_link .footer_link_inner {max-width: 1300px; margin:0 auto; text-align: right; 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 {max-width: 1300px; margin:0 auto; position: relative; padding: 7rem 0 12rem;}
.footer_wrap .footer .footer_inner .txt_box {position: absolute; top:7rem; left: 14rem; }
.footer_wrap .footer .footer_inner .txt_box span { color: #808284; font-size: 1.4rem; display: block; margin-bottom:0.2rem;}
.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 (max-width: 1300px) {
    html {font-size: 59%;}
    .header_wrap .header, .main_content_wrap .content, .footer_wrap .footer .footer_inner {margin-right: 20px; margin-left: 20px;}
    .header_wrap .header_link {margin-right: 20px;}
    .header_wrap .header {margin:0 0 0 0;}
}

@media all and (max-width: 1100px) {

}

@media all and (max-width: 980px) {
    .header_wrap .header .nav_box {display: none;}    
    .header_wrap .header_link {display: none;}
    .header_wrap .header h1 {position: absolute;margin:0 0 0 0;}
    .mobile_gnb {display: block;}
    .total_menu_box {display: none !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;}
}

@media all and (max-width: 768px) {
    html {font-size: 50%;}
    .header_wrap {margin-bottom: 30px;}
    .header_wrap .header {height: 50px;position: relative;}
    .header_wrap .header h1 {position: absolute;margin:0 0 0 -30px;}
    .header_wrap.nav_sticky {height: 80px;}

    .main_visual_wrap .inner {width: 100%; float: none; text-align: center;}
    .main_visual_wrap .inner strong {text-align: center;}
    .main_content_wrap .project {padding:0 1.5rem;}
    .main_content_wrap .content {margin-bottom: 70px;}
    .main_visual_wrap {margin-bottom: 7rem;}
    .main_content_wrap .service .more_btn {width: 110px; background-size: 110px;}

    .main_content_wrap .scroll_arrow {width: 50px; height: 50px; background-size: cover;}
    .main_visual_wrap .inner .more_btn {padding:1rem 3rem;}
}
@media all and (max-width: 640px) {
    ul.service_list {margin-top: 4rem;}
    ul.service_list li {margin-bottom: 5rem; width: 50%; min-height: 120px;}
    ul.service_list li:nth-child(n+5):nth-child(-n+8) {margin-bottom: 5rem;}
    ul.service_list li:nth-child(n+7):nth-child(-n+8) {margin-bottom: 0;}
    ul.service_list li:nth-child(6):after, ul.service_list li:nth-child(7):after, ul.service_list li:nth-child(8):after {display: none;}

    .footer_wrap .footer_link .footer_link_inner a.link_intro {display: none;}
    .footer_wrap .footer_link .footer_link_inner a {width: 24.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;}
    .footer_wrap .footer_link .footer_link_inner a.link_intro {display: none;}
    .footer_wrap .footer_link .footer_link_inner a {width: 24.99%; float: left; text-align: center; padding:0;}

}

@media all and (max-width: 500px) {
     .main_content_wrap {margin-top:1rem;}


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

}