html {
    scroll-behavior: smooth
}

#container {
    padding-top: 60px;
    background-image: url("https://assets.joongang.co.kr/images/event/findingHK/bg_texture.png");
    background-repeat: repeat;
    background-size: 100vw auto
}

#container,
footer {
    overflow: hidden
}

[role=main] {
    background-color: #a4672f
}

[role=main] img {
    position: relative;
    max-width: 500px;
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto
}

[role=main] h1 {
    background-image: linear-gradient(180deg, #934F13 0%, rgba(147, 79, 19, 0) 100%);
    background-blend-mode: overlay;
    background-size: 100% 218px;
    background-repeat: repeat-x
}

.contents {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.contents h1,
.contents section {
    position: relative;
    align-self: center;
    max-width: 500px;
    width: 100%;
    padding-left: 0;
    padding-right: 0
}

.contents section.share_wrap,
.contents section.notice_wrap {
    padding-left: 20px;
    padding-right: 20px
}

@media(min-width: 986px) {

    .contents section.share_wrap,
    .contents section.notice_wrap {
        padding-left: 0;
        padding-right: 0
    }
}

.contents section::after,
.contents section::before {
    content: "";
    height: 100%;
    left: 50%;
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    width: 100vw
}

.contents section.bg_white::before {
    background-color: #fff
}

.contents section.bg_skin::before {
    background-color: #f6d3a9
}

.contents section>* {
    position: relative;
    z-index: 3
}

.contents section .list_dot {
    z-index: 1
}

.contents section.section4::before,
.contents section.section5::before {
    background-image: url("https://assets.joongang.co.kr/images/event/findingHK/bg_texture.png");
    background-repeat: repeat;
    background-size: 1920px 1609px
}

.btn_map {
    width: 100%;
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    height: 48px;
    background-color: #442204
}

@media(min-width: 986px) {
    .btn_map {
        max-width: 360px;
        height: 60px;
        font-size: 19px;
        font-weight: 700;
        line-height: 27.51px
    }
}

.btn_map .ico_spot {
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg fill='none' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='9.9997' cy='9.1667' rx='1.6667' ry='1.6667' stroke='%23ECECEC' stroke-width='1.5'/%3E%3Cpath d='m10 18.333 4.5833-4.5833c2.5313-2.5313 2.5313-6.6354 0-9.1666-2.5313-2.5313-6.6354-2.5313-9.1667 0-2.5313 2.5313-2.5313 6.6354 0 9.1666l4.5834 4.5833z' stroke='%23ECECEC' stroke-linejoin='round' stroke-width='1.3'/%3E%3C/svg%3E%0A")
}

@media(min-width: 986px) {
    .btn_map .ico_spot {
        width: 28px;
        height: 28px
    }
}

.btn_map .ico_spot {
    margin-right: 3px
}

.btn_gray,
.btn_orange {
    width: calc(100% - 50px);
    font-size: 14px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    height: 48px
}

@media(min-width: 986px) {

    .btn_gray,
    .btn_orange {
        max-width: 500px;
        width: 100%;
        font-size: 19px;
        line-height: 27.51px;
        height: 60px
    }
}

.btn_orange {
    background-color: #f6330a
}

.btn_gray {
    background-color: #888;
    border-color: #888
}

.form_check {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.form_check_input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0)
}

.form_check_input+label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M10 0c5.523 0 10 4.477 10 10s-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0zm0 1a9 9 0 1 0 .001 18.001A9 9 0 0 0 10 1z' fill='%23CDCDCD'/%3E%3C/svg%3E");
    content: "";
    height: 20px;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    background-repeat: no-repeat
}

.form_check_input[type=radio]:checked+label {
    color: #ff5a37
}

.form_check_input[type=radio]:checked+label::before {
    background-image: url("data:image/svg+xml,%0A%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10' cy='10' r='9.5' stroke='%23F6330A'/%3E%3Ccircle cx='10' cy='10' r='6' fill='%23F6330A'/%3E%3C/svg%3E%0A")
}

.form_check_input[type=radio]:disabled~.badge {
    display: block
}

.form_check_label {
    display: inline-block;
    position: relative;
    padding-left: 32px;
    font-weight: 500;
    cursor: pointer
}

@media(min-width: 690px) {
    .form_check_label {
        padding-left: 44px;
        font-size: 20px;
        line-height: 30px
    }
}

.form_check_label+.form_text {
    display: inline-block;
    text-decoration: underline
}

.layer_terms {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 360px;
    padding: 54px 20px
}

.layer_terms .logo_plus {
    margin: 0 auto;
    max-width: 254px;
    width: 100%;
    height: 30px
}

.layer_terms .subtitle {
    margin-top: 20px;
    color: #000;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.4px
}

