@font-face{font-family:'SBagroB'; src:url('../fonts/SBagroB.woff')}
@font-face{font-family:'SBagroL'; src:url('../fonts/SBagroL.woff')}

/*이미지 리사이징됐을때 화질개선 이미지랜더링*/
img[src$=".gif"], img[src$=".png"] {
image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

div {
background: url(chessboard.gif) no-repeat 50% 50%;
image-rendering: -moz-crisp-edges;         /* Firefox */
image-rendering:   -o-crisp-edges;         /* Opera */
image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input:focus { outline: none; }
button{cursor: pointer;outline: none; background: none;border: 0;}
a{text-decoration: none;}
/*폰트*/
*{font-family: 'pretendard', sans-serif;box-sizing: border-box;}
html{font-size: 10px;}
body{font-family: 'pretendard', sans-serif;line-height: 1.3;font-size: 1.6rem;}

/* 공통클래쓰 */
.text-blue{color: #4376ec !important;}
.text-primary{color: #ff8b1a !important;}
.text-white{color: #ffffff !important;}
.text-dark{color: #383838 !important;}
.text-graan{color: #2cc8c3 !important;}
.text-pink{color: #ed0291 !important;}
.text-red{color: #eb2f2f !important;}
.text-orange{color: #ff7827 !important;}
.fw-bold{font-weight: bold !important;}
.fw-semibold{font-weight: 600 !important;}
.pc-none{display: none;}




/* 헤더 */
.wrap{
    overflow-x: hidden;
}
#header{
    width: 100%;
    height: 100px;
    position: absolute;
}
.header-inner{
    width: 1280px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#logo{}
#logo img{max-width: 150px;}
.header-call{
    text-align: right;
}
.call-name{
    font-size: 1.8rem;
    font-weight: 600;
    color:#383838;
}
.call-num{
    font-size: 2.4rem;
    font-weight: bold;
}

/* 메인 */
.main{}
.section{
    padding: 100px 0;
}
.container{
    width: 1280px;
    margin: 0 auto;
}

.sec1{
    background-color: #f5f5f5;
}
.sec1-top{
    text-align: center;
}
.sub-txt{
    background-color: #ff8b1a;
    font-size: 2.2rem;
    color: #ffffff;
    padding: 10px 15px;
    border-radius: 50px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: 600;
}
.sec1-tit{
    font-family:'SBagroL';
    color: #383838;
    margin-bottom: 20px;
    font-size: 8rem;
}
.sec1-tit strong{
    font-family:'SBagroB';
}
.sec1-btm{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.form-wrap{
    background: #ff8b1a;
    border-radius: 15px;
}
.sec1-btm .form-left{width: 50%; padding: 10px;}
.sec1-btm .li-type1{width: 50%; padding: 10px;}
.form-wrap .form-cont{
    padding: 40px;
}
.form-box{}
.form-box dl{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.form-box dl + dl{
    margin-top: 11px;
}
.form-box dt{
    display: inline-block;
    width: 80px;
    font-size: 2rem;
    color: #ffffff;
    font-weight: 600;
}
.form-box dd{
    width: calc(100% - 80px);
}


/* 인풋박스커스텀 */
.input-box{
    width: 100%;
    height: 60px;
    padding-left: 45px;
    padding-right: 10px;
    background-color: #f3f7fc;
    border-radius: 7px;
    font-size: 1.8rem;
    border: none;
}
.input-box::placeholder{
    color: #888888;
}
/* 라디오박스 커스텀 */
.form-radio{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.form-radio input[type=radio]{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.form-radio input[type=radio]:checked + label{
    background: #4376ec;
}
.form-radio input[type=radio] + label{
    display: inline-block;
    width: 100%;
    text-align: center;
    border-radius: 5px;
    font-weight: 300;
    color: #fff;
    background: #ffb268;
    cursor: pointer;
    padding: 13px 0;
    font-size: 1.8rem;
    font-weight: 400;
    margin-bottom: 6px;
}
.form-radio .radio-box{
    width: 32%;
    display: inline-block;
}
.form-radio .radio-box.w-50{
    width: 49%;
}


/* 체크박스 커스텀 */
.agree-area{
    display: flex;
    align-items: center;
    font-size: 1.8rem;
}
.agree-area label{
    color: #fff;
}
.agree-area a{
    color: #fff;
    text-decoration: underline;
    margin-left: 6px;
}
.agree-area input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    outline: none;
    box-shadow: none;
    background: #fff;
    border: 1px solid #8a8a8a;
}
.agree-area input[type='checkbox']:checked{
    border-radius: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance:none;
    box-shadow: none;
    background: url(../img/icon-chk.png)  #f3f7fc no-repeat;
    background-position: center;
    background-size: 15px;
}

.form-btn{}
.form-btn button{
    color: #fff;
    font-size: 2.6rem;
    font-weight: 600;
    width: 100%;
    background: #645444;
    border-radius: 0 0 15px 15px;
    padding: 22px;
    text-align: center;
}
.btn{
    cursor: pointer;
}

.li-type1{
    height: auto;
}
.li-type1 .li-item{
    width: 100%;
    border-radius: 15px;
    background: #fff;
    height: calc(100%/3);
    padding: 40px 0 0 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.shadow{
    box-shadow: 0px 0px 35px 0px rgba(89, 96, 121, 0.3);;
}
.li-type1 .li-item + .li-item {
    border-top: 1px dashed #dadada;
}
.li-type1 .li-item:nth-child(2){
    background: #fff6ed;
}
.benefit-wrap{
    display: flex;
    flex-wrap: wrap;
}

.benefit-tag{
    display: inline-block;
    padding: 6px 9px;
    border-radius: 15px;
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
    background: #ff8b1a;
    margin-right: 10px;
}
.benefit-txt{}
.benefit-txt h5{
    font-size: 2.5rem;
    color: #ff8b1a;
    font-weight: bold;
    margin-bottom: 10px;
}
.benefit-txt p{
    color: #645444;
}

.sec2{
    padding-top: 0;
    padding-bottom: 50px;
}
.sec2 .sec2-cont{}

.tit-box{
    margin-bottom: 50px;
}
.tit-type1{
    margin-bottom: 30px;
    text-align: center;
}
.tit-type1 h2{
    font-size: 5rem;
    margin-bottom: 10px;
    font-weight: 400;
    color: #383838;
}
.tit-type1 h2 strong{
    font-weight: bold;
}
.tit-type1 p{
    font-size: 2.2rem;
    color: #797979;
}
.notice{
    display: inline-block;
    width: 100%;
    font-size: 2.2rem;
    text-align: center;
}
.notice i{
    margin-right: 6px;
    color: #e64361;
}
.notice span{
    color: #e64361;
    font-weight: 600;
}

.table-wrap{
    border-radius: 15px;
    margin-bottom: 50px;
}
.table-wrap .tb-header{
    width: 100%;
    border-radius: 15px 15px 0 0;
    padding: 15px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tb-header img{margin-right: 6px;}
.tb-header h5{color: #fff;font-size:2.4rem;}
.tb-header h5 strong{font-weight: bold;}

.tb-cont{
    padding: 40px;
}
.table{
    width: 100%;
    border-bottom: 1px solid #ececec
}
.table th{
    padding: 11px 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    font-size: 13px;
    color: #333;
    background: #f8f8f8;
    font-size: 1.8rem;
    font-weight: 500;
}
.table td{
    padding: 15px 0;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #ececec;
    font-size: 12px;
    font-weight: 300;
    background: #fffffe;
    font-size: 1.8rem;
    color: #666;
}
.table td:first-child {
    border-left: 0;
}
.benefit-info{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5px;
}
.benefit-info span{
    font-weight: 500;
    font-size: 2rem;
    color: #383838;
}
.tb-notice{
    padding: 20px 0 30px;
    font-size: 1.6rem;
    font-weight: 300;
    color: #999;
}
.tb-btm{
    background: #fcf9f1;
    padding: 20px;
    border-radius: 15px;
}
.tb-btm .tb-btm-cont{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.tb-btm .tb-btm-cont img{
    padding: 0 100px;
    max-width: 455px;
}
.btm-box{}
.btm-box h5{
    font-size: 2.6rem;
    color: #383838;
    margin-bottom: 10px;
}
.btm-box h5 strong{
    font-weight: bold;
}
.btm-box p{
    font-size: 1.8rem;
    color: #555555;
}

.sec3{
    padding-top: 0;
}
.sec3 .banner{
    background: #ff8b1a;
    padding: 50px 20px;
    border-radius: 15px;
    text-align: center;
}
.sec3 .banner .bnr-sub{
    background: #23190f;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 30px;
    color: #ff8b1a;
    margin-bottom: 10px;
    font-size: 2rem;
    font-weight: 600;
}
.sec3 .banner .bnr-tit{
    font-family:'SBagroL';
    font-size: 4rem;
    color: #23190f;
}
.sec3 .banner .bnr-tit strong{
    font-family:'SBagroB';
}
.sec3 .banner .bnr-num{
    font-size: 4rem;
    color: #23190f;
    font-family:'SBagroB';
}
.sec3 .banner .bnr-num i{
    font-size: 32px;
}

.sec4{
    background: #f5f5f5;
}
.li-type2{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 80px;
}
.li-type2 .li2-item{
    width: 100%;
    transition: border 1s;
    position: relative;
    padding: 40px 0;
    margin-top: 13px;
    box-sizing: border-box;
    border-radius: 21px;
    border: 2px solid #e6e6e6;
    background: #fff;
}
.li-type2 .li2-item + .li2-item{
    margin-left: 20px;
}
.li-type2 .li2-item p{
    font-size: 3rem;
    text-align: center;
    font-weight: 700;
    color: #72757b;
}
.li-type2 .li2-item::before{
    width: 64px;
    height: 64px;
    line-height: 64px;
    left: 50%;
    top: -32px;
    margin-left: -32px;
    font-size: 26px;
    content: '';
    z-index: 1;
    display: inline-block;
    position: absolute;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50%;
    font-weight: 700;
    color: #72757b;
    background: #cfd0d2;
}

.li2-item.color{
    border: 2px solid #ff8b1a;
}
.li-type2 .li2-item::after{
    content: '';
    display: inline-block;
    position: absolute;
    margin-top: -24px;
    margin-right: -35px;
    top: 50%;
    right: 0;
    bottom: -20px;
    width: 48px;
    height: 48px;
    /* transform: rotate(-90deg); */
    background: url(../img/icon-arrow2.png) no-repeat 0 0;
    background-size: cover;
    z-index: 2;
}
.li-type2 .li2-item.step01::before{
    content: '01';
}
.li-type2 .li2-item.step02::before{
    content: '02';
}
.li-type2 .li2-item.step03::before{
    content: '03';
}
.li-type2 .li2-item.step04::before{
    content: '04';
    color: #fff;
    background: #ff8b1a;
}
.li-type2 .li2-item:last-child::after{
   display: none;
}


.rolling-wrap{
    display: flex;
}
.rolling-cont{
    width: 50%;
    margin-top: 50PX;
}
.rolling-cont + .rolling-cont {
    margin-left: 20px;
}
.rolling-header{
    padding: 0 30px;
    border-radius: 21px;
    position: relative;
    display: flex;
    justify-content: space-around;
    padding: 0 18px;
    box-sizing: border-box;
    border-radius: 11px;
    background: #383838;
    z-index: 2;
}
.rolling-header p{
    padding: 18px 0;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
}
.rolling-list{
    height: 480px;
    box-sizing: border-box;
    padding: 15px 30px;
    border-radius: 0 0 21px 21px;
    background: #fff;
    overflow: hidden;
    height: 320px;
    margin-top: -15px;
    border: 1px solid #eaeaea;
}
.rolling-list .rolling-item{
    display: flex;
    align-items: center;
    justify-content: space-around;
    /* height: 46px; */
    font-size: 1.8rem;
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
    
}
.rolling-list .rolling-item p{
    font-size: 1.8rem;
    color: #383838;
}

.sec5{}
.li-type3{
    display: flex;
    justify-content: space-around;
}
.li-type3 .li3-item{
    text-align: center;
}

.li-type3 .li3-item h5{
    font-size: 2.6rem;
    font-weight: bold;
    color: #383838;
    margin-bottom: 20px;
    margin-top: 20px;
}
.li-type3 .li3-item p{
    color: #383838;
    font-size: 1.8rem;
}

#footer{
    background: #383838;
    padding-top: 50px;
    padding-bottom: 250px;
}
#footer .ft-icon img{width: 100px;}
#footer .ft-cont{
    display: flex;
    justify-content: space-between;
}
.ft-left{
    color: #adadad;
    font-size: 1.5rem;
    line-height: 1.8;
}
.ft-right{
    text-align: right;
}
.ft-call{
    margin-bottom: 20px;
}
.ft-call .ft-callName{
    color: #e2e2e2
}
.ft-call .ft-callNum{
    color: #ff8b1a;
    font-size: 2.6rem;
    font-weight: bold;
}

.fixBanner{
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ff8b1a;
    z-index: 10;
    box-shadow: 0px -10px 30px 0px rgba(71, 75, 88, 0.2);
    transition: opacity 0.5s ease;
}
.fixBanner.on{
    display:block;
}
.fix-cont{
    width: 1000px;
    margin: 0 auto;
    padding: 15px 0 10px;
    text-align: center;
    box-sizing: border-box;
}
.fix-tit{
    font-size: 2.6rem;
    color: #fff;
    margin-bottom: 15px;
    line-height: 1.2;
    letter-spacing: -2px;
}
.fix-tit strong{
    font-weight: bold;
}
.form-box2{
    display: flex;
    justify-content: center;
}
.form-box2 .nameInput{
    width: 250px;
}
.form-box2 .phoneInput{
    width: 100%;
    margin: 0 12px;
    flex: 1;
}
.form-box2 button{
    width: 100%;
    flex: 0;
}

.fix-form .agree-area{
    margin-top: 0;
}

#topBtn{
    position: absolute;
    z-index: 2;
    top: -120px;
    right: 180px;
}
.br-m{display: none;}


/* 통신사추가 */
.li-type4{
    display: flex;
    width: 100%;
}
.li-type4 li{
    width: 100%;
    margin: 10px;
    border: 2px solid #f48025;
    border-radius: 7px;
    padding: 40px;
    height: auto;
    display: flex;
    flex-direction: column;
    text-align: center;
}
.tel-logo img{max-width: 210px;width: 100%;}
.li4-top{}
.li4-top h5{
    margin-top: 10px;
    font-size: 32px;
    font-weight: bold;
}
.li4-top p{
    margin-top: 10px;
    font-size: 15px;
}
.li-type4 .li4-btm{
    margin-top: 30px;
    width: 100%;
    text-align: center;
}
.btn-type{
    width: 100%;
    display: flex;
    height: 46px;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    background: #f48025;
    color: #fff;
}

.txt2{
    font-size: 16px;
    padding-left: 6px;
    padding-top: 5px;
    color: #ffffff;
    text-align: left;
    color: #004cff;
    font-weight: 600;
}








@media screen and (max-width:1280px) {
    .txt2{text-align: center;}
    .m-none{display: none;}
    .pc-none{display: block;}
    .header-inner{width: 94%;}
    .sec1.section{padding-top: 120px;}
    .section{padding: 50px 0;}
    .container{width: 94%;}
    .sec1-tit{font-size: 3rem;}
    .sub-txt{font-size: 1.6rem;}
    .sec1-btm .form-left{width: 100%;order: 2; }
    .sec1-btm .li-type1{width: 100%;}
    .sec1-btm .li-item{padding: 20px;height: auto;}
    .sec1-btm .benefit-wrap{flex-direction: column;}
    .benefit-txt h5{font-size: 1.8rem;}
    .sec1-btm .li-item img{width: 100px;margin: 0 auto;}

    .form-wrap .form-cont{padding: 20px;}
    .input-box{height: 40px;;}
    .form-box dt{font-size: 1.5rem;width: 50px;}
    .form-radio .radio-box.w-50{width: 100%;}
    .form-radio input[type=radio] + label{padding: 10px 0;font-size: 1.3rem;}
    .agree-area{font-size: 1.5rem;justify-content: center;flex-wrap: wrap;}

    .tit-type1 h2{font-size: 3rem;}
    .tit-type1 p{font-size: 1.6rem;}
    .notice{font-size: 1.3rem;}

    .table-wrap .tb-header {padding: 10px 0;}
    .tb-header h5{font-size: 1.5rem;}
    .tb-header img{width: 30px;}
    .tb-cont{padding: 20px;}
    .table th{font-size: 1.5rem;}
    .table td{font-size: 1.3rem;}
    .tb-btm .tb-btm-cont{justify-content: center;}
    .tb-btm .tb-btm-cont img{padding: 0;margin: 0 auto;margin-bottom: 20px;}
    .btm-box{text-align: center;}
    .btm-box h5{font-size: 1.6rem;}
    .btm-box p{font-size: 1.4rem;}
    .benefit-mark{width: 100px;}

    .br-pc{display: none;}
    .br-m{display: block;}

    .sec3{padding-top: 0;}
    .sec3 .banner{padding: 20px;}
    .sec3 .banner .bnr-sub{font-size: 1.5rem;}
    .sec3 .banner .bnr-tit{font-size: 2.5rem;}
    .sec3 .banner .bnr-num{font-size: 2.5rem;}
    .sec3 .banner .bnr-num i{font-size: 18px}

    .li-type2{
        flex-wrap: wrap;
        width: 320px;
        justify-content: center;
        margin: 0 auto;
    }
    .li-type2 .li2-item::after{
        right: 50%;
        top: 80px;
        margin-right: -12px;
        width: 24px;
        height: 24px;
        transform: rotate(90deg);
    }
    .li-type2 .li2-item + .li2-item{margin: 0 auto;margin-top: 11px;}
    .li-type2 .li2-item{
        padding: 20px;
    }
    .li-type2 .li2-item p{font-size: 1.5rem;}
    .li-type2 .li2-item::before{
        top: 50%;
        left: 16px;
        transform: translate(0,-50%);
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 1.3rem;
    }
    .rolling-wrap{flex-direction: column;}
    .rolling-cont{width: 100%;}
    .rolling-cont + .rolling-cont{margin-left: 0;}
    .rolling-header p{font-size: 1.3rem;}
    .rolling-list .rolling-item p{font-size: 1.3rem;}

    .li-type3{flex-direction: column;padding-left: 20px;}
    .li3-item{display: flex;margin-bottom: 10px;align-items: center;}
    .li3-img{width: 100px;margin-right: 20px;}
    .li3-img img{width: 100%;}
    .li3-txt{
        text-align: left;
        width: 100%;
        flex: 1;
    }
    
    .li-type3 .li3-item h5{font-size: 1.6rem;margin-bottom: 10px;}
    .li-type3 .li3-item p{font-size: 1.3rem;}

    #footer .ft-cont{flex-direction: column;}
    .ft-left{font-size: 1.3rem;}
    .ft-right{text-align: left;margin-top: 20px;}
    
    .fixBanner{border-radius: 15px 15px 0 0 ;}
    .fix-cont{width: 94%;}
    .form-box2{flex-direction: column;}
    .form-box2 input{width: 100% !important;margin-bottom: 6px;}
    .form-box2 .phoneInput{flex: none;margin: 0;margin-bottom: 6px;}
    #topBtn {
        right: 10px;
        top: -80px;
    }
    #topBtn img{width: 50px;}
    #footer{padding-bottom: 300px;}
    .fix-tit{font-size: 1.8rem;}

    /* 통신사추가 */
    .li-type4{
        flex-direction: column;
    }
    .li-type4 li{margin: 10px 0;height: 300px;}
    .li4-top h5{font-size: 24px;}

}