@charset "utf-8";

.m-block {
    display:block;
}
.for-pc {
    display:none !important;
}
.for-mobile {
    display: block !important;
}

/* 헤더 */
#header {
    height:55px;
    background: #fff;
}
#header .logo {
    display:none;
    top:17px;
    left:20px;
    width: 39px;
    height:20px;
}
.main #header .logo,
#header .logo.show {
    display:block;
}
#header .logo a {
    height:20px;
    background: url('/hyundai/images/m_logo.png');
    background-size: 39px 20px;
}
.main #header .top-back,
#header .top-back.off {
    display: none;
}
#header .top-back {
    position: absolute;
    top:20px;
    left:15px;
    width: 20px;
    height:16px;
}
#header .top-back a {
    display:block;
    height:100%;
    background: url('/hyundai/images/img_back.png') no-repeat center;
    background-size:10px 16px;
}
#header .top-util {
    display:none;
    position: fixed;
    top: 56px;
    padding:30px 0 40px;
    width: 100%;
    text-align:center;
    max-height: 105px;
    background:#fff;
}
#header .top-util:after {
    content:'';
    position: absolute;
    bottom:0;
    left:0;
    width:100%;
    height:10px;
    background-color:#ececec;
}
#header .top-util > span {
    display: inline-block;
    font-family: "HyundaiSansHeadKR", sans-serif;
    font-weight:300;
    font-size:18px;
    line-height:45px;
    min-height:45px;
}
#header .top-util .name {
    position: relative;
    padding-left:52px;
    vertical-align: top;
}
#header .top-util .name:after {
    margin-top:-7px;
    display:block;
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 37px;
    height:35px;
    background:url('/hyundai/images/bg_iconset.png') no-repeat -107px -253px;
    background-size:200px 1000px;
}
#header .top-util.on {
    display: block;
}
#header .top-util .m-block {
    display: inline-block;
}
#header .top-util a {
    display:inline-block;
    padding:0 29px;
    color:#fff;
    background:#002c5f;
}
#header .top-util > .logout {
    display:none;
}
#header .m-logout {
    display: flex;
    height:calc(100% - 219px);
}
#header .logout {
    display:flex;
    margin-top:auto;
    width:100%;
    justify-content: flex-end;
    padding:25px 20px;
    font-size:16px;
    color:#002c5f;
}
#header .gnb-area {
    display: none;
    position: fixed;
    top:170px;
    width: 100%;
    height:calc(100% - 170px);
    overflow-y:auto;
    background:#fff;
}
#header .gnb-area.on {
    display: block;
}
#header .gnb-area .gnb-menu > li {
    position: relative;
}
#header .gnb-area .gnb-menu > li:first-child::after {
    content:'';
    position: absolute;
    width:100%;
    bottom:0;
    height:10px;
    background-color:#ececec;
}
#header .gnb-area .gnb-menu > li:first-child > a {
    padding-bottom:35px;
}
#header .gnb-area .gnb-menu > li:first-child > a::after {
    transform: rotate(135deg);
}
#header .gnb-area .gnb-menu > li.on > a {
    padding-bottom:25px;
}
#header .gnb-area .gnb-menu > li:first-child.on > a:after {
    top:31px;
    transform: rotate(-45deg);
}
#header .gnb-area .gnb-menu > li > a {
    padding:25px 20px;
    font-size:18px;
    border-bottom:1px solid #eaeaea;
}
#header .gnb-area .gnb-menu > li > a:after {
    display: block;
    content: '';
    position: absolute;
    transform: rotate(45deg);
    transition: 0.3s;
    top: 28px;
    right: 20px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

.gnb-area .gnb .gnb-menu li .sub-area {
    display: none;
    padding:15px 30px;
    background:#f6f3f2;
}
.gnb-area .gnb .gnb-menu li.on .sub-area {
    display: block;
}
.gnb-area .gnb .gnb-menu li .sub-area li > a {
    padding:15px 0;
}
.gnb-area .gnb .gnb-menu li .sub-area li > a::before {
    display: inline-block;
    content: '-';
    padding-right:10px;
}
#header .m-menu {
    position: fixed;
    top:20px;
    right:20px;
    width:20px;
    height:16px;
}
#header .m-menu a {
    display: block;
    font-size: 0;
    text-indent:-9999em;
}
#header .m-menu span {
    display: block;
    height:2px;
    width: 100%;
    background:#000;

    transition: cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: .5s;
}
#header .m-menu span:nth-of-type(2) {
    margin:5px 0;
}
#header .m-menu.on span:nth-of-type(1) {
    width: 50%;
    transform: rotate(45deg) translate(4px, 1px);
}
#header .m-menu.on span ~ span:nth-of-type(2) {
    transform: rotate(-45deg);
}
#header .m-menu.on span ~ span:nth-of-type(3) {
    width: 50%;
    transform: rotate(45deg) translate(4px, -9px);
}

