/* 롤 마스터리 프리시즌 */ #lolMastery2018 button { overflow: visible; } /* button:hover active in ie 11 */ .lolSimulatorPage { position: relative; display: block; float: left; width: 710px; height: 644px; box-sizing: border-box; margin-left: 15px; } #lolMastery2018 { position: relative; display: block; width: 100%; height: 644px; box-sizing: border-box; background-color: #000; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 { height: 1100px; background-size: cover !important; background-position: 0 0 !important; } } /* 모바일 페이지 수정 */ #mobileWrap #lolMastery2018 { border: 1px solid #4d4d4d; } #mobileWrap #lolMastery2018 .runeTree button.largeButton img.styleIcon { max-width: unset; height: unset; } #mobileWrap #lolMastery2018 .runeTree button.largeButton.x-medium img.styleIcon { left: -2px; top: 0px; } #lolMastery2018.style8000 { background-size: auto; background-image: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/back_1162x720_t1_res.jpg); background-position: -300px -76px; background-repeat: no-repeat; } #lolMastery2018.style8100 { background-size: auto; background-image: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/back_1162x720_t2_res.jpg); background-position: -300px -76px; background-repeat: no-repeat; } #lolMastery2018.style8200 { background-size: auto; background-image: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/back_1162x720_t3_res.jpg); background-position: -300px -76px; background-repeat: no-repeat; } #lolMastery2018.style8400 { background-size: auto; background-image: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/back_1162x720_t4_res.jpg); background-position: -300px -76px; background-repeat: no-repeat; } #lolMastery2018.style8300 { background-size: auto; background-image: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/back_1162x720_t5_res.jpg); background-position: -300px -76px; background-repeat: no-repeat; } #lolMastery2018 .gradient-collect { width: 0; height: 0; } #lolMastery2018 .stylePopup { display: block; width: 100%; height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; text-align: center; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0c0c0c+1,2c2c2c+21,000000+51,161616+79,131313+100 */ background: #0c0c0c; /* Old browsers */ background: -moz-linear-gradient(-45deg, #0c0c0c 1%, #2c2c2c 21%, #000000 51%, #161616 79%, #131313 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #0c0c0c 1%, #2c2c2c 21%, #000000 51%, #161616 79%, #131313 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #0c0c0c 1%, #2c2c2c 21%, #000000 51%, #161616 79%, #131313 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c0c0c', endColorstr='#131313', GradientType=1); /* IE6-9 fallback on horizontal gradient */ visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } #lolMastery2018 .stylePopup .selectStyle { position: relative; display: inline-block; overflow: hidden; width: 211px; height: 322px; float: none; } #lolMastery2018 .stylePopup .selectStyle a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } #lolMastery2018 .stylePopup .selectStyle .circleBg { position: absolute; display: inline-block; top: 25px; left: 0; width: 100%; height: 100%; background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle .circleBg.circleGlow { filter: brightness(50%); } #lolMastery2018 .stylePopup .selectStyle.style8000 .circleBg.circleGlow { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246_over1.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8100 .circleBg.circleGlow { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246_over2.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8200 .circleBg.circleGlow { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246_over3.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8400 .circleBg.circleGlow { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246_over4.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8300 .circleBg.circleGlow { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/ring_211x246_over5.png) no-repeat; } #lolMastery2018 .stylePopup .selectStyle a:hover .circleBg.circleGlow { filter: brightness(100%) !important; transition: filter 0.3s; } #lolMastery2018 .stylePopup .selectStyle .iconTrait { position: absolute; display: inline-block; top: 25px; left: 0; width: 100%; height: 100%; } #lolMastery2018 .stylePopup .selectStyle.style8000 .iconTrait { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/icon_211x246_t1.png?v=20171102a) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8100 .iconTrait { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/icon_211x246_t2.png?v=20171102a) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8200 .iconTrait { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/icon_211x246_t3.png?v=20171102a) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8400 .iconTrait { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/icon_211x246_t4.png?v=20171102a) no-repeat; } #lolMastery2018 .stylePopup .selectStyle.style8300 .iconTrait { background: url(//static.inven.co.kr/image_2011/lol/mastery/preseason/icon_211x246_t5.png?v=20171102a) no-repeat; } #lolMastery2018 .stylePopup .selectStyle .traitText { display: inline-block; position: absolute; bottom: 45px; left: 0; width: 100%; text-decoration: none; font-family: MalgunGothic, NanumGothic, NanumBarunGothic; text-align: center; } #lolMastery2018 .stylePopup .selectStyle .traitText em { letter-spacing: 0.15em; color: #FFFFFF; font-size: 18px; display: block; margin-bottom: 4px; } #lolMastery2018 .stylePopup .selectStyle .traitText i { display: block; font-size: 13px; color: rgb(194, 194, 194); letter-spacing: 0.075em; font-style: normal; font-family: NanumGothic; } #lolMastery2018 #styleTree { display: block; float: left; position: relative; width: 100%; height: 100%; overflow: hidden; visibility: hidden; opacity: 0; transition: visibility 0s, opacity 0.5s linear; } #lolMastery2018 #styleTree .restore { position: absolute; top: 15px; right: 15px; display: inline-block; border-style: solid; border-color: rgb(199, 177, 132); border-width: 1px 1px 1px 1px; background-color: rgb(24, 24, 24); text-align: center; color: rgb(199, 177, 132); font-size: 11px; font-family: 'NanumBarunGothic', dotum; letter-spacing: 0.15em; cursor: pointer; line-height: 18px; -webkit-box-shadow: 0px 0px 110px -10px rgba(0, 0, 0, 1); -moz-box-shadow: 0px 0px 110px -10px rgba(0, 0, 0, 1); box-shadow: 0px 0px 110px -10px rgba(0, 0, 0, 1); } #lolMastery2018 .runeTree { display: block; position: absolute; background-color: transparent; top: 90px; left: 50px; overflow: visible; width: 275px; height: 500px; } #lolMastery2018 .runeTree.second { left: 335px; height: 285px; } #lolMastery2018 .runeTree.exts { left: 346px; top: 370px; height: 155px; background: rgba(0, 0, 0, 0.6); padding: 25px 20px 0 5px; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree { position: relative; width: 100%; height: auto; float: left; top: unset; left: unset; } #lolMastery2018 .runeTree.second { left: unset; } #lolMastery2018 .runeTree.exts { left: unset; top: unset; } } #lolMastery2018 .runeTree button.styleButton { display: block; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; position: relative; background: none; border: 0; outline: 0; float: left; } #lolMastery2018 .runeTree .objectText { position: relative; display: block; float: right; width: 200px; height: 99px; text-align: left; } #lolMastery2018 .runeTree.exts .objectText { width: 220px; height: 40px; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree .objectText { width: calc(100% - 80px); box-sizing: border-box; padding: 0 15px 0 0; float: left; margin-left: 15px; } } #lolMastery2018 .runeTree .objectText .layerScope { z-index: 99; } #lolMastery2018 .runeTree .objectText .runeSlotLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.5s ease-out; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer { position: absolute; top: 0; left: 0; width: 100%; height: 220px; overflow: visible; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.5s ease-out; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer.layerScope-toTopOfSlot { top: -115px; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer .thin-line { position: static; margin: 10px 0; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer button.largeButton { margin-left: 0; margin-right: 15px; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer button.largeButton:last-child { margin-right: 0; } #lolMastery2018 .runeTree .objectText .rune10SlotLayer .rows._expand { padding-left: 0; } #lolMastery2018 .runeTree .objectText .rune10SlotLayer .rows._expand button.largeButton { margin-right: 2px; } #lolMastery2018 .runeTree .objectText .rune9SlotLayer .rows { display: block; overflow: visible; padding-left: 11px; } #lolMastery2018 .runeTree .objectText .rune4SlotLayer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden; opacity: 0; transition: visibility 0.2s, opacity 0.5s ease-out; } #lolMastery2018 .runeTree .objectText .rune4SlotLayer button { display: block; position: relative; float: left; width: 48px; height: 48px; outline: 0; background: transparent; border: 0; cursor: pointer; margin-top: 10px; } #lolMastery2018 .runeTree .objectText .rune4SlotLayer button img { display: block; float: none; width: 26px; height: 26px; margin: 0 auto; } #lolMastery2018 .runeTree .objectText .rune4SlotLayer .thin-line:nth-child(1) { top: -15px; left: 10px; width: 85%; } #lolMastery2018 .runeTree .objectText .rune4SlotLayer .thin-line:nth-child(2) { bottom: 10px; left: 10px; width: 85%; } #lolMastery2018 .runeTree.first li:nth-child(2) .objectText .runeSlotLayer { top: 8px; } #lolMastery2018 .runeTree .objectText .runeSlotLayer button.largeButton.x-medium { margin-left: 0; margin-right: 15px; } #lolMastery2018 .runeTree .objectText .runeSlotLayer.runeSlot4Layer button.largeButton.x-medium { margin-right: 2px; } #lolMastery2018 .runeTree .objectText strong { display: block; box-sizing: border-box; font-size: 14px; font-family: NanumGothic, NanumBarunGothic; font-weight: normal; letter-spacing: 2px; /* text-shadow: 0px 0px 5px rgba(104, 104, 104, 1); */ } #lolMastery2018 .runeTree.exts .objectText strong { font-size: 12px; letter-spacing: 1px; font-weight: bold; } #lolMastery2018 .runeTree.first li:nth-child(1) .objectText strong { font-size: 18px; } #lolMastery2018 .runeTree.second .objectText strong { color: #f0e6d2; font-size: 12px; text-transform: uppercase; line-height: 16px; } #lolMastery2018 .runeTree.style8000 .objectText strong { color: #c8aa6e !important; } #lolMastery2018 .runeTree.style8100 .objectText strong { color: #d44242 !important; } #lolMastery2018 .runeTree.style8200 .objectText strong { color: #9faafc !important; } #lolMastery2018 .runeTree.style8400 .objectText strong { color: #a1d586 !important; } #lolMastery2018 .runeTree.style8300 .objectText strong { color: #49aab9 !important; } #lolMastery2018 .runeTree .objectText .description { display: block; margin-top: 5px; color: #eadcdc; font-family: NanumGothic, NanumBarunGothic; height: 44px; overflow: hidden; text-align: justify; text-shadow: 3px 2px 2px rgb(29, 29, 29); } #lolMastery2018 .runeTree.exts .objectText .description { margin-top: 2px; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree .objectText .description { height: auto; min-height: 46px; } } #lolMastery2018 .runeTree.second .objectText .description { line-height: 16px; } #lolMastery2018 .runeTree li { display: block; position: relative; float: left; overflow: visible; width: 100%; height: 100px; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree li { box-sizing: border-box; padding: 10px; } } #lolMastery2018 .runeTree li svg.liner { position: absolute; top: -16px; left: 0; width: 100%; height: 8.64px; } #lolMastery2018 .runeTree li svg.liner.bottom { position: absolute; top: 72px; left: 0; width: 100%; transform: scale(1, -1); } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree li svg.liner { display: none; } } #lolMastery2018 .runeTree.exts li { height: 50px; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#cup-gradient-precision stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2cup-gradient-precision stop { stop-color: #c8aa6e !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#cup-gradient-precision stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2cup-gradient-precision stop { stop-color: #d44242 !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#cup-gradient-precision stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2cup-gradient-precision stop { stop-color: #9faafc !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#cup-gradient-precision stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2cup-gradient-precision stop { stop-color: #a1d586 !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#cup-gradient-precision stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2cup-gradient-precision stop { stop-color: #49aab9 !important; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#grad1 stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2grad1 stop { stop-color: #c8aa6e !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#grad1 stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2grad1 stop { stop-color: #d44242 !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#grad1 stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2grad1 stop { stop-color: #9faafc !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#grad1 stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2grad1 stop { stop-color: #a1d586 !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#grad1 stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2grad1 stop { stop-color: #49aab9 !important; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#gradient-sorcery stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2gradient-sorcery stop { stop-color: #c8aa6e !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#gradient-sorcery stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2gradient-sorcery stop { stop-color: #d44242 !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#gradient-sorcery stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2gradient-sorcery stop { stop-color: #9faafc !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#gradient-sorcery stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2gradient-sorcery stop { stop-color: #a1d586 !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#gradient-sorcery stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2gradient-sorcery stop { stop-color: #49aab9 !important; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#circle-gradient-sorcery stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2circle-gradient-sorcery stop { stop-color: #c8aa6e !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#circle-gradient-sorcery stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2circle-gradient-sorcery stop { stop-color: #d44242 !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#circle-gradient-sorcery stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2circle-gradient-sorcery stop { stop-color: #9faafc !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#circle-gradient-sorcery stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2circle-gradient-sorcery stop { stop-color: #a1d586 !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#circle-gradient-sorcery stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2circle-gradient-sorcery stop { stop-color: #49aab9 !important; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#gradient-domination stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2gradient-domination stop { stop-color: #c8aa6e !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#gradient-domination stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2gradient-domination stop { stop-color: #d44242 !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#gradient-domination stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2gradient-domination stop { stop-color: #9faafc !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#gradient-domination stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2gradient-domination stop { stop-color: #a1d586 !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#gradient-domination stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2gradient-domination stop { stop-color: #49aab9 !important; } #lolMastery2018[data-first="style8000"] svg.gradient-collect linearGradient#gradient-white-transparent stop, #lolMastery2018[data-second="style8000"] svg.gradient-collect linearGradient#T2gradient-white-transparent stop { stop-color: #fff !important; } #lolMastery2018[data-first="style8100"] svg.gradient-collect linearGradient#gradient-white-transparent stop, #lolMastery2018[data-second="style8100"] svg.gradient-collect linearGradient#T2gradient-white-transparent stop { stop-color: #fff !important; } #lolMastery2018[data-first="style8200"] svg.gradient-collect linearGradient#gradient-white-transparent stop, #lolMastery2018[data-second="style8200"] svg.gradient-collect linearGradient#T2gradient-white-transparent stop { stop-color: #fff !important; } #lolMastery2018[data-first="style8400"] svg.gradient-collect linearGradient#gradient-white-transparent stop, #lolMastery2018[data-second="style8400"] svg.gradient-collect linearGradient#T2gradient-white-transparent stop { stop-color: #fff !important; } #lolMastery2018[data-first="style8300"] svg.gradient-collect linearGradient#gradient-white-transparent stop, #lolMastery2018[data-second="style8300"] svg.gradient-collect linearGradient#T2gradient-white-transparent stop { stop-color: #fff !important; } #lolMastery2018 .runeTree svg.headerCircle { font-size: 14px; overflow: hidden; width: 64px; height: 64px; outline: 0; overflow: hidden; transform-origin: 50% 50% 0; text-align: center; position: absolute; margin: -32px; top: 50%; left: 50%; } @supports (-ms-ime-align:auto) { #lolMastery2018 .runeTree svg.headerCircle { display: none !important; } } @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { /* only ie10~11 */ #lolMastery2018 .runeTree svg.headerCircle { display: none !important; } } #lolMastery2018 .runeTree .circle { fill: none; stroke-width: 2; box-sizing: border-box; -ms-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; cx: 50%; cy: 50%; r: 43%; } #lolMastery2018 .runeTree .innerCircle1 { transform: translate(6%); } #lolMastery2018 .runeTree .innerCircle2 { transform: rotate(120deg) translateY(6%); } #lolMastery2018 .runeTree .innerCircle3 { transform: rotate(240deg) translateY(6%); } #lolMastery2018 .runeTree svg.circleBottom { box-sizing: border-box; position: absolute; bottom: -8px; left: -8px; cursor: pointer; font-size: 14px; height: 86px; width: 86px; line-height: 21px; overflow: hidden; transform-origin: 43px 43px; } #lolMastery2018 .runeTree svg.commonCircle { width: 100%; height: 100%; position: relative; } #lolMastery2018 .runeTree svg.commonCircle-wrap { outline: 0; position: absolute; top: 50%; left: 51%; opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.2s; width: 76px; height: 76px; } @supports (-webkit-appearance:none) { #lolMastery2018 .runeTree svg.commonCircle-wrap { left: 50%; } } #lolMastery2018 .runeTree svg.commonCircle-spinner { position: absolute; width: 100%; height: 100%; opacity: 0; visibility: visible; left: 0px; top: 0px; transition: opacity 0.2s; filter: blue(1px); animation: spinner 2s linear forwards infinite; } #lolMastery2018 .runeTree li.slotOpened svg.commonCircle-spinner { opacity: 1 !important; } #lolMastery2018 .runeTree button.largeButton { display: block; float: left; width: 62px; height: 62px; transition: opacity 0.2s, filter 0.2s; border: 0; background: #1e2328; border-radius: 50%; box-shadow: inset 0 0 7px #000, 0 0 1px #000; position: relative; cursor: pointer; outline: 0; } #lolMastery2018 .runeTree button.largeButton img.styleIcon { position: absolute; top: -35px; left: -32px; width: 130px; height: 130px; } #lolMastery2018 .runeTree button.largeButton.x-small img.styleIcon { top: 0; left: 0; } #lolMastery2018 .runeTree.exts button.largeButton img.styleIcon { width: 30px; height: 30px; } #lolMastery2018 .runeTree button.largeButton.x-medium img.styleIcon { width: 46px; height: 46px; left: 1px; top: 1px; } #lolMastery2018 .runeTree.first li:nth-child(2) button.largeButton.x-medium img.styleIcon { top: 2px; left: 2px; width: 44px; height: 44px; } #lolMastery2018 .runeTree button.largeButton:hover svg.commonCircle-wrap { opacity: 0.5; } #lolMastery2018 .runeTree button.largeButton .commonCircle { width: 62px; height: 62px; margin-left: -6px; margin-top: -1px; } @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { #lolMastery2018 .runeTree button.largeButton .commonCircle { margin-left: -7px; margin-top: -1px; } } #lolMastery2018 .runeTree button.largeButton.x-medium { width: 48px; height: 48px; margin-left: 8px; } #lolMastery2018 .runeTree button.largeButton.x-medium .commonCircle { width: 48px; height: 48px; } #lolMastery2018 .runeTree button.largeButton.x-medium svg.commonCircle-wrap { width: 62px; height: 60px; left: 52%; top: 51%; } #lolMastery2018 .runeTree button.largeButton.x-small { width: 30px; height: 30px; margin-left: 8px; margin-right: 13px; } #lolMastery2018 .runeTree button.largeButton.x-small .commonCircle { width: 30px; height: 30px; } #lolMastery2018 .runeTree button.largeButton.x-small svg.commonCircle-wrap { width: 44px; height: 42px; left: 52%; top: 51%; } @media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) { /* ie 11 */ #lolMastery2018 .runeTree button.largeButton.x-medium svg.commonCircle-wrap { top: 50%; left: 52%; } } @supports (-webkit-appearance:none) { #lolMastery2018 .runeTree button.largeButton.x-medium svg.commonCircle-wrap { top: 50%; left: 50%; } } #lolMastery2018 .runeTree .thin-line { display: block; position: absolute; left: -38px; bottom: 14px; width: 100%; color: rgba(255, 255, 255, 0.3); } #lolMastery2018 .runeTree .thin-line .thin-line-horizontal { margin: 0 3px; border-top: 1px solid currentColor; display: block; box-sizing: border-box; width: 97%; } #lolMastery2018 .runeTree .thin-line .thin-line-left, #lolMastery2018 .runeTree .thin-line .thin-line-right { display: block; position: absolute; left: 0; width: 5px; height: 5px; border: 1px solid currentColor; transform: translate(-50%, -50%) rotate(45deg); box-sizing: border-box; } #lolMastery2018 .runeTree .thin-line .thin-line-right { left: 100%; } @media (min-width:1px) and (max-width:414px) { #lolMastery2018 .runeTree .thin-line { display: none; } } @keyframes spinner { to { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } #lolMastery2018 #shouldVersionUpdatePopup { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; color: #FFF; text-align: center; font-size: 24px; font-family: NanumBarunGothic; line-height: 52px; } #lolMastery2018 #shouldVersionUpdatePopup p { margin-top: 250px; } #lolDbPlayer .matchHistory .matchBox .matchDetailWrap .matchDetailInner .matchDetailContentsWrapper .matchDetailContents { display: none !important; }