@charset "UTF-8";

/* 서브페이지 공통 */
.sub-page-wrap .sub-page-section .txt-box{
    color: #fff;
    padding: 108px 0 111px;
}
.sub-page-wrap .sub-page-section .txt-box strong{
    word-break: keep-all;
    display: block;
    font-size: 48px;
    line-height: 1.2294;
}
.sub-page-wrap .sub-page-section .txt-box p{
    font-size: 19px;
    line-height: 1.579;
    padding-top: 16px;
}
.sub-page-wrap .sub-page-section .txt-box p strong{
    font-size: 19px;
    font-weight: 600;
    line-height: 1.579;
}
.sub-page-wrap .sub-page-section .txt-box p strong em{
    display: inline-block;
    width: 16px;
    height: 17px;
    vertical-align: middle;
    margin:0 3px 2px 7px;
    background: url("/images/sub/ico_call.svg") no-repeat center;
    background-size: 100%;
}
.sub-page-wrap .sub-page-section .txt-box > a{
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 16px 72px 16px 24px;
    margin-top: 36px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgb(227, 30, 143) 40%, rgb(255, 205, 3) 95%) 80% 0% / 200% 800%;
    animation: joinBg 11s ease infinite;
}
.sub-page-wrap .sub-page-section .txt-box > a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    width: 6px;
    height: 6px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
.sub-page-wrap .txt-wrap{
    text-align: center;
    padding-bottom: 68px;
}
.sub-page-wrap .txt-wrap em{
    display: inline-block;
    color: #AC8C6D;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.167;
    padding-bottom: 20px;
}
.sub-page-wrap .txt-wrap strong{
    word-break: keep-all;
    display: block;
    font-size: 40px;
    line-height: 1.2;
    padding-bottom: 16px;
}
.sub-page-wrap .txt-wrap p{
    word-break: keep-all;
    color: #666;
    font-size: 19px;
    font-weight: 300;
    line-height: 1.527;
}
.sub-page-wrap .sub-page-bottom{
    color: #fff;
    padding: 100px 0 98px;
    margin-top: 220px;
    background: url("/images/about/img_subpage_bottom_bg.png") no-repeat center;
    background-size:cover;
}
.sub-page-wrap .sub-page-bottom .txt-wrap{
    padding-bottom: 0;
}
.sub-page-wrap .sub-page-bottom .txt-wrap strong{
    font-size: 50px;
    line-height: 1.24;
    padding: 0 0 36px;
    text-shadow: 0 0 28px rgba(0,0,0,.12);
}
.sub-page-wrap .sub-page-bottom .txt-wrap a{
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.167;
    padding: 20px 78px 21px 43px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgb(227, 30, 143) 40%, rgb(255, 205, 3) 95%) 80% 0% / 200% 800%;
    animation: joinBg 11s ease infinite;
}
.sub-page-wrap .sub-page-bottom .txt-wrap a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 40px;
    width: 7px;
    height: 7px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
.sub-page-wrap .sub-page-heading{
    font-size: 40px;
    text-align: center;
    line-height: 1.2;
    padding:88px 0 31px;
}
/* 솔루션문의 수정하기 페이지 서브텍스트*/
.sub-page-wrap .sub-page-heading > p{
    word-break: keep-all;
    color: #666;
    font-size: 19px;
    line-height: 1.527;
    padding-top: 16px;
}
#cs-center .sub-page-wrap .sub-page-heading{
    padding:108px 0 36px;
    font-size:46px;
}
@media (max-width:1024px){
    #cs-center .sub-page-wrap .sub-page-heading{
        font-size:38px;
    }
    .sub-page-wrap .sub-page-section .txt-box{
        padding: 68px 8% 72px;
    }
    .sub-page-wrap .sub-page-section .txt-box strong{
        font-size: 40px;
    }
    .sub-page-wrap .sub-page-section .txt-box p,
    .sub-page-wrap .sub-page-section .txt-box p strong{
        font-size:18px;
    }
    .sub-page-wrap .sub-page-section .txt-box p strong em{
        width: 14px;
        height: 15px;
        margin-bottom: 3px;
    }
    .sub-page-wrap .sub-page-section .txt-box > a{
        margin-top: 28px;
    }
    .sub-page-wrap .sub-page-heading > p{
        font-size: 17px;
    }
    .sub-page-wrap .txt-wrap strong{
        font-size: 38px;
        padding-bottom: 14px;
    }
    .sub-page-wrap .txt-wrap p{
        font-size: 17px;
    }
    .sub-page-wrap .sub-page-bottom{
        padding: 78px 0 80px;
        margin-top: 100px;
        background-size:180% 100%;
        background-position: top 0 left 24%;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap strong{
        font-size: 42px;
        padding-bottom: 28px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a{
        font-size: 15px;
        line-height: 1.2;
        padding: 17px 72px 15px 24px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a::after{
        right: 25px;
    }
}
@media(max-width:991px) {
    #cs-center .sub-page-wrap .sub-page-heading{
        font-size:36px;
    }
    .sub-page-wrap .sub-page-section .txt-box{
        text-align: center;
    }
    .sub-page-wrap .sub-page-section .txt-box p{
        display: none;
    }
    .sub-page-wrap .sub-page-heading > p{
        font-size: 16px;
        line-height: 1.5;
    }
    .sub-page-wrap .txt-wrap{
        padding-bottom:58px;
    }
    .sub-page-wrap .txt-wrap em{
        font-size: 16px;
        padding-bottom: 14px;
    }
    .sub-page-wrap .txt-wrap strong{
        font-size: 36px;
        line-height:1.32;
    }
    .sub-page-wrap .txt-wrap p{
        font-size: 16px;
        line-height: 1.5;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap strong{
        font-size: 40px;
    }
}
@media(max-width: 768px){
    #cs-center .sub-page-wrap .sub-page-heading{
        padding:80px 0 32px;
        font-size:30px;
    }
    .sub-page-wrap .sub-page-heading > p {
        font-size: 16px;
        padding-top: 12px;
    }
    .sub-page-wrap .sub-page-section .txt-box strong{
        font-size:32px;
        line-height: 1.345;
    }
    .sub-page-wrap .sub-page-section .txt-box{
        padding:10vw 0 10.5vw;
    }
    .sub-page-wrap .sub-page-section .txt-box > a{
        padding:14px 50px 13px 21px;
        margin-top: 24px;
        font-size:14px;
    }
    .sub-page-wrap .sub-page-section .txt-box > a::after{
        right:20px;
    }
    .sub-page-wrap .sub-page-bottom{
        padding:9% 8% 7.5%;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap strong{
        padding-bottom:18px;
        font-size:32px;
        line-height:1.3;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a{
        font-size: 14px;
        padding: 14px 50px 13px 21px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a::after{
        right: 20px;
    }
    .sub-page-wrap .txt-wrap em{
        font-size: 15px;
        padding-bottom: 12px;
    }
    .sub-page-wrap .txt-wrap strong{
        font-size: 28px;
        padding-bottom: 12px;
    }
    .sub-page-wrap .sub-page-heading{
        padding:11vw 0 5vw;
        font-size:28px;
    }
}
@media(max-width:575px){
    #cs-center .sub-page-wrap .sub-page-heading{
        padding:84px 0 20px;
        font-size:28px;
    }
    .sub-page-wrap .sub-page-heading > p {
        font-size: 15px;
        line-height: 1.572;
    }
    .sub-page-wrap .sub-page-section .txt-box > a::after{
        right: 20px;
        border-width:1px;
    }
    .sub-page-wrap .sub-page-section .txt-box strong{
        font-size:30px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap strong{
        padding-bottom: 24px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a{
        font-size: 14px;
        padding: 14px 50px 13px 21px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a::after{
        right: 20px;
    }
    .sub-page-wrap .sub-page-heading{
        padding:14vw 0 6vw;
        font-size:26px;
    }
    .sub-page-wrap .sub-page-section .txt-box{
        padding:12vw 0 12.6vw;
    }
    .sub-page-wrap .sub-page-section .txt-box > a{
        font-size:13px;
        margin-top:20px;
    }
    .sub-page-wrap .sub-page-section .txt-box > a::after{
        right: 22px;
        width: 5px;
        height: 5px;
    }
    .sub-page-wrap .txt-wrap{
        word-break:keep-all;
        width:88%;
        margin:0 auto;
    }
    .sub-page-wrap .txt-wrap em{
        font-size: 14px;
        padding-bottom: 10px;
    }
    .sub-page-wrap .txt-wrap strong{
        font-size: 26px;
    }
    .sub-page-wrap .txt-wrap p{
        font-size:15px;
        line-height: 1.572;
    }
    .sub-page-wrap .sub-page-bottom{
        padding:16vw 0 14vw;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap strong{
        padding-bottom: 17px;
        font-size:28px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a{
        font-size:13px;
        line-height:1.2;
        padding:14px 50px 13px 21px;
    }
    .sub-page-wrap .sub-page-bottom .txt-wrap a::after{
        right:22px;
        width: 5px;
        height: 5px;
        border-width:1px;
    }
}
@media only screen and (max-width: 425px) {
    .sub-page-wrap .txt-wrap{
        padding-bottom: 50px;
    }
    .sub-page-wrap .sub-page-heading{
        padding-top: 17vw;
    }
}


/* 주요기능 */
#about .sub-page-section{
    background: url("/images/about/img_about_bg.png") no-repeat center;
    background-size:cover;
}
#about .section02{
    padding: 120px 0 148px;
}
#about .section02 ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#about .section02 li{
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    white-space: normal;
    padding-top: 68px;
    border-radius: 20px;
    background: #F6F6F6;
}
@media(min-width:1201px){
    #about .section02 li:nth-child(2){
        margin: 0 30px;
    }
    #about .section02 .cont-wrap li:nth-child(2) .txt-box p{
        width: 98%;
    }
}
#about .section02 .txt-box{
    padding: 0 40px;
}
#about .section02 .txt-box em{
    display: inline-block;
    font-size: 13px;
    line-height: 1.231;
    font-weight: 700;
}
#about .section02 .txt-box strong{
    word-break: keep-all;
    display: block;
    font-size: 27px;
    line-height: 1.1856;
    padding: 8px 0 12px;
}
#about .section02 .txt-box p{
    word-break: keep-all;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}