/* 콘텐츠 */
.contents {
    padding-top:55px;
}
.cont {
    margin-bottom:30px;
}
.contents.eco {
    padding-top:0;
}
.cont.protect {
    margin-bottom:0;
    padding:70px 0 0;
}
/* 메인 탑배너 */
.main-banner.slick-dotted {
    margin-bottom: 0;
}
.main .slide-box {
    padding:0 20px;
}
.main .slick-dots {
    left:0;
    bottom:21px;
}
.main .slick-dots li {
    margin:0 0 0 10px;
    width:7px;
    height:7px;
}
.main .ctrl-slick-slider {
    margin:-30px 0 14px;
}
.main .ctrl-slick-slider .play-ctrl {
    margin-left: 10px;
    width: 10px;
    height: 12px;
    background-position: -174px -399px;
    background-size: 200px 1000px;
    z-index: 1;
}
.main .ctrl-slick-slider .play-ctrl.play {
    background-position: -159px -399px;
}
/* Arrows */
.main-banner .slick-arrow {
    top:50%;
    margin-top:-39px
}
.main-banner .slick-prev {
    width: 14px;
    height: 14px;
    left:20px;
    border:0 none;
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    transform: translate(-50%,-40%) rotate(-45deg);
}
.main-banner .slick-next {
    width: 14px;
    height: 14px;
    right:20px;
    border:0 none;
    border-left: 2px solid #000;
    border-top: 2px solid #000;
    transform: translate(-50%,-40%) rotate(-225deg);
}

.main .sec-tit {
    font-size:25px;
}
.sec01 {
    padding:0 20px 50px;
}
.quick-box {
    flex-wrap: wrap;
    align-items: center;
}
.quick-box .quick-link {
    margin:-1px;
    padding:50px 30px 0;
    width:calc(50% + 2px);
    font-size: 16px;
}
.quick-box .quick-link .thumb {
    margin:0 auto 14px;
    width:40px;
    height:45px;
    background-position: 0 -35px;
    background-size: 200px 1000px;
}
.quick-box .quick-link:nth-child(2) .thumb {
    width:41px;
    background-position: -41px -36px;
}
.quick-box .quick-link:nth-child(3) .thumb {
    width:45px;
    background-position: -82px -36px;
}
.quick-box .quick-link:nth-child(4) .thumb {
    width:45px;
    background-position: -128px -36px;
}
.quick-box .quick-link .quick-tit {
    font-size:16px;
}

.quick-box .quick-link .quick-txt {
    display: none;
}

/* main sec02 */
.sec02 {
    padding:80px 20px;
}
.privacy-box {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:40px;
    box-shadow: 5px 8.321px 12px 0px rgba(57, 57, 57, 0.07);
}
.privacy-box .privacy-cont {
    padding:30px 30px 0;
    width:100%;
    background:#fff;
}
.privacy-box .privacy-cont .thumb {
    margin-right: 35px;
    width:40PX;
    height:40px;
    background-position:0 -82px;
    background-size: 200px 1000px;
}
.privacy-box .privacy-cont:nth-child(2) .thumb {
    background-position: -40px -82px;

}
.privacy-box .privacy-cont:nth-child(3) .thumb {
    background-position: -80px -82px;
}
.privacy-box .privacy-cont:nth-child(4) .thumb {
    background-position: -120px -82px;
}
.privacy-box .privacy-cont .text {
    width:calc(100% - 80px);
    font-size: 18px;
    min-height:50px;
    line-height:22px;
    vertical-align: text-top;
    border-bottom:1px solid #f0f0f0;
}
.privacy-box .privacy-cont:last-child .text {
    padding-bottom: 10px;
    border:0 none;
}
.privacy-box .privacy-cont:nth-child(2) .text {
    margin-top:-10px;
    padding-bottom:15px;
}
.privacy-box .privacy-cont:nth-child(2) .text span {
    display: block;
}

/* main sec03 */
.sec03 {

    padding:80px 20px;
}
.tip-box {
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top:30px;
}
.tip-box .tip-cont {
    margin-top:10px;
    padding:30px;
    width:100%;
    box-sizing: border-box;
    background:#f6f3f2;
}
.tip-box .tip-cont .tip-text {
    min-height:75px;
    line-height: 25px;
    font-size:18px;
}
.tip-box .tip-cont .tip-text span {
    display: block;
}
.tip-box .tip-cont a {
    margin-top:20px;
    padding-right:13px;
    font-size:14px;
}

/* main sec04 */
.sec04 {
    padding:80px 20px;
}
.sec04::before {
    top:60px;
    right:4px;
    width: 124px;
    height: 183px;
    background-image: url('/hyundai/images/bg_main04_m.png');
    background-size: 124px 184px;
}
.safe-box {
}

.safe-box .tit-box {

}
.safe-box .tit-box .sub-tit {
    font-size:21px;
    line-height:30px;
}
.safe-box .safe-cont {
    margin-top:30px;
}
.safe-box .safe-cont li {
    margin:10px 0;
    padding:28px 35px;
    box-shadow: 4px 7px 10px 0 rgba(144,119,111,0.12);
}
.safe-box .safe-cont li a {
    font-size:16px;
    line-height:22px;
}
.safe-box .safe-cont li a::after {
    margin-top:-6px;
    width:9px;
    height:12px;
    background-image:url('/hyundai/images/ico_link_arrow_m.png');
    background-size:9px 12px;
}

