@charset "utf-8";

.inner {margin: 0 7vw; width: calc(100% - 14vw);}

.primary {color: var(--primary);}
.secondary {color: var(--secondary);}
.gray {color: var(--text2);}
.white {color: #fff;}

.bg-main {background-color: var(--main);}
.bg {background-color: var(--bg);}

.btn-area {width: 100%; margin-top: 40px; display: flex; align-items: center; justify-content: center; column-gap: 20px;}

.btn-default {width: 152px; height: 45px; display: flex; align-items: center; justify-content: center; column-gap: 10px; border: 1px solid var(--bg); border-radius: 100px; transition: all 0.3s; color: var(--text1); font-size: var(--font-18); font-weight: 500;}
.btn-default span {color: var(--text1); font-size: var(--font-18); font-weight: 500;}
.btn-default svg {width: 24px; height: 24px;}
.btn-default:hover {background-color: var(--bg);}
.btn-default:hover span {color: var(--text_w);}
.btn-default:hover svg path {fill: var(--text_w);}
.btn-circle {width: 45px; height: 45px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--primary); }

.btn-default-w {border: 1px solid var(--text_w); background-color: rgba(255,255,255,.1); backdrop-filter: blur(20px);}
.btn-default-w span {color: var(--text_w);}
.btn-default-w svg path {fill: var(--text_w);}
.btn-default-w:hover {background-color: var(--primary); border: 1px solid var(--primary);}

.bg-w:hover  {background-color: var(--primary);}
.bg-w:hover span {color: var(--text_w);}
.bg-w:hover svg path {fill: var(--text_w);}

.bg_black {background-color: var(--bg); border: 1px solid var(--bg); color: #fff;}
.bg_black span {color: #fff;}
.bg_black span svg path {fill: #fff;}

.fa-heart {color:#ff0000}
.fa-lock {display:inline-block;width:16px;font-size:10px;color:#4f818c;background:#cbe3e8;text-align:center;border-radius:2px;font-size:12px;border:1px solid #cbe3e8;vertical-align:middle}
.new_icon {display:inline-block;font-size:14px;color: var(--primary); font-family: "Play", sans-serif;font-weight:bold;}
.hot_icon {display:inline-block;font-size:14px;color: var(--primary); font-family: "Play", sans-serif;}
.fa-caret-right {color:#bbb}
.fa-download {display:inline-block;font-size:14px;color: var(--primary); font-family: "Play", sans-serif;}
.fa-link {display:inline-block;font-size:14px;color: var(--primary); font-family: "Play", sans-serif;}

/* input */
.input-wrap {display: flex; flex-direction: column; row-gap: 20px;}
.input-wrap .input-item-box > span {position: relative; padding-bottom: 4px;}
.input-wrap .input-item-box .input-item {width: 100%;}
.input-wrap .input-item-box .input-item input[type="text"],
.input-wrap .input-item-box .input-item input[type="password"] {width:100%; padding: 10px 12px; outline: none; border: 1px solid var(--line); border-radius: 0; box-shadow: none;}
.input-wrap .input-item-box .input-item input[type="text"]:focus,
.input-wrap .input-item-box .input-item input[type="password"]:focus {border: 1px solid var(--text1);  transition: all 0.3s;}
.input-wrap .input-item-box .input-item input[readonly] {background-color: var(--depth2);}
.input-wrap .input-item-box .input-item input[readonly]:focus {border: 1px solid var(--line); background-color: var(--depth2); pointer-events: none;background-color: var(--bg2); cursor: default;}
.input-wrap .input-item-box .input-item input[readonly]::placeholder {color: var(--text1);}

.checkbox-item input[type="checkbox"] {display:none;}
.checkbox-item input[type="checkbox"] + label{position: relative; cursor:pointer; color: var(--text1) !important; padding-left: 24px !important;}
.checkbox-item input[type="checkbox"] + label:hover {color: var(--text2) !important; transition: all 0.3s;}
.checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; background-color: var(--text_w); width:16px; height:16px; border:1px solid var(--line); left:0; top: 50%; transform: translate(0, -50%);}
.checkbox-item input[type="checkbox"]:checked + label:before{ content:""; background-color: var(--text1); border: 1px solid var(--text1); background-image: url('../img/chk.png'); background-repeat: no-repeat; background-position: 50%;}


/* 반응형 */
@media screen and (max-width: 1440px) {
    .inner {width: calc(100% - 40px); margin: 0 20px;}
}
@media screen and (max-width: 768px) {
    
    .tit-area .btn-default {width: 45px;}
    .tit-area .btn-default span {display: none;}
}

@media screen and (max-width: 500px) {
    .inner {width: calc(100% - 32px); margin: 0 16px;}

    .tit-area .btn-default {width: 38px;}

    .btn-default {width: 130px; height: 38px; flex-shrink: 0;}
    .btn-circle {width: 38px; height: 38px; flex-shrink: 0;}
    .btn-default svg,
    .btn-circle svg {width: 22px; height: 22px;}
}