#about .section02 .obj-wrap{
    padding-top: 11px;
}
#about .section03{
    padding: 112px 0 134px;
    background: url("/images/about/img_sec03_bg.png") no-repeat center;
    background-size: cover;
}
#about .section03 .txt-wrap{
    padding-bottom: 57px;
}
#about .section03 .img-wrap{
    width: 900px;
    margin: 0 auto;
}
#about .platform-wrap{
    padding: 117px 0 89px;
    background: #FCFCFC;
}
#about .platform-wrap .platform-cont{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#about .platform-wrap .cont-wrap > div{
    padding: 74px 0;
}
#about .platform-wrap .txt-box{
    word-break: keep-all;
    width: 50%;
    color: #666;
    font-size: 18px;
    line-height: 1.778;
    padding-top: 48px;
}
#about .platform-wrap .txt-box em{
    display: block;
}
#about .platform-wrap .txt-box span{
    display:inline-block;
}
#about .platform-wrap .cont-wrap .picksell{
    padding-top: 52px;
}
#about .platform-wrap .makelink .platform-cont{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
#about .platform-wrap .txt-box strong{
    display: block;
    color: #333;
    font-size: 44px;
    line-height: 1.3185;
    padding-bottom: 20px;
}
#about .platform-wrap .btn-wrap{
    margin-top: 36px;
}
#about .platform-wrap .picksell .img-box{
    min-width: 620px;
    width: 50%;
}
#about .platform-wrap .picksell .txt-box em{
    width: 56px;
    height: 32px;
    margin-bottom: 20px;
    background: url("/images/about/img_sub_picksell_logo.svg") no-repeat center;
    background-size: 100% 100%;
}
#about .platform-wrap .makelink .img-box{
    width: 530px;
}
#about .platform-wrap .makelink .txt-box{
    padding: 100px 0 0 120px;
}
#about .platform-wrap .makelink .txt-box em{
    width: 148px;
    height: 29px;
    margin-bottom: 28px;
    background: url("/images/about/img_sub_makelink_logo.svg") no-repeat center;
    background-size: 100% 100%;
}
/*#about .makelink-wrap{*/
/*    padding: 120px 0 160px;*/
/*    background: #FCFCFC;*/
/*}*/
/*#about .makelink-wrap .txt-wrap strong span{*/
/*    display: inline-block;*/
/*    width: 159px;*/
/*    height: 31px;*/
/*    vertical-align: bottom;*/
/*    margin: 0 0 6px 14px;*/
/*    background: url("/images/about/img_sub_makelink_logo.svg") no-repeat center;*/
/*    background-size: 100% 100%;*/
/*}*/
/*#about .makelink-wrap .info-box .txtbox{*/
/*    position: relative;*/
/*    margin-top: 32px;*/
/*}*/
/*#about .makelink-wrap .info-box .txtbox p{*/
/*    word-break: keep-all;*/
/*    width: 57%;*/
/*    color: #666;*/
/*    font-size: 17px;*/
/*    line-height: 1.706;*/
/*}*/
/*#about .makelink-wrap .btn-wrap{*/
/*    position: absolute;*/
/*    top: 0;*/
/*    right: 0;*/
/*    font-size: 0;*/
/*}*/
/*#about .makelink-wrap .btn-wrap a{*/
/*    position: relative;*/
/*    display: inline-block;*/
/*    font-size: 13px;*/
/*    font-weight: 500;*/
/*    line-height: 1.231;*/
/*    padding: 13px 43px 12px 20px;*/
/*    border-radius: 4px;*/
/*    border: 1px solid #ccc;*/
/*    background: #fff;*/
/*}*/
/*#about .makelink-wrap .btn-wrap a::after{*/
/*    content: '';*/
/*    position: absolute;*/
/*    top: 17px;*/
/*    right: 19px;*/
/*    width: 6px;*/
/*    height: 6px;*/
/*    border-top: 1px solid #333;*/
/*    border-right: 1px solid #333;*/
/*    transform: rotate(45deg);*/
/*}*/
/*#about .makelink-wrap .btn-wrap a + a{*/
/*    margin-left: 5px;*/
/*}*/
/*#about .makelink-wrap .info-box .list-box{*/
/*    display: -webkit-box;*/
/*    display: -ms-flexbox;*/
/*    display: -webkit-flex;*/
/*    display: flex;*/
/*    padding-top: 100px;*/
/*}*/
/*#about .makelink-wrap .info-box .list-box li{*/
/*    width: calc(100% /3);*/
/*}*/
/*#about .makelink-wrap .info-box .list-box li:nth-child(2){*/
/*    margin: 0 30px;*/
/*}*/
/*#about .makelink-wrap .info-box .list-box li div{*/
/*    word-break: keep-all;*/
/*    color: #666;*/
/*    font-size: 14px;*/
/*    line-height: 1.5;*/
/*    margin-top: 24px;*/
/*}*/
/*#about .makelink-wrap .info-box .list-box li strong{*/
/*    display: block;*/
/*    color: #333;*/
/*    font-size: 20px;*/
/*    font-weight: 600;*/
/*    line-height: 1.2;*/
/*    margin-bottom: 12px;*/
/*}*/
#about .section04{
    padding: 120px 0 160px;
}
#about .section04 .sub-page-wrap .txt-wrap{
    padding-bottom: 80px;
}
#about .section04 .feature-wrap{
    overflow: hidden;
    margin-top: 12px;
}
#about .section04 .feature-cont{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#about .section04 .feature-txt{
    width: 50%;
    position: relative;
}
#about .section04 .feature-img{
    overflow: hidden;
    position: relative;
    width: 50%;
    max-width: 580px;
}
#about .section04 .feature-img .swiper-horizontal>.swiper-scrollbar{
    display: none;
    width: 100%;
    bottom: 0;
    left: 0;
    border-radius: 0;
    background :#e6e8eb;
}
#about .section04 .feature-img .swiper-horizontal>.swiper-scrollbar .swiper-scrollbar-drag{
    border-radius: 0;
    background: linear-gradient(180deg, #f7444e 0%, #ec3069 100%);
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet{
    opacity: 1;
    position: relative;
    width: 100%;
    height: auto;
    text-align: left;
    padding:24px 24px 24px 32px;
    margin: 0;
    border-left: 4px solid #f6f6f6;
    border-radius: 0;
    background: transparent;
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet.swiper-pagination-bullet-active {
    border-image: linear-gradient(180deg, #f7444e 0%, #ec3069 100%) 1;
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet .txt{
    position: relative;
    padding-top:2px;
    padding-left: 40px;
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet strong{
    word-break: keep-all;
    display: block;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2089;
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet strong::before{
    content: '';
    position: absolute;
    top:0;
    left: 0;
    width: 32px;
    height: 32px;
    background: url("/images/about/ico_sub_feature_easyeditor.svg");
    background-size: 100% auto;
}
#about .section04 .feature-txt-list li.swiper-pagination-bullet p{
    word-break: keep-all;
    color: #666;
    font-size: 17px;
    line-height: 1.706;
    padding-top: 9px;
}
#about .section04 .feature-txt-list li.designmanagement.swiper-pagination-bullet strong::before{
    background: url("/images/about/ico_sub_feature_designmanagement.svg");
    background-size: 100% auto;
}
#about .section04 .feature-txt-list li.aibanner.swiper-pagination-bullet strong::before{
    background: url("/images/about/ico_sub_feature_aibanner.svg");
    background-size: 100% auto;
}
#about .section04 .feature-txt-list li.designcenter.swiper-pagination-bullet strong::before{
    background: url("/images/about/ico_sub_feature_designcenter.svg");
    background-size: 100% auto;
}
#about .section04 .feature-txt-list li.dahaedream.swiper-pagination-bullet strong::before{
    background: url("/images/about/ico_sub_feature_dahaedream.svg");
    background-size: 100% auto;
}
#about .section04 .instaform-wrap{
    position: relative;
    padding-top: 164px;
}
#about .section04 .instaform-wrap .txtbox{
    z-index: 0;
    position: relative;
    width: 100%;
    padding-left: 28px;
    margin-top: -22px;
}
#about .section04 .instaform-wrap .txtbox::before{
    content: '';
    z-index: -1;
    position: absolute;
    top: -44px;
    left: 0;
    width: 429px;
    height: 66px;
    background: #fff;
}
#about .section04 .instaform-wrap .txtbox strong{
    word-break: keep-all;
    display: inline-block;
    width: 43%;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.3335;
    margin-bottom: 20px;
}
#about .section04 .instaform-wrap .txtbox span{
    display:inline-block;
}
#about .section04 .instaform-wrap .txtbox p{
    word-break: keep-all;
    width: 70%;
    color: #666;
    font-size: 17px;
    line-height: 1.706;
}
#about .section04 .instaform-wrap .btn-wrap{
    position: absolute;
    right: 0;
    top: 50px;
}
#about .smartorder-wrap{
    padding: 120px 0 160px;
    background: #FDFBF7;
}
#about .smartorder-wrap .info-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    background: #fff;
}
#about .smartorder-wrap .info-box > div{
    width: 50%;
}
#about .smartorder-wrap .info-box .imgbox{
    position: relative;
    background-color: #F3E0D5;
}
#about .smartorder-wrap .info-box .imgbox img{
    position: absolute;
    top: 89px;
    left: 50px;
    width: 498px;
}
#about .smartorder-wrap .info-box .txtbox{
    padding: 84px 85px 68px 92px;
}
#about .smartorder-wrap .info-box .txtbox strong{
    word-break: keep-all;
    display: block;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1855;
}
#about .smartorder-wrap .info-box .txtbox p{
    word-break: keep-all;
    color: #666;
    font-size: 17px;
    line-height: 1.765;
    padding: 16px 0 24px;
}
#about .section05{
    overflow: hidden;
    padding-top: 120px;
    background: #F7FAFD;
}
#about .section06{
    overflow: hidden;
    padding-top: 160px;
}
#about .section06 .link-lst-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: 0 -15px;
}
#about .section06 .link-lst-wrap div{
    width: 50%;
    padding: 50px 50px 180px;
    margin: 0 15px;
    border-radius: 16px;
    background: #F4F6FB url("/images/about/img_sec06_obj1.png") no-repeat right 28px bottom 38px;
    background-size: 276px auto;
}
#about .section06 .link-lst-wrap div:last-child{
    background-image: url("/images/about/img_sec06_obj2.png");
    background-position: right 1px bottom 16px;
    background-size:220px auto;
}
@media only screen and (min-width: 1025px){
    #about .section06 .link-lst-wrap div:last-child p{
        width:60%;
    }
}
#about .section06 .link-lst-wrap strong{
    display: inline-block;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.1857;
}
#about .section06 .link-lst-wrap p{
    width:52%;
    word-break: keep-all;
    color: #666;
    font-size: 17px;
    line-height: 1.706;
    padding-top: 20px;
}
#about .section06 .link-lst-wrap p span{
    display:inline-block;
}
@media only screen and (max-width: 1200px){
    #about .section02 li{
        margin:0 .8%;
    }
    #about .section03 .img-wrap{
        width: 76%;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet{
        padding: 1.5vw 20px 1.5vw 24px;
    }
    #about .smartorder-wrap .info-box .imgbox img{
        top: 20.4%;
        left: 6.5%;
        width: 86%;
    }
    #about .smartorder-wrap .info-box .txtbox{
        padding:7% 6% 5.66% 6.8%;
    }
    #about .section06 .link-lst-wrap{
        margin: 0 -8px;
    }
    #about .section06 .link-lst-wrap div{
        margin: 0 8px;
    }
}
@media only screen and (max-width: 1024px){
    #about .section02{
        padding: 80px 0 100px;
    }
    #about .section03{
        padding: 80px 0;
    }
    #about .section03 .txt-wrap{
        padding-bottom: 40px;
    }
    #about .platform-wrap{
        padding: 80px 0 40px;
    }
    #about .platform-wrap .txt-box{
        font-size: 16px;
    }
    #about .platform-wrap .txt-box strong{
        font-size: 32px;
        padding-bottom: 15px;
    }
    #about .platform-wrap .btn-wrap{
        margin-top: 3.35vw;
    }
    #about .platform-wrap .cont-wrap .picksell{
        padding-top: 0;
    }
    #about .platform-wrap .picksell .img-box{
        min-width: 0;
        width: 55%;
    }
    #about .platform-wrap .picksell .txt-box{
        padding: 4vw 0 0 20px;
    }
    #about .platform-wrap .picksell .txt-box em{
        width:40px;
        height:23px;
        margin-bottom: 15px;
    }
    #about .platform-wrap .makelink .txt-box{
        padding: 7.5vw 0 0 9.5vw;
    }
    #about .platform-wrap .makelink .txt-box em{
        width:100px;
        height:20px;
        margin-bottom:16px;
    }
    #about .platform-wrap .makelink .img-box{
        width: 45%;
    }
    /*#about .makelink-wrap{*/
    /*    padding: 80px 0 94px;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox p{*/
    /*    width: 64%;*/
    /*    font-size: 16px;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li:nth-child(2){*/
    /*    margin: 0 20px;*/
    /*}*/
    #about .section04{
        padding: 80px 0 94px;
    }
    #about .section04 .feature-wrap{
        margin-top: 0;
    }
    #about .section04 .instaform-wrap{
        padding-top: 122px;
    }
    #about .section04 .instaform-wrap .txtbox{
        padding-left: 2.24%;
    }
    #about .section04 .instaform-wrap .txtbox::before{
        width: 368px;
    }
    #about .section04 .instaform-wrap .txtbox strong{
        font-size: 30px;
    }
    #about .section04 .instaform-wrap .txtbox p{
        font-size: 16px;
    }
    #about .section04 .instaform-wrap .btn-wrap{
        top: 55px;
    }
    #about .smartorder-wrap{
        padding: 80px 0 100px;
    }
    #about .smartorder-wrap .info-box .imgbox img{
        top: 50%;
        transform: translateY(-50%);
    }
    #about .smartorder-wrap .info-box .txtbox strong{
        font-size:24px;
        line-height:1.35;
    }
    #about .smartorder-wrap .info-box .txtbox p{
        font-size: 15px;
        padding: 5.65% 0 6.8%;
    }
    #about .section05{
        padding-top: 80px;
    }
    #about .section06{
        padding-top:92px;
    }
    #about .section06 .link-lst-wrap div{
        padding:5.2% 4.8% 16%;
        margin: 0 10px;
        background-size:48% auto;
        background-position:right 10% bottom 16%;
    }
    #about .section06 .link-lst-wrap div:last-child{
        background-size:38% auto;
        background-position:right 0 bottom 16%;
    }
    #about .section06 .link-lst-wrap strong{
        font-size:24px;
    }
    #about .section06 .link-lst-wrap p{
        width:66%;
        font-size:15px;
        line-height:1.6;
        padding-top: 16px;
    }
}
@media only screen and (max-width: 991px){
    #about .sub-page-section .txt-box strong{
        width: 280px;
        margin: 0 auto;
    }
    #about .section02 .inner{
        margin: 0 auto;
    }
    #about .section02 ul{
        overflow-x: auto;
        width: 100%;
        margin: 0;
        padding:0 4%;
        white-space: nowrap;
    }
    #about .section02 li{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: -webkit-inline-flex;
        display: inline-flex;
        flex: 0 0 auto;
        width:48%;
        margin:0 1.2%;
    }
    #about .platform-wrap .picksell .txt-box p{
        width: 70%;
    }
    /*#about .makelink-wrap .txt-wrap strong span{*/
    /*    width: 150px;*/
    /*    margin: 0 0 .5% 1%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box{*/
    /*    padding-top: 7.16%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li:nth-child(2){*/
    /*    margin: 0 15px;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li div{*/
    /*    margin-top: 5.87%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li strong{*/
    /*    margin-bottom: 2.65%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox{*/
    /*    margin-top: 3%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox p{*/
    /*    font-size: 15px;*/
    /*}*/
    #about .section04 .feature-txt-list li.swiper-pagination-bullet{
        padding-left: 20px;
        border-left-width:3px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet .txt {
        padding-left: 3.5vw;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong{
        font-size: 21px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong::before{
        width: 24px;
        height: 24px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet p{
        width: 90%;
        font-size: 15px;
        padding-top: 6px;
    }
    #about .section04 .instaform-wrap{
        width:90%;
        padding-top:88px;
        margin:0 auto;
    }
    #about .section04 .instaform-wrap .txtbox{
        padding-left: 0;
        margin-top: 3%;
    }
    #about .section04 .instaform-wrap .txtbox::before{
        display: none;
    }
    #about .section04 .instaform-wrap .txtbox strong{
        width: 100%;
        font-size: 26px;
        line-height:1.3185;
        margin-bottom: 1.2%;
    }
    #about .section04 .instaform-wrap .txtbox p{
        width: 76%;
        font-size: 15px;
        line-height:1.778;
    }
    #about .section04 .instaform-wrap .btn-wrap{
        position: relative;
        top: 0;
        margin-top:3.2vw;
    }
    #about .section06 .link-lst-wrap div{
        margin:0 .8%;
        background-size: 55% auto;
        background-position: right 16% bottom 14%;
    }
    #about .section06 .link-lst-wrap div:last-child{
        background-position: right 0 bottom 10%;
    }
}
@media only screen and (max-width: 768px){
    #about .section02 li{
        padding-top: 55px;
        border-radius:8px;
    }
    #about .section02 .txt-box{
        padding:0 8% 0 15%;
    }
    #about .section02 .txt-box strong{
        font-size:24px;
    }
    #about .section02 .txt-box p{
        font-size: 15px;
    }
    #about .platform-wrap .cont-wrap > div{
        width:72%;
        padding:44px 0;
        margin: 0 auto;
    }
    #about .platform-wrap .platform-cont {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    #about .platform-wrap .txt-box{
        font-size: 15px;
    }
    #about .platform-wrap .txt-box strong{
        font-size:26px;
        padding-bottom:10px;
    }
    #about .platform-wrap .btn-wrap{
        margin-top:3.2vw;
    }
    #about .platform-wrap :is(.picksell, .makelink) :is(.img-box, .txt-box){
        width: 100%;
    }
    #about .platform-wrap :is(.picksell, .makelink) .txt-box{
        padding-top: 5.3vw;
    }
    #about .platform-wrap .picksell .img-box{
        order: 1;
        height: auto;
    }
    #about .platform-wrap .picksell .txt-box{
        order: 2;
        padding-left: 0;
    }
    #about .platform-wrap .picksell .txt-box p{
        width:76%;
    }
    #about .platform-wrap .makelink .platform-cont{
        width:96%;
    }
    #about .platform-wrap .makelink .txt-box{
        padding-left: 0;
    }
    #about .platform-wrap .makelink .txt-box p{
        width:90%;
    }
    #about .platform-wrap .makelink .txt-box strong br{
        display: none;
    }
    /*#about .makelink-wrap{*/
    /*    padding: 60px 0;*/
    /*}*/
    /*#about .makelink-wrap .txt-wrap strong span{*/
    /*    width: 120px;*/
    /*    margin: 0 0 .3% 1%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox{*/
    /*    margin-top: 3.4%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box{*/
    /*    -webkit-box-orient: vertical;*/
    /*    -webkit-box-direction: normal;*/
    /*    -ms-flex-direction: column;*/
    /*    -webkit-flex-direction: column;*/
    /*    flex-direction: column;*/
    /*    padding-top: 6.35%;*/
    /*    margin-top: 5.25%;*/
    /*    border-top: 1px solid #ebebeb;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li{*/
    /*    width: 90%;*/
    /*    margin: 0;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li:nth-child(2){*/
    /*    margin: 4.15% 0;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li div{*/
    /*    font-size: 13px;*/
    /*    margin-top: 2.6%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li strong{*/
    /*    font-size: 18px;*/
    /*    margin-bottom: 1%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox p{*/
    /*    width: 85%;*/
    /*}*/
    #about .section04{
        padding-bottom: 80px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet{
        padding-left: 2vw;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet .txt{
        padding-left: 4vw;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong{
        font-size: 18px;
    }
    #about .section04 .instaform-wrap .txtbox{
        margin-top:4.8vw;
    }
    #about .section04 .instaform-wrap .txtbox strong{
        font-size:26px;
        margin-bottom:10px;
    }
    #about .section04 .instaform-wrap .txtbox p{
        width:72%;
    }
    #about .smartorder-wrap{
        padding-bottom: 80px;
    }
    #about .section05 .img-wrap{
        width: 120%;
        margin-left: -11%;
    }
    #about .section06 .link-lst-wrap div{
        width: 50%;
        padding: 6.05% 6.05% 23.2%;
        border-radius:8px;
    }
}
@media only screen and (max-width:767px){
    #about .section04 .feature-wrap {
        margin:0 auto;
        width:90%;
    }
    #about .section04 .feature-cont{
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    #about .section04 .feature-img{
        order: 1;
        width: 100%;
        max-width: unset;
    }
    #about .section04 .feature-img .swiper-horizontal>.swiper-scrollbar{
        display: block;
    }
    #about .section04 .feature-txt{
        position: relative;
        order: 2;
        width: 100%;
        margin-top:4vw;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet{
        opacity: 0;
        display: none;
        padding: 0;
        border-left: none;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet-active{
        opacity: 1;
        display: block;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet .txt{
        padding: 0 32px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong{
        font-size:22px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong::before{
        top:0;
        width:25px;
        height:25px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet p{
        padding-top:10px;
    }
}
@media only screen and (max-width: 640px){
    #about .section02 li{
        width: 65%;
    }
    #about .section04 .instaform-wrap .txtbox p{
        width:88%;
    }
    #about .smartorder-wrap .info-box{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        width: 80%;
        margin: 0 auto;
    }
    #about .smartorder-wrap .info-box > div{
        width: 100%;
    }
    #about .smartorder-wrap .info-box .imgbox{
        padding:12% 6% 8.4%;
    }
    #about .smartorder-wrap .info-box .imgbox img{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        transform: none;
    }
    #about .smartorder-wrap .info-box .txtbox{
        padding:9% 10% 8.5%;
    }
    #about .smartorder-wrap .info-box .txtbox p{
        padding:4% 0 8%;
    }
    #about .section06 .link-lst-wrap{
        margin: 0 auto;
    }
    #about .section06 .link-lst-wrap{
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    #about .section06 .link-lst-wrap div{
        width:84%;
        max-width:440px;
        padding:9% 8% 30%;
        background-size:48% auto;
        background-position:right 12% bottom 14%;
    }
    #about .section06 .link-lst-wrap div:last-child{
        background-size:36% auto;
        background-position:right 1% bottom 15%;
    }
    #about .section06 .link-lst-wrap div + div{
        margin-top:4%;
    }
}
@media only screen and (max-width: 575px){
    #about .sub-page-section .txt-box strong{
        width: 260px;
    }
    #about .section02 .txt-wrap strong{
        width: 260px;
        margin: 0 auto;
    }
    #about .section02 .txt-box {
        padding: 0 8% 0 12%;
    }
    #about .section02 .txt-box em{
        font-size: 12px;
    }
    #about .section02 .txt-box strong{
        font-size: 23px;
    }
    #about .section02 .txt-box p{
        font-size: 14px;
    }
    #about .section02 li{
        margin:0 2%;
    }
    #about .section03{
        padding:84px 0 90px;
    }
    #about .section03 .txt-wrap strong{
        width: 230px;
        margin: 0 auto;
    }
    #about .section03 .img-wrap{
        width: 90%;
    }
    #about .platform-wrap .cont-wrap > div{
        width: 100%;
        padding: 9vw 0;
    }
    #about .platform-wrap :is(.picksell, .makelink) .txt-box{
        padding-left:4.8%;
    }
    #about .platform-wrap .txt-wrap strong {
        width:52vw;
        margin: 0 auto;
    }
    #about .platform-wrap .txt-box{
        font-size: 14px;
    }
    #about .platform-wrap .txt-box strong{
        font-size: 24px;
    }
    #about .platform-wrap .picksell .txt-box p{
        width:86%;
    }
    #about .platform-wrap .picksell .txt-box em{
        width: 38px;
        height: 22px;
    }
    #about .platform-wrap .makelink .txt-box em{
        width: 103px;
        height: 20px;
    }
    /*#about .makelink-wrap .txt-wrap strong span{*/
    /*    width: 110px;*/
    /*    height: 26px;*/
    /*    margin: 0 0 .4% 1.5%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox p{*/
    /*    width: 96%;*/
    /*    font-size: 14px;*/
    /*}*/
    #about .section04 .feature-wrap{
        width:100%;
    }
    #about .section04 .txt-wrap strong{
        width: 280px;
        margin: 0 auto;
    }
    #about .section04 .feature-txt{
        margin-top:5.6vw;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet .txt{
        padding-left:36px;
    }

    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong{
        font-size:20px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet strong::before{
        left:3px;
    }
    #about .section04 .feature-txt-list li.swiper-pagination-bullet p{
        width:96%;
        font-size:14px;
        line-height:1.5;
    }
    #about .section04 .instaform-wrap{
        width:100%;
        padding-top: 18vw;
    }
    #about .section04 .instaform-wrap .imgbox{
        overflow: hidden;
    }
    #about .section04 .instaform-wrap .imgbox > div img{
        width: 126%;
        max-width: unset;
        transform: translateX(-10%);
    }
    #about .section04 .instaform-wrap .txtbox{
        padding-left:4.8%;
        margin-top:5.3vw;
    }
    #about .section04 .instaform-wrap .txtbox strong{
        width:80%;
        font-size:24px;
    }
    #about .section04 .instaform-wrap .txtbox p{
        width:84%;
        font-size: 14px;
    }
    #about .section04 .instaform-wrap .btn-wrap{
        margin-top:5vw;
    }
    #about .smartorder-wrap .info-box{
        width: 85%;
    }
    #about .smartorder-wrap .info-box .txtbox strong{
        font-size: 22px;
        line-height: 1.4;
    }
    #about .smartorder-wrap .info-box .txtbox p{
        font-size: 14px;
    }
    #about .section05 .img-wrap{
        width: 163%;
        margin-left: -30%;
    }
    #about .section06 .link-lst-wrap div{
        min-width:280px;
        background-size:168px auto;
        background-position:right 12% bottom 16%;
    }
    #about .section06 .link-lst-wrap div:last-child {
        background-size:120px auto;
        background-position: right 1% bottom 14%;
    }
    #about .section06 .link-lst-wrap strong{
        font-size:22px;
    }
    #about .section06 .link-lst-wrap p{
        width:70%;
        font-size:14px;
        padding-top:10px;
    }
}
@media only screen and (max-width: 425px) {
    #about .section02 {
        padding-bottom: 80px;
    }
    #about .section02 ul {
        padding: 0 8%;
    }
    #about .section02 li {
        width: 92%;
        min-width: 280px;
        padding-top: 50px;
    }
    #about .section03 .img-wrap {
        width: 102%;
        margin-left: -2%;
    }
    #about .platform-wrap :is(.picksell, .makelink) .txt-box{
        padding-top: 8vw;
    }
    #about .platform-wrap .makelink .txt-box p{
        width: 87%;
    }
    #about .platform-wrap .btn-wrap{
        margin-top:5vw;
    }
    /*#about .makelink-wrap .txt-wrap{*/
    /*    padding-bottom: 24px;*/
    /*}*/
    /*#about .makelink-wrap .txt-wrap strong span{*/
    /*    margin: 2% auto;*/
    /*}*/
    /*#about .makelink-wrap .info-box .txtbox{*/
    /*    margin-top: 5%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box{*/
    /*    padding-top: 9.25%;*/
    /*    margin-top: 7.25%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li div{*/
    /*    margin-top: 4.16%;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li:nth-child(2){*/
    /*    margin: 6.5% 0;*/
    /*}*/
    /*#about .makelink-wrap .info-box .list-box li strong{*/
    /*    margin-bottom: 1.4%;*/
    /*}*/
    /*#about .makelink-wrap .btn-wrap{*/
    /*    margin-top: 4.16%;*/
    /*}*/
    #about .section04 .txt-wrap {
        width: 100%;
    }
    #about .section04 .instaform-wrap .txtbox{
        margin-top:6.8vw;
    }
    #about .smartorder-wrap .info-box .imgbox{
        padding:15% 6% 10.4%;
    }
    #about .smartorder-wrap .info-box .txtbox {
        padding:11% 10.4% 13% 11%;
    }
    #about .section06 .link-lst-wrap div:last-child p {
        width: 80%;
    }
    #about .section06 .link-lst-wrap div{
        padding:12% 10.4% 144px;
    }
    #about .smartorder-wrap .info-box {
        width: 90%;
    }
}
@media only screen and (max-width: 375px){
    #about .section04 .txt-wrap strong{
        width: 260px;
    }
    #about .section04 .txt-wrap p{
        width: 76%;
        margin: 0 auto;
    }
    #about .smartorder-wrap .info-box{
        width: 100%;
    }
}
@media only screen and (max-width: 360px){
    #about :is(.section03, .section04, .smartorder-wrap) .txt-wrap p{
        width: 70%;
        margin: 0 auto;
    }
    #about .section05 .txt-wrap p{
        width: 90%;
        margin: 0 auto;
    }
    #about .snection06 .link-lst-wrap div:last-child p {
        width:65%;
    }
}


