@charset "utf-8";
/* Vaimedia Joyhan 2015-02-02 */

/* Webfont */
@font-face{font-family:'NGR';src:url(../fonts/NanumGothic.eot);src:local(※),url(../fonts/NanumGothic.woff) format('woff')}
@font-face{font-family:'NGB';src:url(../fonts/NanumGothicBold.eot);src:local(※),url(../fonts/NanumGothicBold.woff) format('woff')}

/* Reset */
body,div,p,h1,h2,h3,h4,h5,h6,ol,li,dl,dt,dd,ul,pre,code,blockquote,form,fieldset,legend,input,textarea,button,select,table,th,td{margin:0;padding:0}
ul,ol,li,dl,menu{list-style:none}
img{border:0 none;vertical-align:top}
form,fieldset{border:0 none}
label,input,select,textarea,button{/*border-radius:0;*/font-size:1em;vertical-align:middle;/*-webkit-appearance:none*/}
button{border:0 none;background-color:transparent;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}/* Fire Fox button style bug */
a, a:link, a:visited {
    color: #54575a; text-decoration: none;
}
a:hover, a:focus, a:active {
    color: #c66; text-decoration:underline;
}
table{width:100%;border-collapse:collapse;border-spacing:0;table-layout:fixed}
p{word-break:break-all}
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:''}
header,footer,section,article,aside,nav,details,menu,figure,figcaption{display:block;margin:0;padding:0}/* html5 tags */

legend,.blind {
    position: absolute; left: -9999em;
    height: 0;
    margin: 0; padding: 0;
    background: none;
    font-size: 0; line-height: 0;
    overflow: hidden;
}

.ir {
    display: block;
    float: left;
    margin: 0; padding: 0;
    border: none;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
}


body, input, select {
    color: #54575a;
    font: 13px/1.6 '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif;
}

.eng, .eng a{
    font-weight:500; font-family: Ubuntu, '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif;
}

.eng-n, .eng-n a{
    font-weight:400; font-family: Ubuntu, '맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif;
    letter-spacing: 0;
}

.kor, .kor a{
    font-family:'맑은 고딕', 'Malgun Gothic', '돋움', dotum, sans-serif;
}

::-moz-selection {
    background-color: #c88;
    color: #fff;
}

::selection {
    background-color: #c88;
    color: #fff;
}

/*
a:focus {
    outline: #ff9 dotted 3px;
}

#main-contents a:focus,
#sub-contents a:focus {
    outline: #c66 dotted 3px;
}
*/

/* ----------------------------------------------- */
/*                      #header                    */
/* ----------------------------------------------- */

#header {
    position: fixed; top: 0; left: 0; bottom: 0;
    min-height: 820px; max-height: 1300px;
    overflow: hidden;
    z-index: 500;
}

#header > h1 {
    position: relative;
    width: 160px; height: 140px;
}

#header > h1 > a{
    position: absolute; top: 50%; left: 50%;
    width: 76px; height: 60px;
    margin: -30px 0 0 -38px;
    background: url(../../images/common/icon_common.png) no-repeat 0 0;
}

#tnb {
    position: relative;
    width: 160px; height: 33px;
    border-top: 1px solid #2b3645;
    text-decoration: none;
}

#tnb > ul > li {
    float: left;
}

#tnb > ul > li > a {
    display: block;
    width: 80px; height: 33px;
    color: #84909a; font-size: 12px; line-height: 33px;
    text-align: center;
}

#tnb > ul > li:first-child > a {
    width: 79px;
    border-right: 1px solid #2b3645;

}

#tnb > ul > li > a:hover {
    color: #fff;
}

/* ----------------------------------------------- */
/*                       #gnb                      */
/* ----------------------------------------------- */

#gnb {
    position: relative;
}

#gnb li {
    font-size: 0; line-height: 0;
}

#gnb a {
    display: block;
    color: #fff;
    text-decoration: none;
}

#gnb > ul > li {
    width: 160px; height: 79px;
    border-bottom: 1px solid #2b3645;
}

#gnb > ul > li.active {
    position: relative;
}

#gnb > ul > li.hide.active {
    position: static;
}

#gnb > ul > li:first-child {
    border-top: 1px solid #2b3645;
}

#gnb > ul > li > a {
    width: 160px; height: 59px;
    padding: 10px 0;
    font-size: 18px; line-height: 36px;
    text-align: center;

}

#gnb > ul > li > a:hover,
#gnb > ul > li > a:focus,
#gnb > ul > li > a:active,
#gnb > ul > li.current > a,
#gnb > ul > li.active > a {
    background: url(../../images/common/gnb_1dep_sub.png) no-repeat 50% 50%;
}

#gnb > ul > li.active .depth2 {
    left: 160px;
}

