@charset "utf-8";
@import url("reset.css");
@import url("font.css");
@import url("style.css");


/*----------------------------------------
common
------------------------------------------*/

html, body {width:100%; min-width: 320px; font-family: 'Montserrat', sans-serif; font-size: var(--font16); font-weight: var(--fontM); line-height: 1.2; letter-spacing: -0.3px; color:var(--black); word-break: keep-all; scroll-behavior: smooth; transition:all 0.5s;}

::-webkit-scrollbar{width:6px; height: 6px; background: rgba(30, 30, 30, 0.05);}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{display: block; height: 6px}
::-webkit-scrollbar-track{background: rgba(30, 30, 30, 0.05); -webkit-border-radius:3px; border-radius: 3px; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .15)}
::-webkit-scrollbar-thumb{height: 30%; width:6px; background: rgba(0, 0, 0, .15); -webkit-border-radius: 3px; border-radius: 3px ; -webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, .1)}

:root {
    --black: #0e0e0e;
    --black_op: rgba(14,14,14,0.1);
    --white: #fff;
    --maincolor: #6F63CE;
    --maincolor_op: rgba(243,236,255,0.56);
    --subcolor: #A694F9;
    --bgcolor: #e4e5e7;

    --font15: 15px;
    --font16: 16px;
    --font24: 24px;
    --font32: 32px;
    --font56: 56px;
    --font80: 80px;
    --font84: 84px;
    --font112: 112px;

    --fontL:300;
    --fontR:400;
    --fontM:500;
    --fontSB:600;
    --fontB: 700;
    --fontEB: 800;

    --boxshadow: 1px 1px 2px rgba(0,0,0,0.24),inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(255,255,255,0.8);
}

@media (max-width: 1240px) {
    :root {
        --font15: 14px;
        --font16: 14px;
        --font24: 18px;
        --font32: 20px;
        --font56: 32px;
        --font80: 48px;
        --font84: 52px;
        --font112: 64px;
    }
}
button {text-align: center; }
img {vertical-align: middle}
.btn_primary {display:inline-flex; min-width:216px; color: var(--black); flex-shrink: 0; background:rgba(166,148,249,0.40); border-radius: 32px; height:64px; align-items: center; justify-content: space-between;  padding:0 30px; font-weight: var(--fontM); font-size:var(--font16); box-shadow: var(--boxshadow);backdrop-filter: blur(4px);}
.btn_primary i {margin-left:18px; transform: translateY(-2px); transition: 0.3s;}
.btn_primary:hover {background:rgba(166,148,249,0.64);}
.btn_primary:hover i { animation: arrow_r 1s ease-out infinite;}
@keyframes arrow_r {
    0%{ transform: translateY(-2px);}
    50% { transform: translate(3px, -2px);}
    100% { transform: translateY(-2px);}
}

.btn_icon {display:inline-block; color: var(--black); background:rgba(14,14,14,0.10); border-radius: 50%; width:64px; height:64px; line-height: 64px; box-shadow: var(--boxshadow); text-align: center; backdrop-filter: blur(4px);}
.btn_icon:hover { background:rgba(14,14,14,0.24); transition: all 0.2s;}

@media (max-width: 1024px) {
    .btn_primary {height:48px; min-width:176px; padding:0 24px;}
    .btn_icon {width:48px; height:48px; line-height: 48px;}
    .btn_icon img {height:20px}
}


.opt06 {opacity: 0.68;}

#modalBg {background-color: rgba(0,0,0,0.4); position: fixed; top: 0; width: 100%; height: 100%; align-items: center; justify-content: center; display: none;}
.modal-box {display:none; position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); width:90%; max-width:440px; max-height:88%;  background:#fff; box-shadow:0 0 5px 0 rgba(0, 0, 0, 0.3); z-index:7000;  border-radius:16px; color:#171622;}
.modal-box.large{max-width:780px;}
.modal-box ::-webkit-scrollbar{width:5px; height: 5px; background:#eeeff2; border-radius:0 4px 4px 0}
.modal-box ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment{display:block; height:0px}
.modal-box ::-webkit-scrollbar-track{background: #efefef; -webkit-border-radius:10px; border-radius:10px;}
.modal-box ::-webkit-scrollbar-thumb{height:30%; width:5px; background:rgba(0, 0, 0, .2); -webkit-border-radius:10px; border-radius:10px ;}
.modal-body {width: 100%; height: auto; padding: 20px;}
.modal-foot {position: relative; width: 100%; padding: 12px 20px; background-color: #00C6FC; border-radius: 0 0 16px 16px;}
.modal-foot a {display: block; color: #fff; text-align: center;}