* {margin:0; padding:0; box-sizing:border-box}
body {width:100%; font-family: 'Inter', 'Noto Sans KR', sans-serif; font-size:16px; font-weight: 400}
a {text-decoration:none; color:inherit}
ul,ol,dl {list-style:none}
input[type="text"],
input[type="number"],
input[type="tel"]  {-webkit-appearance:none; -moz-appearance:none; appearance:none; outline:none; border:0; padding:0 10px; font-family: inherit; font-size: inherit}
button {background:transparent; border:0; outline:0; cursor:pointer; font-family: inherit; font-size: inherit;}
img {border:0; vertical-align:middle}
iframe {width:0; height:0; visibility:hidden; position:absolute; top:0; left:0}

#icletime {width:100%; max-width:750px; margin:0 auto; position:relative}
#icletime > img {width:100%}

.cf {width: 100%; padding: 0 5%; margin-top: -10%}
.cf img {width: 100%}

/* main_db */
.db {width:100%;  background:url('../image/bg.png')  ; background-size: 100% auto; background-repeat: repeat-y;background-position: top center;height:100%;   }
#main_db {width:90%;   background: #FFF; height:100%; margin:0 auto;   }
#main_db dl {width: 100%; display: table; margin-bottom:10px}
#main_db dl > * {display:table-cell; vertical-align:middle}
#main_db dl dt {width:30%; font-size: 21px; font-weight: 500; line-height:30px;}
#main_db dl dd {width:70%}
#main_db dl dd input {width: 100%; height: 40px; padding: 10px; outline: none;border: 1px solid #aaa; font-family: inherit; font-size: 18px;  border-radius:10px;}
#main_db dl dd .s_btn {width:100%; height:35px; line-height:35px; text-align:center}
#main_db dl dd .s_btn > div {width:50%; height:100%; float:left; background:#fff; cursor:pointer}
#main_db dl dd .s_btn > div.on {background:#ff5860; color:#FFF; border-radius:20px;}


      .content_wrap {
            max-width: 500px;
            margin: 0 auto;
        }
i
        .content_wrap > div {
            margin-bottom: 12px;
        }



      .content_wrap2 {
            max-width: 500px;
            margin: 50px auto;
        }

        .content_wrap2 > div {
            margin-bottom: 12px;
        }


        /* 기본 체크박스 숨기기 */
        input[type="checkbox"] {
            display: none;
        }

        /* 라벨 스타일 */
        label {
            display: block;
            padding: 6px 10px;
            background-color: white;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
            position: relative;
            font-size: 16px;
            color: #000;
            line-height: 1.4;
        }

        /* 호버 효과 */
        label:hover {
            border-color: #ff6b6b;
            background-color: #fef7f7;
        }

        /* 선택된 상태 */
        input[type="checkbox"]:checked + label {
            background-color: #ffe5e5;
            border-color: #ff6b6b;

        }

        /* 체크박스 커스텀 디자인 - 기본상태 (원형) */
        label::after {
            content: '';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            border: 2px solid #e0e0e0;
            border-radius: 50%;
            background-color: white;
            transition: all 0.2s ease;
        }

        /* 선택된 체크박스 - 체크 표시 */
        input[type="checkbox"]:checked + label::after {
            content: '✓';
            border-color: #ff6b6b;
            background-color: #ff6b6b;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: bold;
            border-radius: 50%;
        }

        /* 호버 시 체크박스 효과 */
        label:hover::after {
            border-color: #ff6b6b;
        }

        /* 체크박스에 포커스가 있을 때 */
        input[type="checkbox"]:focus + label {
            outline: 2px solid #ff6b6b;
            outline-offset: 2px;
        }

#main_db .agree {margin: 20px 0; text-align: center}
#main_db .agree a {font-size: 13px; vertical-align: middle}
#main_db .agree span { background:#5b5b5b; color:#FFF;  padding:2px;}
#main_db .agree .inputChk {vertical-align: middle; display:inline-block}
#main_db .bnr {text-align: center}
#main_db .bnr img {width: 100%}