/* 부가서비스 */
#info .sub-page-section{
    background: url("/images/sub/img_info_bg.png") no-repeat center;
    background-size:cover;
}
#info .section02{
    overflow: hidden;
    padding-top: 120px;
}
#info .section02 ~ section:not(:last-child){
    margin-top: 150px;
}
#info .section04 + .sub-page-bottom{
    margin-top: 210px;
}
#info .service-lst-wrap{
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin: -10px -10px 0;
}
#info .service-lst-wrap li{
    display: inline-block;
    width: calc(100% / 4 - 20px);
    margin: 10px;
    border-radius: 16px;
    border: 1px solid #e6e8eb;
    background: #fff;
}
#info .service-lst-wrap li a{
    position: relative;
    display: block;
    font-size: 14px;
    padding: 156px 20px 32px 36px;
}
#info .service-lst-wrap li a > em{
    position: absolute;
    top: 36px;
    left: 36px;
    width: 78px;
    height: 78px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px 0 rgba(0,0,0,.12);
}
#info .service-lst-wrap li.picksell em{
    background: linear-gradient(180deg, #4f94f7 0%, #3182f6 100%);
}
#info .service-lst-wrap li a > em::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    transform: translate(-50%, -50%);
}
#info .service-lst-wrap li a > strong{
    word-break: keep-all;
    display: inline-block;
    color: #1E2023;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
}
#info .service-lst-wrap li a > p{
    width:88%;
    padding: 10px 0 20px;
    color: #666;
    line-height: 1.5;
    word-break: keep-all;
}
#info .service-lst-wrap li a > p span{
    display:inline-block;
}
#info .service-lst-wrap li a > span{
    position: relative;
    display: inline-block;
    color: #AC8C6D;
    font-weight: 500;
    line-height: 1.429;
    padding-right: 9px;
}
#info .service-lst-wrap li a > span::after{
    content: '';
    position: absolute;
    top:45%;
    right: 0;
    width: 6px;
    height: 6px;
    border-top: 1px solid #AC8C6D;
    border-right: 1px solid #AC8C6D;
    transform: rotate(45deg) translateY(-50%);
}
@media only screen and (max-width:1200px) {
    #info .service-lst-wrap{
        margin:-8px -8px 0;
    }
    #info .service-lst-wrap li{
        margin:8px;
    }
}
@media only screen and (max-width: 1024px) {
    #info .section02 ~ section:not(:last-child){
        margin-top: 100px;
    }
    #info .section02{
        padding-top: 100px;
    }
    #info .service-lst-wrap li {
        width: calc(100% / 3 - 16px);
    }
    #info .service-lst-wrap li a > p{
        width:80%;
    }
}
@media only screen and (max-width: 991px) {
    #info .sub-page-section .txt-box strong{
        width:280px;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 768px) {
    #info .sub-page-section .txt-box strong{
        width:260px;
    }
    #info .section02{
        padding-top: 60px;
    }
    #info .section02 ~ section:not(:last-child){
        margin-top:80px;
    }
    #info .service-lst-wrap li{
        width: calc(100% / 2 - 16px);
        border-radius:8px;
    }
    #info .service-lst-wrap li a > strong{
        font-size:21px;
    }
    #info .service-lst-wrap li a > p{
        width:65%;
    }
}
@media only screen and (max-width: 575px) {
    #info .sub-page-section .txt-box strong{
        width: 230px;
    }
    #info .section02 ~ section:not(:last-child){
        margin-top:64px;
    }
    #info .section02 .txt-wrap p{
        width:200px;
        margin: 0 auto;
    }
    #info :is(.section03, .section04) .txt-wrap p{
        width: 34%;
        margin: 0 auto;
    }
    #info .service-lst-wrap li {
        display: block;
        width:60%;
        min-width:300px;
        margin:0 auto 4%;
    }
    #info .service-lst-wrap li a{
        padding:160px 8% 40px 8%;
        text-align:center;
    }
    #info .service-lst-wrap li a > em{
        top:48px;
        left:50%;;
        border-radius:8px;
        transform:translateX(-50%);
    }
    #info .service-lst-wrap li a > p{
        padding:8px 0 16px;
        margin:0 auto;
    }
}
@media only screen and (max-width: 425px) {
    #info :is(.section03, .section04) .txt-wrap p{
        width: 47%;
    }
    #info .service-lst-wrap{
        margin:0;
    }
    #info .service-lst-wrap li{
        width:80%;
        min-width:280px;
    }
}
@media only screen and (max-width: 375px) {
    #info :is(.section03, .section04) .txt-wrap p {
        width: 60%;
    }
    #info .service-lst-wrap li a > p {
        width:84%;
    }
}

#info .service-lst-wrap .designpro em::after{
    background-image: url("/images/sub/ico_designpro.svg");
}
#info .service-lst-wrap .easyeditor em::after{
    background-image: url("/images/sub/ico_easyeditor.svg");
}
#info .service-lst-wrap .designcenter em::after{
    background-image: url("/images/sub/ico_designcenter.svg");
}
#info .service-lst-wrap .aibanner em::after{
    background-image: url("/images/sub/ico_aibanner.svg");
}
#info .service-lst-wrap .smartorder em::after{
    background-image: url("/images/sub/ico_smartorder.svg");
}
#info .service-lst-wrap .instaform em::after{
    background-image: url("/images/sub/ico_instaform.svg");
}
#info .service-lst-wrap .deputypay em::after{
    background-image: url("/images/sub/ico_deputypay.svg");
}
#info .service-lst-wrap .automessage em::after{
    background-image: url("/images/sub/ico_automessage.svg");
}
#info .service-lst-wrap .coupon em::after{
    background-image: url("/images/sub/ico_coupon.svg");
}
#info .service-lst-wrap .management em::after{
    background-image: url("/images/sub/ico_management.svg");
}
#info .service-lst-wrap .login em::after{
    background-image: url("/images/sub/ico_login.svg");
}
#info .service-lst-wrap .autocomplete em::after{
    background-image: url("/images/sub/ico_autocomplete.svg");
}
#info .service-lst-wrap .dahaedream em::after{
    background-image: url("/images/sub/ico_dahaedream.svg");
}
#info .service-lst-wrap .easypayment em::after{
    background-image: url("/images/sub/ico_easypayment.svg");
}
#info .service-lst-wrap .snslogin em::after{
    background-image: url("/images/sub/ico_snslogin.svg");
}
#info .service-lst-wrap .bankalarm em::after{
    background-image: url("/images/sub/ico_bankalarm.svg");
}
#info .service-lst-wrap .picksell em::after{
    background-image: url("/images/sub/ico_picksell.svg");
}
#info .service-lst-wrap .makelink em::after{
    background-image: url("/images/sub/ico_makelink.svg");
}
#info .service-lst-wrap .hyundai em::after{
    background-image: url("/images/sub/ico_hyundai.svg");
}
#info .service-lst-wrap .shortsworks em::after{
    background-image: url("/images/sub/ico_shortsworks.svg");
}
#info .service-lst-wrap .hanjin em::after{
    background-image: url("/images/sub/ico_hanjin.svg");
}
#info .service-lst-wrap .hanjin-pro em::after{
    background-image: url("/images/sub/ico_hanjin_pro.svg");
}
#info .service-lst-wrap .miricanvas em::after{
    background-image: url("/images/sub/ico_miricanvas.svg");
}
#info .service-lst-wrap .thekoc em::after{
    background-image: url("/images/sub/ico_thekoc.svg");
}
#info .service-lst-wrap .socialbiz em::after{
    background-image: url("/images/sub/ico_socialbiz.png");
    background-size: 46px 46px;
}
#info .service-lst-wrap .cvsdelivery em::after{
    background-image: url("/images/sub/ico_cvsdelivery.svg");
}
#info .service-lst-wrap .coworkcity em::after{
    background-image: url("/images/sub/ico_coworkcity.svg");
}

/* 부가서비스 미입금 자동문자 */
#info-automessage .info-cont .info-panel .info-step li .ico-step::after{
    background: url("/images/sub/ico_clock.svg") no-repeat center;
    background-size: 100%;
}
#info-automessage .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
    width: 53px;
    background: url("/images/sub/ico_sendmessage.svg") no-repeat center;
    background-size: 100%;
}
#info-automessage .info-cont .info-panel .info-step li:last-child .ico-step::after{
    background: url("/images/sub/ico_complete01.svg") no-repeat center;
    background-size: 100%;
}
@media only screen and (max-width: 1024px) {
    #info-automessage .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
        width: 48px;
    }
}
@media only screen and (max-width: 991px) {
    #info-automessage .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
        width: 46px;
    }
}
@media only screen and (max-width:768px) {
    #info-automessage .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
        width: 37px;
    }
}
@media only screen and (max-width: 425px) {
    #info-automessage .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
        width: 32px;
    }
}

/* 부가서비스 적립금&쿠폰 */
#info-coupon .sub-page-wrap .sub-tit-wrap{
    background: #FDF8ED;
}
#info-coupon .sub-page-wrap .sub-tit-wrap em{
    color: #FF7500;
}
#info-coupon .info-cont .info-panel .info-step li .ico-step::after{
    background: url("/images/sub/ico_setting.svg") no-repeat center;
    background-size: 100%;
}
#info-coupon .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
    background: url("/images/sub/ico_gift.svg") no-repeat center;
    background-size: 100%;
}
#info-coupon .info-cont .info-panel .info-step li:last-child .ico-step::after{
    background: url("/images/sub/ico_chart.svg") no-repeat center;
    background-size: 100%;
}

/* 부가서비스 부계정관리 */
#info-management .sub-page-wrap .sub-tit-wrap{
    background: #F2F8FD;
}
#info-management .sub-page-wrap .sub-tit-wrap em{
    color: #208ADF;
}
#info-management .info-cont .info-panel .info-step li .ico-step::after{
    background: url("/images/sub/ico_register.svg") no-repeat center;
    background-size: 100%;
}
#info-management .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
    background: url("/images/sub/ico_listmenu.svg") no-repeat center;
    background-size: 100%;
}
#info-management .info-cont .info-panel .info-step li:last-child .ico-step::after{
    background: url("/images/sub/ico_complete02.svg") no-repeat center;
    background-size: 100%;
}

