@charset "utf-8";

/**************************************************
프로그램 ID : detail.css
프로그램 명 : Layout Cascading Style Sheets
작  성   자 :
최초 작성일 : 2019/04/09
최종 작성일 :
참고   사항 :
**************************************************/

@import url("https://m.ehyundai.com/app/common/css/swiper.min.css");
@import url("https://m.ehyundai.com/app/common/css/base.css");
@import url("https://m.ehyundai.com/app/common/css/layout.css");
@import url("https://m.ehyundai.com/app/common/css/style.css");


/* 지점안내 (오시는길)
------------------------------------------------------------------------------- */
.map h2 {margin-bottom:10px; font-size:24px;}
.map h2 + p {margin:0 -30px 35px 0; padding:0 30px 35px 0; color:#222; border-bottom:1px solid #e6e6e6;}
.map div#map > img {width:100%;}
.map h3 {margin-bottom:5px; font-size:16px;}
.map ul.note, .mypage ul.note, .culture ul.note {width:100%; padding:30px; background:#f5f5f5; display:block;}
.map #quick {right:20px; bottom:80px;}


/* 회원 - 약관
------------------------------------------------------------------------------- */
.agree#contents, .agree#contents > section {padding:0 !important;}
.agree > section > div {height:calc(100vh - 54px); overflow-y:scroll; -webkit-overflow-scrolling:touch;}
.agree > section > div article {padding:0 30px 120px 30px;}
.agree > section > div header {padding:0;}
.agree > section > div header h1 {width:100%; padding:30px 0 30px 30px; font-weight:700; font-size:18px;}
.agree > section > div h4, .agree > section > div h2 {margin-bottom:12px; font-weight:400; font-size:16px;}
.agree > section > div h4:not(:first-of-type), .agree > section > div h2:not(:last-child) {margin-top:23px;}
.agree > section > div footer, .agree article > div > h3, .agree article > div > h3 + ul {display:none;}
.agree article > div > ol > li {padding-left:17px; text-indent:-17px;}
.agree article > div > h4 + p + ol > li {padding-left:17px;}
.agree article > div > ol > li > ol > li, .agree article > div .tspace02 {padding-left:12px; text-indent:-12px;}

.agree article > div > h2 + ol > li, .agree article > div > p + ol > li {padding-left:0; text-indent:0;}
.agree article > div > h2 + ol > li > p {padding-left:12px;}
.agree article > div > p + ol > li > ol {padding:20px 0;}
.agree article > div > ul {margin-top:18px; padding-top:18px; border-top:1px solid #e6e6e6;}
.agree article > div .tspace02 {margin-top:12px; font-weight:200 !important;}

.agree.personal article > div > ul, .agree.consignment article > div > ol {margin:0 0 28px 0; padding:0 0 28px 0; border-top:0 none; border-bottom:1px solid #e6e6e6;}
.agree.personal article > div > ul + p, .agree.consignment article > div > ol + p {font-size:16px; font-weight:400; color:#222; word-break:keep-all;}
.agree.consignment article > div > ol > li > ul li {padding-left:18px;}
.agree.consignment article > div > ol > li > ul li:before {margin:0 3px 0 -18px; display:inline-block;}
.agree.consignment article > div > ol > li > ul li:nth-child(1):before {content:"(2)";}
.agree.consignment article > div > ol > li > ul li:nth-child(2):before {content:"(3)";}
.agree.personal article > div > ul > li {padding-left:18px;}
.agree.personal article > div > ul > li:before {margin:0 4px 0 -18px; display:inline-block;}
.agree.personal article > div > ul > li:nth-child(1):before {content:"(1)";}
.agree.personal article > div > ul > li:nth-child(2):before {content:"(2)";}
.agree.personal article > div > ul > li:nth-child(3):before {content:"(3)";}
.agree.personal article > div > ul > li:nth-child(4):before {content:"(4)";}


/* 행사안내
------------------------------------------------------------------------------- */
/*서브메인 */
.event .branchChoice {padding:13px 39px;}
/*.event .branchChoice select {padding-right:15px; font-size:16px; font-weight:700; color:#222; background:url(https://m.ehyundai.com/app/images/ico/ico_caret01.png) 100% 50% no-repeat; background-size:auto 7px;}*/
.event .branchChoice span {font-size:13px; text-align:right;}
.event .mainBnr, .event .mainMenu {padding:0 0 50px 0 !important;}
.event .mainBnr:not(.swiper-container-horizontal) {padding-bottom:0 !important;}
.event .mainBnr figure img {width:100%;}
.event .mainBnr figure figcaption {margin-top:-40px; padding:0 30px 28px 30px; display:block;}
.event .mainBnr figure figcaption mark, .culture ul.classList li mark {margin-bottom:14px; padding:5px 8px 4.5px 8px; font-size:13px; font-weight:400; color:#fff; line-height:14px; background:#222; display:inline-block;}
.event .mainBnr ul li.news figure figcaption mark {background:#376155;}
.event .mainBnr ul li.gift figure figcaption mark {background:#6671b7;}
.event .mainBnr ul li.culture figure figcaption mark {background:#9a6c29;}
.event .mainBnr ul li.price figure figcaption mark {background:#d13535;}
.event .mainBnr figure figcaption h2 {height:76px; margin-top:15px;margin-bottom:9px; font-size:32px; line-height:38px; white-space:normal; text-align:left; word-wrap:break-word; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.event .mainBnr figure figcaption dl dt, .culture ul.classList li dl:not(.table) dt, .event .resultList li dl dt {display:none;}
/* 애니메이션 */
.event .mainBnr ul li.swiper-slide-active.nextRight figure figcaption mark {animation:rightIn 0.5s ease-out;}
.event .mainBnr ul li.swiper-slide-active.nextRight figure figcaption h2 {animation:rightIn 0.7s ease-out;}
.event .mainBnr ul li.swiper-slide-active.nextRight figure figcaption dl{animation:rightIn 1s ease-out;}
.event .mainBnr ul li.swiper-slide-active.prevLeft figure figcaption mark {animation:leftIn 0.5s ease-out;}
.event .mainBnr ul li.swiper-slide-active.prevLeft figure figcaption h2 {animation:leftIn 0.7s ease-out;}
.event .mainBnr ul li.swiper-slide-active.prevLeft figure figcaption dl{animation:leftIn 1s ease-out;}
@keyframes rightIn {
  from {margin-left:50px; margin-right:-50px;}
  to {margin-left:0; margin-right:0;}
}
@keyframes leftIn {
  from {margin-left:-50px; margin-right:50px;}
  to {margin-left:0;; margin-right:0;}
}

.event .result {padding:32px 0 17px 0; line-height:14px;}
.event .result:after {clear:both; display:block; content:"";}
.event .result span, .culture > section > p {font-weight:400; color:#222;}
.event .result strong, .culture > section > p strong {font-weight:700; color:#d13535;}
.event .result span > em {display:inline-block;}
.event .result select {float:right; padding-right:17px; font-weight:400; color:#222; line-height:15px; background:url(https://m.ehyundai.com/app/images/ico/ico_caret02.png) 100% 50% no-repeat; background-size:auto 6px; vertical-align:0;}
.event .mainMenu .menuName {position:fixed; top:0; left:0; min-width:100%; padding:15px 30px 13px 30px; background:#f5f5f5; z-index:50;}
.event .mainMenu .menuName menu li.swiper-slide {width:auto !important;}
.event .mainMenu .menuName menu li.swiper-slide:last-child {padding-right:15px;}
.event .mainMenu .menuName.off {position:static; top:auto; left:auto;}
.event .mainMenu .menuName .swiper-slide.on a {position:relative; margin-top:-1px; font-weight:700; color:#222; display:block;}
.event .mainMenu .menuName .swiper-slide.on a:after {position:absolute; top:0px; right:-7px; width:5px; height:5px; background:#222; display:inline-block; content:"";}
.event .mainMenu .menuCont {padding-top:48px;}
.event .mainMenu .menuCont .swiper-slide {padding:0 30px;}
.event .mainMenu .menuCont ul.thumb figure figcaption h2 {padding-right:30px;}
.event .mainMenu .menuCont ul.thumb > li.motion {position:relative; transition:all 0.5s ease-out; transform:translate(0, 30px); overflow:hidden;}
.event .mainMenu .menuCont ul.thumb > li.motionV {transition:all 1s ease-out; transform:translate(0, 0);}
/*.event .mainMenu .menuCont .swiper-slide:nth-of-type(2) ul.thumb figure figcaption {padding-left:14px;}*//* 임시 여백 스타일 */
.event .mainMenu .menuCont .btn.txt.line {margin-top:40px;}
.event .mainMenu .menuName.off + .menuCont {padding-top:0;}
.event #quick {right:30px; bottom:30px;}
.event #quick select:focus {position:relative; width:48px; height:48px; background-color:rgba(51,51,51,0.9); border-radius:50%; background-image:url(https://m.ehyundai.com/app/images/ico/ico_dmList.png); background-size:auto 21px; background-position:50% 50%; background-repeat:no-repeat; vertical-align:middle; display:block;}
.event #quick select option {font-size:14px; background-color:#fff;}
@media only screen and (max-width:320px){
    .event .mainBnr figure figcaption h2 {font-size:28px; line-height:34px; max-height:68px;}
    .event .mainMenu .menuCont ul.thumb figure figcaption h2 {font-size:16px; line-height:20px;}
    .event .result span, .event .result strong, .event .result select {font-size:13px;}
    .event:not(.st01) .result span {max-width:110px; word-break:keep-all; display:inline-block;}
}
@media only screen and (max-width:360px){
    .event:not(.st01) .result span {max-width:148px; word-break:keep-all; display:inline-block;}
}
@media only screen and (max-width:375px){
    .event:not(.st01) .result span {max-width:160px; word-break:keep-all; display:inline-block;}
}

/* 상세페이지 */
.event .mainImg {position:relative;}
.event .mainImg > span {position:absolute; left:10px; bottom:10px; font-size:13px; line-height:13px;}
.event .mainImg .videoArea, .event .changeArea > div.videoArea {position:relative; padding-bottom:56.25%; height:0; overflow:hidden;}
.event .mainImg .videoArea iframe, .event .mainImg .videoArea embed, .event .changeArea > div.videoArea iframe, .event .changeArea > div.videoArea embed {position:absolute; top:0; left:0; width:100%; height:100%;}
.event figure img, .event .mainImg img, .event .barcode img, #popBarcode img {width:100%; vertical-align:top;}
#bImg {top:auto !important;}
.event .barcode img + p, #popBarcode img + p {padding:7px 0 0 5px !important; font-weight:700; color:#222; text-align:center; line-height:14px; letter-spacing:2.5px;}
.event .shareArea {position:relative; float:right; margin-top:-42px; z-index:10;}
.event .shareArea .ico.share {margin-left:-3px;}
.event .fixArea {clear:both; padding:35px 30px !important;}
.event .fixArea h2 {font-size:24px; line-height:30px;}
.event .fixArea h2 + p {padding-top:2px; font-size:13px;}
.event .fixArea table.info, .event.coupon .changeArea {margin-top:20px;}
.event .changeArea {margin-top:-35px;}
.event#contents .changeArea, .event .changeArea > div.videoArea {padding:0 30px 50px 30px;}
.event .changeArea > div.videoArea {margin:20px 0;}
.event .changeArea article:not(:first-of-type), .event .changeArea figure.mainImg {margin-top:10px;}
.event .changeArea .blank {height:auto; line-height:0;}
.event .changeArea .subTit h3 {margin-top:-3px; font-size:20px; line-height:26px; word-break:keep-all;}
.event .changeArea .subTit h3 em {margin:-2px 0 -4px 0; font-size:16px; font-weight:400; line-height:20px; color:#3d5c52; display:block;}
.event .changeArea .subTit h3 em.st01 {font-weight:700; color:#222;}
.event .changeArea .subTit > p {font-size:15px;}
.event .changeArea .subTit + .eventInfo {padding-top:0;}
.event .changeArea .subTit + .eventInfo p {padding-top:3px; font-weight:400; word-break:keep-all;}
.event .changeArea figure figcaption {padding:0 25px 0 25px;}
.event .changeArea figure .btnarea {padding:0 25px 0 25px;}
.event .changeArea .oneProduct {position:relative;}
.event .changeArea .twoProduct {width:calc(100% + 12px); margin:0 -6px; position:relative}
.event .changeArea .twoProduct > * {width:50%; vertical-align:top;}
.event .changeArea .oneProduct {position:relative;}
.event .changeArea .oneProduct > a figure figcaption, .event .changeArea .twoProduct > a figure figcaption {position:relative;}
.event .changeArea .oneProduct > a figure figcaption:before, .event .changeArea .twoProduct > a figure figcaption:before {position:absolute; right:0; top:-35px; width:25px; height:25px; background:url(https://m.ehyundai.com/app/images/btn/btn_plus01.png) 50% no-repeat #f5f5f5; background-size:11px auto; display:block; content:"";}
.event .changeArea .oneProduct figure > span, .event .changeArea .twoProduct figure > span, .event .changeArea .mainImg > span, #popProduct .changeArea figure > span {margin-top:-23px; padding:0 0 10px 10px; font-size:13px; line-height:13px;}
.event .changeArea .oneProduct figure > span.p_productMark.top, .event .changeArea .twoProduct figure > span.p_productMark.top, .event .changeArea .mainImg > span.p_productMark.top, #popProduct .changeArea figure > span.p_productMark.top {position:absolute; top:0; margin-top:0px; padding:10px 0 0 10px;}
.event .changeArea .oneProduct figure figcaption {display:block;}
.event .changeArea .oneProduct figure figcaption, .event .changeArea .twoProduct figure figcaption{margin-top:10px; display:block;}  
.event .changeArea .oneProduct figure figcaption dl > dt, .event .changeArea .twoProduct figure figcaption dl > dt, dl.priceArea > dt {display:none;}
.event .changeArea .oneProduct figure figcaption dl > dd, .event .changeArea .twoProduct figure figcaption dl > dd {font-weight:400; color:#222; font-size:15px !important;}
.event .changeArea .oneProduct figure figcaption dl > dd:not(:first-of-type), .event .changeArea .twoProduct figure figcaption dl > dd:not(:first-of-type) {margin-top:2px;}


/*가로형 추가 20.05.26*/
/*.event .changeArea .oneProductHorizontal > a figure:before {position: absolute;
    right: 0;
    bottom: 0px;
    width: 25px;
    height: 25px;
    background: url(https://m.ehyundai.com/app/images/btn/btn_plus01.png) 50% no-repeat #f5f5f5;
    background-size: 11px auto;
    display: block;
    content: "";}*/
.event .changeArea .oneProductHorizontal > a figure figcaption:before {display:none;}
.event .changeArea .oneProductHorizontal figure{display:table-cell;position:relative;} 
.event .changeArea .oneProductHorizontal figure img{width:50%;float:left; padding-right:6px;} 
.event .changeArea .oneProductHorizontal figure figcaption {display:inline-block; width:50%;} 
.event .changeArea .oneProductHorizontal figure > span {position:absolute;bottom:0;}
.event .changeArea .oneProductHorizontal figure > span.p_productMark.top {position:absolute; top:0; margin-top:0px; padding:10px 0 0 10px;}
.event .changeArea .oneProductHorizontal strong {display:block;}
.event .changeArea .oneProductHorizontal figcaption{margin-top:-2px !important;}
.event .changeArea .oneProductHorizontal figure > span.p_productMark.top {position:absolute; top:0; margin-top:0px; padding:10px 0 0 10px;}
.event .changeArea .oneProductHorizontal figure > span.p_productMark.top.right {position:absolute; top:0; margin-top:0px; padding:10px 0 0 10px; width:50%; right:0;}
.event .changeArea .oneProductHorizontal figure > span.p_productMark.bottom.right {position:absolute; bottom:18px; margin-top:0px; padding:10px 0 0 10px; width:50%; right:0;}
.event .changeArea .oneProductHorizontal figure img.right{width:50%;float:right; padding-right:0px;}/* 20200611 modify*/
.event .changeArea .oneProductHorizontal figure > span.p_productMark {position: absolute;bottom: 5px;}

.event .changeArea dl > dd strong, dl.priceArea > dd strong, .evenahangeArea table td strong, .event .fixArea table td strong {font-size:17px; font-weight:700; color:#d13535; word-break:keep-all;}
.event .changeArea .oneProduct figure figcaption dl > dd:first-of-type strong, .event .changeArea .twoProduct figure figcaption dl > dd:first-of-type strong {color:#222;}
.event .changeArea dl > dd span, dl.priceArea > dd span, .event .changeArea table td span, .event .fixArea table td span {font-size:13px; font-weight:200; color:#898989; text-decoration:line-through;}
.event .changeArea dl > dd span, dl.priceArea > dd span, .event .changeArea table td span, .event .fixArea table td span {padding-right:12px;}
.event .changeArea dl > dd.enlarge span {font-size:17px}
.event .changeArea dl > dd.enlarge strong {font-size:21px}
.event .changeArea .twoProduct figure figcaption dl > dd span {display:block;}
.event .changeArea .twoProduct figure {padding:0 6px;}
.event .changeArea article.noImgProduct + article.noImgProduct {margin-top:8px; border-top:1px dashed #e6e6e6;}
.event .changeArea article.noImgProduct + article.noImgProduct:last-of-type {padding-bottom:0px;}
.event .changeArea hr {margin:10px -30px 0 0; display:block !important;}
.event .changeArea hr.dot {border-style:dashed; overflow:hidden;}
.event .changeArea article.infoArea {padding-top:4px;}
.event .changeArea article.infoArea:first-of-type, .event .changeArea article.infoArea + article.infoArea {padding:0;}
.event .changeArea .btnArea {padding: 0 25px 0 25px;}
.event .changeArea .btnArea .btn {width:100%;}
.event .changeArea .btnArea.long {margin-top:10px;}
.event .changeArea .btnArea.half {display:inline-block; margin-top:10px;width:50%}
.event .changeArea .noteArea h4 {font-weight:400 !important; font-size:14px; color:#666;}
.event .changeArea .noteArea .note {margin-top:10px; padding:21px 20px 22px 20px; background:#f5f5f5;}
.event .changeArea .noteArea .note > li > * {display:inline-block !important;}
.event .changeArea table.info td p, dl.priceArea > dd p {font-size:13px; color:#666;}
.event .changeArea .eventInfo {padding-top:25px}
.event .changeArea .eventInfo p {font-weight:400; color:#222; word-break:keep-all;}
.event .changeArea dl.priceArea {margin-top:5px;}
.event .changeArea .callArea dt {width:68px; padding-right:8px; font-weight:400;}
/* 쿠폰 고정여백 */
.event.coupon .changeArea article.barcode {padding:40px 0 !important;}
.event.coupon .changeArea article.noteArea, .event.coupon .changeArea article.btnArea {padding-top:40px;}
#popShare ul {margin-top:35px; padding:0 10px;}
#popShare ul li {padding:0 20px;}
#popShare ul li .share {color:#666; font-size:14px; text-align:center;}
#popShare ul li .share:before {width:60px; height:60px; margin-bottom:5px; border-radius:50%; background-repeat:no-repeat; background-position:50%; display:block; content:"";}
#popShare ul li .share.kakao:before {background-image:url(https://m.ehyundai.com/app/images/ico/share_kakao01.png); background-color:#f4e14b; background-size:auto 30px;}
#popShare ul li .share.line:before {background-image:url(https://m.ehyundai.com/app/images/ico/share_line01.png); background-color:#00b900; background-size:auto 31px;}
#popShare ul li .share.url:before {font-size:15px; font-weight:700; color:#fff; line-height:60px; background-color:#666; content:"URL";}
#popProduct .changeArea {padding:20px 20px 40px 20px !important;}
#popProduct figure {margin:15px -20px 35px;}
#popProduct figure img {width:100%;}
#popProduct h4 {font-size:24px;}
#popProduct .changeArea .infoArea {padding-top:15px;}
#popProduct .changeArea .eventInfo {padding:8px 0 0 0;}
#popProduct .changeArea .eventInfo p {font-size:13px; font-weight:200; color:#898989;}
.popCoupon p:not(.error) {padding:30px 0 20px 0; font-size:16px; font-weight:700; color:#222;}
.popCoupon span {padding-top:12px; font-size:13px; color:#222; display:block;}
#popStaff p {padding-bottom:0;}
.popCoupon em {padding-top:5px; font-size:13px;}
.popCoupon .btnC {padding-top:38px;}

/*.fixfixed {position:absolute; right:0; bottom:0; left:0; margin-right:auto; margin-left:auto;}*/
@media only screen and (max-width:320px){
    #popShare ul {padding:0;}
    #popShare ul li {padding:0 15px;}
    #head > h1 {margin-right:0;}
}

/* 모바일 DM
------------------------------------------------------------------------------- */
.event {font-family: "Happiness-Sans","Noto Sans KR", sans-serif !important;}
.event h1, .event h2, .event h3, .event h4, .event h5, .event h6 {color:#222 !important; font-weight:700 !important;}
.event.st01, #content-body .event {border-top:0;}
.event.st01 > section {padding-top:35px !important;}
#head button.search01 {float:right; margin-right:10px;}
.event.st01 .none h2 {line-height:24px;}
.event.st01 .none a.btn.txt.st01 {margin-top:18px;}
.event.st01 div.result {padding-top:0;}
.event.st01 div.result a.txt.st01 {float:right;}
.event .resultList {margin-right:-30px;}
.event .resultList li {padding:27px 30px 30px 0; border-top:1px solid #e6e6e6;}
.event .resultList li mark {padding-bottom:4px; font-size:13px; font-weight:400; background:none;}
.event .resultList li.news mark {color:#376155;}
.event .resultList li.gift mark {color:#6671b7;}
.event .resultList li.culture mark {color:#9a6c29;}
.event .resultList li.price mark {color:#d13535;}
.event .resultList li h2 {max-height:48px; font-size:18px; line-height:24px; word-break:keep-all;}
.event .resultList li dl {padding-top:7px;}
.event .resultList + .btn.line {margin-top:10px;}
#popSearch section {font-family: "Happiness-Sans", "Noto Sans KR", sans-serif !important; padding:13px 30px 0 30px;}
#popSearch .searchForm {position:relative;}
#popSearch .searchForm input {height:60px; padding:0 76px 0 16px; font-size:18px; border:2px solid #e6e6e6;}
#popSearch .searchForm button {position:absolute; top:50%; margin-top:-10px;}
#popSearch .searchForm button.search02 {right:16px;}
#popSearch .searchForm button.delete02 {right:52px;}
#popSearch .searchForm input:focus {border-color:#376155;}
#popBranch .scroll {height:calc(100vh - 53px) !important;}
#popBranch .scroll section {font-family: "Happiness-Sans", "Noto Sans KR", sans-serif !important; padding:0 30px; background:#fff;}
#popBranch .scroll section > p {margin:0 -30px; padding:40px 30px; font-size:16px; font-weight:700; color:#222; background:#f5f5f5;}
#popBranch .scroll section h2 {padding:40px 0 0 0; font-size:18px; font-weight:200; color:#666; line-height:18px;}
#popBranch .scroll section h2:last-of-type {margin-bottom:12px;}
#popBranch .scroll section h3 {margin-bottom:12px; font-size:14px; font-weight:400; line-height:14px;}
#popBranch .scroll section h3:last-of-type {margin-top:30px;}
#popBranch .scroll section .branchList:first-of-type {margin-top:20px; padding-bottom:36px; border-bottom:1px solid #e6e6e6;}
#popBranch .scroll section .branchList:last-of-type {padding-bottom:173px;}
#popBranch .scroll section .branchList {margin-right:-4px;}
#popBranch .scroll section .branchList:after {clear:both; display:block; content:"";}
#popBranch .scroll section .branchList li {float:left; width:33.33%; padding:0 4px 4px 0;}
#popBranch .scroll section .branchList li input[type="radio"] {width:22px !important; height:22px !important; margin-right:-22px !important; line-height:1; border:0; vertical-align:middle; display:inline-block; opacity:0;}
#popBranch .scroll section .branchList li input[type="radio"] + label {width:100%; height:50px; margin-top:-22px; padding-left:0 !important; font-size:16px; text-align:center; line-height:50px; color:#222; background:#f5f5f5; display:block;}
#popBranch .scroll section .branchList li input[type="radio"] + label:before {display:none !important;}
#popBranch .scroll section .branchList li input[type="radio"]:checked + label {font-weight:400; color:#fff; background:#376155;}
.btnTop {box-sizing:content-box !important;}
#popProduct figure figcaption {display:none !important;}
.event .changeArea .oneProduct .p_productDesc, .event .changeArea .twoProduct .p_productDesc {display:none;}

/* 문화센터 (강의계약서)
------------------------------------------------------------------------------- */
.culture > select {width:calc(100% - 60px); height:50px; margin:30px 30px 0 30px; padding:0 50px 0 10px; font-size:16px; font-weight:400; color:#222; border:1px solid #e6e6e6; background:url(https://m.ehyundai.com/app/images/ico/ico_caret04.png) 95% 50% no-repeat; background-size:auto 8px;}
.culture > section {padding-top:26px !important;}
.culture ul.classList {margin-top:19px; margin-right:-30px; padding-bottom:10px;}
.culture ul.classList li {padding:30px 30px 30px 0; border-top:1px solid #e6e6e6;}
.culture ul.classList li mark:first-of-type {background:#333;}
.culture ul.classList li mark:last-of-type {margin-left:-3px; background:#376155;}
.culture ul.classList li.complete mark:first-of-type {background:#898989;}
.culture ul.classList li h2 {height:18px; font-size:18px; }
.culture ul.classList li dl:not(.table) {margin-top:10px; font-weight:400; color:#898989;}
.culture ul.classList li dl:not(.table) dd:last-of-type {color:#222;}
.culture ul.classList li dl.table {margin-top:14px; border:1px solid #e6e6e6; background:#f5f5f5;}
.culture ul.classList li dl.table > * {padding:0 15px; font-size:16px; font-weight:400; color:#222; line-height:50px;}
.culture ul.classList li dl.table > dd {width:100px; padding:0; text-align:center;}
.culture ul.classList li:not(.complete) dl.table > dt {display:none;}
.culture ul.classList li:not(.complete) dl.table > dd {color:#fff; background:#376155;}
.culture#contents > .none {height:calc(100vh - 80px);}
.culture.fixBtn section {padding:30px;}
.culture .agreeList {padding:21px 21px 21px 16px; border:1px solid #e6e6e6;}
.culture .agreeList li:not(:first-child) {margin-top:16px;}
.culture .agreeList li {position:relative; padding-right:40px;}
.culture .agreeList li .ico.angle {position:absolute; top:50%; right:0; margin-top:-11px; z-index:10;}
.culture p.note.st01 {margin-top:9px;}
.popAgree {height:calc(100vh - 53px); padding-bottom:0 !important;}
.popAgree .scroll {height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;}
.popAgree .scroll section {padding:30px 30px 70px 30px;}
.popAgree h2 {padding-bottom:12px; font-size:18px;}
.popAgree h3 {padding:28px 0 10px 0; font-size:16px; font-weight:400;}
.popAgree p + p {margin-top:10px;}
.popAgree ol.list01:last-of-type {padding-bottom:10px;}
.popAgree dl.classInfo {padding:23px 20px; border:1px solid #e6e6e6;}
.popAgree dl.classInfo + dl.classInfo {margin-top:12px;}
.popAgree dl.classInfo dt {font-weight:400; color:#222;}
.popAgree dl.classInfo dt:not(:first-of-type) {margin-top:10px;}
.popAgree dl.contractor {padding:6px 0 0 0; color:#222; line-height:25px;}
.popAgree dl.contractor > dt {clear:both; float:left; margin-right:14px; font-weight:700;}
.popAgree dl.contractor > dd {height:auto; overflow:hidden; font-weight:400; display:block;}
.popAgree .line {margin-bottom:20px; padding-bottom:20px !important; border-bottom:1px solid #e6e6e6;}
dl.detail > dd.popAgree {padding-bottom:50px !important;}
.culture.info > section {padding:35px 30px !important; background:#f5f5f5;}
.culture.info > section h2 {padding-bottom:12px; font-size:16px;}


/* 마이페이지
------------------------------------------------------------------------------- */
.mypage, .event, .notice {border-top:1px solid #e6e6e6;}
.main-container .event {border-top:0 none;}
.mypage > section > .btn.txt.st01 {float:right; margin:-24px 0 16px 0;}
.mypage ul.thumb, .mypage ul.pouponList {clear:both;}
.mypage ul.pouponList {min-height:calc(100vh - 292px);}
.mypage ul.pouponList h2 {width:calc(100%- 90px); max-height:44px; white-space:normal; overflow:hidden; text-overflow:ellipsis; word-wrap:break-word; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.mypage ul.thumb {min-height:calc(100vh - 233px);}
.mypage > div:not(.none) {padding:40px 30px 0 30px;}
.mypage > div + section {padding-top:20px !important;}
.mypage > div + div.none {height: calc(100vh - 115px) !important;}
.mypage > div > p + .btn.txt.st01 {float:right; margin:-20px 0 0 0;}
#popCoupon article {padding:30px 0 37px 0;}
#popCoupon article p:first-of-type {padding-bottom:14px; font-weight:700; font-size:16px; color:#222;}
#popCoupon article em {margin-top:8px; font-size:13px; color:#222; display:block;}



/* 메인 (pick)
------------------------------------------------------------------------------- */
#head.pick {padding:34px 30px 0 30px;}
#head.pick h1 {font-size:20px; font-weight:400; color:#000;}
#head.pick h1 strong {font-weight:700; color:#376155;}
#contents.pick > section {padding-top:30px !important;}
#contents.pick #quick {right:20px; bottom:10px;}
#contents.pick .btn.line {margin-top:40px;}
#contents.pick .btn.line:after {display:none;}
@media only screen and (max-width:320px){
    #head.pick h1 {font-size:18px;}
}


/* 공지사항
------------------------------------------------------------------------------- */
.notice .noticelst li {margin-left:30px; padding-right:30px; border-bottom:1px solid #e6e6e6;}
.notice .noticelst li a {padding:23px 36px 23px 0; background:url(https://m.ehyundai.com/app/images/ico/ico_angle02.png) 100% 50% no-repeat; background-size:auto 13px; display:block;}
.notice .noticelst li h2 {max-height:44px; font-weight:400; font-size:16px; line-height:22px; word-break:keep-all;}
.notice .noticelst li p, .notice .noticeView dt p {margin-top:2px; font-weight:400; color:#898989;}
.notice .noticelst + .btnC {margin-top:0; padding:40px 30px 56px 30px;}
.notice .noticeView dt {padding:28px 30px 25px 30px; border-bottom:1px solid #e6e6e6;}
.notice .noticeView dt h2 {font-size:16px; font-weight:400;  line-height:22px; word-break:keep-all;}
.notice .noticeView .detailView {padding:30px;}
.notice .noticeView .detailView img {width:100% !important;}
.event-hidden {width:1px; height:1px; margin:-1px; border:0; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); overflow:hidden; display:inline-block;}


/* 공통 (403 에러페이지), 결과없음, 브릿지 페이지
------------------------------------------------------------------------------- */
.none {width:100vw; height:100vh; display:table;}
#contents > .none {height:calc(100vh - 54px);}
.event#contents > .none {height:calc(100vh - 103px);}
.event.st01#contents > .none {height:calc(100vh - 290px); margin-top:-50px;}/* dm 검색결과없음 페이지 */
.none > * {text-align:center; vertical-align:middle; display:table-cell;}
.none h1, .none h2 {padding-bottom:13px; font-size:18px;}
.none h1 + p, .none h2 + p {font-weight:400; word-break:keep-all;}
/* 브릿지 페이지 */
.bridge {text-align:center; background:#fff;}
.bridge > section {height:100vh; padding:0 30px; overflow:hidden;}
.bridge figure > span {width:70px; height:70px; margin:0 auto; /*border-radius:6px; box-shadow:0 6px 25px rgba(0,0,0,0.15); overflow:hidden;*/ display:block;}
.bridge figure > span img {width:100%;}
.bridge figure figcaption {margin-top:40px; display:block;}
.bridge figure figcaption em {font-size:24px; color:#222;text-indent:2px; letter-spacing:1px; display:block;}
.bridge figure figcaption h2 {margin-top:18px; font-size:30px;}
.bridge figure figcaption button {width:100%; margin-top:50px; display:block;}

@media screen and (min-color-index:0) and (-webkit-min-device-pixel-ratio:0) { @media
{
    .bridge > section {height:calc(100vh - 60px);}
}}

.changeArea2 {padding:0px 0px 50px 0px !important;}
.changeArea2 .subTit, .changeArea2 .infoArea , .changeArea2 .noteArea, .changeArea2 .noImgProduct,.changeArea2 .callArea, .changeArea2  .btnArea{padding-left: 25px !important;padding-right:25px !important;}

/*.changeArea2 figcaption{margin-left:25px;}
.changeArea2 figcaption .p_brandNm, .changeArea2 figcaption .p_productNm{margin-right:25px;}*/

.waterTop {top:10px !important;}