@charset "utf-8";

/**
 * reset
 */
html, body {height:100%;}
body {font-family:'Noto Sans'; font-weight:200; font-size:16px; line-height:1.5; color:#000;}
a {color:inherit; display:block; width:auto; height:auto;}
h1, h2, h3, h4, h5, h6 {line-height:1.2;}
button[type=button], input[type=text], input[type=radio], input[type=checkbox], select, textarea {background-color:transparent; font-family:inherit; font-size:inherit; line-height:inherit; color:inherit;}


/**
 * helper class
 */
.text-right {text-align:right;}
.text-left {text-align:left;}
/**
 * layout
 */
#wrap {min-width:1280px; height:100%; margin:0 auto;}

/**
* header
*/
#header {position:fixed; z-index:10000; top:0; left:0; border-bottom: 2px solid #145fb3; width:100%; min-width:1280px; height:117px; background-color:#fff;}


#header .inner_header {max-width:1280px; margin:0 auto;}
/* logo */
#header .logo {float:left; padding-top:52px;}
/* gnb */
#header .gnb {position:absolute; left:50%; width:755px; margin-left:-426px;}
#header .gnb > li {float:left; padding-top:28px;  width:145px; height:89px; font-weight:400; }
#header .gnb > li > a {display:block; position:relative; height:89px; text-align:center;font-size:18px; line-height:89px; color:#000;}
#header .gnb > li:hover > .wrap_lnb {display:block;}
#header .gnb > li > a.changed:after {display:block; position:absolute; bottom:0; left:65px; width:18px; height:9px; content:'';  background:url(../images/common/bg_lnb_tri.gif) no-repeat; }
/* gnb 현재 페이지일 경우 클래스명 on 추가 */
#header .gnb > li.on > a {color:#145fb3;}

#header .dart {float:left; padding-left:817px; width:145px; height:89px; }
#header .dart > li {float:left; padding-top:28px;  width:145px; height:89px; font-weight:400; }
#header .dart > li > a {display:block; position:relative; height:89px; text-align:center;font-size:18px; line-height:89px; color:#000;}
#header .dart > li:hover > .wrap_lnb {display:block;}
#header .dart > li.on > a {color:#145fb3;}

/* 언어선택 */
/* 마우스오버 시 클래스명 active 추가 */
#header .util {float:right; padding-top:28px; width:192px; height:89px;}
#header .util .lang {float:left; padding:29px 0 0 14px;}
#header .util .lang .lang_list {overflow:hidden; position:relative; width:26px; height:26px; border:2px solid #145fb3; border-radius:18px; background-color:#fff; font-size:12px; font-weight:700; text-align:center; color:#145fb3;}
#header .util .lang .lang_list.active {height:94px;}
#header .util .lang .lang_list li {line-height:17px; padding:2px 0;}
#header .util .lang .lang_list li:first-child {padding:4px 0 2px;}
#header .util .ekmtc {float:left; width:119px; height:30px; padding:29px 0 0  15px;}


/* lnb */
/* 최대 1280px에서 중앙 정렬 */
/* lnb 배경 */
#header .bg_lnb {position:absolute; top:117px; display:block; height:0; width:100%; min-width:1280px; background:#145fb3;}

/* lnb 배경 내려옴 */
#header .bg_lnb.active {position:absolute; top:117px; display:block; height:60px; width:100%; min-width:1280px; background:#145fb3; z-index:-1;

    animation: LnbDown .3s;
    animation-fill-mode: both
}
@keyframes LnbDown {
    from {
       height:0;
        opacity:0
    }
    to {
        height:60px;
        opacity:1
    }

}
/* lnb 배경 유지됨 */
#header .bg_lnb.on {position:absolute; top:117px; display:block; height:60px; width:100%; min-width:1280px; background:#145fb3; z-index:-1;}
#header .wrap_lnb {float:left; width:100%; margin: 0 auto; text-align:center; transition:all 1s;}
#header .wrap_lnb ul {display:none; max-width:1280px; margin:0 auto;}
#header .wrap_lnb ul.active {display:block;}
#header .wrap_lnb ul.down  { display:block;}
#header .wrap_lnb.lnb {}
#header .wrap_lnb .lnb li {display:inline-block; padding:21px 20px; color:#9eccff;}
#header .wrap_lnb .lnb li:hover > a {color:#fff;}