/* 부가서비스 다중 로그인 */
#info-login .sub-page-wrap .sub-tit-wrap{
    background: #F5F3FC;
}
#info-login .sub-page-wrap .sub-tit-wrap em{
    color: #7A6BC7;
}
#info-login .info-cont .info-panel .info-step li .ico-step::after{
    background: url("/images/sub/ico_bankbook.svg") no-repeat center;
    background-size: 100%;
}
#info-login .info-cont .info-panel .info-step li:nth-child(2) .ico-step::after{
    background: url("/images/sub/ico_typing.svg") no-repeat center;
    background-size: 100%;
}
#info-login .info-cont .info-panel .info-step li:last-child .ico-step::after{
    background: url("/images/sub/ico_complete03.svg") no-repeat center;
    background-size: 100%;
}

/* 부가서비스 하위페이지 상단 공통 스타일 */
.sub-page-wrap .sub-tit-wrap{
    overflow: hidden;
    height: 340px;
    background: #FDF2F3;
}
.sub-page-wrap .sub-tit-wrap .inner{
    height: 100%;
}
.sub-page-wrap .sub-tit-wrap .tit-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 100%;
}
.sub-page-wrap .sub-tit-wrap .txt-wrap{
    padding: 100px 0;
}
.sub-page-wrap .sub-tit-wrap strong{
    display: inline-block;
    font-size: 40px;
    line-height: 1.2;
    padding-bottom: 32px;
}
.sub-page-wrap .sub-tit-wrap p{
    word-break: keep-all;
    color: #555;
    font-size: 18px;
    line-height: 1.667;
}
.sub-page-wrap .sub-tit-wrap em{
    color: #FF676A;
    font-weight: 600;
}
@media only screen and (max-width: 1024px) {
    .sub-page-wrap .sub-tit-wrap .tit-wrap{
        padding: 68px 8% 60px;
    }
}
@media only screen and (max-width: 991px) {
    .sub-page-wrap .sub-tit-wrap .tit-wrap{
        padding: 68px 4% 60px;
    }
}
@media only screen and (max-width: 768px) {
    .sub-page-wrap .sub-tit-wrap {
        height: auto;
    }
    .sub-page-wrap .sub-tit-wrap .tit-wrap {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        padding: 8vw 0 8.5vw;
    }
    .sub-page-wrap .sub-tit-wrap .txt-box {
        margin-bottom: 24px;
    }
}
@media only screen and (max-width: 575px) {
    .sub-page-wrap .sub-tit-wrap .tit-wrap{
        padding: 10vw 0 9.4vw;
    }
}



/* 부가서비스 하위페이지 컨텐츠 공통 스타일 */
.info-subpage .info-cont {
    width: 1200px;
    margin: 10px auto 203px;
}
.info-subpage .info-cont .info-panel {
    position: relative;
    padding-top: 110px;
}
.info-subpage .info-cont .info-panel h3 {
    display: inline-block;
    font-size: 28px;
    line-height: 1.179;
    padding-bottom: 12px;
    margin: 0 0 38px;
    border-bottom: 2px solid #333;
}
.info-subpage .info-cont .info-panel h3:before{
    content: "";
    position: absolute;
    top: 157px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #e1e1e1;
}
.info-subpage .info-cont .info-panel ol li {
    word-break: keep-all;
    position: relative;
    color: #666;
    font-size: 18px;
    line-height: 30px;
    padding-left: 43px;
}
.info-subpage .info-cont .info-panel ol li + li {
    margin-top: 18px;
}
.info-subpage .info-cont .info-panel ol li span {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    color: #fff;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    background: #4d4d4d;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.info-subpage .info-cont .info-panel .info-step {
    width: 90%;
    font-size: 0;
    margin: 72px auto 0;
}
.info-subpage .info-cont .info-panel .info-step li {
    position: relative;
    display: inline-block;
    width: 16%;
    color: #333;
    font-size: 15px;
    vertical-align: top;
    letter-spacing: -.05px;
}
.info-subpage .info-cont .info-panel .info-step li:not(:first-child) {
    margin-left: 26%;
}
.info-subpage .info-cont .info-panel .info-step li .ico-step {
    display: inline-block;
    width: 160px;
    height: 160px;
    border: 1px solid #e1e1e1;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.info-subpage .info-cont .info-panel .info-step li .ico-step:after {
    content: "";
    display: block;
    width: 45px;
    height: 45px;
    margin: 57px auto;
}
.info-subpage .info-cont .info-panel .info-step li .step-tit {
    word-break: keep-all;
    font-size: 24px;
    line-height: 1.5;
    padding: 0 25px;
    margin-top: 7px;
}
.info-subpage .info-cont .info-panel .info-step li .step-tit .step-num {
    font-size: 34px;
    margin-bottom: 14px;
}
.info-subpage .info-cont .info-panel .info-step li .step-tit span {
    font-size: 26px;
    margin-left: 8px;
}
.info-subpage .info-cont .info-panel .info-step li:not(:last-child):after {
    content: "";
    position: absolute;
    top: 267px;
    right: -80%;
    display: inline-block;
    width: 56px;
    height: 11px;
    margin-top: -20px;
    background: url(/images/info/autocomplete/ico_arrow.png) no-repeat;
}
.info-subpage .info-cont .info-panel .info-txt{
    color: #666;
    font-size: 18px;
    line-height: 1.167;
}
@media only screen and (max-width: 1300px) {
    .info-subpage .info-cont{
        width: 100%;
        padding: 0 30px;
    }
}

@media only screen and (max-width: 1024px) {
    .info-subpage .info-cont .info-panel{
        padding-top: 80px;
    }
    .info-subpage .info-cont .info-panel h3:before{
        top: 127px;
    }
    .info-subpage .info-cont .info-panel .info-step{
        width: 87%;
        margin-top: 60px;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step:after{
        width: 40px;
        height: 40px;
        margin: 60px auto;
    }
    .info-subpage .info-cont .info-panel .info-step li:not(:last-child):after{
        top: 260px;
        right: -90%;
    }
    .info-subpage .info-cont .info-panel ol li+li{
        margin-top: 14px;
    }
}

@media only screen and (max-width: 991px) {
    .info-subpage .info-cont .info-panel .info-step{
        margin-top: 50px;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step{
        width: 146px;
        height: 146px;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step:after{
        width: 38px;
        height: 38px;
        margin: 53px auto;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit{
        font-size: 22px;
        margin-top: 10px;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit .step-num{
        font-size: 30px;
        margin-bottom: 8px;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit span{
        font-size: 22px;
    }
    .info-subpage .info-cont .info-panel ol li{
        font-size: 16px;
        line-height: 28px;
        padding-left: 38px;
    }
    .info-subpage .info-cont .info-panel ol li span{
        width: 28px;
        height: 28px;
        font-size: 14px;
        line-height: 28px;
    }
    .info-subpage .info-cont .info-panel .info-txt{
        font-size: 16px;
    }
}

@media only screen and (max-width: 768px) {
    .info-subpage .sub-page-wrap .sub-tit-wrap strong{
        font-size: 32px;
        padding-bottom: 10px;
    }
    .info-subpage .sub-page-wrap .sub-tit-wrap p{
        font-size: 16px;
    }
    .info-subpage .sub-page-wrap .sub-tit-wrap .img-box{
        width: 100%;
    }
    .info-subpage .sub-page-wrap .sub-tit-wrap .img-box img{
        width: 40%;
    }
    .info-subpage .info-cont{
        margin: 0 0 130px;
    }
    .info-subpage .info-cont .info-panel{
        padding-top: 60px;
    }
    .info-subpage .info-cont .info-panel h3:before{
        top: 107px;
    }
    .info-subpage .info-cont .info-panel .info-step{
        width: 100%;
        margin: 0;
    }
    .info-subpage .info-cont .info-panel .info-step li{
        width: 100%;
        padding: 5vw;
        font-size: 0;
        letter-spacing: -.05rem;
        border: 1px solid #E1E1E1;
    }
    .info-subpage .info-cont .info-panel .info-step li:not(:first-child){
        margin: 18px 0 0 0;
    }
    .info-subpage .info-cont .info-panel .info-step li:not(:last-child):after{
        display: none;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step{
        position: relative;
        width: auto;
        height: auto;
        vertical-align: middle;
        padding-right: 4.8%;
        border: none;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step::before{
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 26px;
        background: #ddd;
        transform: translateY(-50%);
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step:after{
        width: 32px;
        height: 32px;
        margin: 0 auto;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit{
        display: inline-block;
        font-size: 20px;
        vertical-align: middle;
        margin-top: 0;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit br{
        display: none;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit .step-num{
        font-size: 26px;
        margin-bottom: 0;
    }
    .info-subpage .info-cont .info-panel ol li+li{
        margin-top: 10px;
    }
}

@media only screen and (max-width: 575px) {
    .info-subpage .sub-page-wrap .sub-tit-wrap strong{
        font-size: 30px;
    }
    .info-subpage .sub-page-wrap .sub-tit-wrap p{
        font-size: 15px;
        line-height: 1.667;
    }
    .info-subpage .info-cont{
        padding: 0 20px;
    }
    .info-subpage .info-cont .info-panel h3{
        font-size: 25px;
        margin-bottom: 32px;
    }
    .info-subpage .info-cont .info-panel h3:before{
        top: 103px;
    }
    .info-subpage .info-cont .info-panel .info-step li:not(:first-child){
        margin-top: 14px;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step::before{
        height: 20px;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit{
        font-size: 16px;
        padding: 0 5%;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit .step-num{
        font-size: 21px;
    }
    .info-subpage .info-cont .info-panel .info-step li .step-tit span{
        font-size: 17px;
        margin-left: 6px;
    }
    .info-subpage .info-cont .info-panel ol li{
        font-size: 15px;
        line-height: 24px;
        padding-left: 34px;
    }
    .info-subpage .info-cont .info-panel ol li span{
        font-size: 12px;
        width: 24px;
        height: 24px;
        line-height: 24px;
    }
    .info-subpage .info-cont .info-panel .info-txt{
        font-size: 15px;
    }
}

@media only screen and (max-width: 425px) {
    .info-subpage .sub-page-wrap .sub-tit-wrap .img-box img{
        width: 50%;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step{
        padding-right: 5.75%;
    }
    .info-subpage .info-cont .info-panel .info-step li .ico-step:after{
        width: 28px;
        height: 28px;
    }
    .info-subpage .info-cont .info-panel ol li,
    .info-subpage .info-cont .info-panel .info-txt{
        font-size: 14px;
    }
    .info-subpage .info-cont .info-panel .info-step li{
        padding: 5vw 6vw;
    }
}


/* 가입안내 */
#joininfo .sub-page-section{
    background: url("/images/sub/img_joininfo_bg.png") no-repeat center;
    background-size:cover;
}
#joininfo .section02{
    padding: 120px 0 200px;
}
#joininfo .section02 ul{
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    margin:-15px 15px 0;
}
#joininfo .section02 li{
    position: relative;
    overflow: hidden;
    margin: 15px;
    border-radius: 16px;
}
#joininfo .section02 li ~ li{
    width: calc(50% - 30px);
}
#joininfo .section02 li:nth-child(2){
    background: url("/images/sub/joininfo_sec02_bg02.png") no-repeat center;
    background-size: cover;
}
#joininfo .section02 li:last-child{
    background: url("/images/sub/joininfo_sec02_bg03.png") no-repeat center;
    background-size: cover;
}
#joininfo .section02 li .txt-box{
    padding: 55px 0 232px 50px;
}
#joininfo .section02 li .txt-box em{
    display: block;
    color: #666;
    font-size: 16px;
    line-height: 1.188;
    margin-bottom: 10px;
}
#joininfo .section02 li .txt-box strong{
    word-break: keep-all;
    display: inline-block;
    font-size: 31px;
    font-weight: 700;
    line-height: 1.355;
}
#joininfo .section02 li.wide{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    color: #fff;
    width: 100%;
    background: url("/images/sub/joininfo_sec02_bg01.png") no-repeat center;
    background-size: cover;
}
#joininfo .section02 li.wide .txt-box{
    padding: 97px 0 95px 120px;
}
#joininfo .section02 li.wide em{
    background: linear-gradient(90deg, #8E7CDE -2.68%, #DC7FAF 41.21%, #E9CCC6 77.49%, #FFFFE1 109.68%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
#joininfo .section02 li.wide strong{
    display: block;
    font-size: 36px;
    font-weight:500;
    line-height: 1.3058;
}
#joininfo .section02 li.wide a{
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight:500;
    padding:16px 65px 16px 27px;
    margin-top: 32px;
    border-radius: 4px;
    background: #6147D1;
}
#joininfo .section02 li.wide a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 25px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
#joininfo .section02 li.wide .img-box img{
    position: absolute;
}
#joininfo .section02 li.wide .img-box .card{
    top: 49px;
    right: 70px;
    width: 415px;
    height: auto;
}
#joininfo .section02 li.wide .img-box .phone{
    top: 18px;
    right: 153px;
    width: 274px;
    height: auto;
}
#joininfo .section02 .bnr-wrap{
    margin: 15px 30px 0;
    border-radius: 12px;
    background: #EEEFF4 url("/images/sub/joininfo_sec02_obj03.png") no-repeat top 0 left 250px;
    background-size: 141px auto;
}
#joininfo .section02 .bnr-wrap .txt-box{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    padding: 26px 0;
    margin-left: 147px;
}
#joininfo .section02 .bnr-wrap .txt-box p{
    word-break: keep-all;
    color: #262B3F;
    font-size: 17px;
    font-weight: 500;
    padding-right: 48px;
}
#joininfo .section02 .bnr-wrap .txt-box p::before{
    content: '';
    display: inline-block;
    width: 67px;
    height: 13px;
    margin-right: 4px;
    background: url("/images/sub/joininfo_sec02_obj04.svg") no-repeat center;
    background-size: 100%;
}
#joininfo .section02 .bnr-wrap .txt-box a{
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-weight:500;
    line-height: 1.231;
    padding:12px 29px 10px;
    border-radius: 4px;
    background: #262B3F;
}
#joininfo .section03{
    padding-bottom: 168px;
}
#joininfo .section03 .txt-wrap{
    padding-bottom:40px;
}
#joininfo .section03 .plan-wrap{
    height: 880px;
    margin: -15px 0 0 22px;
}
#joininfo .section03 .box-wrap{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    height: 100%;
}
#joininfo .section03 .box-wrap > div{
    position: relative;
}
#joininfo .section03 .box-wrap .txt-area{
    position: absolute;
    width: 100%;
    height: 100%;
}
#joininfo .section03 .box-wrap .txt-area strong{
    position: absolute;
    width: 100%;
    color: #fff;
    font-weight: 600;
    text-align: center;
}
#joininfo .section03 .box-wrap .txt-area ul{
    position: absolute;
}
#joininfo .section03 .box-wrap .left{
    width: 420px;
    height: 710px;
    background: url("/images/sub/joininfo_sec03_bg01.png") no-repeat center left;
    background-size: 100% 100%;
}
#joininfo .section03 .box-wrap .left::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    height: 100%;
    background: url("/images/sub/joininfo_sec03_bg_03.png") no-repeat center;
    background-size: 100% 100%;
}
#joininfo .section03 .box-wrap .left .txt-area strong{
    top: 37px;
    left: 0;
    font-size: 24px;
    line-height: 1.3335;
}
#joininfo .section03 .box-wrap .left .txt-area strong em{
    display: block;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.188;
}
#joininfo .section03 .box-wrap .left .txt-area ul{
    top: 154px;
    left: 115px;
    color: #979EAA;
}
#joininfo .section03 .box-wrap .left .txt-area li{
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}
#joininfo .section03 .box-wrap .left .txt-area li + li{
    padding-top: 41px;
}
#joininfo .section03 .box-wrap .left .txt-area .total{
    position: absolute;
    bottom: 32px;
    left: 143px;
    color: #979EAA;
    font-size: 18px;
    text-align: center;
    line-height: 1.4445;
}
#joininfo .section03 .box-wrap .left .txt-area .total em{
    font-weight: 600;
}
#joininfo .section03 .box-wrap .left .txt-area .total small{
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.167;
    padding-top: 2px;
}

