@charset "utf-8";

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */

/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}

body{ color: #222;  font-family: 'Pretendard', sans-serif; font-weight:400; font-size: 16px; letter-spacing: -0.04em; }
section{ display:block; }
a{ color:inherit; }

.inner{ width:1200px; margin:0 auto; }

.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }

@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0 10px; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */

.main{ position: relative; overflow: hidden; }

.mainTitle { font-family: 'Paperlogy'; font-size: 32px; font-weight: 700; line-height: 1.5em; color: #091D35; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10) }
.mainContent { font-family: 'Paperlogy'; color: #222; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10); margin-top: 8px; font-size: 20px; font-weight: 700; line-height: 1.5em; }
.mainBigTitle{ font-family: 'Paperlogy'; font-size: 32px; text-align: center; line-height: 1.3em; font-weight: 600; color: #222; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10); }
.mainBigTitle .blue{ color: #7F76FD; }



@media screen and (max-width: 650px) { 
    .mainTitle{ font-size: 20px; }
    .mainContent{ font-size: 14px; }

    .mainBigTitle{ font-size: 20px; }

    #smtg_logo_div img{ width: 100px !important; }
}

/* .mainHeader */
.mainHeader{ line-height: 1.5em; font-family: 'Paperlogy'; font-size: 34px; font-weight: 700; background-color: #000; color: #fff; text-align: center; padding: 20px 0; }
.mainHeader span{ display: inline-block; margin-right: 30px; }
.mainHeader .moBr{ display: none; }
@media screen and (max-width: 1250px) { 
    .mainHeader{ font-size: 20px; }
}
@media screen and (max-width: 650px) { 
    .mainHeader{ font-size: 18px; }
    .mainHeader span{ margin-right: 0; }
    .mainHeader .moBr{ display: inline-block; }
}
@media screen and (max-width: 500px) {
    .mainHeader{ font-size: 14px; }
}

/* .main .okSection */
.main .okSection{ background-image: url('../img/main/okSection/background.png'); background-size: cover; background-repeat: no-repeat; background-position: center; display: flex; align-items: center; justify-content: center; padding: 170px 0; min-height: 100vh; background-color: #CBC3FF;  }
.main .okSection .halfBox{ display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.main .okSection .halfBox .leftBox{ flex-shrink: 0; flex-grow: 1; }
.main .okSection .halfBox .leftBox .icon{ margin-top: 21px; max-width: 100%; width: 400px; }
.main .okSection .halfBox .rightBox .itemList{ max-width: 700px; margin-top: -13px; display: flex; flex-wrap: wrap; width: calc(100% + 26px); margin-left: -13px; }
.main .okSection .halfBox .rightBox .itemList > li{ padding: 13px; width: calc(100% / 2); }
.main .okSection .halfBox .rightBox .itemList > li:nth-child(2n){ position: relative; top: 80px; } 
.main .okSection .halfBox .rightBox .itemList .item{ height: 100%; font-family: 'Paperlogy'; padding: 49px 20px 40px 20px; background-color: #7F76FD; box-shadow: 5px 8px 8px 0px rgba(0, 0, 0, 0.10); color: #fff; border-radius: 10px;  gap: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.main .okSection .halfBox .rightBox .itemList .item.bg2{ background-color: #6057E4; }
.main .okSection .halfBox .rightBox .itemList .item.bg3{ background-color: #4F46CD; }
.main .okSection .halfBox .rightBox .itemList .item.bg4{ background-color: #4A449D; }
.main .okSection .halfBox .rightBox .itemList .item .icon{ width: 116px; max-width: 100%; }
.main .okSection .halfBox .rightBox .itemList .item .text{ line-height: 1.5em; font-weight: 700; font-size: 22px; }


@media screen and (max-width: 1250px) { 
    .main .okSection .halfBox .leftBox .icon{ width: 35vw; }
    .main .okSection .halfBox .rightBox .itemList .item{ height: 26vw; gap: 1vw; }
    .main .okSection .halfBox .rightBox .itemList .item .icon{ width: 9vw; }
    .main .okSection .halfBox .rightBox .itemList .item .text{ font-size: 1.8vw; }
}
@media screen and (max-width: 900px) { 
    .main .okSection{ min-height: unset; padding: 100px 0; }
    .main .okSection .halfBox{ flex-direction: column; }
    .main .okSection .halfBox .leftBox{ width: 100%; text-align: center; }
    .main .okSection .halfBox .leftBox .icon{ width: 314px; }
    .main .okSection .halfBox .rightBox{ width: 100%; }
    .main .okSection .halfBox .rightBox .itemList{ width: 100%; max-width: unset; }
    .main .okSection .halfBox .rightBox .itemList .item{ height: 36vw; }
    .main .okSection .halfBox .rightBox .itemList .item .icon{ width: 100px; }
    .main .okSection .halfBox .rightBox .itemList .item .text{ font-size: 18px; }
}
@media screen and (max-width: 650px) { 
    .main .okSection{ padding: 50px 0 120px 0; }
    .main .okSection .halfBox .leftBox .icon{ max-width: 80%; }

    .main .okSection .halfBox .rightBox .itemList{ width: calc(100% + 2vw); margin-left: -1vw; margin-top: 0; }
    .main .okSection .halfBox .rightBox .itemList > li{ padding: 1vw; }
    .main .okSection .halfBox .rightBox .itemList .item{ gap: 3vw; height: 43vw; padding: 4vw; }
    .main .okSection .halfBox .rightBox .itemList .item .icon{ width: 15vw; }
    .main .okSection .halfBox .rightBox .itemList .item .text{ font-size: 3vw; }
}

/* .main .useSection */
.main .useSection{ padding: 64px 0; }
.main .useSection .halfBox{ display: flex; justify-content: space-between; gap: 20px; }
.main .useSection .mainContent{ color: #7f7f7f; }
.main .useSection .itemList{ display: flex; flex-wrap: wrap;  width: 100%; max-width: 750px; }
.main .useSection .itemList > li{ width: calc(100% / 3); padding: 6px; }
.main .useSection .itemList .item{ height: 100%;  border-radius: 4px; color: #091D35; font-family: 'Paperlogy'; font-size: 20px; font-weight: 700; text-align: center; padding: 27px 10px; background-color: #F4F6F5; }
.main .useSection .itemList .item .icon{ margin: 0 auto; width: 76px; height: 68px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.main .useSection .itemList .item .icon.icon1{ background-image: url('../img/main/useSection/icon1.png'); }
.main .useSection .itemList .item .icon.icon2{ background-image: url('../img/main/useSection/icon2.png'); }
.main .useSection .itemList .item .icon.icon3{ background-image: url('../img/main/useSection/icon3.png'); }
.main .useSection .itemList .item .icon.icon4{ background-image: url('../img/main/useSection/icon4.png'); }
.main .useSection .itemList .item .icon.icon5{ background-image: url('../img/main/useSection/icon5.png'); }
.main .useSection .itemList .item .icon.icon6{ background-image: url('../img/main/useSection/icon6.png'); }
.main .useSection .itemList .item .text{ word-break: keep-all; margin-top: 10px; font-size: 20px; }
.main .useSection .itemList .item .moBr{ display: none; }

@media screen and (max-width: 1250px) { 
    .main .useSection .itemList .item .text{ font-size: 16px; }
}
@media screen and (max-width: 1100px) { 
    .main .useSection .itemList{ max-width: 600px; }
}
@media screen and (max-width: 900px) { 
    .main .useSection .mainTitle{ text-align: center; }
    .main .useSection .mainTitle br{ display: none; }
    .main .useSection .mainContent{ text-align: center; }
    .main .useSection .halfBox{ flex-direction: column; }
    .main .useSection .itemList{ max-width: unset; }
}
@media screen and (max-width: 650px) { 
    .main .useSection .mainTitle br{ display: none; }
    .main .useSection .itemList > li{ width: calc(100% / 2); }
    .main .useSection .itemList .item .icon{ width: 50px; height: 40px; }
    .main .useSection .itemList .item .moBr{ display: inline-block; }

}

/* .main .stepSection */
.main .stepSection{ padding: 100px 0; background-color: #E2F0FF; }
.main .stepSection .itemList{ margin-top: 24px; display: flex; flex-wrap: wrap; width: calc(100% + 28px); margin-left: -14px; }
.main .stepSection .itemList > li{ width: calc(100% / 4); padding: 14px; }
.main .stepSection .itemList .item{ display: flex; flex-direction: column; font-family: 'Paperlogy'; padding: 32px 22px; height: 100%; background-color: #EAEFFF; border: 1px solid #6057E4; border-radius: 10px; }
.main .stepSection .itemList .item .number{ font-weight: 700; color: #4A449D; font-size: 20px; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10); }
.main .stepSection .itemList .item .t1{ margin-top: 18px; font-size: 22px; line-height: 1.5em; font-weight: 700; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10); }
.main .stepSection .itemList .item .t2{ flex-grow: 1; margin-top: 40px; font-size: 18px; line-height: 1.5em; font-weight: 700; text-shadow: 3px 5px 4px rgba(0, 0, 0, 0.10); }
.main .stepSection .itemList .item .icon{ margin-top: 20px; width: 75px; }

@media screen and (max-width: 1250px) { 
    .main .stepSection .itemList{ width: calc(100% + 20px); margin-left: -10px; }
    .main .stepSection .itemList > li{ padding: 10px; }
    .main .stepSection .itemList .item .t1{ font-size: 18px; }
    .main .stepSection .itemList .item .t2{ font-size: 16px; word-break: keep-all; }
    .main .stepSection .itemList .item .t2 br{ display: none; }

    .main .stepSection .itemList .item .icon{ width: 50px; }
}
@media screen and (max-width: 900px) { 
    .main .stepSection .itemList{ text-align: center; }
    .main .stepSection .itemList > li{ width: calc(100% / 2); }
    .main .stepSection .itemList .item .icon{ display: block; margin: 0 auto; margin-top: 20px; }
}
@media screen and (max-width: 650px) { 
    .main .stepSection{ padding: 50px 0; }
    .main .stepSection .itemList{ max-width: 250px; width: 100%; max-width: 80%; margin: 0 auto; justify-content: center; margin-top: 40px; }
    .main .stepSection .itemList > li{ width: 100%; }
    .main .stepSection .itemList .item{  padding: 12px; }
    .main .stepSection .itemList .item .t2{ margin-top:20px; font-size: 14px; }
    .main .stepSection .itemList .item .t2 br{ display: inline-block; }
}

/* .main .bannerSection */
.main .bannerSection{ font-family: 'Paperlogy'; padding: 86px 0; }
.main .bannerSection .inner{ position: relative; }
.main .bannerSection .t1{ text-align: center; font-size: 20px; font-weight: 700; }
.main .bannerSection .t2{ margin-top: 18px; text-align: center; font-size: 42px; font-weight: 700; color: #4A449D; }
.main .bannerSection .bg{ margin-top: 22px; max-width: 100%; padding-bottom: 25px; }
.main .bannerSection .itemList{ position: absolute; left: -10px; bottom: 0; width: calc(100% + 10px); display: flex; flex-wrap: wrap; }
.main .bannerSection .itemList > li{ padding: 10px; width: calc(100% / 4); }
.main .bannerSection .itemList .item{ padding: 35px 10px; color: #fff; display: flex; align-items: center; justify-content: center; gap: 10px; background-color: #645DC8; border: 2px solid #fff; border-radius: 10px; }
.main .bannerSection .itemList .item.bg2{ background-color: #6057E4; }
.main .bannerSection .itemList .item.bg3{ background-color: #4F46CD; }
.main .bannerSection .itemList .item.bg4{ background-color: #4A449D; }
.main .bannerSection .itemList .item .icon{ flex-shrink: 0; width: 52px; }
.main .bannerSection .itemList .item .tit{ font-size: 22px; font-weight: 600; }
.main .bannerSection .itemList .item .cont{ margin-top: 3.5px; display: flex; align-items: center; gap: 3.6px; }
.main .bannerSection .itemList .item .cont .arrow{ width: 6px; }

@media screen and (max-width: 1250px) { 
    .main .bannerSection .t1{ font-size: 18px; }
    .main .bannerSection .t2{ font-size: 35px; }
    .main .bannerSection .bg{ padding-bottom: 0; }
    .main .bannerSection .itemList > li{ padding: 5px; }
    .main .bannerSection .itemList .item{ padding: 3vw 0; }
    .main .bannerSection .itemList .item .tit{ font-size: 18px; }
    .main .bannerSection .itemList .item .cont{ font-size: 14px; }
    .main .bannerSection .itemList .item .icon{ width: 40px; }
}
@media screen and (max-width: 900px) { 
    .main .bannerSection .bg{ padding-bottom: 100px; }
    .main .bannerSection .itemList{ padding: 0 10px; left: calc(50% - 250px); max-width: 500px; }
    .main .bannerSection .itemList > li{ width: calc(100% / 2); }
}
@media screen and (max-width: 650px) { 
    .main .bannerSection{ padding: 50px 0; }
    .main .bannerSection .t1{ font-size: 16px; }
    .main .bannerSection .t2{ font-size: 25px; }
    .main .bannerSection .itemList .item .tit{ font-size: 16px; }
    .main .bannerSection .itemList .item .cont{ font-size: 12px; }
}
@media screen and (max-width: 520px) { 
    .main .bannerSection .itemList{ left: 0; width: 100%; }
}


/* .main .applySection */
.main .applySection{ padding: 58px 0; background-color: #4A449D; }
.main .applySection .mainBigTitle{ color: #fff;  }
.main .applySection .mainContent{ color: #fff; text-align: center; font-size: 16px; font-weight: 600; }
.main .applySection .whiteBox{ background-color: #fff; margin: 27px auto 0 auto; width: 90%; max-width: 800px; padding: 40px 24px; border-radius: 23px; box-shadow: 11.975px 19.159px 16.764px 0px rgba(0, 0, 0, 0.15); }
.main .applySection .whiteBox .noticeBox{ align-items: center; color: #EB5757; display: flex; margin-left: 20px; gap: 3px; }
.main .applySection .whiteBox .noticeBox .notice{ width: 18px; }
.main .applySection .formList .label{ display: flex; }
.main .applySection .formList > li{ padding: 20px 10px; }
.main .applySection .formList .radioIpt{ display: flex; flex-wrap: nowrap; }
.main .applySection .formList .radioIpt .customRadio{  width: calc(100% / 2); }
.main .applySection .formList .radioIpt .customRadio input[type="radio"] + .radioText{ width: 100%; color: #7f7f7f; padding:10px 14px; justify-content: center; text-align: center; border: 1px solid #e4e4e4; }
.main .applySection .formList .radioIpt .customRadio input[type="radio"]:checked + .radioText{ border: 1px solid #4F46CD; font-weight: 600; color: #4F46CD; }
.main .applySection .lock{ display: block; margin: 0 auto; margin-top: 8px; width: 88px; }
.main .applySection .blueText{ text-align: center; color: #4484F5; }
.main .applySection .submitBtn{ border: none; display: block; margin: 0 auto; margin-top: 13px; padding: 15px; width: 100%;background: linear-gradient(90deg, rgba(127, 118, 253, 0.00) 0%, #7F76FD 100%), #4F46CD; color: #fff; max-width: 323px; width: 100%; border-radius: 324px; }
.main .applySection .agreeCheckDiv label input[type="checkbox"]:checked + .textBox::before{ border-color: rgba(49, 126, 255, 1);  background-image: url('../img/main/applySection/check_icon.svg'); }

@media screen and (max-width: 900px) { 
    .main .applySection .formList .label{ flex-direction: column; gap: 2px; }
    .main .applySection .whiteBox .noticeBox{ margin-left: 0; }
    .main .applySection .formList > li.half{ width: 100%; }
}
@media screen and (max-width: 650px) { 
    .main .applySection .whiteBox .noticeBox{ font-size: 12px; }
    .main .applySection .whiteBox .noticeBox .notice{ width: 10px; height: auto; }
    .main .applySection .blueText{ font-size: 14px; }
    .main .applySection .formList > li{ padding: 5px 10px; }
}


/* footer */

footer { background-color: #222; padding: 25px 0; color: #fff; }
footer .logo{ font-size: 32px; font-family: 'JalnanGothic', sans-serif; font-weight: 100; }
footer .privacyDiv{ margin: 20px 0 0 0; font-size: 18px; font-weight: 700; }
footer p{ margin-top: 17px; font-size: 30px; line-height: 1.5em; }
footer .red{ color: #EB5757; }
footer .companyInfo{ margin-top: 39px; }
footer .companyInfo .blue{  color: #06A0FE; }
footer .grayColor{ margin-top: 10px; color: #7F7F7F; font-size: 14px; }
footer .copy_right{ font-size: 12px; margin-top: 18px; }

@media screen and (max-width: 1250px) { 
    footer .logo{ font-size: 20px; }
    footer p{ font-size: 18px; }
    footer .privacyDiv{ font-size: 16pc; }
}
@media screen and (max-width: 650px) { 
    footer p{ font-size: 14px;}
    footer .privacyDiv{ font-size: 14px; }
}

/*============================ privacy ============================*/
.f_popup_bg{ 
    background-color:rgba(0,0,0,0.5); position:fixed;
    left:0; top:0; width:100%; height:100%; z-index:9999; 
    display:flex; align-items: center; justify-content: center;
    padding:10px; font-family: 'Noto Sans KR', sans-serif;
    opacity:0; visibility: hidden; transition: all 0.5s;

}
.f_popup_bg.on{ opacity:1; visibility: visible; }
.f_popup_bg .popup_box{ width:90%; max-width:480px; }
.f_popup_bg .btn_wrap{ width:100%; display:flex; justify-content: flex-end; }
.f_popup_bg .btn_wrap .btn{ width:30px; height:30px; cursor:pointer; padding:0; }
.f_popup_bg .btn_wrap .btn span{ display:block; width:100%; height:2px; background-color:#fff;  }
.f_popup_bg .btn_wrap .btn span:nth-child(1){ transform: translateY(14px) rotate(-45deg); -webkit-transform: translateY(14px) rotate(-45deg); }
.f_popup_bg .btn_wrap .btn span:nth-child(2){ transform: translateY(12px) rotate(45deg); -webkit-transform: translateY(12px) rotate(45deg); }
.f_popup_bg .content_wrap{ background-color:#fff; overflow-y: scroll; max-height: 60vh; padding:40px 30px; margin-top:10px; }
.f_popup_bg .content_wrap p.title{ text-align:center; font-weight: 600; font-size: 20px;  }
.f_popup_bg .content_wrap p.content{ font-size: 16px; margin-top:30px; font-weight: 300;  }

@media screen and (max-width: 650px) {
    .f_popup_bg .content_wrap p.content{ font-size: 14px; margin-top: 20px; }
    .f_popup_bg .content_wrap{ padding: 20px 15px;  }
}