/**
 * footer
 */
#footer {height:214px; background-color:#e7e7e7;}
#footer .inner_footer {max-width:1280px; margin:0 auto;}
#footer .inner_footer .area_txt {float:left; width:853px;}
#footer .inner_footer .area_link {float:right;}
/* 왼쪽 텍스트 */
#footer .wrap_shrotcut .list_shortcut {margin:45px 0 30px;}
#footer .wrap_shrotcut .list_shortcut li {float:left; display:inline-block; padding:0 10px; background:url(../images/common/bg_shortcut.gif) no-repeat left; font-size:14px; font-weight:400;  line-height:14px; color:#777;}
#footer .wrap_shrotcut .list_shortcut li:first-child {padding-left:0; background:none;}
#footer .wrap_address {clear:left; margin-bottom:26px;}
#footer .wrap_address .address {font-size:13px; line-height:23px; color:#aaa;}
#footer .copyright {font-size:14px; font-weight:400; line-height:14px; color:#aaa;}
/* 오른쪽 패밀리 사이트 링크 */
#footer .area_link {margin-top:46px;}
#footer .area_link .link {float:left; margin-right:10px; width:98px; height:37px; color:#777; background:#bfbfbf; font-size:13px; font-weight:400; line-height:37px; text-align:center; }
#footer .area_link .wrap_family {float:left; position:relative; background:#fff;}
#footer .area_link .wrap_family .family_site {border:2px solid #c4c4c4;  padding-left:14px; width:142px; height:33px; background:url(../images/common/bg_familysite.gif) no-repeat 135px center; background-color:transparent; font-size:13px; font-weight:400; line-height:33px; color:#c4c4c4; cursor:pointer;}
/* 패밀리사이트 클릭한 경우 클래스명 open 추가 */
#footer .area_link .wrap_family .list_family {display:none; position:absolute; bottom:35px; margin-top:-2px; border:2px solid #c4c4c4; border-bottom:none;  padding-left:14px; width:142px; background:#fff;font-size:13px; font-weight:400; line-height:33px; color:#c4c4c4; cursor:pointer;}
#footer .area_link .wrap_family .list_family.open {display:block;}


