@charset "euc-kr";

/**************************************************
프로그램 ID : detail.css
프로그램 명 : Detail Cascading Style Sheets
작  성   자 :
최초 작성일 : 2018/01/17
최종 작성일 :
참고   사항 :
**************************************************/

@import url("base.css");
@import url("layout.css");
@import url("select2.css");
@import url("style.css");


/* 메인
------------------------------------------------------------------------------- */
#head > nav.gnbArea > #gnb { font-weight: 700 !important; font-size:16px; color:#333; font-family: "HyundaiSansText",sans-serif;}
.typeKia #head > nav.gnbArea > #gnb { font-weight: 700 !important; font-size:16px; color:#333; font-family: "KIA-SIG",sans-serif;}
.main #contents > section {margin-top:-72px; padding-top:0; font-family: "HyundaiSansText",sans-serif;}
.typeKia .main #contents > section {margin-top:-72px; padding-top:0; font-family: "KIA-SIG",sans-serif;}
.main h4, .main h4 a {font-weight:700; font-size:18px; color:#333; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.main h4 a:after {width:12px; height:15px; margin-left:13px; background:url(/mozen/images/ico/ico_angle01.png) no-repeat; vertical-align:-2px; display:inline-block; content:"";}
.main dl.update {width:100%; display:table; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.main dl.update dt {width:294px; height:120px; font-size:23px; color:#fff; text-align:center; background:#3c3c3c; vertical-align:middle; display:table-cell;}
.main dl.update dd {height:120px; font-size:18px; border:1px solid #ccc; border-left:0 none; background:#fff; vertical-align:middle; display:table-cell;}
.main dl.update dd:last-of-type { padding-left:30px; text-align:left;}

.main ul.mainCont li:last-of-type { background:#f4f3f1;}
.main ul.mainCont li > p, .main ul.mainCont li dl {margin-top:14px; line-height:23px; font-size: 16px; font-family: "HyundaiSansText",sans-serif; font-weight: 400; letter-spacing: -1px;}
.main ul.mainCont li > p > a {font-weight:700; text-decoration:underline; color:#333;}
.main ul.mainCont li dl {margin-bottom:30px;}
.main ul.mainCont li > button {position:absolute; bottom:0; left:0; width:580px; height:50px; font-size:18px; color:#333; line-height:48px; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.main ul.mainCont li:nth-of-type(3) > button {background:#e1e5bd;}
.main ul.mainCont li:last-of-type > button {background:#e5dfcb;}
.main section > h4 {margin:38px 0 10px 0;}
.main .note.st03 {margin-top:13px; font-family: "HyundaiSansText",sans-serif; font-weight: 500;}

ul.mainCont { 
    position: relative; 
    display: inline-flex;
    z-index: 10;     
    gap: 40px;
    margin-top: 40px;
}

ul.mainCont li { 
    position: relative; 
    z-index: 999;
    overflow: hidden; 
    padding: 210px 0 20px 20px; 
    width: 580px;
    height: 370px;
    background-color: #f1f5f8;
    font-size: 16px;
}

ul.mainCont li:last-child { 
    background-color: #f4f3f1;
}

ul.mainCont li:before { 
    content:""; 
    position: absolute;
    display: block; 
    top: 0; 
    left: 0; 
    width: 580px; 
    height: 370px; 
    background:url(/mozen/images/img_update.jpg) no-repeat;
    background-size: 580px 186px; 
    isolation: isolate;
    transition: transform 0.5s ease;
    transform: scale(1);
}

ul.mainCont li:hover:before { 
    transform: scale(1.1);
}

ul.mainCont li:after { 
    content: ""; 
    position: absolute;
    display: block; 
    height: 186px; 
    top: 0; 
    bottom: 0; 
    left: 0;
    right: 0; 
    background-color: rgba(5, 20, 31, 0.22); 
    transition: transform 0.5s ease;
    transform: scale(1);
}

ul.mainCont li:last-child:before { 
    content:""; 
    display: block; 
    width: 580px; 
    height: 370px;
    background:url(/mozen/images/img_upgrade.jpg) no-repeat; 
    background-size: 580px 186px; isolation: isolate;
}

ul.mainCont li .title { 
    font-size: 22px; 
    font-weight: bold; 
    letter-spacing: -.7px; 
    margin-bottom: 15px;
}

ul.mainCont li .sub-text { 
    font-weight: 300; 
    color: #636363; 
    line-height: 1.3;
}

ul.mainCont li:last-child .sub-text { 
    margin-bottom: 35px;
}

ul.mainCont li span { 
    font-weight: 400; 
    color: #8d4107; 
    letter-spacing: -.7px;
}

ul.mainCont li em { 
    font-weight: 400; 
    text-decoration: underline; 
    text-underline-offset: 2px;
}

ul.mainCont li .link { 
    position: absolute; 
    bottom: 20px; 
    font-size: 18px; 
    letter-spacing: -.7px; 
    text-decoration: underline; 
    cursor: pointer;
}

ul.mainCont li .link:after { 
    content: ""; 
    position: relative; 
    display: inline-block; 
    top: 2px; 
    margin-left: 2px; 
    width: 18px; 
    height: 18px; 
    mask-image:url(/mozen/images/ico/Arrow_Forward.svg); 
    mask-size: 18px; 
    background-color: #000;
}

/* 메인(현대) */
.typeHyundai .main h4, .typeHyundai .main h4 a { font-weight:700 !important; font-size:18px; color:#333; font-family: "HyundaiSansText" !important,sans-serif;}
.typeHyundai .main dl {font-weight:700; font-family: "HyundaiSansText";}
.typeHyundai .main dl.update  {width:100%; display:table; font-weight:700; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .main ul.mainCont li > dl > dt  {width:100%; display:table; font-weight:700; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .main ul.mainCont li > dl > dt ~ dd  {width:100%; display:table; font-weight:700; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .main ul.mainCont li > p, .typeHyundai .main ul.mainCont li dl  {font-size: 16px; font-family: "HyundaiSansText",sans-serif; letter-spacing: -1px;}
.typeHyundai .main ul.mainCont li > button { position:absolute; bottom:0; left:0; width:580px; height:50px; font-weight: 700; font-size:18px; color:#333; line-height:48px; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .main .note.st03 { margin-top:13px; font-weight: 500; font-family: "HyundaiSansText",sans-serif;}

/* 메인(기아) */
.typeKia .main { font-family: "KIA-SIG",sans-serif;}
.typeKia .main h4, .typeKia .main h4 a {font-size:18px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia .main dl.update {width:100%; display:table; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia .main ul.mainCont li > p, .typeKia .main ul.mainCont li dl {margin-top:14px; line-height:23px; font-size: 16px; font-family: "KIA-SIG",sans-serif; font-weight: 500; letter-spacing: -1px;}
.typeKia .main ul.mainCont li > button {position:absolute; bottom:0; left:0; width:580px; height:50px; font-size:18px; color:#333; line-height:48px; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia .main .note.st03 {margin-top:13px; font-family: "KIA-SIG",sans-serif; font-weight: 500;}


.main h4 .typeKia, .main h4 a .typeKia {font-weight:700; font-size:18px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 700;}

/* 업데이트 전용 프로그램
------------------------------------------------------------------------------- */
.program .topCont {padding-bottom:70px !important;}
.program .topCont > div {width:100%; height:108px; margin-top:-114px; font-weight:normal; font-size:24px; text-align:center; color:#002c5f; line-height:108px; border:1px solid #ddd; background:#efefef;}
.program .topCont > div:before {width:44px; height:38px; margin-right:20px; background:url(/mozen/images/ico/ico_mozen02.png) 50% no-repeat; vertical-align:middle; display:inline-block; content:"";}
.program .topCont > div a {color:#002c5f; font-family: "HyundaiSansText",sans-serif; font-weight: 500;}
.program .topCont > p {padding:15px 0 40px 0; letter-spacing: -1.6px;}
.program .topCont > dl {width:100%; padding-top:40px; border-top:1px solid #e5e5e5; display:table;}
.program .topCont > dl dt, .program .topCont > dl dd {vertical-align:top; display:table-cell;}
.program .topCont > dl dt {width:100px; color:#333; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.program .cont h4 {margin-bottom:40px; font-size:36px; color:#333; text-align:center; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.program .cont img:first-of-type {margin-bottom:30px;}
.program .cont img {vertical-align:top;}


/* 업데이트 전용 프로그램(현대) */
.typeHyundai .program .topCont > div a {color:#002c5f; font-weight: 500; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .program .topCont > dl dt {width:100px; color:#333; font-weight: 700; font-family: "HyundaiSansText",sans-serif;}
.typeHyundai .program .cont h4 {margin-bottom:40px; font-size:36px; color:#333; text-align:center; font-weight: 700; font-family: "HyundaiSansText",sans-serif;}

/* 업데이트 전용 프로그램(기아) */
.typeKia .program .topCont > div a {color:#002c5f; font-family: "KIA-SIG",sans-serif; font-weight: 500;}
.typeKia .program .topCont > dl dt {width:100px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia .program .cont h4 {margin-bottom:40px; font-size:36px; color:#333; text-align:center; font-family: "KIA-SIG",sans-serif; font-weight: 700;}


/* 지도다운로드
------------------------------------------------------------------------------- */
.map .step {width:1200px; margin:-60px auto 0 auto; padding-bottom:50px;}
.map .step h4 {padding-top:50px;}
.map h4 {margin-bottom:10px; font-size:20px; color:#333; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.map h5 {margin-bottom:30px; font-size:22px; font-family: "HyundaiSansText",sans-serif; font-weight: 700;}
.map .cont img {vertical-align:top;}
.map .cont img:not(:last-of-type) {margin-bottom:40px;}
.map dl.down dd > div {margin-left:67px; display:inline-block;}
.map dl.down dd > div > button:first-of-type {margin-right:10px;}
.map dl.down dt select {width:100%;}
.map dl.down.st01 {width:570px;}
#popUpgrade h2 {font-weight:normal; color:#333;}
#popUpgrade dl.down.st01 + dl.down.st01 { border-top:0;}
#popUpgrade dl.down.st01 dt, #popUpgrade dl.down.st01 dd {height:60px; line-height:60px;}
#popUpgrade dl.down.st01 dt {width:50%; padding:0 0 0 30px; font-weight:400; color:#666;}
#popUpgrade dl.down.st01 dd {width:48%;}
#popUpgrade dl.down.st01 dd input {margin:0 40px 0 10px;}
#popUpgrade dl.down.st01 dd select {width:315px;}
#popUpgrade .btn.st02 {font-size:16px;}
#popUpgrade ul.note {margin-bottom:30px;}
#popUpgrade table.list {margin-bottom:10px;}

figure {
    margin-bottom: 20px;
}

.mozen-usb { 
    display: flex;  
    align-items: center; 
    gap: 10px; 
    padding: 25px; 
    margin-top: 20px;
    background-color: #f1f5f8; 
}

.mozen-usb:before { 
    content: "";  
    position: relative; 
    display: inline-block; 
    width: 52px; 
    height: 44px; 
    background: url(/mozen/images/ico/ico_mozen01.png) no-repeat; 
    background-size: 52px 44px;
}

.mozen-usb p { 
    font-size: 20px; 
    font-weight: bold;
    margin-right: 10px;
}

.mozen-usb .link { 
    font-size: 15px; 
    font-weight: 300; 
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.mozen-usb .link:after { 
    content: ""; 
    position: relative;
    display: inline-block;
    top: 3px; 
    margin-left: 2px; 
    width: 15px; 
    height: 15px; 
    mask-image:url(/mozen/images/ico/Arrow_Forward.svg); 
    mask-size: 15px;
    background-color: #000;
}

/* 지도다운로드(현대) */
.typeHyundai h4 {margin-bottom:10px; font-size:20px; color:#333; font-weight: 700; font-family: "HyundaiSansText",sans-serif !important;}
.typeHyundai h5 {margin-bottom:30px; font-size:22px; font-weight: 700; font-family: "HyundaiSansText",sans-serif;}

/* 지도다운로드(기아) */
.typeKia .map h4 {margin-bottom:10px; font-size:20px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia .map h5 {margin-bottom:30px; font-size:22px; font-family: "KIA-SIG",sans-serif; font-weight: 700;}


/* 고객센터(기아) */
.typeKia .main .note.st03 {font-size:16px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 500;}
.typeKia .main .note.st03 > li {font-size:16px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 500;}
.typeKia table.inquiry th {font-size:16px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 700;}
.typeKia tbody > td {font-size:16px; color:#333; font-family: "KIA-SIG",sans-serif; font-weight: 500;}

.typeKia header {font-family:'KIA-SIG',sans-serif !important;}
.typeKia section {font-family:'KIA-SIG',sans-serif !important;}
.typeKia select, textarea {font-family:'KIA-SIG',sans-serif !important;}

.typeKia .gnbArea {font-family:'KIA-SIG',sans-serif !important;}
.typeKia .btn {font-family: "KIA-SIG",sans-serif !important; font-size:15px !important;}

.typeKia #head {font-family:'KIA-SIG',sans-serif !important;}
.typeKia #contents {font-family:'KIA-SIG',sans-serif !important;}
.typeKia #subFooter {font-family:'KIA-SIG',sans-serif !important;}