.layer_terms .sub_title {
    display: block;
    margin-top: 30px;
    color: #121212;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.4px
}

.layer_terms .sub_title+form {
    margin-top: 4px
}

.layer_terms .input_group+.error {
    margin-top: 3px
}

.layer_terms .error {
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.4px;
    color: #666
}

.layer_terms .form_control {
    width: 100%;
    height: 48px;
    border: 1px solid #dbdbdb;
    padding: 0 16px
}

.layer_terms .form_check {
    margin-top: 20px
}

.layer_terms .form_check:checked+.form_check_label:before {
    border-color: #121212;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23111'/%3E%3Cpath fill='%23fff' d='m4.8 10.06 4.074 4.073 6.716-6.72-1.167-1.166-5.545 5.551L5.97 8.89 4.8 10.06Z'/%3E%3C/svg%3E");
    background-position: 50% 50%;
    background-size: 20px auto
}

.layer_terms .form_check [type=checkbox] {
    display: none
}

.layer_terms .form_check_label,
.layer_terms .form_check_input[type=checkbox]:checked+label {
    position: relative;
    display: block;
    padding-left: 26px;
    color: #111;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.4px;
    cursor: pointer
}

.layer_terms .form_check_label:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border: 1px solid #d9d9d9
}

.layer_terms .form_check_input[type=checkbox]:checked+label:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23111'/%3E%3Cpath d='M4 4h12v12H4z'/%3E%3Cpath fill='%23FFF' fill-rule='nonzero' d='m4.8 10.06 4.074 4.074 6.716-6.72-1.168-1.167-5.544 5.551L5.97 8.89z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: contain;
    border: none
}

.layer_terms .agree_box {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    margin-top: 11px;
    padding: 16px;
    background-color: #f7f7f7;
    color: #666;
    font-size: 13px;
    font-weight: 400;
    line-height: 21px;
    letter-spacing: -0.4px
}

.layer_terms .btn_gray {
    margin-top: 32px;
    background-color: #121212;
    width: 100%;
    height: 48px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.4px;
    border: none
}

.layer_terms .btn_gray:disabled {
    background-color: #d9d9d9
}

.layer_terms .input_group {
    display: flex;
    align-items: center;
    margin-top: 8px
}

.layer_terms .input_group .form_control {
    flex: 1
}

.layer_terms .input_group .button-search {
    flex-shrink: 0;
    height: 48px;
    padding: 13px 21px;
    margin-left: 8px;
    border: 1px solid #121212;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    letter-spacing: -0.400000006px;
    text-align: center
}

