@charset "UTF-8";

h2 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
}
.antimargin.spacer-20 { height: 20px; }

.aiicon {
    display: block;
    background-image: url('../image/crystal_clear_app_hardware.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 256px;
    aspect-ratio: 8 / 5;
    float: right;
}
#TopB {
    background-image: linear-gradient(rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .7) 100%), url('../image/ai-generated-8165301_1280.jpg');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    padding: 40px 0;
}

#TopB h2 {
    margin: 0;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
}
#TopB .bigger {
    font-size: 18px;
    font-weight: 500;
    padding-top: 40px;
    line-height: 24px;
}

.p-section .bigger {
    font-size: 18px;
    line-height: 30px;
}

#Section_1, #Section_2, #Section_3, #Section_4, #Section_5 {
    padding: 40px 0;
}
.dimbg {
    background-color: #00002a;
}
.proc-img {
    float: right;
    margin-left: 20px;
    max-width: 560px;
    width: 50%;
}

.red { color: #f00; }
.frm-dl {
    font-size: 18px;
    display: grid;
    grid-template-columns: 80px 1fr 80px 1fr;
    column-gap: 20px;
}
.frm-dl input[type="text"], .frm-dl input[type="tel"], .frm-dl input[type="email"], .frm-dl input[type="url"], .frm-dl textarea {
    border: none;
    border-bottom: 1px solid #aaa;
    background-color: #000;
    color: #fff;
    font-size: 18px;
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    width: 100%;
    box-sizing: border-box;
}
.frm-dl textarea { resize: vertical; }
.frm-dl dt, .frm-dl dd {
    padding-bottom: 10px;
}
.frm-dl dd {
    margin-left: 0;
}
.frm-dl dd.col3 {
    grid-column: span 3;
}

@media (max-width: 1024px) {
    .proc-img {
        float: none;
        margin: 0 auto 20px;
        width: unset;
        max-width: 100%;
        display: block;
    }    
}
@media (max-width: 767px) {
    .aiicon {
        float: none;
        margin: 0 auto 20px;
        max-width: 100%;
        display: block;
    }
    .frm-dl {
        grid-template-columns: 80px 1fr;
    }
    .frm-dl dd.col3 {
        grid-column: unset;
    }
}

.cf-turnstile {
    text-align: center;
}
.frm .submit {
    border: none;
    display: block;
    margin: 10px auto;
    padding: 10px 20px;
    line-height: 20px;
    font-size: 18px;
    background-color: #00a;
    color: #fff;
    cursor: pointer;
}
.frm .submit:disabled {
    background-color: #555;
    color: #aaa;
    cursor: not-allowed;
}

.btn-link:link, .btn-link:visited, .btn-link:active {
    color: #0ff;
    background-color: #000;
    display: inline-block;
    line-height: 20px;
    padding: 9px 19px;
    border: 1px solid #0ff;
    border-radius: 30px;
    margin: 5px 10px;
}
.btn-link:hover {
    color: #000;
    background-color: #0ff;
}

h2 .gd {
    background: linear-gradient(90deg,rgba(0, 255, 255, 1) 0%, rgba(255, 0, 255, 1) 100%);
    background-size: 100% 4px;
    background-position: center bottom;
    background-repeat: no-repeat;
}