@charset "utf-8";

/* -----------------------------------------------------------  landing 03 최문정 200113 */
/* ------------------------ 공통 */
.wrap_landing {width:100%;min-width:1400px;}
.wrap_landing h1, h2, h3, h4, h5 {line-height:110%;font-weight:bold;}
.wrap_landing p {line-height:150%;font-size:18.5px;}
.wrap_landing p b {color:#002246;font-weight:500;}
.wrap_landing p.info {font-size:17px;}
.wrap_landing p.info::before {content: '!';display:inline-block;width:19px;height:19px;line-height:19px;margin-right:6px;font-size:14px;font-weight:bold;border-radius:100px;color:#002246;border:1px solid #002246;}

/* content */
.content {width:1000px;margin:0 auto;padding:95px 0 100px 0;text-align:center;color:#6c7f94;font-size:18px;letter-spacing:-1px;}

/* title */
.section_tit {font-size:38px;text-align:center;color:#002246;line-height:130% !important;padding:0 0 25px 0;letter-spacing:-3px;}
.section_tit b {color:#0059a6;}
.section_tit .thin_txt {font-size:33px;font-weight:300;letter-spacing:-2px;}

/* margin top value */
.mt10 {margin-top:10px;}

/* margin bottom value */
.mb30 {margin-bottom:20px;}
.mb40 {margin-bottom:40px;}
.mb60 {margin-bottom:60px;}

/* fixed button */
.btn_fixed {
    position:fixed;display:block;bottom:0;left:50%;width:400px;height:63px;line-height:63px;margin-left:-200px;
    letter-spacing:-1px;font-size:23px;color:#fff;text-align:center;z-index:9999;border-radius:40px 40px 0 0;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a81f4+0,23e9cd+90 */
    background: #0a81f4; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #0a81f4 0%, #23e9cd 90%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #0a81f4 0%,#23e9cd 90%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #0a81f4 0%,#23e9cd 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a81f4', endColorstr='#23e9cd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.btn_fixed:hover {
    color:#fff;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0a81f4+29,23e9cd+93 */
    background: #0a81f4; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  #0a81f4 29%, #23e9cd 93%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg,  #0a81f4 29%,#23e9cd 93%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg,  #0a81f4 29%,#23e9cd 93%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0a81f4', endColorstr='#23e9cd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}
.btn_fixed::after {content:'';display:inline-block;width:38px;height:38px;margin-left:15px;border-radius:100px;vertical-align:middle;margin-bottom:5px;background:url('/assets/img/landing/005/icon.png')#fff no-repeat;background-position:-9px -115px;}


/* ------------------------ 섹션별 */
/* section01 */
.section01 {position:relative;height:900px;background:url('/assets/img/landing/005/bg_section01.png') no-repeat center #004e9b;}
.section01 .title_visual {padding:0 0 80px 0;}
.section01 .detail_bx {position:absolute;width:1000px;padding:70px 0 85px 0;background:#fff;border:7px solid #ecf1f7;text-align:center;border-radius:20px;
    -webkit-box-shadow:10px 10px 20px 0px rgba(15,25,44,0.09);-moz-box-shadow:10px 10px 20px 0px rgba(15,25,44,0.09);box-shadow:10px 10px 20px 0px rgba(15,25,44,0.09);}
.section01 .detail_bx .section_tit {font-size:38px;letter-spacing:-2.5px;}
.section01 .detail_bx .section_txt {font-size:22px;}
.section01 .detail_bx p.info::before {background:#6c7f94;color:#fff;border:1px solid #6c7f94;}

.section01 .point_grp {width:790px;margin:40px auto;}
.section01 .point_grp:after {display:block;content:'';clear:both;}
.section01 .point_grp li {float:left;width:55%;height:55px;line-height:55px;background:#e2e8ef;}
.section01 .point_grp li:first-child {width:45%;background:#002246;color:#fff;font-weight:500;}

.btn_link {position:relative;display:block;width:280px;height:55px;line-height:55px;margin:50px auto 0 auto;padding:0 54px 0 70px;background:#0059a6;letter-spacing:-1.2px;
font-weight:normal !important; font-size:21px;text-align:left;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.btn_link:hover {background:#005095;color:#fff;transition:all 200ms ease-in-out;}
.btn_link .icon_sty {position:absolute;top:0;right:0;width:55px;height:55px;background:url('/assets/img/landing/005/icon.png') no-repeat 0 0 #004988;}

/* section02 */
.section02 {background:#ecf1f7;padding-top:72px;}
.section02 .list_solution {margin:60px 0;}
.section02 .list_solution:after {display:block;content:'';clear:both;}
.section02 .list_solution li {float:left;width:310px;height:200px;margin-right:35px;background:#fff;border-top:3px solid #c5cfd9;font-size:16px;line-height:145%;}
.section02 .list_solution li.center {border-top:3px solid #0059a6;}
.section02 .list_solution li.center h4 {color:#0059a6;}
/* .section02 .list_solution li:first-child h4 {padding-top:56px;} */
.section02 .list_solution h4 {padding-top:45px;font-size:19px;font-weight:600;color:#163454;padding-bottom:10px;letter-spacing:-1px;line-height:140%;}
.section02 .list_solution li.mg_top {margin-top:25px;}
.section02 .list_solution li.mg_none {margin-right:0;}
.section02 .list_solution.col4 li {width: 48%;}
.section02 .list_solution.col4 li:nth-child(2n) {margin-right: 0;}

/* section03 */
.section03 .content {padding-bottom:90px;}
.section03 .list_step {width:960px;margin:35px auto 50px auto;}
.section03 .list_step:after {display:block;content:'';clear:both;}
.section03 .list_step li {position:relative;float:left;width:140px;height:140px;background:url('/assets/img/landing/005/bg_step.png') no-repeat 0 0;}
.section03 .list_step li span {position:absolute;width:140px;left:0;bottom:38px;letter-spacing:-1px;font-weight:500}
.section03 .list_step li.step01 {background-position:0 0;}
.section03 .list_step li.step02 {background-position:0 -140px;}
.section03 .list_step li.step03 {background-position:0 -280px;}
.section03 .list_step li.step04 {background-position:0 -420px;}
.section03 .list_step li.step05 {background-position:0 -560px;}
.section03 .list_step li.arrow {width:65px;height:140px;line-height:140px;background:#fff;color:#0059a6;font-size:16px;}

.section03 .list_step_img {display: none;}

.section03 p.mb30 {color:#002246;line-height:160%;}
.section03 p.mb30 b {font-size:22px;color:#0059a6;font-weight:bold;letter-spacing:-1.5px;}
.section03 p.info::before {color:#6c7f94;border-color:#6c7f94;}

.section03 .detail_bx {padding:50px 70px;border:2px dashed #d9dee4;}
.section03 .detail_bx h3 {font-size:22px;color:#002246;line-height:180%;letter-spacing:-1.2px;}
.section03 .detail_bx h3 p {color:#00246;font-weight:normal;font-size:17px;}
.section03 .detail_bx ul {text-align:left;font-size:16px;}
.section03 .detail_bx ul li {margin:14px 0;}
.section03 .detail_bx ul li:first-child {margin-top:0}
.section03 .detail_bx ul li b {display:inline-block;height:33px;line-height:33px;font-weight:500;border-radius:50px;margin-right:15px;padding:0 30px;background:#254c74;color:#fff;}

/* section04 */
.section04 {padding-bottom:100px;border-bottom:1px solid #e6e6e6;text-align:center;}
.section04 h2 {font-size:30px;color:#002246;letter-spacing:-2.3px;}
.section04 h2 b {color:#0059a6;}

.section04 .contact a {display:inline-block;font-size:23px;font-weight:300;color:#002246;}
.section04 .contact a:first-child {font-weight:bold;color:#0059a6;letter-spacing:-1px;}
.section04 .contact a:first-child::after {content:"";display:inline-block;width:1px;height:20px;background:#bac3cd;margin:0 15px 4px 20px;vertical-align:middle;}

.section04 .contact a:first-child::before, 
.section04 .contact a:last-child::before {content:"";display:inline-block;width:35px;height:35px;margin-right:5px;vertical-align:text-top;}
.section04 .contact a:first-child::before {background:url('/assets/img/landing/005/icon.png') no-repeat;background-position:-9px -170px;}
.section04 .contact a:last-child::before {background:url('/assets/img/landing/005/icon.png') no-repeat;background-position:-9px -225px;}

.section04 .btn_link {padding:0 54px 0 78px;}
.section04 .btn_link .icon_sty {background:url('/assets/img/landing/005/icon.png') no-repeat#004988;background-position:0 -54px;}
    

@media (max-width:1440px) {
    /* common */
    .wrap_landing {
        min-width: 100%;
        padding: 0 40px;
    }

    .wrap_landing > div {
        max-width: 100%;
    }

    .wrap_landing img {
        max-width: 100%;
    }

    /* section01 */
    .section01,
    .section02 {
        width: calc(100% + 80px);
        margin-left: -40px;
        max-width: none !important;
        height: auto;
        padding: 0 40px;
    }

    .section01 .content {
        padding: 90px 20px 23%;
    }

    .section01 .detail_bx {
        left: 50%;
        transform: translateX(-50%);
    }

    .section02 {
        padding-top: 72px;
    }
}

@media (max-width:1280px) {

    .content {
        width: 100%;
    }

    .section01 .detail_bx {
        width: calc(100% - 80px);
        left:40px;
        transform: none;
        padding: 60px 40px;
    }

    .section01 .detail_bx .section_tit  {
        font-size: 32px !important;
    }

    .section02 .list_solution {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .section02 .list_solution li {
        margin-top: 0 !important;
        margin: 10px !important;
        max-width: 100%;
    }

    .section02 .list_solution li br {
        display: block !important;
    }
}

@media (max-width:1024px) {

    .section03 .list_step {
        display: none;
    }

    .section03 .list_step_img {
        display: block;
        width: 100%;
        margin: 20px 0 40px;
    }

    
    
}
@media (max-width:768px) {

    .wrap_landing {
        padding: 0 20px;
    }

    .wrap_landing p {
        font-size: 16px;
    }

    .wrap_landing p.info {
        font-size: 16px;
    }
    
    .section_tit,
    .section04 h2 {
        font-size: 32px !important;
        line-height: 1.3;
    }

    .section04 h2 b {
        display: block;
    }

    .section_tit span {
        display: block;
    }

    .section_tit .thin_txt {
        font-size: 25px;
    }

    .section01 .detail_bx .section_tit  {
        font-size: 25px !important;
    }

    /* section1 */

    .section01,
    .section02 {
        width: calc(100% + 40px);
        margin-left: -20px;
        padding: 0 20px;
    }

    .content {
        padding: 60px 0;
    }

    .section01 .title_visual {
        padding:  0 0 40px 0 ;
    }
    
    .section01 .content {
        padding: 60px 0;
    }

    .section01 .detail_bx {
        width: 100%;
        left: 0;
        padding: 60px 20px;
        position: relative;
        transform: none;
    }

    .section01 .detail_bx .section_txt {
        font-size: 16px;
    }
    
    .section02 .list_solution li {
        display: flex;
        flex-basis:calc(50% - 20px);
        justify-content: center;
        align-items: center;
        flex-direction:column;
        padding: 0 10px;
    }

    .section02 .list_solution.col4 li {
      width: 100%;
    }

    .section02 .list_solution h4 {
        padding-top: 0 !important;
        font-size: 18px;
    }

    /* section03 */
    .section03 p.mb30 {
        line-height: 1.75;
    }

    .section03 p.mb30 b {
        display: block;
    }

    .section03 .detail_bx {
        padding: 40px 20px;
    }

     .section03 .detail_bx ul li {
        position: relative;
        padding-left: 120px;
        margin-top: 0;
        margin-bottom: 20px;
        line-height: 1.5;
    }

    .section03 .detail_bx ul li:last-of-type {
        margin-bottom: 0;
    }

    .section03 .detail_bx ul li b {
        position: absolute;
        top: -3.5px;
        left: 0;
        width: 100px;
        text-align: center;
        padding: 0 10px;
    }

    .section03 .content {
        padding-bottom: 0;
    }

    .section04 {
        padding: 60px 0px;
    }

    .btn_link {
        font-size: 16px;
        width: 250px;
        max-width: 100%;
        height: 50px;
        line-height: 50px;
        margin-bottom: 0;
    }

}

@media (max-width:487px) {
    
    .section_tit,
    .section04 h2 {
        font-size: 25px !important;
    }
    
    .section_tit .thin_txt {
        margin-bottom: 10px;
    }
    
    .content {
        padding: 40px 0;
    }

    .section01 .content {
        padding: 40px 0;
    }

    .section01 .detail_bx {
        padding: 40px 20px;
    }

    .section02 .list_solution {
        flex-direction: column;
        margin: 40px 0;
    }

    .section02 .list_solution li {
        flex-basis:0;
        padding: 20px;
        margin: 10px 0 !important;
    }

    .section03 .detail_bx ul li {
        padding-left: 100px;
        font-size: 15px;
    }

    .section03 .detail_bx ul li b {    
        font-size: 14px;
        width: 80px;
    }

    
    .section04 {
        padding: 40px 0;
    }

    .section04 .contact a {
        display: block;
    }

    .section04 .contact a:first-child::after {
        display: none;
    }
    
    .btn_link {
        margin-top: 40px !important;
    }

}