#joininfo .section03 .box-wrap .right{
    width: 506px;
    height: 100%;
    margin-left: -16px;
    background: url("/images/sub/joininfo_sec03_bg02.png") no-repeat center right;
    background-size: 100% 100%;
}
#joininfo .section03 .box-wrap .right::before{
    content: '';
    position: absolute;
    top: 107px;
    right: -41px;
    width: 110px;
    height: 107px;
    background: url("/images/sub/joininfo_sec03_obj01.svg") no-repeat center;
    background-size: 100% 100%;
}
#joininfo .section03 .box-wrap .right::after{
    content: '';
    position: absolute;
    bottom: 38px;
    left: 124px;
    width: 281px;
    height: 69px;
    background: url("/images/sub/joininfo_sec03_obj02.svg") no-repeat center;
    background-size: 100% auto;
}
#joininfo .section03 .box-wrap .right .txt-area strong{
    top: 56px;
    left: 0;
    font-size: 26px;
    line-height: 1.3464;
}
#joininfo .section03 .box-wrap .right .txt-area ul{
    top: 199px;
    left: 136px;
}
#joininfo .section03 .box-wrap .right .txt-area li{
    word-break: keep-all;
    position: relative;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    line-height: 1.1875;
    padding-left: 31px;
}
#joininfo .section03 .box-wrap .right .txt-area li::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 19px;
    height: 19px;
    background: url("/images/sub/joininfo_sec03_obj03.svg") no-repeat center;
    background-size: 100%;
}
#joininfo .section03 .box-wrap .right .txt-area li + li{
    margin-top: 49px;
}
#joininfo .section03 .box-wrap .right .txt-area li small{
    word-break: keep-all;
    display: block;
    color: #979EAA;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.231;
    padding-top: 2px;
}

#joininfo .section04{
    padding-bottom: 180px;
}
#joininfo .section04 .txt-wrap{
    padding-bottom:32px;
}
#joininfo .section04 .cont-wrap > small{
    display: block;
    color: #999;
    font-size: 14px;
    line-height: 1.215;
    text-align: right;
    margin-bottom: 12px;
}
#joininfo .section05{
    padding-bottom: 188px;
}
#joininfo .section05 .txt-wrap{
    padding-bottom:60px;
}

/* 가입안내 테이블 */
#joininfo .table ul li + li{
    margin-top: 12px;
}
#joininfo .table .text-left{
    padding-left: 10px;
}
#joininfo .table .btn + .btn{
    margin-left: 12px;
}
#joininfo .table .btn-outline-brown{
    white-space: wrap;
    word-break: keep-all;
    position: relative;
    display: inline-block;
    font-size: 14px;
    line-height: 1.215;
    font-weight: 600;
    padding: 11px 40px 11px 25px;
    border-radius: 31px;
}
#joininfo .table .btn-outline-brown::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 27px;
    display: inline-block;
    width: 5px;
    height: 5px;
    border-top: 2px solid #AC8C6D;
    border-right: 2px solid #AC8C6D;
    transform: translateY(-50%) rotate(45deg);
}
#joininfo .table .btn-outline-brown.btn-download{
    padding-right: 45px;
}
#joininfo .table .btn-outline-brown.btn-download::after{
    right: 23px;
    display: inline-block;
    width: 17px;
    height: 17px;
    border: none;
    background: url("/images/sub/ico_download_brown.svg") no-repeat center;
    background-size: 100%;
    transform: translateY(-50%);
}
#joininfo .table .paylist{
    width: 70%;
    font-size: 0;
    margin: 0 auto;
}
#joininfo .table .paylist li{
    display: inline-block;
    margin: 12px 7px 0;
}
#joininfo .table ul li small{
    display: block;
}
#joininfo .section05 .table ul li{
    position: relative;
    padding-left: 12px;
}
#joininfo .section05 .table ul li::before{
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 6px;
    height: 1px;
    background: #333;
}
#joininfo .section06{
    padding-bottom: 230px;
}
#joininfo .section06 .txt-wrap strong{
    padding-bottom: 0;
}
#joininfo .section06 .cont-wrap ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#joininfo .section06 .cont-wrap li{
    width: calc(100% / 3);
}
#joininfo .section06 .cont-wrap li:nth-child(2){
    margin: 0 19px;
}
#joininfo .section06 .cont-wrap li a{
    display: block;
}
#joininfo .section06 .cont-wrap .img-box{
    overflow: hidden;
    display: block;
    margin-bottom: 22px;
    border-radius: 20px;
}
#joininfo .section06 .cont-wrap .txt-box{
    font-size: 14px;
    line-height: 1;
}
#joininfo .section06 .cont-wrap .txt-box strong{
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
}
#joininfo .section06 .cont-wrap .txt-box span::after{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 8px;
    background: url("/images/sub/ico_arrow_link.svg") no-repeat center;
    background-size: 100%;
}

@media only screen and (max-width: 1200px){
    #joininfo .section02 ul{
        margin: -15px 0 0;
    }
    #joininfo .section02 li.wide .txt-box{
        padding-left: 100px;
    }
    #joininfo .section02 .bnr-wrap{
        background-position: top 0 left 22%;
    }
    #joininfo .section03 .plan-wrap{
        width: 78%;
        height: 850px;
        margin-left: 12.9%;
    }
    #joininfo .section03 .box-wrap .left{
        width: 46%;
        height: 81.2%;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong{
        top: 5.25%;
    }
    #joininfo .section03 .box-wrap .left .txt-area ul{
        top: 21.7%;
        left: 28%;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 22%;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total{
        bottom: 4.55%;
        left: 34.82%;
    }
    #joininfo .section03 .box-wrap .right{
        width: 54%;
    }
    #joininfo .section03 .box-wrap .right::before{
        top: 11.6%;
        right: -8.51%;
        width: 105px;
        height: 102px;
    }
    #joininfo .section03 .box-wrap .right::after{
        bottom: 4.25%;
        left: 10vw;
        width: 59.2%;
        height: 8.4%;
    }
    #joininfo .section03 .box-wrap .right .txt-area strong{
        top: 6%;
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        top: 22%;
        left: 28%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 21.5%;
    }
}
@media only screen and (max-width: 1024px){
    #joininfo .section02{
        padding: 80px 0 120px;
    }
    #joininfo .section02 ul{
        margin: -10px -10px 0;
    }
    #joininfo .section02 li{
        margin: 10px;
    }
    #joininfo .section02 li ~ li{
        width: calc(50% - 20px);
    }
    #joininfo .section02 li .txt-box{
        padding: 10% 0 40.1% 9.15%;
    }
    #joininfo .section02 li .txt-box em{
        font-size: 15px;
        margin-bottom: 8px;
    }
    #joininfo .section02 li .txt-box strong{
        font-size: 27px;
    }
    #joininfo .section02 li.wide .txt-box{
        padding: 8.1% 0 8.1% 8.15%;
    }
    #joininfo .section02 li.wide strong{
        font-size: 30px;
    }
    #joininfo .section02 li.wide a{
        padding: 16px 50px 16px 27px;
        margin-top: 26px;
    }
    #joininfo .section02 li.wide .img-box .card{
        top:57%;
        right:2%;
        width: 35%;
        transform: translateY(-50%);
    }
    #joininfo .section02 li.wide .img-box .phone{
        top:12%;
        right:9%;
        width: 23%;
    }
    #joininfo .section02 .bnr-wrap{
        margin: 10px 0 0;
        background-position: top 0 left 22%;
    }
    #joininfo .section02 .bnr-wrap .txt-box{
        margin-left: 15%;
    }
    #joininfo .section03{
        padding-bottom: 110px;
    }
    #joininfo .section03 .plan-wrap{
        width: 90%;
        margin-left: 5.2%;
    }
    #joininfo .section04{
        padding-bottom: 110px;
    }
    #joininfo .section04 .cont-wrap > small{
        font-size: 13px;
        margin-bottom: 8px;
    }
    #joininfo .table .btn-outline-brown{
        font-size: 13px;
        line-height: 1.155;
        padding: 11px 34px 11px 20px;
    }
    #joininfo .table .btn-outline-brown::after{
        right: 14%;
        border-width: 1px;
    }
    #joininfo .table .btn-outline-brown.btn-download{
        padding-right: 6%;
    }
    #joininfo .table .btn-outline-brown.btn-download::after{
        right: 13%;
    }
    #joininfo .table-guide{
        margin-top: 18px;
    }
    #joininfo .table-guide li{
        font-size: 13px;
        line-height: 1.462;
    }
    #joininfo .table-guide li + li{
        margin-top: 7px;
    }
    #joininfo .section05{
        padding-bottom: 134px;
    }
    #joininfo .section05 .table ul li::before{
        top: 8px;
        left: 2px;
        width: 5px;
    }
    #joininfo .section06{
        padding-bottom: 160px;
    }
    #joininfo .section06 .cont-wrap li:nth-child(2){
        margin: 0 15px;
    }
    #joininfo .section06 .cont-wrap .img-box{
        margin-bottom: 18px;
        border-radius: 14px;
    }
}
@media only screen and (max-width: 991px){
    #joininfo .sub-page-section .txt-box strong{
        width: 260px;
        margin: 0 auto;
    }
    #joininfo .section02 li.wide strong,
    #joininfo .section02 li .txt-box strong{
        font-size:27px;
        line-height:1.3058;
    }
    #joininfo .section03 .txt-wrap strong span{
        display: block;
    }
    #joininfo .section03 .plan-wrap{
        height: 800px;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong{
        font-size: 22px;
    }
    #joininfo .section03 .box-wrap .left .txt-area ul{
        left: 30%;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 20%;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total{
        bottom: 5%;
        left: 37.15%;
        font-size: 17px;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total small{
        font-size: 11px;
    }
    #joininfo .section03 .box-wrap .right .txt-area strong{
        top: 6%;
        font-size: 24px;
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        top: 22.5%;
        left: 26%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 19.6%;
    }
    #joininfo .table ul li + li{
        margin-top: 10px;
    }
    #joininfo .table .paylist li{
        width: 30%;
        margin: 12px 4px 0;
    }
    #joininfo .table .paylist li.smilepay{
        width: 46%;
    }
    #joininfo .table .btn + .btn{
        margin-left: 6px;
    }
    #joininfo .table .btn-outline-brown{
        font-size: 12px;
        line-height: 1.167;
    }
    #joininfo .table .btn-outline-brown::after{
        width: 4px;
        height: 4px;
    }
    #joininfo .table .btn-outline-brown.btn-download::after{
        width: 14px;
        height: 14px;
    }
}
@media only screen and (max-width: 768px){
    #joininfo .sub-page-section .txt-box strong{
        width: 220px;
    }
    #joininfo .section02 ul{
        margin:-2% -1.2% 0;
    }
    #joininfo .section02 li{
        margin:1.2%;
        border-radius:10px;
    }
    #joininfo .section02 li ~ li{
        width:calc(50% - 2.4%);
    }
    #joininfo .section02 li .txt-box{
        padding: 10.75% 0 48% 10.75%;
    }
    #joininfo .section02 li .txt-box em{
        font-size: 14px;
    }
    #joininfo .section02 li .txt-box strong{
        font-size:26px;
    }
    #joininfo .section02 li:nth-child(2){
        background-position:right 16% bottom 0;
        background-size:auto 100%;
    }
    #joininfo .section02 li:last-child{
        background-size:auto 124%;
        background-position:left 84% bottom 88%;
    }
    #joininfo .section02 li.wide{
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        -webkit-flex-direction: row;
        flex-direction: row;
        height: auto;
    }
    #joininfo .section02 li.wide a{
        padding:14px 42px 13px 17px;
        margin-top: 20px;
        font-size: 12px;
        line-height:1;
        z-index:1;
    }
    #joininfo .section02 li.wide a::after{
        right:20px;
        width: 5px;
        height: 5px;
    }
    #joininfo .section02 li.wide .img-box .card{
        top: 27%;
        right:-2%;
        width: 45%;
        transform: none;
    }
    #joininfo .section02 li.wide .img-box .phone{
        top: 16%;
        right:6%;
        width: 32%;
    }
    #joininfo .section02 .bnr-wrap{
        margin:1.2% 0 0;
        border-radius:8px;
        background-size:100px auto;
        background-position:top 20% right 66vw;
    }
    #joininfo .section02 .bnr-wrap .txt-box{
        padding:18px 0;
        margin-left:18%;
    }
    #joininfo .section02 .bnr-wrap .txt-box p{
        font-size:14px;
        padding-right: 4%;
    }
    #joininfo .section02 .bnr-wrap .txt-box p::before{
        width:56px;
        height:11px;
    }
    #joininfo .section02 .bnr-wrap .txt-box a{
        padding:11px 24px 10px;
        font-size:11px;
    }
    #joininfo .section03 .plan-wrap{
        height: 660px;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong{
        font-size: 18px;
    }
    #joininfo .section03 .box-wrap .left .txt-area li{
        font-size: 13px;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 18.8%;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total{
        bottom: 4%;
        font-size: 15px;
    }
    #joininfo .section03 .box-wrap .right{
        margin-left: -2.443%;
    }
    #joininfo .section03 .box-wrap .right::before{
        top: 11.5%;
        width: 90px;
        height: 87px;
    }
    #joininfo .section03 .box-wrap .right::after{
        bottom: 4.5%;
        left: 9vw;
        width: 66%;
        height: 8.7%;
    }
    #joininfo .section03 .box-wrap .right .txt-area strong{
        font-size: 20px;
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        left: 24%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li{
        font-size: 14px;
        line-height: 1.3574;
        padding-left: 25px;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 15.8%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li small{
        font-size: 12px;
    }
    #joininfo .table .paylist{
        width: 100%;
    }
    #joininfo .table .paylist li{
        display: block;
        margin: 12px auto 0;
    }
    #joininfo .section04 .txt-wrap{
        padding-bottom: 20px;
    }
    #joininfo .section05{
        padding-bottom: 110px;
    }
    #joininfo .sub-page-wrap .section05 .txt-wrap{
        padding-bottom:44px;
    }
    #joininfo .section06{
        padding-bottom:120px;
    }
    #joininfo .section06 .txt-wrap{
        padding-bottom:48px;
    }
    #joininfo .section06 .cont-wrap li:nth-child(2){
        margin: 0 12px;
    }
    #joininfo .section06 .cont-wrap .img-box{
        border-radius: 10px;
    }
    #joininfo .section06 .cont-wrap .txt-box strong{
        font-size: 17px;
    }
    #joininfo .section06 .cont-wrap .txt-box{
        font-size: 13px;
    }
    #joininfo .section06 .cont-wrap .txt-box span::after{
        width: 16px;
        height: 16px;
        margin-left: 6px;
    }
}
@media only screen and (max-width: 640px){
    #joininfo .section02 li ~ li{
        width: 100%;
        height: auto;
    }
    #joininfo .section02 li:nth-child(2){
        background-position:left 0 top 32%;
        background-size:cover;
    }
    #joininfo .section02 li:nth-child(3){
        background-position:left 0 top 42%;
        background-size:104% auto;
    }
    #joininfo .section02 li .txt-box{
        padding: 7.5% 0 16% 8.15%;
    }
    #joininfo .section02 .bnr-wrap{
        background-position:top 14% right 70vw;
    }
    #joininfo .section03 .plan-wrap{
        width: 60%;
        height: 1260px;
        margin: 0 auto;
    }
    #joininfo .section03 .box-wrap{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
    }
    #joininfo .section03 .box-wrap .txt-area strong{
        width: 100%;
    }
    #joininfo .section03 .box-wrap .left{
        width: 100%;
        height: 45%;
        background: url("/images/sub/joininfo_sec03_m_bg01.png") no-repeat center top;
        background-size: 100% 100%;
    }
    #joininfo .section03 .box-wrap .left::after{
        display: none;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong{
        top: 4%;
        font-size: 20px;
    }
    #joininfo .section03 .box-wrap .left .txt-area ul{
        top: 20%;
        left: 0;
        width: 100%;
        text-align: center;
    }
    #joininfo .section03 .box-wrap .left .txt-area li{
        font-size: 14px;
        font-weight: 400;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 8%;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total{
        bottom: 6%;
        left: 0;
        width: 100%;
        font-size: 17px;
        font-weight: 600;
    }
    #joininfo .section03 .box-wrap .right{
        width: 125%;
        height: 55%;
        background: url("/images/sub/joininfo_sec03_m_bg02.png") no-repeat center top;
        background-size: 100% 100%;
        margin: -16px 0 0;
    }
    #joininfo .section03 .box-wrap .right::before{
        top: 10%;
        width: 103px;
        height: 100px;
        transform: rotate(35deg);
    }
    #joininfo .section03 .box-wrap .right::after{
        bottom: 4%;
        left: 16vw;
        width: 58%;
        height: 9.24%;
    }
    #joininfo .section03 .box-wrap .right .txt-area strong{
        top: 5.5%;
        font-size: 22px;
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        top: 21.5%;
        left: 48%;
        width: 55%;
        text-align: center;
        transform: translateX(-50%);
    }
    #joininfo .section03 .box-wrap .right .txt-area li{
        display: inline-block;
        font-size: 16px;
        font-weight: 600;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 12.7%;
    }
    #joininfo .table .btn-outline-brown.btn-download{
        padding-right: 9%;
    }
}
@media only screen and (max-width: 575px){
    #joininfo .sub-page-section .txt-box strong{
        width: 212px;
    }
    #joininfo .section02 ul{
        margin:-2% -2% 0;
    }
    #joininfo .section02 .txt-wrap strong{
        width: 225px;
        margin:0 auto;
    }
    #joininfo .section02 li{
        margin:2%;
        border-radius:8px !important;
    }
    #joininfo .section02 li .txt-box{
        padding:8% 0 20% 10%;
    }
    #joininfo .section02 li .txt-box em{
        font-size: 13px;
    }
    #joininfo .section02 li .txt-box strong{
        width:200px;
        font-size: 20px;
    }
    #joininfo .section02 li.wide{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    #joininfo .section02 li.wide .img-box .card{
        top:21%;
        right: 1%;
    }
    #joininfo .section02 li.wide .img-box .phone{
        top:10%;
        right: 8%;
        width: 33%;
    }
    #joininfo .section02 li.wide .txt-box{
        padding: 10% 0 10% 10%;
    }
    #joininfo .section02 .bnr-wrap{
        margin:2% 0 0;
        border-radius: 8px;
        background-size:92px;
        background-position:top 40% left 4vw;
    }
    #joininfo .section02 .bnr-wrap .txt-box{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start;
        padding:16px 0 15px;
        margin-left:25vw;
    }
    #joininfo .section02 .bnr-wrap .txt-box p{
        font-size:12px;
    }
    #joininfo .section02 .bnr-wrap .txt-box p::before{
        width:50px;
        height:9px;
        margin-right: 2px;
    }
    #joininfo .section02 .bnr-wrap .txt-box a{
        font-size:10px;
        padding:7px 14px;
        margin-top:4px;
    }
    #joininfo .section03 .box-wrap .left .txt-area li{
        font-size: 13px;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 9.4%;
    }
    #joininfo .section03 .box-wrap .right{
        height: calc(100% - 45% + 16px);
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        width: 60%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 13.7%;
    }
    #joininfo .table .btn-outline-brown{
        font-size: 11px;
        line-height: 1.274;
        padding-right: 30px;
    }
    #joininfo .table .paylist li{
        width: 45%;
    }
    #joininfo .table .paylist li.smilepay{
        width: 70%;
    }
    #joininfo .table-guide{
        margin-top: 15px;
    }
    #joininfo .table-guide li{
        padding-left:12px;
        font-size: 12px;
    }
    #joininfo .table-guide li::before{
        left:6px;
    }
    #joininfo .table-guide li + li{
        margin-top: 5px;
    }
    #joininfo .section06 .cont-wrap ul{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    #joininfo .section06 .cont-wrap li{
        width: 75%;
        margin: 0 auto;
    }
    #joininfo .section06 .cont-wrap li:nth-child(2){
        margin:32px auto;
    }
    #joininfo .section06 .cont-wrap .img-box{
        margin-bottom: 15px;
    }
}
@media only screen and (max-width: 425px){
    #joininfo .section02 li .txt-box em{
        font-size: 12px;
        line-height: 1.5;
    }
    #joininfo .section02 li .txt-box strong{
        font-size: 20px;
    }
    #joininfo .section02 li.wide .txt-box{
        padding-bottom:16%;
    }
    #joininfo .section02 li.wide a::after{
        right:16px;
    }
    #joininfo .section02 li.wide .img-box .card{
        top:48.4%;
        right:-11%;
        width: 62%;
    }
    #joininfo .section02 li.wide .img-box .phone{
        top:37%;
        right:1%;
        width:44%;
    }
    #joininfo .section02 .bnr-wrap{
        background-position:top 40% left 1.5vw;
    }
    #joininfo .section03 .txt-wrap{
        padding-bottom: 50px;
    }
    #joininfo .section03 .plan-wrap{
        width: 70%;
        height: 1000px;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong{
        font-size: 16px;
        line-height: 1.375;
    }
    #joininfo .section03 .box-wrap .left .txt-area strong em{
        font-size: 11px;
        line-height: 1.182;
    }
    #joininfo .section03 .box-wrap .left .txt-area li{
        font-size: 12px;
        line-height: 1.167;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 8.2%;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total{
        font-size: 14px;
        line-height: 1.2145;
    }
    #joininfo .section03 .box-wrap .left .txt-area .total small{
        font-size: 10px;
    }
    #joininfo .section03 .box-wrap .right::before{
        width: 83px;
        height: 80px;
    }
    #joininfo .section03 .box-wrap .right::after{
        bottom: 5%;
        left: 17vw;
        width: 60.26%;
        height: 8.85%;
    }
    #joininfo .section03 .box-wrap .right .txt-area strong{
        font-size: 18px;
        line-height: 1.389;
    }
    #joininfo .section03 .box-wrap .right .txt-area li{
        font-size: 14px;
        line-height: 1.2145;
        padding-left: 20px;
    }
    #joininfo .section03 .box-wrap .right .txt-area li::before{
        width: 17px;
        height: 17px;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 12.5%;
    }
    #joininfo :is(.section04, .section05) .txt-wrap p span{
        display: block;
    }
    #joininfo .section04 .cont-wrap > small{
        font-size: 11px;
    }
    #joininfo .section05 .table ul li::before{
        top: 7px;
    }
    #joininfo .section06 .cont-wrap li{
        width: 90%;
    }
    #joininfo .section06 .cont-wrap .txt-box{
        font-size: 12px;
    }
    #joininfo .section06 .cont-wrap .txt-box span::after{
        width: 14px;
        height: 14px;
    }
    #joininfo .table ul li + li{
        margin-top: 8px;
    }
    #joininfo .table .btn + .btn{
        margin-left: 2px;
    }
    #joininfo .table .paylist li{
        width: 60%;
        margin-top: 10px;
    }
    #joininfo .table .paylist li.smilepay{
        width: 85%;
    }
    #joininfo .table .text-left{
        line-height: 1.4;
    }
    #joininfo .table .btn-outline-brown{
        width: 120px;
        padding: 7px 24px 6px 12px;
    }
    #joininfo .table .btn-outline-brown.btn-download{
        display: block;
        margin: 0 auto;
    }
    #joininfo .table .btn-outline-brown.btn-download:last-child{
        margin-top: 4px;
    }
    #joininfo .table .btn-outline-brown.btn-download::after{
        right: 11%;
    }
    #joininfo .table .btn-outline-brown.btn-card-payment{
        width: auto;
        padding-left: 18%;
    }
    #joininfo .table .btn-outline-brown.btn-card-payment::after{
        position: relative;
        top: auto;
        bottom: -1px;
        right: -3px;
    }
}
@media only screen and (max-width: 375px){
    #joininfo .section03 .plan-wrap{
        width: 76%;
    }
    #joininfo .section03 .box-wrap .left .txt-area li + li{
        padding-top: 8.7%;
    }
    #joininfo .section03 .box-wrap .right::before{
        top: 8%;
        right: -4%;
    }
    #joininfo .section03 .box-wrap .right .txt-area ul{
        width: 65%;
    }
    #joininfo .section03 .box-wrap .right .txt-area li + li{
        margin-top: 12%;
    }
    #joininfo .table .btn + .btn{
        margin-top: 6px;
    }
}
@media only screen and (max-width: 360px){
    #joininfo .section02 .bnr-wrap {
        background-size:82px;
        background-position:top 47% left 1vw;
    }
    #joininfo .section02 .bnr-wrap .txt-box{
        margin-left:24vw;
    }
}

