.idol, .legion-product { width: 100%; } a:hover { opacity: .7; transition: all .5s ease-in-out; -webkit-transition: all .5s ease-in-out; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; } .pc { display: block; } .sp { display: none; } .title-line { display: block; width: 100%; margin: 0 auto; } .legion-product, .select { width: 80%; margin: 20px auto; } .select { width: 86%; } .legion-title { text-align: center; margin: 10px auto; } .legion-title .title-big { font-size: 38px; line-height: 46px; } .legion-title p { font-size: 26px; font-weight: bold; margin-top: -10px; } .app { width: 100%; margin: 0 auto; --link-color: var(--med-blue) } .app .mobile-compare-cards { margin: 0 auto } .app .mobile-compare-cards_wrap { display: flex; justify-content: space-around; margin: 0 auto; } .mh-main-title p { font-size: 34px; line-height: 52px; text-align: center; color: white; background-color: #4e444d; width: 70%; margin: -12px auto -16px; font-weight: bold; } .app .mobile-compare-cards_left, .app .mobile-compare-cards_right { position: relative; padding: 16px; overflow: hidden; border-radius: 12px } @media only screen and (max-width: 1280px) { .app .mobile-compare-cards_left, .app .mobile-compare-cards_right { width: 584px; height: 520px } .app .mobile-compare-cards_wrap { width: 100%  !important; } .app .mobile-compare-cards_right .product-image { margin-right: -232px } .app .mobile-compare-cards_left .product-image { margin-left: -232px } } .app .mobile-compare-cards_left .bg-box, .app .mobile-compare-cards_right .bg-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } .app .mobile-compare-cards_left .bg-box .bg, .app .mobile-compare-cards_right .bg-box .bg { display: block; width: 100%; height: 100%; object-fit: cover } .app .mobile-compare-cards_left .bg-box:after, .app .mobile-compare-cards_right .bg-box:after { content: ""; position: absolute; inset: 0; background-color: #00000080; opacity: 0; transition: opacity .3s ease } .app .mobile-compare-cards_left .bg-box.no-produce-img, .app .mobile-compare-cards_right .bg-box.no-produce-img { transition: transform .5s ease } .app .mobile-compare-cards_left .bg-box.no-produce-img:hover, .app .mobile-compare-cards_right .bg-box.no-produce-img:hover { transform: scale(1.2) } .app .mobile-compare-cards_left .bg-box.no-produce-img:hover:after, .app .mobile-compare-cards_right .bg-box.no-produce-img:hover:after { opacity: 1 } .app .mobile-compare-cards_left .product-image, .app .mobile-compare-cards_left .product-image-no-hover, .app .mobile-compare-cards_right .product-image, .app .mobile-compare-cards_right .product-image-no-hover { display: inline-block; z-index: 10; border-radius: 6px } @media only screen and (max-width: 1920px) { .app .mobile-compare-cards_left .product-image, .app .mobile-compare-cards_left .product-image-no-hover, .app .mobile-compare-cards_right .product-image, .app .mobile-compare-cards_right .product-image-no-hover { width: 352px; height: 474px } .app .mobile-compare-cards_wrap { width: 100%  !important; } .app .mobile-compare-cards_left, .app .mobile-compare-cards_right { width: 50%; height: 520px } .app .mobile-compare-cards_left .left-card-container, .app .mobile-compare-cards_right .left-card-container { width: 400px; height: 488px } } .app .mobile-compare-cards_left .product-image-no-hover, .app .mobile-compare-cards_right .product-image-no-hover { visibility: hidden } .app .mobile-compare-cards_left { margin-right: 16px } .app .mobile-compare-cards_left .product-image { margin-left: -113px; transition: transform 1s ease, box-shadow 1s ease } .app .mobile-compare-cards_left .product-image:hover { transform: translate(100px) } .app .mobile-compare-cards_right .product-image { margin-right: -113px; transition: transform 1s ease, box-shadow 1s ease } .app .mobile-compare-cards_right .product-image:hover { transform: translate(-100px) } .app .mobile-compare-cards_left, .app .mobile-compare-cards_right { display: flex; align-items: center; justify-content: space-between } .app .mobile-compare-cards_left .left-card-container, .app .mobile-compare-cards_right .left-card-container { display: flex; flex-wrap: nowrap; flex-direction: column; justify-content: space-between; padding: 24px; z-index: 10; color: #535353; background: #fff; border-radius: 12px } .app .mobile-compare-cards_left .left-card-container .left-card-container_inner, .app .mobile-compare-cards_right .left-card-container .left-card-container_inner { display: flex; flex-direction: column; overflow: hidden; height: 100vh; position: relative; } .app .mobile-compare-cards_left .left-card-container .logo-headline-con, .app .mobile-compare-cards_right .left-card-container .logo-headline-con { margin-bottom: 16px } .app .mobile-compare-cards_left .left-card-container .logo-headline-con-img, .app .mobile-compare-cards_right .left-card-container .logo-headline-con-img { height: 84px } .app .mobile-compare-cards_left .left-card-container .left-card-logo, .app .mobile-compare-cards_right .left-card-container .left-card-logo { width: 171px; height: 84px } .app .mobile-compare-cards_left .left-card-container .left-head-line-text, .app .mobile-compare-cards_right .left-card-container .left-head-line-text { overflow: hidden; text-align: left; color: #3b3b3b; font-size: 32px; letter-spacing: -.96px; opacity: 1; font-weight: 700 } .app .mobile-compare-cards_left .left-card-container .subhead-line-text, .app .mobile-compare-cards_right .left-card-container .subhead-line-text { font-size: 16px; margin-bottom: 16px; color: #3b3b3b; font-weight: 700 } .app .mobile-compare-cards_left .left-card-container .text-body, .app .mobile-compare-cards_right .left-card-container .text-body { text-align: left; color: #535353; flex-grow: 1; overflow: hidden } .app .mobile-compare-cards_left .left-card-container .link-btn-box, .app .mobile-compare-cards_right .left-card-container .link-btn-box { display: flex; flex-wrap: wrap; align-items: flex-start; position: absolute; bottom: 0 } .app .mobile-compare-cards_left .left-card-container .cta-wrap, .app .mobile-compare-cards_right .left-card-container .cta-wrap { overflow: hidden; margin-right: 0  !important } .app .mobile-compare-cards_left .left-card-container .primary-cta-btn, .app .mobile-compare-cards_right .left-card-container .primary-cta-btn { display: inline-block; max-width: 100%; padding: 0 20px; height: 48px; line-height: 48px; margin-right: 16px; background: #171717; border-radius: 100px; opacity: 1; color: #fff; text-align: center; text-decoration: none; overflow: hidden } .app .mobile-compare-cards_left .left-card-container .primary-cta-btn:hover, .app .mobile-compare-cards_right .left-card-container .primary-cta-btn:hover { opacity: .8 } .app .mobile-compare-cards_left .left-card-container .left-learn-more, .app .mobile-compare-cards_right .left-card-container .left-learn-more { overflow: hidden; max-width: 100%; font-size: 16px; color: #171717; border-bottom: 2px solid #a4a2a2; text-decoration: none; cursor: pointer; padding-top: 12px } .app .mobile-compare-cards_left .left-card-container .left-learn-more:hover, .app .mobile-compare-cards_right .left-card-container .left-learn-more:hover { border-bottom: 2px solid red } @media only screen and (min-width: 1920px) { .mobile-compare-cards_wrap { width: 100%; } .mobile-compare-cards_left, .mobile-compare-cards_right { height: 520px; width: 50%; border-radius: 12px } .product-image { width: 352px; height: 474px } .left-card-container { width: 50%; height: 488px } } .app .left-card-container { background: #2a2a2a  !important; color: #3b3b3b  !important } .app .left-card-container .text-body { color: #fff  !important; flex: 1  !important; overflow: hidden } .app .left-card-container .text-body a { border-bottom: 1px solid #fff } .app .left-card-container .left-head-line-text { color: #fff } .app .left-card-container .subhead-line-text { color: #e6e2e4  !important } .app .left-card-container .primary-cta-btn { background: #fff  !important; color: #171717  !important } .app .left-card-container .left-learn-more { color: #fff  !important } .legion-content { margin: 30px auto; } .legion-title { width: 80%  !important; margin: 20px auto; } .space { margin-top: 50px; } .space-img { width: 100%; margin: 10px auto 20px auto; border-radius: 10px; } .lus { position: relative; color: #fff; } .lus-text { width: 50%; position: absolute; top: 40%; left: 5%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .lus-text .lus-text-add { font-weight: bolder; font-size: 46px; letter-spacing: 3px; } .lus-text .lus-text-add small { display: block; font-size: 30px; letter-spacing: 0; } .lus-text .lus-text-small { width: 80%; font-size: 20px; margin-top: 30px; } .select ul { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; } .select ul li { width: calc((100% - 100px) / 3); } .select ul:nth-of-type(2) { margin-top: 10px; } .select ul li .select-title { font-size: 27px; text-align: center; margin-top: 20px; } .select ul li p { font-size: 20px; text-align: center; font-weight: bold; margin-bottom: 15px; } .select ul li img { border-radius: 10px; } .select ul li .select-img { position: relative; z-index: 1; } .content { position: relative; z-index: 1; } .overlay { max-width: 462px; position: absolute; opacity: 0; transition: opacity .5s ease-out; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .5); z-index: 2; border-radius: 10px; } .overlay:hover { opacity: 1; } .overlay span { display: block; color: #fff; font-size: 1em  !important; text-align: center; margin-top: 20%; } .lus-add { letter-spacing: 0px  !important; margin-top: 30px; } .lus-text { width: 55%; } @media screen and (max-width: 760px) { .sp { display: block; } .pc { display: none; } .idol-title p, .idol-intro li p, .idol .campaign .campaign-title, .select ul li .select-title { font-size: 19px; } .legion-title p { font-size: 15px; margin-top: 5px; } .legion-title .title-big { line-height: 24px; font-size: 20px; } .legion-title { width: 100%  !important; margin-top: 0px; } .idol-title p, .idol-title span, .campaign-info p, .campaign-info a, .select ul li p { font-size: 16px; } .campaign-info .info-txt, .campaign-info .pic .add-icon, .campaign-info .pic .add-date { font-size: 12px; } .campaign-info .pic .add-icon, .campaign-info .pic .add-date { line-height: 12px; padding: 4px 6px; } .mh-main-title p { width: 70%; font-size: 20px; line-height: 28px; } .mobile-compare-container-warp { width: 100%; min-height: 100vh; padding: 16px 24px; box-sizing: border-box; background: #171717; overflow: auto } .mobile-compare-container-warp .mobile-container { width: 100%; display: block; } .mobile-compare-container-warp .mobile-container .mobile-container_left, .mobile-compare-container-warp .mobile-container .mobile-container_right { width: 100%; border-radius: 12px; background: #2a2a2a; color: #171717 } .mobile-compare-container-warp .mobile-container .head-box { position: relative; width: 100%; height: 212px; border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; margin-bottom: 10px } .mobile-compare-container-warp .mobile-container .head-box .bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 212px; object-fit: cover } .mobile-compare-container-warp .mobile-container .head-box .logo { width: 46%; height: 36%; position: absolute; top: 30%; right: 10% } .mobile-compare-container-warp .mobile-container .flex-box { display: flex; flex-direction: column; justify-content: space-between; padding: 0 16px 24px; box-sizing: border-box } .mobile-compare-container-warp .mobile-container .body-box { font-size: 18px } .mobile-compare-container-warp .mobile-container .body-box .logo-or-headline { display: inline-block; font-size: 32px; font-weight: 700; margin-bottom: 16px } .mobile-compare-container-warp .mobile-container .body-box .subhead-line-text { margin-bottom: 16px; font-weight: 700 } .mobile-compare-container-warp .mobile-container .body-box .text-body { color: #535353 } .mobile-compare-container-warp .mobile-container .body-box .text-body a { border-bottom: 1px solid #535353 } .mobile-compare-container-warp .mobile-container .bottom-box { display: flex; flex-wrap: wrap; align-items: center; margin-top: 16px } .mobile-compare-container-warp .mobile-container .bottom-box .cta-wrap { margin-right: 0  !important } .mobile-compare-container-warp .mobile-container .bottom-box .primary-cta-btn { display: inline-block; padding: 0 20px; height: 48px; line-height: 48px; margin-right: 16px; background: #171717 0% 0% no-repeat padding-box; border-radius: 100px; opacity: 1; color: #fff; text-align: center; text-decoration: none; overflow: hidden } .mobile-compare-container-warp .mobile-container .bottom-box .learn-more { font-size: 16px; color: #171717; border-bottom: 2px solid #a4a2a2; padding-top: 6px; text-decoration: none; overflow: hidden } .mobile-compare-container-warp .m-t-20 { margin-top: 20px } .gaming-theme-black .mobile-compare-container-warp { background: #171717 } .gaming-theme-black .mobile-compare-container-warp .mobile-container_left, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right { background: #2a2a2a } .gaming-theme-black .mobile-compare-container-warp .mobile-container_left .body-box, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right .body-box, .gaming-theme-black .mobile-compare-container-warp .mobile-container_left .body-box .text-body, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right .body-box .text-body { color: #e6e2e4 } .gaming-theme-black .mobile-compare-container-warp .mobile-container_left .body-box .text-body a, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right .body-box .text-body a { border-bottom: 1px solid #e6e2e4 } .gaming-theme-black .mobile-compare-container-warp .mobile-container_left .primary-cta-btn, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right .primary-cta-btn { background: #fff; color: #171717 } .gaming-theme-black .mobile-compare-container-warp .mobile-container_left .learn-more, .gaming-theme-black .mobile-compare-container-warp .mobile-container_right .learn-more { color: #fff } .legion-product, .select { width: 98%; } .legion-content { margin: 10px auto; } .mobile-compare-container-warp .mobile-container .body-box .subhead-line-text, .mobile-compare-container-warp .mobile-container .body-box .text-body, .mobile-compare-container-warp .mobile-container .bottom-box .learn-more { color: #fff; } .mobile-compare-container-warp .mobile-container .bottom-box .primary-cta-btn { color: #000; background-color: #fff; } .lus-text .lus-text-add { font-size: 17px; } .lus-text .lus-text-add small { font-size: 15px; } .lus-text { width: 85%; top: 45%; } .lus-text .lus-text-small { width: 85%; } .lus-text .lus-text-small { font-size: 12px; margin-top: 3px; } .legion-product, .select { margin: 10px auto; } .legion-title .title-big, .product-info p { font-size: 18px; } .space { margin-top: 15px; margin-bottom: 5px; } .space-img { margin-bottom: 15px; margin-top: 5px; } .select ul { gap: 10px; } .select ul li { width: 48%; } .select ul li p, .overlay span { font-size: 9px; } .overlay span { margin-top: 20%; } .select ul li .select-title { font-size: 12px; margin-bottom: 5px; } .campaign-info .pic .add-txt { font-size: 30px; } .mobile-compare-container-warp .mobile-container .body-box .text-body { font-size: 14px; } .overlay span { font-size: 12px  !important; } .lus .space-img { height: 240px; } .lus-text { width: 85%  !important; } } @media screen and (min-width: 761px) and (max-width: 1100px) { .mh-main-title p, .lus-text .lus-text-add small { font-size: 24px; } .mh-main-title p { font-size: 22px; } .mh-main-title { padding-top: 4px; } .legion-title .title-big, .lus-text .lus-text-add { font-size: 28px; } .select ul li h3, .product-info p { font-size: 17px; } .select ul li .select-title { font-size: 14px; } .select ul li p, .app .left-card-container .text-body, .lus-text .lus-text-small, .product-info p span, .product-price table { font-size: 12px; } .overlay span { font-size: 10px; } .select { width: 90%; } .legion-title p { margin-top: 5px; font-size: 21px; } .legion-title .title-big { line-height: 32px; } .legion-product { width: 98%; } .product-info { width: 95%; } .product-update-cta a { width: 35%; } .lus-text, .product-update ul { width: 85%  !important; } .lus-add, .lus-text .lus-text-small { margin-top: 10px; } .lus .space-img { height: 360px; } .lus-text .lus-text-small { margin-top: 10px; } .legion-title .title-big, .lus-text .lus-text-add { font-size: 24px; } .campaign-info .info-txt { font-size: 9px; } } @media screen and (min-width: 1101px) and (max-width: 1300px) { .lus-text { top: 45%; } } @media screen and (min-width: 1101px) and (max-width: 1450px) { .app .mobile-compare-cards_left .left-card-container { width: 400px; } .app .mobile-compare-cards_left .left-card-container .link-btn-box { height: 85px; } .legion-title .title-big { font-size: 30px; } .legion-title p { margin-top: 0px; } .mh-main-title p, .lus-text .lus-text-add { font-size: 28px; } .select ul li .select-title { font-size: 18px; } .product-info p, .lus-text .lus-text-add small { font-size: 20px; } .product-info p span, .lus-text .lus-text-small { font-size: 14px; } .select ul li p { font-size: 13px; } .overlay span { font-size: 12px; } .app .left-card-container .text-body { font-size: 13px; } .product-price table { font-size: 16px; } } @media screen and (min-width: 1400px) { .lus-text .lus-text-add { font-size: 30px; } } @media screen and (min-width: 2151px) { .overlay { width: 100%; } .overlay, .select ul li .select-img, .select ul li { max-width: 462px; } .select ul { gap: 60px; } }