#gnb > ul > li > a > span {
    display: block;
    color: #586d7e; font-size: 10px; line-height: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#gnb ul ul li {
    font-size: 14px; line-height: 20px;
}

#gnb .depth2 {
    /* position: absolute; top: -34px; left: 280px; */
    position: absolute; top: -1px; left: -9999px; bottom:0;
    width: 120px;
    background: url(../../images/common/gnb_2dep_sub_bg.png) repeat-y 100% 0;
}

#gnb .current .depth2 {
    left: 160px;
}

#gnb h3,
#gnb .hide.active h3 {
    margin-top: -33px;
    height: 35px;
    background: url(../../images/common/gnb_2dep_sub.png) no-repeat 100% 0;
    color:#c14546; font-size: 12px; line-height: 35px;
    letter-spacing: 3px;
    text-align: center; text-transform: uppercase; text-indent: 0;
    overflow: visible;
}

#gnb .active h3 {
    height: 1px;
    margin-top: 0;
    text-indent: -9999px;
    overflow: hidden;
}

#gnb .depth2 a {
    height: 40px;
    padding-left: 20px;
    background: url(../../images/common/gnb_2dep_sub.png) no-repeat 100% -35px;
    font-size: 13px; line-height: 38px;
    letter-spacing: -.5px;
}

#gnb .depth2 a:hover,
#gnb .depth2 a:focus {
    background-position: 100% -115px;
    color: #fffac8;
}

#gnb .depth2 .current a,
#gnb .depth2 .hide a {
    background: url(../../images/common/gnb_2dep_sub.png) no-repeat 100% -75px;
    color: #fffac8; font-weight: bold;
}

/* ----------------------------------------------- */
/*                       #fnb                      */
/* ----------------------------------------------- */

#fnb {
    position: absolute; left: 38px; bottom: 60px;
}

#fnb li {
    margin-top: 5px;
}

#fnb a {
    display: block;
    position: relative;
    width: 77px; height: 77px;
    border:1px solid #333e4d;
    color: #84909a;
    font-size: 12px; font-weight: bold; line-height: 14px;
    text-align: center; text-decoration: none;
}

#fnb a:hover,
#fnb a:focus,
#fnb a:active {
    color: #aebdcb;
    border-color: #5d6b7f;
}

#fnb a span {
    display: block;
    width: 32px; height: 32px;
    margin: 14px auto 6px;
    background: url(../../images/common/icon_common.png) no-repeat 50% -70px;
}

#f-sitemap a span {
    background-position: 50% -70px;
}

#f-sitemap a:hover span,
#f-sitemap a:focus span,
#f-sitemap a:active span {
    background-position: 50% -110px;
}

#f-location a span {
    background-position: 50% -150px;
}

#f-location a:hover span,
#f-location a:focus span,
#f-location a:active span {
    background-position: 50% -190px;
}

#f-privacy a span {
    margin-bottom: -9px;
    background-position: 50% -480px;
}

#f-privacy a:hover span,
#f-privacy a:focus span,
#f-privacy a:active span {
    background-position: 50% -520px;
}

/* ----------------------------------------------- */
/*                  #side-business                 */
/* ----------------------------------------------- */

#side-business .sb-box {
    position: relative;
    color: #fff;
    text-align: center;
}

#side-business .sb-box a,
#side-business .sb-box img,
#side-business .sb-box .sb-plaid {
    display: block;
    position: absolute; top:0; left:0; right:0; bottom:0;
    cursor: pointer;
}

#side-business .sb-box a {
    color: #fff;
    text-decoration: none;
}

#side-business .sb-box a:hover img + img {
    display: none;
}

#side-business .sb-box img {
    width: 100%; height: 100%;
}

#side-business .sb-box .sb-plaid {
    background: url(../../images/common/sb_plaid.png);
}

.sb-box .sb-icon {
    position: absolute; top: 18%; left: 50%;
    width: 44px; height: 44px;
    margin-left: -22px;
    background: url(../../images/common/icon_common.png) no-repeat;
}

.sb-box h3 {
    position: absolute; top: 46%; left: 0;
    width: 100%;
    font-size: 20px; font-weight: normal;
}

.sb-box p {
    position: absolute; top: 64%; left: 0;
    width: 100%;
    font-size: 12px;
    letter-spacing: -.5px;
}

#sb-ship {
    background: #162a50;
}

#sb-ship .sb-icon {
    background-position: 50% -230px;
}

#sb-charter {
    background: #5a4d45;
}

#sb-charter .sb-icon {
    background-position: 50% -280px;
}

#sb-safety {
    background: #267394;
}

#sb-safety .sb-icon {
    background-position: 50% -330px;
}

#sb-ferry {
    background: #0d4e70;
}

#sb-ferry .sb-icon {
    background-position: 50% -380px;
}

#sb-customer {
    background: #173340;
}

#sb-customer .sb-icon {
    background-position: 50% -430px;
}