* { 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-cto .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: 36px; top: 60px; cursor: pointer; } .tableBoxMainPopUpAllWrap-cto { width: 100%; display: none; z-index: 10000; position: fixed; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, .7); } .tableBoxMainPopUpAllWrap-cto .tableBoxMainPopUp { height: fit-content; width: 800px; z-index: 100; padding: 20px 30px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .cto-title h3 { color: white; font-size: 26px; line-height: 34px; padding-left: 20px; padding-bottom: 10px; font-weight: bold; } .cto-title h3 span { font-size: 20px; line-height: 24px; } .cto-contentbox { background-color: white; height: fit-content; border-top-right-radius: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } .cto-box { display: flex; justify-content: space-evenly; align-items: center; margin: 0 auto; width: 100%; padding: 25px; } .c-left { width: 35%; display: block; } .c-right { width: 55%; } .c-right img { width: 100%; display: block; } .disBlock { display: block; width: 100%; margin: 0 auto; } .bottom-link { padding: 15px 0 0px; width: 100%; margin: 0 auto; } .bottom-link p { background-color: #871c23; color: white; border-radius: 20px; padding: 8px 0; font-weight: bold; font-size: 20px; line-height: 24px; text-decoration: none; text-align: center; } .br-rwd { display: none; } .br-sp { display: none; } @media screen and (max-width: 1080px) { .br-sp { display: block; } .tableBoxMainPopUpAllWrap-cto .tableBoxMainPopUp { width: 760px; top: 50%; } .bottom-link p { font-size: 18px; line-height: 24px; } } @media (max-width: 760px) { .br-sp { display: none; } .tableBoxMainPopUpAllWrap-cto ::-webkit-scrollbar { width: 8px; } .tableBoxMainPopUpAllWrap-cto ::-webkit-scrollbar-track { background: #f9eceb; border-radius: 8px; } .tableBoxMainPopUpAllWrap-cto ::-webkit-scrollbar-thumb { background: #4d444f; border-radius: 8px; } .tableBoxMainPopUpAllWrap-cto .closePopUpBtn { right: 24px; top: 50px; font-size: 24px; } .tableBoxMainPopUpAllWrap-cto .tableBoxMainPopUp { width: 94%; top: 50%; padding: 20px; } .cto-title h3 { font-size: 3.2vw; line-height: 4vw; padding-left: 8px; } .cto-title h3 span { font-size: 2.6vw; line-height: 3vw; } .bottom-link p { font-size: 2.4vw; line-height: 3.4vw; } } @media (max-width: 600px) { .tableBoxMainPopUpAllWrap-cto .closePopUpBtn { top: 40px; } } @media (max-width: 460px) { .br-rwd { display: block; } .tableBoxMainPopUpAllWrap-cto .closePopUpBtn { right: 15px; top: 50px; font-size: 24px; } .tableBoxMainPopUpAllWrap-cto .tableBoxMainPopUp { width: 96%; padding: 10px; top: 46%; height: calc(100% - 200px); } .cto-box { padding: 10px 10px 10px 0; display: block; width: 100%; } .cto-title h3 { text-align: center; font-size: 18px; line-height: 22px; padding-left: 0px; padding-bottom: 4px; } .cto-title h3 span { font-size: 14px; line-height: 20px; } .c-left { width: 50%; margin: 0 auto; } .c-right { width: 90%; margin: 0 auto; } .c-right img { margin-top: 4vw; } .bottom-link p { font-size: 12px; line-height: 14px; padding: 8px 0; margin: 0px auto 10px; } } @media (max-width: 350px) { .bottom-link p { font-size: 3vw; line-height: 4vw; } }