@charset "UTF-8";
@import url(font3.css);


/* 폰트 */
.Pretendard {
    font-family : "Pretendard" !important;
}
.SCORE {
    font-family : "SCore" !important;
}

/* 해당 업무 이용 팝업 */
ul{list-style-type: none; margin-block-start: 0; margin-block-end: 0; margin-inline-start: 0; margin-inline-end: 0; padding-inline-start: 0;}
br.web{display: block;}
.pointColorBlue{color:#3067F5;}
.pointColorGreen{color:#01C0B6; font-weight: 900 !important;}
.pointColorRed{color:#ED193B; font-weight: 900 !important;}
.displayOut {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;}
section#popup-wrap em{font-style:normal;}
section#popup-wrap img.auto{max-width:100%; max-height: 100%; width:auto; height: auto; display: block; text-align: center; margin:0 auto;}

section#popup-wrap {}
section#popup-wrap {
    max-width : 980px;
    margin : 0 auto;
    padding:130px 30px 30px;
    background:repeating-linear-gradient(-45deg, #DCEDFF, #DCEDFF 13px, #f7faff, #f7faff 14px);
    letter-spacing: -0.01em;
    line-height: 1.5;
    word-break: keep-all;
}

section#popup-wrap .white-box {
    background: #FFFFFF;
    box-shadow: 0 0 0 10px rgb(176 176 176 / 10%);
    border-radius: 50px;
    padding: 40px 35px 40px;
    position: relative;
}

section#popup-wrap .white-box::before{
    content: '';
    background: url(../images/popup_top_img.svg) no-repeat;
    width: 327px;
    height: 129px;
    position: absolute;
    top: -95px;
    left: 35%;
}

section#popup-wrap .white-box::after{
    content:'';
    background: url(../images/popup_img_notice.png) no-repeat;
    width:72px;
    height:80px;
    position: absolute;
    top: 75px;
    left: 106px;

}

section#popup-wrap h1 {
    font-family: "SCore" !important;
    font-weight: 600;
    color: #000000;
    font-size: 40px;
    line-height: 2;
    letter-spacing: -0.08em;
    padding-left: 10px;
    text-align: center;
}



section#popup-wrap .bg_box{
    background: #edf6ff;
    border-radius: 27px;
    padding: 35px 70px;
}

section#popup-wrap ul.dotStyle li{
    position: relative;
    font-weight: 400;
    font-size: 21px;
    color: #333;
    padding-left: 18px;
    margin-bottom:22px;
}

section#popup-wrap ul.dotStyle li::before{
    content:'';
    position:absolute;
    left: 0;
    top: 10px;
    background: #01D58C;
    width:8px;
    height:8px;
    border-radius: 8px;
}

section#popup-wrap ul.dotStyle li:last-child{
    margin-bottom:0;
}

section#popup-wrap .ex-inner {
    margin-top: 35px;
}

section#popup-wrap .ex-inner p{
    color: #000;
    font-weight: 700;
    font-size: 18px;
    position: relative;
    padding-left: 50px;
    line-height: 1.6;
    margin-top: 15px;
}

section#popup-wrap .ex-inner p::before{
    content: '1';
    position: absolute;
    left: 0px;
    top: -4px;
    background: #3067F5;
    width: 37px;
    height: 37px;
    color: #FFFFFF;
    font-size: 18px;
    border-radius: 37px;
    line-height: 37px;
    text-align: center;
}

section#popup-wrap .ex-inner:nth-child(2) p::before{
    content: '2';
}

section#popup-wrap .ex-inner:nth-child(3) p::before{
    content: '3';
}

section#popup-wrap .ex-inner:nth-child(4) p::before{
    content: '4';
}

section#popup-wrap .ex-inner:nth-child(5) p::before{
    content: '5';
}

section#popup-wrap .ex-inner:nth-child(6) p::before{
    content: '6';
}

section#popup-wrap .ex-inner:nth-child(7) p:last-child::before{
    content: '7';
}

