@charset "UTF-8";
/* 실서버 적용시 살제할 소스 */
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
* {font-family:'Noto Sans KR'}
/* */


/* CSS 수정 220822 */
/*공통 영역*/
.box {
    padding-left: 32px;
    padding-right: 28px
}

.top {
    position: relative
}

.top__title {
    font-size: 40px;
    font-weight: bold
}

.top__image {
    margin-top: 45px
}

.top__sns {
    position: absolute;
    right: 0;
    top: 10px;
    font-size: 0
}

.description {
    line-height: 29px
}

.top__title + .description {
    margin-top: 10px;
    line-height: 25px
}

.btn-sns {
    display: inline-block;
    width: 56px;
    height: 56px;
    background: url(../imgs/icon_sns.png) no-repeat;
    text-indent: -9999px;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

    .btn-sns + .btn-sns {
        margin-left: 10px
    }

    .btn-sns:hover {
        opacity: 0.8
    }

.btn-sns__kakao {
    background-position: 0 0
}

.btn-sns__copy {
    background-position: -66px 0
}
/*industry*/
.industry {
    margin-top: 80px
}

.industry--detail {
    margin-top: 60px
}

.industry__title {
    margin-bottom: 40px;
    font-size: 26px;
    font-weight: 500;
    line-height: 40px
}

.industry__list {
    margin-left: -30px
}

    .industry__list li {
        float: left;
        width: 360px;
        margin-left: 30px;
        margin-bottom: 50px
    }

.industry__link {
    display: block
}

.industry__type {
    min-height: 184px;
    padding: 20px 26px;
    background: #f7f5f6;
    font-size: 17px;
    line-height: 34px;
    box-sizing: border-box
}

    .industry__type strong {
        display: block;
        font-size: 20px;
        font-weight: bold;
        color: #0950aa
    }

/*220822 수정 시작*/
.industry__linksave {
    display: block;
    position: relative;
    height: 414px;
    background: #39afd6;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out
}

.industry__linksave-title {
    position: absolute;
    left: 30px;
    right: 30px;
    top: 60px;
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    line-height: 36px
}

.industry__linksave_a {
    position: absolute;
    bottom: 40px;
    left: 30px;
}

    .industry__linksave_a img {
        vertical-align: baseline;
    }

    .industry__linksave_a a {
        padding: 0 15px 0 18px;
        border: 1px solid #fff;
        display: inline-block;
        font-size: 20px;
        color: #fff;
        margin: 10px 0 0;
        transition: background-color, .2s;
    }

        .industry__linksave_a a:hover {
            background: #7ad6f5
        }
/*220822 수정 끝*/

.industry__youtube {position:relative;padding-top:56.25%}
.industry__youtube iframe {position:absolute;top:0;left:0;width:100%;height:100%}
.industry__download {margin-top:25px;margin-left:-20px;text-align:center}
.industry__download a {display:table;float:left;width:270px;margin-left:20px;border-radius:10px;background:#f2f4f6}
.industry__download a .cell {display:table-cell;height:70px;vertical-align:middle}
.industry__download a .cell span {display:inline-block;padding-right:30px;background:url(/Images/Solution/icon_download.png) no-repeat right 50%;font-size:18px;line-height:24px;font-weight:500;color:#0950aa}
.industry__item ~ .industry__item {margin-top:75px}
.item__title {margin-top:48px;font-size:26px;font-weight:bold}
.item__desc {margin-top:10px}
.item__feature {margin-top:25px}
.industry__youtube {margin-top:75px}
.industry__download {overflow:hidden;margin-bottom:120px}
.item ~ .item--product {margin-top:100px}
.item__list {overflow:hidden;margin-left:-90px}
.item__list li {float:left;width:217px;margin-left:90px;margin-bottom:50px}
.item__list li a {display:block}
.item__list li a .info {margin-top:15px}
.item__list li a .pname {line-height:24px}
.item__producttitle {margin-top:40px;margin-bottom:15px;font-size:22px;font-weight:500}
/*save*/
.savebox {margin-top:50px;padding:70px 0 75px;background:#f2f4f6}
.savebox__wrap {position:relative;padding-left:130px;background:url(/Images/Solution/icon_sprout.png) no-repeat center left}
.savebox__title {margin-bottom:10px;font-size:24px;font-weight:bold}
.savebox__link {display:inline-block;position:absolute;bottom:0;right:30px;padding-left:40px;padding-right:30px;background:#0c479b;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.savebox__link:hover {opacity:0.9}
.savebox__link span {display:inline-block;padding-right:30px;background:url(/Images/Solution/blit_test.png) no-repeat right 50%;color:#fff;line-height:40px}
/*purchase*/
.purchase {margin-top:90px;text-align:center}
.purchase__link {display:inline-block;width:489px;height:70px;background:url(/Images/Solution/bg_purchase.jpg) no-repeat center top;font-size:18px;font-weight:bold;color:#fff;line-height:70px;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.purchase__link:hover {opacity:0.9}
.purchase__link span {display:inline-block;padding-right:20px;background:url(/Images/Solution/blit_test.png) no-repeat right 50%;font-size:18px;font-weight:bold;color:#fff;line-height:67px}
/*cost*/
input[type=text].ipt {display:inline-block;width:186px;height:30px;border:none;background:#e4e7e9;outline:none;vertical-align:top}
select.slt {display:inline-block;width:186px;height:30px;border:none;background-color:#e4e7e9;outline:none;line-height:30px}
select.slt {color:#888}
.cost__button {text-align:center}
.cost__box {display:none}
.cost__more {margin-bottom:5px}
.cost__more span {display:inline-block;position:relative;padding-right:24px;font-weight:bold}
.cost__more span:before {content:'';display:block;position:absolute;top:50%;right:0;width:18px;height:18px;margin-top:-9px;background:url(/Images/Solution/blit_more.png) no-repeat 50% 50%;background-size:auto 8px;-webkit-transform:rotate(180deg);transform:rotate(180deg);-webkit-transform-origin:center center;transform-origin:center center}
.cost__more.active span:before {-webkit-transform:rotate(0deg);transform:rotate(0deg);}
.cost__list {margin-top:35px;padding:60px 105px;background:#f2f4f6}
.cost__list li {line-height:30px}
.cost__list li ~ li {margin-top:30px}
.cost__title {display:inline-block;min-width:500px;font-weight:500;line-height:30px;vertical-align:top}
.cost__title strong {position:relative;margin-right:4px;font-size:22px;font-weight:bold;color:#0950aa;line-height:30px}
.cost__title strong:before {content:'*';position:absolute;top:-2px;left:-10px;color:#00abe4}
.cost__title--notrequired strong:before {content:none}
.cost__inputwrap {display:inline-block;vertical-align:top}
.cost__inputwrap svg {position:relative;top:2px}
.cost__inputtext {display:inline-block;margin-left:6px;font-weight:bold;vertical-align:top;line-height:30px}
.cost__title small {display:block;margin-top:5px;padding-left:42px;font-size:14px;color:#666;line-height:19px}
.cost__notice {margin-top:20px;color:#666;text-align:center}
    /* 2021-01-27 설명 주석 추가 시작 */
    .cost__notice span {
        font-size: 0.5em
    }

    .cost__notice div {
        color: #aaa;
        font-size: 14px
    }

        .cost__notice div span {
            color: #aaa
        }

.resultchart .cost__notice {
    text-align: left
}
/* 2021-01-27 설명 주석 추가 끝 */
.cost__button {margin-top:40px}
.costresult {display:none;margin-top:170px}
.costresult__title {margin-bottom:70px;font-size:40px;font-weight:bold}
.costresult__top {display:table;table-layout:fixed;width:100%}
.costresult__top li {display:table-cell;padding:0 35px;vertical-align:middle;text-align:left}
.costresult__top li:first-child {text-align:right}
.costresult__year {display:inline-block;padding:12px 35px;border-radius:30px;background:#f2f4f6}
.costresult__year * {font-size:30px;font-weight:bold}
.costresult__year strong {margin-right:20px;color:#0950aa}
.costresult__year span {opacity:0;-webkit-transition:all 0.3s ease-out 1s;transition:all 0.3s ease-out 1s}
.costresult.active .costresult__year span {opacity:1}
.costresult__product {display:inline-block;text-align:center}
.costresult__image img {width:240px}
.costresult__name {display:inline-block;padding:0 35px;border-radius:50px;background:#f2f4f6;font-size:28px;line-height:76px}
.resultbox {margin-top:65px;padding:40px 0 50px;background:#f2f4f6;text-align:center}
.resultbox__title {margin-bottom:25px;font-size:30px;font-weight:bold}
.resultbox__list {display:inline-block;text-align:left}
.resultbox__list li {margin-top:15px}
.resultbox__list .t {display:inline-block;width:190px;font-size:22px;font-weight:500}
.resultbox__list strong {display:inline-block;width:200px;font-size:22px;font-weight:bold}
.resultbox__list strong span {font-size:22px;font-weight:bold}
.resultbox__list .l1,.resultbox__list .l2,.resultbox__list .l3,.resultbox__list .l1,.resultbox__alarm strong {opacity:0;-webkit-transition:all 0.3s ease-out 1s;transition:all 0.3s ease-out 1s}
.resultbox__list .l1 {-webkit-transition-delay:1.3s;transition-delay:1.3s}
.resultbox__list .l2 {-webkit-transition-delay:1.6s;transition-delay:1.6s}
.resultbox__list .l3 {-webkit-transition-delay:1.9s;transition-delay:1.9s}
.resultbox__alarm strong {-webkit-transition-delay:2.5s;transition-delay:2.5s}
.costresult.active .resultbox__list .l1,.costresult.active .resultbox__list .l2,.costresult.active .resultbox__list .l3,.costresult.active .resultbox__alarm strong {opacity:1}
.resultbox__icon {margin:42px 150px 55px}
.resultbox__icon img {margin:2px;opacity:0;-webkit-transition:all 0.5s ease-out;transition:all 0.5s ease-out}
.costresult.active .resultbox__icon img {opacity:1}
.resultbox__alarm {font-size:30px;font-weight:bold;line-height:58px}
.resultbox__alarm strong {margin:0 40px;font-size:40px;font-weight:bold;color:#0950aa;line-height:58px}
.resultwrap {margin-top:42px}
.resulttable {table-layout:fixed;width:100%;padding:0;border-spacing:0}
.resulttable tr th {border-left:3px solid #5ebddc;background:#39afd6;color:#fff;vertical-align:middle}
.resulttable tr td.t {background:#f2f4f6;font-weight:bold;text-align:left}
.resulttable tr td {border-bottom:3px solid #f2f4f6;border-left:3px solid #f2f4f6;text-align:center}
.resulttable tr th, .resulttable tr td {padding:15px 20px}
.resulttable tr th:first-child {border-left:none}
.resulttable tr td:first-child {border-left:none}
.resultchart {margin-top:46px}
.resultchart__wrap:after {content:'';display:block;clear:both}
.resultchart__left {float:left;width:560px}
.resultchart__right {float:right;width:560px}
.resultchart__title {padding:0 18px;background:#39afd6;font-size:22px;font-weight:bold;color:#fff;line-height:52px}
.retest {position:relative;margin-top:80px;padding:60px 74px;background:#f2f4f6}
.retest__title {font-size:24px;font-weight:bold}
.retest__link .savebox__link {top:50%;bottom:auto;right:74px;margin-top:-20px}
.retest + .purchase {margin-top:46px}
.resultchart__box {padding:30px;background:#f2f4f6}
.chart svg {overflow:visible}
.ct-bar {stroke-width:120px !important}
.ct-label {font-size:16px !important;color:#000 !important;font-weight:500 !important}
.ct-series-a .ct-bar {stroke:#476993 !important}
.ct-series-b .ct-bar {stroke:#39afd6 !important}
.ct-bar-label {fill:#eee !important}
.ct-label.ct-vertical {font-size:15px !important}
.loading__wrap {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.5);z-index:9999}
.loading {position:absolute;left:50%;top:50%;z-index:1;width:120px;height:120px;margin:-60px 0 0 -60px;border:12px solid #eee;border-radius:50%;border-top:12px solid #0950aa;width:100px;height:100px;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}
@-webkit-keyframes spin {0% {-webkit-transform:rotate(0deg);}100% { -webkit-transform:rotate(360deg)}}
@keyframes spin {0% { transform:rotate(0deg)}100% { transform:rotate(360deg)}}
/* share */
.resultbox__share {margin-top:45px}
.share-link {display:inline-block;padding-left:30px;padding-right:30px;background:#0c479b;-webkit-transition:all 0.3s ease-out;transition:all 0.3s ease-out}
.share-link:hover {opacity:0.9}
.share-link span {display:inline-block;padding-right:24px;background:url(/Images/Solution/blit_share.png) no-repeat right 50%;color:#fff;line-height:40px}

/* 2022-03-03 추가 시작 */
.resultbox__icon img {
    display: none !important;
}

.resultbox__list .t {
    width: 170px;
}

.resultbox__alarm {
    width: 547px;
    height: 206px;
    line-height: 206px;
    margin: 0 auto;
    background: url(/Images/Solution/count_bg_pc.jpg) no-repeat;
}

    .resultbox__alarm strong {
        vertical-align: middle;
        font-size: 46px;
        display: inline-block;
        left: 50px;
        position: relative;
        color: #fff !important;
        top: -8px;
    }
/* 2022-03-03 추가 끝 */