@charset "utf-8";

/* common */
body,
.contentWrap .contTop {background-color:#fff}
.topBgTxtArea {display:none !important;}

:root {
    --cont-max-width:1120px;
}

/* h */
.pip-title{font-size:44px;line-height:54px;font-weight:500;margin-bottom:10px;letter-spacing:-0.01em}
.pip-subTitle{font-size:30px;line-height:40px;font-weight:500;margin-bottom:26px;letter-spacing:-0.02em}
.pip-desc{font-family:'HyundaiTextRegular';line-height: 28px;font-weight:400;}
.pip-txtWrap{margin-bottom:58px}

/* text column */
.txt-col{display:flex;flex-wrap: wrap;justify-content:space-between;align-items:stretch;width: 100%;}
.txt-col .pip-title{margin-bottom:0}
.txt-col__elem{text-align:left}
.txt-col__elem + .txt-col__elem {width:55%;}
.txt-col__elem .pip-subTitle{margin-bottom:18px}
.txt-desc{font-size:16px;line-height:28px;}
.txt-info{font-family:'HyundaiTextRegular';font-size:24px;line-height:28px;font-weight:400;}
.txt-col.txt-col--half {gap:128px 32px;}
.txt-col--half .txt-col__elem{width:calc(50% - 16px);}

/* List */
.li-asterisk li{font-size:14px;line-height:28px;text-indent: -8px;padding-left:8px;text-align:left}
.li-asterisk li::before {content:"* "}

/* section */
.section-media{width:100%;max-width:var(--cont-max-width);margin:100px auto}
.section-media__description{margin:0 0 50px;text-align:center}
.section-media__cont {position: relative;}
.section-media__cont + .section-media__description {margin-top: 120px;}
.section-media__elem {text-align:center}
.section-media__elem .p-asterisk {margin-top:37px;font-size:16px;line-height:28px;text-indent: -8px;padding-left:8px;}
.section-media__elem .p-asterisk::before {content:"* "}

.section-col {display: flex; align-items: center;}
.section-col--reverse {flex-direction: row-reverse;}
.section-accordion {display: none; height: 0;}
.section-accordion.is-active {display: block; height: auto;}

.section-col__elem {width: 50%;}
.section-col__elem img {width: 100%;display: block;}
.section-col__txt {padding:0 70px;}

/* button area */
.section-media__elem + .btn-area {margin-top: 80px;}
.btn-area {position: relative;width: 100%; height: auto; text-align: center; margin: 0 auto;}
.btn-area::before {display: block; position: absolute; left: 0; top: 20px; width: calc(50% - 46px); height: 1px;background: #000;content: '';}
.btn-area::after {display: block; position: absolute; right: 0; top: 20px; width: calc(50% - 46px); height: 1px;background: #000;content: '';}
.accord-btn--open {position: relative; width: 40px; height: 40px; background: url(/etc/designs/hyundai/ww/en/images/brandstory/btn_show_sp.png) no-repeat; vertical-align: middle;}
.accord-btn--close {position: relative; width: 40px; height: 40px; background: url(/etc/designs/hyundai/ww/en/images/brandstory/btn_show_sp.png) no-repeat; background-position: -40px; vertical-align: middle;}

/* Sub Key-Visual Area */
.sub-keyVisual {position: relative;}
.sub-keyVisual__title {position:absolute;left:calc(50% - var(--cont-max-width)/2);top:0;max-width: var(--cont-max-width);width:100%;padding-top:148px;z-index:5}
.sub-keyVisual__title h2 {font-family:"HyundaiMedium";font-size:58px;line-height:1;color:#fff;}
.sub-keyVisual__title h2 > span {display:block;font-family:'HyundaiMedium';font-size:34px;line-height:28px;margin-bottom:25px}
.sub-keyVisual__media img,
.sub-keyVisual__media video{object-fit: cover;width: 100%;height: auto;}
.section-media.section-bg:last-child{margin-bottom:0}

/* Count number */
.count-num {position: absolute;left: calc(50% - var(--cont-max-width)/2);bottom: 50px;max-width: var(--cont-max-width);width: 100%;color: #fff;}
.count-num--row {display: flex; flex-direction: column; justify-content: space-between;gap: 80px;}
.count-num__section {position:relative}
.count-num__section h3 {font-size:30px;line-height:40px;text-align:center;}
.count-num__section h3 + .count-num__wrapper {margin-top:50px}
.count-num__wrapper {position: relative;display: flex;gap: 118px;} 
.count-num__item {width:auto;text-align:center}
.count-num__value {font-size: 80px;line-height: 65px;font-weight: normal;display: inline-block;}
.count-num__unit {font-size: 20px;line-height: 28px;font-weight: 500;margin-left: 8px;}
.count-num__item:nth-child(1) strong {min-width:153px}
.count-num__item:nth-child(2) strong {min-width:104px}
.count-num__section:nth-child(2) .count-num__item:nth-child(1) strong {min-width:122px}
.count-num__section:nth-child(2) .count-num__item:nth-child(2) strong {min-width:127px}


@media print, screen and (min-width: 741px) and (max-width: 20000px) {
    .topArea .sharing {top: 120px;}
    .navigationTabWrap.fixed {z-index: 100;}

    /* Count number */
    .count-num__info {display:inline-block}
    .count-num__value + .count-num__info,
    .count-num__unit + .count-num__info {margin-top:16px;}
    .count-num__section + .count-num__section {width:43%}
}


/* Mobile */
@media screen and (min-width:0) and (max-width:740px){
    /* common */
    .navigationTabWrap.fixed {z-index: 100;}
    .txt-col.align-center-mobile .txt-col__elem{text-align:center}
    [class*="Tit"]:not(.br-m) > br,
    [class*="tit"]:not(.br-m) > br,
    [class*="tit"]:not(.br-m) h1 > br {display: block;}

    /* Sub KV Area */
    .sub-keyVisual.bg-img{height:473px}
    .sub-keyVisual__title {left:0;max-width: 100%;padding:34px 0 0 20px;}
    .sub-keyVisual__title h2 {font-size:35px}
    .sub-keyVisual__title h2 > span {font-size:16px;line-height:21px;margin-bottom:20px}

    /* text column */
    .txt-col {flex-direction:column;}
    .txt-col__elem + .txt-col__elem{width:100%;}
    .txt-col .pip-title {margin-bottom: 8px;}
    .txt-col__elem .pip-subTitle {margin-bottom: 0;}
    .txt-col.txt-col--half {gap:40px;}
    .txt-col--half .txt-col__elem{width:100%}

    /* h */
    .pip-txtWrap{margin-bottom: 30px;} 
    .pip-title{font-size: 26px;line-height: 31px;margin-bottom: 8px;}
    .pip-subTitle{font-size: 16px;line-height: 21px;margin-bottom: 15px;}
    .pip-desc,
    .txt-info{font-size: 14px;line-height: 19px;}

    /* section */
    .section-media{margin:50px auto; padding: 0 15px;}
    .section-media__description{margin:0 0 30px;}
    .section-media__elem img,
    .section-media__elem video {width:100%;height:auto}
    .section-media__elem + .section-media__elem {margin-top: 30px;}
    .section-media__cont + .section-media__description {margin-top: 60px;}
    .section-media + .sub-keyVisual {margin-top:60px}
    .section-media.section-bg{padding:50px 15px 40px;}

    .section-col {flex-direction: column-reverse; gap: 30px;}
    .section-col + .section-col {margin-top: 30px;}
    .section-col .section-col__elem {width:100%;text-align: left;padding: 0}

    /* Count number */
    .count-num {position:relative;left:0;top:0;background-color: #000;padding-top:35px;padding:60px 0;box-sizing: border-box;}
    .count-num--row {gap: 60px;}
    .count-num--half {flex-direction:column;gap:95px;padding-bottom:140px}
    .count-num__section {width:100%}
    .count-num__section h3 {font-size:21px;line-height:26px;}
    .count-num__section h3 + .count-num__wrapper {margin-top:35px;}
    .count-num__wrapper{flex-direction:column;align-items:center;gap:50px;}
    .count-num__unit {margin-left: 7px;}
    .count-num__info {margin-top: 20px;}
    .li-asterisk {padding: 0 25px;}

    .btn-area::before,
    .btn-area::after{top: 15px; width: calc(50% - 41px); }
    .accord-btn--open {width: 30px; height: 30px; background-size: cover;}
    .accord-btn--close {width: 30px; height: 30px; background-size: cover;background-position: -30px;}
    .section-media__elem + .btn-area {margin-top: 30px;}
}


/* tablet */
@media screen and (min-width:741px) and (max-width:1366px){

}