.button { padding: 0 clamp(10px, 3.5vw, 70px); height: clamp(40px, 5.5vw, 110px); font-family: inherit; font-size: clamp(1.3rem, 1.6vw, 3rem); }
.button-primary { color: #440206; background: #FFC846; }
.button-yellow { color: #440206; background: #FFC846; }
.button-dark { color: #fff; background: #333333; }
.button-border { color: #151415; border: 1px solid #C6C6C6; }

.section-container {
    margin-right: auto; margin-left: auto; max-width: 1920px; width: 100%;
    font-family: "Nanum Myeongjo", serif; color: #440206;
    background: #fff url('/campaign/pouringtime/images/section-1-image-2.jpg') repeat center / 110% auto;
}
.section-container .inner { margin-right: auto; margin-left: auto; max-width: 1440px; width: 90%; }
.section-container .section-1 img { width: 100%; }
.section-container .section-1 .block-2 { padding: clamp(12px, 10.42vw, 200px) 0 clamp(18px, 15.63vw, 180px); }
.section-container .section-1 .block-2 .contents { text-align: center; }
.section-container .section-1 .block-2 h2 { display: inline-block; line-height: 1.5; font-size: clamp(1.6rem, 3.55vw, 6.8rem); font-weight: 700; }
.section-container .section-1 .block-2 h2 b { font-weight: 700; }
.section-container .section-1 .block-2 p { margin: clamp(10px, 3.13vw, 60px) 0 clamp(16px, 3.13vw, 60px); font-size: clamp(1.3rem, 1.88vw, 3.6rem); }
.section-container .section-1 .block-2 .media { position: relative; padding-top: 56.25%; }
.section-container .section-1 .block-2 .media iframe { position: absolute; top: 0;  left: 0;  width: 100%;  height: 100%;}
/* .section-container .section-1 .block-2 .media::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8.3%; background: url('/campaign/pouringtime/images/section-1-image-4.jpg') no-repeat center / auto 100%; aspect-ratio: 1; transform: translate(-50%, -50%); } */
.section-container .section-1 .block-3 { padding: 0 0 clamp(24px, 9.38vw, 180px); }
.section-container .section-1 .block-3 .contents { text-align: center; }
/* .section-container .section-1 .block-3 h2 { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.61vw, 50px); line-height: 1.45; font-size: clamp(1.6rem, 2.52vw, 4.8rem); font-weight: 700; }
.section-container .section-1 .block-3 h2::before,
.section-container .section-1 .block-3 h2::after { content: ''; flex: 1 1; display: block; height: 2px; background: url('images/section-1-shape-1.jpg') no-repeat center / auto 100%; } */
.section-container .section-1 .block-3 .contents h2 { margin: 0 0 clamp(6px, 0.84vw, 16px); font-size: clamp(1.6rem, 3.55vw, 6.8rem); font-weight: 700; }
.section-container .section-1 .block-3 .contents p { font-family: "Nanum Myeongjo", serif; font-size: clamp(1.3rem, 2.09vw, 4rem); }
.section-container .section-1 .block-3 ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 9.9vw, 190px) clamp(16px, 8.34vw, 160px); margin-top: clamp(10px, 3.13vw, 60px); margin-right: -0.5%; margin-left: -0.5%; background: url('/campaign/pouringtime/images/section-1.png') no-repeat center / auto 100%; }
.section-container .section-1 .block-3 h3 { margin: clamp(20px, 2.09vw, 40px) 0 clamp(10px, 1.57vw, 30px); padding: 0 0.5em; line-height: 1.2; font-size: clamp(1.8rem, 2.51vw, 4.8rem); font-weight: 500; }
.section-container .section-1 .block-3 p { font-family: 'pretendard', sans-serif; padding: 0 0.85em; font-size: clamp(1.3rem, 1.46vw, 2.8rem); }
.section-container .section-1 .block-3 h4 { margin-top: clamp(40px, 6.26vw, 120px); text-align: center; font-size: clamp(1.6rem, 1.67vw, 3.2rem); font-weight: 400; color: #440206; }

.section-container .section-2 { background: #fff; padding: clamp(24px, 9.38vw, 180px) 0 clamp(24px, 9.38vw, 180px); }
.section-container .section-2 h2 { position: relative; margin-bottom: clamp(12px, 4.17vw, 80px); text-align: center; font-size: clamp(1.6rem, 3.55vw, 6.8rem); }
.section-container .section-2 h2 img { position: absolute; bottom: -12%; left: 50%; width: clamp(60px, 32.04vw, 615px); transform: translateX(-50%); }
.section-container .section-2 .box { padding: clamp(10px, 1.05vw, 20px); }
.section-container .section-2 .dl { display: grid; gap: clamp(10px, 1.05vw, 20px); padding: clamp(12px, 4.17vw, 80px); background: url('/campaign/pouringtime/images/section-2.png') no-repeat center / contain; }
.section-container .section-2 .dl .item { display: flex; align-items: center; gap: clamp(10px, 3.13vw, 60px) }
.section-container .section-2 .dl .dt { display: inline-flex; align-items: center; justify-content: center; padding: 0 clamp(10px, 1.05vw, 20px); min-width: clamp(100px, 12.6vw, 240px); height: clamp(30px, 3.96vw, 76px); text-align: center; font-size: clamp(1.3rem, 1.36vw, 2.6rem); font-weight: 700; color: #FCD475; background: #440206; }
.section-container .section-2 .dl .dd { line-height: 1.6; font-size: clamp(1.3rem, 1.26vw, 2.4rem); }
.section-container .section-2 .buttons { display: flex; justify-content: center; align-items: center; margin-top: clamp(16px, 4.17vw, 80px); }
.section-container .section-2 ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(34px, 2.09vw, 40px); margin-top: clamp(30px, 4.17vw, 80px); padding: 0 1.6%; text-align: center; }
.section-container .section-2 ul strong { display: block; margin-bottom: clamp(12px, 1.57vw, 30px); text-align: center; font-size: clamp(1.6rem, 1.26vw, 2.4rem); font-weight: 700; color: #440206; }
.section-container .section-2 ul p { font-family: 'pretendard', sans-serif; margin-top: clamp(15px, 1.57vw, 30px); font-size: clamp(1.4rem, 1.15vw, 2.2rem); }
.section-container .section-2 ul p small { display: block; margin-top: clamp(4px, 0.53vw, 10px); line-height: 1.6; font-size: clamp(1.3rem, 0.84vw, 1.6rem); }

.section-container .section-3 { background: #EEF2EE;  padding: clamp(24px, 9.38vw, 180px) 0 clamp(24px, 9.38vw, 180px); }
.section-container .section-3 h2 { position: relative; margin-bottom: clamp(12px, 5.21vw, 100px); text-align: center; font-size: clamp(1.6rem, 3.55vw, 6.8rem); }
.section-container .section-3 h2 img { position: absolute; bottom: -33%; left: 50%; width: clamp(50px, 26.7vw, 512px); transform: translateX(-50%); }
.section-container .section-3 .ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.09vw, 40px); }
.section-container .section-3 .ul .li { overflow: hidden; z-index: 1; position: relative; display: flex; flex-direction: column; padding: clamp(20px, 3.13vw, 60px) clamp(16px, 2.61vw, 50px); height: 810px; text-align: center; background: url('/campaign/pouringtime/images/section-3-2.png') no-repeat center / 97% auto; }
.section-container .section-3 .ul .li:nth-child(1),
.section-container .section-3 .ul .li:nth-child(2) { height: 540px; background: url('/campaign/pouringtime/images/section-3-1.png') no-repeat center / 99% auto; }
.section-container .section-3 .ul .li:nth-child(1) .img,
.section-container .section-3 .ul .li:nth-child(2) .img { max-width: 644px; width: 50%; }
.section-container .section-3 .ul h3 { z-index: 2; position: relative; display: flex; flex-direction: column; align-items: center; font-size: clamp(1.4rem, 1.88vw, 3.6rem); }
.section-container .section-3 .ul h3 .badge { position: relative; display: inline-flex; align-items: center; justify-content: center; margin-bottom: clamp(12px, 1.26vw, 24px); width: clamp(46px, 6.36vw, 122px); font-size: clamp(1.2rem, 1.57vw, 3rem); font-weight: 700; color: #440206; aspect-ratio: 1.14; }
.section-container .section-3 .ul h3 .badge img { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.section-container .section-3 .ul h3 small { display: block; font-size: clamp(1.2rem, 1.26vw, 2.4rem); }
.section-container .section-3 .ul img { margin-right: 15px; }
.section-container .section-3 .ul p { font-family: 'pretendard', sans-serif; font-weight: 500; margin-top: clamp(12px, 2.09vw, 40px); line-height: 1.6; font-size: clamp(1.3rem, 1.15vw, 2.2rem); }
.section-container .section-3 .ul p small { display: block; margin-top: clamp(4px, 0.42vw, 8px); font-size: clamp(1.25rem, 1.05vw, 2rem); font-weight: 600; }

.section-container .section-4 { font-family: 'pretendard', sans-serif; padding: clamp(24px, 9.38vw, 180px) 0; background: #fff; }
.section-container .section-4 h2 { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2.61vw, 50px); line-height: 1.45; font-size: clamp(1.6rem, 2.52vw, 4.8rem); font-weight: 700; }
.section-container .section-4 h2::before,
.section-container .section-4 h2::after { content: ''; flex: 1 1; display: block; height: 2px; background: url('images/section-1-shape-1.jpg') no-repeat center / auto 100%; }
.section-container .section-4 .logo { display: block; margin: clamp(40px, 6.26vw, 120px) auto clamp(30px, 4.69vw, 90px); }
.section-container .section-4 p { margin-top: clamp(14px, 1.26vw, 24px); font-size: clamp(1.5rem, 1.88vw, 3.6rem); text-align: center; }
.section-container .section-4 h3 { margin-top: 0 clamp(40px, 6.26vw, 120px); font-size: clamp(1.5rem, 1.88vw, 3.6rem); color: #151415; }
.section-container .section-4 ol { margin-top: clamp(12px, 2.09vw, 40px); margin-bottom: clamp(8px, 1.05vw, 20px); margin-left: revert; padding-left: clamp(14px, 1.46vw, 28px); list-style-type: revert; color: #151415; }
.section-container .section-4 ol li { line-height: 1.6; font-size: clamp(1.3rem, 1.36vw, 2.6rem); }
.section-container .section-4 small { display: block; line-height: 1.4; font-size: clamp(1.2rem, 1.15vw, 2.2rem); color: #151415; }

.section-container .section-4 .ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 2.09vw, 40px); }
.section-container .section-4 .ul .img { overflow: hidden; position: relative; }
.section-container .section-4 .ul .img .mask { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 0.84vw, 16px); position: absolute; top: 0; left: 0; padding: 16%; width: 100%; height: 100%; background: #3f0406; opacity: 0; visibility: hidden; transition: all .3s ease; }
.section-container .section-4 .ul .img a { display: block; background: #fff; }
.section-container .section-4 .ul strong { display: block; margin-top: clamp(16px, 1.57vw, 30px); text-align: center; font-size: clamp(1.6rem, 1.26vw, 2.4rem); font-weight: 700; }
.section-container .section-4 .ul .img:hover .mask { opacity: 1; visibility: visible; }
.section-container .section-4 button {
    z-index: 2;
    position: absolute;
    right: 40px;
    bottom: 40px;
    background: #340008;
    border-radius: 50%;

    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
}
.section-container .section-4 button::before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.3359 30H40.6693' stroke='white' stroke-width='2'/%3E%3Cpath d='M30 40.6673V19.334' stroke='white' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.modal-1 .modal__wrapper { max-width: 860px; }
.modal-1 .form { padding: clamp(16px, 2.6vw, 48px) clamp(16px, 2.6vw, 48px) clamp(20px, 3.13vw, 60px); color: #151415; }
.modal-1 .form .button { height: clamp(36px, 3.33vw, 64px); font-size: clamp(1.3rem, 0.94vw, 1.8rem); border-radius: 0; }
.modal-1 .form .row { display: flex; margin-bottom: clamp(12px, 1.05vw, 20px); }
.modal-1 .form .row:first-child { margin-bottom: clamp(12px, 2.09vw, 40px); }
.modal-1 .form .col:first-child { width: 120px; }
.modal-1 .form .col:last-child { flex: 1 1; }
.modal-1 .form h2 { width: 100%; text-align: center; font-size: clamp(1.8rem, 1.88vw, 3.6rem); }
.modal-1 .form label { display: inline-flex; margin-top: 1em; font-size: clamp(1.4rem, 0.94vw, 1.8rem); font-weight: 500; }
.modal-1 .form label .color-red { color: #F40008; }
.modal-1 .form input,
.modal-1 .form select { padding: 0 clamp(10px, 1.05vw, 20px); width: 100%; height: clamp(36px, 3.33vw, 64px); font-size: clamp(1.4rem, 0.94vw, 1.8rem); border-radius: 0; }
.modal-1 .form small { display: block; margin-top: clamp(6px, 0.63vw, 12px); font-size: clamp(1.2rem, 0.84vw, 1.6rem); }
.modal-1 .form .input-group { gap: clamp(6px, 0.63vw, 12px); }
.modal-1 .form .input-group input { flex: 1 1; }
.modal-1 .form .input-group input.w100 { width: 100%; flex: 1 1 auto; }
.modal-1 .form .buttons { display: flex; align-items: center; justify-content: center; gap: clamp(4px, 0.84vw, 16px); }
.modal-1 .form .buttons .button { min-width: clamp(100px, 9.38vw, 180px); }
.modal-1 .form .agree-box { display: grid; margin-bottom: clamp(10px, 1.26vw, 24px); padding: clamp(10px, 1.05vw, 20px); font-size: clamp(1.3rem, 0.84vw, 1.6rem); background: #F5F6F7; }
.modal-1 .form .agree-box:last-child { margin-bottom: 0; }
.modal-1 .form .agree-box .scroll { color: #444; }
.modal-1 .form .agree-box h3 { margin-bottom: clamp(10px, 0.84vw, 16px); font-size: clamp(1.4rem, 1.05vw, 2rem); }
.modal-1 .form .file { flex: 1 1; display: flex; }
.modal-1 .form .file input[type="file"] { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; }
.modal-1 .form .file input[type="text"] { cursor: default; }
.modal-1 .form .file input[type="text"]:focus { outline: 2px solid var(--clr-primary); }
.modal-1 .form .file ~ label { margin-top: 0; cursor: pointer; }

.modal-1 .check { --background: #fff; --border-color: #E4E6E8; --border-radius: 2px; }
.modal-1 .check .check-label { font-size: clamp(1.3rem, 0.84vw, 1.6rem); font-weight: 400; color: #151415; }
.modal-1 .check .check-label::after { background: #333333; border-color: #333333; }
.modal-1 .check .check-label::before,
.modal-1 .check .check-label::after { background-repeat: no-repeat; background-position: center; background-size: auto 100%; background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_11123_12152)'%3E%3Cpath d='M17.25 8.625L10 15.375L6.75 12' stroke='%23E4E6E8' stroke-width='1.5' stroke-linecap='square'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_11123_12152'%3E%3Crect width='24' height='24' rx='2' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); }

.modal-2 .mask { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 0.84vw, 16px); padding: 16%; width: 100%; background: #3f0406; }
.modal-2 .mask .img a { display: block; background: #fff; }
.modal-2 .modal__close::before { filter: invert(1); }

.modal-3 .modal__wrapper { max-width: 860px; }
.modal-3 .complete { display: flex; flex-direction: column; align-items: center; padding: clamp(24px, 4.17vw, 80px) clamp(24px, 1.26vw, 24px) clamp(40px, 6.26vw, 120px); text-align: center; color: #000; background: #fff; }
.modal-3 .complete .image { width: clamp(100px, 18.39vw, 353px); }
.modal-3 .complete h1 { position: relative; margin: clamp(20px, 2.61vw, 50px) 0 clamp(14px, 2.61vw, 50px); font-family: "Noto Serif KR", serif; font-size: clamp(1.6rem, 5.01vw, 9.6rem); font-weight: 600; color: #440206; }
.modal-3 .complete h1 img { position: absolute; bottom: -13%; left: 50%; max-width: none; width: clamp(60px, 24.02vw, 461px); transform: translateX(-50%); }
.modal-3 .complete p { font-family: "Pretendard", sans-serif; font-size: clamp(1.6rem, 1.67vw, 3.2rem); }
.modal-3 .complete p b { font-weight: 600; }
.modal-3 .complete p strong { font-weight: inherit; color: #440206; }
.modal-3 .complete a { display: inline-flex; align-items: center; justify-content: center; margin: clamp(20px, 3.13vw, 60px) 0; padding: clamp(10px, 1.67vw, 32px) 16px; max-width: 480px; width: 100%; text-align: center; font-size: clamp(1.3rem, 1.26vw, 2.4rem); color: #FCD475; background: #440206; }
.modal-3 .complete .close { font-size: clamp(1.4rem, 1.05vw, 2rem); font-weight: 500; color: #000000; text-decoration: underline; }
@media screen and (min-width: 1025px) {
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2) { justify-content: center; }
    .section-container .section-3 .ul .li:nth-child(1) .contents,
    .section-container .section-3 .ul .li:nth-child(2) .contents { width: 43.75%; }
    .section-container .section-3 .ul .li:nth-child(1) .img,
    .section-container .section-3 .ul .li:nth-child(2) .img { position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2) { grid-column: 1 / -1; }
}
@media screen and (min-width: 1025px) {
	.section-container .section-4 button { display: none; }
}
@media screen and (max-width: 1900px) {
    .section-container .section-2 .dl { padding-right: 12%; padding-left: 12%; }
}
@media screen and (max-width: 1024px) {
    .section-container .section-1 .block-3 ul { grid-template-columns: repeat(2, 1fr); margin-right: auto; margin-left: auto; }
    .section-container .section-1 .block-3 ul img { width: 100%; }
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2),
    .section-container .section-3 .ul .li { height: 510px; background: url('/campaign/pouringtime/images/section-3-2.png') no-repeat center / 97% auto; }

    .section-container .section-4 .logo { max-width: 200px; width: 30%; }
    .section-container .section-4 .ul .img .mask { display: none; }
}
@media screen and (max-width: 768px) {
    .section-container .section-1 .block-3 ul { grid-template-columns: repeat(1, 1fr); background: none; }
    .section-container .section-2 .dl { background: url('/campaign/pouringtime/images/section-2-1-1.png') no-repeat center / contain; }
    .section-container .section-2 .dl .item { display: block; }
    .section-container .section-2 .dl .dt { margin-bottom: 6px; }
    .section-container .section-3 .ul .li { justify-content: center; }
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2),
    .section-container .section-3 .ul .li { height: 380px; }

    .section-container .section-2 .dl {
        margin: auto;
        padding-right: 24px;
        padding-left: 24px;
        max-width: 500px;
        height: 460px;
        display: flex;
        flex-direction: column;
        padding-top: 12%;
    }

    .modal-1 .form .row { display: block; }
    .modal-1 .form label { margin-top: 0; margin-bottom: 4px; }
    .modal-1 .form .col:first-child { width: 100%; }

    .modal-1 .check .check-label { margin-bottom: 0; margin-top: 4px; }
}
@media screen and (max-width: 640px) {
    .section-container .section-1 .block-2 { background-position-x: 0%; }
    .section-container .section-2 ul { grid-template-columns: repeat(1, 1fr); }
    .section-container .section-3 .ul { grid-template-columns: repeat(1, 1fr); }
    .section-container .section-3 .ul img { margin-top: -3%; width: 90%; }
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2),
    .section-container .section-3 .ul .li { height: 460px; }
    .section-container .section-3 .ul { grid-template-columns: repeat(1, 1fr); margin: auto; max-width: 400px; }

    .section-container .section-4 .ul { grid-template-columns: repeat(1, 1fr); }

    .modal-3 .complete h1 { margin-bottom: 6px; }
    .modal-3 .complete a { width: auto; }
}
@media screen and (max-width: 425px) {
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2),
    .section-container .section-3 .ul .li { height: 430px; }

    .section-container .section-2 .dl { height: 350px; }
    .section-container .section-2 .box { margin-top: -30px; }

}
@media screen and (max-width: 375px) {
    .section-container .section-3 .ul .li:nth-child(1),
    .section-container .section-3 .ul .li:nth-child(2),
    .section-container .section-3 .ul .li { height: 380px; }
    .section-container .section-2 .box { margin-top: -40px; margin-bottom: -30px; }
    .section-container .section-2 .dl {
        padding-right: 16px;
        padding-left: 16px;
        max-width: 500px;
        height: 350px;
        padding-top: 18%;
    }
}