@charset "utf-8";
.real-cont {padding:160px 0 180px;}
.mo {display: none;}
.mont {font-family: 'Montserrat';}
.note {display: none; font-size: 14px; color: #666; padding-bottom: 20px;}

/* splitting */
.page-header > .container .s-tit.motion h3.chars .char {animation:textAni 1.5s both; animation-delay:calc(0.1s * var(--char-index));}
.page-header > .container .s-tit.motion p.words .word {animation:textAni 1.5s both; animation-delay:calc(0.05s * var(--word-index));}

@keyframes textAni {
    0% {opacity:0;}
    30% {opacity:0;}
}


/* page-header */
.page-header {position: relative; width: 100%; height: 680px; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;}
.page-header > .container {padding-top: 295px; width: 100%; height: 100%;}
.page-header > .container h3 {font-size: 60px; color: #fff; text-align: center; font-weight: 600;}
.page-header > .container p {font-size: 22px; color: #fff; font-weight: 400; opacity: .8; padding-top: 45px; text-align: center;}

.page-header.type1 {background-image: url(../images/sub/s-visual01.jpg);}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg);}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg);}
.page-header.type4 {background-image: url(../images/sub/s-visual04.jpg);}
.page-header.type5 {background-image: url(../images/sub/s-visual05.jpg);}

