@charset "utf-8";

/*default*/
.pctitle .hidebr{display:none;}

/*font*/
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:100;
    src: url(../fonts/Pretendard-Thin.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:200;
    src: url(../fonts/Pretendard-ExtraLight.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:300;
    src: url(../fonts/Pretendard-Light.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:400;
    src: url(../fonts/Pretendard-Regular.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:500;
    src: url(../fonts/Pretendard-Medium.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:600;
    src: url(../fonts/Pretendard-SemiBold.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:700;
    src: url(../fonts/Pretendard-Bold.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:800;
    src: url(../fonts/Pretendard-ExtraBold.woff);
}
@font-face {
    font-family: 'Pretendard';
    font-style:normal;
    font-weight:900;
    src: url(../fonts/Pretendard-Black.woff);
}

/*color*/
:root {
    --wh : #fff;
    --n50 : #f4f4f4;
    --n100 : #e9e9ea;
    --n200 : #d9d9dd;
    --n300 : #bebeb4;
    --n400 : #a0a0a9;
    --n500 : #5f5f68;
    --n600 : #393949;
    --n700 : #202133;
    --bk : #000;

    --p50 : #EBF0F7;
    --p300 : #3968AB;
}


/* 반응형_width */
@media screen and (max-width:1300px) {
    .pctitle .hidebr{
        display:block !important;
    }
    .pctitle .onbr {
        display:none !important;
    }
}
@media screen and (max-width:1000px) {
    .pctitle {
        display:none !important;
    }
    .mctt {
        margin-right:0 !important;
    }
}
@media screen and (max-width:540px) {
    .button_wrap{
        position:fixed;
        bottom:0;
        width:100%;
        left:0;
        padding:40px 20px 20px 20px;
        background: rgb(255,255,255);
        background: linear-gradient(0deg, rgba(255,255,255,1) 78%, rgba(255,255,255,0) 100%);
    }
}
/* 반응형_height */
@media screen and (max-height:700px) {
    .service:has(.button_wrap) .main{
        margin-bottom:100px !important;
    }
    .service:has(.button_wrap.double) .main{
        margin-bottom:150px !important;
    }
}

/* 모바일 영역 스크롤 및 스크롤 감추기*/
.scroll {
    overflow-y: scroll !important;
}
.scroll::-webkit-scrollbar {
    display: none;
}

/* 컴포넌트 */
/* input */
.example {
    font-size:15px;
    padding:10px;
    width:230px;
    background-color:var(--n200);
}
.input_example {
    display:flex;
    flex-direction:column;
    margin-bottom:20px;
}
.input_example label {
    font-size:14px;
    color:var(--n500);
}
.input_example input {
    font-size:18px;
    padding:12px 0;
    border-bottom:1.5px solid var(--n200);
    font-weight:500;
    transition: border 0.5s;
    color:var(--n600);
}
.input_example input::placeholder {
    color:var(--n400);
    font-weight:400;
}
.input_example input:focus {
    border-bottom:1.5px solid var(--p300);
    transition: border 0.5s;
    outline:none;
}
.input_comment {
    display:none;
    text-align:right;
    margin-top:10px;
    font-size:14px;
    color:var(--n500);
}
.input_explanation{
    margin-top:12px;
    padding:20px;
    background-color:#f8f8f8;
    border-radius:8px;
    color:var(--n500);
    display:none;
    align-items:flex-start;
}
.input_explanation img {
    margin-top:2px;
    padding-right:10px;
}
.input_explanation p {
    margin-bottom:0;
    width:90%;
    font-size:14px;
}
.input_example input:focus + .input_comment {
    display:block;
}
.input_example input:focus ~ .input_explanation {
    display:flex;
}

/* 체크박스 */
input[type='checkbox']{
    display: none;
}
.checkbox_label{
    display: flex;
    align-items: center;
    cursor:pointer ;
}
.checkbox_text {
    font-size:16px;
    color:var(--n500);
}
.checkbox_icon::before{
    content:'';
    display: block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    border: 1px solid var(--n200);
    border-radius:4px;
    position: relative;
    cursor: pointer;
}
  .checkbox_label input:checked + .checkbox_icon::before{
    background: url(../img/ico_check.png) var(--p300)
      no-repeat center;;
    border:1px solid var(--p300);
}

/* 라디오(체크) */
.radio_check input[type='radio']{
    display: none;
}
.radio_check li {
    margin:20px 0;
}
.radio_label{
    display: flex;
    align-items: center;
    justify-content:space-between;
    flex-direction:row-reverse;
    cursor:pointer ;
}
.radio_text {
    font-size:18px;
    color:var(--n500);
    font-weight:400;
}
.radio_icon::before{
    content:'';
    display: block;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    background-color: transparent;
    position: relative;
    cursor: pointer;
}
.radio_label input:checked + .radio_icon::before{
    background: url(../img/ico_check_colored.png)no-repeat center;
    border:none;
}
.radio_label input:checked + .radio_icon + .radio_text {
    font-weight:600;
    color:var(--p300);
}

/* 버튼 */
button {
    border:none;
    cursor:pointer;
}
.button_wrap {
    padding-top:20px;
}
.button_wrap.double button:first-child{
    margin-bottom:12px;
}
button.fill {
    background-color:var(--p300);
    font-size:18px;
    font-weight:700;
    width:100%;
    padding:20px 0;
    color:var(--wh);
    line-height:100%;
    border-radius:8px;
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items: center;
}
button.fill.line {
    background:var(--wh);
    border:1px solid var(--p300);
    color:var(--p300);
}
button.fill.line.gray {
    background:var(--wh);
    border:1px solid var(--n300);
    color:var(--n500);
}
button.fill img {
    margin-right:8px;
}
button.fill.off{
    background-color:var(--n100);
    color:var(--n500);
}
button.fill.kakao {
    background-color:#fae100;
    color:var(--n700);
}
button.mediumBtn {
    padding:16px 0;
    font-size:16px;
    font-weight:500;
}
button.smallBtn{
    padding:15px;
    font-size:14px;
    border-radius:8px;
    font-weight:600;
}
.roundLine {
    border:1px solid var(--p300);
    padding:10px 16px;
    width:fit-content;
    line-height:100%;
    border-radius:999px;
    color:var(--p300);
    transition: border 0.5s;
}
.roundLineGray {
    border:1px solid var(--n300);
    padding:10px 16px;
    width:fit-content;
    line-height:100%;
    border-radius:999px;
    color:var(--n500);
    transition: border 0.5s;
}
.roundLineGray:hover {
    border:1px solid var(--p300);
    color:var(--p300);
    transition: border 0.5s;
}

.btnGroup {
    margin-top:12px;
}
.btnGroup button {
    margin-right:3px;
}

/* fix되지 않는 버튼 */
.button_wrapB {
    max-width:540px;
}
.button_wrapB button {
    width:100%;
}
/* fix되지 않는 버튼이 두개일때 */
.button_wrapB.double {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
}
.button_wrapB.double button{
    width:48.5%;
}

/* 광고배너 */
.adbnr {
    width:100%;
    display: block;
    border-radius:12px;
    padding:24px 20px;
    background:var(--n50);
    position: relative;
}
.adbnr p {
    font-size:12px;
    color:var(--n500);
    margin-bottom:5px;
}
.adbnr strong {
    letter-spacing:-0.5px;
    font-size:16px;
}
.adbnr img {
    position: absolute;
    top:8px;
    right:8px;
}
.adbnr span {
    position:absolute;
    bottom:8px;
    right:8px;
    border-radius:999px;
    padding:3px 8px;
    background:#5F5F6863;
    color:#fff;
    font-size:9px;
    font-weight:600;
    letter-spacing: 0.5px;
}