@charset "utf-8";

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend input, textarea, button, select{
    vertical-align: baseline;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    outline: 0;
    padding: 0;
    margin: 0;
    border: 0;
}


* { margin:0; padding:0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
ul, li {list-style:none; }
html { width:100%; }
body { width:100%; height:100%; line-height:100%; color:#000; font-size:1em; font-family: 'Pretendard'; overflow-y:visible!important; box-sizing:border-box; display: flex; flex-direction: column; align-items: center; }
img { vertical-align:middle; border:none; }
a { text-decoration:none; cursor:pointer; }
p { }
div, input, button { vertical-align:middle; border:none; font-family: 'Pretendard'; }
textarea { border:none; }
.red {color:#ee0000; font-weight:500; }

li { list-style: none; margin: 0; padding: 0;}
.continaer { max-width: 1920px; margin: 0 auto; outline: 1px solid red; }

button, .click img { cursor: pointer; }
.top_btn { right:20px; bottom:20px; position: fixed; z-index: 9999; background-color: transparent; }

.mo { display: none; }

@media screen and (max-width: 768px) {
    .pc { display: none; }
    .mo { display: block; }
}

/* PC 
------------------------------------------------------------------------------------------------------------*/

.contents { position:relative; text-align:center; max-width: 750px; }
.contents img { width:100%; }

/*form */

.form1 {width:100%; padding: 3rem 2rem; background:#fff; border: 7px solid #000;}
.form1 dl {width:100%; display:table; margin-bottom:12px}
.form1 dl > * {display:table-cell; vertical-align:middle;}

.form1 dl dt {width:25%; font-size: 21px; font-weight: 700; color:#222; text-align: left;}
.form1 dl dd {width:75%}
.form1 dl dd input {width:100%; height:52px; padding:0 14px; font-family: inherit; font-size: 18px; color:#222; border-radius: 0; border:1px solid #b9a7e6; background:#fff}
.form1 dl dd input::placeholder {color:#888}

.form1 .agree {width:100%;  margin:16px 0 18px; text-align:center; clear:both}
.form1 .agree a {vertical-align: middle; font-size:13px; font-weight:500; color:#222}
.form1 .agree input[type="checkbox"] {vertical-align:middle; margin-right:4px}
.form1 .bnr {text-align:center}
.form1 .bnr button {display:block; width:100%; height:96px; background:#ff6b3b; color:#fff; font-size:44px; font-weight:700; letter-spacing:-1px}
.form1 .bnr button em {font-style:normal; color:#ffe35a}

.form1 dt :is(label, legend) { display: block; width: 100%; line-height: 52px; }

.form1 dl dd.sex_sel {font-size:0}
.form1 dl dd.sex_sel input { display: none; }
.form1 dl dd.sex_sel label { display: inline-flex; align-items: center; justify-content: center; width:49%; height:52px; border:1px solid #8a7a6a; background:#fff; font-size:18px; color:#333; cursor: pointer; }
.form1 dl dd.sex_sel label + label {margin-left:2%}
.form1 dl dd.sex_sel label:has(:checked) {background:#ff6b3b; border-color:#ff6b3b; color:#fff; font-weight:500}

.form1 dl dd.tel_wrap { display: flex; align-items: center; gap: 8px; width: 100%; }

.n_content {background: #ececee; margin-bottom: 24px; padding: 24px 20px}
.n_content .n_content_title {letter-spacing: -1px; margin-bottom: 12px}
.n_content .n_content_title p {font-size: 20px; font-weight: 700; color:#222; text-align: left; line-height: 1.4;}
.content_wrap {margin: 0 -5px}
.content_wrap:before,
.content_wrap:after {content:''; width: 100%; display: block}
.content_wrap:after {clear: both}
.content_wrap > div {width: 33.33%; float: left; padding: 0 5px; margin: 5px 0}
.content_wrap > div label {display: block; width: 100%; height: 44px; text-align: center; line-height: 42px; border: 1px solid #8a7a6a; background:#fff; font-size: 17px; color:#333; cursor: pointer; letter-spacing:-0.5px; white-space:nowrap; overflow:hidden}
.content_wrap > div input[type="checkbox"] {display: none}
.content_wrap > div input[type="checkbox"]:checked + label {background: #ff6b3b; border-color: #ff6b3b; color:#fff; font-weight: 500}

footer { width: 100%; padding:20px 10px 30px; background:#2b221b; text-align:center}
footer p {color:#eee; line-height:1.6; font-size:11px; font-weight:300; opacity:.7}

.fix_form_open {width: 100%; position: fixed; bottom: 0; left: 0; display: none;}
.fix_form_open button {display: block; width: 100%; height: 60px; line-height: 60px; background: #2b221b; color:#f3cf7a; font-size: 24px; font-family: inherit; font-weight: 600}

.fix_db_form {width: 100%; padding: 10px; background: #3b2d20; position: fixed; bottom:0; left: 0; z-index: 9}
.fix_db_form .close {background: #2b221b; color:#fff; position: absolute; top: -34px; left: 50%; margin-left: -75px; width: 150px; height: 34px; border-radius: 15px 15px 0 0; display: none;}
.fix_db_form h1 {text-align: center; line-height: 1; margin-bottom: 10px}
.fix_db_form .form_inner {max-width: 850px; margin: 0 auto}
.fix_db_form .form_inner form {display: grid; grid-template-columns: 17fr 10fr 18fr 27fr 28fr; column-gap: 8px; row-gap: 8px; align-items: center}
.fix_db_form .form_inner .input_form,
.fix_db_form .form_inner .input_form ul,
.fix_db_form .form_inner .bnr {display: contents}
.fix_db_form .form_inner .input_form ul:before,
.fix_db_form .form_inner .input_form ul:after {display: none}
.fix_db_form .form_inner .input_form ul li.n_name {order: 1}
.fix_db_form .form_inner .input_form ul li.n_age {order: 2}
.fix_db_form .form_inner .input_form ul li.n_sex {order: 3}
.fix_db_form .form_inner .input_form ul li.n_tel {order: 4}
.fix_db_form .form_inner .bnr button {order: 5}
.fix_db_form .form_inner .bnr .agree {order: 6}
.fix_db_form .form_inner .input_form ul li {display: block; width: auto; float: none; padding: 0; min-width: 0}
.fix_db_form .form_inner .input_form ul li p {display: none}
.fix_db_form .form_inner .input_form ul li input[type="text"],
.fix_db_form .form_inner .input_form ul li input[type="tel"] {width: 100%; height: 50px; padding: 0 8px; font-size: 16px; font-weight: 500; border-radius: 4px; text-align: center; background:#fff}
.fix_db_form .form_inner .input_form ul li input::placeholder {color: #888}
.fix_db_form .tel_wrap { display: flex; align-items: center; gap: 4px; color: white; }
.fix_db_form .sex_sel {display: flex}
.fix_db_form .sex_sel input { display: none; }
.fix_db_form .sex_sel label {flex: 1; min-width: 0; line-height: 50px; background: #fff; color: #555; font-size: 16px; font-weight: 500; white-space: nowrap; text-align: center; cursor: pointer;}
.fix_db_form .sex_sel label:first-child {border-radius: 4px 0 0 4px}
.fix_db_form .sex_sel label:last-child {border-radius: 0 4px 4px 0; border-left: 1px solid #ccc}
.fix_db_form .sex_sel label:has(:checked) {background: #f3cf7a; color: #2b221b; font-weight: 700}

.fix_db_form .form_inner .bnr button {min-width: 0; width: 100%; height: 50px; background: #ff6b3b; color: #fff; font-size: 22px; font-weight: 600; letter-spacing: -1px; line-height: 50px; border-radius: 4px; white-space: nowrap}
.fix_db_form .form_inner .bnr .agree {grid-column: 1 / -1; margin-top: 0; text-align: right; padding-top: 8px;}
.fix_db_form .form_inner .bnr .agree input {vertical-align: middle}
.fix_db_form .form_inner .bnr .agree a {color: #fff; font-size: 12px}

/* MOBILE
------------------------------------------------------------------------------------------------------------*/

.mobile_map .root_daum_roughmap {margin:0 auto; width:100%!important;}


/*form */

@media screen and (max-width: 768px) {
    .contents { min-width: 0; }

    .form1 { padding: 1.4rem 1.2rem; }
    .form1 dl dt {font-size: 17px}
    .form1 dl dd input {height: 46px; font-size: 15px; padding: 0 10px}
    .form1 dl dd.sex_sel label { height: 46px; }
    .form1 dt :is(label, legend) { line-height: 46px; }
    .form1 .bnr button {height: 68px; font-size: 32px}
    .n_content {padding: 16px 12px}
    .n_content .n_content_title p {font-size: 17px}
    .content_wrap > div {width: 50%}
    .content_wrap > div label {font-size: 15px}

    .fix_form_open {display: none !important}
    .fix_db_form {bottom: 0 !important; padding: 8px 8px calc(6px + env(safe-area-inset-bottom))}
    .fix_db_form h1 {margin-bottom: 6px}
    .fix_db_form h1 img {width: 60%; height: auto}
    .fix_db_form .close {display: none !important}
    .fix_db_form .form_inner form {grid-template-columns: repeat(12, 1fr); column-gap: 4px; row-gap: 5px}
    .fix_db_form .form_inner .input_form ul li.n_name {grid-column: span 4}
    .fix_db_form .form_inner .input_form ul li.n_age {grid-column: span 3}
    .fix_db_form .form_inner .input_form ul li.n_sex {grid-column: span 5}
    .fix_db_form .form_inner .input_form ul li.n_tel {grid-column: span 7}
    .fix_db_form .form_inner .bnr button {grid-column: span 5; height: 42px; font-size: 17px; letter-spacing: -0.5px; line-height: 42px}
    .fix_db_form .form_inner .input_form ul li input[type="text"],
    .fix_db_form .form_inner .input_form ul li input[type="tel"] {height: 42px; padding: 0 6px; font-size: 14px}
    .fix_db_form .sex_sel label { line-height: 42px; }
    .fix_db_form .form_inner .input_form ul li input::placeholder {font-size: 13px}
    .fix_db_form .sex_sel button {height: 42px; font-size: 14px}
    .fix_db_form .form_inner .bnr .agree a {font-size: 11px}

    .top_btn { bottom: 180px; }
    .top_btn img { width: 40px; }
}