html, body { min-width: 340px; }
body { font-size: 2.2rem; line-height: 1.4; font-family: "Open Sans", sans-serif; color: #231f20; }

h1 { font-size: 5.4rem; line-height: 1.4; }
h2 { font-size: 4.4rem; line-height: 1.2; }
h3 { font-size: 3.8rem; line-height: 1.3; }
h4 { font-size: 3rem; line-height: 1.3; }
h5 { font-size: 2.5rem; line-height: 1.2; }


.page { background: #f9f9f9; }

.container { max-width: 940px; width: 100%; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; }
.container-2 { max-width: 1140px; width: 100%; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; }
.container-3 { max-width: 1020px; width: 100%; padding: 25px 0; margin-left: auto; margin-right: auto; background: #fff; border-radius: 12px; box-shadow: 0px 0px 12px -10px #000; }

.spacing-1 { padding-left: 60px; padding-right: 60px; }
.spacing-2 { padding-left: 35px; padding-right: 35px; }

footer { background: #333; color: #fff; font-size: 1.4rem; }
footer a { color: #fff; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.footer-info { display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.footer-menu { margin: 0 0 5px; }
.footer-menu ul { display: flex; align-items: center; justify-content: space-between; list-style: none; margin: 0; padding: 0; max-width: 260px; }
.footer-menu ul li { margin: 0; padding: 0; }
.footer-menu ul li:last-child { margin-right: 0; }
.cc-icons { display: flex; gap: 5px; }
.disclaimer { border-bottom: 1px solid #fff; padding-bottom: 1.6rem; }

.hd-2 { max-width: 820px; margin-left: auto; margin-right: auto; }
.hd-5 { max-width: 750px; margin-left: auto; margin-right: auto; }
.hd-6 { max-width: 500px; margin-left: auto; margin-right: auto; }
.hd-7 { max-width: 800px; margin-left: auto; margin-right: auto; }
.hd-8 { max-width: 450px; margin-left: auto; margin-right: auto; }
.hd-9 { max-width: 760px; margin-left: auto; margin-right: auto; }
.hd-10 { max-width: 810px; margin-left: auto; margin-right: auto; }
.hd-11 { max-width: 550px; margin-left: auto; margin-right: auto; }
.hd-12 { max-width: 850px; margin-left: auto; margin-right: auto; }
.hd-13 { max-width: 600px; margin-left: auto; margin-right: auto; }
.hd-14 { max-width: 820px; margin-left: auto; margin-right: auto; }
.hd-15 { max-width: 750px; margin-left: auto; margin-right: auto; }
.hd-16 { max-width: 810px; margin-left: auto; margin-right: auto; }

.arrow-down-1 { margin: 0 auto; border-left: 22px solid transparent; border-right: 22px solid transparent; border-top: 20px solid #f00; display: block; width: 0; height: 0; }
.flex-1 { display: flex; position: relative; }
.flex-1 > div:last-child { position: absolute; top: 30px; right: -310px; }

.flex-2 { display: flex; gap: 20px; justify-content: flex-start; align-items: flex-start; }
.flex-2 > div:first-child { flex-basis: 340px; flex-shrink: 0; }
.flex-2 > div:first-child img { border-radius: 12px; }
.flex-2 > div:last-child { flex-grow: 1; }
.flex-2 > div:last-child > div { max-width: 560px; margin-left: auto; margin-right: auto; }
.auth-blk { max-width: 375px; text-align: center; margin: 0 0 0 auto; }

.flex-3 { display: flex; gap: 30px; justify-content: center; }

.flex-4 { display: flex; gap: 30px; justify-content: center; }
.flex-4 > div:last-child { flex-shrink: 0; }
.flex-4 .frame-2 { margin-top: 0; }
.flex-4 .btn-1 { margin-right: -50px; }

.flex-5 { display: flex; gap: 30px; justify-content: center; align-items: center; }

.flex-6 { display: flex; gap: 30px; justify-content: center; align-items: center; }
.flex-6 > div:first-child { flex-shrink: 0; flex-basis: 260px; }

.flex-7 { display: flex; gap: 30px; }
.flex-7 > div:last-child { margin: -15px -70px 10px 0; flex-basis: 360px; flex-shrink: 0; }

.flex-8 { display: flex; gap: 20px; justify-content: center; align-items: center; justify-content: center; }
.flex-8:nth-child(even) { background: #f7f7f7; }
.flex-8 > div:first-child { width: 70px; flex-shrink: 0; }
.flex-8 svg * { stroke: #d77900; fill: transparent; }

.flex-8-icon-2 { padding: 3px; }
.flex-8-icon-2 svg { margin-right: -10px; }
.flex-8-icon-3 { padding: 3px; }
.flex-8-icon-3 svg { margin-left: -10px; }
.flex-8-icon-4 { padding: 3px; }
.flex-8-icon-4 svg { margin-left: -10px; }
.flex-8-icon-6 { padding: 3px; }

.flex-10 { display: flex; gap: 30px; }
.flex-10 > div:first-child { flex-basis: 350px; flex-shrink: 0; position: relative; margin-left: -15px; }

.flex-11 { display: flex; gap: 30px; }

.flex-12 { display: flex; gap: 30px; }
.flex-12 > div:first-child { flex-basis: 280px; flex-shrink: 0; position: relative; margin-left: -15px; }

.flex-13 { display: flex; gap: 30px; }
.flex-13 > div:last-child { margin: -20px -50px 10px 0; flex-basis: 360px; flex-shrink: 0; }

.flex-14 { display: flex; gap: 30px; align-items: center; justify-content: center; }
.flex-14 > div:first-child { flex-basis: 250px; flex-shrink: 0; position: relative; margin: -20px 0 0 -50px; }

.flex-15 { display: flex; gap: 30px; align-items: center; justify-content: center; }
.flex-15 > div:first-child { flex-basis: 220px; flex-shrink: 0; position: relative; margin: 0; }
.flex-15 > div:first-child img { display: block; }

.flex-16 { display: flex; gap: 30px; align-items: center; justify-content: center; }
.flex-16 > div:first-child { flex-basis: 320px; flex-shrink: 0; position: relative; margin: 0; }
.flex-16 > div:first-child img { display: block; }

.frame-1 { border-radius: 12px; padding: 7px; box-shadow: 0px 0px 10px -7px #000; background: #fff; }
.frame-2 { margin: 50px 0; padding: 45px 35px;  border-radius: 12px; border: 3px solid #eff3fe; position: relative; }
.frame-2.first { margin-top: 30px; }
.frame-2:before { top: -28px; left: 20px; width: 73px; height: 50px; display: block; position: absolute; content: ''; background: url(./../images/quotes.webp) center no-repeat; background-size: cover; }
.frame-2:after { bottom: -28px; right: 20px; width: 73px; height: 50px; transform: scaleX(-1); display: block; position: absolute; content: ''; background: url(./../images/quotes.webp) center no-repeat; background-size: cover; }

.frame-3 { margin: 35px 0; padding: 35px 35px 35px 80px; border: 1px solid #ededed; border-radius: 12px; box-shadow: 0px 4px 12px -8px #777; position: relative; }
.frame-3:before { top: 15px; left: 20px; width: 45px; height: 35px; display: block; position: absolute; content: ''; transform: scaleY(-1); background: url(./../images/quotes-2.webp) center no-repeat; background-size: contain; }

.frame-4 { margin-top: 140px; padding: 35px; border: 3px solid #ddca77; border-radius: 3px; background: #fff8da; position: relative; }

.box-1 { max-width: 800px; margin-left: auto; margin-right: auto; border-radius: 25px; border: 5px #eff3fe solid; }

.ingredient { display: flex; gap: 50px; margin-bottom: 50px; align-items: flex-start; justify-content: flex-start; }
.ingredient-wrap .ingredient:not(:last-child) { padding-bottom: 50px; border-bottom: 1px solid #e5e5e5; }
.ingredient > div:first-child { width: 265px; height: 265px; flex-shrink: 0; border-radius: 12px; border: 7px solid #fff; box-shadow: 0px 0px 10px -7px #000; background: #fff url(./../images/dkpal-img-3.webp) center no-repeat; background-size: cover; position: relative; }
.ingredient > div:first-child img { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 120%; }
.ingredient > div:last-child { flex-grow: 1; }
.ing-zinc { margin-top: 10px; }

.list-1 { margin: 0; list-style: none; font-size: 2.2rem; line-height: 1.2; padding: 0; }
.list-1 > li { position: relative; padding-left: 36px; }
.list-1 > li:last-child { margin-bottom: 0; }
.list-1 > li:before { top: 1px; left: 0; position: absolute; background: url(./../images/check-blue.webp) center left no-repeat; content: ''; background-size: 26px; width: 26px; height: 26px; }

.list-2 { margin: 0; list-style: none; padding: 0; }
.list-2 > li { display: flex; gap: 20px; }
.list-2 > li:nth-child(1):before { background: url(./../images/phase-1.webp) no-repeat center; background-size: contain; }
.list-2 > li:nth-child(2):before { background: url(./../images/phase-2.webp) no-repeat center; background-size: contain; }
.list-2 > li:nth-child(3):before { background: url(./../images/phase-3.webp) no-repeat center; background-size: contain; }
.list-2 > li:before { width: 80px; height: 91px; flex-shrink: 0; content: ''; display: block; }

.list-3 { margin: 0; list-style: none; font-size: 2.2rem; line-height: 1.2; padding: 0; }
.list-3 > li { position: relative; padding-left: 45px; }
.list-3 > li:last-child { margin-bottom: 0; }
.list-3 > li:before { top: 0; left: 0; position: absolute; background: url(./../images/check-blue.webp) center left no-repeat; content: ''; background-size: 30px; width: 30px; height: 30px; }

.list-4 { list-style: none; padding: 0; margin: 0 0 0 18px; }
.list-4 li { position: relative; padding-left: 20px; }
.list-4 li::before { content: ''; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; background-color: #0CB8B6; }

.collapse-toggle { border: 3px solid #f4f4f4; margin-top: 30px; border-radius: 12px; cursor: pointer; position: relative; color: #000; font-weight: 600; transition: background-color 0.25s linear, padding 0.25s linear; }
.collapse-toggle.m-top-0 { margin-top: 0; }
.collapse-toggle:hover { background: #fafbff; border: 3px solid #eff3fe; }

.collapse { height: 0; opacity: 0; overflow: hidden; border: 3px solid #eff3fe; border-top: 0; border-bottom-right-radius: 12px; border-bottom-left-radius: 12px; }
.collapse-content { background: #fafbff; } 
.collapse-toggle.active { background: #fafbff; border: 3px solid #eff3fe; border-bottom: 0; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
.collapse-content p:first-child { margin-top: 0; } 
.collapse-content p:last-child { margin-bottom: 0; } 

.drk-cred { margin-top: 10px; }

.img-1 { position: absolute; bottom: 0px; left: -280px; max-width: 340px; }
.img-2 { float: right; margin-left: 30px; margin-bottom: 10px; }
.img-3 { float: right; margin-left: 30px; margin-bottom: 10px; max-width: 350px; }
.img-4 { float: right; margin-left: 30px; margin-bottom: 10px; max-width: 350px; }
.img-5 { float: right; max-width: 410px; transform: rotate(-5deg); }
.img-6 { float: right; margin: 0 0 10px 30px; max-width: 450px; }
.img-8 { max-width: 280px; margin: 0 auto -70px; display: block; }
.img-9 { float: right; margin: 20px 0 10px 30px; max-width: 300px; display: block; }
.img-10 { float: right; margin: 0 -110px 0 30px; max-width: 385px; display: block; }
.img-11 { display: block; margin: -180px auto 0; max-width: 260px; }
.img-12 { float: right; margin: 0 -50px 10px 40px; max-width: 380px; display: block; }
.img-13 { margin: 0 auto; max-width: 850px; width: 100%; display: block; }
.img-14 { transform: rotate(-5deg); }
.img-15 { float: right; margin-left: 30px; margin-bottom: 10px; max-width: 310px; }
.img-16 { max-width: 260px; margin: 0 auto -70px; right: -20px; display: block; position: relative; }
.img-17 { float: right; margin-left: 30px; margin-bottom: 10px; max-width: 310px; }
.img-18 { float: right; margin-left: 30px; margin-bottom: 10px; max-width: 340px; }
.img-19 { max-width: 350px; margin: -10px 0 -90px; }
.img-20 { float: right; max-width: 300px; bottom: -30px; position: relative; display: block; }
.img-21 { max-width: 340px; margin: 0 auto -25px; display: block; position: relative; }

.bg-1 { background: url(./../images/dkpal-bg-1.webp) top center no-repeat; background-size: 100% auto; }

.btn-wrap { max-width: 360px; width: 100%; position: relative; }
.btn-wrap a { max-width: 400px; width: 100%; padding: 12px 35px; font-size: 2rem; font-weight: 600; line-height: 1.4; border-radius: 100px; border: 3px solid #f0ffd8; color: #fff; background: linear-gradient(to bottom, #90c115, #8ac217, #52a827); outline: 0; appearance: none; cursor: pointer; text-align: center; }
.btn-img { display: block; margin: 0 auto; width: 100%; position: relative; }
.btn-img img { cursor: pointer; padding-bottom: 5px; position: relative; z-index: 1; margin: 0 auto; display: block; }
.btn-img::before { background: #d2effe; width: 88%; padding-top: 88%; border-radius: 300px; top: 0; left: 50%; transform: translateX(-50%); content: ''; position: absolute;  }

.btn-1 a { margin-top: -28px; display: block; position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.btn-1 a:hover { transform: translateY(-10px); box-shadow: 0px 0px 10px -4px #000; }

.btn-2 { max-width: 600px; width: 100%; margin-left: auto; margin-right: auto; padding: 20px 35px; font-size: 2rem; font-weight: 700; line-height: 1.4; position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; border-radius: 100px; border: 3px solid #f0ffd8; color: #fff; background: linear-gradient(to bottom, #90c115, #8ac217, #52a827); outline: 0; appearance: none; cursor: pointer; text-align: center; display: block; }
.btn-2:hover { transform: translateY(-10px); box-shadow: 0px 0px 10px -4px #000; }

.btn-style-1 { float: right; margin: 0px -70px 20px 30px; }
.btn-style-2 { float: right; margin: -40px -70px 10px 20px; }
.btn-style-3 { float: right; margin: -30px -70px 10px 20px; }

.btn-wrap-1 { max-width: 360px; float: right; margin-left: 30px; }

/* Purchase */
#pr-pop { font-size: 12px; transition: all 0.6s ease; opacity: 0; left: -35px; margin-right: 15px; bottom: 15px; position: fixed; background: #fff; padding: 15px; border-radius: 3px; border: 1px solid #fbfbfb; box-shadow: 0px 5px 10px 0px rgba(106, 106, 106, 0.15); display: flex; gap: 12px; z-index: 100; align-items: center; justify-content: center; flex-direction: row-reverse; }
#pr-pop.active { opacity: 1; left: 15px; }
.pr-time-wrap  { color: #333; }
.pr-img-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.pr-img-wrap img { height: 56px; width: auto; display: block; }
#pr-name { font-weight: 600; }
#pr-loc { font-weight: 600; color: #005cc4; }

/* Flipclock */
.wraptimer { max-width: 450px; width: 100%; margin: 30px auto 20px; }
.tick { transition: opacity 0.25s ease-in; opacity: 0; font-family: "Montserrat", sans-serif; }  
.tick-group:last-of-type { display: flex; align-items: center; }
.tick-group:last-of-type::before { content: ":"; display: inline-block; font-size: 8rem; font-weight: 700; color: #3c3e3c; }
.fixed-timer { opacity: 0; width: 230px; padding: 10px; position: fixed; z-index: 99; bottom: 0; right: 0; display: flex; flex-direction: column; background: rgb(255 255 255 / 90%); border-top-left-radius: 3px; transition: opacity 0.2s ease; }
.fixed-timer.active { opacity: 1; }
.fixed-timer-desc { text-align: center; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 5px; }
.fixed-timer .tick-group:last-of-type::before { font-size: 3.6rem; }

#exitpop { display: none; max-width: 840px; }
#exitpop h3 { font-weight: 700; text-align: center; line-height: 1.8; }
#exitpop p  { text-align: center; font-weight: 600; }

.int-rates { font-size: 15px; text-align: center; color: #b81417; }

.bpr_headline { font-weight: 800; }
.bpr_pink { color: #ea8789; }
.bpr_blue { color: #006db3; }
.link-1 { color: #006db3; text-decoration: none; }
.link-1:hover { text-decoration: underline; }

/* POP-UP OFFER */
.overlay { visibility: hidden; position: fixed; z-index: 100; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.7); transition: 0.25s opacity ease-in, 0.25s visibility step-end; opacity: 0; }
.modal { max-width: 1280px; height: 100%; padding: 0 20px; box-sizing: border-box; margin: auto; visibility: hidden; opacity: 0; position: fixed; top: 2%; right: 0; bottom: 0; left: 0; overflow: auto; -ms-transform: translate3d(0, -1rem, 0) translateY(-50%); -webkit-transform: translate3d(0, -1rem, 0) translateY(-50%); transform: translate3d(0, -1rem, 0); transition: 0.25s transform ease, 0.25s opacity ease, 0.25s visibility step-end; z-index: 1000; scrollbar-width: none; }
.modalcontent { max-width: 100%; background-color: white; box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.25); position: relative; border-radius: 6px; padding: 15px; }
input[type='checkbox']:checked + .overlay, input[type='checkbox']:checked + .overlay + .modal { display: block; visibility: visible; opacity: 1; transform: none; transition: 0.25s transform ease-in, 0.25s opacity ease-in; }
#popup_offer { width: 100%; bottom: auto; }
#chkbx_popup { display: none; }
.a_bannerbuy2get4 { display: block; max-width: 1700px; width: 100%; margin: 0 auto; }
.bannerbuy2get4 { display: block; max-width: 1700px; width: 100%; margin: 0 auto; }
.noblk { max-width: 650px; width: 100%; font-size: 1.5rem; padding-top: 20px; margin: 2% auto 20px; border-top: #cccccc solid 1px; }
.btnno { display: flex; max-width: 200px; width: 100%; align-items: center; justify-content: center; font-size: 1.5rem; letter-spacing: 0.5px; line-height: 1.6; font-family: "Open Sans", sans-serif; font-weight: 700; color: #ffffff; text-decoration: none; text-transform: uppercase; padding: 7px 5px; margin: 0 auto 20px; cursor: pointer; background: linear-gradient(135deg, #a7a7a7 36%, #c2c2c2 67%); border: #b5b3b3 solid 2px; border-radius: 10px; align-items: center; justify-content: center; gap: 7px; }
.btnno:hover { color: #545454; color: #ffffff; background: linear-gradient(135deg, #b2b1b1 36%, #cccaca 67%); border-color: #c5c4c4; }
.fill-white { display: block; fill: #fff; }

/* Exitpop */
#exitpop { display: none; max-width: 840px; font-family: Helvetica, sans-serif; }
#exitpop h3 { font-weight: 700; text-align: center; line-height: 1.8; font-size: 2.2rem; max-width: 700px; margin: 0 auto 1em; }
#exitpop p { text-align: center; font-weight: 600; font-size: 2.2rem; }
#exitpop .order-button { max-width: 400px; width: 100%; line-height: 1.6; background-color: #ed1b3a; color: #fff; font-size: 2.2rem; padding: 15px 30px; border: 2px solid #ed1b3a; border-radius: 50px; margin-left: auto; margin-right: auto; display: block; cursor: pointer; position: relative; font-weight: bold; transition: color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; text-align: center; }
#exitpop .order-button:hover { background-color: #fff; color: #ed1b3a; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); }
#exitpop .order-button:focus { outline: none; }

.br-show-450, .br-show-630 { display: none; }

.montserrat { font-family: "Montserrat", sans-serif; font-optical-sizing: auto; }
.open-sans { font-family: "Open Sans", sans-serif; font-optical-sizing: auto; font-variation-settings: "wdth" 100; }

.p-right-20 { padding-right: 20px; }

.m-top-1em { margin-top: 1em; }
.m-btm-1em { margin-bottom: 1em; }

.bg-blue { background-color: #133498; }
.bg-red { background-color: #ff0000; }
.bg-red-2 { background-color: #d10000; }

.white { color: #fff; }
.red { color: #d10000; }
.red-2 { color: #ff0000; }
.yellow { color: #fff000; }

@media screen and (max-width: 1770px) {
    .flex-1 > div:last-child { position: absolute; top: 110px; right: -160px; }
    .flex-1 .btn-img::before { width: 80%; padding-top: 80%; }
    .flex-1 .btn-img img { max-width: 270px; }
    .img-1 { bottom: -30px; left: -135px; max-width: 300px; }
}

@media screen and (max-width: 1440px) {
    .hd-2 { margin-left: 0; text-align: left; }
    .img-1 { display: none; }
    .flex-1 > div:last-child { top: 100px; right: -30px; }
}

@media screen and (max-width: 1180px) {
    h1 { font-size: 4.4rem; line-height: 1.4; }
    h2 { font-size: 3.8rem; line-height: 1.2; }
    h3 { font-size: 3rem; line-height: 1.3; }
    h4 { font-size: 2.5rem; line-height: 1.3; }
    h5 { font-size: 2.2rem; line-height: 1.2; }
    body { font-size: 1.8rem; }

    .hd-2 { margin-left: auto; text-align: center; }
    .hd-5 { max-width: 645px; }
    .hd-7 { max-width: 700px; }
    .hd-8 { max-width: 400px; }
    .hd-9 { max-width: 658px; }
    .hd-10 { max-width: 700px; }
    .hd-11 { max-width: 500px; }
    .hd-12 { max-width: 730px; }
    .hd-13 { max-width: 515px; }
    .hd-15 { max-width: 585px; }
    .hd-16 { max-width: 705px; }

    .list-1, .list-3 { font-size: 1.8rem; }

    .img-1 { display: none; }
    .img-10 { float: right; margin: 0 -70px 0 30px; }
    .img-14 { margin: 0; }
    .img-19 { max-width: 310px; width: 100%; right: -28px; margin: 0px 0 -90px; position: relative; }
    .img-20 { display: none; }
    .img-21 { max-width: 280px; margin: 0 auto -85px; }

    .flex-1 { flex-direction: column; align-items: center; gap: 0; margin-bottom: 30px; }
    .flex-1 > div:last-child { top: 0; right: 0; position: relative; }

    .flex-7 { flex-direction: column; align-items: center; justify-content: center; }
    .flex-7 > div:last-child { margin: -15px 0px 0px 0; flex-basis: auto; width: 100%; }

    .flex-10 { align-items: center; }
    .flex-10 > div:first-child img { margin-top: 0; display: block; }
    
    .flex-12 > div:first-child { flex-basis: 240px; }

    .flex-13 { flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
    .flex-13 > div:last-child { margin: -15px 0px 0px 0; flex-basis: auto; width: 100%; }

    .btn-style-3 { float: none; margin: 20px auto; }
    .btn-wrap-1 { float: none; margin: 20px auto; }

    .btn-margin-1 { margin-top: -35px; }
    .btn-margin-2 { margin-top: -30px; }

    .bg-1 { background: none; }
    .bg-1 > div:first-child { background: url(./../images/dkpal-bg-1.webp) top right no-repeat;  background-size: cover; padding-bottom: 100px; margin-bottom: -100px; }
}

@media screen and (max-width: 1080px) {
    .container-3 { max-width: 900px; }
}

@media screen and (max-width: 980px) {
    h1 { font-size: 3.8rem; line-height: 1.4; }
    h2 { font-size: 3rem; line-height: 1.2; }
    h3 { font-size: 2.5rem; line-height: 1.3; }
    h4 { font-size: 2.2rem; line-height: 1.3; }
    h5 { font-size: 2rem; line-height: 1.2; }
    body { font-size: 1.6rem; }

    .container-3 { max-width: 800px; }

    .list-1, .list-3 { font-size: 1.6rem; }

    .hd-1 { max-width: 480px; margin-left: auto; margin-right: auto; }
    .hd-2 { max-width: 700px; }
    .hd-5 { max-width: 508px; }
    .hd-7 { max-width: 540px; }
    .hd-8 { max-width: 300px; }
    .hd-9 { max-width: 520px; }
    .hd-10 { max-width: 565px; }
    .hd-11 { max-width: 366px; }
    .hd-12 { max-width: 585px; }
    .hd-13 { max-width: 410px; }
    .hd-15 { max-width: 490px; }
    .hd-16 { max-width: 560px; }

    .spacing-1 { padding-left: 30px; padding-right: 30px; }
    .spacing-2 { padding-left: 20px; padding-right: 20px; }

    .flex-2 { flex-direction: column; align-items: center; gap: 10px; }
    .flex-2 > div:first-child { max-width: 300px; flex-basis: auto; }
    .flex-2 > div:first-child img { max-width: 250px; }
    .flex-2 > div:last-child > div {  max-width: 490px; }

    .flex-6 { flex-direction: column-reverse; align-items: center; gap: 20px; margin: 20px 0; }
    .flex-6 > div:first-child { max-width: 280px; flex-basis: auto; }

    .flex-5 { flex-direction: column-reverse; align-items: center; gap: 20px; margin: 20px auto; }

    .flex-8 { flex-direction: column; gap: 20px; }

    .flex-10  { flex-direction: column; gap: 20px; }
    .flex-10 > div:first-child { flex-basis: auto; max-width: 390px; display: block; margin: 0 auto; }
    .flex-10 > div:first-child img { margin-top: 0; display: block; }

    .flex-11 { flex-direction: column; gap: 0; }
    .flex-11 > div:first-child ul li:last-child { margin-bottom: 1em; }

    .flex-12 { flex-direction: column; gap: 20px; margin-top: 20px; }
    .flex-12 > div:first-child img { max-width: 270px; transform: rotate(0); display: block; margin: 0 auto; }

    .flex-14 { flex-direction: column; gap: 0px; margin-top: 20px; }
    .flex-14 > div:first-child img { max-width: 250px; transform: rotate(0); display: block; margin: 0 auto; }

    .flex-15 { flex-direction: column; gap: 20px; margin-top: 20px; align-items: flex-start; }
    .flex-15 > div { width: 100%; flex-basis: auto; }
    .flex-15 > div:first-child img { max-width: 250px; transform: rotate(0); display: block; margin: 0 auto; }

    .flex-16 { flex-direction: column; gap: 5px; margin-top: 20px; align-items: flex-start; }
    .flex-16 > div:first-child { width: 100%; flex-basis: auto; }
    .flex-16 > div:first-child img { max-width: 300px; transform: rotate(0); display: block; margin: 0 auto; }

    .ingredient { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 25px; }
    .ingredient-wrap .ingredient:not(:last-child) { padding-bottom: 25px; }
    .ingredient > div:first-child { width: 230px; height: 230px; }
    
    .img-1 { bottom: -30px; left: -135px; max-width: 300px; }
    .img-2 { max-width: 250px; float: none; margin: 0 auto 20px; display: block; }
    .img-3 { max-width: 250px; float: none; margin: 0 auto; display: block; }
    .img-4 { max-width: 250px; float: none; margin: 20px auto; display: block; }
    .img-5 { transform: none; max-width: 400px; width: 100%; }
    .img-6 { max-width: 390px; float: none; margin: 20px auto; display: block; width: 100%; }
    .img-8 { max-width: 215px; }
    .img-9 { float: none; margin: 0 auto -60px; display: block; max-width: 250px; }
    .img-10 { float: none; margin: 20px auto; display: block; width: 100%; }
    .img-11 { margin: -135px auto 0; max-width: 220px; }
    .img-12 { float: none; margin: 20px auto; max-width: 250px; }
    .img-15 { float: none; margin: 20px auto; max-width: 270px; display: block; }
    .img-16 { float: none; margin: 0 auto -60px; display: block; max-width: 235px; }
    .img-17 { float: none; margin: 20px auto; display: block; max-width: 250px; }
    .img-18 { float: none; margin: 20px auto; display: block; max-width: 280px; }

    .frame-2 { margin: 40px 0; padding: 35px 25px; }    
    .frame-2.first { margin-top: 0; }
    .frame-2:before { top: -19px; left: 20px; width: 50px; height: 35px; }
    .frame-2:after { bottom: -17px; right: 20px; width: 50px; height: 35px; }

    .frame-3 { margin: 25px 0; padding: 25px 20px 25px 70px; }
    .frame-3:before { top: 15px; left: 17px; width: 35px; height: 24px; }

    .frame-4 { margin-top: 115px; padding: 35px 20px 20px; }

    .list-2 > li:before { width: 55px; height: 60px; }
    .list-3 > li:before { top: -2px; left: 5px; background-size: 25px; width: 25px; height: 25px; }

    .btn-wrap { max-width: 350px; margin-left: auto; margin-right: auto; }
    .btn-img::before { width: 76%; padding-top: 76%; }
    .btn-img img { max-width: 270px; }
    .btn-style-1 { float: none; margin-right: auto; margin-left: auto; }
    .btn-style-2 { float: none; margin-right: auto; margin-left: auto; }

    .btn-margin-1 { margin-top: 0px; }
    .btn-margin-2 { margin-top: 0px; }
}

@media screen and (max-width: 900px) {
    .flex-4 { flex-direction: column; align-items: center; gap: 20px; }
    .flex-4 .btn-1 { margin-right: 0; }
}


@media screen and (max-width: 820px) {
    .br-min-820 { display: none; }
}

@media screen and (max-width: 768px) {
    h1 { font-size: 3.2rem; line-height: 1.4; }
    h2 { font-size: 2.7rem; line-height: 1.2; }

    .hd-12 { max-width: 520px; }
    .hd-13 { max-width: 365px; }

    .bg-1 > div:first-child { padding-bottom: 1px; margin-bottom: 0px; }

    .spacing-1 { padding-left: 15px; padding-right: 15px; }
    .spacing-2 { padding-left: 10px; padding-right: 10px; }
}

@media screen and (max-width: 720px) {
    .footer-info { flex-direction: column-reverse; gap: 15px;  max-width: 290px; text-align: center; margin: 0 auto; }
    .footer-menu { margin-bottom: 15px; }
    .footer-menu ul { margin: 0 auto; }

    .btn-2 { border-radius: 12px; max-width: 400px; }

    #pr-pop { font-size: 12px; padding: 10px 15px; margin: 0; }
    .pr-img-wrap img { height: 35px; }

    .fixed-timer .tick-group:last-of-type::before { font-size: 2.6rem; }
    .fixed-timer-desc { font-size: 1.4rem; }
    .fixed-timer { width: 170px; }
}

@media screen and (max-width: 630px) {
    .br-show-630 { display: block; }
    .hd-3 { margin-bottom: 10px; }
    .hd-4 { margin-top: 10px; margin-bottom: 10px; }
}

@media screen and (max-width: 600px) {
    .flex-3 { flex-direction: column; max-width: 250px; justify-content: center; margin: 0 auto; gap: 16px; }
    .list-1 > li:before { top: -1px; background-size: 20px; width: 20px; height: 20px; }
    .list-1 > li { padding-left: 30px; }

    .list-3 > li:before { top: 0px; left: 0; background-size: 20px; width: 20px; height: 20px; }
    .list-3 > li { padding-left: 30px; }

    .box-1 h5 { margin-bottom: 1em; }

    .auth-blk { margin: 0 auto; }
}
@media screen and (max-width: 540px) {
    .br-min-540 { display: none; }
}

@media screen and (max-width: 500px) {
    .br-min-500 { display: none; }
}

@media screen and (max-width: 450px) {
    h1 { font-size: 3rem; line-height: 1.4; }
    h2 { font-size: 2.4rem; line-height: 1.2; }
    h3 { font-size: 2.2rem; line-height: 1.3; }
    h4 { font-size: 2rem; line-height: 1.3; }
    h5 { font-size: 1.8rem; line-height: 1.3; }

    .img-19 { right: 0; margin-left: auto; margin-right: auto; display: block; }
    .br-show-450 { display: block; }

    .box-1 h5 { max-width: 200px; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 400px) {
    .btn-wrap a { padding: 12px 25px; }
    .btn-1 a { font-size: 1.8rem; }
}