/* 메인DB 희망키 선택 영역 */
.n_content { padding: 5%; border: 1px solid #fff;  border-radius: 10px;  background: rgba(255, 255, 255, 0.6)}
.n_content .n_content_title {letter-spacing: -1px; margin-bottom: 15px}
.n_content .n_content_title p {font-size: 21px; font-weight: 500}
.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: 100%; float: left; padding: 0 5px; margin: 5px 0; height:50px; font-size: 14px; }
.content_wrap > div label {display: block; width: 100%; height: 50px; margin-left:5px; line-height: 38px; border: 1px solid #999; border-radius: 7px; font-size: 16px; cursor: pointer}

.incall a {display:block}
.incall a img {width:100%}

.ppl a {display:block}
.ppl a img {width:100%; max-width:750px;}

#footer {padding:20px 10px; background:#444; text-align:center}
#footer p {color:#eee; line-height:1.5; font-size:11px; font-weight:300; opacity:.6}

/* 하단 타이머 디비창 */
@font-face {     font-family: 'DS-DIGIB';    font-style: normal;    font-weight: 100;    src: url(../../comm/css/fonts/DS-DIGIB.TTF) format('truetype') }

.quick_box {  position: fixed;  bottom: 0; left: 0; right: 0; width: 100%; padding:0px;margin-top: 0; height:150px; background:#100817 ;border-top:2px solid #e62490;}
.quick_box .quick_title { display:none;}
.quick_bn {  margin:0px; width: 100%;   text-align: center}
.quick_bn h4 { display:none; }

.quick_bn .time_count { margin:0px;padding:10px; width:100%; }
.quick_bn .time_count .time_box { margin-top:-59px;padding: 0px; border-radius: 10px}
.quick_bn .time_count .time_box span.time { font-family: 'DS-DIGIB'; font-size: 32px; line-height: 32px;  width: 50px; padding: 7px 0 ;  background: #000000;   border-radius: 5px; color: #fff; font-weight: 700;   display: inline-block; border:1px solid #332a56;}
.quick_bn .time_count .time_box span.col {font-size: 24px; color:#fff;line-height: 42px;;vertical-align: top; width:10px; text-shadow: 1px 0 #000, 0 1px #000, -1px 0 #000, 0 -1px #000; display:inline-block; }
#countdown {position:absolute; right:10px;}

.quick_bn .time_count .progress_bar { height: 10px; width:100%; margin-top: 60px; background:#ffe199; border-radius: 30px; overflow: hidden}
.quick_bn .time_count .progress_bar .bar_container { width: 100%; height: 100%;border-radius: 1px;  background: #ec27cf;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ff0019,   #ec27cf);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ff0019,  #ec27cf); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}

 

.fix_db_form {width:100%; padding: 0px; }

.fix_db_form h1 img {width:80%; max-width:400px; margin-bottom:5px;}
.fix_db_form .form_inner {  margin: 0 auto}
.fix_db_form .form_inner ul {display: flex; align-items: center}
.fix_db_form .form_inner ul li.n_name {width: 22%}
.fix_db_form .form_inner ul li.n_age {width: 15%}
.fix_db_form .form_inner ul li.n_tel {width: 35%}
.fix_db_form .form_inner ul li.n_btn {width: 28%}
.fix_db_form .form_inner ul li {padding: 0 2px;margin-bottom: 0px}
.fix_db_form .form_inner ul li input {width: 100%; height: 40px;   font-family: inherit; font-size: 14px; padding: 0 10px; text-align: center; outline: none; border: 0}
.fix_db_form .form_inner ul li button {width: 100%;padding: 8px;color:#f6ff00;font-size: 20px;  font-weight: 700;letter-spacing: -1px; background: #f90d53;  border-radius: 0px; border:0px;}
.fix_db_form .form_inner button:after {content:'가격확인';    }
.fix_db_form .form_inner .agree {margin-top:0px; margin-bottom:50px ;}
.fix_db_form .form_inner .agree input {vertical-align: middle}
.fix_db_form .form_inner .agree a { display:inline-block;font-size: 12px; color:#FFFFFF; letter-spacing: -0.5px;   vertical-align: middle}

@media screen and (max-width:500px) {
    #main_db dl dt {font-size: 16px}
    /* 하단 픽스 디비창 */

    .fix_db_form h1 {margin-bottom: 5px}
    .fix_db_form h1 img {width: 70%}
    .fix_db_form .form_inner ul li input {height: 40px; padding: 0; font-size: 15px}
    .fix_db_form .form_inner .bnr button {height: 40px; font-size: 16px; line-height: 40px}
    .fix_db_form .form_inner .agree {text-align: center}
    .fix_db_form .form_inner .agree a {font-size: 11px}

    .n_content {padding: 3%}
    .n_content .n_content_title p {font-size: 18px}
    .content_wrap > div label {font-size: 16px; letter-spacing:-2;}

}

@media screen and (min-width: 768px) {

    .content_wrap,
    .content_wrap2 {
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .content_wrap {
        margin-bottom: 40px;
    }

    .content_wrap2 {
        margin-top: 0;
    }
}