/* 영업안내 */
#reseller .sub-page-section{
    background: url("/images/sub/img_reseller_bg01.png") no-repeat center;
    background-size:cover;
}
#reseller .section02{
    overflow: hidden;
    padding: 120px 0;
}
#reseller .section02 .reseller-lst li{
    position: relative;
    padding: 90px 0;
}
#reseller .section02 .reseller-cont{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
#reseller .section02 .reseller-cont .txt-box{
    word-break: keep-all;
    width: 50%;
    color: #666;
    font-size: 20px;
    line-height: 1.75;
    padding-top: 48px;
}
#reseller .section02 .reseller-cont .txt-box strong{
    position: relative;
    display: block;
    color: #333;
    font-size: 46px;
    line-height: 1.3045;
    padding-bottom: 28px;
}
#reseller .section02 .reseller-cont .img-box{
    position: relative;
}
/* 영업안내 블로그페이 */
#reseller .section02 .blogpay .reseller-cont .txt-box p{
    width: 72%;
}
#reseller .section02 .blogpay .reseller-cont .img-box{
    min-width: 620px;
    width: 50%;
}
#reseller .section02 .blogpay .reseller-cont .img-box::after{
    content: 'blogpay';
    position: absolute;
    top: 330px;
    left: 340px;
    color: rgba(245, 245, 245, .4);
    font-size: 160px;
    font-weight: 700;
    line-height: 1.1938;
}
/* 영업안내 페이앱 */
#reseller .section02 .payapp .reseller-cont{
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
}
#reseller .section02 .payapp .reseller-cont .img-box{
    width: 530px;
}
#reseller .section02 .payapp .reseller-cont .img-box::after{
    content: '';
    position: absolute;
    top: 110px;
    right: -44px;
    width: 134px;
    height: 138px;
    background: url("/images/sub/img_reseller_profit_obj1.png") no-repeat center;
    background-size: cover;
}
#reseller .section02 .payapp .reseller-cont .txt-box{
    padding-left: 136px;
}
#reseller .section02 .payapp .reseller-cont strong{
    padding-top: 128px;
}
#reseller .section02 .payapp .reseller-cont strong::before{
    content: '';
    position: absolute;
    top: 10px;
    left: -19px;
    width: 104px;
    height: 115px;
    background: url("/images/sub/img_reseller_profit_obj2.png") no-repeat center;
    background-size: 100% auto;
}
/* 리셀러 배너 공통 스타일*/
#reseller .bnr-wrap{
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}
#reseller .bnr-wrap .txt-box > span{
    word-break: keep-all;
    display: inline-block;
    color: #777;
    font-size: 16px;
    line-height: 1.188;
    padding-bottom: 12px;
}
#reseller .bnr-wrap .txt-box p{
    word-break: keep-all;
    display: block;
    color: #222;
    font-size: 38px;
    font-weight: 300;
    line-height: 1.1845;
}
#reseller .bnr-wrap .txt-box a{
    position: relative;
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.231;
    padding: 15px 44px 15px 30px;
    margin-top: 20px;
    border-radius: 4px;
    background: #fff;
}
#reseller .bnr-wrap .txt-box a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 28px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #333;
    border-right: 1px solid #333;
    transform: translateY(-50%) rotate(45deg);
}
#reseller .bnr-wrap .img-box{
    position: absolute;
}
/* 리셀러 배너 섹션2 */
#reseller .section02 .bnr-wrap{
    margin-top: 30px;
    background: linear-gradient(93deg, #EDEEF1 27.94%, #CED0D5 100%);
}
#reseller .section02 .bnr-wrap .txt-box{
    padding: 56px 0 42px 84px;
}
#reseller .section02 .bnr-wrap .txt-box p em{
    display: inline-block;
    width: 148px;
    height: 30px;
    margin: -6px 3px 0 8px;
    vertical-align: middle;
}
#reseller .section02 .bnr-wrap .txt-box p em::before{
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    vertical-align: top;
    background: url("/images/sub/logo_payapp_black.svg") no-repeat center;
    background-size: 100% auto;
}
#reseller .section02 .bnr-wrap .img-box{
    bottom: -77px;
    right: 125px;
    width: 325px;
    height: auto;
}
/* 리셀러 배너 섹션3 */
#reseller .section03 .bnr-wrap{
    color: #fff;
    margin-top: 80px;
    background: url("/images/sub/img_bnr_reseller_bg.png") no-repeat center;
    background-size: cover;
}
#reseller .section03 .bnr-wrap .txt-box{
    padding: 52px 0 48px 84px;
}
#reseller .section03 .bnr-wrap .txt-box > span{
    color: #B1C5FC;
    padding-bottom: 10px;
}
#reseller .section03 .bnr-wrap .txt-box p{
    color: #fff;
}
#reseller .section03 .bnr-wrap .img-box{
    top: 46px;
    right: 94px;
    width: 328px;
    height: auto;
}
#reseller .section03 .bnr-wrap .img-box::after{
    z-index: 1;
    content: '';
    position: absolute;
    top: 105px;
    right: -98px;
    width: 588px;
    height: 111px;
    background: url("/images/sub/img_bnr_reseller_txt.svg") no-repeat center;
    background-size: 100% auto;
}
#reseller .section03 .bnr-wrap .device{
    z-index: 2;
    position: relative;
}
#reseller .section03 .txt-box a{
    color: #fff;
    background: #000;
}
#reseller .section03 .txt-box a::after{
    border-color: #fff;
}
#reseller .section03{
    padding: 100px 0 220px;
}
#reseller .section03 .table ul li{
    position: relative;
    line-height: 1.883;
    padding-left: 12px;
}
#reseller .section03 .table ul li::before{
    content: '';
    position: absolute;
    top: 16px;
    left: 0;
    width: 6px;
    height: 1px;
    background: #333;
}
#reseller .section03 .table ol li strong{
    display: inline-block;
    font-weight: 500;
    margin-bottom: 5px;
}
#reseller .section03 .table ol li strong em{
    padding: 0 8px 0 4px;
}
#reseller .section03 .table ol li p{
    word-break: keep-all;
    line-height: 1.883;
}
#reseller .section03 .table ol li + li{
    margin-top: 20px;
}
#reseller .section04{
    color: #fff;
    padding: 132px 0 156px;
    background: url("/images/sub/img_reseller_bg02.png") no-repeat center;
    background-size: cover;
}
#reseller .section04 .inner{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#reseller .section04 .heading-wrap{
    width: 35%;
    padding-left: 120px;
}
#reseller .section04 .heading-wrap h2{
    word-break: keep-all;
    font-size: 50px;
    line-height: 1.2085;
    text-shadow: 0 0 28px rgba(0,0,0,.2);
}
#reseller .section04 .heading-wrap h2 span{
    display: block;
}
#reseller .section04 .cont-wrap{
    width: calc(100% - 33%);
    font-size: 0;
    padding-left: 104px;
}
#reseller .section04 .cont-wrap li{
    position: relative;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
}
#reseller .section04 .cont-wrap li:nth-child(2){
    padding: 0 99px 0 101px;
}
#reseller .section04 .cont-wrap li:nth-child(2)::before,
#reseller .section04 .cont-wrap li:nth-child(2)::after{
    content: '';
    position: absolute;
    top: 50%;
    width: 17px;
    height: 32px;
    background: url("/images/sub/img_reseller_sec04_obj04.svg") no-repeat center;
    background-size: 100%;
    transform: translateY(-50%);
}
#reseller .section04 .cont-wrap li:nth-child(2)::before{
    left: 43px;
}
#reseller .section04 .cont-wrap li:nth-child(2)::after{
    right: 41px;
}
#reseller .section04 .cont-wrap li p::before{
    content: '';
    display: block;
    width: 65px;
    height: 65px;
    margin: 0 auto 16px;
    background: url("/images/sub/img_reseller_sec04_obj01.svg") no-repeat center;
    background-size: 100%;
}
#reseller .section04 .cont-wrap li:nth-child(2) p::before{
    background-image: url("/images/sub/img_reseller_sec04_obj02.svg");
}
#reseller .section04 .cont-wrap li:last-child p::before{
    background-image: url("/images/sub/img_reseller_sec04_obj03.svg");
}
#reseller .section04 .cont-wrap > p{
    word-break: keep-all;
    font-size: 19px;
    font-weight:300;
    line-height: 1.685;
    margin: 48px 0 44px;
    text-shadow: 0 0 28px rgba(0,0,0,.12);
}
#reseller .section04 .cont-wrap .btn-area{
    font-size: 0;
}
#reseller .section04 .cont-wrap .btn-area a{
    color: #333;
    width: 256px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    padding: 23px 10px 21px;
    border-radius: 4px;
}
#reseller .section04 .cont-wrap .btn-area a + a{
    color: #fff;
    margin-left: 12px;
}

