@charset "utf-8";
/* *********************************************
Project ===== Hyundai Motor Group
FileName === layout.css
Author ===== the fifty one
Date ======= 2014-04-01
Last ======= 2014-04-01
********************************************* */


/* --------------------------------------------
 * accessibility
/* ------------------------------------------ */
div#accessibility {position:absolute;width:100%;margin:0 auto;z-index:9999;}
div#accessibility a {text-indent:0;background:#000;position:absolute;z-index:1;top:-500px;width:100%;padding:5px 0px;text-align:center;}
div#accessibility a:active {top:0;font-size:11px;font-weight:bold;color:#fff;}
div#accessibility a:focus {top:0;font-size:11px;font-weight:bold;color:#fff;}


/* --------------------------------------------
 * layout
/* ------------------------------------------ */
div#wrapper {min-width:1080px;}
div#wrapper header#header {position:fixed; top:0; left:0; z-index:100; width:100%; height:140px; -webkit-transition:all .1s linear; transition:all .1s linear; background:#fff; text-align:center;}/* 20180819 */
div#wrapper header#header .header-area,
div#wrapper header#header .box-gnb {-webkit-transition: .2s linear; transition: .2s linear;}/* 20180819 */
div#wrapper header#header.scl .header-area {-webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0);}/* 20180819 */
div#wrapper header#header.scl .box-gnb {-webkit-transform: translate3d(0,-15px,0); transform: translate3d(0,-15px,0);}/* 20180819 */
div#wrapper header#header.scl {height: 110px; background-color:rgba(255,255,255,39);}/* 20180819 */
div#wrapper div#container {display:inline-block; width:100%; margin-top:140px;}/* 20180819 */
div#wrapper div#container section#contents header.title {-webkit-box-sizing:border-box; box-sizing:border-box; width:984px; margin:0 auto;position:relative;padding:60px 0 0;color:#333;z-index:1} /* 20180913 *//* 2018 신기술추가 : 20181030 */
div#wrapper div#container section#contents[class*="visual-"] header.title{height: 350px;} /* 2018 신기술추가 : 20181030 */
div#wrapper div#container section#contents.visual-careers1 header.title{height: auto;} /* 2018 신기술추가 : 20181101 */
/* 20180913 */
/* 20180913-1 삭제
div#wrapper div#container section#contents.visual-autonomous header.title,
div#wrapper div#container section#contents.visual-connectivity header.title,
div#wrapper div#container section#contents.visual-electrification header.title,
div#wrapper div#container section#contents.visual-advancedmaterials  header.title,
div#wrapper div#container section#contents.visual-smarthome  header.title,
div#wrapper div#container section#contents.visual-energy  header.title,
div#wrapper div#container section#contents.visual-etc  header.title,
div#wrapper div#container section#contents.visual-strategic  header.title,
div#wrapper div#container section#contents.visual-ai  header.title,
div#wrapper div#container section#contents.visual-mobility  header.title,
div#wrapper div#container section#contents.visual-automotive  header.title {height: 320px;}
*/
/* //20180913 */

div#wrapper div#container section#contents header.title h1 {font-family:HDHarmonyM;font-size:36px;font-weight:normal;min-height:48px;letter-spacing:-1px;line-height:44px;}
div#wrapper div#container section#contents article.article-default {width:984px;margin:0 auto;min-height:200px;overflow:hidden; word-break: keep-all;}
div#wrapper div#container section#contents article.article-default.mt145 {margin-top: 0 !important;} /* 20180913 */
/*div#wrapper div#container section#contents article.article-default.mt128 {margin-top: -65px !important;} */ /* 2018 신기술추가 : 20181030 */ /* 20181101 */
div#wrapper div#container section#contents div.article-group {width:984px;margin:0 auto;}
div#wrapper div#container section#contents div.article-group article.article-view {float:left;width:652px;min-height:200px;background:#fff;}
div#wrapper div#container section#contents div.article-group article.article-view.blog {float:none;width:100%;min-height:200px;background:#fff;margin-top:15px;} /* 190212 추가 */
div#wrapper div#container section#contents div.article-group aside.aside-view {float:right;width:320px;min-height:200px;} /* 190305 추가 */
div#wrapper div#container section#contents div.article-group2 {width:984px;margin:0 auto;}
div#wrapper div#container section#contents div.article-group2 article.article-view {float:left;width:735px;min-height:200px;background:#fff;}
div#wrapper div#container section#contents div.article-group2 aside.aside-view {float:right;width:237px;min-height:200px;}
div#wrapper div#container section#contents div.sns-area {width:984px;margin:0 auto;}
div#wrapper div#container section#contents div.sns-area h2 {font-size:0px;font-weight:normal;height:0px;}