/* 콘텐츠 */
.page-tit {
    position: fixed;
    top:20px;
    left:58px;
    width: calc(100% - 100px);
    font-size:18px;
    text-align:center;
    z-index: 2;
}
.fix .page-tit {
    display:none;
}
.page-tit h2 {
    font-weight: 400;
}
.sec-tit {
    font-size:36px;
    line-height:46px;
}
.sec-txt {
    margin-top:33px;
    line-height:28px;
    font-size:18px;
}
.info-txt {

}
.sec-tit > span {
    display:block;
}

.sub-tit {
    font-size:18px;
    line-height:30px;
}

.cont .sub-section:nth-child(even) {
    background:#f6f3f2;
}

.protect .sec-tit {
    word-break: keep-all;
}

.protect .wrap {
    padding:0 20px;
}

.sub-section {
    padding:53px 0 93px;
}
.sub-section.first {
    margin-top:93px;
}
.sub-section .info-list {
    padding-top:67px;
}
.sub-section .info-list .thumb {
    width:100%
}
.sub-section .info-list .thumb > span {
    background-size:200px 1000px
}
.protect .thumb .info01 {
    width:66px;
    height:77px;
    background-position:0 -177px;
}
.protect .thumb .info02 {
    width:91px;
    height:66px;
    background-position:-67px -177px;
}
.protect .thumb .info03 {
    width:98px;
    height:70px;
    background-position:0 -254px;
}
.act .thumb .info01 {
    width:118px;
    height:78px;
    background-position:0 -485px;
}
.act .thumb .info02 {
    width:76px;
    height:78px;
    background-position:-124px -485px;
}
.act .thumb .info03 {
    width:87px;
    height:78px;
    background-position:0 -564px;
}
.act .thumb .info04 {
    width:88px;
    height:78px;
    background-position:-112px -564px;
}
.act .thumb .info05 {
    width:79px;
    height:78px;
    background-position:0 -643px;
}
.act .thumb .info06 {
    width:88px;
    height:75px;
    background-position:-112px -643px;
}
.sub-section .info-list .info-cont {
}
.sub-section .info-cont .number {
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    font-size:21px;
    text-align:center;

}
.sub-section .info-cont .info-tit {
    margin-top:44px;
    font-size:25px;
    line-height:35px;
}
.sub-section .info-cont .info-txt {
    margin-top:14px;
    font-size:16px;
    line-height: 25px;
}

.sub-info {
    margin-top:27px;
}
.sub-info dt {
    font-size:18px;
    line-height:38px;
}
.sub-info dd {
    font-size:14px;
    line-height:22px;
}

/* eco mode */
#my-menu {
    margin-top:-100px;
}
#my-menu li {
    margin-bottom:28px;
    padding-right: 10px;
}
#my-menu li a {
    font-size:12px;
}
#my-menu li.active a {

}
#my-menu li a span {
    display:none;
}
.eco-box {
    margin-top:0;
}
#fullpage .page1 {
    padding-top:55px;
}
#fullpage .page1 .sub-info {
    margin-top:0;
}
#fullpage .page6 .eco-box {
    margin-top:14px;
}
#fullpage .section {
    padding-top:55px;
    margin-bottom:50px;
}
#fullpage .section .wrap {
    padding:0 40px 0 20px;
}
#fullpage .sec-box .sec-tit {
    font-size:25px;
    line-height:35px;
}
#fullpage .sec-txt {
    font-size: 14px;
    line-height:23px;
}
#fullpage .sec-box {
    margin-top:45px;
}
#fullpage .sec-box:last-child {
    padding-bottom:49px;
}
#fullpage .tbl th,
#fullpage .tbl td {
    font-size:14px;
    line-height:23px;
}
#fullpage #footer .wrap {
    padding:0;
}
.eco-box .eco-list {
    display: flex;
    width: 100%;
    align-items: center;
}
.eco-box .eco-cont dt {
    line-height:28px;
    font-size:16px;
}
.eco-box .eco-cont dd {
    line-height:22px;
    font-size:16px;
}
.eco-box .eco-cont .exam {
    margin-top:12px;
    font-size:16px;
}
.eco-box .eco-cont .clear-fix .f-gray {
    font-size:18px;
    line-height:28px;
}
.eco-box .eco-cont .clear-fix > div {
    float:none;
}
.eco-box .eco-list .eco-cont {
    padding:27px 0;
    width:100%;
    border-bottom:1px solid #e2e2e2;
}
.eco-box .eco-list .eco-cont.last {
    border-bottom:0 none;
}
.eco-box .eco-list .eco-cont .solo-txt {
    padding:18px 0;
}
.eco-box .eco-list .thumb {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-width: 65px;
}
.eco-box .eco-list .thumb > span {
    background-image: url(/hyundai/images/bg_ecoset.png);
    background-repeat: no-repeat;

    width: 45px;
    height:45px;
    background-size:200px 600px;
}
.eco-list .thumb .img01 {
    background-position: 0 -165px;
}
.eco-list .thumb .img02 {
    background-position: -50px -165px;
}
.eco-list .thumb .img03 {
    background-position:-100px -165px;
}
.eco-list .thumb .img04 {
    background-position:-150px -165px;
}
.eco-list .thumb .img05 {
    background-position:0 -215px;
}
.eco-list .thumb .img06 {
    background-position:-50px -215px;
}
.eco-list .thumb .img07 {
    background-position:-100px -215px;
}
.eco-list .thumb .img08 {
    background-position:-150px -215px;
}
.eco-list .thumb .img09 {
    background-position:0 -265px;
}
.eco-list .thumb .img10 {
    background-position:-50px -265px;
}
.eco-list .thumb .img11 {
    background-position:-100px -265px;
}
.eco-list .thumb .img12 {
    background-position:-150px -265px;
}
.eco-list .thumb .img13 {
    background-position:0 -315px;
}
.eco-list .thumb .img14 {
    background-position:-50px -315px;
}
.eco-list .thumb .img15 {
    background-position:-100px -315px;
}
.eco-list .thumb .img16 {
    background-position:-150px -315px;
}
.eco-box .eco-list .thumb .img17 {
    margin-right:20px;
    height:48px;
    background-position:0 -365px;
}
.eco-list .thumb .img18 {
    background-position:-50px -365px;
}
.eco-box .eco-list .thumb .img19 {
    height:48px;
    background-position:-100px -365px;
}
.eco-list .thumb .img20 {
    background-position:-150px -365px;
}

