.tcenter { text-align: center; } .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; } .idol-info { width: 80%; background-image: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/mh-wilds/content-bg.jpg); background-repeat: repeat; background-position: left; padding: 20px 0 10px 0; margin: 0 auto; border-radius: 10px; } .title-line { display: block; width: 100%; margin: 0 auto; } .width95 { width: 95%; } .width80 { width: 80%; } .idol-title { width: 80%; margin: 10px auto; } .idol-title p, .idol-title span { font-weight: bold; text-align: center; } .idol-title p { font-size: 24px; } .idol-title h2, .idol-intro li h2 { text-align: center; font-size: 38px; } .idol-title span { display: block; font-size: 26px; } .idol-intro { display: flex; justify-content: center; align-items: center; gap: 0px; margin: 0 auto; } .idol-intro li { width: calc((100% - 60px) / 4)  !important; margin-top: 10px; margin-bottom: 10px; } .idol-intro h2 { color: #3f2b23; margin: 10px auto; } .idol-intro img { width: 80%; height: auto; width: 200px; height: 300px; display: block; margin: 0 auto; } .idol-intro a { width: 90%; padding: 5px 10px; color: #000; font-size: 14px; font-weight: bold; display: block; margin: 0 auto; text-align: center; background-color: #fff; } .check-btn { position: relative; width: 300px; text-align: center; padding: 12px 0 12px 0; margin: 0 auto 20px; } .check-btn p { text-align: center; font-size: 20px; line-height: 20px; font-weight: bold; color: #ddd5aa; position: absolute; top: 48%; left: 20%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .legion-product, .select { width: 80%; margin: 20px auto; } .legion-title { text-align: center; margin: 10px auto; } .legion-title h3 { 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; } @media only screen and (max-width: 1920px) { .app .mobile-compare-cards_wrap { width: 100%  !important; } } @media only screen and (max-width: 1280px) { .app .mobile-compare-cards_wrap { width: 100%  !important; } } .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: 1920px) { .app .mobile-compare-cards_left, .app .mobile-compare-cards_right { width: 50%; height: 520px } } @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_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_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 } @media only screen and (max-width: 1280px) { .app .mobile-compare-cards_left .product-image { margin-left: -232px } } .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 } @media only screen and (max-width: 1280px) { .app .mobile-compare-cards_right .product-image { margin-right: -232px } } .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; } @media only screen and (max-width: 1920px) { .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 .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 h2 { font-weight: bolder; font-size: 46px; letter-spacing: 3px; } .lus-text h2 small { display: block; font-size: 30px; letter-spacing: 0; } .lus-text p { width: 80%; font-size: 20px; margin-top: 30px; } .campaign { margin: 40px auto; position: relative; } .campaign::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, .6); } .idol .campaign h2 { position: relative; color: #fdf4e6; font-size: 32px; z-index: 999; margin-bottom: 0; } .campaign .title-line { width: 66%; position: relative; z-index: 999; } .campaign-content { width: 100%; margin: 30px auto; } .campaign-content-test { width: 90%; margin: 0 auto; display: flex; justify-content: center; align-items: center; gap: 20px; } .campaign-info { width: 100%; position: relative; z-index: 999; background-color: #e6e0cc; border-radius: 15px  !important; overflow: auto; } .campaign-info .info { padding: 15px 5px; padding-bottom: 0; padding-top: 10px; } .campaign-info p { font-size: 22px; font-weight: bold; text-align: left; margin-bottom: 10px; margin-left: 5px; } .campaign-info p, .campaign-info .info-txt { color: #1b0914; } .campaign-info img { width: 96%; height: auto; margin: 5px auto; display: block; border-radius: 10px; } .campaign-info .pic { position: relative; } .campaign-info .pic .add-icon, .campaign-info .pic .add-date, .campaign-info .pic .add-txt { position: absolute; font-size: 16px; line-height: 16px; font-weight: bold; color: #fbf0a1; padding: 8px 12px; border-radius: 10px; } .campaign-info .pic .add-icon { top: 0%; left: 2%; background-color: rgba(0, 0, 0, .7); border-top-right-radius: unset; border-bottom-left-radius: unset; } .campaign-info .pic .add-date { top: 0%; right: 2%; color: #fff; background-color: rgba(0, 0, 0, .8); border-top-left-radius: unset; border-bottom-right-radius: unset; } .campaign-info .pic .add-txt { font-size: 36px; line-height: 36px; right: 5%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); letter-spacing: 6px; } .campaign-info .info-txt { display: block; text-align: left; font-size: 14px; margin-left: 15px; margin-top: 10px; margin-bottom: 10px; } .campaign-info a { position: relative; font-size: 18px; display: block; width: 100%; background-color: #665634; font-weight: bold; color: #e6e0cc; padding: 15px 25px; overflow: hidden; } .campaign-info a img { width: 5%; position: absolute; top: 42%; right: 10%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .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 h3 { 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%; } .product-content { position: relative; width: 80%; margin: 20px auto; background-image: url(//p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/mh-wilds/content-bg.jpg); background-repeat: repeat; background-position: left; border-radius: 10px; padding: 20px 0; } .product-info { width: 80%; margin: 30px auto; color: #fff; padding: 15px 20px 25px 25px; border-radius: 10px; background: url(https://p4-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/monster-hunter/update2506/content-bg01.png) no-repeat 100% 100%; background-size: cover; } #idol-one { margin-top: 70px; } #idol-four { margin-bottom: 70px; } .product-info h2 { width: 75%; font-size: 30px; background-color: rgba(0, 0, 0, .4); padding: 10px 20px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .product-info h2 span { display: block; font-size: 20px; text-align: left; } .product-info img { width: 20%; } .product-price { width: 90%; margin: 0 auto; position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 30px; } .product-price table { width: 80%; font-size: 20px; font-weight: bold; color: #f8edd0; } .product-price .product-feature { position: absolute; width: 36%; top: 0%; right: 5%; } .product-info h2 { margin-left: 5%; } .mySwiper { position: relative; padding: 30px 90px; } .swiper-button-next, .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); width: 27px; height: 44px; margin-top: -22px; z-index: 999; cursor: pointer; background-size: 27px 44px; background-position: center; background-repeat: no-repeat; } .swiper-button-prev { left: -30px; width: 120px; height: 120px; background: url(https://p1-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/monster-hunter/update2506/icon-arrow-left.png) no-repeat; background-position: 0 0; background-size: 100%; right: auto; } .swiper-button-next { right: 30px; width: 120px; height: 120px; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/monster-hunter/update2506/icon-arrow-right.png) no-repeat; background-position: 0 0; background-size: 100%; left: auto; } .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { content: " "  !important; } .swiper-backface-hidden .swiper-slide { width: calc((100% - 100px) / 3)  !important; } .product-price table td { padding: 0px 0 5px 5px; color: #fff; } .product-price table tr:nth-of-type(1) td { font-size: 18px; padding-bottom: 8px; } .product-price table td a { padding-right: 5px; } .product-price table td span { font-size: 1.5em; } .product-price table tr:nth-last-of-type(1) td { padding-bottom: 0px; color: #000; background-color: #e6e0cc; } .product-price table tr:nth-last-of-type(1) td:nth-of-type(1) { padding-bottom: 5px; } .product-info { width: 90%; } .product-info h2 { margin-left: 2%; } .product-price { width: 98%; } @media screen and (max-width: 760px) { .sp { display: block; } .pc { display: none; } .idol-info { width: 95%; padding: 30px 0 10px 0; } .idol-title h2, .idol-intro li h2, .idol .campaign h2, .select ul li h3 { font-size: 19px; } .legion-title p { font-size: 15px; margin-top: 5px; } .legion-title h3 { 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; } .width95 { width: 100%; margin-bottom: 20px; } .idol-intro, .campaign-content-test { flex-wrap: wrap; } .idol-intro li { width: calc((100% - 10px) / 2)  !important; } .idol-intro li:nth-of-type(3) { margin-top: 0; } .idol-intro img { width: 80%; height: auto; } .idol-intro a { width: 96%; padding: 5px; font-size: 12px; } .mySwiper { padding: 10px 3px; } .campaign-content { margin: 10px auto; } .swiper-backface-hidden .swiper-slide { width: 78%  !important; } .swiper-button-prev, .swiper-button-next { display: none; } .swiper-backface-hidden .swiper-slide { margin-right: 10px  !important; } .swiper-slide, .campaign-content, .select ul { display: flex; flex-wrap: wrap; } .campaign-info p { font-size: 12px; margin-left: 2px; } .campaign-info .info { padding: 7px 2px; } .campaign-info a { padding: 7px 6px; font-size: 13px; } .swiper-backface-hidden .swiper-slide { min-height: 200px  !important; } .campaign-info .info-txt { margin-left: 2px; } .campaign { margin: 20px auto; } .mh-main-title h1 { width: 70%; } .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 h2 { font-size: 17px; } .lus-text h2 small { font-size: 15px; } .lus-text { width: 85%; top: 45%; } .lus-text p { width: 85%; } .lus-text p { font-size: 12px; margin-top: 3px; } .legion-product, .select { margin: 10px auto; } .legion-title h3, .product-info h2 { font-size: 18px; } .space { margin-top: 15px; margin-bottom: 5px; } .space-img { margin-bottom: 15px; margin-top: 5px; } .product-info, .product-content, .product-info h2 { width: 90%; } .product-info { width: 95%; padding: 5px; background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/monster-hunter/update2506/content-bg01-sp.jpg) no-repeat 100% 100%; background-size: cover; } .product-info h2 { width: 100%; padding: 5px; margin-left: 0%; font-size: 14px; } .product-info h2 span { font-size: 10px; } #idol-one { margin-top: 30px; } .product-price { display: block; } .product-info img { width: 30%; } .product-price table { width: 100%; font-size: 12px; margin-top: 15px; } .product-price .product-feature { top: 4%; width: 60%; right: -3%; } .product-price { margin-top: 10px; margin-bottom: 10px; } .product-info { margin: 10px auto; padding: 5px 10px; } #idol-four { margin-bottom: 0px; } .product-content { padding-bottom: 50px; } .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 h3 { font-size: 12px; } .campaign-info .pic .add-txt { font-size: 30px; } .mobile-compare-container-warp .mobile-container .body-box .text-body { font-size: 14px; } .product-price table td span { font-size: 16px; } } @media screen and (min-width: 761px) and (max-width: 1100px) { .idol-title h2, .idol-intro li h2 { font-size: 26px; } .idol-title span { font-size: 19px; } .idol-intro li { width: calc((100% - 10px) / 4)  !important; } .idol-intro a { font-size: 12px; } .idol-info { width: 94%; } .campaign-info p { font-size: 16px; } .campaign-info a { font-size: 12px; } .swiper-backface-hidden .swiper-slide { width: calc((100% - 10px) / 2)  !important; } .mh-main-title h1, .lus-text h2 small { font-size: 24px; } .mh-main-title h1 { font-size: 22px; } .mh-main-title { padding-top: 4px; } .legion-title h3, .lus-text h2 { font-size: 28px; } .select ul li h3, .product-info h2 { font-size: 17px; } .select ul li h3 { font-size: 14px; } .select ul li p, .app .left-card-container .text-body, .lus-text p, .product-info h2 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 h3 { line-height: 32px; } } @media screen and (min-width: 1101px) and (max-width: 1450px) { .idol-title h2, .idol-intro li h2 { font-size: 32px; } .idol-title span { font-size: 22px; } .campaign-info p { font-size: 18px; } .campaign-info a { font-size: 13px; padding-left: 10px; } .campaign-info .info-txt { font-size: 12px; margin-left: 5px; } .swiper-backface-hidden .swiper-slide { margin-right: 20px  !important; } .idol-intro { width: 100%; } .app .mobile-compare-cards_left .left-card-container { width: 400px; } .app .mobile-compare-cards_left .left-card-container .link-btn-box { height: 85px; } .swiper-backface-hidden .swiper-slide { width: 36%  !important; } .legion-title h3 { font-size: 30px; } .legion-title p { margin-top: 0px; } .mh-main-title h1, .lus-text h2 { font-size: 28px; } .select ul li h3 { font-size: 18px; } .product-info h2, .lus-text h2 small { font-size: 20px; } .product-info h2 span, .lus-text p { 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: 1101px) and (max-width: 1300px) { .idol-title span { font-size: 18px; } } @media screen and (min-width: 1101px) and (max-width: 1450px) { .swiper-backface-hidden .swiper-slide { width: 36%  !important; } } @media screen and (min-width: 1451px) and (max-width: 1600px) { .swiper-backface-hidden .swiper-slide { width: calc((100% - 60px) / 3)  !important; } } @media screen and (min-width: 1700px) { .idol-intro a { width: 70%; } .swiper-backface-hidden .swiper-slide { width: calc((100% - 60px) / 3)  !important; opacity: 1  !important; } } @media screen and (min-width: 2100px) { .swiper-backface-hidden .swiper-slide { width: calc((100% - 10px) / 4)  !important; } } @media screen and (min-width: 2151px) { .idol-intro a { width: 50%; } .overlay { width: 100%; } .overlay, .select ul li .select-img, .select ul li { max-width: 462px; } .select ul { gap: 60px; } .swiper-backface-hidden .swiper-slide { width: calc((100%) / 5)  !important; margin: 0 auto; margin-right: 10px  !important; } } @media screen and (min-width: 3000px) { .idol-intro a { width: 50%; } .swiper-backface-hidden .swiper-slide { width: 23%  !important; opacity: 1  !important; } }