div#wrapper div#container section#contents div.comm-contents {background:#ddd url(/images/en-web/comm/bg/bg-ontents.gif) repeat-x;padding:50px 0 60px}
div#wrapper div#container section#contents div.comm-contents h1 {font-family:HDHarmonyM;font-size:25px;font-weight:normal;color:#333;height:50px;}
div#wrapper footer#footer {height:156px;text-align:center;background:#333;}



/* --------------------------------------------
 * location
/* ------------------------------------------ */
p.location {width:984px;margin:0 auto;font-size:14px;padding:100px 0 13px;clear:both;}
p.location a,
p.location span,
p.location strong {display:inline-block;vertical-align:middle;color:#666;}
p.location a.home {background:url(/images/en-web/comm/ico/ico-home.png) no-repeat center top;text-indent:0;font-size:0;line-height:0;height:13px;width:15px;} /* 190225 수정 */
p.location span {background:url(/images/en-web/comm/bu/bu-arrow1-rgt1.png) no-repeat center 2px;display:inline-block;margin-right:-2px;width:20px;height:12px;text-indent:-99999px;} /* 190225 수정 */
p.location span.nolink {background:none;margin-right:0;width:auto;height:auto;text-indent:0;}
p.location strong {color:#333;font-family:'HDHarmonyM';font-weight:normal;}



/* --------------------------------------------
 *  header
/* ------------------------------------------ */
/* 20180819 */
.header-area {width:100%; position:relative; z-index:100; clear:both;}
.header-area .box-top {position:relative;z-index:100;clear:both;height:96px;margin:0 auto;background-color:#fff;}/* 190828 modify */
.header-area .logo {position:absolute; top:29px; left:50%; width:120px; margin-left:-60px;}
.header-area .logo a {display:block;}

#header:before {display:none; position:fixed; top:0; left:0; z-index: -1; width:100%; height:100%; background-color:rgba(0,0,0,.3); content:'';}
#header:before {-webkit-animation:viewCon1 .2s linear; animation:viewCon1 .2s linear;}
@-webkit-keyframes viewCon1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes viewCon1 {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
#header.on:before {display: block;}
.search-wrap {display: none;}
.box-top .util-area {position:relative;top:40px;width:984px;margin:0 auto;}/* 190828 modify */
.box-top .util-area a.logo_Journal {position:absolute;top:-4px;left:0;} /* 190828 add *//* 191010 modify */
.box-top .util-search {display:inline-block;position:absolute;right:106px;width:17px; height:17px; vertical-align:middle;}/* 190828 modify */
.box-top .util-search a {display:block; overflow:hidden; width:17px; height:0; padding-top:17px; background:url(/images/en-web/comm/btn/btn-search-1.png) no-repeat 0 0; text-indent:-9999em;}
.box-top .language {display:inline-block;position:absolute;right:3px;margin-left:30px; padding-left:29px; padding-right: 15px; border-left:1px solid #d0d0d0; vertical-align:middle;}/* 190828 modify */
.box-top .language a {display:block; position:relative; font-family:'HDHarmonyM'; font-size:14px; line-height:17px; color:#666;}
.box-top .language a:hover {color: #002c5f;}
.box-top .language a:before {display:none; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #002c5f; content: '';}
.box-top .language a:hover:before {display: block;}
.box-top .language a:after {display:block; position:absolute; top:3px; right:-15px; width:5px; height:9px; background:url(/images/en-web/comm/bu/bu-arrow7.gif) no-repeat; vertical-align:middle; content:'';}

.box-gnb {position:relative; z-index: 100;}
.box-gnb:before {display:block; position: absolute; top:0; left:0; z-index: -1; width:100%; height:44px; background-color:#002c5f; content:'';}
.box-gnb .list-gnb {width:984px; margin:0 auto;}
.box-gnb .list-gnb:after {display:block; clear:both; visibility:hidden; height:0; content:'';}
.box-gnb .list-gnb > li {float:left; margin-left:57px;}
.box-gnb .list-gnb > li:first-child {margin-left:0;}
.box-gnb .list-gnb > li > a {display:block; overflow: hidden; position: relative; padding:0 16px; font-family:'HDHarmonyL'; font-size:14px; line-height:44px; color:#fff; letter-spacing: -0.025em;}
.box-gnb .list-gnb > li > a:after {display:block; position: absolute; bottom: -5px; left: 0; width: 100%; height: 5px; background-color: #fff; content: '';}
.box-gnb .list-gnb > li > a:after {-webkit-transition:all .1s ease-in; transition:all .1s ease-in;}
.box-gnb .list-gnb > li.on > a:after,
.box-gnb .list-gnb > li > a:hover:after {bottom:0;}
.box-gnb .list-gnb > li.li-6 .list-2dpt.type-1 > li {width:313px} /* 20181101 */
.box-gnb .list-gnb > li.li-7 .list-2dpt.type-1 > li {width:190px;} /* 20181101 *//* 190828 modify */
.box-gnb .list-gnb .box-snb {display: none; overflow: hidden; position:absolute; top:44px; left:0; width:100%; background-color: #fff; text-align:left; letter-spacing:-0.05em;}
.box-gnb .list-gnb li.on .box-snb {z-index: 1; box-shadow:0 2px 2px rgba(0,0,0,.1);}
.box-gnb .list-2dpt.type-1,
.box-gnb .list-2dpt.type-2 {position: relative; -webkit-box-sizing:border-box; box-sizing:border-box; width:984px; min-height: 355px; margin:0 auto 50px; padding-top:8px; padding-right: 237px;}
.box-gnb .list-2dpt.type-2 {padding-right: 0;}
.box-gnb .list-2dpt.type-1:after,
.box-gnb .list-2dpt.type-2:after {display:block; clear:both; visibility:hidden; height:0; content:'';}
.box-gnb .list-2dpt.type-special {position:absolute; top:0; left:50%; -webkit-box-sizing:border-box; box-sizing:border-box; width:237px; height:100%; margin-left:255px; padding:35px 30px 0; background-color:#aacae6; background-repeat: no-repeat; background-position: -84px bottom;}
.box-gnb .list-2dpt.type-special:before {display: block; opacity: 0; position:absolute; bottom:0; left:-84px; width:350px; height:100%; background-repeat: no-repeat; background-position: 0 bottom; content: '';}
.box-gnb li.on .list-2dpt.type-special:before {opacity: 1;}
.box-gnb .li-1 .list-2dpt.type-special:before {background-image: url(/images/en-web/comm/header/bg-gnb-1.png);}
.box-gnb .li-4 .list-2dpt.type-special:before {background-image: url(/images/en-web/comm/header/bg-gnb-4.png);}
.box-gnb .li-5 .list-2dpt.type-special:before {background-image: url(/images/en-web/comm/header/bg-gnb-5.png);}
.box-gnb .li-6 .list-2dpt.type-special:before {background-image: url(/images/en-web/comm/header/bg-gnb-6.png);}
.box-gnb .li-7 .list-2dpt.type-special:before {background-image: url(/images/en-web/comm/header/bg-gnb-7.png);}
/* 20181101 */
.box-gnb .list-2dpt.type-special .tit {position: relative; z-inde:1 ; font-size:18px; line-height:26px; font-family:HDHarmonyM; color:#002c5f;} 
.box-gnb .list-2dpt.type-special .link {position: relative; z-inde:1 ; margin-top: 20px;}
.box-gnb .list-2dpt.type-special .link a {display:inline-block; font-size:15px; line-height:20px; font-family:HDHarmonyM; color:#002c5f; text-decoration:underline} 
.box-gnb .list-2dpt.type-special .link a:after {display:inline-block; margin-left:5px; content:'>';} 
.box-gnb .list-2dpt.type-special .link_banner {position:relative;z-index:1;margin-top:2px;font-size:15px;font-family:HDharmonyM;line-height:20px;color:#002c5f;} /* 190828 add *//* 191010 modify */
.box-gnb .list-2dpt.type-special .link_banner a {display:block;line-height:0;margin-bottom:7px;}/* 190828 add *//* 191010 modify */
/* //20181101 */
.box-gnb .list-2dpt.type-1 > li,
.box-gnb .list-2dpt.type-2 > li {float:left; width:190px; margin-left:60px; margin-top: 30px;}
.box-gnb .list-2dpt.type-2 > li {width:200px;}
.box-gnb .li-2 .list-2dpt.type-2 > li {width:114px;}
.box-gnb .list-2dpt.type-1 > li:first-child,
.box-gnb .list-2dpt.type-1 > li:nth-child(3n + 1),
.box-gnb .list-2dpt.type-2 > li:first-child,
.box-gnb li:not(.li-2) .list-2dpt.type-2 > li:nth-child(4n + 1) {clear: both; margin-left:0;}
.box-gnb .list-2dpt.type-1 > li > a,
.box-gnb .list-2dpt.type-2 > li > a {display:block; font-family:'HDharmonyM'; border-bottom:1px solid #e4e4e4; font-size:17px; line-height:38px; color:#333; white-space:nowrap; letter-spacing:-1px} /* 20181101 */
.box-gnb .list-2dpt.type-1 > li > a.on, .box-gnb .list-2dpt.type-1 > li > a:hover {color:#00287a} /* 20181101 */
.box-gnb .list-2dpt.type-1 > li > a:after,
.box-gnb .list-2dpt.type-2 > li > a:after {display:inline-block; position:relative; top:-2px; width:4px; height:7px; margin-left:10px; background:url(/images/en-web/comm/bu/bu-arrow7.gif) no-repeat 50% 50%; vertical-align:middle; content:'';}
.box-gnb .list-3dpt {margin-top:2px;}
.box-gnb .list-3dpt a {display:inline-block; position:relative; margin-top:10px; font-size:14px; line-height:16px; color:#757575;}
.box-gnb .list-3dpt a:after {display:none; position:absolute; bottom:0; left:0; width:100%; height:1px; background-color:#002c5f; content:'';}
.box-gnb .list-3dpt li.on a,
.box-gnb .list-3dpt li a:hover {font-family:'HDharmonyM'; color:#002c5f;}
.box-gnb .list-3dpt li.on a:after,
.box-gnb .list-3dpt li a:hover:after {display:block;}

/* //20180819 */

/* 190529 수정 및 추가 */
div.search-wrap {position:absolute;top:96px;left:0;width:100%;height:44px;background:#002c5f;z-index:100;display:none;}
div.search-wrap div.bodal-bg {background:#000;opacity:0.75;filter:alpha(opacity=75);height:100%;width:100%;position:fixed;top:0;left:0;z-index:1;}
div.search-area {background:#002c5f;max-width:1600px;min-width:984px;height:100%;margin:0 auto;position:relative;z-index:2;}
div.search-area div.inner-search {position:relative;width:954px;margin:0 auto;padding:13px 15px 0;text-align:left;}
div.search-area div.inner-search a.search-close {position:absolute;top:14px;right:0;padding-left:36px;background:url('/images/en-web/comm/btn/btn-search-close.png') no-repeat 13px 0;font-size:16px;font-family:HDHarmonyL;line-height:normal;color:#fff;text-indent:inherit;}
div.search-area div.inner-search a.search-close:before {display:block;position:absolute;top:3px;left:0;width:1px;height:11px;background-color:#ddd;content:'';}
div.search-area div.inner-search input.search {position:relative;width:850px;height:100%;margin:0 10px 0 0;padding:0 15px;border:none;border-left:1px solid #fff;background:#002c5f;font-size:16px;font-family:HDharmonyL;color:#fff;box-sizing:border-box;}
div.search-area div.inner-search input.search::-webkit-input-placeholder {color:#fff;}
div.search-area div.inner-search input.search::-moz-placeholder {color:#fff;}
div.search-area div.inner-search input.search::-ms-clear {display:none;}
div.search-area div.inner-search input.search::-ms-reveal {display:none;}
/* //190529 수정 및 추가 */

/* --------------------------------------------
 * section#contents header
/* ------------------------------------------ */
header.title p.desc {min-height:60px;font-size:14px;line-height:20px;letter-spacing:-1px;}
header.title .selection {position:absolute;right:0;top:55px;}



/* --------------------------------------------
 * footer
/* ------------------------------------------ */
div.footer {position:relative;padding-top:30px;width:984px;margin:0 auto;text-align:left !important;}
div.footer ul.comm-menu {display:inline-block;width:100%;}
div.footer ul.comm-menu li {float:left;padding-left:8px;margin-left:8px;background:url(/images/en-web/comm/bg/bg-line3.gif) no-repeat left 3px;}
div.footer ul.comm-menu li a{color:#ddd;font-size:13px;}
div.footer ul.comm-menu li:first-child {padding-left:0;background:none;margin-left:0;}
div.footer ul.comm-menu li a:hover {color:#fff;text-decoration:underline;}
div.footer ul.comm-menu .language a, div.footer ul.comm-menu .language a:hover, div.footer ul.comm-menu .language a:focus {color:#aaa;} /* 190828 add */
div.footer ul.comm-menu .language a.on, div.footer ul.comm-menu .language a.on:hover, div.footer ul.comm-menu .language a.on:focus {font-weight:bold;color:#ddd;} /* 190828 add */

/* -----------------170217 ?섏젙 : sns ?곸뿭 ?꾩껜 ?섏젙 */
div.footer ul.sns-area {display:inline-block;width:100%;margin-top:30px;}
div.footer ul.sns-area li {float:left;margin-left:9px;}
div.footer ul.sns-area li a {color:#ddd;display:inline-block;width:23px;height:22px;background:url(/images/en-web/comm/ico/ico-sns-ft.png) no-repeat -2px -2px;font-size:0;line-height:0;}
div.footer ul.sns-area li a.ft-hmgjournal {background-position:-28px -2px;}
div.footer ul.sns-area li a.ft-twiter {background-position:-52px -2px;}
div.footer ul.sns-area li a.ft-instagram {background-position:-77px -2px;}
div.footer ul.sns-area li a.ft-brunch {background-position:-103px -2px;} /* 171107 ?섏젙 */
div.footer ul.sns-area li a.ft-youtube {background-position:-129px -2px;}
div.footer ul.sns-area li a.ft-naverblog {background-position:-155px -2px;}
div.footer ul.sns-area li a.ft-naverpost {background-position:-181px -2px;}
div.footer ul.sns-area li a.ft-navertvcast {background-position:-207px -2px;}
div.footer ul.sns-area li a.ft-tvkakao {background-position:-233px -2px;}
div.footer ul.sns-area li a.ft-linkedIn {background-position:-259px -2px;}/* 190906 add */
div.footer ul.sns-area li:first-child {margin-left:0;}

div.footer ul.sns-area li:hover a {background-position:-2px -26px;}
div.footer ul.sns-area li:hover a.ft-hmgjournal {background-position:-28px -26px;}
div.footer ul.sns-area li:hover a.ft-twiter {background-position:-52px -26px;}
div.footer ul.sns-area li:hover a.ft-instagram {background-position:-77px -26px;}
div.footer ul.sns-area li:hover a.ft-brunch {background-position:-103px -26px;}  /* 171107 ?섏젙 */
div.footer ul.sns-area li:hover a.ft-youtube {background-position:-129px -26px;}
div.footer ul.sns-area li:hover a.ft-naverblog {background-position:-155px -26px;}
div.footer ul.sns-area li:hover a.ft-naverpost {background-position:-181px -26px;}
div.footer ul.sns-area li:hover a.ft-navertvcast {background-position:-207px -26px;}
div.footer ul.sns-area li:hover a.ft-tvkakao {background-position:-233px -26px;}
div.footer ul.sns-area li:hover a.ft-linkedIn {background-position:-259px -26px;}/* 190906 add */

div.footer ul.sns-area li a, div.footer ul.sns-area li img, div.footer ul.sns-area li em {vertical-align:middle; }
div.footer ul.sns-area li em {font-size:14px;line-height:16px;font-family:HDharmonyM;background:none;color:#ddd;padding:0 10px;vertical-align:-4px;}
div.footer ul.sns-area li:hover em {color:#fff;}
/* -----------------//170217 ?섏젙 */

div.footer dl.select-g {position:absolute;top:25px;right:0;width:205px;height:28px;text-align:left;}
div.footer dl.select-g dt {border:1px solid #666;}
div.footer dl.select-g dt a {padding:7px 20px 9px 24px; display:block;background:url(/images/en-web/comm/bu/bu-select-off.gif) no-repeat 184px 11px;color:#ddd;font-size:14px;}
div.footer dl.select-g dt a.on {background:url(/images/en-web/comm/bu/bu-select-on.gif) no-repeat 184px 11px;}
div.footer dl.select-g dd {position:absolute;padding:25px 0 0 30px;height:375px;width:952px;right:0;top:-410px;background:#fff;border:1px solid #c8c8c8;display:none;}
div.footer dl.select-g dd ul {display:block;overflow:hidden;}
div.footer dl.select-g dd ul li {float:left;width:127px;}
div.footer dl.select-g dd ul li.first {width:135px;}
div.footer dl.select-g dd ul li > span {color:#333;font-size:16px;line-height:1.1em;letter-spacing:-1px;margin-bottom:15px;display:block;}
div.footer dl.select-g dd ul li ul li {float:none;width:100%;}
div.footer dl.select-g dd ul li ul li a {color:#747474;font-size:13px;margin-bottom:9px;line-height:1.1em;letter-spacing:-1px;display:block;}
div.footer dl.select-g dd a.close {position:absolute;top:0;right:0;width:40px;height:40px;display:inline-block;background:url(/images/en-web/comm/btn/btn-close3.gif) no-repeat 0 0;font-size:0;line-height:0;}

div.footer p.copy {clear:both;margin-top:12px;font-size:12px;color:#aaa;}