@media(max-width: 985px) {
    .layer_terms {
        padding-bottom: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain
    }

    .layer_terms:after {
        content: "";
        position: sticky;
        display: block;
        margin: 0 auto;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-width: 360px;
        height: 100px;
        background: linear-gradient(0deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none
    }
}

@media(max-width: 986px) {
    .layer_terms {
        max-width: 100%;
        max-height: 100%;
        height: 100%
    }

    .layer_terms:after {
        max-width: 100%
    }
}

.layer_etc {
    max-width: 320px;
    min-height: 170px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 40px 30px 30px
}

.layer_etc .layer_header {
    text-align: center;
    color: #121212;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.4px
}

.layer_etc .layer_body .confirm {
    display: block;
    text-align: center;
    color: #121212;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    letter-spacing: -0.4px
}

.layer_etc .layer_footer {
    margin-top: 20px
}

.layer_etc .layer_footer a {
    margin: 8px auto 0;
    width: calc(100% - 20px);
    height: 36px;
    padding: 0 20px
}

.layer_etc .layer_footer a:only-child {
    margin: 20px auto 0
}

.layer_participate {
    left: 50%;
    top: auto;
    bottom: 0;
    overflow: auto;
    width: 100%;
    max-height: 100%;
    min-height: 240px;
    transform: translate(-50%, 0);
    border-radius: 20px 20px 0 0;
    padding: 40px 20px 20px
}

@media(min-width: 986px) {
    .layer_participate {
        padding-top: 50px;
        padding-bottom: 50px
    }
}

.layer_participate .layer_header {
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    text-align: center;
    margin-bottom: 20px
}

@media(min-width: 986px) {
    .layer_participate .layer_header {
        font-size: 24px;
        font-weight: 700;
        line-height: 32px;
        margin-bottom: 25px
    }
}

.layer_participate .layer_body {
    display: flex;
    flex-direction: column;
    align-items: center
}

@media(min-width: 986px) {
    .layer_participate .form_check_input+label:before {
        font-size: 20px;
        line-height: 42px
    }
}

.layer_participate .form_check_input[type=radio].checked+label {
    color: #ff5a37
}

.layer_participate .form_check_input[type=radio]:disabled+label {
    color: #bcbcbc
}

.layer_participate .form_check_label {
    font-size: 16px;
    line-height: 24px;
    color: #333
}

@media(min-width: 986px) {
    .layer_participate .form_check_label {
        padding-left: 44px;
        font-size: 20px;
        line-height: 30px
    }
}

.layer_participate .options {
    margin-bottom: 26px;
    width: 100%
}

@media(min-width: 986px) {
    .layer_participate .options {
        margin-bottom: 32px;
        max-width: 246px
    }
}

.layer_participate .options .form_check {
    padding-top: 1px;
    padding-bottom: 1px
}

.layer_participate .options .form_check:not(:first-child) {
    margin-top: 10px
}

@media(min-width: 986px) {
    .layer_participate .options .form_check:not(:first-child) {
        margin-top: 8px
    }
}

.layer_participate .badge {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    border-radius: 4px;
    background-color: #cdcdcd;
    color: #fff;
    text-align: center
}

.layer_participate .btn_orange,
.layer_participate .btn_gray {
    height: 54px;
    margin-left: auto;
    margin-right: auto;
    font-size: 16px;
    font-weight: 700;
    line-height: 23px
}

@media(min-width: 986px) {

    .layer_participate .btn_orange,
    .layer_participate .btn_gray {
        max-width: 444px;
        height: 74px;
        font-size: 24px;
        line-height: 32px
    }
}

.layer_participate .btn_close {
    display: none
}

@media(min-width: 986px) {
    .layer_participate .btn_close {
        display: block;
        top: 50px;
        left: 50%;
        width: 32px;
        height: 32px;
        transform: translateX(calc(-50% + 244px))
    }
}

.layer_participate .btn_close .ico_close {
    width: 20px;
    height: 20px
}

@media(min-width: 986px) {
    .layer_participate .btn_close .ico_close {
        width: 32px;
        height: 32px
    }
}

.layer_participate .point_box_wrap {
    position: relative;
    max-width: 280px;
    width: 100%;
    margin-bottom: 16px
}

@media(min-width: 986px) {
    .layer_participate .point_box_wrap {
        max-width: 320px;
        margin-bottom: 25px
    }

    .layer_participate .point_box_wrap img {
        width: 320px;
        height: 122px
    }
}

.layer_participate .point_box_wrap .font_white {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px
}

@media(min-width: 986px) {
    .layer_participate .point_box_wrap .font_white {
        font-size: 18px;
        line-height: 28px
    }
}

.layer_participate .point_box_wrap strong {
    display: block;
    margin-bottom: 2px
}

@media(min-width: 986px) {
    .layer_participate .point_box_wrap strong {
        margin-bottom: 4px
    }
}

.layer_participate .font_primary {
    font-weight: 500;
    color: #f6330a
}

.layer_participate .desc {
    font-size: 13px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    margin-bottom: 18px
}

@media(min-width: 986px) {
    .layer_participate .desc {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 32px
    }
}

.layer_participate .ico_url {
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='15' height='14' viewBox='0 0 15 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.78789 1.40039H3.30039C2.52719 1.40039 1.90039 2.02719 1.90039 2.80039V11.2004C1.90039 11.9736 2.52719 12.6004 3.30039 12.6004H11.7004C12.4736 12.6004 13.1004 11.9736 13.1004 11.2004V9.80039' stroke='%231D1D1D' stroke-width='1.3125'/%3E%3Cpath d='M7.15234 1.40059L13.1023 1.40059L13.1023 7.35059' stroke='%231D1D1D' stroke-width='1.3125' stroke-linejoin='round'/%3E%3Cpath d='M13.0993 1.40068L6.24219 8.25781' stroke='%231D1D1D' stroke-width='1.3125'/%3E%3C/svg%3E%0A")
}

@media(min-width: 986px) {
    .layer_participate .ico_url {
        width: 16px;
        height: 18px
    }
}

.layer_participate .btn_gray_light {
    max-width: 280px;
    height: 42px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    background: #f3f4f6;
    border-color: #f3f4f6;
    color: #111
}

@media(min-width: 986px) {
    .layer_participate .btn_gray_light {
        max-width: 322px;
        height: 52px;
        font-size: 16px;
        line-height: 24px
    }
}

.full_popup {
    display: none
}

.layer_terms .btn_close,
.layer_etc .btn_close {
    right: 20px;
    top: 20px
}

.ico_close {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%0A%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.5997 15.9137L4.7002 25.8132L6.11441 27.2274L16.0139 17.3279L25.9134 27.2274L27.3276 25.8132L17.4281 15.9137L27.3276 6.01422L25.9134 4.60001L16.0139 14.4995L6.11441 4.60001L4.7002 6.01422L14.5997 15.9137Z' fill='%231D1D1D'/%3E%3C/svg%3E%0A")
}

.share {
    display: flex;
    justify-content: center
}

.share .share_item+.share_item {
    margin-left: 16px
}

.share [type=button],
.share [class*=ico_] {
    width: 48px;
    height: 48px
}

.share .ico_sns_ktalk {
    background-image: url(https://assets.joongang.co.kr/images/event/dailyDraw2406/icon-kakao.min.png)
}

.share .ico_sns_face {
    background-image: url(https://assets.joongang.co.kr/images/event/dailyDraw2406/icon-facebook.min.png)
}

.share .ico_sns_twt {
    background-image: url(https://assets.joongang.co.kr/images/event/dailyDraw2406/icon-x.min.png)
}

.share .ico_sns_url {
    background-image: url(https://assets.joongang.co.kr/images/event/dailyDraw2406/icon-copy.min.png)
}

.list_dot_item {
    position: relative;
    padding-left: 12px;
    text-align: left;
    font-size: 13px;
    line-height: 22px;
    color: #777
}

@media(min-width: 986px) {
    .list_dot_item {
        font-size: 14px
    }
}

.list_dot_item::before {
    content: "";
    position: absolute;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background-color: #777;
    transform: translateY(10px)
}

.list_dot_item:not(:first-child) {
    margin-top: 4px
}

@media(min-width: 986px) {
    .list_dot_item:not(:first-child) {
        margin-top: 5px
    }
}

.list_dot_item .list_dot {
    margin-left: 7px;
    margin-top: 7px
}

.map_wrap {
    position: relative;
    padding-top: 53.08%
}

.map_wrap>img {
    margin-top: -53.08%
}

.map_wrap .inner {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 360px;
    width: calc(100% - 100px);
    height: 100%
}

.map_wrap .map {
    margin-bottom: 16px
}

@media(min-width: 986px) {
    .map_wrap .map {
        margin-bottom: 20px
    }
}

@media(max-width: 364px) {
    .map_wrap .map {
        height: 146px !important
    }
}

.map {
    overflow: hidden;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 53.08%;
    background-color: #e69957;
    border-radius: 8px;
    border: 1px solid #e69957
}

.share_wrap {
    padding-top: 48px;
    padding-bottom: 47px
}

.share_wrap .section_heading {
    font-size: 18px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    margin-bottom: 24px;
    text-align: center
}

.notice_wrap {
    position: relative;
    padding-top: 25px;
    padding-bottom: 32px
}

.notice_wrap .section_heading {
    position: relative;
    color: #333;
    font-size: 18px;
    line-height: 21px;
    margin-bottom: 18px
}

.notice_wrap .section_heading::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -26px;
    height: 1px;
    width: 100%;
    background-color: #ddd
}

@media(min-width: 986px) {
    .notice_wrap .section_heading {
        font-size: 22px;
        line-height: 31px;
        margin-bottom: 20px
    }
}

.notice_wrap .list_dot_item .list_dot {
    margin-top: 2px;
    margin-left: 0
}

.notice_wrap .list_dot_item .list_dot_item {
    padding-left: 0
}

.notice_wrap .list_dot_item .list_dot_item::before {
    content: none
}

.contents section.width_extend {
    padding: 0;
    max-width: 100vw
}

.contents .img_wrap {
    position: relative
}

@media(min-width: 768px) {
    .contents .sm_hidden {
        display: block !important;
        max-width: 800px;
        transform: translateX(-23px)
    }

    .contents .lg_hidden {
        display: none !important
    }

    .contents .width_extend {
        max-width: 576px
    }
}

.contents [aria-labelledby=section1-heading] {
    margin-top: -2px
}

.section5 {
    padding-bottom: 59px
}

.section5 .btn_orange,
.section5 .btn_gray {
    position: fixed;
    left: 50%;
    max-width: 360px;
    width: calc(100% - 100px);
    transform: translateY(0px) translateX(-50%);
    transition: position .5s ease, transform .5s ease;
    bottom: 50px;
    z-index: 11
}

.section5 .btn_orange.relative,
.section5 .btn_gray.relative {
    position: relative;
    left: 50%;
    bottom: auto;
    margin: 0
}

@media(min-width: 986px) {

    .section5 .btn_orange.relative,
    .section5 .btn_gray.relative {
        width: 100%
    }
}

.section5 .btn_orange.fixed,
.section5 .btn_gray.fixed {
    z-index: 30;
    position: fixed;
    left: 50%;
    transform: translateX(-50%)
}

.section5 .btn_group {
    background-image: url("https://assets.joongang.co.kr/images/event/findingHK/btn_group@2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    overflow: visible;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    height: 48px
}

@media(min-width: 986px) {
    .section5 .btn_group {
        height: 60px
    }
}

.section5 .btn_group+img {
    position: relative;
    z-index: 0
}

.overflow_hidden {
    overflow: hidden
}