@media only screen and (max-width: 1200px){
    /* 영업안내 블로그페이 */
    #reseller .section02 .blogpay .reseller-cont .txt-box p{
        width: 84%;
    }
    #reseller .section02 .blogpay .reseller-cont .img-box{
        min-width: 0;
    }
    #reseller .section02 .blogpay .reseller-cont .img-box::after{
        top: 25.25vw;
        left: 26.6vw;
        font-size: 13vw;
    }
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont .txt-box{
        padding-left: 9.5vw;
    }
    #reseller .section02 .payapp .reseller-cont .txt-box p{
        width: 90%;
    }
    #reseller .section02 .payapp .reseller-cont .img-box{
        width: 45%;
    }
    #reseller .section04 .heading-wrap{
        padding-left: 8.3%;
    }
}
@media only screen and (max-width: 1080px){
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont .img-box::after{
        top: 9vw;
        right: -3.5vw;
        width: 10.5vw;
        height: 10.8vw;
    }
    #reseller .section02 .payapp .reseller-cont .txt-box {
        padding-top: 2vw;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .img-box{
        bottom: -32%;
        right: 7.7vw;
        width: 30vw;
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap .img-box{
        right: 6.7vw;
    }
    #reseller .section04 .inner{
        padding: 0 5%;
    }
    #reseller .section04 .heading-wrap{
        padding-left: 0;
    }
    #reseller .section04 .cont-wrap{
        width: auto;
        padding-left: 8%;
    }
}
@media only screen and (max-width: 1024px){
    #reseller .section02{
        padding: 80px 0 40px;
    }
    #reseller .section02 .reseller-lst li{
        padding: 70px 0;
    }
    #reseller .section02 .reseller-cont .txt-box strong{
        font-size: 34px;
        padding-bottom: 5%;
    }
    #reseller .section02 .reseller-cont .txt-box{
        font-size: 17px;
    }
    /* 영업안내 블로그페이 */
    #reseller .section02 .reseller-lst li.blogpay{
        padding-top: 0;
    }
    #reseller .section02 .blogpay .reseller-cont .txt-box{
        padding: 3.5vw 0 0 20px;
    }
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont .txt-box{
        padding-top: 7vw;
    }
    #reseller .section02 .payapp .reseller-cont strong{
        padding-top: 22%;
    }
    #reseller .section02 .payapp .reseller-cont strong::before{
        top: 0;
        width: 76px;
        height: 84px;
    }
    /* 리셀러 배너 공통 스타일*/
    #reseller :is(.section02, .section03) .bnr-wrap .txt-box{
        padding: 5.6% 0 4.2% 7.15%;
    }
    #reseller .bnr-wrap .txt-box > span{
        font-size: 15px;
        padding-bottom: 8px;
    }
    #reseller .bnr-wrap .txt-box p{
        font-size: 34px;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .txt-box p em{
        width: 124px;
        height: 25px;
    }
    #reseller .section03{
        padding: 80px 0 150px;
    }
    #reseller .section03 .table ul li::before{
        top: 13px;
        left: 2px;
    }
    #reseller .section04{
        padding: 88px 0 80px;
    }
    #reseller .section04 .heading-wrap h2{
        font-size: 42px;
    }
    #reseller .section04 .cont-wrap{
        padding-left: 5%;
    }
    #reseller .section04 .cont-wrap li{
        font-size: 16px;
    }
    #reseller .section04 .cont-wrap > p{
        font-size: 17px;
    }
    #reseller .section04 .cont-wrap li p::before{
        width: 60px;
        height: 60px;
    }
    #reseller .section04 .cont-wrap .btn-area a{
        width: 200px;
        font-size: 16px;
        padding: 19px 10px 17px;
    }
}
@media only screen and (max-width: 991px) {
    #reseller .sub-page-section{
        background-position: top 0 right 10%;
    }
    #reseller .sub-page-section .txt-box strong{
        width: 300px;
        margin: 0 auto;
    }
    #reseller .section04 .heading-wrap h2{
        font-size: 38px;
    }
    #reseller .section04 .cont-wrap > p{
        font-size: 16px;
    }
    #reseller .section04 .cont-wrap li:nth-child(2){
        padding: 0 18% 0 19%;
    }
    #reseller .section04 .cont-wrap li:nth-child(2)::before{
        width: 15px;
        height: 30px;
    }
    #reseller .section04 .cont-wrap li p::before{
        width: 55px;
        height: 55px;
        margin-bottom: 12px;
    }
    #reseller .section04 .cont-wrap li:nth-child(2)::before,
    #reseller .section04 .cont-wrap li:nth-child(2)::after{
        width: 13px;
        height: 28px;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .img-box{
        right: 5vw;
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap .img-box{
        top: 17%;
        right: 5vw;
        width: 32vw;
    }
    #reseller .section03 .bnr-wrap .img-box::after{
        top: 28.6%;
        right: -31%;
        width: 57.42vw;
        height: 10.8vw;
    }
}
@media only screen and (max-width: 768px) {
    #reseller .section02 .reseller-cont{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    #reseller .section02 .reseller-lst li{
        width: 72%;
        padding: 44px 0;
        margin: 0 auto;
    }
    #reseller .section02 .payapp .reseller-cont{
        width: 96%;
    }
    #reseller .section02 :is(.blogpay, .payapp) .reseller-cont :is(.img-box, .txt-box){
        width: 100%;
    }
    #reseller .section02 .reseller-cont .txt-box{
        font-size: 15px;
        padding-top: 8%;
    }
    #reseller .section02 .reseller-cont .txt-box strong{
        font-size: 30px;
        padding-bottom: 2vw;
    }
    /* 영업안내 블로그페이 */
    #reseller .section02 .blogpay .reseller-cont .img-box{
        order: 1;
        height: auto;
    }
    #reseller .section02 .blogpay .reseller-cont .img-box::after{
        top: 37.81vw;
        left:34vw;
        font-size: 14vw;
    }
    #reseller .section02 .blogpay .reseller-cont .txt-box{
        order: 2;
        padding: 4vw 0 0 0;
    }
    #reseller .section02 :is(.blogpay, .payapp) .reseller-cont .txt-box p{
        width: 92%;
    }
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont .img-box::after{
        top: 11.75vw;
        right: -4.7vw;
        width: 14.4vw;
        height: 14.75vw;
    }
    #reseller .section02 .payapp .reseller-cont .txt-box{
        padding: 4vw 0 0 0;
    }
    #reseller .section02 .payapp .reseller-cont strong{
        padding-top: 0;
    }
    #reseller .section02 .payapp .reseller-cont strong::before{
        top: -92%;
        left: -2vw;
    }
    #reseller .section02 .payapp .reseller-cont strong span{
        display: block;
    }
    /* 리셀러 배너 공통 스타일*/
    #reseller .bnr-wrap .txt-box > span{
        font-size: 14px;
    }
    #reseller .bnr-wrap .txt-box p{
        font-size: 26px;
    }
    #reseller .bnr-wrap .txt-box a{
        padding: 13px 36px 13px 23px;
        margin-top: 2.5%;
    }
    #reseller .bnr-wrap .txt-box a::after{
        right: 16%;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .txt-box p em {
        width: 99px;
        height: 20px;
    }
    #reseller .section02 .bnr-wrap .img-box{
        bottom: -32%;
        width: 34vw;
    }
    #reseller .section03{
        padding-bottom:110px;
    }
    #reseller .section03 .txt-wrap{
        padding-bottom:44px
    }
    #reseller .section03 .table ul li{
        line-height: 1.5;
    }
    #reseller .section03 .table ul li + li{
        margin-top: 8px;
    }
    #reseller .section03 .table ol li + li{
        margin-top: 14px;
    }
    #reseller .section03 .table ol li p{
        line-height: 1.5;
    }
    #reseller .section03 .table ul li::before{
        top: 9px;
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap{
        margin-top: 50px;
    }
    #reseller .section03 .bnr-wrap .img-box::after{
        width: 56.8vw;
    }
    #reseller .section04{
        padding-top: 80px;
        background-position:left 32% top 0;
    }
    #reseller .section04 .inner{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        text-align: center;
        padding: 0;
    }
    #reseller .section04 .heading-wrap{
        width: 100%;
    }
    #reseller .section04 .heading-wrap h2{
        font-size: 30px;
    }
    #reseller .section04 .heading-wrap h2 span{
        display: inline-block;
    }
    #reseller .section04 .cont-wrap{
        padding: 32px 0 0;
    }
    #reseller .section04 .cont-wrap > p{
        font-size: 15px;
        margin-top: 28px;
    }
    #reseller .section04 .cont-wrap li:nth-child(2){
        padding: 0 13% 0 11%;
    }
    #reseller .section04 .cont-wrap li:nth-child(2)::before{
        left: 9%;
    }
    #reseller .section04 .cont-wrap li:nth-child(2)::after{
        right: 9%;
    }
    #reseller .section04 .cont-wrap li p::before{
        width: 46px;
        height: 46px;
    }
    #reseller .section04 .cont-wrap .btn-area a{
        font-size: 14px;
        width: 160px;
        padding: 15px 10px 14px;
    }
}
@media only screen and (max-width: 640px){
    #reseller .bnr-wrap .txt-box > span{
        font-size: 13px;
    }
    #reseller .bnr-wrap .txt-box p{
        font-size: 24px;
    }
    #reseller .bnr-wrap .txt-box a{
        font-size: 12px;
        line-height: 1;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .img-box{
        right: 2vw;
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap .img-box{
        top: 22%;
    }
}
@media only screen and (max-width: 575px) {
    #reseller .sub-page-section{
        background-position: top 0 right 20%;
    }
    #reseller .section02 .txt-wrap strong{
        width: 47vw;
        margin: 0 auto;
    }
    #reseller .section02 .reseller-lst li{
        width: 100%;
        padding: 9vw 0;
    }
    #reseller .section02 .reseller-cont .txt-box{
        font-size: 14px;
    }
    #reseller .section02 :is(.blogpay, .payapp) .reseller-cont .txt-box{
        padding: 5.3vw 0 0 4.8%;
    }
    #reseller .section02 .reseller-cont .txt-box strong{
        font-size: 24px;
    }
    /* 영업안내 블로그페이 */
    #reseller .section02 .blogpay .reseller-cont .img-box::after{
        top:86%;
        left:42vw;
        font-size:15vw;
    }
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont strong::before{
        left: -3%;
        width: 64px;
        height: 70px;
    }
    #reseller .section02 .payapp .reseller-cont .img-box::after{
        top: 13.1vw;
        right: -6vw;
        width: 16.9vw;
        height: 17.4vw;
    }
    #reseller .section03 .table ul li::before{
        top: 8px;
        width: 5px;
    }
    /* 리셀러 배너 공통 스타일*/
    #reseller :is(.section02, .section03) .bnr-wrap .txt-box{
        text-align: center;
        padding: 5.6% 5% 26% 5%;
    }
    #reseller .bnr-wrap .txt-box a{
        padding: 3% 8.5% 3% 5%;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap{
        margin-top:8vw;
        background: linear-gradient(180deg, #EDEEF1 27.94%, #CED0D5 100%);
    }
    #reseller .section02 .bnr-wrap .txt-box p em{
        width: 89px;
        height: 18px;
        margin-top: -5px;
    }
    #reseller .section02 .bnr-wrap .img-box{
        bottom: -34%;
        right: unset;
        width: 43vw;
        transform: translateX(45%);
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap .img-box{
        top: 57%;
        right: 50%;
        width: 45vw;
        transform: translateX(51%);
    }
    #reseller .section03 .bnr-wrap .img-box::after{
        top: 20%;
        right: 50%;
        width: 78.8vw;
        height: 14.8vw;
        transform: translateX(49%);
    }
}
@media only screen and (max-width: 425px) {
    #reseller .sub-page-section{
        background-position: top 0 right 28%;
    }
    #reseller .section02 .txt-wrap p{
        width:230px;
        margin: 0 auto;
    }
    #reseller .section02 .txt-wrap strong{
        width:260px;
    }
    #reseller .section02 :is(.blogpay, .payapp) .reseller-cont .txt-box{
        padding-top: 8vw;
    }
    /* 영업안내 페이앱 */
    #reseller .section02 .payapp .reseller-cont .img-box::after{
        width: 19.6vw;
        height: 20.25vw;
    }
    #reseller .section03 .table ul li::before{
        top: 7px;
    }
    /* 리셀러 배너 공통 스타일*/
    #reseller :is(.section02, .section03) .bnr-wrap .txt-box{
        padding: 8% 5% 31% 5%;
    }
    #reseller .bnr-wrap .txt-box > span{
        font-size: 13px;
    }
    #reseller .bnr-wrap .txt-box p{
        font-size: 24px;
    }
    #reseller .bnr-wrap .txt-box p span{
        display: block;
    }
    #reseller .bnr-wrap .txt-box a{
        padding: 3.9% 11% 3.5% 6.5%;
        margin-top: 4%;
    }
    #reseller .bnr-wrap .txt-box a::after{
        right: 18%;
    }
    /* 리셀러 배너 섹션2 */
    #reseller .section02 .bnr-wrap .img-box{
        bottom: -28%;
        width: 49vw;
        transform: translateX(29%);
    }
    /* 리셀러 배너 섹션3 */
    #reseller .section03 .bnr-wrap .img-box{
        top: 64%;
        width: 56vw;
    }
    #reseller .section04 .cont-wrap > p{
        font-size: 13px;
        padding:0 15%;
        margin: 18px 0 20px;
    }
    #reseller .section04 .cont-wrap li{
        font-size: 15px;
    }
    #reseller .section04 .cont-wrap li:nth-child(2)::before,
    #reseller .section04 .cont-wrap li:nth-child(2)::after{
        width: 12px;
        height: 26px;
    }
    #reseller .section04 .cont-wrap li p::before{
        width: 40px;
        height: 40px;
    }
    #reseller .section04 .cont-wrap .btn-area{
        width: 60%;
        margin: 0 auto;
    }
    #reseller .section04 .cont-wrap .btn-area a{
        display: block;
        width: 100%;
        font-size: 13px;
    }
    #reseller .section04 .cont-wrap .btn-area a + a{
        margin: 10px 0 0;
    }
}
@media only screen and (max-width: 375px) {
    #reseller .section03 .txt-wrap p{
        width: 82%;
        margin: 0 auto;
    }
    #reseller .section04 .cont-wrap li{
        font-size: 14px;
    }
    #reseller .section04 .cont-wrap .btn-area a{
        font-size: 12px;
    }
}
@media only screen and (max-width: 320px) {
    #reseller .section03 .table{
        width: auto;
    }
}

/* 통합회원가입 */
#membership .sub-page-wrap .txt-wrap p{
    color: #868f98;
}
#membership .section01{
    overflow: hidden;
    position: relative;
    background: #deeffc;
}
#membership .section01 .img-box{
    z-index: 0;
    position: absolute;
    bottom: 0;
    right: -64px;
    width: 612px;
    height: auto;
}
#membership .section01 .txt-box{
    z-index: 1;
    position: relative;
    color: #111;
    line-height: 1.2;
    padding: 132px 0 124px;
}
#membership .section01 .txt-box > a{
    position: relative;
    display: inline-block;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    padding: 21px 101px 21px 41px;
    margin-top: 40px;
    border-radius: 4px;
    background: linear-gradient(95deg, #125DE6 0%, #2168ED 36%, #3B7FFD 88%);
    box-shadow: -1px -1px 0px 0px rgba(255, 255, 255, 0.16) inset, 1px 1px 0px 0px rgba(255, 255, 255, 0.16) inset;
    animation: none;
}
#membership .section01 .txt-box > a::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 41px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}
#membership .section01 .txt-box span{
    display: inline-block;
    font-size: 36px;
    font-weight: 300;
    line-height: 1.1945;
    padding-bottom: 4px;
}
#membership .section01 .txt-box strong{
    word-break: keep-all;
    display: block;
    font-size: 53px;
    line-height: 1.1889;
}
#membership .section01 .txt-box strong::before{
    content: "";
    display: inline-block;
    width: 210px;
    height: 43px;
    margin: 0 8px -2px 0;
    background: url("/images/sub/img_membership_logo.svg") no-repeat center;
    background-size: 100%;
}
#membership .section01 .txt-box p{
    word-break: keep-all;
    color: #666;
    font-size: 17px;
    line-height: 1.6479;
    padding-top: 16px;
}
#membership .section01 .txt-wrap p{
    color: #868F98;
}
#membership .section02{
    padding: 120px 0 140px;
    background: #F8F8F8;
}
#membership .section02 ul{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    margin: 0 28px;
}
#membership .section02 ul li{
    display: inline-block;
    width: 360px;
    height: 380px;
    padding: 74px 20px 0;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 28px 0 #eaeaea;
}
#membership .section02 ul li:nth-child(2){
    margin: 0 32px;
}
#membership .section02 ul li .txt-box{
    word-break: keep-all;
    font-size: 17px;
    text-align: center;
}
#membership .section02 ul li .txt-box::before{
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    margin: 0 auto 28px;
    background: url("/images/sub/img_membership_benefit01.png") no-repeat center;
    background-size: 100%;
}
#membership .section02 ul li:nth-child(2) .txt-box::before{
    background: url("/images/sub/img_membership_benefit02.svg") no-repeat center;
    background-size: 100%;
}
#membership .section02 ul li:last-child .txt-box::before{
    background: url("/images/sub/img_membership_benefit03.svg") no-repeat center;
    background-size: 100%;
}
#membership .section02 ul li .txt-box strong{
    display: block;
    font-size: 24px;
    font-weight: 600 ;
    line-height: 1.2085;
}
#membership .section02 ul li .txt-box p{
    color: #868E96;
    line-height: 1.6478;
    padding-top: 12px;
}
#membership .section02 ul li .txt-box p small{
    display: block;
    font-size: 13px;
    line-height: 1.231;
    padding-top: 5px;
}
#membership .section03{
    overflow: hidden;
    padding: 120px 0 220px;
}
#membership .section03 .cont-wrap{
    margin-top: 5px;
}
#membership .section03 .service-lst li + li{
    margin-top: 120px;
}
#membership .section03 .service-lst .service-cont{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
#membership .section03 .service-lst .img-box{
    overflow: hidden;
    max-width: 540px;
    height: auto;
    border-radius: 20px;
}
#membership .section03 .service-lst .txt-box{
    width: 50%;
    font-size: 17px;
    line-height: 1.765;
    padding: 72px 0 0 88px;
}
#membership .section03 .service-lst .txt-box strong{
    display: block;
    font-size: 36px;
    font-weight: 600;
    line-height: 1.1945;
}
#membership .section03 .service-lst .txt-box p{
    word-break: keep-all;
    color: #697077;
    padding: 24px 0 26px;
}
#membership .section03 .service-lst .txt-box p em{
    display: block;
    color: #143AA3;
}
#membership .section03 .service-lst :is(.service-payapp, .service-picksell) .txt-box{
    margin-left: 100px;
}
#membership .section03 .service-lst .service-blogpay .txt-box p em{
    color: #AC8C6D;
}
#membership .section03 .service-lst .service-picksell .txt-box p em {
    color: #3182F6;
}
#membership .section03 .service-lst .service-makelink .txt-box p em{
    color: #ff6c00;
}
#membership .section03 .service-lst .txt-box p span{
    display: block;
}

