/* Common */ .wrapper.id-common article {border-top: 1px dotted #f00;} .wrapper.id-common article:first-child {border-top: none;} /* Index */ .wrapper.id-index section.main-header-titleEtc, .wrapper.id-index section.main-header-navigationEtc {display: none;} /* Award Introduction */ .wrapper.id-awardIntroduction section.main-header-titleEtc, .wrapper.id-awardIntroduction section.main-header-navigationEtc {display: none;} .wrapper.id-awardIntroduction section.main-body-visual {background-image: linear-gradient(90deg, #ef298c 49.99%, #e81e76 50.01%);} .wrapper.id-awardIntroduction section.main-body-visual .main-body-visual-inner {height: 227px; padding: 122px 24px 47px 24px; background: transparent url('../../assets/images/content/mobile/awardIntroduction-visual-bg_5th.png') no-repeat center center / 360px 100%;} @media (min-width: 778px) { .wrapper.id-awardIntroduction section.main-body-visual .main-body-visual-inner {height: 350px; background: transparent url('../../assets/images/content/pc/awardIntroduction-visual-bg_5th.png') no-repeat center center / 1440px 100%;} } .wrapper.id-awardIntroduction section.main-body-introduction {background-color: #1b1b1b;} .wrapper.id-awardIntroduction section.main-body-introduction .container {padding: 16px 16px 0 16px;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap {display: flow-root;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .number {float: left;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .number .item {width: 38px; padding: 6px 0; border-radius: 50%; background-color: #e51a6c; text-align: center;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .number p.font {color: #fff; font-size: 19px; line-height: 1.37; font-family: 'Gelasio-Bold';} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text {float: left; padding: 6px 0 6px 10px;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text p.font {color: #e51a6c; font-size: 19px; line-height: 1.37; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-awardIntroduction section.main-body-introduction .caption {padding: 19px 2px 0 2px;} .wrapper.id-awardIntroduction section.main-body-introduction .caption p.font {color: #fff; font-size: 13px; line-height: 1.62; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-awardIntroduction section.main-body-introduction .caption p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-awardIntroduction section.main-body-introduction .caption p.font em {color: #e94168;} .wrapper.id-awardIntroduction section.main-body-introduction .movie {padding-top: 17px;} .wrapper.id-awardIntroduction section.main-body-introduction .movie .item {height: 164px;} .wrapper.id-awardIntroduction section.main-body-introduction .movie .item iframe {width: 100%; height: 100%;} @media (min-width: 778px) { .wrapper.id-awardIntroduction section.main-body-introduction .container {padding: 32px 20px 0 20px;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title {line-height: 0; text-align: center;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap {display: inline-block;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .number p.font {font-size: 24px; line-height: 1.09;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text {float: left; padding-left: 12px;} .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text p.font {font-size: 30px; line-height: 0.87;} html[lang="ko_KR"] .wrapper.id-awardIntroduction section.main-body-introduction h3.title .wrap .text p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-awardIntroduction section.main-body-introduction .caption {padding: 20px 0 0 0;} .wrapper.id-awardIntroduction section.main-body-introduction .caption .item {text-align: center;} .wrapper.id-awardIntroduction section.main-body-introduction .caption p.font {font-size: 16px; line-height: 1.75;} .wrapper.id-awardIntroduction section.main-body-introduction .movie {padding-top: 42px;} .wrapper.id-awardIntroduction section.main-body-introduction .movie .item {height: 289px;} .wrapper.id-awardIntroduction section.main-body-introduction .movie .item iframe {width: 100%; height: 100%;} .wrapper.id-awardIntroduction section.common-country-header .container {padding: 100px 20px 0 20px;} } /* How To Vote */ .wrapper.id-howToVote section.main-header-titleEtc, .wrapper.id-howToVote section.main-header-navigationEtc {display: none;} .wrapper.id-howToVote section.main-body-vote {background-color: #1b1b1b;} .wrapper.id-howToVote section.main-body-vote .container {padding: 32px 16px 0 16px;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap {display: flow-root;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .number {float: left;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .number .item {width: 38px; padding: 6px 0; border-radius: 50%; background-color: #e51a6c; text-align: center;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .number p.font {color: #fff; font-size: 19px; line-height: 1.37; font-family: 'Gelasio-Bold';} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .text {float: left; padding: 6px 0 6px 10px;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .text p.font {color: #e51a6c; font-size: 19px; line-height: 1.37; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-vote h3.title .wrap .text p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-howToVote section.main-body-vote .caption.process {padding-top: 26px;} .wrapper.id-howToVote section.main-body-vote .caption.rules {padding-top: 43px;} .wrapper.id-howToVote section.main-body-vote .caption.how {padding-top: 21px;} .wrapper.id-howToVote section.main-body-vote .caption .item {padding: 9px 8px 8px 8px; border: 1px solid #e51a6c; border-radius: 20px; text-align: center;} .wrapper.id-howToVote section.main-body-vote .caption p.font {color: #e51a6c; font-size: 15px; line-height: 1.4; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-vote .caption p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-howToVote section.main-body-vote .content {padding: 16px 2px 0 2px;} .wrapper.id-howToVote section.main-body-vote .content p.font {color: #fff; font-size: 13px; line-height: 1.62; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-vote .content p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-howToVote section.main-body-vote .content p.font em {font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-vote .content p.font em {font-family: 'NanumSquare-Bold';} .wrapper.id-howToVote section.main-body-vote .idolChamp {padding-top: 12px;} .wrapper.id-howToVote section.main-body-vote .idolChamp .item {overflow: hidden; width: 83px; height: 83px; background: transparent url('../../assets/images/content/howToVote-vote-idolChamp.png') no-repeat center center / contain; text-indent: -1000px;} .wrapper.id-howToVote section.main-body-vote .celebChamp {padding-top: 12px;} .wrapper.id-howToVote section.main-body-vote .celebChamp .item {overflow: hidden; width: 83px; height: 83px; background: transparent url('../../assets/images/content/howToVote-vote-celebchamp.png') no-repeat center center / contain; text-indent: -1000px;} .wrapper.id-howToVote section.main-body-vote .download {padding: 16px 0 18px 0;} .wrapper.id-howToVote section.main-body-vote .download .wrap {display: flow-root; margin: 0 -5px;} .wrapper.id-howToVote section.main-body-vote .download .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay, .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore {float: left; padding: 0 5px;} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay .item, .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore .item {overflow: hidden; height: 40px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -1000px; cursor: pointer;} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay .item {width: 133px; background-image: url('../../assets/images/content/howToVote-vote-googlePlay.png');} .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore .item {width: 120px; background-image: url('../../assets/images/content/howToVote-vote-appStore.png');} @media (min-width: 778px) { .wrapper.id-howToVote section.main-body-vote .container {padding: 74px 100px 0 100px;} .wrapper.id-howToVote section.main-body-vote h3.title {line-height: 0; text-align: center;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap {display: inline-block;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .number p.font {font-size: 24px; line-height: 1.09;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .text {float: left; padding-left: 12px;} .wrapper.id-howToVote section.main-body-vote h3.title .wrap .text p.font {font-size: 30px; line-height: 0.87;} .wrapper.id-howToVote section.main-body-vote .caption.process {padding-top: 32px;} .wrapper.id-howToVote section.main-body-vote .caption.rules {padding-top: 70px;} .wrapper.id-howToVote section.main-body-vote .caption.how {padding-top: 70px;} .wrapper.id-howToVote section.main-body-vote .caption .item {padding: 24px 23px 23px 23px; border-radius: 35px;} .wrapper.id-howToVote section.main-body-vote .caption p.font {font-size: 23px; line-height: 0.92;} .wrapper.id-howToVote section.main-body-vote .content {padding: 40px 0 0 0;} .wrapper.id-howToVote section.main-body-vote .content p.font {font-size: 16px; line-height: 1.88;} .wrapper.id-howToVote section.main-body-vote .idolChamp {padding-top: 45px; line-height: 0; text-align: center;} .wrapper.id-howToVote section.main-body-vote .idolChamp .item {display: inline-block; width: 146px; height: 146px;} .wrapper.id-howToVote section.main-body-vote .celebChamp {padding-top: 45px; line-height: 0; text-align: center;} .wrapper.id-howToVote section.main-body-vote .celebChamp .item {display: inline-block; width: 146px; height: 146px;} .wrapper.id-howToVote section.main-body-vote .download {padding: 40px 0 19px 0; line-height: 0; text-align: center;} .wrapper.id-howToVote section.main-body-vote .download .wrap {display: inline-block; margin: 0 -9px;} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay, .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore {padding: 0 9px;} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay .item, .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore .item {height: 69px;} .wrapper.id-howToVote section.main-body-vote .download .wrap .googlePlay .item {width: 229px;} .wrapper.id-howToVote section.main-body-vote .download .wrap .appStore .item {width: 207px;} } .wrapper.id-howToVote section.main-body-rank {background-color: #1b1b1b;} .wrapper.id-howToVote section.main-body-rank .container {padding: 44px 16px 33px 16px;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap {display: flow-root;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .number {float: left;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .number .item {width: 38px; padding: 6px 0; border-radius: 50%; background-color: #e51a6c; text-align: center;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .number p.font {color: #fff; font-size: 19px; line-height: 1.37; font-family: 'Gelasio-Bold';} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .text {float: left; padding: 6px 0 6px 10px;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .text p.font {color: #e51a6c; font-size: 19px; line-height: 1.37; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-rank h3.title .wrap .text p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-howToVote section.main-body-rank .content {padding: 16px 2px 0 2px;} .wrapper.id-howToVote section.main-body-rank .content p.font {color: #fff; font-size: 13px; line-height: 1.62; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-howToVote section.main-body-rank .content p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-howToVote section.main-body-rank .container {padding: 70px 40px 174px 40px;} .wrapper.id-howToVote section.main-body-rank h3.title {line-height: 0; text-align: center;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap {display: inline-block;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .number p.font {font-size: 24px; line-height: 1.09;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .text {float: left; padding-left: 12px;} .wrapper.id-howToVote section.main-body-rank h3.title .wrap .text p.font {font-size: 30px; line-height: 0.87;} .wrapper.id-howToVote section.main-body-rank .content {padding: 40px 0 0 0;} .wrapper.id-howToVote section.main-body-rank .content .item {text-align: center;} .wrapper.id-howToVote section.main-body-rank .content p.font {font-size: 16px; line-height: 1.88;} } /* History Winner */ .wrapper.id-historyWinner section.main-header-titleEtc, .wrapper.id-historyWinner section.main-header-navigationEtc {display: none;} .wrapper.id-historyWinner section.main-body-visual {position: relative; background-color: #1b1b1b;} .wrapper.id-historyWinner section.main-body-visual:after {display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 120px; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #1b1b1b); content: '';} .wrapper.id-historyWinner section.main-body-visual .container {background: transparent url('../../assets/images/content/mobile/historyWinner-visual-bg-02-mobile@2x.jpg') no-repeat center center / 360px 100%;} .wrapper.id-historyWinner section.main-body-visual h3.title .item {overflow: hidden; height: 200px; text-indent: -1000px;} @media (min-width: 778px) { .wrapper.id-historyWinner section.main-body-visual h3.title .item {overflow: hidden; height: 560px; text-indent: -1000px;} .wrapper.id-historyWinner section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner section.main-body-visual .main-body-visual-inner {background: transparent url('../../assets/images/content/pc/historyWinner-visual-bg-02-pc@2x.jpg') no-repeat center center; background-size: 100% auto} .wrapper.id-historyWinner section.main-body-visual h3.title .item {max-height: 100%;} } .wrapper.id-historyWinner section.main-body-title {background-color: #1b1b1b;} .wrapper.id-historyWinner section.main-body-title .container {padding-top: 54px;} .wrapper.id-historyWinner section.main-body-title h3.title {line-height: 0; text-align: center;} .wrapper.id-historyWinner section.main-body-title h3.title .item {position: relative; display: inline-block;} .wrapper.id-historyWinner section.main-body-title h3.title .item:before {display: block; position: absolute; right: -49px; top: -23px; width: 52px; height: 52px; background: transparent url('../../assets/images/content/historyWinner-title-special.png') no-repeat center center / contain; content: '';} .wrapper.id-historyWinner section.main-body-title h3.title p.font {color: #fff; font-style: italic; font-size: 32px; line-height: 0.81; font-family: 'NotoSans-Regular';} .wrapper.id-historyWinner section.main-body-title h4.title {padding-top: 8px;} .wrapper.id-historyWinner section.main-body-title h4.title .item {text-align: center;} .wrapper.id-historyWinner section.main-body-title h4.title p.font {color: #fff; font-size: 24px; line-height: 1.08; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyWinner section.main-body-title h4.title p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyWinner section.main-body-title .caption {padding-top: 20px;} .wrapper.id-historyWinner section.main-body-title .caption .item {text-align: center;} .wrapper.id-historyWinner section.main-body-title .caption p.font {color: rgba(255, 255, 255, 0.4); font-size: 13px; line-height: 1.62; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-historyWinner section.main-body-title .caption p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-historyWinner section.main-body-title .container {padding-top: 67px;} .wrapper.id-historyWinner section.main-body-title h3.title .item:before {right: -80px; top: -52px; width: 85px; height: 85px;} .wrapper.id-historyWinner section.main-body-title h3.title p.font {font-size: 52px; line-height: 0.5;} .wrapper.id-historyWinner section.main-body-title h4.title {padding-top: 28px;} .wrapper.id-historyWinner section.main-body-title h4.title p.font {font-size: 41px; line-height: 0.63;} .wrapper.id-historyWinner section.main-body-title .caption {padding-top: 32px;} .wrapper.id-historyWinner section.main-body-title .caption .item {padding-bottom: 28px;} .wrapper.id-historyWinner section.main-body-title .caption p.font {color: rgba(255, 255, 255, 0.5); font-size: 16px; line-height: 1.31;} } .wrapper.id-historyWinner section.main-body-final {background-color: #1b1b1b;} .wrapper.id-historyWinner section.main-body-final .container {padding-top: 40px;} .wrapper.id-historyWinner section.main-body-final h3.title .item {text-align: center;} .wrapper.id-historyWinner section.main-body-final h3.title p.font {color: #ec1e83; font-size: 24px; line-height: 1.08; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyWinner section.main-body-final h3.title p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyWinner section.main-body-final .content {padding-top: 27px; line-height: 0; text-align: center;} .wrapper.id-historyWinner section.main-body-final .content .inner {display: inline-block; padding: 0 54px; background-color: transparent; background-image: url('../../assets/images/content/historyWinner-final-bgLeft.png'), url('../../assets/images/content/historyWinner-final-bgRight.png'); background-repeat: no-repeat; background-position: left center, right center; background-size: 54px 326px;} .wrapper.id-historyWinner section.main-body-final .content .inner .object {width: 220px; text-align: left;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .image {position: relative;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .image:after {display: block; position: absolute; right: 0; top: 0; width: 66px; height: 88px; background: transparent url('../../assets/images/content/historyWinner-final-winner2019.png') no-repeat center center / contain; content: '';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .image .item {overflow: hidden; height: 220px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; text-indent: -1000px;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .award {padding: 6px 0;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .award .item {position: relative; padding: 5px 71px 5px 5px; background-color: #e51a6c;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .award .item:after {display: block; position: absolute; right: 0; top: 0; width: 66px; height: 100%; background: #fff url('../../assets/images/content/historyWinner-country-topTen.png') no-repeat center center / 66px 31px; content: '';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 12px; line-height: 1.75; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyWinner section.main-body-final .content .inner .object .award p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information {padding: 4px 5px 5px 5px; background-color: #fff;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .name .item {padding-left: 23px; background: transparent url('../../assets/images/content/historyWinner-country-clown.png') no-repeat left center / 18px 18px;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .name p.font {color: #272727; font-size: 20px; line-height: 1.1; font-family: 'NotoSans-Bold'; text-transform: uppercase;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote {display: flow-root; padding: 11px 3px 0 56px;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap {display: flow-root; float: right;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap .total {float: left;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap .total p.font {color: #1b1b1b; font-size: 15px; line-height: 1.4; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap .total p.font em {color: #e94168;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap .unit {float: left; padding-left: 3px;} .wrapper.id-historyWinner section.main-body-final .content .inner .object .information .vote .wrap .unit p.font {color: #1b1b1b; font-size: 15px; line-height: 1.4; font-family: 'NotoSans-Regular';} @media (min-width: 778px) { .wrapper.id-historyWinner section.main-body-final .container {padding-top: 22px;} .wrapper.id-historyWinner section.main-body-final h3.title {display: none;} .wrapper.id-historyWinner section.main-body-final .content {padding-top: 0;} } .wrapper.id-historyWinner section.main-body-country {background-color: #1b1b1b;} .wrapper.id-historyWinner section.main-body-country .container {padding: 46px 0 77px 0;} .wrapper.id-historyWinner section.main-body-country h3.title .item {text-align: center;} .wrapper.id-historyWinner section.main-body-country h3.title p.font {color: #e51a6c; font-size: 24px; line-height: 1.08; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyWinner section.main-body-country h3.title p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyWinner section.main-body-country .list {padding-top: 0px;} .wrapper.id-historyWinner section.main-body-country .list .inner {margin: -20px 0;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul {list-style: none; padding: 0; margin: 0;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li {padding: 20px 0; line-height: 0; text-align: center;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object {display: inline-block; position: relative; width: 220px; padding-top: 37px; text-align: left;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country {position: absolute; left: 0; top: auto; width: 100%; bottom: -30px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country .item {text-align: center;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country p.font {color: #fff; font-size: 22px; line-height: 0.95; font-family: 'NotoSans-Bold'; text-transform: uppercase;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .image {position: relative;} /*.wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .image:after {display: block; position: absolute; right: 0; top: 0; width: 66px; height: 66px; background-color: #fff; background-repeat: no-repeat; background-position: center center; background-size: 60px 60px; content: '';}*/ .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.china .object .image:after {background-image: url('../../assets/images/common/country-type02-china.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.hongkong .object .image:after {background-image: url('../../assets/images/common/country-type02-hongkong.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.indonesia .object .image:after {background-image: url('../../assets/images/common/country-type02-indonesia.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.japan .object .image:after {background-image: url('../../assets/images/common/country-type02-japan.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.korea .object .image:after {background-image: url('../../assets/images/common/country-type02-korea.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.malaysia .object .image:after {background-image: url('../../assets/images/common/country-type02-malaysia.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.philippines .object .image:after {background-image: url('../../assets/images/common/country-type02-philippines.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.singapore .object .image:after {background-image: url('../../assets/images/common/country-type02-singapore.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.taiwan .object .image:after {background-image: url('../../assets/images/common/country-type02-taiwan.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.thailand .object .image:after {background-image: url('../../assets/images/common/country-type02-thailand.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.vietnam .object .image:after {background-image: url('../../assets/images/common/country-type02-vietnam.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li.america .object .image:after {background-image: url('../../assets/images/common/country-type02-america.png');} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .image .item {overflow: hidden; height: 220px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; text-indent: -1000px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .award {padding: 6px 0;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .award .item {position: relative; padding: 5px 71px 5px 5px; background-color: #8472ff; letter-spacing: -0.02em;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .award .item:after {display: block; position: absolute; right: 0; top: 0; width: 66px; height: 100%; background: #fff url('../../assets/images/content/historyWinner-country-topTen.png') no-repeat center center / 66px 31px; content: '';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .award p.font {color: #1b1b1b; font-size: 12px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information {padding: 4px 5px 5px 5px; background-color: #fff;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .name p.font {color: #272727; font-size: 20px; line-height: 1.1; font-family: 'NotoSans-Bold'; text-transform: uppercase;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote {display: flow-root; padding: 11px 3px 0 56px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap {display: flow-root; float: right;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total {float: left;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font {color: #1b1b1b; font-size: 15px; line-height: 1.4; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #8f7dff;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap .unit {float: left; padding-left: 3px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .information .vote .wrap .unit p.font {color: #1b1b1b; font-size: 15px; line-height: 1.4; font-family: 'NotoSans-Regular';} @media (min-width: 778px) { .wrapper.id-historyWinner section.main-body-country .container {padding: 68px 0 192px 0;} .wrapper.id-historyWinner section.main-body-country h3.title p.font {font-size: 32px; line-height: 0.81;} .wrapper.id-historyWinner section.main-body-country .list {padding-top: 50px; line-height: 0; text-align: center; margin: 0 -19px;} .wrapper.id-historyWinner section.main-body-country .list .inner {display: inline-block; width: 894px; margin: -15px -39px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul {display: flex; flex-direction: row; flex-wrap: wrap;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li {float: left; padding: 15px 39px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object {padding-top: 0; padding-bottom: 79px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country {position: absolute; left: 0; top: auto; bottom: 0; width: 100%;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country .item {padding-bottom: 38px;} .wrapper.id-historyWinner section.main-body-country .list .inner > ul > li .object .country p.font {font-size: 26px; line-height: 1;} .wrapper.id-historyWinner article.type2019 section.main-body-country .list .inner > ul > li:last-child {width: 100%;} } .wrapper.id-historyWinner article.type2018 section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type2018 section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-01-mobile@2x.jpg');} .wrapper.id-historyWinner article.type2018 section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type2018 section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type2018 section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner2018.png');} .wrapper.id-historyWinner article.type2018 section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type2018 section.main-body-country .list .inner > ul > li .object .award .item {background-color: #11b6ff;} .wrapper.id-historyWinner article.type2018 section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #0dbeff;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type2018 section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type2018 section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-01-pc@2x.jpg'); background-size: 100% auto} .wrapper.id-historyWinner article.type2018 section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type2018 section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type2020 section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type2020 section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-03-mobile.png');} .wrapper.id-historyWinner article.type2020 section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type2020 section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type2020 section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner2020.png');} .wrapper.id-historyWinner article.type2020 section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type2020 section.main-body-country .list .inner > ul > li .object .award .item {background-color: #05ef71;} .wrapper.id-historyWinner article.type2020 section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #0dbeff;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type2020 section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type2020 section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-03-pc.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type2020 section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type2020 section.main-body-country .container {padding: 68px 0 172px 0;} .wrapper.id-historyWinner article.type2020 section.main-body-country .list .inner > ul > li:last-child {width: 100%;} } .wrapper.id-historyWinner article.type4th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type4th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-04-mobile@2x.jpg');} .wrapper.id-historyWinner article.type4th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type4th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type4th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner4th.jpg');} .wrapper.id-historyWinner article.type4th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type4th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #23e0d2;} .wrapper.id-historyWinner article.type4th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #0dbeff;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type4th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type4th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-04-pc@2x.jpg'); background-size: 100% auto} .wrapper.id-historyWinner article.type4th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type4th section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type5th section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type5th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type5th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-05-mobile@2x.jpg');} .wrapper.id-historyWinner article.type5th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type5th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type5th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner5th.jpg');} .wrapper.id-historyWinner article.type5th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type5th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #505ffb;} .wrapper.id-historyWinner article.type5th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #0dbeff;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type5th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type5th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-05-pc@2x.jpg'); background-size: 100% auto} .wrapper.id-historyWinner article.type5th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type5th section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type6th section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type6th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type6th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-06-mobile@3x.png');} .wrapper.id-historyWinner article.type6th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type6th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type6th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner6th.png');} .wrapper.id-historyWinner article.type6th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type6th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #3fe6ff;} .wrapper.id-historyWinner article.type6th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #0dbeff;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type6th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type6th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-06-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type6th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type6th section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type7th section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type7th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type7th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-07-mobile@3x.png');} .wrapper.id-historyWinner article.type7th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type7th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type7th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner7th.png');} .wrapper.id-historyWinner article.type7th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type7th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #FFAFC1;} .wrapper.id-historyWinner article.type7th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #FFAFC1;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type7th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type7th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-07-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type7th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type7th section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type8th section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type8th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type8th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-08-mobile@3x.png');} .wrapper.id-historyWinner article.type8th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type8th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type8th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner8th.png');} .wrapper.id-historyWinner article.type8th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type8th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #FDD665;} .wrapper.id-historyWinner article.type8th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #FDD665;} /* for drama */ .wrapper.id-historyWinner article.type8th section.main-body-country .list .inner > ul > li .object .country .item p.font {font-size: 18px} @media (min-width: 778px) { .wrapper.id-historyWinner article.type8th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type8th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-08-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type8th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type8th section.main-body-country .container {padding: 68px 0 172px 0;} /* for drama */ .wrapper.id-historyWinner article.type8th section.main-body-country .list .inner > ul > li .object .country .item {padding-bottom: 28px;} .wrapper.id-historyWinner article.type8th section.main-body-country .list .inner > ul > li .object .country .item p.font {font-size: 24px} } /* 위 8회차는 MAMAMOO WHEEIN 항목이 2줄로 표시되어서 font-size를 24로 변경함 */ .wrapper.id-historyWinner article.type9th section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type9th section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type9th section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-09-mobile.png');} .wrapper.id-historyWinner article.type9th section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type9th section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type9th section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner9th.png');} .wrapper.id-historyWinner article.type9th section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type9th section.main-body-country .list .inner > ul > li .object .award .item {background-color: #7292FF;} .wrapper.id-historyWinner article.type9th section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #7292FF;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type9th section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type9th section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-09-pc.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type9th section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type9th section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type9th_10turn section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type9th_10turn section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-09th-10turn-mobile@3x.png');} .wrapper.id-historyWinner article.type9th_10turn section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner9th-10turn.png');} .wrapper.id-historyWinner article.type9th_10turn section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-country .list .inner > ul > li .object .award .item {background-color: #FF9CCC;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #FF9CCC;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type9th_10turn section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type9th_10turn section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-09th-10turn-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type9th_10turn section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type9th_10turn section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type11turn_drama section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type11turn_drama section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-11turn-drama-mobile@3x.png');} .wrapper.id-historyWinner article.type11turn_drama section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner11turn_drama.png');} .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .list .inner > ul > li .object .award .item {background-color: #17CF94;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #17CF94;} /* for drama */ .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .list .inner > ul > li .object .country .item p.font {font-size: 18px} @media (min-width: 778px) { .wrapper.id-historyWinner article.type11turn_drama section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type11turn_drama section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-11turn-drama-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type11turn_drama section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .container {padding: 68px 0 172px 0;} /* for drama */ .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .list .inner > ul > li .object .country .item {padding-bottom: 28px;} .wrapper.id-historyWinner article.type11turn_drama section.main-body-country .list .inner > ul > li .object .country .item p.font {font-size: 24px} } .wrapper.id-historyWinner article.type10th_12turn section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type10th_12turn section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-10th-12turn-mobile.png');} .wrapper.id-historyWinner article.type10th_12turn section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner10th-12turn.png');} .wrapper.id-historyWinner article.type10th_12turn section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-country .list .inner > ul > li .object .award .item {background-color: #02078E;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-country .list .inner > ul > li .object .award .item p.font {color: #ffffff;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #02078E;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type10th_12turn section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type10th_12turn section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-10th-12turn-pc.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type10th_12turn section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type10th_12turn section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type11th_13turn section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type11th_13turn section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-11th-13turn-mobile.jpg');} .wrapper.id-historyWinner article.type11th_13turn section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner11th-13turn.jpg');} .wrapper.id-historyWinner article.type11th_13turn section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-country .list .inner > ul > li .object .award .item {background-color: #F576F3;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-country .list .inner > ul > li .object .award .item p.font {color: #ffffff;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #F576F3;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type11th_13turn section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type11th_13turn section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-11th-13turn-pc@2x.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type11th_13turn section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type11th_13turn section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type12th_14turn section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type12th_14turn section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/historyWinner-visual-bg-12th-14turn-mobile.jpg');} .wrapper.id-historyWinner article.type12th_14turn section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/historyWinner-final-winner12th-14turn.jpg');} .wrapper.id-historyWinner article.type12th_14turn section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-country .list .inner > ul > li .object .award .item {background-color: #F42F94;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-country .list .inner > ul > li .object .award .item p.font {color: #ffffff;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #F42F94;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type12th_14turn section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type12th_14turn section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/historyWinner-visual-bg-12th-14turn-pc.jpg'); background-size: 100% auto} .wrapper.id-historyWinner article.type12th_14turn section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type12th_14turn section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type13th_15turn section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type13th_15turn section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-visual .container {background-image: url('../../assets/images/content/winner/winner_mobile.png');} .wrapper.id-historyWinner article.type13th_15turn section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/winner/winner_8th.png');} .wrapper.id-historyWinner article.type13th_15turn section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-country .list .inner > ul > li .object .award .item {background-color: #E51A6C;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-country .list .inner > ul > li .object .award .item p.font {color: #ffffff;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #E51A6C;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type13th_15turn section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type13th_15turn section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/winner/winner_PC.png'); background-size: 100% auto} .wrapper.id-historyWinner article.type13th_15turn section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type13th_15turn section.main-body-country .container {padding: 68px 0 172px 0;} } .wrapper.id-historyWinner article.type_trot section.main-body-final .content .inner .object .award p.font {color: #1b1b1b; font-size: 11px; line-height: 1.75; font-family: 'NotoSans-Bold';} .wrapper.id-historyWinner article.type_trot section.main-body-visual:after {display: none;} .wrapper.id-historyWinner article.type_trot section.main-body-visual .container {background-image: url('../../assets/images/content/mobile/moblie.jpg');} .wrapper.id-historyWinner article.type_trot section.main-body-title .container {padding-top: 24px;} .wrapper.id-historyWinner article.type_trot section.main-body-title h3.title .item:before {display: none;} .wrapper.id-historyWinner article.type_trot section.main-body-final .content .inner .object .image:after {background-image: url('../../assets/images/content/icon_198x264.jpg');} .wrapper.id-historyWinner article.type_trot section.main-body-country .container {padding: 46px 0 70px 0;} .wrapper.id-historyWinner article.type_trot section.main-body-country .list .inner > ul > li .object .award .item {background-color: #F42F94;} .wrapper.id-historyWinner article.type_trot section.main-body-country .list .inner > ul > li .object .award .item p.font {color: #ffffff;} .wrapper.id-historyWinner article.type_trot section.main-body-country .list .inner > ul > li .object .information .vote .wrap .total p.font em {color: #F42F94;} @media (min-width: 778px) { .wrapper.id-historyWinner article.type_trot section.main-body-visual .container {background-image: none; } .wrapper.id-historyWinner article.type_trot section.main-body-visual .main-body-visual-inner {background-image: url('../../assets/images/content/pc/pc.jpg'); background-size: 100% auto} .wrapper.id-historyWinner article.type_trot section.main-body-title .container {padding-top: 93px;} .wrapper.id-historyWinner article.type_trot section.main-body-country .container {padding: 68px 0 172px 0;} } /* Vote */ .wrapper.id-vote section.main-header-titleEtc, .wrapper.id-vote section.main-header-navigationEtc {display: none;} /* News */ .wrapper.id-news section.main-header-navigationSub, .wrapper.id-news section.main-header-titleEtc, .wrapper.id-news section.main-header-navigationEtc {display: none;} .wrapper.id-news section.main-body-list {background-color: #fff;} .wrapper.id-news section.main-body-list .container {padding-top: 18px;} .wrapper.id-news section.main-body-list .list {line-height: 0; text-align: center;} .wrapper.id-news section.main-body-list .list .wrap {display: inline-block; width: 346px; margin: -8px -9px;} .wrapper.id-news section.main-body-list .list .wrap > ul {display: flex; flex-direction: row; flex-wrap: wrap; list-style: none; padding: 0; margin: 0;} .wrapper.id-news section.main-body-list .list .wrap > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-news section.main-body-list .list .wrap > ul > li {float: left; padding: 8px 9px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object {width: 155px; cursor: pointer; text-align: left;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .image {background: #d8d8d8 url('../../assets/images/common/board-tta.png') no-repeat center center / 88px 50px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .image .item {overflow: hidden; width: 100%; height: 155px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; text-indent: -1000px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object h4.title {padding-top: 6px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object h4.title p.font {display: -webkit-box; overflow: hidden; height: 22px; color: #000; font-size: 14px; line-height: 1.58; font-family: 'NotoSans-Bold'; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .name p.font {color: #e94168; font-size: 12px; line-height: 1.25; font-family: 'NotoSans-Bold';} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .date {padding-top: 2px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .date p.font {color: rgba(0, 0, 0, 0.6); font-size: 11px; line-height: 1.1; font-family: 'NotoSans-Regular';} .wrapper.id-news section.main-body-list .more {display: none;} .wrapper.id-news section.main-body-list.activeMore .more {display: block;} .wrapper.id-news section.main-body-list .more {padding-top: 20px;} .wrapper.id-news section.main-body-list .more .wrap {padding: 20px; background-color: #f2f3f8; line-height: 0; text-align: center; cursor: pointer;} .wrapper.id-news section.main-body-list .more .wrap .item {display: inline-block; padding-left: 20px; background: transparent url('../../assets/images/common/more.png') no-repeat left center / 16px 16px;} .wrapper.id-news section.main-body-list .more .wrap p.font {color: #2c2c2c; font-size: 14px; line-height: 1.15; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-news section.main-body-list .more .wrap p.font {font-family: 'NanumSquare-Bold';} @media (min-width: 778px) { .wrapper.id-news section.main-body-list .container {padding: 43px 0 60px 0;} .wrapper.id-news section.main-body-list .list .wrap {width: 786px; margin: -14px -21px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li {padding: 14px 21px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object {width: 220px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .image .item {height: 220px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object h4.title {padding-top: 16px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object h4.title p.font {font-size: 16px; line-height: 1.38;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .name {padding-top: 3px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .name p.font {font-size: 15px; line-height: 1.14;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .date {padding-top: 4px;} .wrapper.id-news section.main-body-list .list .wrap > ul > li .object .date p.font {font-size: 14px; line-height: 1.36;} .wrapper.id-news section.main-body-list .more {padding: 60px 100px 0 100px;} .wrapper.id-news section.main-body-list .more .wrap {padding: 28px; border: 1px solid #d8d8d8; border-radius: 6px; background-color: #fff;} .wrapper.id-news section.main-body-list .more .wrap p.font {color: #272727; font-size: 20px; line-height: 1.1; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-news section.main-body-list .more .wrap p.font {font-family: 'NanumSquare-Regular';} } .wrapper.id-news article.layout-board-list {display: none;} .wrapper.id-news article.layout-board.active article.layout-board-none {display: none;} .wrapper.id-news article.layout-board.active article.layout-board-list {display: block;} /* Event */ .wrapper.id-event section.main-header-navigationSub, .wrapper.id-event section.main-header-titleEtc, .wrapper.id-event section.main-header-navigationEtc {display: none;} .wrapper.id-event section.main-body-title {display: none; background-color: #fff;} @media (min-width: 778px) { .wrapper.id-event section.main-body-title {display: block;} .wrapper.id-event section.main-body-title .container {padding-top: 36px;} .wrapper.id-event section.main-body-title h3.title p.font {color: #1b1b1b; font-size: 30px; line-height: 1.37; font-family: 'NotoSans-Bold';} } .wrapper.id-event section.main-body-header {display: none; background-color: #fff;} @media (min-width: 778px) { .wrapper.id-event section.main-body-header {display: block;} .wrapper.id-event section.main-body-header .container {display: flow-root; padding-top: 28px;} .wrapper.id-event section.main-body-header .container:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-event section.main-body-header .type, .wrapper.id-event section.main-body-header .title, .wrapper.id-event section.main-body-header .date {float: left; padding: 6px 16px 7px 16px; background-color: #f2f3f8;} .wrapper.id-event section.main-body-header .type {width: 110px;} .wrapper.id-event section.main-body-header .title {width: calc(100% - 204px);} .wrapper.id-event section.main-body-header .date {width: 94px;} .wrapper.id-event section.main-body-header .date .item {text-align: center;} .wrapper.id-event section.main-body-header .type p.font, .wrapper.id-event section.main-body-header .title p.font, .wrapper.id-event section.main-body-header .date p.font {color: #272727; font-size: 13px; line-height: 1.62; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-event section.main-body-header .type p.font, html[lang="ko_KR"] .wrapper.id-event section.main-body-header .title p.font, html[lang="ko_KR"] .wrapper.id-event section.main-body-header .date p.font {font-family: 'NanumSquare-Regular';} } .wrapper.id-event section.main-body-body {background-color: #fff;} .wrapper.id-event section.main-body-body .list > ul {list-style: none; padding: 0; margin: 0;} .wrapper.id-event section.main-body-body .list > ul > li .header {position: relative; padding: 15px 56px 16px 15px; cursor: pointer;} .wrapper.id-event section.main-body-body .list > ul > li .header:before {display: block; position: absolute; right: 12px; top: 34px; width: 32px; height: 32px; background: transparent url('../../assets/images/content/mobile/event-list-down.png') no-repeat center center / contain; content: '';} .wrapper.id-event section.main-body-body .list > ul > li.active .header:before {background-image: url('../../assets/images/content/mobile/event-list-up.png');} .wrapper.id-event section.main-body-body .list > ul > li .header:after {display: block; position: absolute; left: 16px; bottom: 0; width: calc(100% - 32px); height: 1px; background-color: rgba(0, 0, 0, 0.08); content: '';} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .type p.font {color: #e51a6c; font-size: 11px; line-height: 1.91; font-family: 'NotoSans-Bold';} .wrapper.id-event section.main-body-body .list > ul > li.event .header .wrap .type p.font {color: #16cd64;} html[lang="ko_KR"] .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .type p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap h4.title {padding-top: 1px;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap h4.title p.font {display: -webkit-box; overflow: hidden; max-height: 63px; color: #272727; font-size: 17px; line-height: 1.24; font-family: 'NotoSans-Regular'; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .date {padding-top: 1px;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .date p.font {color: #7f7f7f; font-size: 11px; line-height: 1.91; font-family: 'NotoSans-Regular';} .wrapper.id-event section.main-body-body .list > ul > li .body {display: none; padding: 16px; background-color: #f2f3f8;} .wrapper.id-event section.main-body-body .list > ul > li.active .body {display: block;} .wrapper.id-event section.main-body-body .list > ul > li .body p.font {color: #272727; font-size: 12px; line-height: 1.83; font-family: 'NotoSans-Regular';} @media (min-width: 778px) { .wrapper.id-event section.main-body-body .list > ul > li {display: flow-root;} .wrapper.id-event section.main-body-body .list > ul > li:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-event section.main-body-body .list > ul > li .header {padding: 0 0 1px 0;} .wrapper.id-event section.main-body-body .list > ul > li .header:before {display: none;} .wrapper.id-event section.main-body-body .list > ul > li .header:after {left: 0; width: 100%;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap {display: flow-root;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .type, .wrapper.id-event section.main-body-body .list > ul > li .header .wrap h4.title, .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .date {float: left; padding: 19px 16px 14px 16px;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .type {width: 110px;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap h4.title {width: calc(100% - 204px);} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap h4.title p.font {height: 21px; max-height: none; font-size: 14px; line-height: 1.5; -webkit-line-clamp: 1;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .date {width: 94px;} .wrapper.id-event section.main-body-body .list > ul > li .header .wrap .date .item {text-align: center;} .wrapper.id-event section.main-body-body .list > ul > li.active .body {display: none;} } .wrapper.id-event section.main-body-paging {background: #fff;} .wrapper.id-event section.main-body-paging .container {padding: 12px 0 24px 0; line-height: 0; text-align: center;} .wrapper.id-event section.main-body-paging .wrap {display: inline-block;} .wrapper.id-event section.main-body-paging .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-event section.main-body-paging .wrap .prev, .wrapper.id-event section.main-body-paging .wrap .next, .wrapper.id-event section.main-body-paging .wrap .list {float: left;} .wrapper.id-event section.main-body-paging .wrap .prev .item, .wrapper.id-event section.main-body-paging .wrap .next .item {overflow: hidden; width: 32px; height: 32px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; text-indent: -1000px; cursor: pointer;} .wrapper.id-event section.main-body-paging .wrap .prev .item {background-image: url('../../assets/images/content/event-paging-prev.png');} .wrapper.id-event section.main-body-paging .wrap .next .item {background-image: url('../../assets/images/content/event-paging-next.png');} .wrapper.id-event section.main-body-paging .wrap .list {padding: 0 24px;} .wrapper.id-event section.main-body-paging .wrap .list > ul {display: flow-root; list-style: none; padding: 0; margin: 0 -9px;} .wrapper.id-event section.main-body-paging .wrap .list > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-event section.main-body-paging .wrap .list > ul > li {float: left;} .wrapper.id-event section.main-body-paging .wrap .list > ul > li .number .item {padding: 9px 9px 10px 9px; cursor: pointer;} .wrapper.id-event section.main-body-paging .wrap .list > ul > li .number p.font {color: #7f7f7f; font-size: 11px; line-height: 1.19; font-family: 'NotoSans-Regular';} .wrapper.id-event section.main-body-paging .wrap .list > ul > li.active .number p.font {color: #272727; font-family: 'NotoSans-Bold'; text-decoration: underline;} @media (min-width: 778px) { .wrapper.id-event section.main-body-paging .container {padding: 23px 0 40px 0;} } .wrapper.id-event section.main-body-list {display: none; background-color: #fff;} .wrapper.id-event article.layout-board-list {display: none;} .wrapper.id-event article.layout-board.active article.layout-board-none {display: none;} .wrapper.id-event article.layout-board.active article.layout-board-list {display: block;} @media (min-width: 778px) { .wrapper.id-event article.typeView section.main-body-header {display: none;} .wrapper.id-event article.typeView section.main-body-body .container {padding-top: 28px;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li {display: none;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li.active {display: block;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header {padding: 1px 0 0 0; cursor: auto;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header:after {top: 0; bottom: auto; background-color: #c7c8ce;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap h4.title, .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap .date {padding: 18px 20px 19px 20px; background-color: #f2f3f8;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap .type {display: none;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap h4.title {width: calc(100% - 129px);} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap h4.title p.font {font-size: 16px; line-height: 1.32; font-family: 'NotoSans-Bold'} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap .date {width: 129px;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .header .wrap .date p.font {color: #272727; font-size: 14px; line-height: 1.5;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li.active .body {display: block; padding: 30px; border-bottom: 1px solid #c7c8ce; background-color: #fff;} .wrapper.id-event article.typeView section.main-body-body .list > ul > li .body p.font {font-size: 14px; line-height: 1.5;} .wrapper.id-event article.typeView section.main-body-paging {display: none;} .wrapper.id-event article.typeView section.main-body-list {display: block;} .wrapper.id-event article.typeView section.main-body-list .container {padding: 20px 0 96px 0;} .wrapper.id-event article.typeView section.main-body-list .list .item {width: 160px; padding: 9px; border: 1px solid #e0e1e8; text-align: center; cursor: pointer;} .wrapper.id-event article.typeView section.main-body-list .list p.font {color: #272727; font-size: 14px; line-height: 1.5; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-event article.typeView section.main-body-list .list p.font {font-family: 'NanumSquare-Regular';} } /* My Info */ .wrapper.id-myInfo section.main-header-navigationGlobal, .wrapper.id-myInfo section.main-header-titleMain, .wrapper.id-myInfo section.main-header-navigationMain, .wrapper.id-myInfo section.main-header-navigationSub {display: none;} @media (min-width: 778px) { .wrapper.id-myInfo section.main-header-navigationGlobal, .wrapper.id-myInfo section.main-header-titleMain, .wrapper.id-myInfo section.main-header-navigationMain {display: block;} } .wrapper.id-myInfo section.main-body-sign {background-color: #fff;} .wrapper.id-myInfo section.main-body-sign .container {padding: 18px 16px 0 16px;} .wrapper.id-myInfo section.main-body-sign .information {position: relative; height: 76px; border: 1px solid #e5e5e5; border-radius: 6px;} .wrapper.id-myInfo section.main-body-sign .information .sign {position: absolute; right: 11px; top: 7px;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul {list-style: none; padding: 0; margin: 0;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul > li.out {display: none;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul > li .text .item {cursor: pointer;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul > li .text p.font {color: #e51a6c; font-size: 13px; line-height: 1.16; font-family: 'NotoSans-Regular'; text-decoration: underline;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul > li.out .text p.font {color: #272727;} .wrapper.id-myInfo section.main-body-sign .information .none {padding: 9px 13px;} .wrapper.id-myInfo section.main-body-sign .information .none .item {padding: 17px 0 18px 0; text-align: center;} .wrapper.id-myInfo section.main-body-sign .information .none p.font {color: #c3c3c3; font-size: 14px; line-height: 1.57; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-sign .information .none p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-myInfo section.main-body-sign .information .id {display: none; padding: 24px 11px;} .wrapper.id-myInfo section.main-body-sign .information .id .item {padding: 1px 0 1px 30px; background-color: transparent; background-repeat: no-repeat; background-position: left center; background-size: 26px 26px;} .wrapper.id-myInfo section.main-body-sign.twitter .information .id .item {background-image: url('../../assets/images/common/sns-type03-twitter.png');} .wrapper.id-myInfo section.main-body-sign.google .information .id .item {background-image: url('../../assets/images/common/sns-type03-google.png');} .wrapper.id-myInfo section.main-body-sign.facebook .information .id .item {background-image: url('../../assets/images/common/sns-type03-facebook.png');} .wrapper.id-myInfo section.main-body-sign.kakao .information .id .item {background-image: url('../../assets/images/common/sns-type03-kakao.png');} .wrapper.id-myInfo section.main-body-sign.line .information .id .item {background-image: url('../../assets/images/common/sns-type03-line.png');} .wrapper.id-myInfo section.main-body-sign .information .id p.font {color: #1b1b1b; font-size: 21px; line-height: 1.15; font-family: 'NotoSans-Bold';} @media (min-width: 778px) { .wrapper.id-myInfo section.main-body-sign .container {padding: 0;} .wrapper.id-myInfo section.main-body-sign .information {height: 140px;} .wrapper.id-myInfo section.main-body-sign .information .sign {right: 26px; top: 11px;} .wrapper.id-myInfo section.main-body-sign .information .sign > ul > li .text p.font {line-height: 1.39;} .wrapper.id-myInfo section.main-body-sign .information .none {padding: 29px 23px;} .wrapper.id-myInfo section.main-body-sign .information .none .item {padding: 29px 0 30px 0;} .wrapper.id-myInfo section.main-body-sign .information .id {padding: 52px 16px;} .wrapper.id-myInfo section.main-body-sign .information .id .item {padding: 0 0 0 40px; background-size: 32px 32px;} .wrapper.id-myInfo section.main-body-sign .information .id p.font {font-size: 25px; line-height: 1.36;} } .wrapper.id-myInfo section.main-body-state {background-color: #fff;} .wrapper.id-myInfo section.main-body-state .container {padding: 10px 16px 0 16px;} .wrapper.id-myInfo section.main-body-state .state > ul {display: flow-root; list-style: none; padding: 0; margin: 0;} .wrapper.id-myInfo section.main-body-state .state > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-myInfo section.main-body-state .state > ul > li {position: relative; float: left; width: calc(50% + 1px); padding: 13px 0 12px 0;} .wrapper.id-myInfo section.main-body-state .state > ul > li:before {display: block; position: absolute; left: 0; top: 17px; width: 1px; height: 31px; background-color: #e5e5e5; content: '';} .wrapper.id-myInfo section.main-body-state .state > ul > li:first-child {width: calc(50% - 1px);} .wrapper.id-myInfo section.main-body-state .state > ul > li:first-child:before {display: none;} .wrapper.id-myInfo section.main-body-state .state > ul > li .caption .item {text-align: center;} .wrapper.id-myInfo section.main-body-state .state > ul > li .caption p.font {color: #353535; font-size: 11px; line-height: 1.1; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-state .state > ul > li .caption p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-myInfo section.main-body-state .state > ul > li .number {padding-top: 3px;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .none .item {text-align: center;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .none p.font {color: #e5e5e5; font-size: 22px; line-height: 1.14; font-family: 'NotoSans-Regular';} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .value {display: none;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .value .item {text-align: center;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .value p.font {color: #272727; font-size: 22px; line-height: 1.14; font-family: 'NotoSans-Regular';} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .value p.font strong {color: #e51a6c; font-family: 'NotoSans-Bold';} @media (min-width: 778px) { .wrapper.id-myInfo section.main-body-state .container {padding: 4px 0 0 0;} .wrapper.id-myInfo section.main-body-state .state > ul > li {padding: 14px 0;} .wrapper.id-myInfo section.main-body-state .state > ul > li:before {top: 21px; height: 38px;} .wrapper.id-myInfo section.main-body-state .state > ul > li .caption p.font {font-size: 14px; line-height: 1.15;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number {padding-top: 0;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .none p.font {font-size: 26px; line-height: 1.39;} .wrapper.id-myInfo section.main-body-state .state > ul > li .number .value p.font {font-size: 26px; line-height: 1.39;} } .wrapper.id-myInfo section.main-body-charge {background-color: #fff;} .wrapper.id-myInfo section.main-body-charge .container {position: relative; padding: 10px 16px 0 16px;} .wrapper.id-myInfo section.main-body-charge .charge {padding: 20px; border-radius: 6px; background-color: #d8d8d8; line-height: 0; text-align: center;} .wrapper.id-myInfo section.main-body-charge .charge .item {display: inline-block; padding-left: 30px; background: transparent url('../../assets/images/content/myInfo-charge-charge.png') no-repeat left center / 23px 15px;} .wrapper.id-myInfo section.main-body-charge .charge p.font {color: #fff; font-size: 14px; line-height: 1.15; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-charge .charge p.font {font-family: 'NanumSquare-Bold';} @media (min-width: 778px) { .wrapper.id-myInfo section.main-body-charge .container {padding: 12px 0 19px 0;} .wrapper.id-myInfo section.main-body-charge .charge {padding: 24px;} .wrapper.id-myInfo section.main-body-charge .charge .item {padding-left: 33px; background-size: 27px 18px;} .wrapper.id-myInfo section.main-body-charge .charge p.font {font-size: 19px; line-height: 1.11; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-charge .charge p.font {font-family: 'NanumSquare-Regular';} } .wrapper.id-myInfo section.main-body-code {background-color: #fff;} .wrapper.id-myInfo section.main-body-code .container {padding: 42px 16px 0 16px;} .wrapper.id-myInfo section.main-body-code h3.title p.font {color: #000; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-code h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-myInfo section.main-body-code .content {display: flow-root; padding-top: 14px;} .wrapper.id-myInfo section.main-body-code .content:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-myInfo section.main-body-code .content .input {float: left; width: calc(100% - 115px); height: 45px; border: 1px solid #e5e5e5; border-radius: 6px;} .wrapper.id-myInfo section.main-body-code .content .input > input {width: 100%; height: 100%; padding: 0 11px; border: none; background-color: transparent; color: #272727; font-size: 19px; font-family: 'NotoSans-Bold';} .wrapper.id-myInfo section.main-body-code .content .input > input::placeholder {color: #dfdfe1;} .wrapper.id-myInfo section.main-body-code .content .button {float: right; padding: 6px 0 7px 0;} .wrapper.id-myInfo section.main-body-code .content .button .item {width: 95px; padding: 10px 9px 9px 9px; border-radius: 4px; background-color: #d8d8d8; text-align: center;} .wrapper.id-myInfo section.main-body-code .content .button p.font {color: #fff; font-size: 12px; line-height: 1.09; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-code .content .button p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-myInfo section.main-body-code .message {visibility: hidden; padding-top: 7px;} .wrapper.id-myInfo section.main-body-code .message .item {min-height: 36px;} .wrapper.id-myInfo section.main-body-code .message p.font {color: rgba(0, 0, 0, 0.3); font-size: 11px; line-height: 1.18; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-code .message p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-myInfo section.main-body-code .container {padding: 0;} } .wrapper.id-myInfo section.main-body-ad {background-color: #fff;} .wrapper.id-myInfo section.main-body-ad .container {padding: 9px 16px 0 16px;} .wrapper.id-myInfo section.main-body-ad h3.title p.font {color: #000; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-ad h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-myInfo section.main-body-ad .content.none {display: flow-root; padding-top: 18px;} .wrapper.id-myInfo section.main-body-ad .content.value {padding: 18px 0 22px 0;} .wrapper.id-myInfo section.main-body-ad .content:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-myInfo section.main-body-ad .content .state {float: left; margin-left: -8px;} .wrapper.id-myInfo section.main-body-ad .content .state .item {padding: 8px 0 8px 50px; background: transparent url('../../assets/images/content/mobile/myInfo-ad-ticket.png') no-repeat left center / 50px 36px;} .wrapper.id-myInfo section.main-body-ad .content .state p.font {color: #e5e5e5; font-size: 21px; line-height: 0.96; font-family: 'NotoSans-Regular';} .wrapper.id-myInfo section.main-body-ad .content.value .state p.font {color: #000;} .wrapper.id-myInfo section.main-body-ad .content .state p.font strong {font-family: 'NotoSans-Bold';} .wrapper.id-myInfo section.main-body-ad .content.value .state p.font strong {color: #e51a6c;} .wrapper.id-myInfo section.main-body-ad .content .button {float: right; padding: 2px 0;} .wrapper.id-myInfo section.main-body-ad .content .button .item {width: 95px; padding: 10px 9px 9px 9px; border-radius: 4px; background-color: #d8d8d8; text-align: center;} .wrapper.id-myInfo section.main-body-ad .content.value .button .item {background-color: #e51a6c; cursor: pointer;} .wrapper.id-myInfo section.main-body-ad .content .button p.font {color: #fff; font-size: 12px; line-height: 1.09; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-ad .content .button p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-myInfo section.main-body-ad .content .button p.font strong {color: rgba(255, 255, 255, 0.84); line-height: 1.08; font-family: 'NotoSans-Bold';} .wrapper.id-myInfo section.main-body-ad .content .button p.font em {color: rgba(255, 255, 255, 0.6); line-height: 1.08; font-family: 'NotoSans-Regular';} .wrapper.id-myInfo section.main-body-ad .attention {display: none; visibility: hidden; margin-top: -22px;} .wrapper.id-myInfo section.main-body-ad .attention .item {text-align: right;} .wrapper.id-myInfo section.main-body-ad .attention p.font {color: rgba(0, 0, 0, 0.5); font-size: 9px; line-height: 1.45; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-ad .attention p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-myInfo section.main-body-ad .message {display: none; padding-top: 25px; margin-top:10px; border-top: 1px solid #ececec;} .wrapper.id-myInfo section.main-body-ad .message .item {min-height: 78px; text-align: center;} .wrapper.id-myInfo section.main-body-ad .message p.font {color: rgba(0, 0, 0, 0.3); font-size: 11px; line-height: 1.55; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-myInfo section.main-body-ad .message p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-myInfo section.main-body-ad .container {padding: 9px 0 0 0;} .wrapper.id-myInfo section.main-body-ad .content .state .item {background-image: url('../../assets/images/content/pc/myInfo-ad-ticket.png');} .wrapper.id-myInfo section.main-body-ad .message .item {min-height: 85px; padding: 0 16px;} } .wrapper.id-myInfo article.layout-banner {padding: 10px 0 20px 0;} @media (min-width: 778px) { .wrapper.id-myInfo article.layout-information {display: flow-root; position: relative; width: 778px; padding: 40px 0 0 0; margin: 0 auto; background-color: #fff;} .wrapper.id-myInfo article.layout-information:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-myInfo article.layout-information .container {width: 100%;} .wrapper.id-myInfo article.layout-information-sign {float: left; width: 402px;} .wrapper.id-myInfo article.layout-information-input {float: right; width: 328px;} .wrapper.id-myInfo article.layout-banner {padding: 37px 0 95px 0;} } .wrapper.id-myInfo.signIn section.main-body-sign .information .sign > ul > li.in {display: none;} .wrapper.id-myInfo.signIn section.main-body-sign .information .sign > ul > li.out {display: block;} .wrapper.id-myInfo.signIn section.main-body-sign .information .none {display: none;} .wrapper.id-myInfo.signIn section.main-body-sign .information .id {display: block;} .wrapper.id-myInfo.signIn section.main-body-state .state > ul > li .number .none {display: none;} .wrapper.id-myInfo.signIn section.main-body-state .state > ul > li .number .value {display: block;} .wrapper.id-myInfo.signIn section.main-body-charge .charge {background-color: #e51a6c; cursor: pointer;} .wrapper.id-myInfo.signIn section.main-body-code .content .button .item {background-color: #e51a6c; cursor: pointer;} .wrapper.id-myInfo.signIn section.main-body-code .message {visibility: visible;} .wrapper.id-myInfo.signIn section.main-body-ad .content.none {display: none;} .wrapper.id-myInfo.signIn section.main-body-ad .content.value {display: flow-root;} .wrapper.id-myInfo.signIn section.main-body-ad .attention {display: block;} .wrapper.id-myInfo.signIn section.main-body-ad.attentionActive .attention {visibility: visible;} .wrapper.id-myInfo.signIn section.main-body-ad .message {display: block;} /* History Of Use */ .wrapper.id-historyOfUse section.main-header-navigationGlobal, .wrapper.id-historyOfUse section.main-header-titleMain, .wrapper.id-historyOfUse section.main-header-navigationMain, .wrapper.id-historyOfUse section.main-header-navigationSub {display: none;} @media (min-width: 778px) { .wrapper.id-historyOfUse section.main-header-navigationGlobal, .wrapper.id-historyOfUse section.main-header-titleMain, .wrapper.id-historyOfUse section.main-header-navigationMain {display: block;} } .wrapper.id-historyOfUse section.main-body-participation {background-color: #fff;} .wrapper.id-historyOfUse section.main-body-participation .container {padding: 25px 8px 16px 8px; border-radius: 30px 30px 0 0; background: #16cd64} .wrapper.id-historyOfUse section.main-body-participation h3.title {padding: 0 15px; line-height: 0;} .wrapper.id-historyOfUse section.main-body-participation h3.title .item {display: inline-block; padding: 3px 28px 4px 0; background: transparent url('../../assets/images/content/historyOfUse-participation-information.png') no-repeat right center / 24px 24px;} .wrapper.id-historyOfUse section.main-body-participation h3.title p.font {color: #fff; font-size: 15px; line-height: 1.14; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-participation h3.title p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyOfUse section.main-body-participation .name {padding: 1px 15px 0 15px;} .wrapper.id-historyOfUse section.main-body-participation .name p.font {color: #fff; font-size: 28px; line-height: 1.36; font-family: 'NotoSans-Bold';} .wrapper.id-historyOfUse section.main-body-participation .information {padding-top: 20px;} .wrapper.id-historyOfUse section.main-body-participation .information > ul {list-style: none; padding: 0; margin: -3px 0;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li {padding: 3px 0;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object {display: flow-root; width: 220px; padding: 1px 16px 3px 16px; border-radius: 17px; background-color: #fff;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .caption {float: left; padding: 9px 0 7px 0;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .caption p.font {color: #7f7f7f; font-size: 13px; line-height: 1.08; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .caption p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content {display: flow-root; float: right;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .value {float: left;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .value p.font {color: #272727; font-size: 22px; line-height: 1.37; font-family: 'NotoSans-Bold';} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .total {float: left; padding: 5px 0 3px 4px;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .total p.font {color: #7f7f7f; font-size: 16px; line-height: 1.38; font-family: 'NotoSans-Regular';} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .unit {float: left; padding: 8px 0 6px 6px;} .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .unit p.font {color: #7f7f7f; font-size: 14px; line-height: 1.15; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-participation .information > ul > li .object .content .unit p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-historyOfUse section.main-body-participation .download {position: absolute; right: 16px; top: 18px;} .wrapper.id-historyOfUse section.main-body-participation .download .item {overflow: hidden; width: 32px; height: 32px; background: transparent url('../../assets/images/content/historyOfUse-participation-download.png') no-repeat right center / contain; text-indent: -1000px; cursor: pointer;} .wrapper.id-historyOfUse section.main-body-participation .image {position: absolute; right: 16px; bottom: 16px;} .wrapper.id-historyOfUse section.main-body-participation .image .item {overflow: hidden; width: 100px; height: 100px; border-radius: 50%; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: cover; text-indent: -1000px;} .wrapper.id-historyOfUse section.main-body-activity {background-color: #fff;} .wrapper.id-historyOfUse section.main-body-activity .container {padding: 15px 15px 14px 15px; border: 1px solid #979797; border-radius: 0 0 30px 30px;} .wrapper.id-historyOfUse section.main-body-activity h3.title p.font {color: #272727; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-activity h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-historyOfUse section.main-body-activity .list {padding-top: 12px; line-height: 0; text-align: center;} .wrapper.id-historyOfUse section.main-body-activity .list > ul {display: inline-block; list-style: none; width: 312px; padding: 0; margin: -3px -4px;} .wrapper.id-historyOfUse section.main-body-activity .list > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li {float: left; padding: 3px 4px;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state {position: relative; width: 70px; height: 70px; border-radius: 50%; background: transparent url('../../assets/images/content/historyOfUse-activity-bgYet.png') no-repeat center center / contain;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.miss .state {background-image: url('../../assets/images/content/historyOfUse-activity-bgMiss.png');} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.vote .state {background-image: url('../../assets/images/content/historyOfUse-activity-bgVote.png');} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.goal .state {background-image: url('../../assets/images/content/historyOfUse-activity-bgGoal.png');} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state:after {display: none; position: absolute; left: 0; bottom: -6px; width: 100%; height: 30px; background-color: transparent; background-repeat: no-repeat; background-position: center center; background-size: contain; content: '';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.vote .state:after, .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.goal .state:after {display: block;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.vote .state:after {background-image: url('../../assets/images/content/historyOfUse-activity-labelVote.png');} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.goal .state:after {background-image: url('../../assets/images/content/historyOfUse-activity-labelGoal.png');} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .miss {display: none; position: absolute; left: 0; top: 23px; width: 100%;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.miss .miss {display: block;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .miss p.font {color: #bfbfc4; font-style: italic; font-size: 17px; line-height: 1.53; font-family: 'Gelasio-Bold';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information {position: absolute; left: 0; top: 27px; width: 100%; line-height: 0; text-align: center;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.miss .information {display: none;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap {display: inline-block;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap .value {float: left;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap .value p.font {color: #bfbfc4; font-size: 17px; line-height: 1.36; font-family: 'NotoSans-Bold';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.vote .state .information .wrap .value p.font {color: #e51a6c;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.goal .state .information .wrap .value p.font {color: #fff;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap .total {float: left; padding: 3px 0 3px 1px;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .state .information .wrap .total p.font {color: #bfbfc4; font-size: 12px; line-height: 1.42; font-family: 'NotoSans-Regular';} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.vote .state .information .wrap .total p.font {color: #242424;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li.goal .state .information .wrap .total p.font {color: #fff;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .day {padding-top: 3px;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .day .item {text-align: center;} .wrapper.id-historyOfUse section.main-body-activity .list > ul > li .day p.font {color: #272727; font-size: 10px; line-height: 1.4; font-family: 'NotoSans-Regular';} .wrapper.id-historyOfUse article.layout-participation {padding-top: 10px; background-color: #fff;} .wrapper.id-historyOfUse article.layout-participation-wrap {margin: -15px 0;} .wrapper.id-historyOfUse article.layout-participation-preliminary, .wrapper.id-historyOfUse article.layout-participation-final {display: none; padding: 15px 0;} .wrapper.id-historyOfUse article.layout-participation-preliminary.active, .wrapper.id-historyOfUse article.layout-participation-final.active {display: block;} @media (min-width: 778px) { .wrapper.id-historyOfUse article.layout-participation {display: flow-root; width: 778px; padding-top: 37px; margin: 0 auto; line-height: 0; text-align: center;} .wrapper.id-historyOfUse article.layout-participation:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse article.layout-participation .container {width: 100%;} .wrapper.id-historyOfUse article.layout-participation-wrap {display: inline-block; margin: 0 -30px; text-align: left;} .wrapper.id-historyOfUse article.layout-participation-preliminary, .wrapper.id-historyOfUse article.layout-participation-final {width: 418px; padding: 0 29px;} .wrapper.id-historyOfUse article.layout-participation-preliminary {float: left;} .wrapper.id-historyOfUse article.layout-participation-final {float: right;} } .wrapper.id-historyOfUse article.typeFinal section.main-body-participation .container {background-color: #e51a6c;} .wrapper.id-historyOfUse section.main-body-change {background-color: #fff;} .wrapper.id-historyOfUse section.main-body-change .container {padding-top: 30px;} .wrapper.id-historyOfUse section.main-body-change h3.title {padding: 0 16px;} .wrapper.id-historyOfUse section.main-body-change h3.title p.font {color: #272727; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-historyOfUse section.main-body-change .header .wrap .date, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date, .wrapper.id-historyOfUse section.main-body-change .header .wrap .type, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type, .wrapper.id-historyOfUse section.main-body-change .header .wrap .history, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history, .wrapper.id-historyOfUse section.main-body-change .header .wrap .change, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change {float: left; padding-left: 6px; padding-right: 6px} .wrapper.id-historyOfUse section.main-body-change .header .wrap .date, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date, .wrapper.id-historyOfUse section.main-body-change .header .wrap .type, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type, .wrapper.id-historyOfUse section.main-body-change .header .wrap .change, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change {width: 81px;} .wrapper.id-historyOfUse section.main-body-change .header .wrap .history, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history {width: calc(100% - 243px);} .wrapper.id-historyOfUse section.main-body-change .header .wrap .change .item, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change .item {text-align: right;} .wrapper.id-historyOfUse section.main-body-change .header {padding-top: 24px;} .wrapper.id-historyOfUse section.main-body-change .header .wrap {display: flow-root; padding: 0 10px; background-color: #f8f8fa;} .wrapper.id-historyOfUse section.main-body-change .header .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-change .header .wrap .date, .wrapper.id-historyOfUse section.main-body-change .header .wrap .type, .wrapper.id-historyOfUse section.main-body-change .header .wrap .history, .wrapper.id-historyOfUse section.main-body-change .header .wrap .change {padding-top: 20px; padding-bottom: 20px;} .wrapper.id-historyOfUse section.main-body-change .header .wrap .date p.font, .wrapper.id-historyOfUse section.main-body-change .header .wrap .type p.font, .wrapper.id-historyOfUse section.main-body-change .header .wrap .history p.font, .wrapper.id-historyOfUse section.main-body-change .header .wrap .change p.font {color: #353535; font-size: 14px; line-height: 1.15; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .header .wrap .date p.font, html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .header .wrap .type p.font, html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .header .wrap .history p.font, html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .header .wrap .change p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-historyOfUse section.main-body-change .body > ul {list-style: none; padding: 0; margin: 0;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li {display: flow-root; padding: 0 10px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history {padding-top: 20px; padding-bottom: 4px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change {padding-top: 18px; padding-bottom: 3px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type .item, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history .item {min-height: 32px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type .item {word-break: break-all;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date p.font, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type p.font, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history p.font {font-size: 12px; line-height: 1.33;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date p.font {color: #353535; font-family: 'NotoSans-Bold';} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type p.font {color: #909090; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history p.font {display: -webkit-box; overflow: hidden; height: 30px; color: #353535; font-family: 'NotoSans-Regular'; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change p.font {color: #353535; font-size: 15px; line-height: 1.2; font-family: 'NotoSans-Bold';} .wrapper.id-historyOfUse section.main-body-change .body > ul > li.add .change p.font {color: #e94168;} .wrapper.id-historyOfUse section.main-body-change .more {display: none;} .wrapper.id-historyOfUse section.main-body-change.activeMore .more {display: block;} .wrapper.id-historyOfUse section.main-body-change .more {padding-top: 20px;} .wrapper.id-historyOfUse section.main-body-change .more .wrap {padding: 20px 20px 19px 20px; background-color: #f2f3f8; line-height: 0; text-align: center; cursor: pointer;} .wrapper.id-historyOfUse section.main-body-change .more .wrap .item {display: inline-block; padding-left: 20px; background: transparent url('../../assets/images/common/more.png') no-repeat left center / 16px 16px;} .wrapper.id-historyOfUse section.main-body-change .more .wrap p.font {color: #353535; font-size: 14px; line-height: 1.22; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-historyOfUse section.main-body-change .more .wrap p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-historyOfUse section.main-body-change .container {padding: 62px 0 40px 0;} .wrapper.id-historyOfUse section.main-body-change h3.title {padding: 0;} .wrapper.id-historyOfUse section.main-body-change h3.title p.font {font-size: 30px; line-height: 1.14;} .wrapper.id-historyOfUse section.main-body-change .header {padding-top: 30px;} .wrapper.id-historyOfUse section.main-body-change .header .wrap .date, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date, .wrapper.id-historyOfUse section.main-body-change .header .wrap .type, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type, .wrapper.id-historyOfUse section.main-body-change .header .wrap .change, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change {width: 125px;} .wrapper.id-historyOfUse section.main-body-change .header .wrap .history, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history {width: calc(100% - 375px);} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history {padding-top: 19px; padding-bottom: 19px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change {padding-top: 18px; padding-bottom: 18px;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type .item, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history .item {min-height: auto;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .date p.font, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .type p.font, .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history p.font {font-size: 13px; line-height: 1.39;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .change p.font {line-height: 1.34;} .wrapper.id-historyOfUse section.main-body-change .body > ul > li .history p.font {height: 18px; -webkit-line-clamp: 1;} .wrapper.id-historyOfUse section.main-body-change .more {padding: 26px 100px 0 100px;} .wrapper.id-historyOfUse section.main-body-change .more .wrap {padding: 28px; border: 1px solid #d8d8d8; border-radius: 6px; background-color: #fff;} .wrapper.id-historyOfUse section.main-body-change .more .wrap p.font {color: #272727; font-size: 20px; line-height: 1.1;} } /* History Of Use */ .wrapper.id-chargingStation section.main-header-navigationGlobal, .wrapper.id-chargingStation section.main-header-titleMain, .wrapper.id-chargingStation section.main-header-navigationMain, .wrapper.id-chargingStation section.main-header-navigationSub, .wrapper.id-chargingStation section.main-header-titleEtc .back, .wrapper.id-chargingStation section.main-header-navigationEtc, .wrapper.id-chargingStation footer.main-footer {display: none;} .wrapper.id-chargingStation section.main-header-titleEtc .close {display: block;} @media (min-width: 778px) { .wrapper.id-chargingStation section.main-header-navigationGlobal, .wrapper.id-chargingStation section.main-header-titleMain, .wrapper.id-chargingStation section.main-header-navigationMain, .wrapper.id-chargingStation section.main-header-navigationEtc {display: block;} } .wrapper.id-chargingStation section.main-body-select {background-color: #fff;} .wrapper.id-chargingStation section.main-body-select .container {padding: 10px 16px 0 16px;} .wrapper.id-chargingStation section.main-body-select h3.title p.font {color: #272727; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-select h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-chargingStation section.main-body-select .list {padding-top: 25px;} .wrapper.id-chargingStation section.main-body-select .list > ul {list-style: none; padding: 0; margin: -5px 0 0 0;} .wrapper.id-chargingStation section.main-body-select .list > ul > li {position: relative; padding: 5px 0;} .wrapper.id-chargingStation section.main-body-select .list > ul > li:after {display: block; position: absolute; left: 34px; bottom: 0; width: calc(100% - 52px); height: 1px; background-color: #ececec; content: '';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label {display: block; position: relative;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap {display: flow-root; padding: 0 16px 0 34px; background: transparent url('../../assets/images/common/checkbox-type03-none.png') no-repeat left center / 32px 32px;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label input:checked + .wrap {background-image: url('../../assets/images/common/checkbox-type03-checked.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information {float: left; padding: 16px 0 8px 0;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .name {padding: 0 6px;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .name p.font {color: #c6c6c6; font-size: 11px; line-height: 1.82; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .name p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity {display: flow-root; padding: 8px 0 8px 55px; background-color: transparent; background-repeat: no-repeat; background-position: left center; background-size: 50px 36px;} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketA .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketA.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketB .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketB.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketC .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketC.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketD .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketD.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketE .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketE.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketF .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketF.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketG .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketG.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li.ticketH .ticket > label .wrap .information .quantity {background-image: url('../../assets/images/content/chargingStation-select-ticketH.png');} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity .number {float: left;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity .number p.font {color: #272727; font-size: 19px; line-height: 1.05; font-family: 'NotoSans-Bold';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity .unit {float: left; padding-left: 3px;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity .unit p.font {color: rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.54; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .information .quantity .unit p.font {font-family: 'NanumSquare-Regular';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price {display: flow-root; float: right; padding: 25px 0 28px 0;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price .unit {float: left; padding: 5px 0 3px 0;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price .unit p.font {color: #000; font-size: 14px; line-height: 1.36; font-family: 'NotoSans-Regular';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label input:checked + .wrap .price .unit p.font {color: #e6186c;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price .number {float: left; padding-left: 5px;} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label .wrap .price .number p.font {color: #000; font-size: 20px; line-height: 1.35; font-family: 'NotoSans-Bold';} .wrapper.id-chargingStation section.main-body-select .list > ul > li .ticket > label input:checked + .wrap .price .number p.font {color: #e6186c;} @media (min-width: 778px) { .wrapper.id-chargingStation section.main-body-select .container {padding: 0 0 17px 0;} } .wrapper.id-chargingStation section.main-body-payment {background-color: #fff;} .wrapper.id-chargingStation section.main-body-payment .container {padding: 30px 16px 30px 16px;} .wrapper.id-chargingStation section.main-body-payment h3.title p.font {color: #272727; font-size: 17px; line-height: 1.06; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-payment h3.title p.font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-chargingStation section.main-body-payment .select {padding-top: 24px;} .wrapper.id-chargingStation section.main-body-payment .select > ul {display: flow-root; list-style: none; position: relative; padding: 0; margin: 0;} .wrapper.id-chargingStation section.main-body-payment .select > ul:before {display: block; position: absolute; left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; background-color: #e2e2e2; content: '';} .wrapper.id-chargingStation section.main-body-payment .select > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation section.main-body-payment .select > ul > li {float: right; width: calc(50% + 1px); margin-left: -1px;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li:first-child {float: left; margin-left: 0; margin-right: -1px;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label {display: block; position: relative;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label .wrap {padding: 5px 5px 7px 5px; border: 2px solid #e2e2e2; border-left-color: transparent;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li:first-child .method > label .wrap {border-left-color: #e2e2e2; border-right-color: transparent;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label input:checked + .wrap {border-color: #e6186c;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label .wrap .item {padding-bottom: 44px; text-align: center; background: transparent url('../../assets/images/content/chargingStation-payment-mobileNone.png') no-repeat center bottom / 60px 40px;} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label input:checked + .wrap .item {background-image: url('../../assets/images/content/chargingStation-payment-mobileChecked.png');} .wrapper.id-chargingStation section.main-body-payment .select > ul > li:first-child .method > label .wrap .item {background-image: url('../../assets/images/content/chargingStation-payment-cardNone.png');} .wrapper.id-chargingStation section.main-body-payment .select > ul > li:first-child .method > label input:checked + .wrap .item {background-image: url('../../assets/images/content/chargingStation-payment-cardChecked.png');} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label .wrap p.font {color: rgba(0, 0, 0, 0.5); font-size: 12px; line-height: 1.67; font-family: 'NotoSans-Regular';} .wrapper.id-chargingStation section.main-body-payment .select > ul > li .method > label input:checked + .wrap p.font {color: #e6186c;} .wrapper.id-chargingStation section.main-body-payment .message {padding-top: 12px;} .wrapper.id-chargingStation section.main-body-payment .message p.font {color: rgba(0, 0, 0, 0.4); font-size: 10px; line-height: 1.7; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-payment .message p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-chargingStation section.main-body-payment .container {padding: 0 0 60px 0;} } .wrapper.id-chargingStation section.main-body-agree {background-color: #f8f8fa;} .wrapper.id-chargingStation section.main-body-agree .container {padding: 15px 16px 21px 16px;} .wrapper.id-chargingStation section.main-body-agree .agree > label {display: block; position: relative;} .wrapper.id-chargingStation section.main-body-agree .agree > label input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;} .wrapper.id-chargingStation section.main-body-agree .agree > label .wrap {display: flex; align-items: center; min-height: 40px; padding-left: 44px; background: transparent url('../../assets/images/common/checkbox-type01-none.png') no-repeat left center / 40px 40px;} .wrapper.id-chargingStation section.main-body-agree .agree > label input:checked + .wrap {background-image: url('../../assets/images/common/checkbox-type01-checked.png');} .wrapper.id-chargingStation section.main-body-agree .agree > label .wrap .item {padding: 3px 0;} .wrapper.id-chargingStation section.main-body-agree .agree > label .wrap p.font {color: #454545; font-size: 12px; line-height: 1.42; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-agree .agree > label .wrap p.font {font-family: 'NanumSquare-Bold';} .wrapper.id-chargingStation section.main-body-agree .payment {padding-top: 12px;} .wrapper.id-chargingStation section.main-body-agree .payment > ul {display: flow-root; list-style: none; padding: 0; margin: 0 -4px;} .wrapper.id-chargingStation section.main-body-agree .payment > ul:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation section.main-body-agree .payment > ul > li {float: left; width: 50%; padding: 0 4px;} .wrapper.id-chargingStation section.main-body-agree .payment > ul > li .button .item {padding: 11px; border: 1px solid #e6186c; border-radius: 20px; background-color: #e6186c; text-align: center; cursor: pointer;} .wrapper.id-chargingStation section.main-body-agree .payment > ul > li:first-child .button .item {border-color: #e2e2e2; background-color: #fff;} .wrapper.id-chargingStation section.main-body-agree .payment > ul > li .button p.font {color: #fff; font-size: 14px; line-height: 1.15; font-family: 'NotoSans-Bold';} .wrapper.id-chargingStation section.main-body-agree .payment > ul > li:first-child .button p.font {color: #353535; font-family: 'NotoSans-Regular';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-agree .payment > ul > li .button p.font {font-family: 'NanumSquare-Bold';} html[lang="ko_KR"] .wrapper.id-chargingStation section.main-body-agree .payment > ul > li:first-child .button p.font {font-family: 'NanumSquare-Regular';} @media (min-width: 778px) { .wrapper.id-chargingStation section.main-body-agree {background-color: #fff;} .wrapper.id-chargingStation section.main-body-agree .container {padding: 15px 0 21px 0;} } @media (min-width: 778px) { .wrapper.id-chargingStation article.layout-charge {display: flow-root; position: relative; width: 778px; padding: 40px 0; margin: 0 auto; background-color: #fff;} .wrapper.id-chargingStation article.layout-charge:before {display: block; position: absolute; left: 50%; top: 82px; width: 1px; height: calc(100% - 122px); background-color: #ececec; content: '';} .wrapper.id-chargingStation article.layout-charge:after {display: block; clear: both; height: 0; font-size: 0; line-height: 0; content: '';} .wrapper.id-chargingStation article.layout-charge .container {width: 100%;} .wrapper.id-chargingStation article.layout-charge-select {float: left; width: 328px;} .wrapper.id-chargingStation article.layout-charge-payment {float: right; width: 328px;} } /* Terms */ .wrapper.id-terms section.main-header-navigationGlobal nav.navigation > ul > li.signIn, .wrapper.id-terms section.main-header-navigationMain, .wrapper.id-terms section.main-header-navigationSub, .wrapper.id-terms section.main-header-titleEtc, .wrapper.id-terms section.main-header-navigationEtc, .wrapper.id-terms footer.main-footer, .wrapper.id-terms.signIn section.main-header-navigationGlobal nav.navigation > ul > li.myPage {display: none;} .wrapper.id-terms section.main-header-navigationGlobal nav.navigation > ul > li.close {display: block;} @media (min-width: 778px) { .wrapper.id-terms section.main-header-navigationGlobal nav.navigation > ul > li.close, .wrapper.id-terms.signIn section.main-header-navigationGlobal nav.navigation > ul > li.signIn {display: none;} .wrapper.id-terms section.main-header-navigationGlobal nav.navigation > ul > li.signIn, .wrapper.id-terms section.main-header-navigationMain, .wrapper.id-terms.signIn section.main-header-navigationGlobal nav.navigation > ul > li.myPage {display: block;} } .wrapper.id-terms section.main-body-title {background-color: #fff;} .wrapper.id-terms section.main-body-title .container {padding: 19px 20px 0 20px;} .wrapper.id-terms section.main-body-title h2.title .item {text-align: center;} .wrapper.id-terms section.main-body-title h2.title p.font {color: #000; font-size: 20px; line-height: 1.1; font-family: 'NotoSans-Bold';} html[lang="ko_KR"] .wrapper.id-terms section.main-body-title h2.title p.font {font-family: 'NanumSquare-Bold';} @media (min-width: 778px) { .wrapper.id-terms section.main-body-title .container {padding: 40px 0 0 0;} .wrapper.id-terms section.main-body-title h2.title .item {text-align: left;} .wrapper.id-terms section.main-body-title h2.title p.font {color: #272727; font-size: 30px; line-height: 1.14;} html[lang="ko_KR"] .wrapper.id-terms section.main-body-title h2.title p.font {font-family: 'NanumSquare-ExtraBold';} } .wrapper.id-terms section.main-body-content {background-color: #fff;} .wrapper.id-terms section.main-body-content .container {padding: 24px 20px 24px 20px;} @media (min-width: 778px) { .wrapper.id-terms section.main-body-content .container {padding: 30px 0 50px 0;} .wrapper.id-terms section.main-body-content .content {padding: 19px; border: 1px solid #e2e2e2;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-header .include-caption .include-item p.include-font {font-size: 12px; line-height: 1.09;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-header h4.include-title {padding-top: 20px;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-header h4.include-title .include-item p.include-font {font-size: 18px; line-height: 1.12;} html[lang="ko_KR"] .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-header h4.include-title .include-item p.include-font {font-family: 'NanumSquare-ExtraBold';} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body h5.include-title {padding-top: 20px;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body h5.include-title .include-item p.include-font {font-size: 16px; line-height: 1.13;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body .include-list > ul > li {padding-top: 30px;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body .include-list > ul > li h6.include-title .include-item p.include-font {line-height: 1.15;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body .include-list > ul > li .include-content {padding-top: 10px;} .wrapper.id-terms section.main-body-content .content article.include-terms section.include-terms-body .include-list > ul > li .include-content .include-item p.include-font {color: #272727; font-size: 12px; line-height: 2;} } .wrapper.id-terms section.main-body-top {position: relative; z-index: 100;} .wrapper.id-terms section.main-body-top .top {position: fixed; bottom: 10px; margin-left: 306px;} .wrapper.id-terms section.main-body-top .top .item {overflow: hidden; width: 54px; height: 54px; background: transparent url('../../assets/images/content/mobile/terms-top-top.png') no-repeat center center / contain; text-indent: -1000px; cursor: pointer;} @media (min-width: 778px) { .wrapper.id-terms section.main-body-top .top {bottom: 100px; margin-left: 716px;} .wrapper.id-terms section.main-body-top .top .item {width: 38px; height: 38px; background-image: url('../../assets/images/content/pc/terms-top-top.png');} }