@charset "utf-8";
/*
* gnb.css.en
*/
/* version : 230316 */
.gnb {position:absolute;left:0;top:0;z-index:100;width:100%;min-width:1240px;min-height:80px;color:#999;} /* 220922 modify */
.gnb::after{content:"";display:block;position:absolute;left:0;top:0;z-index:-1;width:100%;height:81px;background: linear-gradient(180deg, rgba(102,102,102,0.5) 0%, rgba(102,102,102,0) 100%)} /* 221101 modify */
.gnb:hover::after{background: none;} /* 230222 add*/
.gnb.nobg::after{background:none}
.gnb > .inner {width:1120px;margin:0 auto;padding-top:21px;}
.gnb > .inner:after {content:'';display:block;clear:both;}
.gnb .logo {float:left;width:155px;margin-right:86px;padding-top:4px;} /* 220916 modify */
.gnb .logo img {width:100%;}
.gnb .logo-default {display:none;}
.gnb .nav {position:relative;z-index:1;display: flex; justify-content: flex-end;} /* 221226 modify */
.gnb .nav .sub {display:none;position:absolute;left:20%;top:-21px;z-index:-1;/* width:1067px */;width:calc(100vw - (50vw - 316px));height:768px;padding:131px 0 0 60px;background:#fff;font-family:'HyundaiRegular';opacity:0;box-sizing: border-box;} /* 220915 modify */
.gnb .nav .on .sub {display:block;}
.gnb .nav .sub .inner{position:relative;width:812px}  /* 220915 add */
.gnb .menu {padding-left:35px;font-size:18px;font-family:'HyundaiMedium';} /* 221226 modify */
.gnb .menu:after {content:'';display:block;clear:both;}
.gnb .menu > li {float:left;padding:0 25px;height:auto;min-height:28px} /* 221101 modify */
.gnb .menu > li > a {display:block;}
.gnb .menu .on > a {border-bottom:1px solid #002c5f;color:#002c5f;}
.gnb .dep2 {min-height:435px;padding-right:435px;}
.gnb .dep2 > li {margin-top:31px;font-size:33px;line-height:28px;}
.gnb .dep2 > li:first-child {margin-top:0;}
.gnb .dep2 a {color:#999;}
.gnb .imgArea {position:absolute;right:0;top:0;width:435px;height:435px;} /* 220915 modify */
.gnb .imgArea > a:after {content:'';position:absolute;left:0;bottom:0;width:100%;height:220px;opacity:0;-ms-transition:opacity 0.5s;-o-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-webkit-transition:opacity 0.5s;transition:opacity 0.5s;}
.gnb .imgArea > a:hover:after,
.gnb .imgArea > a:focus:after {opacity:1;}
.gnb .imgArea .imgThumb{display:none}
.gnb .imgArea .imgThumb:first-child{display:block}
.gnb .imgArea .imgThumb img {width:100%;height:100%;}
.gnb .imgArea .tit {position:absolute;left:0;bottom:0;z-index:1;width:100%;padding:20px;font-size:18px;font-family:'HyundaiMedium';color:#fff;line-height:24px;}
.gnb .imgArea .tit h2.category {padding-bottom:10px;font-size:14px;font-family:'HyundaiRegular';line-height:16px;} /* 220914 modify *//* 221213 delete */
.gnb .imgArea .tit .category {font-size:18px;line-height:22px;}  /* 220914 add *//* 221213 modify */
.gnb .imgArea .tit .category--theme {padding-bottom:10px;font-size:14px;font-family:'HyundaiRegular';line-height:16px;}  /* 221213 add */
.gnb .hashtag {position:relative;margin:40px 0 0 0;} /* 220915 modify */
.gnb .hashtag:before {content:'';position:absolute;left:0;top:0;z-index:1;width:2px;height:100%;background:#fff;}
.gnb .hashtag > li {position:relative;display:inline-block;padding:0 15px;font-size:18px;line-height:28px;}
.gnb .hashtag > li:before {content:'';position:absolute;left:0;top:4.5px;height:17.5px;border-left:2px solid #e4dcd3;}
.gnb .hashtag a {color:#999;}
.gnb .hashtag a:hover,
.gnb .hashtag a:focus {color:#002c5f;} /* 220920 modify */
.gnb .util {padding:2px 0 0 86px;height:60px;} /* 230203 modify */
.gnb .util:after {content:'';display:block;clear:both;}
.gnb .util > li {float:left;overflow:hidden;height:25px;margin-left:10px;font-size:16px;line-height:26px;text-align:center;}
.gnb .util > li:first-child {margin-left:0;}
.gnb .util > li > a,
.gnb .util > li > button {position:relative;display:block;width:25px;height:25px;}
.gnb .btnGlobal {background:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-wh.png') no-repeat 0 0;background-size:100%;}
.gnb .btnGlobal:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-bl.png');} /* 220916-m1 modify */
.gnb .btnChannel {background:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-wh.png') no-repeat 0 0;background-size:100%;}
.gnb .btnChannel:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-bl.png');} /* 220916-m1 modify */
.gnb .btnOpenSearch {background:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-wh.png') no-repeat 0 0;background-size:100%;}
.gnb .btnOpenSearch:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-bl.png');} /* 220916-m1 modify */
/* s: 221118 delete */
/*
.gnb .gnbLang:hover,
.gnb .gnbLang:focus {height:auto;}
*/
/* e: 221118 delete */
.gnb .gnbLang a {position:relative;}
.gnb .gnbLang a:before {content:'';display:block;width:3px;height:3px;margin:3px auto;border-radius:50%;background:#fff;}
.gnb .gnbLang a:first-child:before {content:none;}
.gnb .drawerMenu {display:none;}
.gnbDim {display:none;position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,44,95,.8);}

.gnb .search.on .btnOpenSearch {background:none;}
.gnb .search.on .btnOpenSearch:before,
.gnb .search.on .btnOpenSearch:after {content:'';position:absolute;left:50%;top:4px;height:18px;border-left:1px solid #000;}
.gnb .search.on .btnOpenSearch:before {transform:rotate(45deg);}
.gnb .search.on .btnOpenSearch:after {transform:rotate(-45deg);}

/* s: 220913 modify */
.gnb .gnbSearchArea .gnbSearchArea {text-align:left;}
.gnb .gnbSearchArea .gnbSearch {position:relative;width:100%;margin-top:86px;padding-right:50px;border-bottom:1px solid #e4dcd3;}
.gnb .gnbSearchArea .gnbSearch .gnbautoSearchList {display:none;position:absolute;left:0;top:52px;z-index:1;width:100%;background:#fff;}
.gnb .gnbSearchArea .gnbSearch .autoSearch {width:100%;margin:0 auto;padding:12px 0;border-top:1px solid #063162;}
.gnb .gnbSearchArea .gnbSearch .autoSearch .list .link {display:block;font-size:16px;line-height:50px;}
.gnb .gnbSearchArea .gnbSearch .autoSearch .list .link:hover,
.gnb .gnbSearchArea .gnbSearch .autoSearch .list .link:focus {color:inherit;}
.gnb .gnbSearchArea .gnbSearch .autoSearch .list .link .keyword {background:none;font-family:'HyundaiMedium';color:#00a1c7;}
.gnb .gnbSearchArea .gnbSearch .btnSearch{position:absolute;right:0;top:auto;bottom:10px;width:32px;height:32px;background:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-gy.png') no-repeat 50% 50%;background-size:100%;}
.gnb .gnbSearchArea .gnbSearch .btnReset{display:none;position:absolute;right:0;top:auto;bottom:10px;width:30px;height:30px;background:#fff;}
.gnb .gnbSearchArea .gnbSearch .btnReset:before,
.gnb .gnbSearchArea .gnbSearch .btnReset:after {content:'';position:absolute;left:50%;top:4px;height:28px;border-left:1px solid #000;}
.gnb .gnbSearchArea .gnbSearch .btnReset:before {transform:rotate(45deg);}
.gnb .gnbSearchArea .gnbSearch .btnReset:after {transform:rotate(-45deg);}
/* e : 220913 modify */

.gnb .gnbTopic {width:100%;margin:0;padding:40px 0 0;}
.gnb .gnbTopic .topicTit {margin-bottom:10px;font-size:16px;font-family:'HyundaiMedium';color:#000;line-height:normal;}
.gnb .gnbTopic .topicList {font-size:18px;line-height:1.8em;}
.gnb .gnbTopic .topicList > a {margin-right:20px;}

/* s: 220913 modify */
.gnb .gnbSearchArea .gnbSearch .searchInput .inputText {border:0;font-size:40px;color:#002c5f;padding-left:0}
.gnb .gnbSearchArea .gnbSearch .inputText::-webkit-input-placeholder{color:#e4dcd3;}
.gnb .gnbSearchArea .gnbSearch .inputText::-moz-placeholder{color:#e4dcd3;}
.gnb .gnbSearchArea .gnbSearch .inputText:-ms-input-placeholder{color:#e4dcd3;}
.gnb .gnbSearchArea .gnbSearch .inputText:-moz-placeholder{color:#e4dcd3;}
/* e: 220913 modify */

.gnb.fixed {position:fixed;background:#fff;}
.gnb.fixed a,
.gnb.active a {color:#999;} 
.gnb.active{background: #fff;}/*230222 add*/
.gnb.fixed .logo-default, .gnb.active .logo-default{display: block;} /*230222 modify*/
.gnb.fixed::after, .gnb.active::after,/* 230316 modify*/
.gnb.fixed .logo-wh, .gnb.active .logo-wh{display:none;} /* 230316 modify*/
/* s : 220916-m1 modify */
.gnb.fixed .btnGlobal,
.gnb.active .btnGlobal {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-gy.png');}
.gnb.fixed .btnGlobal:hover,
.gnb.active .btnGlobal:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_language-bl.png');}
.gnb.fixed .btnChannel,
.gnb.active .btnChannel {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-gy.png');}
.gnb.fixed .btnChannel:hover,
.gnb.active .btnChannel:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_Channelh-bl.png');}
.gnb.fixed .btnOpenSearch,
.gnb.active .btnOpenSearch {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-gy.png');}
.gnb.fixed .btnOpenSearch:hover,
.gnb.active .btnOpenSearch:hover {background-image:url('/content/dam/hyundai/ww/en/images/main/new/common/btn_topmenu_search-bl.png');}
/* e : 220916-m1 modify */
.gnb.fixed .gnbLang a:before,
.gnb.active .gnbLang a:before {background:#999;}

.gnb a {color:#fff;}
.gnb a:hover,
.gnb a:focus {color:#002c5f;text-decoration:none;cursor:pointer;}

.gnb .dep2 li a[target="_blank"]:after{content:"";overflow:hidden;display:inline-block;margin-left:10px;width:15px;height:15px;background:url("/content/dam/hyundai/ww/en/images/common/ico_new_link.png") no-repeat 0 0;font-size:0;line-height:0} /* 221017 add */

@media screen and (min-width: 0) and (max-width: 740px){
  .gnb {min-width:100%;min-height:65px;}
  .gnb::after{height:200px;transform:translate(0, -67px);}  /* 221101 modify */
  .gnb > .inner {position:relative;z-index:1;width:100%;padding:19px 25px 21px;} /* 220915 modify */
  .gnb .logo {position:relative;z-index:10;width:130px;margin-right:0;padding-top:3px;}
  .gnb .logo img{height:auto} /* 220927 add */
  .gnb .nav {position:static;float:right;}
  .gnb .nav .sub {position:static;display:none;width:100%;height:auto;padding:0;opacity:1;}
  .gnb .nav .sub .inner{width:100%} /* 220915 add */
  .gnb .menu {position:fixed;left:0;top:-115%;float:none;width:100%;padding:28px 0;border-top:1px solid #ebebeb;background:#fff;font-size:20px;line-height:22px;transition:top .3s;}  /* 221104 modify */  .gnb .menu a {position:relative;display:block;padding:12px 25px;color:#999;}
  .gnb .menu > li {float:none;padding:0;}
  .gnb .menu > li.on > a {border-bottom:none;}
  .gnb .menu .hasSub > a:before,
  .gnb .menu .hasSub > a:after {content:'';position:absolute;right:25px;top:50%;width:14px;border-top:1px solid #999;}
  .gnb .menu .hasSub > a:after {transform:rotate(90deg);}
  .gnb .menu .hasSub.on > a:before {border-color:#002c5f;}
  .gnb .menu .hasSub.on > a:after {content:none;}
  .gnb .menu.on {top:65px;}
  .gnb .menu.on .sub {display:none;}
  .gnb .dep2 {min-height:auto;padding-right:0;}
  .gnb .dep2 > li {margin-top:0;font-size:18px;line-height:20px;}
  .gnb .imgArea,
  .gnb .hashtag {display:none;}
  .gnb .util {float:none;height:auto}
  .gnb .util > li {font-size:17px;}
  .gnb .gnbGlobal,
  .gnb .gnbLang {display:none;}
  .gnb .gnbLang:hover,
  .gnb .gnbLang:focus {height:25px;}
  .gnb .drawerMenu {display:block;}
  .gnb .btnDrawerMenu:before,
  .gnb .btnDrawerMenu:after {content:'';position:absolute;left:3px;width:18px;}
  .gnb .btnDrawerMenu:before {top:5px;height:14px;border:1px solid #fff;border-width:1px 0;}
  .gnb .btnDrawerMenu:after {border-top:1px solid #fff;}
  .gnb .btnDrawerMenu.on:before,
  .gnb .btnDrawerMenu.on:after {left:50%;top:4px;width:auto;height:18px;border-left:1px solid #000;border-width:0 0 0 1px;}
  .gnb .btnDrawerMenu.on:before {transform:rotate(45deg);}
  .gnb .btnDrawerMenu.on:after {transform:rotate(-45deg);}

  .gnb .sub.gnbSearchArea {position:absolute;left:0;top:65px;padding:60px 25px 80px;border-top:1px solid #ebebeb;}
  /* s: 220913 modify */
  .gnb .gnbSearchArea .gnbSearch {margin-top:0;padding-bottom:8px}
  .gnb .gnbSearchArea .gnbSearch .gnbautoSearchList {top:35px;}
  .gnb .gnbSearchArea .gnbSearch .gnbautoSearchList .list {border-top:none;}
  .gnb .gnbSearchArea .gnbSearch .btnSearch {bottom:10px;width:20px;height:20px;}
  .gnb .gnbSearchArea .gnbSearch .searchInput{background:#fff;padding:0}
  /* e: 220913 modify */
  .gnb .gnbTopic {padding-top:22px;}
  .gnb .gnbTopic .topicTit {margin-bottom:2px;font-size:14px;font-family:'HyundaiRegular';}
  .gnb .gnbTopic .topicList {margin-top:0;font-size:16px;line-height:1.4em;}
  .gnb .gnbTopic .topicList > a {margin-right:15px;}
  .gnb .gnbSearchArea .gnbSearch .searchInput .inputText{height:26px;font-size:20px;line-height:1em;background:#fff;box-sizing:border-box} /* 220921 modify */
  /* s: 220913 add */
  .gnb .gnbSearchArea .gnbSearch .searchInput input.inputText::-webkit-input-placeholder{color:#e4dcd3}
  .gnb .gnbSearchArea .gnbSearch .searchInput input.inputText::-moz-placeholder{color:#e4dcd3}
  .gnb .gnbSearchArea .gnbSearch .searchInput input.inputText:-ms-input-placeholder{color:#e4dcd3}
  .gnb .gnbSearchArea .gnbSearch .searchInput input.inputText:-moz-placeholder{color:#e4dcd3}
  /* e: 220913 add */

  .gnb.active .inner {background:#fff;}
  .gnb.active .logo-default {display:block;}
  .gnb.active .logo-wh {display:none;}
  /* s: 230222 modify */
  .gnb.active .btnDrawerMenu:before,
  .gnb.active .btnDrawerMenu:after {border-color:#999;}
  .gnb.fixed .btnDrawerMenu:before,
  .gnb.fixed .btnDrawerMenu:after {border-color:#999;}
  /* e: 230222 modify */


  .gnb .menu.on + .util {padding:0 35px 0 0;}
  .gnb .menu.on + .util > li:first-child {margin-left:10px;}
  .gnb .menu.on + .util .gnbGlobal,
  .gnb .menu.on + .util .gnbLang {display:block;float:right;}
  .gnb .menu.on + .util .drawerMenu {position:absolute;right:25px;top:19px;width:25px;display:block} /* 220921 modify */

  .gnb.active .gnbChannel,
  .gnb .menu.on + .util .gnbChannel,
  .gnb .menu.on + .util .search,
  .gnb .search.on + .drawerMenu {display:none;}
  
  /* iOS(최신기종) 예외 처리 */
  .ios .gnb .menu.on + .util .drawerMenu {float:none;top:17px} /* 221208 add */
  .ios .gnb .menu.on + .util .drawerMenu button{border:1px solid #fff} /* 221208 add */
}

/* s : 220916-m1 add */
.topArea {height:161px} /* 221004 modify */
.topArea .breadCrumb{position:absolute;padding-top:0;top:120px} /* 221101 modify */
.contTop{margin-bottom:0 !important}

@media screen and (min-width: 0) and (max-width: 740px){
  .topArea {height:60px}
}
/* e : 220916-m1 add */

/* s : 220920 modify */
.floating-top.fixed{position:fixed;bottom:20px;margin-bottom:0}
.floating-top{position:absolute;width:50px;right:calc(50% - 630px);bottom:574px;z-index:20;} 
.floating-top button{position:relative;display:block;width:50px;height:50px;border-radius:50%;background-color:rgba(255, 255, 255, 0.85);box-shadow:0 0 5px 0 rgba(0,0,0,0.2);} /* 230227*/
.floating-top button::after{content:'';position:absolute;left:calc(50% - 4px);top:calc(50% - 6px);width:8px;height:8px;border: solid #002c5f;border-width: 0 2px 2px 0;display:inline-block;transform: rotate(-135deg);-webkit-transform: rotate(-135deg);}
.floating-top button::before{content:'';position:absolute;left:50%;top:calc(50% - 7px);width:2px;height:15px;background-color:#002c5f}

@media screen and (min-width: 0) and (max-width: 740px){
  .floating-top.fixed{bottom:25px;margin-bottom:0}
  .floating-top{position:absolute;bottom:418px;width:40px;right:25px;}
  .floating-top button{width:40px;height:40px}
  .floating-top button::before{height:13px;top:calc(50% - 4px);}
  .floating-top button::before{top:calc(50% - 5px);}
}
/* e : 220920 modify */