* { margin: 0; padding: 0; } .clear:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clear { zoom: 1; } .fl { float: left; } .fr { float: right; } .tableBoxMainPopUpAllWrap-oc .closePopUpBtn { width: 28px; height: 28px; border-radius: 30px; font-size: 28px; text-align: center; line-height: 30px; background: none; color: white; font-weight: bold; position: absolute; right: 40px; top: 30px; cursor: pointer; } .tableBoxMainPopUpAllWrap-oc { width: 100%; display: none; z-index: 10000; position: fixed; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); } .tableBoxMainPopUpAllWrap-oc .tableBoxMainPopUp { height: fit-content; width: 1000px; z-index: 100; padding: 20px 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .oc-title { padding: 15px 0; background-color: #871c23; text-align: center; border-top-right-radius: 20px; border-top-left-radius: 20px; display: flex; justify-content: center; } .oc-title img { display: block; width: 70px; height: 70px; } .oc-title h3 { font-size: 26px; line-height: 30px; color: white; } .oc-contentbox { background-color: white; height: fit-content; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } .oc-contentbox p { text-align: center; display: block; margin: 0 auto; } .oc-b1-headline { padding-top: 8px; font-size: 16px; line-height: 24px; font-weight: bold; color: black; } .oc-b1-subheadline { font-size: 20px; line-height: 24px; font-weight: bold; color: #871c23; text-decoration: underline; text-underline-offset: 4px; } .one-coin-blade1 { width: 70%; margin: 0 auto; display: flex; justify-content: center; align-items: center; } .disBlock { display: block; width: 100%; margin: 0 auto; } .thinkpadx9-img { width: 35%; } .plus-icon { width: 30px; height: 30px; } .earphones-img { width: 60%; } .oc-b1-title { color: #871c23; font-size: 20px; line-height: 24px; font-weight: bold; text-decoration: underline; text-underline-offset: 4px; padding: 5px 0 10px; text-align: center; display: block; margin: 0 auto; position: relative; } .oc-b1-title span { color: black; font-size: 18px; line-height: 24px; text-decoration: none  !important; text-underline-offset: 0px; display: inline-block; } .oc-b1-title::after { content: ""; position: absolute; top: 24px; right: 20px; width: 21%; border-top: #aba8b1 2px solid; display: block; } .oc-b1-title::before { content: ""; position: absolute; top: 24px; left: 20px; width: 21%; border-top: #aba8b1 2px solid; display: block; } .oc-b2-box { width: 90%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0 auto; column-gap: 10px; } .oc-b2-c1 { width: 58%; } .oc-b2-c1 p { text-align: left; color: black; font-size: 16px; line-height: 20px; } .oc-b2-c1 img { margin-bottom: 5px; } .new-add-img { width: 80%; } .oc-b2-c2 { width: 40%; height: fit-content; } .bottom-link { display: flex; justify-content: center; column-gap: 20px; padding: 15px 0 10px; width: 90%; margin: 0 auto; } .bottom-link a { width: 50%; } .bottom-link p { background-color: #871c23; color: white; border-radius: 20px; padding: 3px 8px; font-weight: bold; font-size: 16px; line-height: 24px; text-decoration: none; text-align: center; } .br-rwd { display: none; } .br-sp { display: none; } .hr-rwd { display: none; width: 90%; margin: 0 auto; } @media screen and (max-width: 1080px) { .br-sp { display: block; } .tableBoxMainPopUpAllWrap-oc .tableBoxMainPopUp { width: 760px; top: 50%; } .b1-title::after, .b1-title::before { width: 16%; } .oc-title h3 { font-size: 22px; line-height: 28px; } .oc-title img { width: 50px; height: 50px; } .oc-b1-subheadline, .oc-b1-title { font-size: 16px; line-height: 22px; } .oc-b1-title span { font-size: 16px; line-height: 22px; } .bottom-link { column-gap: 10px; } .bottom-link p { padding: 3px 8px; font-size: 13px; line-height: 24px; } } @media (max-width: 760px) { .br-rwd { display: block; } .br-sp { display: none; } .tableBoxMainPopUpAllWrap-oc ::-webkit-scrollbar { width: 8px; } .tableBoxMainPopUpAllWrap-oc ::-webkit-scrollbar-track { background: #f9eceb; border-radius: 8px; } .tableBoxMainPopUpAllWrap-oc ::-webkit-scrollbar-thumb { background: #4d444f; border-radius: 8px; } .tableBoxMainPopUpAllWrap-oc .closePopUpBtn { right: 24px; top: 20px; font-size: 20px; } .tableBoxMainPopUpAllWrap-oc .tableBoxMainPopUp { width: 94%; top: 50%; padding: 20px; } .b1-title::after, .b1-title::before { top: 2vw; width: 10%; } .oc-title { padding: 10px 0; } .oc-title h3 { font-size: 3vw; line-height: 4vw; } .oc-title img { width: 8vw; height: 8vw; } .oc-b1-headline, .oc-b1-title span { font-size: 2.5vw; line-height: 4vw; } .oc-b1-subheadline, .oc-b1-title { font-size: 3vw; line-height: 4vw; } .oc-b2-c1 p { font-size: 2.5vw; line-height: 3.5vw; } .one-coin-blade1, .oc-b2-box { width: 90%; } .bottom-link { display: block; padding: 10px 0 10px; margin: 0 auto; } .bottom-link p { margin-bottom: 5px; padding: 5px 8px; border-radius: 50px; font-size: 2.4vw; line-height: 3vw; } .plus-icon { width: 20px; height: 20px; } } @media (max-width: 600px) { .oc-b1-title::after, .oc-b1-title::before { display: none; } .hr-rwd { display: block; } .oc-b2-box { column-gap: 5px; } } @media (max-width: 460px) { .tableBoxMainPopUpAllWrap-oc .closePopUpBtn { right: 15px; top: 10px; font-size: 24px; } .tableBoxMainPopUpAllWrap-oc .tableBoxMainPopUp { width: 96%; padding: 10px; top: 46%; height: calc(100% - 200px); } .tbmpu_main { height: 100%; } .sp-scroll-box { height: 100%; overflow-y: scroll; } .oc-b2-box { width: 98%; display: block; margin: 0 auto; } .oc-b2-c1, .oc-b2-c2 { width: 90%; display: block; margin: 0 auto; } .oc-title h3 { width: 80%; margin: 0 auto; font-size: 16px; line-height: 20px; } .oc-b1-headline, .oc-b1-title span { font-size: 12px; line-height: 18px; } .oc-b1-subheadline, .oc-b1-title { font-size: 14px; line-height: 20px; } .oc-b2-c1 p { font-size: 12px; line-height: 18px; font-weight: bold; } .bottom-link p { font-size: 12px; line-height: 14px; padding: 8px 0; margin: 10px auto; } .one-coin-blade1 { display: block; margin: 0 auto; } .thinkpadx9-img { display: block; width: 70%; margin: 10px auto 0; } .plus-icon { display: block; width: 20px; height: 20px; margin: 10px auto; } .earphones-img { display: block; width: 90%; margin: 0 auto; } .oc-title img { margin-top: 10px; margin-right: 30px; } }