.eco-box .site-link {
    margin-top:13px;
}
.eco-box .site-link li {
    border:1px solid #e2e2e2;
    border-left:0 none;
    width:50%;
    height:80px;
}
.eco-box .site-link li:first-child {
    border-left:1px solid #e2e2e2;
}
.eco-box .site-link.multi {
    flex-wrap: wrap;
}
.eco-box .site-link.multi li:nth-child(2n+1) {
    border-left:1px solid #e2e2e2;
}
.eco-box .site-link.multi li:nth-child(n+3) {
    border-top:0 none;
}
.eco-box .site-link li a {
    width:100%;
    height:100%;
}
.eco-box .site-link li a img {
    width:100%;
    max-height: 58px;
}
.eco-box .img-box {
    padding:9px;
}
.eco-box .img-box img {
    width: 100%;
}
.link-box {
    flex-wrap: wrap;
}
.link-box .link-list {
    margin-bottom:10px;
    padding: 18px 25px;
    width: 100%;
}
.link-box .link-list .link-cont p {
    margin-bottom:5px;
    font-size: 18px;
    line-height: 22px;
}

.link-box .link-list .thumb > span {
    background-size: 200px 600px;
}
.link-box .link-list .thumb .img01 {
    width: 88px;
    height: 53px;
    background-position:0 -415px;
}
.link-box .link-list .thumb .img02 {
    width: 88px;
    height: 59px;
    background-position:0 -475px;
}
.link-box .link-list .thumb .img03 {
    width: 88px;
    height: 46px;
    background-position:0 -540px;
}
.sec-box .support-txt {
    font-size:14px;
}
.caution {
    margin-top:20px;
    padding-left:10px;
    font-size:16px;
    line-height:20px;
}
.caution + p {
    margin-top:5px;
}
.caution::before {
    content:"-";
    position: absolute;
    top:0;
    left:0;
}

.caution.detail {
    font-size:12px;
}

.caution.detail.detail::before {
    display:none;
}

.privacy-wrap {
    padding:30px 20px 50px;
}
.privacy-wrap h3 {
    margin-top:20px;
    font-size:18px;
    line-height: 1.2;
}
.privacy-wrap p {
    margin-top:20px;
    padding-left:15px;
    line-height:20px;
}
.privacy-wrap small {
    font-size:14px;
}
.privacy-wrap .tbl {
    overflow-x: auto;
}
.privacy-wrap .cont-box .tbl table {
    min-width: 700px;
}

.privacy-wrap .cont-box {
    margin-left:10px;
}
.privacy-wrap .bul-txt {
    
}
.privacy-wrap .sub-txt {
    margin-top:3px;
}
.privacy-wrap .txt-list {
    padding-left:16px;
    margin-top:10px;
}
.privacy-wrap .txt-list li {
    margin:5px 0;
}
.privacy-wrap .tbl {
    margin-top:13px;
    padding:0 20px
}
.privacy-wrap .txt-list li {
    margin:15px 0;
}
.privacy-wrap .txt-list li li {
    margin:7px 0;
    padding-left:10px;
}
.privacy-wrap .small-list {
    padding-left:10px;
}
.privacy-wrap .small-list li {
    padding-left:15px;
    font-size:15px;
    line-height: 1.5;
}
.privacy-wrap .small-list li li {
    padding-left:0;
}
.privacy-wrap .small-list li .bul {
    position: absolute;
    top:0;
    left:0;
}
.privacy-wrap .btn.arrow {
    padding-left:0;
    white-space: normal;
    text-align: left;
}


/* 차량 데이터 관리 */
.cont.mycar {
    padding:20px 0 50px;
}
.cont.detail {
    min-height: calc(100vh - 253px);
}
.cont .sec-top {
    margin:11px 0 36px;
}
.cont .sec-top .sub-tit {
    margin: 19px 0 5px;
    padding: 0 20px;
    font-size: 18px;
    line-height: 1.4;
}
.cont .sec-top .info-txt {
    padding:0 20px;
    font-size:14px;
    line-height: 1.4;
}
/* 2022-09-21 */
.car-list > ul > li {
    position: relative;
    padding: 0px 20px 20px;
}
.car-list > ul > li .list-wrap {
    padding:15px;
    border:1px solid #e2e2e2;
    box-shadow: 6.428px 7.66px 10px 0px rgba(137, 137, 137, 0.08);
}
.car-list > .sub-tit::before,
.third-wrap > .sub-tit::before {
    display: block;
    content:'';
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:10px;
    background:#ececec;
}
.car-list > ul > li > div {

}
.car-list .car-info .car-name {
    
    margin-bottom:7px;
    font-size:18px;
    line-height: 25px;
}
.car-info {
    margin-top:15px;
}
.car-info dl > * {
    display: inline-block;
    font-weight: 300;
    color:#676767;
    font-size: 14px;
    line-height:20px;
}

