@charset "utf-8"; /* font */ @font-face{ font-family:'HyundaiRegular'; src:url("../font/HyundaiSansHead-Regular.woff2") format("woff2"), url("../font/HyundaiSansHead-Regular.woff") format("woff"), url("../font/HyundaiSansHead-Regular.ttf") format("truetype"); font-weight:normal; font-style:normal; } @font-face{ font-family:'HyundaiMedium'; src:url("../font/HyundaiSansHead-Medium.woff2") format("woff2"), url("../font/HyundaiSansHead-Medium.woff") format("woff"), url("../font/HyundaiSansHead-Medium.ttf") format("truetype"); font-weight:normal; font-style:normal; } @font-face{ font-family:'HyundaiTextRegular'; src:url("../font/HyundaiSansText-Regular.woff2") format("woff2"), url("../font/HyundaiSansText-Regular.woff") format("woff"), url("../font/HyundaiSansText-Regular.ttf") format("truetype"); font-weight:normal; font-style:normal; } @font-face{ font-family:'HyundaiLight'; src:url("../font/HyundaiSansHead-Light.woff2") format("woff2"), url("../font/HyundaiSansHead-Light.woff") format("woff"), url("../font/HyundaiSansHead-Light.ttf") format("truetype"); font-weight:normal; font-style:normal; } @font-face{ font-family:'HyundaiBold'; src:url("../font/HyundaiSansHead-Bold.woff2") format("woff2"), url("../font/HyundaiSansHead-Bold.woff") format("woff"), url("../font/HyundaiSansHead-Bold.ttf") format("truetype"); font-weight:normal; font-style:normal; } /* [2022.10.20 : 최재영] WW : S - 미사용 font 제거 (58279#comment-538456) */ /* @font-face{ font-family:'HyundaiKRRegular'; src:url("../font/HyundaiSansHeadKRRegular.woff2") format("woff2"), url("../font/HyundaiSansHeadKRRegular.woff") format("woff"), url("../font/HyundaiSansHeadKRRegular.ttf") format("truetype"); font-weight:normal; font-style:normal; }*/ /* [2022.10.20 : 최재영] WW : E - 미사용 font 제거 (58279#comment-538456) */ @font-face{ font-family:'HyundaiKRMedium'; src:url("../font/HyundaiSansHeadKRMedium.woff2") format("woff2"), url("../font/HyundaiSansHeadKRMedium.woff") format("woff"), url("../font/HyundaiSansHeadKRMedium.ttf") format("truetype"); font-weight:normal; font-style:normal; } @charset "utf-8"; /* * ce.css */ ::-moz-selection{background:#b3d4fc;text-shadow:none} ::selection{background:#b3d4fc;text-shadow:none} html{position:relative;overflow-y:scroll} html,body{position:relative} body{font-family:'HyundaiRegular','HyundaiTextRegular',"HyundaiKRRegular",'Malgun Gothic',Dotum,'돋움',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','굴림',arial,sans-serif;color:#000;-ms-word-wrap:break-word;word-wrap:break-word; -webkit-font-smoothing:antialiased} body,div,section,dl,ul,ol,li,dt,dd,blockquote,p,h1,h2,h3,h4,h5,h6{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} h1,h2,h3,h4,h5,h6{line-height:1;margin:0;font-weight:normal;font-family:"HyundaiMedium","HyundaiKRMedium"} li{list-style:none} hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} audio,canvas,iframe,img,svg,video{vertical-align:middle} fieldset{border:0;margin:0;padding:0} textarea{resize:vertical} pre,xmp,plaintext,listing,samp,kbd,code,figure,figcaption{margin:0} iframe{border:none} iframe[src*="insight.adsrvr.org/tags"]{display:none} img{vertical-align:top} strong,b{font-family:"HyundaiMedium","HyundaiKRMedium";font-weight:normal} pre{white-space:pre-wrap} a{text-decoration:none;color:#000} a:hover, a:focus{color:#000;text-decoration:underline} button{text-decoration:none;color:#000} button:hover, button:focus{color:#000;text-decoration:underline} ::-webkit-input-placeholder{color:#999} ::-moz-placeholder{color:#999} :-ms-input-placeholder{color:#999} :-moz-placeholder{color:#999} table{width:100%} caption{left:-10000px;top:auto;height:0;overflow:hidden} button:focus, a:focus,a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, select::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner{ outline:blue !important; box-shadow:0 0 3px 0px blue !important; position:relative; } select:-moz-focusring{color:transparent;box-shadow:0 0 3px 0 blue !important} html{font-family:sans-serif;/* 1 */-ms-text-size-adjust:100%;/* 2 */-webkit-text-size-adjust:100%;/* 2 */} body{margin:0} article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block} audio,canvas,progress,video{display:inline-block;/* 1 */vertical-align:baseline;/* 2 */} audio:not([controls]){display:none;height:0} [hidden],template{display:none} a{background-color:transparent} a:active,a:hover{outline:0} abbr[title]{border-bottom:1px dotted} b,strong{font-weight:bold} dfn{font-style:italic} h1{font-size:2em;margin:0.67em 0} mark{background:#ff0;color:#000} small{font-size:80%} sub,sup{font-size:60%;line-height:0;position:relative;vertical-align:baseline} sup{top:-0.5em} sub{bottom:0} img{border:0} svg:not(:root){overflow:hidden} figure{margin:1em 40px} hr{box-sizing:content-box;height:0} pre{overflow:auto} code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em} button,input,optgroup,select,textarea{color:inherit;/* 1 */font:inherit;/* 2 */margin:0;/* 3 */} button{overflow:visible} button,select{text-transform:none} button, html input[type="button"], /* 1 */ input[type="reset"], input[type="submit"]{-webkit-appearance:button;/* 2 */cursor:pointer;/* 3 */} button[disabled], html input[disabled]{cursor:default} button::-moz-focus-inner, input::-moz-focus-inner{border:0; padding:0} input{line-height:normal} input[type="checkbox"], input[type="radio"]{box-sizing:border-box;/* 1 */padding:0;/* 2 */} input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button{height:auto} input[type="search"]{-webkit-appearance:textfield;/* 1 */box-sizing:content-box;/* 2 */} input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance:none} fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em} legend{border:0;/* 1 */padding:0;/* 2 */} textarea{overflow:auto} optgroup{font-weight:bold} table{border-collapse:collapse;border-spacing:0} td,th{padding:0} /* skip Navigation */ #skipNavi{position:absolute;top:0;left:0;width:100%;z-index:600} #skipNavi a{position:absolute;display:block;width:100%;padding:10px 0;background:#000;box-sizing:border-box;color:#fff;font-size:16px;text-align:center;top:-9999px} #skipNavi a:hover,#skipNavi a:active,#skipNavi a:focus{display:inline-block;top:0;width:100%} /* browserUpgrage */ .browserUpgrade{position:fixed;left:0;top:0;width:100%;z-index:10000;background:#fafafa;border-bottom:2px solid #999;padding:10px 0;margin:0;text-align:center;font-size:14px;color:#595959} .browserUpgrade a{font-size:18px;color:#000} .browserUpgrade a:hover{color:#999} /* Image replacement */ .accTag{font-size:0 !important;position:absolute !important;left:-9999px !important;top:-9999px !important;text-indent:-9999px !important;visibility:hidden !important;overflow:hidden !important} /* hide & show */ .hide{display:none !important} .show{display:block !important} .visibleHidden{visibility:hidden !important} .visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto} .invisible{visibility:hidden} /* hidden */ .ir_hidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px} /* ICON - scale(0.5) is for 1.5px line */ [class*="icon_"]{position:relative} [class*="icon_"]:before, [class*="icon_"]:after{display:block;position:absolute;top:50%;content:''} [class*="icon_arr_"][class*="_01"]:after{right:15px;width:22px;height:22px} [class*="icon_arr_"][class*="_wh"]:after{border-top:3px solid #fff;border-right:3px solid #fff} [class*="icon_arr_"][class*="_bl"]:after{border-top:3px solid #666;border-right:3px solid #666} [class*="icon_arr_right"]:after{transform:translate(0, -50%) rotate(45deg) scale(0.5)} [class*="icon_arr_left"]:after{transform:translate(0, -50%) rotate(-135deg) scale(0.5)} [class*="icon_arr_top"]:after{transform:translate(0, -50%) rotate(-45deg) scale(0.5)}/* 220316 add */ [class*="icon_arr_bottom"]:after{transform:translate(0, -50%) rotate(135deg) scale(0.5)} [class*="icon_close_01"]{width:16px;height:16px} [class*="icon_close_01"]:before, [class*="icon_close_01"]:after{top:50%;right:-3px;width:44px;height:3px} [class*="icon_close_"][class*="wh"]:before, [class*="icon_close_"][class*="wh"]:after{background-color:#fff} [class*="icon_close_"][class*="bl"]:before, [class*="icon_close_"][class*="bl"]:after{background-color:#666} [class*="icon_close_01"]:before{transform:translate(25%, -50%) rotate(45deg) scale(0.5)} [class*="icon_close_01"]:after{transform:translate(25%, -50%) rotate(-45deg) scale(0.5)} [class*="icon_close_"][class*="hb"]:before, [class*="icon_close_"][class*="hb"]:after{background-color:#002c5f} @media print,screen and (min-width:741px){ button[class*="icon_close_"]{transition:0.4s} button[class*="icon_close_"]:hover{transform:rotate(180deg)} } /* BUTTON style */ [class*="btn_"][class*="_small"]{padding:5px 29px 4px;font-size:12px;font-family:HyundaiMedium;letter-spacing:0.04em} [class*="btn_"][class*="_small"]:nth-child(n + 2){margin-left:20px} .btn_white_small{background-color:#fff;color:#002c5f} .btn_beige_small{background-color:#e4dcd3;color:#666} /* clearfix */ .clearfix:before, .clearfix:after{ content:" ";/* 1 */ display:table;/* 2 */ } .clearfix:after{clear:both} /* Country choice quick bar */ .quickArea.on{bottom:0} .quickArea{position:fixed;left:0;z-index:120;width:100%;background:#002c5f;transition:bottom .5s} .quickArea .txtGuide{font-size:14px;font-family:HyundaiTextRegular;color:#fff} .quickArea a{text-decoration:none} /* ------------------------------------------------------------------ container * ------------------------------------------------------------------ */ @media print,screen and (min-width:741px) and (max-width:20000px){ body{font-size:16px;line-height:28px} #container input[type="radio"], #container input[type="checkbox"]{position:relative;left:1px;top:1px;width:13px;height:13px;margin:0;padding:0} #container input[type="text"], #container input[type="password"], #container input[type="search"], #container input[type="email"], #container input[type="tel"], #container input[type="number"], #container select, #container textarea{height:44px;padding:0 20px; border:1px solid #c4c6ca;font:14px/44px 'HyundaiRegular','Malgun Gothic',Dotum,'돋움',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','굴림',arial,sans-serif;vertical-align:baseline;outline:none;box-sizing:border-box;color:#000} #container input[type="password"]{font-family:'HyundaiRegular','Malgun Gothic',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','Microsoft NeoGothic','Droid sans',Dotum,'돋움','굴림',arial,sans-serif}/* 3 Should be changed */ #container input[type="text"]:disabled, #container input[type="password"]:disabled, #container input[type="search"]:disabled, #container input[type="email"]:disabled, #container input[type="tel"]:disabled, #container input[type="number"]:disabled, #container select:disabled, #container textarea:disabled{background-color:#fff;color:#888} button{border:0;padding:0;overflow:hidden;background:none;position:relative} #container textarea{padding:18px;border:1px solid #c4c6ca;font:16px/1.2 'HyundaiRegular';resize:none;box-sizing:border-box}/* 4 Should be changed */ #container input[type="text"].wrong-value, #container input[type="tel"].wrong-value, #container input[type="email"].wrong-value, #container input[type="number"].wrong-value, #container textarea.wrong-value{color:#c21a1a !important} #container input[disabled ="disabled"]{background:#fafafa} #container input[type="text"]::-ms-clear{display:none} #container input[type=checkbox]{display:none} #container input[type=checkbox] + label{display:inline-block;cursor:pointer;position:relative;line-height:18px;padding-left:28px;font-size:14px;vertical-align:top} #container input[type=checkbox]+ label:before{content:"";display:inline-block;width:18px;height:18px;position:absolute;left:0;top:0;border:2px solid #999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} #container input[type=checkbox]:checked + label:before{background:url("../images/common/checkbox.png") no-repeat center center;-webkit-background-size:10px auto;background-size:10px auto;border:2px solid #00aad2; } #container input[type=radio]{display:none} #container input[type=radio] + label{display:inline-block;cursor:pointer;position:relative;line-height:18px;padding-left:28px;font-size:14px;vertical-align:top} #container input[type=radio]+ label:before{content:"";display:inline-block;width:18px;height:18px;position:absolute;left:0;top:0;border:2px solid #999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:18px} #container input[type=radio]:checked + label:before{border:2px solid #00aad2} #container input[type=radio]:checked + label:after{content:"";display:inline-block;width:8px;height:8px;position:absolute;left:5px;top:50%;margin:-4px 0 0 0px;background:#00aad2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:8px} #container select{box-shadow:1px 1px 1px rgba(0,0,0,0.05);border:0;padding:0 25px;width:100%; appearance:none; -moz-appearance:none;/* Firefox */ -webkit-appearance:none;/* Safari and Chrome */ background:#fff url("../images/common/select_right_arr.png") no-repeat right center; border:none;border-right:0;border-top:0;border-left:0;border-bottom:0; } #container select:focus{outline:2px solid #a4c6fd} #container select::-ms-expand{display:none} #container .msie9 select{box-shadow:1px 1px 1px rgba(0,0,0,0.05);border:0;padding:0 0 0 25px;width:100%; appearance:none; -moz-appearance:none;/* Firefox */ -webkit-appearance:none;/* Safari and Chrome */ background-image:none; border:none;border-right:0;border-top:0;border-left:0;border-bottom:0; } #container select:disabled{opacity:0.5} #container select.bg{background-color:#e4dcd3} #container select.bg:disabled{background-color:#e4dcd3} #container select.bg2{background-color:#f6f3f2} .mobileOnly{display:none} .fakeWrap{width:1120px} .webBlock{display:block} } @media screen and (min-width:0) and (max-width:740px){ body{font-size:14px;line-height:21px} #container b,#container strong{font-weight:normal} #container input[type="radio"], #container input[type="checkbox"]{position:relative;left:1px;top:1px;width:13px;height:13px;margin:0;padding:0} #container input[type="text"], #container input[type="password"], #container input[type="search"], #container input[type="email"], #container input[type="tel"], #container input[type="number"], #container select, #container textarea{height:35px;padding:0 15px; border:1px solid #c4c6ca;font:12px/normal 'HyundaiRegular','Malgun Gothic',Dotum,'돋움',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','굴림',arial,sans-serif;vertical-align:baseline;box-sizing:border-box;color:#000;border-radius:0;appearance:none;-webkit-appearance:none} #container input[type="password"]{font-family:'HyundaiRegular','Malgun Gothic',AppleGothicNeoSD,'Apple SD 산돌고딕 Neo','Microsoft NeoGothic','Droid sans',Dotum,'돋움','굴림',arial,sans-serif}/* 3 Should be changed */ #container input[type="text"]:disabled, #container input[type="password"]:disabled, #container input[type="search"]:disabled, #container input[type="email"]:disabled, #container input[type="tel"]:disabled, #container input[type="number"]:disabled, #container select:disabled, #container textarea:disabled{background-color:#fff;color:#888} button{border:0;padding:0;overflow:hidden;background:none;position:relative} #container textarea{padding:18px;border:1px solid #c4c6ca;font:12px/1.6 'HyundaiRegular';resize:none;box-sizing:border-box}/* 4 Should be changed */ #container input[type="text"].wrong-value, #container input[type="tel"].wrong-value, #container input[type="email"].wrong-value, #container input[type="number"].wrong-value, #container textarea.wrong-value{color:#c21a1a !important} #container input[disabled ="disabled"]{background:#fafafa} #container input[type="text"]::-ms-clear{display:none} #container input[type=checkbox]{display:none} #container input[type=checkbox] + label{display:inline-block;cursor:pointer;position:relative;line-height:16px;padding-left:25px;font-size:12px} #container input[type=checkbox]+ label:before{content:"";display:inline-block;width:16px;height:16px;position:absolute;left:0;top:0;border:2px solid #999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} #container input[type=checkbox]:checked + label:before{background:url("../images/common/checkbox.png") no-repeat center center;-webkit-background-size:10px auto;background-size:10px auto;border:2px solid #00aad2; } #container input[type=radio]{display:none} #container input[type=radio] + label{display:inline-block;cursor:pointer;position:relative;line-height:16px;padding-left:25px;font-size:12px} #container input[type=radio]+ label:before{content:"";display:inline-block;width:16px;height:16px;position:absolute;left:0;top:0;border:2px solid #999;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:18px} #container input[type=radio]:checked + label:before{border:2px solid #00aad2} #container input[type=radio]:checked + label:after{content:"";display:inline-block;width:8px;height:8px;position:absolute;left:4px;top:4px;background:#00aad2;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-radius:8px} #container select{border:0;padding:0 40px 0 15px;width:100%; appearance:none; -moz-appearance:none;/* Firefox */ -webkit-appearance:none;/* Safari and Chrome */ background:#fff url("../images/common/select_right_arr.png") no-repeat right center; } #container select::-ms-expand{display:none} #container .msie9 select{padding:0 0 0 15px;width:100%; appearance:none; -moz-appearance:none;/* Firefox */ -webkit-appearance:none;/* Safari and Chrome */ background-image:none; } #container select:disabled{opacity:0.5} #container select.bg{background-color:#e4dcd3} #container select.bg:disabled{background-color:#e4dcd3} #container select.bg2{background-color:#f6f3f2} .webOnly{display:none} .mobileBlock{display:block} } /* ------------------------------------------------------------------ header * ------------------------------------------------------------------ */ @media print,screen and (min-width:741px) and (max-width:20000px){ .topBanner .gnbWrapFull{position:absolute;top:336px;margin-bottom:-70px;} .gnbWrapFull{position:absolute;top:0;left:0;z-index:20;width:100%;min-width:1240px;background:#f6f3f2; transition:all .3s;min-height:70px;border-color:#e4dcd3} .gnbWrapFull.edit{top:25px} .gnbWrapFull.ab{position:absolute} .gnbWrapFull a{text-decoration:none} .gnbWrapFull.openSub{overflow:hidden;z-index:9999;border-bottom:2px solid #e4dcd3;min-height:393px} .gnbWrapFull.openSub.vehicles{overflow:hidden;min-height:571px} .gnbWrap{position:relative;z-index:10;height:71px} .gnbWrapInner{width:1120px;margin:0 auto} .gnbWrap .logo{float:left;padding-top:25px} .gnbWrap .logo .topLogo{overflow:hidden;display:block} .gnbWrap .logo .topLogo img{width:155px} .gnbWrap .topBar .btnBack{display:none} .gnbWrap .topBar .rightArea{display:none} .gnbWrap .topBar .pageTitle{display:none} .gnbWrap .scrollBox{display:block !important;right:auto !important;height:auto !important;max-height:none !important} .gnbWrap .gnbArea{float:left;margin-left:78px;font-size:14px} .gnbWrap .gnbArea:after{display:block;content:"";clear:both} .gnbWrap .gnbArea .dep1Wrap:after{display:block;content:"";clear:both} .gnbWrap .gnbArea .dep1Wrap .dep1{float:left} .gnbWrap .gnbArea .dep1Wrap .dep1+.dep1{margin-left:3px;} .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a{display:block;padding:0 15px;font-size:16px;line-height:70px;color:#666;text-decoration:none;font-family:HyundaiMedium;cursor:pointer;} .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a:after{display:none} .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a.on, .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a.now, .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a:focus, .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a:hover{color:#002c5f} .gnbWrap .gnbArea .gnbSubArea .btnGnbClose{position:absolute;top:25px;left:50%;margin-left:543px} .gnbSubArea{display:none;border-top:2px solid #e4dcd3} .gnbSubArea.car{position:absolute;top:72px;left:0;width:100%;padding-top:0;background-color:#e4dcd3} .gnbSubArea{position:absolute;top:71px;left:0;width:100%} .gnbWrap .dep2Wrap{position:relative;width:1120px;margin:0 auto;font-size:0;line-height:0;box-sizing:content-box;padding:12px 0 13px;text-align:center;} .gnbSubArea.car .dep2Wrap{width:1120px;padding:0} .gnbWrap .dep2Wrap>.depSub{display:inline-block;vertical-align:top} .gnbWrap .dep2Wrap.menu_2>.depSub{width:25%;border-bottom:1px solid #efefef;min-height:220px} .gnbWrap .dep2Wrap.menu_2>.depSub:nth-child(5){border-bottom:0;min-height:initial} .gnbWrap .dep2Wrap.menu_2>.depSub:nth-child(6){border-bottom:0;min-height:initial} .gnbWrap .dep2Wrap.menu_2>.depSub:nth-child(7){border-bottom:0;min-height:initial} .gnbWrap .dep2Wrap.menu_2>.depSub:nth-child(8){border-bottom:0;min-height:initial} .gnbWrap .dep2Wrap.menu_4>.depSub:last-child{border-bottom:0;min-height:initial} .gnbWrap .dep2Wrap.menu_4> dd.depSub{margin-right:70px} .gnbWrap .dep2Wrap.menu_4.menu_row {text-align:left;} .gnbWrap .dep2Wrap.menu_4.menu_row > dd.depSub {width:152px; margin-right:30px;} .gnbWrap .dep2Wrap.menu_4.menu_other > dt + dd {margin-left:-355px;} .gnbWrap .dep2Wrap.menu_3>.depSub{width:33.3%} .gnbWrap .dep2Wrap.menu_5>.depSub{width:33.3%} .gnbWrap .dep2Wrap>.depSub .dep2_a{display:block;padding:12px 0 13px;font-size:16px;font-weight:700;line-height:1;color:#666} .gnbWrap .dep2Wrap>.depSub .dep2_a.on,.dep2Wrap>.depSub .dep2_a:focus,.dep2Wrap>.depSub .dep2_a:hover{color:#002c5f} .gnbWrap .dep2Wrap .dep3Wrap>.depSub{display:block;position:relative;margin-top:10px} .gnbWrap .dep2Wrap .dep3Wrap>.depSub:first-child{margin-top:0} .gnbWrap .dep2Wrap .dep3_a{display:block;position:relative;padding-left:4px;font-size:14px;line-height:21px;color:#767676} .gnbWrap .dep2Wrap .dep3_a.on{color:#00aad2} .gnbWrap .dep2Wrap .dep3_a:focus,.dep2Wrap .dep3_a:hover{color:#00aad2} .gnbWrap .dep2Wrap.menu_2 .dep3_a.arr,.dep2Wrap.menu_3 .dep3_a.arr{width:120px} .gnbWrap .dep2Wrap.menu_4 .dep3_a.arr{width:160px} .gnbWrapFull .menu_4 .dep4Wrap{left:180px} .gnbWrap .dep2Wrap .dep3_a.arr:after{display:inline-block;position:absolute;top:7px;right:5px;width:4px;height:7px;background:url("../images/common/gnb_arr2.png") no-repeat;content:''} .gnbWrap .dep2Wrap .dep3_a.on.arr{background-color:#00aad2;color:#fff} .gnbWrap .dep2Wrap .dep3_a.on.arr:after{background-position:0 -7px} .gnbWrap .dep2Wrap .dep4Wrap{display:none;position:absolute;top:-10px;left:140px;z-index:1;width:100%;padding-top:13px;padding-bottom:13px;background-color:#fff} .gnbWrap .dep2Wrap .dep4Wrap>li{padding-top:10px} .gnbWrap .dep2Wrap .dep4Wrap>li:first-child{padding-top:0} .gnbWrap .dep2Wrap .dep4_a{font-size:14px;line-height:1;color:#767676;white-space:nowrap} .gnbWrap .dep2Wrap .dep4_a:focus,.dep2Wrap .dep4_a:hover{color:#00aad2} .gnbWrap .dep2Wrap .dep4_a.on,.dep2Wrap .dep4_a.on:focus,.dep2Wrap .dep4_a.on:hover{color:#00aad2} .gnbWrap .dep2Wrap.menu_4 .dep3Wrap>.depSub:nth-child(1) .dep4Wrap{min-height:150px} .gnbWrap .dep2Wrap.menu_4 .dep3Wrap>.depSub:nth-child(2) .dep4Wrap{min-height:130px} .gnbWrap .dep2Wrap.menu_4 .dep3Wrap>.depSub:nth-child(3) .dep4Wrap{min-height:110px} .outlink{display:block} .outlink:after{overflow:hidden;display:inline-block;width:10px;height:10px;margin-left:10px;background:url("../images/common/ico_gnb_newwin2.png") no-repeat 0 0;content:"";font-size:0;line-height:0} .newWin{display:block} .newWin:after{overflow:hidden;display:inline-block;width:10px;height:10px;margin-left:10px;background:url("../images/common/ico_gnb_newwin2.png") no-repeat 0 0;content:"";font-size:0;line-height:0} .visitCountry_area{display:none} /* find a Car */ .gnbWrap .carListWrap{position:relative} .gnbWrap .carListWrap .tabArea{overflow:hidden;display:block !important} .gnbWrap .carListWrap .tabArea .tab{float:left;width:16.66666666666667%} .gnbWrap .carListWrap .tabArea .tab>.tabBtn{display:block;width:100%;font-size:16px;line-height:63px;color:#666;text-align:center;font-family:HyundaiMedium} .gnbWrap .carListWrap .tabArea .tab>.tabBtn.newWin:after{overflow:hidden;display:inline-block;width:10px;height:10px;margin-left:10px;background:url("../images/common/ico_gnb_newwin2.png") no-repeat 0 -10px;content:"";font-size:0;line-height:0} .gnbWrap .carListWrap .tabArea .tab>.tabBtn.newWin:hover:after{background:url("../images/common/ico_gnb_newwin2.png") no-repeat 0 0} .gnbWrap .carListWrap .tabArea .tab.on>.tabBtn,.gnbWrap .carListWrap .tabArea .tab>.tabBtn:focus,.gnbWrap .carListWrap .tabArea .tab>.tabBtn:hover{color:#002c5f;text-decoration:none} .gnbWrap .carListWrap .tabArea .tab.on .carList{display:block} .gnbWrap .carListWrap .carList{display:none;position:absolute;top:100px;left:0;width:100%} .gnbWrap .carListWrap .carList .item{float:left;margin-right:80px;margin-bottom:40px} .gnbWrap .carListWrap .carList .item img{width:160px;height:86px} .gnbWrap .carListWrap .carList .item:nth-child(5n){margin-right:0} .gnbWrap .carListWrap .carList .item .carTit{display:block;margin-top:15px;font-size:14px;line-height:1;text-align:center} .gnbWrap .gnbRight{float:right;padding-top:22px} .gnbWrap .gnbRight .item{float:left;margin-left:19px} .gnbWrap .gnbRight .item .btnGnbLanguage{display:inline-block;vertical-align:middle;width:17px;height:17px;background:url("../images/common/btn_topmenu_language.png") no-repeat;background-size:cover} .gnbWrap .gnbRight .item .btnGnbSearch{overflow:hidden;display:inline-block;vertical-align:middle;width:17px;height:17px;background:url("../images/common/btn_topmenu_search.png") no-repeat;background-size:cover;text-indent:-9999px} .gnbWrap .gnbRight .item .btnGnbChannelH{display:inline-block;width:20px;height:17px;background:url("../images/common/btn_topmenu_Channelh.png") no-repeat;background-size:cover;vertical-align:middle} /* gnbLanguageBtn */ .gnbWrap .gnbRight .item.gnbLanguageBtn{display:inline-block;position:relative;vertical-align:middle} .gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage{display:block;position:relative;width:100%;padding:0 16px 0 0;font-size:17px;font-family:"HyundaiKRMedium";color:#666;text-align:left;text-decoration:none} .gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage:before, .gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage:after{display:block;position:absolute;top:50%;content:''} .gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage:after{top:14px;right:0;width:10px;height:10px;border-width:2px;border-top:3px solid #666;border-right:3px solid #666;transition:0.3s ease;transform:translate(0, -50%) rotate(135deg) scale(0.5)} .gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage:hover,.gnbWrap .gnbRight .item.gnbLanguageBtn .btnLanguage:hover:after{color:#002c5f;border-color:#002c5f} .gnbWrap .gnbRight .item.gnbLanguageBtn.on .btnLanguage{color:#002c5f} .gnbWrap .gnbRight .item.gnbLanguageBtn.on .btnLanguage:after{border-color:#002c5f;transform:translate(0, -30%) rotate(-45deg) scale(0.5)} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer{display:none;position:absolute;right:0;background-color:#f7f3f2;width:105px;padding:25px 0 16px;transition:transform 0.3s, opacity 1s;opacity:0} .gnbWrap .gnbRight .item.gnbLanguageBtn.on .languageLayer{display:block;transform:translate(0);transition:transform 0.5s;opacity:1} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li{margin-top:16px;font-size:14px;line-height:17px;font-family:"HyundaiKRRegular";color:#666;text-align:center} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li:first-child{margin-top:8px} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li a{color:#666} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li a:hover, .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li a:focus{font-family:"HyundaiKRMedium";color:#000} .gnbWrap .gnbRight .item.gnbLanguageBtn .languageLayer li.on a{font-family:"HyundaiKRMedium";color:#000} .gnbArea .gnbLanguage.mobileOnly{display:none} .gnbUtilWrap{position:relative;height:0;background:#f2f2f2;transition:all .3s} .gnbUtilWrap.search {height:231px} .gnbUtilWrap.language{height:92px} .gnbSearchArea{display:none;position:absolute;top:71px;right:0;left:0;width:1120px;margin:0 auto;padding:20px 0;text-align:center} .gnbSearchArea .gnbSearch{position:relative;width:572px;margin:0 auto;background:#fff} .gnbSearchArea .gnbSearch .searchInput{position:relative;padding-right:55px;font-weight:400} .gnbSearchArea .gnbSearch .searchInput .searchTitle {display:none;} .gnbSearchArea .gnbSearch .searchInput input {-webkit-appearance: none;-webkit-border-radius: 0;border-radius:0;appearance:none;-webkit-appearance:none} .gnbSearchArea .gnbSearch .searchInput .inputText{width:100%;height:50px;padding-left:20px;border:0;font-size:20px;line-height:50px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .gnbSearchArea .gnbSearch .searchInput .inputText::-ms-clear{display:none} .gnbSearchArea .gnbSearch .btnSearch{overflow:hidden;display:block;position:absolute;top:0;right:0;width:55px;height:50px;background:url("../images/common/btn_search.png") no-repeat center center;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-indent:-99999px} .gnbSearchArea .gnbSearch .btnReset{overflow:hidden;display:none;position:absolute;top:0;right:60px;width:18px;height:50px;background:url("../images/common/btn_reset.png") no-repeat center center;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-indent:-99999px} .gnbSearchArea .gnbSearch .btnReset.on{display:block} .gnbSearchArea .gnbSearch .gnbautoSearchList{display:none;position:absolute;top:50px;left:0;width:100%;background:#fff;z-index:1;} .gnbSearchArea .gnbSearch .autoSearch{width:532px;margin:0 auto;padding:12px 0;border-top:1px solid #063162;background:#fff;text-align:left} .gnbSearchArea .gnbSearch .gnbautoSearchList .list .link{display:block;font-size:16px;line-height:50px;text-decoration:none} .gnbSearchArea .gnbSearch .gnbautoSearchList .list .link .keyword{background:0 0;color:#00a1c7;font-family:HyundaiMedium} .gnbSearchArea .btnGnbClose{position:absolute;top:20px;right:0} /* Go to your country_detail */ .gnbLanguageArea{display:none;position:absolute;top:71px;right:0;left:0;width:1120px;margin:0 auto;padding:25px 0;text-align:center} .gnbLanguageArea .selectLanguage{display:table;width:100%;margin:0 20px;font-size:0;text-align:center} .gnbLanguageArea .selectLanguage select{display:inline-block;width:265px;height:42px;margin:0 20px;padding:0 15px;font-size:16px;line-height:42px;box-shadow:none} .gnbLanguageArea .btnGnbClose{position:absolute;top:20px;right:0} .gnbWrapFull .temp{text-align:center} .dimmed {display:none;position:fixed;top:35px;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:15;} .dimmed.open {display:block;} .schTextList .list .thumb {display:inline-block;overflow:hidden;vertical-align:top;} .schTextList .list .thumb img {width:240px;height:126px;} .schTextList .list .listCon {display:inline-block;width:800px;} .schTextList .list .listCon .conSubject {display:block;margin-bottom:5px;font-size:14px;color:#002c5f;line-height:initial;font-family:'HyundaiMedium';} .schTextList .list.noImg .listCon {width:100%;} .schTextList .list.noImg .listCon .subTit3 {padding:0;} .schTextList .list.noImg .listCon .subTit3, .schTextList .list.noImg .listCon .conArea {width:1072px;} .schTextList .linkArea {margin-top:20px;} .schTextList .linkArea li {display:inline-block;margin-right:20px;list-style-type:none;} .schTextList .linkArea li a {display:block;font-size:17px;color:#002c5f;text-decoration:underline;} .schTextList .list .conSubject {display:block;margin-bottom:5px;font-size:14px;color:#002c5f;line-height:initial;font-family:'HyundaiMedium';} .schTextList.type-noSubject .subTit3 {padding:15px 0 0 0;} .schTextList.type-noSubject .linkArea {margin-top:7px;} .gnbTopic {margin:29px auto 0;padding:0 0 0 20px;width:572px;text-align:left} .gnbTopic .topicTit {display:block;margin-bottom:10px;font-size:20px;line-height:32px;color:#000;font-family:HyundaiMedium;letter-spacing:-0.02em;} .gnbTopic .topicList {display:block;vertical-align:top;} .gnbTopic .topicList button {display:inline-block;margin:0 25px 0 0;line-height:initial;font-size:17px;color:#666;text-decoration:none;} .gnbTopic .topicList button:hover {color:#00aad2} .gnbTopic .topicList button:last-child {margin-right:0;} #searchTabWrap.tabWrap .tabArea .tab .link {font-size:17px} .schTextList[data-item=brand] {padding-top:65px;border-top:1px solid #ccc} .schTextList[data-item=ioniq] {padding-top:65px;border-top:1px solid #ccc} .schTextList[data-item=lifestyle] {padding-top:65px;border-top:1px solid #ccc} .schTextList[data-item=vehicle] {padding-top:65px;border-top:1px solid #ccc} .schTextList[data-item=company] {padding-top:65px;border-top:1px solid #ccc} .schTextList .list .img {display:table-cell;overflow:hidden;width:280px;vertical-align:top;} } /* mobile size */ @media screen and (min-width:0) and (max-width:740px){ img{width:100%} .imgAuto img{width:auto} .onW{display:none !important}/*only Web*/ .tacl{text-align:left !important} .topBanner .gnbWrapFull{position:relative} .gnbWrapFull{position:fixed;top:0;left:0;z-index:999;width:100%} .gnbWrapFull.ab{position:absolute} .gnbWrapFull a:focus{text-decoration:none} .gnbWrap .topBar{display:flex;justify-content:space-between;align-items:center;height:60px;padding:0 19px 0 14px;background:#f6f3f2} /* GNB영역 흰색배경 */ .gnbWrap .topBar .logo .topLogo{overflow:hidden;display:block} .gnbWrap .topBar .logo .topLogo img{overflow:hidden;display:block;width:155px} .gnbWrap .topBar.back .logo{display:none} .gnbWrap .topBar.back .btnBack{display:block} .gnbWrap .topBar .pageTitle{position:absolute;right:0;left:0;width:100%;padding:0 80px;text-align:center} .gnbWrap .topBar .pageTitle .tit{overflow:hidden;display:block;width:100%;font-size:16px;line-height:55px;text-overflow:ellipsis;white-space:nowrap;font-family:HyundaiMedium;text-align:center} .gnbWrap .topBar .pageTitle .tit.arr{padding-right:10px} .gnbWrap .topBar .pageTitle .tit.arr:after{display:block;position:absolute;top:50%;right:0;width:0;height:0;margin-top:-2px;content:'';border-style:solid;border-width:5px 3.5px 0 3.5px;border-color:#000 transparent transparent transparent} .gnbWrap .topBar .pageTitle .tit.arr.on:after{border-width:0 3.5px 5px 3.5px;border-color:transparent transparent #000 transparent} .gnbWrap .topBar .pageTitle .subMenu{overflow-y:auto;display:none;position:absolute;top:55px;left:0;width:100%;border-top:1px solid #e8e8e8;box-shadow:0 1px 3px rgba(216,209,200,.7)} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSub_a{display:block;position:relative;height:60px;padding:0 20px;border-bottom:1px solid #e8e8e8;background:#fff;font-size:16px;line-height:60px;text-align:left} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSub_a.arr:after{display:block;position:absolute;top:50%;right:20px;width:23px;height:23px;margin-top:-11px;background:url("../images/common/gnb_menu_mo.png") no-repeat;-webkit-background-size:23px auto;background-size:23px auto;content:''} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSub_a.on{color:#00aad2} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSub_a.arr.on:after{background-position:0 -23px} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSub_a.arr.on:after{background-position:0 -23px} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSubWrap .depSub .depSub_a{display:block;position:relative;height:60px;padding:0 16px;border-bottom:1px solid #e8e8e8;background:#f5f5f5;font-size:16px;line-height:60px} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSubWrap .depSub .depSub_a.on{color:#00aad2} .gnbWrap .topBar .pageTitle .depSubWrap .depSub .depSubWrap .depSub .depSub_a.arr:after{display:none} .gnbWrap .topBar .rightArea{display:flex} .gnbWrap .topBar .rightArea .gnbSearchMobile{margin-left:20px} .gnbWrap .rightArea .btnGnbLanguage{vertical-align:middle;width:17px;height:17px;background:url("../images/common/btn_topmenu_language.png") no-repeat;background-size:cover} .gnbWrap .rightArea .btnGnbChannelH{margin-left:20px} .gnbWrap .rightArea .btnGnbChannelH a{display:inline-block;width:20px;height:17px;background:url("../images/common/btn_topmenu_Channelh.png") no-repeat;background-size:cover} .gnbWrap .topBar .rightArea .btnGnbSearch{overflow:hidden;display:block;width:17px;height:17px;background:url("../images/common/btn_topmenu_search.png") no-repeat;background-size:cover;text-indent:-9999px} .gnbSearchArea {display:none;position:absolute;top:55px;left:0;width:100%;height:100vh;text-align:center;background-color:#f2f2f2;} .gnbSearchArea .gnbSearch {position:relative;width:100%;margin:0 auto} .gnbSearchArea .gnbSearch .searchInput {position:relative;padding:36px 15px 40px;background:#00aad2;font-weight:400;} .gnbSearchArea .gnbSearch .searchInput .searchTitle {display:block;width:100%;line-height:1.5;text-align:left;font-size:28px;color:#fff;font-family:'HyundaiMedium';box-sizing:border-box;} .gnbSearchArea .gnbSearch .searchInput .inputText {width:100%;height:45px;padding-right:55px;border:0;background:#00aad2;font-size:16px;line-height:normal;color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid #fff;} .gnbSearchArea .gnbSearch .searchInput input.inputText::-webkit-input-placeholder {color:#a1ddee} .gnbSearchArea .gnbSearch .searchInput input.inputText::-moz-placeholder {color:#a1ddee} .gnbSearchArea .gnbSearch .searchInput input.inputText:-ms-input-placeholder {color:#a1ddee} .gnbSearchArea .gnbSearch .searchInput input.inputText:-moz-placeholder {color:#a1ddee} .gnbSearchArea .gnbSearch .searchInput input {-webkit-appearance: none;-webkit-border-radius: 0;border-radius:0;appearance:none;-webkit-appearance:none} .gnbSearchArea .gnbSearch .btnSearch {overflow:hidden;display:block;position:absolute;top:70px;right:10px;width:45px;height:60px;background:url("../images/common/btn_search_mo.png") no-repeat center center;-webkit-background-size:15px auto;background-size:15px auto;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-indent:-99999px} .gnbSearchArea .gnbSearch .btnReset {overflow:hidden;display:none !important;position:absolute;top:0;right:55px;width:18px;height:50px;background:url("../images/common/btn_reset.png") no-repeat center center;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-indent:-99999px} .gnbSearchArea .gnbSearch .btnReset.on {display:block} .gnbSearchArea .gnbSearch .gnbautoSearchList {display:none;position:absolute;top:158px;left:0;width:100%;background:#fff;z-index:1;} .gnbSearchArea .gnbSearch .autoSearch {padding:0 15px;background:#fff;text-align:left} .gnbSearchArea .gnbSearch .gnbautoSearchList .list {border-top:1px solid #f1f1f1} .gnbSearchArea .gnbSearch .gnbautoSearchList .list .link {display:block;font-size:14px;line-height:50px;text-decoration:none} .gnbSearchArea .gnbSearch .gnbautoSearchList .list .link .keyword {background:0 0;color:#00a1c7;font-family:HyundaiMedium} .gnbSearchArea .btnGnbClose {height:18px;width:18px;display:block;position:absolute;top:20px;right:15px;} .gnbSearchArea [class*="icon_close_"][class*="bl"]:before, [class*="icon_close_"][class*="bl"]:after {background-color:#fff;} .gnbSearchArea .btnGnbClose img { display:none;} /* Mobile Menu Button */ .gnbWrap .topBar .rightArea .btnMobileMenu{overflow:hidden;display:block;position:relative;width:17px;height:17px;margin-left:22px;text-indent:-9999px}/*scale(0.5) is for 1.5px line*/ .gnbWrap .topBar .rightArea .btnMobileMenu:before, .gnbWrap .topBar .rightArea .btnMobileMenu:after{display:block;position:absolute;width:200%;content:'';transform:translate(-25%, -25%) scale(0.5);transition:transform 0.3s ease} .gnbWrap .topBar .rightArea .btnMobileMenu:before{top:0;height:200%;box-sizing:border-box;border-top:3px solid #666;border-bottom:3px solid #666} .gnbWrap .topBar .rightArea .btnMobileMenu:after{top:49%;height:3px;background-color:#666} .gnbWrap .topBar .rightArea .btnMobileMenu:active{outline:none} .gnbWrap .topBar .rightArea .btnMobileMenu.on{z-index:999;width:15px;height:15px;margin-top:0;border:none} .gnbWrap .topBar .rightArea .btnMobileMenu.on:before, .gnbWrap .topBar .rightArea .btnMobileMenu.on:after{top:7px;left:-3px;width:263%;background-color:#666} .gnbWrap .topBar .rightArea .btnMobileMenu.on:before{height:3px;border:none;transform:translate(-23%, -50%) rotate(45deg) scale(0.5)} .gnbWrap .topBar .rightArea .btnMobileMenu.on:after{height:3px;transform:translate(-23%, -50%) rotate(-45deg) scale(0.5)} .gnbWrap .scrollBox{display:none;position:fixed;top:0;right:-100%;z-index:222;;width:calc(100% - 58px);height:100%;background-color:#f6f3f2;transition:right .3s} .gnbWrap .gnbDim{position:fixed;top:0;left:0; width:100%;height:100%;background:rgba(0,0,0,.7)} .gnbWrap .gnbArea .carListWrap{padding-bottom:119px} .gnbWrap .gnbArea .tab.on .tabBtn{color:#00aad2} .gnbWrap .gnbArea .tab .tabBtn{display:block;position:relative;width:100%;height:51px;padding:0 16px;border-bottom:1px solid #fff;font-size:16px;line-height:51px;text-align:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-decoration:none} .gnbWrap .gnbArea .tab .tabBtn:active,.gnbWrap .gnbArea .tab .tabBtn:focus,.gnbWrap .gnbArea .tab .tabBtn:hover{text-decoration:none} .gnbWrap .gnbArea .tab .tabBtn.on{color:#00aad2} .gnbWrap .gnbArea .tab .tabBtn.on:after{border-width:0 3.5px 5px 3.5px;border-color:transparent transparent #000 transparent} .gnbWrap .gnbArea .tab .tabBtn.newWin:after{overflow:hidden;display:block;position:absolute;top:26px;right:20px;width:10px;height:10px;border:0 !important;background:url("../images/common/ico_gnb_newwin2_mo.png") no-repeat top left;background-size:10px 10px;content:"";font-size:0;line-height:0} .gnbWrap .gnbArea .tab.all .tabBtn:after{display:none} .gnbWrap .gnbArea .tab .carList{overflow:hidden;display:none;padding:20px 0 0 0;border-bottom:1px solid #fff} .gnbWrap .gnbArea .tab.on .carList{display:block} .gnbWrap .gnbArea .tab .carList .item{display:inline-block;vertical-align:top;width:49%;margin-bottom:30px;padding:0 15px} .gnbWrap .gnbArea .tab .carList .item .carTit{display:block;margin-top:15px;font-size:12px;text-align:center;font-family:HyundaiMedium} .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a{display:block;position:relative;height:60px;padding:0 16px;font-size:16px;line-height:60px;color:#666;text-decoration:none;font-family:HyundaiMedium} .gnbWrap .gnbArea .depSubWrap{display:none} .gnbWrap .gnbArea .depSub .depSub_a{display:block;padding:18px 0 17px 22px;font-family:HyundaiMedium;font-size:16px;color:#666;text-decoration:none} .gnbWrap .gnbArea dt.depSub{margin-bottom:8px;border-bottom:1px solid #e4dcd3} .gnbWrap .gnbArea dt.depSub .btnBack{ padding-left:47px;color:#002c5f;text-align:left} .gnbWrap .gnbArea dt.depSub .btnBack:after{left:18px} .gnbWrap .gnbArea .dep3Wrap{padding:0 0;border-bottom:1px solid #f2eee9;background-color:#e5e5e5} .gnbWrap .gnbArea .dep3Wrap .depSub .depSub_a{display:block;position:relative;height:auto;padding:15px 16px;border-bottom:1px solid #f2eee9;font-size:14px;line-height:1.5;color:#666} .gnbWrap .gnbArea .dep3Wrap .depSub .depSub_a.on{color:#00aad2} .gnbWrap .gnbArea .dep3Wrap .depSub .depSub_a:after{display:none} .gnbWrap .gnbArea .dep3Wrap .depSub .depSub_a.newWin:after{overflow:hidden;display:block;position:absolute;top:15px;right:20px;width:10px;height:10px;background:url("../images/common/ico_gnb_newwin_mo.png") no-repeat top left;background-size:10px 10px;content:"";font-size:0;line-height:0} .gnbWrap .gnbArea .dep4Wrap .depSub .depSub_a{display:block;position:relative;height:auto;padding:0 16px;font-size:14px;line-height:1.5} .gnbWrap .gnbArea .btnGnbClose{display:none} .gnbWrap .gnbArea{position:relative;height:100%;padding-top:58px;background-color:#f6f3f2} .gnbWrap .gnbArea .dep1Wrap{border-top:1px solid #e8e8e8} .gnbWrap .gnbArea .dep1Wrap .dep1{width:100%;border-bottom:1px solid #e8e8e8} .gnbWrap .gnbArea .depSub>.depSub_a.arr:after{display:block;position:absolute;top:50%;right:12px;width:23px;height:23px;margin-top:-11px;background:url("../images/common/gnb_menu_mo.png") no-repeat;-webkit-background-size:23px auto;background-size:23px auto;content:''} .gnbWrap .gnbArea .depSub>.depSub_a.arr.on:after{display:block;content:'';background-position:0 -23px} .gnbSubArea{overflow-y:auto;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;box-sizing:border-box;background-color:#f6f3f2;transform:translate(100%, 0);transition:0.4s ease} .gnbWrap .dep1Wrap .on+.gnbSubArea{transform:none} .gnbWrap .gnbArea .depSub .dep3_a.arr:after{display:block;position:absolute;top:50%;right:20px;width:0;height:0;margin-top:-2px;content:'';border-style:solid;border-width:5px 3.5px 0 3.5px;border-color:#727272 transparent transparent transparent} .gnbWrap .gnbArea .depSub .dep3_a.arr.on:after{border-width:0 3.5px 5px 3.5px;border-color:transparent transparent #727272 transparent} .gnbWrap .gnbArea .depSub .dep2_a.on .dep3_a.arr:after{border-width:0 3.5px 5px 3.5px;border-color:transparent transparent #727272 transparent} .dep2_a.on .depSubWrap .depSub .depSubWrap{display:block} .gnbWrap .gnbArea .dep2_a.on .depSubWrap{display:block} .gnbWrap .gnbArea .dep2Wrap{overflow-y:scroll;height:100%} .gnbArea .dep1Wrap .dep1:nth-child(4) .dep2Wrap li:nth-child(4)>.depSubWrap li:nth-child(2)>.dep4Wrap a{padding:10px 16px;line-height:18px} .gnbWrap .gnbArea .dep3Wrap .depSub .dep4Wrap{padding:0 0 10px 0;border-bottom:1px solid #f7f7f7} .gnbWrap .gnbArea .dep3Wrap .depSub .dep4Wrap li>a{padding-left:30px} .gnbWrap .gnbArea .dep3Wrap .depSub .dep4Wrap .depSub_a{padding:12px 0 10px 30px;border-bottom:0;line-height:1.3} /* gnbLanguageBtn */ .gnbWrap .gnbArea .gnbLanguageBtn{display:inline-block;position:absolute;top:0;width:100%;padding:19px 15px 15px;vertical-align:middle} .gnbWrap .gnbArea .gnbLanguageBtn .btnLanguage{display:block;position:relative;padding:0 20px 0 0;font-size:17px;font-family:"HyundaiKRMedium";text-align:left;text-decoration:none;color:#666;z-index:1} .gnbWrap .gnbArea .gnbLanguageBtn .btnLanguage:before, .gnbWrap .gnbArea .gnbLanguageBtn .btnLanguage:after{display:block;position:absolute;top:50%;content:''} .gnbWrap .gnbArea .gnbLanguageBtn .btnLanguage:after{top:9px;right:2px;width:12px;height:12px;border-width:2px;border-top:3px solid #666;border-right:3px solid #666;transition:0.3s ease;transform:translate(0, -50%) rotate(135deg) scale(0.5)} .gnbWrap .gnbArea .gnbLanguageBtn .languageLayer{display:none;position:absolute;top:58px;left:0;width:100%;padding:8px 15px 8px;background-color:#fff;transition:transform 0.3s, opacity 1s;opacity:0;z-index:100} .gnbWrap .gnbArea .gnbLanguageBtn .languageLayer li:first-child{margin-top:0} .gnbWrap .gnbArea .gnbLanguageBtn .languageLayer li{margin-top:11px;font-size:14px;line-height:18px;font-family:"HyundaiKRRegular";text-align:left} .gnbWrap .gnbArea .gnbLanguageBtn .languageLayer li a{display:block;padding:5px 0;color:#666;text-decoration:none} .gnbWrap .gnbArea .gnbLanguageBtn .languageLayer li.on a{font-family:"HyundaiKRMedium";color:#000} .gnbWrap .gnbArea .gnbLanguageBtn.on .btnLanguage{color:#002c5f} .gnbWrap .gnbArea .gnbLanguageBtn.on .btnLanguage:after{border-color:#002c5f;transform:translate(0, -30%) rotate(-45deg) scale(0.5)} .gnbWrap .gnbArea .gnbLanguageBtn.on .languageLayer{display:block;transform:translate(0);transition:transform 0.5s;opacity:1} .gnbWrap .gnbArea .dep2Wrap .depSub:last-child {display:none} .gnbWrap .gnbArea .dep2Wrap.menu_4 .depSub:last-child {display:block;} .gnbContactUs {margin-top:30px;text-align:center;} .gnbContactUs a {display:inline-block;position:relative;min-width:165px;padding:13px 28px 12px 54px;background:#666;font-size:16px;color:#fff;box-sizing:border-box;} .gnbContactUs a i {display:block;position:absolute;top:15px;left:25px;overflow: hidden;transform: scale(var(--ggs,1)); width:20px; height:15px; border:2px solid; content:''; box-sizing:border-box;} .gnbContactUs a i:before, .gnbContactUs a i:after {position:absolute; top:-5px; width:2px; height:17px; background:#fff; content:'';} .gnbContactUs a i:before {left:0; transform: rotate(-55deg);} .gnbContactUs a i:after {right:0; transform: rotate(55deg);} .mobile{overflow:hidden;height:100%} .yourLocationGnb{position:relative;height:100%} .yourLocationGnb .gnbWrap .scrollBox{height:100%} .yourLocationGnb .gnbWrap .scrollBox:after{display:inline-block;width:1px;height:100%;margin-left:49.8%;border-left:1px solid #e8e8e8;content:''} .yourLocationGnb .gnbWrap .gnbArea .dep1Wrap .dep1 .dep1_a{width:50%} .visitCountry_area{display:none;position:fixed;bottom:0;left:0;z-index:130;width:100%;padding-bottom:15px;border-top:1px solid #ccc;background:url("../images/common/bg_m_visit_country.jpg") no-repeat;background-size:100% auto;text-align:center;transition:bottom .5s} .vc_cont_box{padding:25px 0 0 0} .vc_cont>strong{font-size:19px} .position{margin:15px 0 17px 0} .position>a{display:inline-block;vertical-align:middle;position:relative} .position>a.btn_mcnt{color:#666} .position .pst_icon{display:inline-block;vertical-align:middle;width:15px;height:19px;background:url("../../etcn/images/common/mo_ico_position.png") 0 0 no-repeat;background-size:100%;font-size:0;line-height:0} .position .pst_txt{display:inline-block;vertical-align:middle;margin-left:8px;font-size:14px;line-height:1;color:#000} .btn_position_area{width:100%;padding:0 15px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} .btn_local:after{display:inline-block;vertical-align:middle;width:5px;height:8px;margin-left:11px;background:url("../images/common/gnb_visi_arr.png") no-repeat;background-size:cover;content:''} .btn_mcnt{margin-left:20px} .btn_mcnt:after{display:inline-block;vertical-align:middle;width:5px;height:8px;margin-left:11px;background:url("../images/common/gnb_visi_arr2.png") no-repeat;background-size:cover;content:''} .gnbWrap .gnbRight{display:none} .gnbWrapFull .temp{width:100%;background:#fff;text-align:center} .gnbWrapFull .temp img{width:auto;height:55px} .schTextList .list .thumb {display:block;overflow:hidden;margin:0 auto;padding:0 15px;box-sizing:border-box;vertical-align:top;} .schTextList .list .thumb img {width:100%;height:auto;} .schTextList .list .listCon {display:inline-block;width:100%;margin-top:15px;padding:0 15px;box-sizing: border-box;} .schTextList .list .listCon .conSubject {display:block;margin-bottom:8px;font-size:12px;color:#002c5f;line-height:initial;font-family:'HyundaiMedium';} .schTextList .list.noImg .listCon {padding:0 15px;margin-top:15px;width:100%;box-sizing:border-box;} .schTextList .list.noImg .listCon .subTit3 {padding:0;} .schTextList .list.noImg .listCon .subTit3, .schTextList .list.noImg .listCon .conArea {width:100%;} .schTextList .linkArea {margin-top:20px;} .schTextList .linkArea li {display:inline-block;margin-right:20px;list-style-type:none;} .schTextList .linkArea li a {display:block;font-size:17px;color:#002c5f;text-decoration:underline;} .schTextList .list .conSubject {display:block;margin:19px 0 8px;font-size:12px;color:#002c5f;line-height:initial;font-family:'HyundaiMedium';} .schTextList .list .img + .subTit3 {margin-top:19px;} #search-result .schTextList .list.noImg .listCon .conArea {font-size:13px;} .schTextList.type-noSubject .list .listCon {margin-top:5px;} .schTextList.type-noSubject .linkArea {margin-top:0;} .schTextList.type-noSubject .subTit3 {padding:4px 0 0 0;} .schTextList .linkArea {margin-top:5px;} .schTextList .linkArea li {margin-bottom:5px;} .schTextList .linkArea li a {font-size:12px;} .gnbTopic {margin:39px auto 0;padding:0 15px;width:100%;border-top:0;} .gnbTopic .topicTit {display:inline-block;margin-right:0;width:100%;height:unset;font-size:21px;color:#000;text-align:left;font-family:HyundaiMedium;letter-spacing:-0.02em} .gnbTopic .topicList {display:inline-block;margin-top:20px;width:100%;text-align:left;vertical-align:top;} .gnbTopic .topicList button {display:inline-block;margin:0 22px 15px 0;line-height:initial;font-size:16px;color:#666;text-decoration:none;} #searchTabWrap.tabWrap .tabArea .tab .link {font-size:12px} .schTextList[data-item=brand] {padding-top:40px;border-top:1px solid #ccc} .schTextList[data-item=ioniq] {padding-top:40px;border-top:1px solid #ccc} .schTextList[data-item=lifestyle] {padding-top:40px;border-top:1px solid #ccc} .schTextList[data-item=vehicle] {padding-top:40px;border-top:1px solid #ccc} .schTextList[data-item=company] {padding-top:40px;border-top:1px solid #ccc} } /* ------------------------------------------------------------------ footer * ------------------------------------------------------------------ */ @media print,screen and (min-width:741px) and (max-width:20000px){ .footerWrap{background:#000;min-width:1240px;color:#cfc8c2} .footerArea{position:relative;width:1120px;margin:0 auto;padding:74px 0 82px;letter-spacing:.012em} .footerArea .logo{margin-bottom:75px} .footerArea .footerMenu{overflow:hidden} .footerArea .footerMenu .dep1Wrap{display:flex;justify-content:space-between} .footerArea .footerMenu .dep1Wrap > li > div{margin-bottom:18px;font-weight:normal;font-size:1.17em;line-height:1;font-family:HyundaiMedium;color:#fff} .footerArea .footerMenu .dep1Wrap > li > div .btnNextShow{display:none} .footerArea .footerMenu .dep2Wrap > *, .footerArea .footerMenu .dep3Wrap > *{margin-top:6px} .footerArea .footerMenu .dep2Wrap > * .dep2_a{display:block;width:100%;text-align:left;text-decoration:none} .footerArea .footerMenu .dep2Wrap > * .dep2_a[target="_blank"]:after {content:"";display:inline-block;width:10px;height:10px;margin:-1px 0 0 8px;background-image:url("../images/common/ico_link.png");vertical-align:middle;} .footerArea .footerMenu .dep2Wrap > li .dep2_a + .boxToggleShow{display:none} .footerArea .footerMenu .dep2_a[class*="icon_arr_bottom"]:after{top:40%;right:0;width:10px;height:10px;border-width:2px; transition:0.3s ease} .footerArea .footerMenu .dep2Wrap > li.on .dep2_a[class*="icon_arr_bottom"]:after{transform:translate(0, -30%) rotate(-45deg) scale(0.5)} .footerArea .footerMenu a, .footerArea .footerMenu button{font-size:14px;color:#cfc8c2} .footerArea .footerMenu a:hover, .footerArea .footerMenu button:hover{color:#fff;text-decoration:none} .footerArea .footerMenu .dep2Wrap .row{display:flex} .footerWrap .social .dep2Wrap .row .col + .col{margin-left:38px} .footerArea .footerMenu .titLink{font-size:14px;margin-bottom:2px} .footerArea .footerMenu .boxLink{display:flex;padding-bottom:10px} .footerArea .footerMenu .boxLink dd + dd{margin-left:17px} .footerArea .footerMenu .boxLink a{line-height:1;opacity:0.76} .footerArea .footerMenu .boxLink a:hover{text-decoration:none;opacity:1} .footerArea .footerMenu .boxLink a img{width:21px} .footerArea .footerMenu .boxLink a{display:inline-block;width:21px;height:21px;background-size:21px 21px} .footerArea .copyright{margin-top:75px;font-size:14px;line-height:1} .footerArea .goto{overflow:hidden;position:absolute;top:96px;right:4px;font-size:14px;line-height:18px;color:#999} .footerArea .goto a{padding-left:5px;font-size:14px;color:#999;text-decoration:underline} .footerArea .goto img.flag{float:right;margin-left:20px;box-shadow:none !important} /* Country choice quick bar */ .wrapCont{position:relative;width:1120px;margin:0 auto} .quickArea{bottom:-65px;padding:14px 0} .quickArea .wrapCont{display:flex;justify-content:space-between;align-items:center;padding:0 60px;box-sizing:content-box} .quickArea button[class*="icon_close_01"]{position:absolute;right:24px;width:16px;height:16px} } /* mobile size */ @media screen and (min-width:0) and (max-width:740px){ .footerArea{position:relative;padding:45px 15px 35px;background:#000;color:#cfc8c2;transition:0.3s ease} .quickArea-on .footerArea{padding-bottom:158px} .footerArea .logo{position:absolute;bottom:66px;left:0;width:100%;text-align:center} .quickArea-on .footerArea .logo{bottom:194px} .footerArea .logo img{width:59px} .footerArea .footerMenu{overflow:hidden;padding-bottom:120px} .footerArea .footerMenu a, .footerArea .footerMenu button{font-size:14px;color:#cfc8c2} .footerArea .footerMenu .dep1Wrap > li + li{margin-top:36px} .footerArea .footerMenu .dep1Wrap > li > div{display:flex;position:relative;justify-content:space-between;align-items:center;font-size:16px;color:#fff;line-height:1;font-family:HyundaiMedium} .footerArea .footerMenu .dep1Wrap > li > div + .boxToggleShow{display:none} .footerArea .footerMenu .dep1Wrap > li > div .btnNextShow[class*=icon_arr_bottom]{display:block;position:absolute;top:0;left:0; width:100%;height:15px;padding:10px 0;margin:-10px -10px -6px -6px;box-sizing:content-box;outline:none} .footerArea .footerMenu .dep1Wrap > li > div .btnNextShow[class*=icon_arr_bottom]:after{width:28px;height:28px;transform:translate(30%, -68%) rotate(135deg) scale(0.5) skew(2deg, 2deg);transition:0.3s} .footerArea .footerMenu .dep1Wrap > li > div.on .btnNextShow[class*=icon_arr_bottom]:after{width:28px;height:28px;transform:translate(30%, -32%) rotate(-45deg) scale(0.5) skew(2deg, 2deg);transition:0.3s} .footerArea .footerMenu .dep2Wrap > *{flex:1;margin-top:34px;letter-spacing:0.04em} .footerArea .footerMenu .dep2Wrap > * a{display:block} .footerArea .footerMenu .dep2Wrap > * .dep2_a[target="_blank"]:after {content:"";display:inline-block;width:10px;height:10px;margin:-1px 0 0 8px;background-image:url("../images/common/ico_link.png");vertical-align:middle;} .footerArea .footerMenu .dep2_a{outline:none;text-decoration:none} .footerArea .footerMenu .dep2_a[class*="icon_arr_bottom"]:after{display:none} .footerArea .footerMenu .dep3Wrap > *{padding-left:25px;margin-top:34px} .footerArea .footerMenu .dep2Wrap .row{display:flex;margin-top:50px} .footerWrap .social .dep2Wrap .row .col:first-child:nth-last-of-type(2){width:50%} .footerWrap .social .dep2Wrap .row .col:first-child:nth-last-of-type(2) ~ .col{width:50%} .footerArea .footerMenu .titLink{font-size:14px;margin-bottom:15px} .footerArea .footerMenu .boxLink{display:flex;padding-bottom:10px} .footerArea .footerMenu .boxLink dd + dd{margin-left:35px} .footerArea .footerMenu .boxLink a{line-height:1;opacity:0.7} .footerArea .footerMenu .boxLink a:hover{text-decoration:none;opacity:1} .footerArea .footerMenu .boxLink a img{width:40px} .footerArea .footerMenu .boxLink a{display:inline-block;width:40px;height:40px;background-size:40px 40px} .footerArea .copyright{font-size:14px;text-align:center;letter-spacing:0.04em} .footerArea .goto{position:absolute;top:35px;left:20px;font-size:14px;line-height:18px;color:#999} .footerArea .goto a{padding-left:5px;font-size:14px;color:#999;text-decoration:underline} .footerArea .goto img.flag{vertical-align:top;width:auto;margin-right:15px;box-shadow:none !important} .footerDimBg{display:none;position:fixed;top:0;left:0;z-index:110;width:100%;height:100%;background:#000;opacity:.8} .quickArea{bottom:-193px;padding:20px 14px} .quickArea .txtGuide{padding-right:55px} .quickArea .boxFlex{display:block;margin-top:20px} .quickArea [class*="btn_"][class*="_small"]{display:inline-block} [class*="btn_"][class*="_small"]:nth-child(n + 2){margin-left:0;margin-top:10px} .quickArea button[class*="icon_close_01"]{position:absolute;top:22px;right:11px;width:16px;height:16px} .footerWrap .temp img{width:100%} } @charset "utf-8"; /* * renewal.main.css */ /* version : 230217 */ /* s: 220830 modify */ /* common */ .black{color:#000 !important} .br-pc {display:block;} .br-mo {display:none} /* s : 220831 add */ .cmpnt-main-article-wrap .txt-wrap h2, .cmpnt-main-article-wrap .txt-wrap .txt-desc, .ir_hidden{opacity:0} /* 220902 modify */ /* e : 220831 add */ /* s : cmpnt-keyvisual-wrap */ .cmpnt-keyvisual-wrap{position:relative;overflow:hidden;background-color:#000;} .cmpnt-keyvisual-wrap .swiper-container .swiper-slide{position:relative;overflow:hidden;width:100% !important;} /* 221031 modify */ .cmpnt-keyvisual-wrap .swiper-container .swiper-slide a{display:block; width:100%; height:100%;} .cmpnt-keyvisual-wrap .obj-wrap{display:flex;flex-flow:column;} .cmpnt-keyvisual-wrap .obj-wrap img{min-width:100%;align-self:center;aspect-ratio:5/2;object-fit:cover;} /* 221020 modify */ .cmpnt-keyvisual-wrap .obj-wrap video{min-width:100%;height:100%;align-self:center;aspect-ratio:5/2;} .cmpnt-keyvisual-wrap .swiper-navigation-wrapper {position:absolute;top:50%;left:50%;width:100%;max-width:1502px;transform:translate(-50%);z-index:2;} .cmpnt-keyvisual-wrap .swiper-container .swiper-navigation-wrapper .swiper-button-pause{position:absolute;bottom:30px;left:50%;border:1px solid #fff;padding:5px;color:#fff;z-index:1;display:none;} .cmpnt-keyvisual-wrap .swiper-container .swiper-navigation-wrapper .swiper-button-pause.play{color:#000;background:#fff;} .cmpnt-keyvisual-wrap .swiper-button-prev{background-image:url('../../../../../../content/dam/hyundai/ww/en/images/main/new/common/arrow_left.png');-webkit-background-size:21px 42px;background-size:21px 42px;left:48px;width:21px;height:42px;margin-top:-21px;} .cmpnt-keyvisual-wrap .swiper-button-next{background-image:url('../../../../../../content/dam/hyundai/ww/en/images/main/new/common/arrow_right.png');-webkit-background-size:21px 42px;background-size:21px 42px;right:48px;width:21px;height:42px;margin-top:-21px;} .cmpnt-keyvisual-wrap .txt-wrap{position:absolute;bottom:60px;left:50%;right:0;width:62.5%;margin-left:-600px;color:#fff;z-index:1} .cmpnt-keyvisual-wrap .txt-wrap .category{display:block;margin-bottom:7px;color:#fff;font-family:"HyundaiMedium";font-size:14px;line-height:14px;} /* 221104 modify */ .cmpnt-keyvisual-wrap .txt-wrap p{display:block;font-family:"HyundaiMedium";font-size:48px;line-height:60px;color:#fff;} /* 221104 modify */ /* e : cmpnt-keyvisual-wrap */ .cmpnt-keyvisual-wrap .topArea{position:absolute;top:0;left:0;right:0;width:1120px;margin:0 auto} .cmpnt-keyvisual-wrap .sharing a{display:inline-block;padding:0 0 0 25px;background:url('../images/common/ico_sharing.png') no-repeat 0 0;font-size:14px;line-height:17px;text-decoration:none;font-family:HyundaiMedium} .cmpnt-keyvisual-wrap, .cmpnt-main-article-wrap{min-width:1240px;max-width:1920px;margin:0 auto} /* 221104 modify */ /* s : cmpnt-main-article-wrap */ .cmpnt-main-article-wrap .main-article{display: flex;flex-direction: row;flex-wrap: wrap;justify-content:stretch;width:100%} .cmpnt-main-article-wrap .main-article-item{position:relative;flex-basis:calc(100%/3);height:50%;align-self: flex-start;aspect-ratio: 1/1;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item a{display:block;width:100%; height:100%;padding:0; margin:0; z-index:1;} .cmpnt-main-article-wrap .main-article-item a::after{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,44,95,1); opacity: 0; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease;} .cmpnt-main-article-wrap .main-article-item a:hover::after{opacity:.7;} .cmpnt-main-article-wrap .main-article-item .txt-wrap{position:absolute;bottom:0;left:0;box-sizing:border-box;width:100%;height:auto;-webkit-transition:all .3s 0s;-o-transition:all .3s 0s;transition:all .3s 0s;transform:translateY(1px);z-index:1;padding:0 30px 30px 30px;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item .txt-wrap h2{position:relative;} .cmpnt-main-article-wrap .main-article-item .txt-wrap span.category {display:block;margin-bottom:7px;color:#fff;font-size:16px;line-height:18px;font-family:"HyundaiMedium";} /* 221104 modify */ .cmpnt-main-article-wrap .main-article-item .txt-wrap h2 p {padding:0;margin:0;color:#fff;font-size:23px;line-height:32px;} /* 221104 modify */ .cmpnt-main-article-wrap .main-article-item .txt-wrap .txt-desc{font-family:"HyundaiTextRegular";font-size:1.25vw;line-height:1.5vw;margin-top:20px; box-sizing:content-box; word-break:keep-all; -webkit-transition:all .3s 0s; transform:translateY(20px); display: none; height:0; opacity: 0; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease;} .cmpnt-main-article-wrap .main-article-item .txt-wrap .txt-desc span{display:block;font-family:"HyundaiTextRegular";color:#fff;font-size:18px;line-height:26px;} /* 221104 modify */ .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap{transform:translateY(0px);} .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap .txt-desc{transform:translateY(0px);display: block;height:auto;opacity:1;} .cmpnt-main-article-wrap .cont-gradient{position:absolute;left:0;bottom:0;width:100%;height:41.3533%;background:linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(102,102,102,0) 50%);opacity:.5} .cmpnt-main-article-wrap .video-obj .obj-wrap{overflow:hidden; aspect-ratio:1/1;} .cmpnt-main-article-wrap .video-obj video{display:block;width:102%;height:102%; margin:-1% 0 0 -1%; object-fit:cover;aspect-ratio:1/1;} .cmpnt-main-article-wrap .img-obj img{width:100%;height:auto;object-fit:cover;aspect-ratio:1/1;} .cmpnt-main-article-wrap .main-article-item.hashtag-obj{overflow:hidden;aspect-ratio: 1/1;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt{display:flex;align-items:center;justify-content:center;margin:auto;width:100%;height:100%;line-height:1;background:#f6f3f2;-webkit-transition:all .3s 0s;-o-transition:all .3s 0s;transition:all .3s 0s; z-index:2} .cmpnt-main-article-wrap .main-article-item.hashtag-obj a{text-decoration: none;aspect-ratio:1/1;} /* 220920-m modify */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj a::after{background:none} /* 220915 add */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt{background:#002C5F;} .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{display:block;flex:1;text-align:center;font-family:"HyundaiMedium";color:#002C5F;font-size:80px;line-height:85px;word-break:keep-all;} /* 221104 modify */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt span{color:#fff} /* type : horizontal, vertical */ /* .cmpnt-main-article-wrap .main-article-item.type-horizontal{flex-basis:calc((100%/3)*2);aspect-ratio: 2/1;} 221101 delete */ .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap{transform:translateY(0px);} .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap h2{width:calc(50% - 60px);margin:0;box-sizing: border-box;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap .txt-desc{position:absolute; bottom:0;right:0; width:50%; height:auto;padding:0 30px 30px 0;margin-top:0} .cmpnt-main-article-wrap .main-article-item.type-horizontal .obj-wrap::after{content: ''; position:absolute;left:0;bottom:0;width:100%;height:41.3533%;background:linear-gradient(0deg, rgba(102,102,102,1) 0%, rgba(102,102,102,0) 50%);opacity:.5} /* .cmpnt-main-article-wrap .main-article-item.type-vertical{height:100%;}*/ /* 221110 delete */ .cmpnt-main-article-wrap .main-article-item.type-vertical .inner{position:absolute;left:0;top:0;z-index:1;width:100%} /* 221020 modify */ /* .cmpnt-main-article-wrap .main-article-item.square .main-article-item{height:auto} */ /* 221110 delete */ .cmpnt-main-article-wrap .main-article.square .main-article-item{height:auto;} /* 221110 add */ .cmpnt-main-article-wrap .main-article-item a:hover h2{opacity: 1;} /* e : cmpnt-main-article-wrap */ /* s : 230217 add */ /* layerPop */ .layerPop{display:none;position:fixed;left:0;right:0;top:0;bottom:0;z-index:99999} .layerPop .dim{position:fixed;left:0;right:0;top:0;bottom:0;background:url("../images/common/popup-bg.png") repeat left top} .layerPop .layerPopArea{position:relative;width:700px;margin:0 auto;top:120px;padding-bottom:100px}/* 기본이 700px */ .layerPop .layerPopArea .btnLayerClose{display:block;position:absolute;top:30px;right:30px;text-indent:-9999px;width:16px;height:16px;background:url("../images/common/btn_layer_close.png") no-repeat} .layerPop .popCont{padding:60px;background:#fff;text-align:center} .layerPop .popCont .headTit{display:block;font-family:"HyundaiMedium","HyundaiKRMedium";font-weight:normal;padding:15px 0;text-align:center;font-size:24px;line-height:30px} .layerPop .popCont .titMsg{display:block;margin:10px 0 40px 0;font-size:20px} .layerPop .popCont .titMsg a{display:block;color:#002c5f;text-decoration:underline} .layerPop .popCont .icoNoti{display:block;text-indent:-9999px;width:45px;height:45px;background:url("../images/common/ico_noti.png") no-repeat;margin:0 auto} .layerPop .popCont .message{margin:40px 0 20px 0;color:#000} .layerPop .popCont .message.bold{font-family:'HyundaiMedium'} .layerPop .popCont .message.wrong{color:#00aad2} .layerPop .popCont .conArea{text-align:left} .layerPop .popCont .btnWrap{margin-top:30px;padding-bottom:0} .tac{text-align:center !important} a.btn, button.btn, span.btn{display:inline-block;min-width:140px;padding:0 30px;font-size:16px;line-height:36px;text-align:center;text-decoration:none;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#002c5f;color:#fff} /* e : 230217 add */ /* s : 221101 add */ /* pc */ @media print,screen and (min-width:741px) and (max-width:20000px){ .cmpnt-main-article-wrap .main-article{aspect-ratio: 3/2;} .cmpnt-main-article-wrap .main-article-item.type-horizontal{flex-basis:calc((100%/3)*2);aspect-ratio: 2/1;} .cmpnt-main-article-wrap .main-article-item.type-vertical{aspect-ratio: 1/2;} .cmpnt-main-article-wrap .vertical-left .main-article-item.type-horizontal{margin-left:calc(100%/3);} .cmpnt-main-article-wrap .main-article.square{aspect-ratio: 3/1;} .cmpnt-main-article-wrap .type-horizontal.video-obj video, .cmpnt-main-article-wrap .type-horizontal.img-obj img{aspect-ratio:2/1;} .cmpnt-main-article-wrap .type-vertical.video-obj video, .cmpnt-main-article-wrap .type-vertical.img-obj img{aspect-ratio:1/2;} } /* e : 221101 add */ /* 221116 add */ @media print,screen and (min-width:1601px) and (max-width:1800px){ .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:70px;} } @media print,screen and (min-width:1340px) and (max-width:1600px){ .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:60px;} } @media print,screen and (min-width:741px) and (max-width:1340px){ .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:50px;} } /* //221116 add */ /* s : 221017 modify */ /* Mobile */ @media screen and (min-width: 0) and (max-width: 740px){ .cmpnt-keyvisual-wrap, .cmpnt-main-article-wrap{width:100%;min-width:100%} /* 221101 modify */ .cmpnt-keyvisual-wrap{max-width:100%; aspect-ratio:9/16;} .ios .cmpnt-keyvisual-wrap{aspect-ratio:3/5;} .cmpnt-main-article-wrap .main-article-item a::after{opacity: 0; pointer-events: none;} .cmpnt-main-article-wrap .main-article-item .txt-wrap{transform:translateY(0) !important;transition:none} .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap{margin-top:0;pointer-events:none;} .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap .txt-desc{display:none;pointer-events:none;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item .txt-wrap .txt-desc, .cmpnt-main-article-wrap .main-article-item.type-horizontal .obj-wrap::after, .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap .txt-desc{display:none;} .cmpnt-main-article-wrap .main-article-item.type-horizontal a:hover .txt-wrap .txt-desc{opacity:0;pointer-events:none;} /* //221101 modify */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt, .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt span{pointer-events:none;} /* 221027 add */ .cmpnt-keyvisual-wrap .txt-wrap {left:0;bottom:0;width:100%;margin-left:0;padding:0 6.944% 13.334%;} .cmpnt-keyvisual-wrap .txt-wrap .category {margin-bottom:2.777%;font-size:3.8889vw;line-height:5vw;} .cmpnt-keyvisual-wrap .txt-wrap p {font-size:7.22222vw;line-height:1.153845em;} .cmpnt-keyvisual-wrap .swiper-button-prev, .cmpnt-keyvisual-wrap .swiper-button-next {width:15px;height:26px;-webkit-background-size:100% 100%;background-size:100% 100%;} .cmpnt-keyvisual-wrap .swiper-button-prev {left:10px;} .cmpnt-keyvisual-wrap .swiper-button-next {right:10px;} /* //221027 add */ .cmpnt-keyvisual-wrap .obj-wrap img{align-self:center;object-fit:cover;height:100%; width:100%; aspect-ratio:9/16;} .cmpnt-keyvisual-wrap .obj-wrap video{width:100%; aspect-ratio:9/16;} .ios .cmpnt-keyvisual-wrap .txt-wrap{bottom:13.334%; padding-bottom:0;} /* 221101 modify */ .cmpnt-main-article-wrap .type-horizontal.video-obj video, .cmpnt-main-article-wrap .type-horizontal.img-obj img, .cmpnt-main-article-wrap .type-vertical.video-obj video, .cmpnt-main-article-wrap .type-vertical.img-obj img{aspect-ratio:1/1;} /* //221101 modify */ .cmpnt-main-article-wrap .main-article{flex-flow:column wrap;} .cmpnt-main-article-wrap .main-article-item{flex-basis:100%;height:100%;width:100%;} .cmpnt-main-article-wrap .main-article-item.type-vertical .inner{position:initial} /* 221101 modify */ .cmpnt-main-article-wrap .vertical-left .main-article-item.type-horizontal{margin-left:0} .cmpnt-main-article-wrap .main-article-item.hashtag-obj a{width:100vw;height:100vw} .cmpnt-main-article-wrap .main-article-item a:hover::after{opacity: 0; pointer-events: none;} .cmpnt-main-article-wrap .main-article-item h2{padding:0} .cmpnt-main-article-wrap .main-article-item .txt-wrap{padding:0;transform:translateY(0) !important;transition:none} .cmpnt-main-article-wrap .main-article-item .txt-wrap span.category {margin-bottom:2.777%;font-size:3.8889vw;line-height:5vw;} .cmpnt-main-article-wrap .main-article-item .txt-wrap h2 p {font-size:5vw;line-height:6.6667vw;} .cmpnt-main-article-wrap .main-article-item h2{padding:0 6.944% 6.944%;} .cmpnt-main-article-wrap .main-article-item a:hover h2{margin-top:0;pointer-events:none;} .cmpnt-main-article-wrap .main-article-item a:hover .txt-wrap .txt-desc{display:none;pointer-events:none;} .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap{padding:0 30px 30px 30px} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item h2 .category {margin-bottom:2.777%;font-size:3.8889vw;line-height:5vw;} .cmpnt-main-article-wrap .main-article-item h2 p {font-size:5vw;line-height:6.6667vw;} .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap h2{width:100%;padding:0;box-sizing:border-box;} /* 221110 modify */ .cmpnt-main-article-wrap .main-article-item .txt-wrap .txt-desc, .cmpnt-main-article-wrap .main-article-item.type-horizontal .txt-wrap .txt-desc, .cmpnt-main-article-wrap .main-article-item.type-horizontal .obj-wrap::after{display:none;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item.type-horizontal a:hover .txt-wrap .txt-desc{opacity:0;pointer-events:none;} /* 221101 modify */ .cmpnt-main-article-wrap .main-article-item.hashtag-obj .hash-txt span{font-size:13.8889vw;line-height:15.5556vw;} .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt, .cmpnt-main-article-wrap .main-article-item.hashtag-obj a:hover .hash-txt span{pointer-events:none;} .br-pc {display:none !important;} .br-mo {display:block !important;} /* s : 230217 add */ /* layerPop */ .layerPop{display:none;position:absolute;left:0;top:0;width:100%;z-index:99999} .layerPop .dim{position:fixed;left:0;right:0;top:0;bottom:0;background:url("../images/common/popup-bg.png") repeat left top} .layerPop .layerPopArea{position:relative;width:calc(100% - 30px);margin:140px 15px 0 15px;padding-bottom:100px} .layerPop .layerPopArea .btnLayerClose{display:block;position:absolute;top:15px;right:15px;text-indent:-999em;width:12px;height:12px;background:url("../images/common/btn_layer_close.png") no-repeat;background-size:12px} .layerPop .popCont{padding:50px 30px;background:#fff;text-align:center} .layerPop .popCont .headTit{display:block;padding:0 0 10px 0;font-size:19px;font-family:"HyundaiMedium"} .layerPop .popCont .titMsg{display:block;margin:10px 0 20px 0;font-size:17px;line-height:22px} .layerPop .popCont .titMsg a{display:block;color:#002c5f;text-decoration:underline} .layerPop .popCont .icoNoti{display:block;text-indent:-999em;width:46px;height:46px;background:url("../images/common/ico_noti_mo.png") no-repeat;background-size:46px;margin:0 auto 10px auto} .layerPop .popCont .message{margin:20px 0 15px 0;color:#000} .layerPop .popCont .message.bold{font-family:'HyundaiMedium'} .layerPop .popCont .message.wrong{color:#00aad2} .layerPop .popCont .conArea{margin-bottom:30px} .layerPop .popCont .btnWrap{margin-top:20px;padding-bottom:0} /* e : 230217 add */ } /* .subMain .cmpnt-keyvisual-wrap .swiper-container .swiper-slide{height:500px} */ /* 221031 delete */ .subTitWrap .inner{position:relative;width:1120px;height:174px;margin:0 auto;padding:100px 0 45px;box-sizing: border-box;} /* 221101 modify */ .subTitWrap .inner h2.subTitle{font-size:40px;line-height:29px;} .subTitWrap .inner .btnRightWrap {position: absolute;right:0;top:100px} .subTitWrap .inner .btnRightWrap .btn {background-color: transparent;border: 1px solid #E4DCD3;color: #999;font-weight: 600;} .sub-main{background:#fff;overflow:hidden} /* 220913 add */ /* s : 220907 modify */ .sub-main .tabWrap{width:1120px;margin:0 auto 45px;} .sub-main .tabArea {height:auto;overflow:hidden} .sub-main .tabArea > .tab{display:table;float:left;table-layout:fixed;width:auto;height:32px} .sub-main .tabArea > .tab a{display:table-cell;padding: 0 12px;font-family:"HyundaiMedium";font-size: 20px;line-height: 24px;color:#999 } .sub-main .tabArea > .tab:first-child a{padding-left:0} .sub-main .tabArea > .tab:last-child a{padding-right: 0;} .sub-main .tabArea > .tab.on a, .sub-main .tabArea .tab:hover a{color:#002c5f;text-decoration:underline;text-decoration-thickness: 1px;text-underline-offset: 9px} /* 220919 modify */ /* e : 220907 modify */ .btnWrap.more{margin-top:0;padding:60px 0 150px} .btnWrap.more .btn{min-width:366px;background-color:#fff;border:1px solid #E4DCD3;font-family:HyundaiMedium;font-size:16px;line-height:50px;color:#999;cursor: pointer} /* mobile */ @media print,screen and (min-width:0px) and (max-width:740px){ .subMain .cmpnt-keyvisual-wrap{aspect-ratio:39/40;width:100%;height:auto} /* 221101 modify */ /* .subMain .cmpnt-keyvisual-wrap .swiper-container .swiper-slide{height:400px} */ /* 221101 delete */ .subMain .cmpnt-keyvisual-wrap .swiper-container .swiper-slide img{width:100vw;height:auto;aspect-ratio:39/40 ;} /* 221101 modify */ .subMain .cmpnt-keyvisual-wrap .obj-wrap{display:block} /* 221101 add */ .subMain .cmpnt-keyvisual-wrap .obj-wrap img{height:100%;aspect-ratio:96/25} /* 221101 add */ .subTitWrap .inner{width:100%;margin:0 auto;padding:55px 25px 0} .subTitWrap .inner h2.subTitle{font-size:30px;line-height:37px;} .subTitWrap .inner .btnRightWrap{position:static;margin:39px 0 0} .subTitWrap .inner .btnRightWrap .btn{font-family:"HyundaiMedium";font-size:14px;line-height:40px;font-weight:normal;} .subTitWrap .inner{width:100%;margin:0 auto;padding:55px 25px 30px} .subTitWrap .inner h2.subTitle{font-size:30px;line-height:37px;} /* s : 220907 modify */ .sub-main .tabWrap{position:relative;width:calc(100vw - 20px);height:37px;overflow-x: scroll;overflow-y: hidden;-webkit-overflow-scrolling: touch;margin:20px 0 30px 20px;} .sub-main .tabWrap .tabArea {position:absolute;left:0;top: 0;width:100%;display:block;overflow:visible;white-space: nowrap;line-height:34px;padding:0 0 0 5px;font-size: 0;} .sub-main .tabArea > .tab {top:0;height:27px;display:inline-block;float:none} .sub-main .tabArea > .tab a{padding: 0 20px;height:36px;font-size:18px;line-height:23px;color: #999;} .sub-main .tabArea > .tab:last-child a{margin-right: 15px;} /* e : 220907 modify */ .btnWrap.more{padding:40px 0 100px;margin:0 25px} .btnWrap.more .btn{min-width:100%;font-size:14px;line-height:45px;} } /* e: 220830 modify */ /* .subTitWrap + .nav-bar{margin-top:-65px} */ /* 220922 delete */ /* S: 220914-m add */ .evidon-banner {display:flex !important;flex-direction:column;padding:8px 20.5% !important;min-height:190px} #_evidon-title {order: 0;font-family:HyundaiMedium !important;font-weight:normal !important;} #_evidon-message {float:left !important;order:1;font-family:HyundaiRegular !important;width:75% !important;} #_evidon-option-button {width:163px !important;order: 3;align-self: flex-end;margin-top:-67px !important;font-family:HyundaiMedium !important;font-weight:normal !important;margin-left:0 !important;margin-right:0 !important}/* 210603 modify */ .evidon-banner-acceptbutton {width:163px !important;order: 2;align-self: flex-end;top:-75px;font-family:HyundaiMedium !important;font-weight:normal !important;margin-left:0 !important;margin-right:0 !important;}/* 210319 modify */ /* 210603 modify */ .evidon-banner-declinebutton {width:163px !important;order: 2;align-self: flex-end;top:-75px;font-family:HyundaiMedium !important;font-weight:normal !important;margin-left:0 !important;margin-right:0 !important;border-radius:0 !important;background: rgb(0, 44, 95) !important;color:#fff !important;}/* 210603 add */ #_evh-ric-c {right:21% !important;} @media screen and (max-width:1690px){ #_evidon-message {width:68% !important} .evidon-banner {padding:8px 16% !important;} #_evh-ric-c {right:16.5% !important;} } @media screen and (max-width:1440px){ #_evidon-message {width:68% !important} .evidon-banner {padding:8px 9% !important;} #_evh-ric-c {right:9.5% !important;} .evidon-prefdiag-overlay {width:80% !important;} } @media screen and (max-width:740px){ .evidon-banner {padding:8px 5% !important;} #_evidon-message {width:90% !important;} #_evidon-option-button {float:left;align-self:center;margin: 6px 8px 6px 8px;margin-top:0 !important} .evidon-banner-acceptbutton {float:left;align-self:center;margin: 6px 8px 6px 8px;top:0 !important;} .evidon-banner-declinebutton {float:left;left:0 !important;align-self:center;margin: 6px 8px 6px 8px !important;top:0 !important;} #_evh-ric-c {right:20px !important;} .evidon-prefdiag-overlay {width:100% !important;} /* 220920 add */ } /* e: 220914-m add */ /* s: 220920 add */ .evidon-prefdiag-overlay {left:50% !important;width:1120px !important;transform:translate(-50%, 0);margin-left:0 !important;font-family:HyundaiRegular !important;} .evidon-prefdiag-title {font-weight:normal !important;} .evidon-prefdiag-tabfooter {height:65px !important;} .evidon-prefdiag-declinebtn {font-family:HyundaiRegular !important; border-radius:0px !important;color: rgb(51, 51, 51) !important;background:rgb(255, 255, 255) !important;border:1px solid rgb(0, 0, 0) !important;} .evidon-prefdiag-acceptbtn {font-family:HyundaiRegular !important; border-radius:0px !important;color: rgb(242, 242, 242) !important;background:rgb(0, 44, 95) !important;} .evidon-prefdiag-tabcontainer {height:360px !important;} @media screen and (max-width:425px) { .evidon-prefdiag-overlay {width:100% !important;} .evidon-prefdiag-tabfooter {height:48px !important;padding:0 !important;} .evidon-prefdiag-tabcontainer {height:595px !important;} .evidon-prefdiag-declinebtn {padding:7px 16px !important;} .evidon-prefdiag-acceptbtn {padding:7px 16px !important;} } /* e: 220920 add */