section#popup-wrap .ex-inner p em{
    font-weight: 400;
}


section#popup-wrap .bg_box.bg_box_line{
    border: 4px solid #def6ff;
    background: #fff;
    padding: 20px 70px;
    text-align: center;
    position: relative;
}

section#popup-wrap .bg_box.bg_box_line::before{
    content: '';
    background: url(../images/popup_img_btm.svg) no-repeat;
    position: absolute;
    right:0;
    top: -24px;
    width: 59px;
    height:59px;
}

section#popup-wrap .bg_box.bg_box_line p{
    font-weight: 500;
    font-size: 21px;
    color:#000;
}

section#popup-wrap .bg_box.bg_box_line p span{
    color:#fff;
    position: relative;
    padding-right: 26px;
}

section#popup-wrap .bg_box.bg_box_line p span::before{
    content: '1';
    background: #3067F5;
    width: 25px;
    height: 25px;
    text-align: center;
    border-radius: 25px;
    line-height: 25px;
    position: absolute;
    left: 0;
    top: 3px;
    color: #fff;
    font-size: 15px;
}




@media (max-width: 991px) {
    section#popup-wrap{max-width:100%; padding: 95px 30px 30px;}
    section#popup-wrap .white-box{}
    section#popup-wrap .white-box::before{background-size: 80%; top: -76px;}
    section#popup-wrap .white-box::after{ left:70px; background-size:65%;}
    section#popup-wrap h1{font-size:30px; text-align: left; padding-left:103px;}  
    section#popup-wrap h1::before{background-size:68%; }
    section#popup-wrap .bg_box{padding: 20px 35px;}
    section#popup-wrap .ex-inner{margin-top:30px;}
    section#popup-wrap ul.dotStyle li{font-size:18px;}
    section#popup-wrap ul.dotStyle li::before{width:4px; height: 4px; border-radius: 4px;}
    section#popup-wrap .ex-inner p{font-size:16px; padding-left:35px;}
    section#popup-wrap .ex-inner p::before {top:1px; width: 25px; height: 25px; font-size:14px; border-radius:25px; line-height: 25px;}
    section#popup-wrap .bg_box.bg_box_line{padding:10px 30px;}
    section#popup-wrap .bg_box.bg_box_line p{font-size:18px;}
    section#popup-wrap .bg_box.bg_box_line p span::before{width:19px; height:19px; border-radius:19px; line-height:19px; left:4px; font-size:11px;}

}


@media (max-width: 830px) {
    br.web{display: none;}
    section#popup-wrap{padding:70px 30px 30px;}
    section#popup-wrap .white-box{padding:25px 35px 40px;}
    section#popup-wrap .white-box::before {background-size: 50%; top: -49px; left: 40%;}
    section#popup-wrap .white-box::after {left: 70px; background-size: 40%; top: 41px;}
    section#popup-wrap h1{font-size:23px; line-height: 1; padding-left: 80px;}
    section#popup-wrap ul.dotStyle li{font-size:15px;}
    section#popup-wrap .ex-inner p{font-size:11px; padding-left:28px;}
    section#popup-wrap .ex-inner p::before{top: 0px; width: 19px; height: 19px; font-size: 10px; border-radius: 19px; line-height: 19px;}
    section#popup-wrap .bg_box.bg_box_line p{font-size:15px;}
    section#popup-wrap .bg_box.bg_box_line::before{background-size:60%; right: -22px;}
    section#popup-wrap .bg_box.bg_box_line p span::before{top:1px; left: 5px;}    
}

@media (max-width: 580px) {
    section#popup-wrap{padding:30px;}
    section#popup-wrap .white-box{padding:20px;}
    section#popup-wrap .white-box::before{display: none;}
    section#popup-wrap .white-box::after{display:none;}
    section#popup-wrap h1{text-align: center; padding-left:0; line-height: 1.5; margin-top: 10px;}
    section#popup-wrap .bg_box{padding:20px;}
    section#popup-wrap .bg_box.bg_box_line{padding:5px 20px;}
}