.car-list .agree-wrap {
    margin-top:10px;
}
.car-list .agree-wrap li {
}
.car-list .agree-wrap li:last-child {
}
.car-list .agree-wrap li.total-area {
    border:0 none;
}
.car-list .agree-wrap li a {
    display: inline-block !important;
    font-size:15px;
    line-height: 1.4;
    padding: 5px 30px 5px 0;
}
.car-list .agree-wrap li a:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:14px;
    margin-top:-5px;
    width:8px;
    height:8px;
    border-top:2px solid #000;
    border-right:2px solid #000;
    transform: rotate(45deg);
}
.car-list .agree-wrap li a .badge {
    float:right;
}

/* 3rd 파티 */
.car-list > .sub-tit,
.third-wrap > .sub-tit {
    padding:43px 20px 13px;
    position: relative;
    font-size:18px;
    margin-bottom:12px;
}
.third-wrap > .info-txt {
    margin-top:-20px;
    padding:0 20px;
    font-size:14px;
    line-height:1.4;
}
.card-box {
    margin:37px auto 0;
    width:100%;
}
.card-box .card-list {
    margin: 0 20px 15px 20px;
    width: 100%;
    transition: all 0.2s ease-in-out;
}
.card-box .card-list .card-head {
    width: 100%;
    padding: 15px;
    position: relative;
    cursor: pointer;
    text-align: left;
    text-transform: uppercase;
    text-align: left;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    background:#f6f3f2;
}
.card-box .card-list .card-tit {
    font-size:18px;
    line-height: 1.4;
}
.card-box .card-list .date {
    display: block;
    margin-top:10px;
}
.card-box .card-list .arrow {

}
.card-box .card-list .arrow::after {
    bottom: 10px;
    right: 15px;
    width: 8px;
    height: 8px;
    border-top: 1px solid #acaaa9;
    border-right: 1px solid #acaaa9;
}
.card-box .card-list.is-expanded .card-head {
    box-shadow: 4px 7px 10px 0px rgba(144, 119, 111, 0.12);
}
.card-box .card-list.is-expanded .card-head {
    border:1px solid #666;
    background-color:#fff;
}
.card-box .card-list.is-expanded .card-head:after, .card-box .card-list.is-expanded .card-head:before {
    top: 100%;
    left: calc(100% - 20px);
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.card-box .card-list.is-expanded .card-head:after {
    border-color: rgba(255, 255, 255, 0);
    border-top-color: #ffffff;
    border-width: 8px;
    margin-left: -8px;
}
.card-box .card-list.is-expanded .card-head:before {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #333;
    border-width: 9px;
    margin-left: -9px;
}
.card-box .card-list.is-expanded .arrow {
    display:none;
}
.card-cont {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
}
.card-list.is-collapsed .card-cont {
    max-height: 0;
    min-height: 0;
    overflow: hidden;
    margin-top: 0;
    opacity: 0;
}
.card-list.is-expanded .card-cont {
    max-height: 1000px;
    min-height: 100px;
    overflow: visible;
    margin-top: 20px;
    opacity: 1;
    padding:40px 20px 20px;
    border:1px solid #666;
    box-sizing: border-box;
    box-shadow: 4px 7px 10px 0px rgba(144, 119, 111, 0.12);
}

.card-list:nth-of-type(2n+2) .card__expander {
    margin-left: calc(-100% - 30px);
}

.card-list:nth-of-type(2n+3) {
    clear: left;
}

.card-cont {
    width: calc(100%);
}
.card-cont .close {
    top:20px;
    right:20px;
    width: 15px;
    height: 15px;
    background-position: -183px -104px;
    background-size: 200px 1000px;
}
.card-box .card-list .acco-sub {
    line-height:23px;
    font-size:14px;
}
.card-box .card-list .acco-sub .tbl {
    margin-top:13px;
}
.card-box .card-list .acco-sub .b-list {
    margin-top:10px;
}
.card-box .card-list .acco-sub .tbl .confirm-txt {
    margin-top:27px;
    font-size:16px;
}
.card-box .card-list .acco-sub .tbl .btn-wrap {
    margin-top:20px;
}

.no-car {
    padding:60px 0 60px;
}
.no-car .no-thumb {
    margin-bottom:40px;
    width:57px;
    height:98px;
    background-position: -144px -296px;
    background-size: 200px 1000px;
}
.no-car .m-block {
    display: block;
}
.caution-box {
    padding:20px 20px;
    margin:15px 20px 40px;
    line-height: 1.4;
}
.caution-box .no-thumb {
    margin-right:20px;
    width:41px;
    height:42px;
    background-position: -100px -415px;
    background-size:200px 600px;
}
.caution-box > ul {
    margin-top:9px;
}
.caution-box > ul > li {
    font-size:14px;
    line-height:20px;
}

.acco-wrap {
    margin-top:26px;
}
.acco-wrap > ul > li {
    border-bottom:1px solid #e2e2e2;
}
.acco-wrap a.acc-tit {
    display: flex;
    align-items: center;
    padding:15px 70px 15px 20px;
    line-height:1.2;
    font-size:16px;
}
.acco-wrap a.acc-tit::after {
    top: 50%;
    right: 20px;
    margin-top:-10px;
    width: 9px;
    height: 9px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}
.acco-wrap a.acc-tit .status {
    margin-top:-10px;
    right: 50px;
    width: 20px;
    height: 20px;
}
.acco-wrap > ul > li.active a {
}
.acco-wrap > ul > li.active > a::after {
    margin-top:-5px;
}
.acco-wrap li .cont-area {
    padding:23px 20px;
    font-size:14px;
    line-height:23px;
}
.acco-wrap li .cont-area .link {
    margin-top:10px;
    font-size:14px;
}
.acco-wrap li .cont-area .agree-info-txt {
    margin-top:10px;
    text-align:right;
}
/* 동의상태 추가 [s] */
.acco-wrap li .cont-area .agree-status {
    align-items: center;
    margin:15px 0;
    padding:10px 15px;
}
.acco-wrap li .cont-area .agree-status .left-side {
    max-width: 70%;
}
.acco-wrap li .cont-area .agree-status .right-side {
    max-width: 30%;
}
.acco-wrap li .cont-area .agree-status .agree-result .status {
    margin-left:10px;
    width:20px;
    height:20px;
}
/* 동의상태 추가 [e] */
.acco-wrap li .agree-wrap {
    margin-bottom:13px;
}
.acco-wrap li .agree-tit {
    font-size:15px;
    line-height:23px;
}
.acco-wrap li .switch {
}
.acco-wrap .sub-toggle > ul > li {
    margin-bottom:10px;
    box-shadow: 8px 14px 20px 0px rgba(144, 119, 111, 0.12);
}
.acco-wrap .sub-toggle > ul > li > a {
    height:50px;
    line-height:50px;
}
.acco-wrap .sub-toggle > ul > li > a:after {
    top:14px;
}
.acco-wrap .sub-toggle > ul > li.active > a:after {
    top:24px;
}
/* table */
.tbl .tbl-tit {
    font-size: 21px;
    margin-bottom:18px;

}
.tbl table {
}
.tbl th,
.tbl td {
    padding:13px 20px;
}
.tbl th {
}
.tbl th:first-child,
.tbl td:first-child {
}

.b-list li {
    padding-left:14px;
}
.b-list li:after {
    margin-top:-1px;
    width:6px;
    height:1px;
}


/* 공지사항 */
.cont.notice {
    min-height: calc(100vh - 253px);
}
.search-box {
    padding:30px 20px;
}
.search-box .search-wrap {
}
.search-box .search-wrap > div {
}
.search-box .search-wrap .select-box {
    display: none;
}
.search-box .search-wrap  .ip-search {

}
.notice-wrap {
}
.notice-wrap .notice-list {
    border-top:1px solid #adadad;
}
.notice-wrap .notice-list ul {

}
.notice-wrap .notice-list ul li {
    padding:24px 20px;
    border-bottom:1px solid #e2e2e2;
}
.notice-wrap .notice-list ul li a {
    max-width:100%;
    font-size:16px;
    font-weight: 400;
}
.notice-wrap .notice-list ul li .noti-util {
    margin-top:13px;
    position: relative;
}
.notice-wrap .notice-list ul li .noti-util .file {
    position: absolute;
    left:66px;
    margin-top:1px;
    margin-left:21px;
    width:12px;
    height:13px;
    background-position: -144px -12px;
    background-size:200px 1000px;
}
.notice-wrap .notice-list ul li .noti-util .file:after {
    top:3px;
    left:-12px;
    width:1px;
    height:10px;
}
.notice-wrap .notice-list ul li .date {
    font-size:14px;
}
.notice-wrap .notice-detail {
    overflow-x: auto;
}
.notice-wrap .notice-detail .detail-top {
    padding: 24px 20px 0;
}
.notice-wrap .notice-detail .detail-top .date {
    margin-top:17px;
    font-size:14px;
}
.notice-wrap .notice-detail .detail-cont {
    padding:42px 20px 45px;
    font-size:14px;
    line-height: 23px;
}
.notice-wrap .notice-detail .detail-cont img {
    width:100%;
}
.notice-wrap .notice-detail .detail-bottom {
    padding:27px 20px;
    border-top:1px solid #e2e2e2;
    border-bottom:1px solid #adadad;
}
.notice-wrap .notice-detail .detail-bottom .down-file {

}
.notice-wrap .notice-detail .detail-bottom .file-tit {
    float:left;
    margin-top:3px;
}
.notice-wrap .notice-detail .detail-bottom .down-file a {
    display:block;
    padding-left:70px;
    line-height:22px;
    word-break: break-all;
}
.notice-wrap .notice-detail .detail-bottom .down-file a + a {
    margin-top:15px;
}

.no-result {
    padding:70px 0 10px;
}
.no-result .thumb {
    width:91px;
    height:92px;
    background-position: -71px -722px;
    background-size: 200px 1000px;
}
.no-result .result-txt {
    margin-top:45px;
    font-size:18px;
    line-height:27px;
    text-align:center;
}

/* tab 메뉴 */
.tab-wrap {
    border-bottom:1px solid #e2e2e2;
}
.tabs {
    margin-bottom:-1px;
}
.tabs .tabs-link {
    padding: 15px 0;
    font-size:16px;
    border-bottom:3px solid transparent;
    background-color: #f6f3f2;
}
.tabs-content .tabs-content-item {
}

/* form */
.input-box {
    width: 100%;
    height:40px;
    border:1px solid #676767;
}
.input-box .ip-search {
    width: 90%;
    padding:10px 12px 8px;
    font-size:16px;
    box-sizing: border-box;
}

.form-switch {
    width: 40px;
    height: 23px;
    border-radius: 40px;
}

.form-switch:after {
    top: -2px;
    left: -2px;
    width: 19px;
    height: 19px;
}
.switch input:checked + .form-switch:after {
    left: calc(100% - -2px);
}


/* badge */
.badge {
    min-width: 27px;
    height:17px;
    line-height:18px;
    font-size:10px;
}
.badge.on {}

/* 더보기 */
.paging {
    position: relative;
    margin: 0;
    height: 37px;
    background-color: #f0f0f0;
    vertical-align: middle;
    text-align: center;
    cursor: pointer;
}
.paging .btn-more {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    font-family: "HyundaiSansHeadKR", sans-serif;
    font-weight: 300;
    font-size: 14px;
    line-height: 37px;
    background-color: transparent;
    color: #002c5f;
}
.paging .btn-more::after {
    display: block;
    content: '';
    position: absolute;
    top:15px;
    left:50%;
    margin-left:25px;
    width:11px;
    height:7px;
    background: url('/hyundai/images/bg_more.png') no-repeat;
    background-size: 11px 7px;
}

/* Button */
.btn-wrap {
    margin-top:30px;
}
a.btn,
button.btn {
    min-width: 70px;
    height: 33px;
    padding: 0 25px;
    font-size: 14px;
    line-height: 33px;
}
a.btn {
    min-width: 30px;
}


.btn + .btn {
    margin-left: 5px;
}

.btn.arrow {
    padding: 0 10px 0 5px;
    height:auto;
    font-size: 16px;
    line-height: 22px;
    background-color: #fff;
}
.btn.arrow:before {
    width: 6px;
    height: 6px;
    margin-top: -3px;
}

.btn.disable {
    color: #999999;
    cursor: not-allowed;
}
.btn.disable:before {
    border-top: 1px solid #999;
    border-right: 1px solid #999;
}
a.link {
    padding-right:10px;
}
a.link:before {
    width: 6px;
    height: 6px;
    right: 0;
    margin-top: -3px;
}
/* select box */
.select-wrap {
    padding:30px 20px 0;
}
.select-box {
    height: 50px;
}

.select-box .select-name {
    padding:0 19px;
    font-size:18px;
    line-height:50px;
}
.select-box .select-name::after {
    top: 14px;
    right: 20px;
    width: 10px;
    height: 10px;
    border-top: 2px solid #000;
    border-right: 2px solid #000;
}

.select-box .option-list {
    position:fixed;
    bottom:0;
    left:0;
    width: 100%;
    border:0 none;
    z-index: 3;
}

.select-box.active .option-list {
    padding:10px 0;
    max-height: 280px;
}
.select-box.active .option-list .option-top {
    position: relative;
    padding:0 20px;
    height:67px;
    line-height:67px;
    font-size:21px;
    border-bottom:1px solid #676767;
}
.select-box.active .option-list .option-top .pop-close {
    display: block;
    position: absolute;
    background-image: url('/hyundai/images/bg_iconset.png');
    background-repeat: no-repeat;
    text-indent: -9999em;
    cursor: pointer;
    right: 20px;
    top: 25px;
    width: 15px;
    height: 15px;
    background-position: -183px -104px;
    background-size: 200px 1000px;
}
.select-box .option {
    margin-right:5px;
    overflow-y: auto;
    max-height: 200px;
}
.select-box .option > li a {
    padding: 20px;
    font-size:16px;
    font-family: "HyundaiSansHeadKR", sans-serif;
    border-bottom:1px solid #f0f0f0;
}
.select-box .option > li a.selected {
    color:#002c5f;
    font-weight: 400;
}

/* 푸터 */
#footer {
    padding:20px;
}
#footer .footer-top {
    padding: 5px 0 18px;
    border-bottom:1px solid #2f2e2e;
}
#footer .privacy a {
    font-size:14px;
}
#footer .footer-top dl {
    margin-top:14px;
    font-size:13px;
}
#footer .footer-top dt {

}
#footer .footer-top dd {

}
#footer .footer-top dd a {
    font-size:13px;
}
#footer .footer-top dd span:first-child {
    padding:0 15px 0 3px;
}
#footer .footer-top dd span:first-child::after {
    width: 1px;
    height: 11px;
    right: 6px;
    top:3px;
}
#footer .foot-logo {
    display:block;
    margin:18px auto 8px;
    width: 45px;
    height:23px;
    text-align:center;
    background: url('/hyundai/images/f_logo_m.png') no-repeat;
    background-size: 45px 23px;
}
#footer .copyright {
    font-size:11px;
    text-align:center;
}