@media only screen and (max-width: 1200px) {
    #membership .section01 .img-box{
        bottom: 50%;
        right: 0;
        transform: translateY(50%);
    }
    #membership .section01 .txt-box{
        padding: 160px 0;
    }
    #membership .section02 ul li:nth-child(2){
        margin:0 2%;
    }
    #membership .section02 ul li .txt-box{
        font-size: 16px;
    }
    #membership .section03 .service-lst .service-cont{
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between;
    }
    #membership .section03 .service-lst .img-box{
        width: 50%;
        max-width: none;
    }
}
@media only screen and (max-width: 1024px) {
    #membership .section01 .txt-box{
        padding:12% 4% 16%;
    }
    #membership .section01 .txt-box span{
        font-size:24px;
    }
    #membership .section01 .txt-box strong{
        font-size:45px;
    }
    #membership .section01 .txt-box strong::before{
        width:178px;
        height:36px;
    }
    #membership .section01 .txt-box p{
        font-size: 16px;
    }
    #membership .section01 .txt-box > a{
        padding:16px 64px 15px 22px;
        margin-top: 28px;
        font-size:14px;
    }
    #membership .section01 .txt-box > a::after{
        right:24px;
    }
    #membership .section01 .img-box{
        width: 55%;
    }
    #membership .section02{
        padding: 80px 0 100px;
    }
    #membership .section02 ul{
        margin:0 20px;
    }
    #membership .section02 ul li{
        height: auto;
        padding: 6% 20px;
    }
    #membership .section03{
        padding: 80px 0 160px;
    }
    #membership .section03 .cont-wrap{
        margin-top: 0;
    }
    #membership .section03 .service-lst .txt-box{
        font-size: 16px;
        padding: 5.5vw 0 0 5%;
    }
    #membership .section03 .service-lst .txt-box strong{
        font-size: 34px;
    }
    #membership .section03 .service-lst .txt-box p{
        padding: 20px 0 28px;
    }
    #membership .section03 .service-lst :is(.service-payapp, .service-picksell) .txt-box{
        margin-left: 3vw;
    }
}
@media only screen and (max-width: 991px) {
    #membership .section02 .txt-wrap strong{
        width:36vw;
        margin: 0 auto;
    }
    #membership .section01 .txt-box{
        padding:8% 5% 28%;
    }
    #membership .section01 .img-box {
        bottom: -6%;
        right: -5%;
        width: 59vw;
        transform: unset;
    }
    #membership .section03 .txt-wrap strong span{
        display: block;
    }
    #membership .section02 ul{
        margin: 0 auto;
    }
    #membership .section02 ul li{
        padding: 5.85% 20px;
        border-radius: 16px;
    }
    #membership .section02 ul li .txt-box{
        font-size:14px;
    }
    #membership .section02 ul li .txt-box::before{
        width: 84px;
        height: 84px;
        margin-bottom: 16px;
    }
    #membership .section02 ul li .txt-box strong{
        font-size: 20px;
    }
    #membership .section03 .service-lst .img-box{
        border-radius: 16px;
    }
    #membership .section03 .service-lst .txt-box{
        font-size: 15px;
    }
}
@media only screen and (max-width: 768px) {
    #membership .section01 .img-box{
        bottom: -4%;
        right: -7%;
        width: 70vw;
    }
    #membership .section01 .txt-box{
        padding: 8.5vw 5.2% 42vw;
    }
    #membership .section01 .txt-box span{
        font-size:22px;
    }
    #membership .section01 .txt-box strong{
        font-size:40px;
    }
    #membership .section01 .txt-box strong::before{
        width: 162px;
        height: 34px;
    }
    #membership .section01 .txt-box p{
        padding-top:12px;
        font-size:15px;
    }
    #membership .section02 ul{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }
    #membership .section02 ul li{
        width:50%;
        min-width:290px;
        padding:10% 20px 11%;
    }
    #membership .section02 ul li:nth-child(2){
        margin:4% 0;
    }
    #membership .section03 .service-lst{
        width: 64%;
        margin: 0 auto;
    }
    #membership .section03 .service-lst .service-cont{
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    #membership .section03 .service-lst li + li{
        margin-top:20%;
    }
    #membership .section03 .service-lst .img-box {
        order: 1;
        position: relative;
        width:92%;
        margin: 0 auto;
    }
    #membership .section03 .service-lst .img-box img{
        width: 100%;
    }
    #membership .section03 .service-lst .txt-box{
        order: 2;
        width: 100%;
        padding:4.5vw 16% 0 0;
        margin-left:6%;
    }
    #membership .section03 .service-lst :is(.service-payapp, .service-picksell) .txt-box{
        margin-left:6%;
    }
    #membership .section03 .service-lst .txt-box strong{
        font-size: 30px;
    }
    #membership .section03 .service-lst .txt-box p{
        padding: 3.5% 0 6%;
    }
    #membership .section03 .service-lst .txt-box p span{
        display: inline;
    }
    #membership .section03 .service-lst .service-blogpay .txt-box p{
        width: 90%;
    }
    #membership .section03 .service-lst .service-picksell .txt-box p{
        width: 92%;
    }
}
@media only screen and (max-width: 575px) {
    #membership .section01 .img-box{
        right: -9%;
        width: 82vw;
    }
    #membership .section01 .txt-box{
        padding-bottom: 56vw;
    }
    #membership .section01 .txt-box span{
        font-size:20px;
    }
    #membership .section01 .txt-box strong{
        font-size:30px;
    }
    #membership .section01 .txt-box strong::before{
        width: 124px;
        height: 26px;
    }
    #membership .section01 .txt-box p{
        font-size: 14px;
    }
    #membership .section01 .txt-box > a {
        font-size: 12px;
        padding:14px 60px 13px 22px;
        margin-top:22px;
    }
    #membership .section01 .txt-box > a::after{
        width:5px;
        height:5px;
    }
    #membership .section02 .txt-wrap strong{
        width:220px;
    }
    #membership .section02 ul li{
        width:90%;
        max-width:290px;
        min-width:auto;
        padding:12% 20px 14.5%;
    }
    #membership .section03 .service-lst{
        width: 80%;
    }
    #membership .section03 .service-lst .txt-box{
        font-size: 14px;
        padding-top: 5.3vw;
    }
    #membership .section03 .service-lst .txt-box strong{
        font-size: 24px;
    }
    #membership .section03 .service-lst .txt-box p{
        padding: 2% 0 4%;
    }
}
@media only screen and (max-width: 425px) {
    #membership .section01 .img-box{
        bottom: -2%;
        right: -12%;
        width: 100vw;
    }
    #membership .section01 .txt-box{
        padding: 11vw 4.5vw 82vw;
    }
    #membership .section03 .service-lst{
        width: 100%;
    }
    #membership .section03 .service-lst .txt-box{
        padding: 8vw 0 0 5%;
    }
    #membership .section03 .service-lst .txt-box p span{
        display: block;
    }
}
@media only screen and (max-width: 375px) {
    #membership .section02 ul li{
        width: 76vw;
        padding:16% 10px 17%;
    }
}
@media only screen and (max-width: 360px) {
    #membership .section03 .service-lst .txt-box{
        margin-left:4%;
    }
    #membership .section03 .service-lst :is(.service-payapp, .service-picksell) .txt-box{
        margin-left:4%;
    }
}

/* 고객센터 */
#cs-center .sub-page-section{
    background: url("/images/sub/img_cscenter_bg.png") no-repeat center;
    background-size:cover;
}
@media only screen and (max-width: 991px) {
    #cs-center .sub-page-section{
        background-position: top 0 center;
        background-size: 150% auto;
    }
}
@media only screen and (max-width: 768px) {
    #cs-center .sub-page-section{
        background-size: 180% auto;
    }
}
@media only screen and (max-width: 575px) {
    #cs-center .sub-page-section{
        background-size: 240% auto;
    }
}

/* 이용약관 */
.terms-wrap{
    position: relative;
    max-width: 1200px;
    font-size: 16px;
    line-height: 1.75;
    margin: 0 auto;
}
.terms-wrap .contents{
    margin-top:50px;
    color: #666;
    word-break: keep-all;
}
.terms-wrap #tab2 .terms-info-box{
    padding-bottom:20px;
    border-bottom:1px solid #ebebeb
}
.terms-wrap h3{
    color: #333;
    padding: 20px 0 10px;
}
.terms-wrap h4{
    color: #333;
    display: block;
    padding-top: 25px;
}
.terms-wrap h4+p{
    padding-top: 5px;
}
.terms-wrap .depth-one{
    padding-left: 18px
}
.terms-wrap .depth-one li{
    padding-top: 5px;
}
.terms-wrap .depth-one li .txt-num{
    margin: 0 7px 0 -18px
}
.terms-wrap .depth-one .indent{
    font-size: 14px;
}
.terms-wrap .depth-one .depth-two{
    padding: 10px 0 0 25px
}
.terms-wrap .depth-one .depth-two li{
    padding-top: 0;
    font-size: 14px
}
.terms-wrap .depth-one .depth-two .indent{
    font-size: 14px;
    margin-left: -26px;
}
.terms-wrap .depth-one .depth-two .depth-three{
    padding: 10px 0 25px 28px;
}

.terms-wrap .depth-one .depth-two .depth-three li{
    padding-top: 0;
}

/* 이용약관 테이블*/
.table-terms>thead>tr>th,
.table-terms>tbody>tr>th,
.table-terms>tbody>tr>td {
    padding: 10px 15px;
    font-size: 14px;
}
.table-terms>thead>tr>th {
    border: 1px solid #e6e6e6;
    border-bottom-width: 0;
    background: #f5f5f5;
}
.table-terms>tbody>tr>th {
    text-align: center
}
.table-terms>tbody>tr>th,
.table-terms>tbody>tr>td {
    border: 1px solid #e6e6e6;
}
@media(max-width:991px){
    .terms-wrap{
        font-size: 15px;
    }
    .terms-wrap .contents {
        margin-top:30px;
    }
}

/* 로그인 */
.login-index{
    position: relative;
    max-width: 400px;
    height:100vh;
    margin:0 auto;
}
.login-index .sub-page-wrap .sub-page-heading{
    padding-top:132px;
}
.login-index h1 svg{
    width:140px;
    height:auto;
}
.login-index .tab-menu{
    font-size: 0;
    margin-bottom:12px;
}
.login-index .tab-menu li{
    position:relative;
    display: inline-block;
    width:50%;
    color: #777;
    font-size:16px;
    line-height: 1.188;
    text-align: center;
    padding:16px 16px 14px;
    border-bottom:1px solid #EBEBEB;
    cursor: pointer;
}
.login-index .tab-menu li.active{
    color:#333;
    font-weight:700;
    background:#fff;
}
.login-index .tab-menu li.active::after{
    content:'';
    position:absolute;
    right:0;
    left:0;
    bottom:-1px;
    width:100%;
    height:3px;
    background:#333;
}
.login-index label{
    display:block;
}
.login-index label + label{
    margin-top:-1px;
}
.login-index .form-control{
    padding:16px 15px 14px 42px;
    border-color:#e0e0e0;
    background-repeat: no-repeat;
    background-size: 14px 14px;
    background-position: top 17px left 20px;
}
.login-index .form-control:active,
.login-index .form-control:focus{
    border-color:inherit;
    z-index:1;
}
.login-index :is(label[for="userid"],label[for="siteid2"]) .form-control{
    background-image: url("/images/common/ico_user.svg");

    border-bottom-right-radius:0;
    border-bottom-left-radius:0;
}
.login-index :is(label[for="userid"],label[for="siteid2"]) .form-control:active,
.login-index :is(label[for="userid"],label[for="siteid2"]) .form-control:focus{
    background-image: url("/images/common/ico_user_active.svg");
}
.login-index label[for="userid2"] .form-control{
    border-radius:0;
    background-image: url("/images/common/ico_sub_user.svg");

}
.login-index label[for="userid2"] .form-control:active,
.login-index label[for="userid2"] .form-control:focus{
    background-image:url("/images/common/ico_sub_user_active.svg");
}
.login-index :is(label[for="userpwd"],label[for="userpwd2"]) .form-control{
    background-image: url("/images/common/ico_password.svg");
    border-top-right-radius:0;
    border-top-left-radius:0;
}
.login-index :is(label[for="userpwd"],label[for="userpwd2"]) .form-control:active,
.login-index :is(label[for="userpwd"],label[for="userpwd2"]) .form-control:focus{
    background-image: url("/images/common/ico_password_active.svg");
}
.login-index .check-wrap{
    font-size:14px;
    line-height: 1.215;
    padding:12px 0 18px;
}
.login-index .btn-lg{
    width: 100%;
    color: #fff;
    font-size:16px;
    font-weight:600;
    line-height: 1.375;
    text-align: center;
    padding:14px;
    border-radius:4px;
    background:linear-gradient(90deg, rgb(227, 30, 143) 40%, rgb(255, 205, 3) 95%) 80% 0% / 200% 800%;
    animation:joinBg 11s ease infinite;
    box-shadow:0 6px 8px 0 rgba(231, 0, 23, .2);
}
.login-index .find-form{
    color: #777;
    font-size: 0;
    text-align: center;
    margin:35px 0 32px;
}
.login-index .find-form a{
    position: relative;
    font-size:13px;
    margin:0 18px;
}
.login-index .find-form a:nth-child(2)::before,
.login-index .find-form a:nth-child(2)::after{
    content: '';
    position: absolute;
    top: 1px;
    width: 1px;
    height:14px;
    background: #EBEBEB;
}
.login-index .find-form a:nth-child(2)::before{
    left: -20px;
}
.login-index .find-form a:nth-child(2)::after{
    right: -20px;
}
.login-index .login-footer{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    padding:20px 0;
    color:#aaa;
    font-size:11px;
    text-align:center;
}
@media (max-width:1024px){
    .login-index .sub-page-wrap .sub-page-heading{
        padding:92px 0 24px;
    }
}
@media(max-width:575px){
    .login-index{
        padding-right:24px;
        padding-left:24px;
    }
    .login-index .sub-page-wrap .sub-page-heading{
        padding:20vw 0 6vw;
    }
    .login-index h1 svg{
        width:120px;
    }
}
.login-index .txt-summary{
    display: block;
    color: #999;
    font-size: 12px;
    line-height: 1.5;
    padding: 4px 0 12px;
}
.login-index .txt-summary + .btn{
    margin-bottom: 40px;
}