/**
* snb
*/
.page_common .box_intro .bg_snb {overflow:hidden; position:absolute; left:0; width:100%;}
.page_common .box_intro .wrap_snb {position:relative; left:0; bottom:0; height:54px; border-top:1px solid rgba(255, 255, 255, .4);  max-width:1920px; width:100%; min-width:1280px;}
.page_common .box_intro .snb {margin:0 auto;}
.page_common .box_intro .snb li {float:left; margin:0 61px; height:54px; color:#fff; }
.page_common .box_intro .snb li.on a {background:url(../images/common/bg_snb_on.png) no-repeat center bottom;}
.page_common .box_intro .snb li.on a:before {display:block; position:absolute; top:0; left:0; width:100%; height:100%; border-top:2px solid #fff; content:'';}
.page_common .box_intro .snb li a {position:relative; padding:15px 0; height:auto;}
.page_common .box_intro .snb:after {display:block; clear:both; height:0; content:'';}
/* snb 메뉴 개수에 따라 type5와 type2 */
/* snb 메뉴가 2개인 경우 type2 클래스명 추가, 해운정보 > snb는 클래스명 .type_eng 추가 */
.page_common .box_intro .snb.type5 {width:1020px;}
.page_common .box_intro .snb.type2 {width:518px;}
.page_common .box_intro .snb.type2 li {margin:0 24px; padding:0 48px;}
.page_common .box_intro .snb.type3 {width:665px;}
.page_common .box_intro .snb.type3 li {margin:0 70px;}
.page_common .box_intro .snb.type9 {width:1344px;}
.page_common .box_intro .snb.type9 li {margin:0 30px;}
.page_common .box_intro .snb.type_eng {width:623px; }
.page_common .box_intro .snb.type_eng li {margin:0 24px; padding:0 48px;}
/* 메뉴 추가될 수 있는 서비스항로 snb */
.page_common .box_intro .wrap_snb_route {border-top:1px solid rgba(255, 255, 255, .4);}
.page_common .box_intro .snb_route { display:table; margin:0; padding:0; table-layout:fixed; width:100%;text-align:center;}  
.page_common .box_intro .snb_route:before {display:table-cell;content: '';}
.page_common .box_intro .snb_route:after {display:table-cell;content: '';}
.page_common .box_intro .snb_route li {display:table-cell; height:55px; color:#fff; }
.page_common .box_intro .snb_route li a {display:inline-block; padding:15px 0;}
.page_common .box_intro .snb_route li.on a {background:url(../images/common/bg_snb_on.png) no-repeat center bottom;}
.page_common .box_intro .snb_route li.on .bar {padding-top:13px; border-top:2px solid #fff; content:'';}
.page_common .box_intro .snb_route li a {position:relative; width:100%;}


/**
* 서브 
*/
/* 서브페이지 공통 */
/* #header 고정으로 padding-top:117px 고정 */
.page_common {padding-top:117px; margin:0 auto; max-width:1920px; min-width:1280px;}
.page_common .box_intro {position:relative; height:206px; text-align:center;}
.page_common .box_intro .txt_location {font-size:34px; font-weight:500; color:#fff; line-height:151px; letter-spacing:30px;}
/* [P] snb가 없는 회사소개 > txt_location에는 클래스명 .lh305 추가 */
.page_common .box_intro .txt_location.lh305 {line-height:206px;}

.content {margin:0 auto; padding:100px 0; max-width:1280px;}


/* *
* 각 서브 페이지의 snb 배경
*/
/* 회사소개*/
.page_introduction {background:url(../images/common/bg_introduction.jpg) no-repeat 50% 117px;}
/* 서비스항로 */
.page_route {background:url(../images/common/bg_route.jpg) no-repeat 50% 117px;}

/* 채용정보*/
.page_recruit {background:url(../images/common/bg_recruit.jpg) no-repeat 50% 117px;}

/* 해운정보 */
.page_infomation {background:url(../images/common/bg_infomation.jpg) no-repeat 50% 117px;}
/* 네트워크 */
.page_network {background:url(../images/common/bg_network.jpg) no-repeat 50% 117px;}



/**
* 개인정보취급방침, 이메일 부단수집거부
*/
.page_policy {padding:15px; margin:0 auto; min-width:300px!important;}
.page_policy .sub_title {padding-top:20px; font-size:18px;}
.page_policy .title {text-decoration:underline; font-size:28px; color:#145fb3;}
.page_policy .inner {padding:30px 15px; font-size:14px; color:#333; font-weight:300; line-height:1.4;}
.page_policy .inner .indent {padding-left:14px; width:20px; display:inline-block;}
.page_policy .inner .wrap_indent {padding-left:12px;}
.page_policy .inner .wrap_indent .m-10 {margin-left:-14px; padding-right:4px;}
.page_policy .inner h2 {padding:18px 0 14px; font-size:16px;}
.page_policy .inner .m-6 {margin-left:-6px;}
.page_policy .inner .p-16 {padding-left:16px;}
.page_policy .inner .last {margin-top:40px;}

/* 에러페이지 */
.content_error {padding:50px 0 100px; text-align:center;}
.content_error .logo {width:50%; margin:100px auto;}
.content_error .title {padding:0 60px; font-size:28px; color:#145fb3; font-weight:700;}
.content_error .desc {padding:18px 4% 100px; font-size:20px; color:#333; line-height:1.8;}