/* lnb */
.lnb {position: absolute; bottom: 0; left: 0; width: 100%; background-color: #fff; height: 80px; border-bottom: 1px solid #ddd;}
.lnb ul {width: 100%; display: table; table-layout:fixed;}
.lnb ul li {display: table-cell; position: relative;}
.lnb ul li::after {position: absolute; content:''; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height:20px; background-color: #ddd;}
.lnb ul li:last-child::after {display: none;}
.lnb ul li a {display: block; font-size: 18px; font-weight: 400; color: #666; line-height: 79px; text-align: center; position: relative;}
.lnb ul li a::after {position: absolute; content:''; width: 100%; height: 2px; background-color: #004ea2; bottom: -1px; left: 0; display: none;}
.lnb ul li.active a {color: #004ea2; font-weight: 600;}
.lnb ul li.active a:after {display: block;}

.sub_4_1_ .lnb {display: none;}

.btn-drop {display: none;}


/* 공통 */
section {padding: 160px 0 180px;}
.section-header h3 {position: relative; padding-top: 55px; font-size: 60px; color: #111; text-align: center; font-weight: 700;}
.section-header h3::before {position: absolute; content: ''; width: 24px; height: 24px; top: 0; left: 50%; transform: translateX(-50%); background: url(../images/main/ico_tit.png) 50% 50% no-repeat; background-size: auto;}
.section-header span {position: relative; display: block; font-size: 35px; line-height: 50px; color: #004ea2; font-weight: 500; text-align: center; padding: 90px 0 45px;}
.section-header span::after {position: absolute; content: ''; bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/sub/ico_dot.png) 50% 50% no-repeat; background-size: auto; width: 10px; height: 24px;}
.section-header p {font-size: 18px; color: #666; line-height: 35px; text-align: center; padding-top: 20px;}
article ~ article {margin-top: 180px;}
.article-header {padding-bottom: 80px;}
.article-header h4 {position: relative; font-size: 50px; font-weight: 600; color: #111; padding-left: 30px;}
.article-header h4::before {position: absolute; content: ''; top: 8px; left: 0; width: 8px; height: 34px; background: url(../images/sub/ico_arti.png) 50% 50% no-repeat; background-size: auto;}
.bg {margin-top: 100px; width: 100%; height: 460px; border-radius: 20px; background: url() 50% 50% no-repeat; background-size: cover;}
.bg.s101 {background-image: url(../images/sub/bgs101.jpg);}
.bg.s102 {background-image: url(../images/sub/bgs102.jpg);}
.bg.s103 {background-image: url(../images/sub/bgs103.jpg); margin-top: 70px;}

/* s1_1 */
.s1_1 article {margin-top: 55px;}
.s1_1 .wrap {width: 100%; display: flex; align-items: flex-start;}
.s1_1 .tit {max-width: 625px; width: 100%;}
.s1_1 .tit span {font-size: 18px; color: #004ea2; font-weight: 700; line-height: 30px;}
.s1_1 .tit h4 {font-size: 44px; color: #111; font-weight: 700; line-height: 60px; padding-top: 10px;}
.s1_1 .txt {max-width: 815px; width: 100%;}
.s1_1 .txt p {font-size: 18px; color: #666; line-height: 30px; letter-spacing: -.5px;}
.s1_1 .txt p ~ p {padding-top: 30px;}
.s1_1 .txt b {display: block; text-align: right; font-size: 20px; font-weight: 600; color: #111;}


/* s1_2 */
.history-wrap {position:relative; margin-top: 75px;}
.history-wrap.history-fixed .year h3 {position:fixed; left:0; top:0; padding-left:calc((100% - 1090px)/2); padding-top:150px;}
.history-wrap.history-fixed .year p {position:fixed; left:0; top:50px; padding-left:calc((100% - 1090px)/2); padding-top:155px; color: #004ea2;}
.history-wrap.history-fixed.last .year h3  {position:absolute; bottom:465px; left:0; padding-left:0; padding-top:0; top:auto;}
.history-wrap.history-fixed.last .year p  {position:absolute; bottom:240px; left:0; padding-left:0; padding-top:0; top:auto;}
.history-wrap .col {display:flex; position:relative; z-index:11;}
.history-wrap .year {max-width: 630px; width:100%; position:relative; padding-left: 175px;}
.history-wrap .year h3 {font-size:30px; color:#000; font-weight:700; position:absolute; top:0; left:175px;}
.history-wrap .year p {font-size:100px; font-weight:700; position:absolute; top:55px; left:175px; opacity:0; color: #004ea2;}
.history-wrap .year p.on {opacity:1;}
.history-wrap .txt-wrap {width:1%; flex:1 1 auto;}
.history-wrap .txt-wrap .txt-box {padding-left:65px; position:relative; padding-bottom:50px; margin-bottom:25px;}
.history-wrap .txt-wrap .txt-box:last-child {padding-bottom:170px; margin-bottom:0;}
.history-wrap .txt-wrap .txt-box:before {content:''; width:9px; height:9px; border-radius:50%; background:#004ea2; position:absolute; top:11px; left:-4px;}
.history-wrap .txt-wrap .txt-box:after {position:absolute; content:''; width:1px; height:calc(100% - 30px); top:30px; left:0; background:#ddd;}
.history-wrap .txt-wrap .txt-box .mo-year {display:none;}
.history-wrap .txt-wrap .txt {display:flex;}
.history-wrap .txt-wrap .txt ~ .txt {margin-top: 30px;}
.history-wrap .txt-wrap .txt .month {width:85px; font-size:20px; line-height:30px; color:#000; font-weight:700; font-family:'Wanted Sans';}
.history-wrap .txt-wrap .txt ul {width:1%; flex:1 1 auto;}
.history-wrap .txt-wrap .txt ul li {font-size:20px; color:#666; line-height:30px; font-family:'Wanted Sans';}
.history-wrap .txt-wrap .txt ul li ~ li {padding-top: 10px;}


/* s1_4 */
.s1_4 article {margin-top: 100px;}
.s1_4 ul {width: 100%;}
.s1_4 ul li {width: 100%; display: flex; align-items: center;}
.s1_4 ul li.rev {flex-direction: row-reverse;}
.s1_4 ul li ~ li {margin-top: 58px;}
.s1_4 ul li .img {max-width: 680px; width: 100%; border-radius: 20px; overflow: hidden;}
.s1_4 ul li .img img {display: block; margin: 0 auto; max-width: 100%; width: 100%;}
.s1_4 ul li .txt-box {position: relative; max-width: 760px; width: 100%; height: 100%; padding-left: 80px; padding-top: 95px;}
.s1_4 ul li .txt-box::before {position: absolute; content: ''; top: 0; left: 80px; width: 57px; height: 57px; background: url() 50% 50% no-repeat; background-size: auto;}
.s1_4 ul li:nth-of-type(1) .txt-box::before {background-image: url(../images/sub/ico_s10401.png);}
.s1_4 ul li:nth-of-type(2) .txt-box::before {background-image: url(../images/sub/ico_s10402.png);}
.s1_4 ul li:nth-of-type(3) .txt-box::before {background-image: url(../images/sub/ico_s10403.png);}
.s1_4 ul li:nth-of-type(4) .txt-box::before {background-image: url(../images/sub/ico_s10404.png);}
.s1_4 ul li:nth-of-type(5) .txt-box::before {background-image: url(../images/sub/ico_s10405.png);}
.s1_4 ul li .txt-box small {display: block; font-size: 14px; color: #004ea2;}
.s1_4 ul li .txt-box h5 {font-size: 32px; font-weight: 600; color: #111; padding-top: 15px;}
.s1_4 ul li .txt-box p {font-size: 18px; line-height: 30px; color: #666; padding-top: 30px;}


/* s2_1 */
.s2_1 {padding-bottom: 0;}
.s2_1 article {margin-top: 95px; width: 100%; padding: 130px 0 180px; background-color: #f6f6f6;}
.s2_1 article.pc-article .container {position: relative; height: 1120px;}

.s2 article.mobile-article {display: none;}
.s2_1 article.mo-768 {display: none;}


.s2_1 article .map {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1440px; width: 100%; height: 100%; z-index: 0;}
.s2_1 article .map img {display: block; max-width: 100%; margin: 0 auto; }
.s2_1 article .banner {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1440px; width: 100%; height: 100%; z-index: 5;}
.s2_1 article .banner img {display: block; max-width: 100%; margin: 0 auto;}
.s2_1 article span.dot {position: absolute; width: 10px; height: 10px; background-color: #004ea2; border-radius: 50%; z-index: 5;}
.s2_1 article span.dot::before {position: absolute; content: ''; width: 100%; height: 100%; background-color: #004ea2; border-radius: 50%; z-index: -1; animation: ball-scale 1s 0s linear infinite; transition: .3s; top: 0; left: 0;}
.s2_1 article span.dot::after {position: absolute; width: 100%; height: 100%; content: ''; border-radius: 50%; background-color: #004ea2; z-index: -1; top: 0; left: 0; animation: ball-scale 2s -1s linear infinite; transition: .3s;}


.s2_1 article span.dot1 {top: 125px; right: 482px;}
.s2_1 article span.dot2 {top: 250px; right: 586px;}
.s2_1 article span.dot3 {top: 348px; right: 656px;}
.s2_1 article span.dot4 {top: 310px; left: 727px;}
.s2_1 article span.dot5 {top: 383px; left: 725px;}
.s2_1 article span.dot6 {top: 425px; right: 690px;}
.s2_1 article span.dot7 {top: 435px; left: 706px;}
.s2_1 article span.dot8 {top: 575px; left: 668px;} 

@keyframes ball-scale {
    0% {
        transform: scale(1);
        opacity: 0.1;
    }

    5% {
        opacity: .4;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}


/* s2_2 */
.s2_2 {padding-bottom: 0;}
.s2_2 article {margin-top: 95px; width: 100%; padding: 120px 0 180px; background-color: #f6f6f6;}
.s2_2 article .container {position: relative; height: 1970px;}
.s2_2 article .map {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1440px; width: 100%; height: 100%; z-index: 0;}
.s2_2 article .map img {display: block; max-width: 100%; margin: 0 auto;}
.s2_2 article .banner {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1440px; width: 100%; height: 100%; z-index: 5;}
.s2_2 article .banner img {display: block; max-width: 100%; margin: 0 auto;}
.s2_2 article span.dot {position: absolute; width: 10px; height: 10px; background-color: #004ea2; border-radius: 50%; z-index: 5;}
.s2_2 article span.dot::before {position: absolute; content: ''; width: 100%; height: 100%; background-color: #004ea2; border-radius: 50%; z-index: -1; animation: ball-scale 1s 0s linear infinite; transition: .3s; top: 0; left: 0;}
.s2_2 article span.dot::after {position: absolute; width: 100%; height: 100%; content: ''; border-radius: 50%; background-color: #004ea2; z-index: -1; top: 0; left: 0; animation: ball-scale 2s -1s linear infinite; transition: .3s;}

.s2_2 article span.dot1 {top: 360px; left: 204px;}
.s2_2 article span.dot2 {top: 378px; left: 232px;}
.s2_2 article span.dot3 {top: 389px; left: 221px;}
.s2_2 article span.dot4 {top: 286px; right: 698px;}
.s2_2 article span.dot5 {top: 449px; right: 370px;}

@keyframes ball-scale {
    0% {
        transform: scale(1);
        opacity: 0.1;
    }

    5% {
        opacity: .4;
    }

    100% {
        transform: scale(5);
        opacity: 0;
    }
}

.s2 .list {position: absolute; width: 100%; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 6; max-width: 1440px;}
.s2 .list ul {display: flex; width: calc(100% + 60px); margin: 0 -30px; flex-wrap: wrap;}
.s2 .list ul li {width: 50%; padding: 0 30px;}
.s2 .list ul li:nth-of-type(2) ~ li {margin-top: 80px;} 
.s2 .list ul li .item {width: 100%;}
.s2 .list ul li .item h5 {position: relative; font-size: 26px; font-weight: 500; color: #111; display: inline-block; padding-right: 11px;}
.s2 .list ul li .item h5:after{position: absolute; content: ''; width: 6px; height: 6px; border-radius: 50%; background-color: #004ea2; top: 0; right: 0;}
.s2 .list ul li .item figure {width: 100%; border-radius: 20px; overflow: hidden; margin-top: 25px;}
.s2 .list ul li .item figure img {display: block; margin: 0 auto; max-width: 100%;}
.s2 .list ul li .item figure figcaption {padding: 25px 0; background-color: #fff; text-align: center;}
.s2 .list ul li .item figure figcaption span {display: block; font-size: 14px; font-weight: 600; color: #004ea2;}
.s2 .list ul li .item figure figcaption p {font-size: 18px; color: #666; padding-top: 10px;}

.s2_1 .list {position: static; width: 100%; transform: none;}

.s2 article.mobile-article .list {position:static; width: 100%; transform: none;}



/* s3_1 */
.s3_1 .arti01 {margin-top: 100px;}
.s3_1 .arti01 .wrap {display: flex; width: 100%; gap: 60px;}
.s3_1 .arti01 .wrap figure img {display: block; margin: 0 auto; max-width: 100%; border-radius: 20px;}
.s3_1 .arti01 .wrap figure figcaption {font-size: 22px; color: #333; text-align: center; line-height: 35px; padding-top: 45px;}

.bg-box {margin-top: 80px; width: 100%; background: url(../images/sub/img_s30104.jpg) 50% 50% no-repeat; background-size: cover; border-radius: 20px; padding: 70px 80px 65px;}
.bg-box .txt span {display: block; width: 55px; height: 55px;}
.bg-box .txt span img {display: block; margin: 0 auto; max-width: 100%;}
.bg-box .txt h5 {font-size: 32px; color: #fff; font-weight: 500; padding-top: 30px;}
.bg-box .txt p {font-size: 22px; color: #fff; opacity: .8; padding-top: 25px; line-height: 34px;}

.eps {width: 100%; display: flex; gap: 60px;}
.eps .eps-img {max-width: 690px; width: 100%;}
.eps .eps-img img {display: block; max-width: 100%; margin: 0 auto; border-radius: 20px;}
.eps .eps-img p {font-size: 22px; color: #666; text-align: center; padding-top: 50px;}


/* s3_2 */
.s3_2 article {margin-top: 105px;}
.plant {display: flex; flex-wrap: wrap; width: calc(100% + 60px); margin: 0 -30px;}
.plant li {position: relative; width: 25%; padding: 0 30px; min-height: 500px;}
.plant li:nth-of-type(4) ~ li {margin-top: 100px;}
.plant li::after {position: absolute; content: ''; width: 32px; height: 32px; top: 50%; transform: translateY(-50%); right: -16px; background: url(../images/sub/ico_arrow.png) 50% 50% no-repeat; background-size: auto;}
.plant li:nth-of-type(4n)::after {display: none;}
.plant li .item {border-radius: 20px; overflow: hidden; height: 100%;}
.plant li .item .img-box img {display: block; margin: 0 auto; max-width: 100%;}
.plant li .item .txt-box {border: 1px solid #ddd; padding: 40px 15px 0; text-align: center; min-height: 300px; border-radius: 0 0 20px 20px;}
.plant li .item .txt-box small {display: block; font-size: 14px; font-weight: 600; color: #004ea2;}
.plant li .item .txt-box h5 {font-size: 22px; font-weight: 600; color: #333; padding-top: 20px; line-height: 30px;}
.plant li .item .txt-box p {font-size: 18px; line-height: 30px; color: #666; padding-top: 15px;}


/* s3_3 */

.s3_3 .img-box {width: 100%; margin-top: 95px;}
.s3_3 .img-box img {display: block; margin: 0 auto; max-width: 100%;}
.s3_3 .list {margin-top: 100px; width: 100%;}
.s3_3 .list ul {width: 100%; display: flex; flex-wrap: wrap; border-top: 2px solid #004ea2;}
.s3_3 .list ul li {width: 50%; padding: 40px 60px; border-bottom: 1px solid #ddd;}
.s3_3 .list ul li dl {width: 100%; display: flex; align-items: flex-start;}
.s3_3 .list ul li dl dt {font-size: 22px; font-weight: 600; color: #111; max-width: 225px; width: 100%; line-height: 38px;}
.s3_3 .list ul li dl dt span {color: #004ea2;}
.s3_3 .list ul li dl dd {font-size: 18px; font-weight: 400; color: #666; line-height: 32px;}
.s3_3 .arti02 .img-box {margin-top: 60px; border-radius: 20px; overflow: hidden;}

.table-box {width: 100%;}
.table-box table {width: 100%; table-layout: fixed;}
.table-box table thead th {position: relative; font-size: 18px; font-weight: 500; color: #fff; text-align: center; padding: 24px 0; background-color: #1f2531;}
.table-box table thead th:nth-of-type(1) {border-radius: 20px 0 0 20px;}
.table-box table thead th:last-child {border-radius: 0 20px 20px 0;}
.table-box table thead th:after {position: absolute; content: ''; width: 1px; height: 15px; background-color: #ddd; top: 50%; transform: translateY(-50%); right: 0; opacity: .3;}
.table-box table thead th:last-child:after {display: none;}
.table-box table tbody tr {border-bottom: 1px solid #ddd;}
.table-box table tbody tr:last-child {border-bottom: 1px solid #1f2531;}
.table-box table tbody td {font-size: 18px; line-height: 28px; color: #666; font-weight: 400; padding: 20px 0; text-align: center; border-right: 1px solid #ddd; vertical-align: middle;}
.table-box table tbody td.bd0 {border-right: 0;}
.table-box table tbody td.tit {font-weight: 600; color: #111;}


/* s4_1 */
.s4_1 .section-header p {font-size: 22px; line-height: 35px; text-align: center; color: #333; padding-top: 45px;}

.s4_1 .arti01 {margin-top: 95px;}
.s4_1 .cnt {width: 100%; display: flex; gap: 60px;}
.s4_1 .cnt .cnt-img {border-radius: 20px; overflow: hidden;}
.s4_1 .cnt .cnt-img img {display: block; margin: 0 auto; max-width: 100%;}

.s4_1 .solution {width: 100%;}
.s4_1 .solution ul {display: flex; width: calc(100% + 60px); margin: 0 -30px;}
.s4_1 .solution ul li {width: 25%; padding: 0 30px; min-height: 360px;}
.s4_1 .solution ul li dl {position: relative; width: 100%; height: 100%; padding: 90px 20px 0; border-radius: 20px; border: 1px solid #ddd; overflow: hidden;}
.s4_1 .solution ul li dl::before {position: absolute; content: ''; top: 0; left: 50%; transform: translateX(-50%); width: 110px; height: 40px; background: url(../images/sub/bg_step.png) 50% 50% no-repeat; background-size: auto; font-size: 14px; font-weight: 500; color: #666; text-align: center; line-height: 40px;}
.s4_1 .solution ul li:nth-of-type(1) dl::before {content: 'STEP 01';}
.s4_1 .solution ul li:nth-of-type(2) dl::before {content: 'STEP 02';}
.s4_1 .solution ul li:nth-of-type(3) dl::before {content: 'STEP 03';}
.s4_1 .solution ul li:nth-of-type(4) dl::before {content: 'STEP 04';}
.s4_1 .solution ul li dt {max-width: 160px; width: 100%; margin: 0 auto;}
.s4_1 .solution ul li dt img {display: block; margin: 0 auto; max-width: 100%;}
.s4_1 .solution ul li dd {padding-top: 30px; font-size: 22px; font-weight: 500; color: #333; text-align: center;}

.s4_1 .bg-box {padding-top: 105px; background: url(../images/sub/img_s40109.jpg) 50% 50% no-repeat; background-size: cover;}
.s4_1 .bg-box span {width: 56px;}

.s4_1 .table-box {margin-top: 80px;}

.s4_1 .major {display: flex; flex-wrap: wrap; width: calc(100% + 60px); margin: 0 -30px;}
.s4_1 .major li {width: 50%; padding: 0 30px;}
.s4_1 .major li:nth-of-type(2) ~ li {margin-top: 80px;}
.s4_1 .major li .box img {border-radius: 20px; max-width: 100%; width: 100%; display: block; margin: 0 auto;}
.s4_1 .major li .box p {margin-top: 50px; font-size: 22px; color: #333; text-align: center;}