/* 에러페이지 */
.error-box {
    height: calc(100vh - 55px);
}
.error-box .thumb {
    width: 97px;
    height:87px;
    background-position: 0 -802px;
    background-size: 200px 1000px;
}
.error-box .error-txt {
    margin-top:45px;
    font-size:19px;
    line-height:27px;
    text-align:center;
}
.check-box {
    min-height: calc(100vh - 323px);
}
.check-box .thumb {
    margin-top:40px;
    width: 92px;
    height:94px;
    background-position: 0 -891px;
    background-size: 200px 1000px;
}
.check-box .check-txt {
    margin-top:45px;
    font-size:19px;
    line-height:1.7;
    max-width: 90%;
    text-align:center;
}

.ico.search {
    width: 19px;
    height:18px;
    background-position: -106px -293px;
    background-size:200px 1000px;
}
/* Popup */
.popup-box.lay {
    left:50%;
    bottom:0;
    width: 100%;
    min-height:70%;
}
.popup-box.over .pop-cont {
    padding:0 5px 10px;
    max-height:75vh;
    overflow-y: auto;
}
.popup-box.lg {
}
/* 개인정보 처리방침 팝업 */
#privacy-wrap .popup-box,
#privacy-wrap01 .popup-box,
#privacy-wrap02 .popup-box {
    top:0 !important;
    left:50%;
    right:0;
    height:100vh;
    margin-top:0 !important;
    box-sizing: border-box;
    border-radius: 4vmin;
}
#privacy-wrap .popup-box.over {
    top: 2.5vh !important;
    width: 90%;
    height:calc(100vh - 5vh);
    overflow: hidden;
}
.popup-box .pop-head {
    padding: 20px 40px 20px 20px;
    line-height: 1.4;
}
.popup-box .pop-head .tit {
    font-size: 21px;
}
.popup-box .pop-head .pop-close {
    right: 20px;
    top: 30px;
    width: 15px;
    height: 15px;
    background-position:-183px -104px;
    background-size:200px 1000px;
}
.popup-box .pop-cont {
    overflow-y:auto;
    padding:35px 15px 0 20px;
    font-size:16px;
    max-height:300px;
}
#privacy-wrap .popup-box .pop-cont {
    max-height:90%
}
#privacy-wrap .popup-box .pop-cont.scroll {
    padding:10px;
}
.popup-box .pop-cont.scroll .tbl {
    min-width: 800px;
}
#privacy-wrap .popup-box .pop-cont.scroll .tbl {
    font-size: 13px;
}
#privacy-wrap .tbl th {
    padding:8px;
}
#privacy-wrap .tbl td {
    padding:8px;
}
.popup-box .block {
    display: block;
}
.popup-box .pop-cont .pop-tit {
    margin-bottom:20px;
    font-size:25px;
    line-height:35px;
}
.popup-box .pop-cont .pop-txt {
    line-height:23px;
    margin-bottom:20px;
}
.popup-box .pop-cont .tbl {
    line-height: 1.2;
    font-size:13px;
}
.popup-box .pop-cont .fix-head {
    min-width: 800px;
}
#over-pop02 .pop-cont .fix-head,
#over-pop03 .pop-cont .fix-head {
    min-width: 100%;
}
.popup-box .pop-cont .fix-head .tbl {
    max-height: 75vh;
}
.popup-box .pop-cont .tbl th,
.popup-box .pop-cont .tbl td {
    padding:5px 7px;
    line-height:1.2;
}
#privacy05 .pop-cont .fix-head tbody tr:first-child td,
#privacy06 .pop-cont .fix-head tbody tr:first-child td {
    padding-top:30px;
}
.popup-box .pop-cont .caution {
    margin-top:5px;
    font-size:14px;
}
.popup-box .pop-cont .b-list li:after {

}
.popup-box .pop-foot {
    padding:30px 20px 40px;
}
#privacy-wrap .popup-box .pop-foot {
    display: none;
}

/* tooltip */
.tooltip {
    margin-top:10px;
}
.tooltip .tooltip-tit {
    padding-bottom: 5px;
}
.tooltip .tooltip-tit .icon-warn {
    width:20px;
    height:20px;
}
.tooltip .tooltip-cont {
    width: 300px;
    padding:20px 20px 0;
    box-shadow: 0 10px 20px #999;
}
.tooltip .tooltip-cont::before {
    width: 10px;
    height: 10px;
    right:25px;
    top: -6px;
}

@media screen and (min-width: 360px), (max-width: 760px) {

    @media all and (orientation: landscape) {
        .popup-box .pop-cont {
            max-height:130px;
        }
    }
}
@media screen and (max-width: 359px) {
    .quick-box .quick-link {
        padding:30px 20px;
    }
    .tip-box .tip-cont .tip-text {
        font-size:17px;
    }
    .safe-box .safe-cont li a {
        font-size: 15px;
    }
    .safe-box .safe-cont li a > span {
        display:inline !important;
    }
    .safe-box .safe-cont li a::after {
        margin-right:-20px;
    }
}