html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body .first-view, body .shindan-area { line-height: 1; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { display: block; } ol, ul { list-style: none; } a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; text-decoration: none; } a:link { color: #000; } img { height: auto; vertical-align: top; font-size: 0; line-height: 0; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } body { background: transparent linear-gradient(180deg, #fff 0%, #cbd1f1 200%) 0% 0% no-repeat padding-box  !important; } a { transition: .3s; opacity: 1; } a:hover { opacity: .78; cursor: pointer; } .sp_txt { display: none; } .sp_nav, .sp_search { display: none; } .ta-c { text-align: center; } .red-txt { color: #d62828; } .clearfix::after { content: ""; display: block; clear: both; } .first-view img, .shindan-area img, .result-content img, .qm img { width: 100%; } .shindan2503 .pc-none { display: none; } @media screen and (max-width: 750px) { .shindan2503 .pc-none { display: block; } } .shindan2503 .sp-none { display: block; } @media screen and (max-width: 750px) { .shindan2503 .sp-none { display: none; } } .shindan2503 main { color: #333; font-family: "M PLUS 2", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; } .shindan2503 .nsd { font-family: "Noto Sans Display", system-ui; font-optical-sizing: auto; font-weight: bold; font-style: normal; } .shindan2503 .mv { text-align: center; background: #9ae2ed; } .shindan2503 .mv img { width: 100%; } .shindan2503 .mv .sp { display: none; } @media screen and (max-width: 750px) { .shindan2503 .mv .pc { display: none; } .shindan2503 .mv .sp { display: block; } } .shindan2503 .lead-txt { padding: 24px 0 40px; font-size: 14px; text-align: center; line-height: 1.8; letter-spacing: .1em; } @media screen and (max-width: 750px) { .shindan2503 .lead-txt { padding: 6.4vw 0 7.4666666667vw; font-size: 3.7333333333vw; } } .shindan2503 .lead-txt .voice { margin-bottom: 12px; color: #0b6484; font-size: 20px; font-weight: bold; } @media screen and (max-width: 750px) { .shindan2503 .lead-txt .voice { font-size: 4.8vw; margin-bottom: 1.6vw; } } .shindan2503 .start-obj { color: #000; text-align: center; font-weight: bold; line-height: 1.8; margin-bottom: 20px; } .shindan2503 .start-obj .pc-bar { padding: 11px 0; font-size: 28px; } .shindan2503 .start-obj .pc-bar span { position: relative; } .shindan2503 .start-obj .pc-bar span::before, .shindan2503 .start-obj .pc-bar span::after { content: ""; position: relative; display: inline-block; top: -2px; width: 28px; height: 16px; -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0); clip-path: polygon(50% 100%, 100% 0, 0 0); background: #000; } .shindan2503 .start-obj .pc-bar span::before { margin-right: 32px; } .shindan2503 .start-obj .pc-bar span::after { margin-left: 32px; } @media screen and (max-width: 750px) { .shindan2503 .start-obj { margin: 6.4vw 0 6.4vw 0; padding: 0 6.4vw; } } .shindan2503 .start-obj .sp-btn a { position: relative; display: block; padding: 3.2vw 0; color: #fff; font-size: 5.3333333333vw; text-decoration: none; border-radius: 3.2vw; background: linear-gradient(90deg, #ff8c00, #ffd000); } .shindan2503 .start-obj .sp-btn a::after { content: ""; position: absolute; display: inline-block; top: 0; bottom: 0; right: 2.6666666667vw; margin: auto; width: 4.2666666667vw; height: 2.6666666667vw; -webkit-clip-path: polygon(50% 100%, 100% 0, 0 0); clip-path: polygon(50% 100%, 100% 0, 0 0); background: #fff; } .shindan2503 .shindan-area-sp { display: none; } @media screen and (max-width: 750px) { .shindan2503 .shindan-area-sp { display: block; margin-bottom: 16vw; } } .shindan2503 .shindan-area-sp .question { display: flex; align-items: center; width: 100%; height: 100vh; text-align: center; background-image: linear-gradient(to bottom right, #fffcef 50%, #fff8db 50%); } .shindan2503 .shindan-area-sp .q-content { width: 100%; } .shindan2503 .shindan-area-sp .q-content .start-txt { margin-bottom: 5.8666666667vw; } .shindan2503 .shindan-area-sp .q-content .start-txt img { width: 39.5%; } .shindan2503 .shindan-area-sp .q-box { position: relative; margin: 0 6.4vw 5.8666666667vw; padding: 7.4666666667vw 6.4vw; border-radius: 4.2666666667vw; background: #fff; } .shindan2503 .shindan-area-sp .q-num { display: block; position: absolute; top: 0; left: 0; width: 11.2vw; height: 11.2vw; padding: 2.4vw 0 0; color: #fff; font-size: 5.3333333333vw; border-radius: 4.2666666667vw 0 4.2666666667vw 0; background: #ff8c00; } .shindan2503 .shindan-area-sp .q-tit { margin-bottom: 3.7333333333vw; color: #555; font-size: 5.8666666667vw; font-weight: bold; line-height: 1.6; letter-spacing: .05em; } .shindan2503 .shindan-area-sp .q-tit span { background: linear-gradient(transparent 70%, #fee737 70%); } .shindan2503 .shindan-area-sp .q-image { width: 74.6666666667vw; margin-bottom: 6.4vw; padding: 3.2vw; } .shindan2503 .shindan-area-sp .q-image img { width: 64vw; } .shindan2503 .shindan-area-sp .q-choices { width: 74.6666666667vw; } .shindan2503 .shindan-area-sp .q-choices li { cursor: pointer; opacity: 1; transition: opacity .5s ease; } .shindan2503 .shindan-area-sp .q-choices li:hover { opacity: .5; } .shindan2503 .shindan-area-sp .q-choices li:not(:last-child) { margin-bottom: 2.6666666667vw; } .shindan2503 .shindan-area-sp .q-choices .int { float: left; display: inline-block; width: 13.8666666667vw; height: 13.8666666667vw; padding: 2.6666666667vw 0 0; color: #fff; font-size: 7.4666666667vw; border-radius: 1.0666666667vw 0 0 1.0666666667vw; } .shindan2503 .shindan-area-sp .q-choices .int.a { background: #df6a6c; } .shindan2503 .shindan-area-sp .q-choices .int.b { background: #6aa0df; } .shindan2503 .shindan-area-sp .q-choices .int.c { background: #87cf43; } .shindan2503 .shindan-area-sp .q-choices .q-choice { float: left; display: inline-block; width: 60.8vw; height: 13.8666666667vw; padding: 4vw 0 0; font-size: 4.8vw; font-weight: 500; border-radius: 0 1.0666666667vw 1.0666666667vw 0; border: 1px solid #d9d9d9; border-left: none; } .shindan2503 .shindan-area-sp .q-nav { display: flex; justify-content: center; align-items: center; } .shindan2503 .shindan-area-sp .q-nav li { margin: 0 8px; } .shindan2503 .shindan-area-sp .q-nav .nsd { width: 24px; height: 24px; padding: 5px 0 0; color: #fff; font-size: 12px; text-align: center; border-radius: 50%; background: #ff8c00; cursor: pointer; } .shindan2503 .shindan-area-sp .q-nav .dot { width: 14px; height: 14px; border-radius: 50%; background: #eadeb3; } .shindan2503 .result .q-nav { display: none; } @media screen and (max-width: 750px) { .shindan2503 .result .q-nav { display: flex; margin: 5.8666666667vw 0; } } .shindan2503 .result .back-btn { display: none; } @media screen and (max-width: 750px) { .shindan2503 .result .back-btn { display: block; padding: 3.2vw; color: #555; font-size: 5.3333333333vw; font-weight: bold; line-height: 1.8; letter-spacing: .1em; text-align: center; border-radius: 3.2vw; background: #fee737; cursor: pointer; opacity: 1; transition: opacity .5s ease; } .shindan2503 .result .back-btn:hover { opacity: .5; } } .shindan2503 .qm { display: none; } .shindan2503 .shindan-area-pc { margin: 0 0 40px; position: relative; } .shindan2503 .shindan-area-pc a { position: absolute; } @media screen and (max-width: 750px) { .shindan2503 .shindan-area-pc { display: none; } } .shindan2503 .shindan-area-pc img { max-width: none; width: auto; } .shindan2503 .pc-modal { cursor: pointer; } .shindan2503 .result-modal { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; transition: .3s; z-index: 2; } .shindan2503 .result-modal.view { opacity: 1; visibility: visible; } @media screen and (max-width: 750px) { .shindan2503 .result-modal.view { opacity: 0; visibility: hidden; } } .shindan2503 .result-modal .bg { content: ""; background: rgba(0, 0, 0, .7); position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .shindan2503 .result-modal-window { display: none; width: 900px; max-height: 74vh; margin: auto; padding: 20px; overflow: auto; position: relative; } @media screen and (max-width: 750px) { .shindan2503 .result { padding: 7.4666666667vw 6.4vw; background-image: linear-gradient(to bottom right, #9ae2ee 50%, #6fd6e5 50%); } .shindan2503 .result .result-box { padding: 7.4666666667vw 5.3333333333vw; border-radius: 4.2666666667vw; background: #fff; } } .shindan2503 .result .fkds { position: relative; display: inline-block; padding: 0 0 8px; border-bottom: 1px solid #555; } @media screen and (max-width: 750px) { .shindan2503 .result .fkds { padding: 0; border-bottom: none; } } .shindan2503 .result .fkds::before { content: ""; position: absolute; display: block; left: 0; right: 0; bottom: -12px; margin: auto; width: 12px; height: 12px; aspect-ratio: 1; -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); background: #555; } @media screen and (max-width: 750px) { .shindan2503 .result .fkds::before { display: none; } } .shindan2503 .result .fkds::after { content: ""; position: absolute; display: block; left: 0; right: 0; bottom: -12px; margin: auto; width: 12px; height: 12px; aspect-ratio: 1; -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); background: #fff; transform: translate(-1.5px, 0px); } @media screen and (max-width: 750px) { .shindan2503 .result .fkds::after { display: none; } } .shindan2503 .result .title { margin: 0 0 8px; padding: 0 0 12px; color: #555; font-size: 18px; font-weight: bold; text-align: center; } @media screen and (max-width: 999px) { .shindan2503 .result .title { margin: 0 0 16px; } } @media screen and (max-width: 750px) { .shindan2503 .result .title { margin: 0 0 3.2vw; padding: 0; font-size: 4.8vw; } } .shindan2503 .result .text { position: relative; top: -5px; } @media screen and (max-width: 750px) { .shindan2503 .result .text { margin-bottom: 2.6666666667vw; padding-bottom: .5333333333vw; top: 0; border-bottom: 1px solid #555; } .shindan2503 .result .text::before { content: ""; position: absolute; display: block; left: 0; right: 0; bottom: -3.7333333333vw; margin: auto; width: 3.7333333333vw; height: 3.7333333333vw; aspect-ratio: 1; -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); background: #555; } .shindan2503 .result .text::after { content: ""; position: absolute; display: block; left: 0; right: 0; bottom: -4vw; margin: auto; width: 4vw; height: 4vw; aspect-ratio: 1; -webkit-clip-path: polygon(0 0, 100% 0, 0 100%); clip-path: polygon(0 0, 100% 0, 0 100%); background: #fff; transform: translate(-0.2vw, -0.2vw); } } .shindan2503 .result .item-name { margin-left: 16px; color: #ff8c00; font-size: 36px; } @media screen and (max-width: 750px) { .shindan2503 .result .item-name { display: block; margin: 6.4vw 0 0; font-size: 9.6vw; } } .shindan2503 .result .item-image { float: left; position: relative; width: 35%; aspect-ratio: 1; margin-left: 36px; } @media screen and (max-width: 750px) { .shindan2503 .result .item-image { float: none; margin: 0 auto; } } @media screen and (max-width: 750px) { .shindan2503 .result .item-image { width: 56vw; } } .shindan2503 .result .item-image img { position: relative; padding: 11px 5px; z-index: 1; } @media screen and (max-width: 750px) { .shindan2503 .result .item-image img { padding: 2.9333333333vw 1.3333333333vw; } } .shindan2503 .result .item-image .icon { display: block; position: absolute; width: 80px; height: 80px; padding: 16px 0; left: -30px; color: #fff; font-size: 16px; font-weight: bold; line-height: 1.1; text-align: center; border-radius: 50%; background: #ff8c00; z-index: 2; } @media screen and (max-width: 750px) { .shindan2503 .result .item-image .icon { line-height: 1.2; width: 17.0666666667vw; height: 17.0666666667vw; padding: 3.2vw 0; left: -8vw; font-size: 3.2vw; } } .shindan2503 .result .item-image .icon.icon2 { top: 84px; color: #ff8c00; border: 3px solid #ff8c00; background: #fff; } .shindan2503 .result .item-image .icon.adjust1 { padding: 4px 0; } .shindan2503 .result .item-image .icon.adjust2 { padding: 10px 0; } .shindan2503 .result .item-image .icon .nsd { font-size: 1.6em; } .shindan2503 .result .item-image .icon .nsd span { font-size: 16px; } .shindan2503 .result .item-detail { float: left; width: 55%; text-align: center; margin: 25px auto 0; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail { float: none; } } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail { width: 76.8vw; } } .shindan2503 .result .item-detail .catch-txt { margin-bottom: 24px; color: #555; font-size: 24px; font-weight: bold; line-height: 1.8; letter-spacing: .05em; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .catch-txt { margin-bottom: 6.4vw; font-size: 5.3333333333vw; } } .shindan2503 .result .item-detail .catch-txt .mark { background: linear-gradient(transparent 75%, #fee737 75%); } .shindan2503 .result .item-detail .item-tag-area { display: flex; flex-flow: row wrap; justify-content: flex-start; width: 452px; margin: 0 auto 20px; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .item-tag-area { width: 76.8vw; margin: 0 auto 6.4vw; } } .shindan2503 .result .item-detail .item-tag { display: flex; align-items: center; width: 140px; margin: 0 16px 16px 0; padding: 9px; color: #555; font-size: 14px; font-weight: 500; text-align: center; letter-spacing: .05em; border-radius: 32px; background: #fff8c3; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .item-tag { width: 48%; margin: 0 4% 4% 0; padding: 2.1333333333vw; font-size: 3.7333333333vw; border-radius: 8.5333333333vw; } } .shindan2503 .result .item-detail .item-tag:nth-child(3n) { margin-right: 0; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .item-tag:nth-child(3n) { margin-right: auto; } } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .item-tag:nth-child(even) { margin-right: 0; } } .shindan2503 .result .item-detail .item-tag p { width: 100%; text-align: center; } .shindan2503 .result .item-detail .item-link-btn { display: block; width: 350px; height: 60px; margin: 25px auto 0; padding: 19px 0 0; color: #fff; font-size: 20px; font-weight: bold; letter-spacing: .1em; text-decoration: none; background-color: #000; } @media screen and (max-width: 750px) { .shindan2503 .result .item-detail .item-link-btn { width: 76.8vw; height: 16vw; padding: 5.0666666667vw 0 0; font-size: 5.3333333333vw; border-radius: 3.2vw; } } .shindan2503 .view .result-modal-window { display: block; } .shindan2503 .modal-close { display: block; position: absolute; width: 50px; height: 50px; top: 20px; right: 20px; cursor: pointer; } .shindan2503 .modal-close::before, .shindan2503 .modal-close::after { content: ""; display: block; position: absolute; width: 42px; height: 2px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background: black; } .shindan2503 .modal-close::before { transform: rotate(45deg); } .shindan2503 .modal-close::after { transform: rotate(-45deg); } .shindan2503 .result-modal-inner { padding: 35px 42px 35px; background: #fff; } .shindan2503 .result-content { display: none; } .result-title { font-size: 22px; line-height: 26px; text-align: left; padding: 0 0 20px 30px; } @media screen and (max-width: 750px) { .result-title { padding: 0 0 25px; } } .result-product-name { font-size: 26px; line-height: 30px; font-weight: bold; padding: 10px 0; margin: 0 auto; } .btm-banner { background-size: cover; display: flex; position: relative; margin: 50px 0 0; } .btm-banner-1 { color: #fff; } .btm-banner-2 { flex-direction: row-reverse; } .divide-line { margin: 50px 50px 0; border: 1px solid #bbb; } .img-wrap img { max-width: 100%; width: auto; border-radius: 10px; } .img-wrap .sp-img { display: none; } .text-wrap { display: flex; justify-content: center; flex-direction: column; align-items: center; position: absolute; height: 100%; left: 0; width: 50%; } .btm-banner h2 { font-size: 40px; line-height: 1.2; text-align: center; font-weight: bold; } .btm-banner-1.btm-banner h2 { font-size: 26px; border-top: 2px solid rgba(255, 255, 255, .7); border-bottom: 2px solid rgba(255, 255, 255, .7); padding: 5px 20px; } .btm-banner-1.btm-banner p { font-size: 32px; margin: 20px 0 0; font-weight: bold; line-height: 1.2; } .btm-banner-1 .text-wrap { left: inherit; right: 0; } .text-wrap a { background: #241634; color: #fff; display: inline-block; border-radius: 23px; padding: 5px 60px 5px 40px; width: fit-content; position: relative; margin: 20px 0 0; font-size: 24px; font-weight: bold; } .text-wrap a:after { position: absolute; right: 30px; content: ""; border-top: 8px solid transparent; border-left: 12px solid #fff; border-bottom: 8px solid transparent; top: 15px; } .btm-banner-1 .text-wrap a { background: #fff; color: #241634; } .btm-banner-1 .text-wrap a:after { border-left: 10px solid #2a1632; } .fea-article { margin: 50px 0; } .fea-article h2 { margin: 1.25rem; font-size: 1.75rem; } .fea-article ul { display: flex; flex-wrap: wrap; justify-content: center; } .fea-article ul li { width: 33%; } .fea-article ul li a { position: relative; display: flex; border-radius: 6px; overflow: hidden; margin: 10px; } .fea-article ul li a img { width: 100%; } .fea-article ul li a div { position: absolute; display: flex; justify-content: center; height: 100%; width: 100%; align-items: center; background: rgba(0, 0, 0, .5); } .fea-article ul li a div p { text-align: center; color: #fff; line-height: 1.5; } .result-item1 { display: none; } @media (max-width: 1000px) { .btm-banner h2 { font-size: 26px; } .btm-banner-1.btm-banner p { font-size: 20px; } .btm-banner-1.btm-banner h2 { font-size: 16px; } .text-wrap a { font-size: 16px; } .text-wrap a:after { top: 10px; } .fea-article ul li { width: 48%; } } @media (max-width: 750px) { .img-wrap, .text-wrap { width: 100%; padding: 5%; text-align: center; } .text-wrap { justify-content: flex-start; top: 10px; } .img-wrap .pc-img { display: none; } .img-wrap .sp-img { display: block; } .btm-banner { flex-flow: column-reverse; height: inherit; } .fea-article h2 { text-align: center; } .fea-article ul { justify-content: center; } .fea-article ul li { width: 85%; } .result-item1 { display: block; } .result-item2 { border-top: 3px dashed #e2e2e2; } .result-item2 .result-title { display: none; } .shindan2503 .result-two-items .item-detail .item-link-btn { height: 10vw; padding: 3vw 0 0; font-size: 4vw; margin: 10px auto 0; } .shindan2503 .result-two-items .item-image { width: 45vw; } } .popup-viewport { display: none; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; } .black-bg { height: 100%; background: rgba(0, 0, 0, .7); } .popup-main-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-main { border-radius: 20px; padding: 20px 20px 5px 20px; background: #fff; position: relative; } .popup-title { text-align: center; font-size: 26px; font-weight: bold; color: #fff; } .close-btn { width: 28px; height: 28px; font-size: 32px; text-align: center; font-weight: bold; position: absolute; right: 6px; top: 3px; cursor: pointer; color: #888; line-height: 28px; z-index: 9; } .close-btn:hover { color: #333; } .col1-wrapper { position: absolute; background: #fff; z-index: 9; } .col1 { width: 160px; height: 545px; border-right: 2px solid #294e95; padding: 20px 0 0; } .rankitem { display: flex; flex-direction: column; align-items: center; } .better { margin-top: 50px; } .good { margin-top: 50px; } .rankitem>img { height: 46px; } .rankitem li { font-size: 10px; line-height: 1.4; list-style: disc; text-indent: -5px; } .rankitem li::marker { color: #555; } .icon-title { border-radius: 30px; color: #FFF; text-align: center; width: 125px; font-size: 16px; margin: 5px 0; } .best .icon-title { background: #11184f; } .better .icon-title { background: #294e95; } .good .icon-title { background: #4d7edc; } .col1-cover { height: 45px; } .col2 { width: 800px; margin-left: 160px; } .product-content { display: flex; justify-content: space-around; flex-wrap: wrap; border-bottom: 2px solid #7a126b; position: relative; height: 545px; } .product-item { width: 21%; margin: 2%; } .product-item h3 { font-size: 15px; text-align: center; text-decoration: underline; } .product-item h3:hover { color: #7a126b; } .product-img { position: relative; margin: 5px 0 0; } .product-img>img { margin: 10% 0 0 10%; height: 65px; } .wifi { display: flex; margin: 5px 0 0; font-size: 13px; font-weight: bold; } .lte { display: flex; margin: 5px 0 0; font-size: 13px; font-weight: bold; } .wifi span:last-child, .lte span:last-child { font-size: 10px; border-radius: 0 20px 20px 0; padding: 7px 5px 7px 0; width: 60%; text-align: center; } .wifi span:first-child { background: repeating-linear-gradient(120deg, #d9c1d8, #d9c1d8 44px, #fff 44px, #fff 45px, #f1e1ed 45px, #f1e1ed 100%); border-radius: 20px 0 0 20px; padding: 5px; width: 32%; } .wifi span:last-child { background: #f1e1ed; } .lte span:first-child { background: repeating-linear-gradient(120deg, #c9d0f0, #c9d0f0 44px, #fff 44px, #fff 45px, #eaeef5 45px, #eaeef5 100%); border-radius: 20px 0 0 20px; padding: 5px; width: 32%; text-align: center; } .lte span:last-child { background: #eaeef5; } .product-item:nth-child(3) .wifi span:last-child, .product-item:nth-child(4) .wifi span:last-child { width: 68%; } .icon-left { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: flex-start; } .icon-right { position: absolute; right: 0; top: 0; display: flex; flex-direction: column; align-items: flex-end; } .icon-left span, .icon-right span { display: inline-block; } .aipc { background: url(https://p3-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/popup-tablet-250905/icon-aipc.svg); width: 20px; height: 20px; background-size: 20px; background-repeat: no-repeat; } .gamepad { background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/popup-tablet-250905/icon-gaming.svg); width: 24px; height: 15px; margin: 5px 0 0; background-size: 24px; background-repeat: no-repeat; } .rate144hz { background: url(https://p2-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/popup-tablet-250905/icon-144hz.svg); width: 18px; height: 18px; margin: 5px 0 0; background-size: 18px; background-repeat: no-repeat; } .pen { background: url(https://p1-ofp.static.pub/ShareResource/JPResource/JP-Images/content-page/popup-tablet-250905/product-pen.png); width: 38px; height: 38px; margin: 5px 0 0; background-size: 38px; background-repeat: no-repeat; } .pen img { width: 40px; } .weight { position: relative; background: #b8252e; border-radius: 5px; color: #fff; font-size: 11px; padding: 2px 5px; text-align: center; font-weight: bold; } .weight:after { border-top: 8px solid #b8252e; border-left: 0px solid transparent; border-right: 8px solid transparent; position: absolute; top: 20px; left: 5px; content: ""; } .screen-size { font-weight: bold; margin: 6px 0 0; line-height: 1.2; } .resolution { font-size: 10px; margin: 3px 0 0; font-weight: bold; } .color { margin: 3px 0 0; } .color>span { width: 10px; height: 10px; border-radius: 6px; margin: 0 3px; border: 1px solid #747474; } .grey { background: #b0b3b8; } .silver { background: #e9ebed; } .pink { background: #f2e0e1; } .arrow-top { border-bottom: 10px solid #294e95; border-left: 6px solid transparent; border-right: 6px solid transparent; position: absolute; top: -7px; right: -5px; } .arrow-right { border-top: 6px solid transparent; border-left: 10px solid #7a126b; border-bottom: 6px solid transparent; position: absolute; bottom: -7px; right: -7px; } .size-label { display: flex; justify-content: space-around; margin: 10px 0 10px; } .size-label>div { width: 15%; border-radius: 18px; text-align: center; padding: 6px 5px 5px; font-weight: bold; font-size: 18px; line-height: 1.2; } .size1 { background: #f1e1ed; } .size2 { background: #d9c1d8; } .size3 { background: #7a126b; color: #FFF; } .size4 { background: #4d144a; color: #FFF; } @media (max-width: 1000px) { .popup-main-wrapper { width: 100%; overflow-x: scroll; } .popup-main { margin: 0 2% 2%; } .col2-wrapper { overflow-x: scroll; } .popup-main { border-radius: 15px; } .close-btn { right: 0; top: 0; } }