.how-to-win-header .how-to-win-heading, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details .how-to-win-details-item-number { font-family: var(--font-display); } .how-to-win-header .how-to-win-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details { font-family: var(--font-body); } .how-to-win-header .how-to-win-heading, .how-to-win-header .how-to-win-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details { -webkit-user-select: none; } .how-to-win-header .how-to-win-heading, .how-to-win-header .how-to-win-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details { font-kerning: normal; -webkit-font-feature-settings: "kern" 1; -webkit-font-smoothing: antialiased; } .how-to-win-header .how-to-win-heading, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name { text-transform: uppercase; } .how-to-win-header .how-to-win-heading:lang(ko-kr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(ko-kr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(ko-kr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(ko-kr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(ko-kr), .how-to-win-header .how-to-win-heading:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(ja-jp), .how-to-win-header .how-to-win-heading:lang(tr-tr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(tr-tr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(tr-tr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(tr-tr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(tr-tr), .how-to-win-header .how-to-win-heading:lang(el-gr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(el-gr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(el-gr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(el-gr), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(el-gr), .how-to-win-header .how-to-win-heading:lang(th-th), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(th-th), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(th-th), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(th-th), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(th-th), .how-to-win-header .how-to-win-heading:lang(zh-tw), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score:lang(zh-tw), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label:lang(zh-tw), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(zh-tw), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name:lang(zh-tw) { text-transform: none; } .how-to-win-header .how-to-win-heading { color: #f0e6d2; font-size: 30px; font-weight: 700; line-height: 32px; letter-spacing: 0.05em; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label .how-to-win-champion-name { color: #f0e6d2; font-size: 18px; font-weight: 700; line-height: 22px; letter-spacing: 0.05em; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label { color: #f0e6d2; font-size: 14px; font-weight: 700; line-height: 18px; letter-spacing: 0.075em; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label { color: #a09b8c; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label { color: #f0e6d2; font-size: 12px; font-weight: 700; line-height: 16px; letter-spacing: 0.075em; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label:lang(ja-jp) { font-size: 13px; } .how-to-win-header .how-to-win-label, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description, .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details { color: #a09b8c; font-size: 12px; font-weight: normal; line-height: 16px; letter-spacing: 0.1em; -webkit-font-smoothing: subpixel-antialiased; } .how-to-win-header .how-to-win-label:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description:lang(ja-jp), .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details:lang(ja-jp) { font-size: 13px; } .how-to-win-root { direction: ltr; position: relative; background-image: url(/fe/lol-npe-how-to-win/GettingStarted_BG.png); background-position: 0; background-size: cover; cursor: default; width: 1055px; height: 718px; } .how-to-win-header { position: absolute; top: 158px; left: 35px ; right: auto ; padding: 0 0 0 80px ; height: 71px; background-image: url(/fe/lol-npe-how-to-win/GettingStarted_TutorialLogo4k.png); background-size: 64px; background-position: 0 -5px ; background-repeat: no-repeat; } .how-to-win-header .how-to-win-heading { margin-bottom: 4px; } .how-to-win-body { display: flex; justify-content: center; } .how-to-win-body .how-to-win-section { text-align: center; margin-top: 219px; padding-top: 10px; height: 719px; box-sizing: border-box; } .how-to-win-body .how-to-win-section.how-to-win-creep-score .how-to-win-ring-icon { background-image: url(/fe/lol-npe-how-to-win/Icon_GoldMinions_4k.png); } .how-to-win-body .how-to-win-section.how-to-win-takedowns .how-to-win-ring-icon { background-image: url(/fe/lol-npe-how-to-win/Icon_Takedowns_4k.png); } .how-to-win-body .how-to-win-section.how-to-win-objectives .how-to-win-ring-icon { background-image: url(/fe/lol-npe-how-to-win/Icon_Objectives_4k.png); } .how-to-win-body .how-to-win-section .how-to-win-section-content { box-sizing: border-box; height: 480px; width: 300px; padding: 0px 26px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring { height: 280px; position: relative; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-icon { width: 30px; height: 30px; background-size: cover; position: absolute; left: 109px; top: -12px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border { box-sizing: border-box; height: 239px; padding-top: 67px; background-image: url(/fe/lol-npe-how-to-win/HowToWinMetal_4k.png); background-size: 228px 200px; background-position: 10px; background-repeat: no-repeat; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score { background: -webkit-linear-gradient(#cdbe91, #c8aa6e, #785a28); -webkit-text-fill-color: transparent; padding-bottom: 7px; padding-top: 4px; -webkit-background-clip: text; -webkit-text-stroke-width: 0.5px; -webkit-text-stroke-color: #cdbe91; font-style: italic; font-size: 48px; letter-spacing: normal; font-weight: 700; margin-bottom: 16px; margin-right: 2px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-score-label { width: 101px; margin: 0px auto; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait { width: 64px; margin: 19px auto 0px; position: relative; cursor: pointer; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait lol-uikit-framed-icon { width: 64px; height: 64px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait .how-to-win-champ-portrait-img { width: 56px; height: 56px; background-size: 64px; background-repeat: no-repeat; background-position: -4px -4px; border-radius: 50%; border: 1px solid #1e2328; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait .how-to-win-champ-portrait-mask { display: none; position: absolute; width: 56px; height: 56px; top: 4px; left: 4px; background-color: rgba(0,0,0,0.5); border-radius: 50%; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait:hover .how-to-win-champ-portrait-mask { display: block; background-image: url(/fe/lol-npe-how-to-win/InspectChampion_Hover_4k.png); background-size: 18px 18px; background-position: center; background-repeat: no-repeat; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-ring-border .how-to-win-champ-portrait:active .how-to-win-champ-portrait-mask { background-image: url(/fe/lol-npe-how-to-win/InspectChampion_Click_4k.png); } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-ring .how-to-win-champion-label { color: #c8aa6e; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-description { margin-top: 7px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details { display: none; height: 195px; flex-direction: column; justify-content: space-between; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details { text-align: left; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details .how-to-win-details-item { display: flex; justify-content: space-between; border-bottom: 1px solid #1e2328; padding: 6px 0px 3px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details .how-to-win-details-item:last-child { border-bottom: 0px; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-details .how-to-win-details-item-number { text-align: right; font-size: 12px; font-weight: 900px; color: #f0e6d2; } .how-to-win-body .how-to-win-section .how-to-win-section-content .how-to-win-full-details .how-to-win-view-match { display: flex; margin: 0px auto; } .how-to-win-body .how-to-win-section:hover { background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.05) 100%); } .how-to-win-body .how-to-win-section:hover .how-to-win-description { display: none; } .how-to-win-body .how-to-win-section:hover .how-to-win-full-details { display: flex; }