@charset "utf-8";
.real-cont {padding:150px 0 180px;}


#sub {overflow: hidden; padding-top: 0;}
.mo {display: none;}

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

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

/* page-header */
.page-header {position: relative; width: 100%; height: 664px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 345px;}
.page-header.type1 {background-image: url(../images/sub/s-visual01.jpg); background-color: #333;}
.page-header.type2 {background-image: url(../images/sub/s-visual02.jpg); background-color: #333;}
.page-header.type3 {background-image: url(../images/sub/s-visual03.jpg); background-color: #333;}
.page-header.type4 {background-image: url(../images/sub/s-visual04.jpg); background-color: #333;}
.page-header.type5 {background-image: url(../images/sub/s-visual05.jpg); background-color: #333;}

.page-header .container h2 {font-size: 60px; font-weight: 700; color: #fff; text-align: center; letter-spacing: -1.8px;}

.lnb {position: relative; border-bottom: 1px solid #ddd;}
.lnb ul {width: 100%; display: flex;}
.lnb ul li {position: relative; width: 1%; flex: 1 1 auto;}
.lnb ul li::after {position: absolute; content:''; width: 1px; height: 16px; top: 50%; right: 0; transform: translateY(-50%); background-color: #ddd;}
.lnb ul li:last-child::after {display: none;}
.lnb ul li a {position: relative; display: block; width: 100%; text-align: center; font-size: 18px; color: #888; line-height: 75px; font-weight: 500; transition: all .3s linear; z-index: 2; letter-spacing: -.54px;}  
.lnb ul li a:after {position: absolute; content:''; width: 100%; height: 4px; background-color: #158B9C; bottom: -1px; left: 0; opacity: 0;}
.lnb ul li.active a {color: #158B9C; font-weight: 600;}
.lnb ul li.active a:after {opacity: 1;}

.lnb .btn-drop {display: none;}

/* 공통 */
section {padding: 150px 0 180px;}
.section-header h3 {position: relative; padding-top: 40px; text-align: center; color: #111; font-weight: 600; font-size: 54px; letter-spacing: -1.62px;}
.section-header h3::before {position: absolute; content: ''; width: 38px; height: 10px; background-color: #158B9C; top: 0; left: 50%; transform: translateX(-50%); border-radius: 50px;}
.section-header p {font-size: 22px; line-height: 1.72; color: #666; text-align: center; margin-top: 30px; letter-spacing: -.66px;}
.section-header figure {margin-top: 60px; border-radius: 40px;}
.section-header figure img {max-width: 100%; display: block; margin: 0 auto;}

.article-header h4 {position: relative; font-size: 44px; font-weight: 600; color: #222; line-height: 1.59; letter-spacing: -1.32px; padding-left: 38px;}
.article-header h4::before {position: absolute; content: ''; width: 8px; height: 40px; top: 15px; left: 0; background: url(../images/sub/ico_bullet.png) 50% 50% no-repeat; background-size: auto;}
.article-header p {font-size: 22px; line-height: 1.72; color: #666; letter-spacing: -.66px; margin-top: 20px;}

article {margin-top: 150px;}
article .cnt {margin-top: 40px; width: 100%; border: 1px solid #ddd; border-radius: 40px; padding: 60px 39px;}
article .cnt ~ .cnt {margin-top: 40px;}
article .cnt > h5 {position: relative; padding-left: 25px; font-size: 28px; font-weight: 600; line-height: 1.42; color: #333; letter-spacing: -.84px; margin-bottom: 30px;}
article .cnt > h5::before {position: absolute; content: ''; width: 6px; height: 24px; top:8px; left: 5px ; border-radius: 50px; background: linear-gradient(177deg, #158B9C 19.95%, #0260A7 88.75%);}
article .cnt > figure {width: 100%;}
article .cnt > figure img {max-width: 100%; display: block; margin: 0 auto;}

/* s1_1 */
.s1_1 .arti01 {width: 100%; margin-top: 80px; display: flex; gap: 120px; padding: 0 10px;}
.s1_1 .arti01 .tit {max-width: 565px; width: 100%; font-size: 40px; font-weight: 400; color: #222; line-height: 1.45; letter-spacing: -1.2px;}
.s1_1 .arti01 .tit > span {color: #158B9C; font-weight: 600;}
.s1_1 .arti01 .txt {width: 1%; flex: 1 1 auto;}
.s1_1 .arti01 .txt p {font-size: 20px; color: #666; font-weight: 400; line-height: 1.7; letter-spacing: -.6px; word-break: break-all;}
.s1_1 .arti01 .txt p > strong {color: #333; font-weight: 600;}
.s1_1 .arti01 .txt p ~ p {margin-top: 42px;}
.s1_1 .arti01 .txt b {display: block; font-size: 22px; font-weight: 600; color: #888; letter-spacing: -.66px; margin-top: 40px;}
.s1_1 .arti01 .txt b > span {color: #333; font-size: 26px; display: inline-block; padding-left: 10px;}

/* s1_2 */
.s1_2 article {margin-top: 150px;} 
.s1_2 .cnt h6 {display: flex; align-items: center; gap: 16px; font-size: 24px; color: #333; font-weight: 600; letter-spacing: -.72px; line-height: 1.41;}
.s1_2 .cnt h6 > span {display: inline-block; padding: 0 20px; line-height: 44px; font-size: 20px; color: #fff; font-weight: 600; letter-spacing: -.6px; border-radius: 10px;}
.s1_2 .cnt .top {padding-bottom: 60px; border-bottom: 1px solid #ddd;}
.s1_2 .cnt .top h6 > span {background-color: #0260A7;}
.s1_2 .cnt .bottom {padding-top: 60px;}
.s1_2 .cnt .bottom h6 > span {background-color: #1A9691;}
.s1_2 .cnt ul {width: calc(100% + 117px); display: flex; margin: 30px -58.5px 0;}
.s1_2 .cnt ul li {padding: 0 58.5px; position: relative;}
.s1_2 .cnt ul li:not(:last-child)::after {position: absolute; content: ''; width: 78px; height: 12px; background: url() 50% 50% no-repeat; background-size: auto; top: 110px; right: -39.5px;}
.s1_2 .cnt ul li:nth-of-type(1)::after {background-image: url(../images/sub/ico_arrow.png);}
.s1_2 .cnt .top ul li:nth-of-type(2)::after {background-image: url(../images/sub/ico_arrow2.png);}
.s1_2 .cnt .bottom ul li:nth-of-type(1)::after {background-image: url(../images/sub/ico_arrow3.png); width: 100px; height: 40px; right: -51.5px;}
.s1_2 .cnt ul li figure {width: 100%;}
.s1_2 .cnt ul li figure img {max-width: 100%; display: block; margin: 0 auto; border-radius: 10px;}
.s1_2 .cnt ul li figcaption {margin-top: 5px; width: 100%; border-radius: 10px; padding: 10px 24px; font-size: 18px; color: #fff; font-weight: 600; letter-spacing: -.54px; text-align: center;}
.s1_2 .cnt ul li:nth-of-type(1) figcaption {background-color: #158B9C;}
.s1_2 .cnt ul li:nth-of-type(2) figcaption {background-color: #0E7CA3;}
.s1_2 .cnt ul li:nth-of-type(3) figcaption {background-color: #0260A7;}

/* s1_3 */
.s1_3 article {margin-top: 60px;}
.s1_3 article figure img {max-width: 100%; margin: 0 auto; display: block;}

/* s1_4 */
.s1_4 {padding-bottom: 0;}
.s1_4 article {margin-top: 60px; display: flex; gap: 110px; align-items: flex-start;}
.s1_4 .history_tit {max-width: 590px; width: 100%;}
.s1_4 .history_tit h5 {font-size: 30px; font-weight: 700; line-height: 1.13; color: #158B9C; text-align: right; letter-spacing: -.9px; font-family: 'Montserrat';}
.s1_4 .history_tit h4 {font-size: 100px; font-weight: 700; color: #f3f3f3; margin-top: 30px; letter-spacing: -3px; text-align: right; font-family: 'Montserrat';}
.s1_4 .history_tit figure {border-radius: 40px; margin-top: 60px;}
.s1_4 .history_tit figure img {display: block; max-width: 100%; margin-left: auto;}
.s1_4 .history_wrap {width: 1%; flex: 1 1 auto; position: relative; padding-bottom: 180px;}
.s1_4 .history_wrap::before {position: absolute; content: ''; width: 1px; height: calc(100% - 8px); bottom: 0; left: 0; background-color: #ddd;}
.s1_4 .history_wrap .history {position: relative; padding-left: 130px;}
.s1_4 .history_wrap .history::before {position: absolute; content: ''; width: 108px; height: 1px; border-bottom: 1px dashed #ddd; left: 0; top: 18px;}
.s1_4 .history_wrap .history::after {position: absolute; content: ''; width: 18px; height: 18px; border-radius: 50%; top: 8px; left: -9px; background: url(../images/sub/ico_dot.png) 50% 50% no-repeat; background-size: auto;}
.s1_4 .history_wrap .history ~ .history {margin-top: 100px;}
.s1_4 .history_wrap .history h5 {font-size: 46px; font-weight: 700; letter-spacing: -1.38px; line-height: .73; color: #158B9C; margin-bottom: 40px;}
.s1_4 .history_wrap .history dl {width: 100%; display: flex; gap: 12px;}
.s1_4 .history_wrap .history dl dt {max-width: 40px; width: 100%; font-size: 20px; color: #333; font-weight: 600; line-height: 1.7; letter-spacing: -.6px; text-align: right;}
.s1_4 .history_wrap .history dl dd {width: 1%; flex: 1 1 auto; font-size: 20px; color: #666; font-weight: 400; line-height: 1.7; letter-spacing: -.6px;}


/* s2 */
.s2 .bg {border-radius: 40px; width: 100%; margin-top: 60px;}
.s2 .bg img {max-width: 100%; display: block; margin: 0 auto;}
.s2 article .cnt .factory {width: 100%; margin-top: 32px; display: flex; gap: 20px; align-items: center;}
.s2 article .cnt .factory .item {width: 1%; flex: 1 1 auto;}
.s2 article .cnt .factory .item .tit {width: 100%; border-radius: 10px; line-height: 60px; font-size: 20px; font-weight: 600; letter-spacing: -.6px; color: #fff; text-align: center;}
.s2 article .cnt .factory .item:nth-of-type(1) .tit {background-color: #888;}
.s2 article .cnt .factory .item:nth-of-type(2) .tit {background-color: #158B9C;}
.s2 article .cnt .factory .item .info {padding: 30px; margin-top: 15px; width: 100%; border-radius: 10px; min-height: 340px; background-color: #f8f8f8; display: flex; gap: 36px; align-items: center;}
.s2 article .cnt .factory .item .info figure {max-width: 325px; width: 100%; border-radius: 10px;}
.s2 article .cnt .factory .item .info figure img {max-width: 100%; display: block; margin: 0 auto;}
.s2 article .cnt .factory .item .info .txt {width: 1%; flex: 1 1 auto;}
.s2 article .cnt .factory .item .info .txt p {position: relative; padding-left: 24px; font-size: 18px; line-height: 1.88; font-weight: 500; color: #333;}
.s2 article .cnt .factory .item .info .txt p::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; top: 15px; left: 0; background-color: #888;}
.s2 article .cnt .check-box {margin-top: 24px; width: 100%; border-radius: 10px; background-color : rgba(2,96,167, .03); padding: 40px 50px;}
.s2 article .cnt .check-box p.check {position: relative; padding-left: 44px; font-size: 22px; color: #666; font-weight: 400; line-height: 1.81; letter-spacing: -.66px;}
.s2 article .cnt .check-box p.check::before {position: absolute; content: ''; width: 24px; height: 24px; background: url(../images/sub/ico_check.png) 50% 50% no-repeat; background-size: auto; top: 9px; left: 0;}
.s2 article .cnt .check-box p.check strong {color: #333; font-weight: 600;}
.s2 article .cnt > small {display: block; font-size: 16px; color: #666; line-height: 1.5; letter-spacing: -.48px; font-weight: 500; margin-top: 26px;}

/* s2_1 */
.s2_1 .cnt .inner {margin-top: 30px; width: 100%;}
.s2_1 .cnt .inner dl {width: 100%; display: flex; gap: 12px;}
.s2_1 .cnt .inner dl dt {max-width: 180px; width: 100%; font-size: 22px; color: #fff; font-weight: 600; letter-spacing: -.66px; border-radius: 10px;  display: flex; align-items: center; justify-content: center;}
.s2_1 .cnt .inner dl:nth-of-type(2) {padding-top: 82px;}
.s2_1 .cnt .inner dl:nth-of-type(3) {padding-top: 12px;}
.s2_1 .cnt .inner dl:nth-of-type(1) dt {background-color: #158B9C;}
.s2_1 .cnt .inner dl:nth-of-type(2) dt {background-color: #0260A7;}
.s2_1 .cnt .inner dl:nth-of-type(3) dt {background-color: #1D9D7A;}

.s2_1 .cnt .inner dl dd {width: 1%; flex: 1 1 auto; border-radius: 10px;}
.s2_1 .cnt .inner dl:nth-of-type(1) dd {background-color: rgba(21, 139, 156, .05); padding: 18px; color: #158B9C; font-size: 20px; font-weight: 600; letter-spacing: -.6px; line-height: 1.7; text-align: center;}

.s2_1 .cnt .inner dl:nth-of-type(2) dd {background-color: rgba(2, 96, 167, .05); padding: 22px 17px; position: relative;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd::before {position: absolute; content: ''; width: 42px; height: 80px; background: url(../images/sub/img_arrow.png) 50% 50% no-repeat; background-size: auto; top: -80px; left: 50%; transform: translateX(-50%); z-index: -1;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd::after {position: absolute; content: '글로벌 혁신기술 선도'; font-size: 20px; font-weight: 600; letter-spacing: -.6px; line-height: 1.7; color: #0260A7; top: -52px; left: 50%; transform: translateX(-50%);}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul {width: 100%; display: flex; gap: 40px;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li {width: 1%; flex: 1 1 auto; position: relative;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li ~ li::after {position: absolute; content: ''; width: 1px; height: 100%; top: 0; left: -20px; background-color: rgba(2, 96, 167, .1);}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li h6 {font-size: 20px; font-weight: 500; color: #333; letter-spacing: -.6px; line-height: 1.7; margin-top: 8px; text-align: center;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li .b x {border-radius: 10px; overflow: hidden; width: 100%; padding: 0; background-color: transparent;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li .box span {display: block; text-align: center; background-color: #0260a7; line-height: 48px; color: #fff; font-size: 18px; font-weight: 600; letter-spacing: -.54px;}
.s2_1 .cnt .inner dl:nth-of-type(2) dd ul li .box p {font-size: 16px; color: #666; font-weight: 500; line-height: 1.5; letter-spacing: -.48px; text-align: center; background-color: #fff; padding: 21px 0;}

.s2_1 .cnt .inner dl:nth-of-type(3) dd {background-color: rgba(29, 157, 122, .05); padding: 20px 0;}
.s2_1 .cnt .inner dl:nth-of-type(3) dd ul {width: 100%; display: flex; align-items: center;}
.s2_1 .cnt .inner dl:nth-of-type(3) dd ul li {width: 1%; flex: 1 1 auto; position: relative;}
.s2_1 .cnt .inner dl:nth-of-type(3) dd ul li ~ li::after {position: absolute; content: ''; width: 1px; height: 120px; top: 50%; transform: translateY(-50%); left: 0; background-color: rgba(29, 157, 122, .1);}
.s2_1 .cnt .inner dl:nth-of-type(3) dd ul li p {font-size: 18px; font-weight: 500; color: #333; text-align: center; line-height: 1.77; letter-spacing: -.54px; padding: 12px 0;}
.s2_1 .cnt .inner dl:nth-of-type(3) dd ul li p > i {font-style: normal; color: #1D9D7A;}

/* s2_3 */
.s2_3 article .cnt .factory {flex-wrap: wrap;}
.s2_3 article .cnt .factory .item .info {display: block; padding: 0;}
.s2_3 article .cnt .factory .item .info figure {max-width: 100%;}
.s2_3 article .cnt .factory .item.w100 {width: 100%;}


/* s2_5 */
.s2_5 .arti01 figure {padding-bottom: 30px; border-bottom: 1px solid #ddd; margin-bottom: 30px;}
.s2_5 .arti01 ul {width: 100%; display: flex; gap: 19px;}
.s2_5 .arti01 ul li {width: 1%; flex: 1 1 auto;}
.s2_5 .arti01 ul li dl dt {width: 100%; padding: 14px 20px; line-height: 1.55; letter-spacing: -.54px; font-size: 18px; color: #fff; font-weight: 600; border-radius: 10px; text-align: center;}
.s2_5 .arti01 ul li dl dt > i {font-style: normal; display: inline-block; padding: 0 10px;}
.s2_5 .arti01 ul li:nth-of-type(1) dl dt {background-color: #1D9D7A;}
.s2_5 .arti01 ul li:nth-of-type(2) dl dt {background-color: #0260A7 ;}
.s2_5 .arti01 ul li:nth-of-type(3) dl dt {background-color: #EF823D;}
.s2_5 .arti01 ul li dl dd {margin-top: 10px; width: 100%; padding: 30px; min-height: 210px; border-radius: 10px; background-color: #f8f8f8;}
.s2_5 .arti01 ul li dl dd span {display: inline-block; padding: 0 16px; line-height: 2.25; letter-spacing: -.48px; font-size: 16px; font-weight: 600; margin-bottom: 20px; border-radius: 50px;}
.s2_5 .arti01 ul li dl dd span ~ span {margin-left: 5px;}
.s2_5 .arti01 ul li:nth-of-type(1) dl dd span {background-color: rgba(29, 157, 122, 0.10); color: #1D9D7A;}
.s2_5 .arti01 ul li:nth-of-type(2) dl dd span {background-color: rgba(2, 96, 167, 0.10); color: #0260A7;}
.s2_5 .arti01 ul li:nth-of-type(3) dl dd span {background-color: rgba(239, 130, 61, 0.10); color: #EF823D;}
.s2_5 .arti01 ul li dl dd p {position: relative; font-size: 18px; font-weight: 400; line-height: 1.66; color: #666; letter-spacing: -.54px; padding-left: 16px;}
.s2_5 .arti01 ul li dl dd p::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #888; top: 12px; left: 0 ;}

.s2_5 .figure-box {display: flex; gap: 20px;}
.s2_5 .figure-box figure {width: 1%; flex: 1 1 auto; border-radius: 10px;}

.s2_5 .figure-box .group {width: 1%; flex: 1 1 auto; display: flex; gap: 10px;} 
.s2_5 .figure-box .group figure figcaption {width: 100%; margin-bottom: 10px; line-height: 50px; border-radius: 10px; font-size: 20px; color: #fff; font-weight: 600; letter-spacing: -.6px; text-align: center;}
.s2_5 .figure-box .group figure:nth-of-type(1) figcaption {background-color: #158B9C;}
.s2_5 .figure-box .group figure:nth-of-type(2) figcaption {background-color: #0E7CA3;}
.check::before {position: absolute; content: ''; width: 24px; height: 24px; background: url(../images/sub/ico_check.png) 50% 50% no-repeat; background-size: auto; top: 9px; left: 0;}