* { 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-aura .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-aura { width: 100%; z-index: 10000; position: fixed; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); } .tableBoxMainPopUpAllWrap-aura .tableBoxMainPopUp { height: fit-content; width: 1000px; z-index: 100; padding: 20px 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .aura-title { padding: 15px 0; background-color: #7a126b; text-align: center; border-top-right-radius: 20px; border-top-left-radius: 20px; } .aura-title h3 { font-size: 26px; line-height: 30px; color: white; } .aura-contentbox { background-color: white; height: fit-content; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } .aura-subhealine { color: black; font-size: 16px; line-height: 20px; font-weight: bold; text-align: center; display: block; padding: 10px 0 0; } .b1-title { color: #7a126b; font-size: 20px; line-height: 24px; font-weight: bold; padding: 5px 0 15px; text-align: center; display: block; margin: 0 auto; position: relative; } .b1-title::after { content: ""; position: absolute; top: 18px; right: 20px; width: 21%; border-top: #aba8b1 2px solid; display: block; } .b1-title::before { content: ""; position: absolute; top: 18px; left: 20px; width: 21%; border-top: #aba8b1 2px solid; display: block; } .aura-b1-box { display: flex; width: 82%; margin: 0 auto; justify-content: space-evenly; } .aura-b1-c1 { width: 25%; } .aura-b2-c1 { width: 25%; margin: 0 5px; } .b1-tag { background: linear-gradient(to bottom, #b22039, #7a126b); width: fit-content; padding: 2px 8px; border-radius: 20px; color: white; font-size: 14px; line-height: 24px; text-align: center; margin: 0 auto; } .b1-text { color: #4d144a; font-weight: bold; font-size: 14px; line-height: 22px; text-align: center; padding: 0 0 5px; } .aura-b2-box { width: 82%; display: flex; flex-wrap: wrap; justify-content: space-evenly; margin: 0 auto; } .aura-b2-text { display: flex; justify-content: center; margin: 5px auto; } .aura-b2-text p { color: #4d144a; font-weight: bold; font-size: 16px; line-height: 24px; text-align: center; } .first-line p { padding-left: 10px; } .aura-b2-text img { display: block; width: 30px; height: 30px; } .b2-subtext { font-weight: normal  !important; font-size: 12px  !important; line-height: 14px  !important; } .aura-b2-text span { font-weight: normal; font-size: 12px; line-height: 14px  !important; color: #4d144a; text-align: center; } .bottom-link { display: flex; justify-content: center; column-gap: 20px; padding: 10px 0; width: 80%; margin: 0 auto; } .bottom-link a { width: 50%; } .bottom-link p { background-color: #7a126b; color: white; border-radius: 20px; padding: 3px 8px; font-weight: bold; font-size: 14px; line-height: 24px; text-decoration: none; text-align: center; } .tableBoxMainPopUpAllWrap-aura .disBlock { display: block; width: 90%; margin: 0 auto; } .br-rwd, .br-rwd-2 { display: none; } .br-sp { display: none; } @media screen and (min-width: 761px) and (max-width: 1080px) { .br-sp { display: block; } .tableBoxMainPopUpAllWrap-aura .tableBoxMainPopUp { width: 760px; top: 50%; } .b1-title::after, .b1-title::before { width: 16%; } .aura-b1-c1 { width: 32%; } .aura-b2-c1 { width: 32%; margin: 0 0; } .bottom-link { width: 90%; margin: 0 auto; } } @media screen and (max-width: 761px) { .br-sp { display: none; } } @media screen and (min-width: 761px) { .tableBoxMainPopUpAllWrap-aura ::-webkit-scrollbar { width: 8px; } .tableBoxMainPopUpAllWrap-aura ::-webkit-scrollbar-track { background: #f9eceb; border-radius: 8px; } .tableBoxMainPopUpAllWrap-aura ::-webkit-scrollbar-thumb { background: #4d444f; border-radius: 8px; } } @media (max-width: 760px) { .br-rwd, .br-rwd-2 { display: block; } .tableBoxMainPopUpAllWrap-aura .closePopUpBtn { right: 24px; top: 20px; font-size: 20px; } .tableBoxMainPopUpAllWrap-aura .tableBoxMainPopUp { width: 94%; top: 50%; padding: 20px; } .b1-title::after, .b1-title::before { top: 2vw; width: 10%; } .aura-b1-box, .aura-b2-box { width: 90%; } .aura-b1-c1 { width: 32%; } .aura-b2-c1 { width: 32%; margin: 0 0; } .aura-title h3 { font-size: 20px; line-height: 24px; } .aura-subhealine { font-size: 14px; line-height: 20px; } .b1-title { font-size: 3vw; line-height: 4vw; padding: 0 0 10px; } .b1-tag { font-size: 12px; line-height: 16px; margin-bottom: 5px; } .aura-b2-text img { display: block; width: 25px; height: 25px; } .b1-text { font-size: 1.9vw; line-height: 2.5vw; } .aura-b2-text p { font-size: 2.3vw; line-height: 3vw; } .b2-subtext { font-size: 10px  !important; line-height: 12px  !important; } .bottom-link p { border-radius: 50px; font-size: 2.4vw; line-height: 3vw; } .first-line p { padding-left: 5px; } } @media (max-width: 600px) { .b1-title::after, .b1-title::before { width: 8%; } .b2-subtext { font-size: 8px  !important; line-height: 9px  !important; } } @media (max-width: 460px) { .first-line p { padding-left: 2px; padding-top: 3px; } .tableBoxMainPopUpAllWrap-aura .closePopUpBtn { right: 15px; top: 10px; font-size: 24px; } .tableBoxMainPopUpAllWrap-aura .tableBoxMainPopUp { width: 96%; padding: 10px; top: 46%; height: calc(100% - 200px); } .aura-b1-box, .aura-b2-box { width: 98%; } .aura-title h3 { width: 98%; margin: 0 auto; font-size: 16px; line-height: 20px; } .b1-title { font-size: 14px; line-height: 20px; padding: 5px 0 10px; } .b1-text { font-size: 10px; line-height: 12px; } .aura-b2-text img { width: 20px; height: 20px; } .aura-b2-text p { font-size: 10px; line-height: 12px; } .b1-title::after { right: 6px; width: 7vw; } .b1-title::before { left: 6px; width: 7vw; } .br-rwd-2 { display: none; } .bottom-link { display: block; padding: 10px 0 10px; margin: 0 auto; } .bottom-link p { margin-bottom: 5px; padding: 5px 8px; font-size: 12px; line-height: 14px; } } @media (max-width: 400px) { .b1-title::before, .b1-title::after { display: none; } .b1-tag { font-size: 10px; line-height: 14px; } }