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

/* 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: 476px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 210px;}
.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 .container h2 {font-size: 48px; font-weight: 700; color: #fff; text-align: center; line-height: 1.2;}

.lnb {position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8.649999618530273px);}
.lnb > .container {display: flex; gap: 20px; align-items: center; justify-content: space-between;}
.lnb ul {display: flex; gap: 114px;} 
.lnb ul li {position: relative; width: auto;}
.lnb ul li ~ li::before {position: absolute; content:''; width: 1px; height: 10px; top: 50%; left: -57px; transform: translateY(-50%); background-color: #fff;}
.lnb ul li a {position: relative; display: block; width: 100%; text-align: center; font-size: 20px; color: #fff; line-height: 60px; font-weight: 600; transition: all .3s linear; z-index: 2;} 
.lnb ul li a:after {position: absolute; content:''; width: 19px; height: 9px; background: url(../images/sub/ico_arrow2.png) 50% 50% no-repeat; background-size: auto; bottom: 0px; left: 50%; opacity: 0; transform: translateX(-50%);}
.lnb ul li.active a:after {opacity: 1;}

.lnb .s-nav {display: flex; gap: 46px; align-items: center; justify-content: right;}
.lnb .s-nav li {position: relative; width: auto; font-size: 18px; font-weight: 500; line-height: 60px; color: #fff; letter-spacing: -.36px; text-align: center;}
.lnb .s-nav li.home img {display: block; max-width: 100%;}
.lnb .s-nav li ~ li::before {position: absolute; content: ''; width: 24px; height: 24px; top: 50%; left: -35px; transform: translateY(-50%); background: url(../images/sub/ico_arrow.png) 50% 50% no-repeat; background-size: auto;}

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

.article-header small {display: block; font-size: 14px; font-family: 'Poppins'; font-weight: 500; line-height: normal; letter-spacing: -.28px; color: #0157d6; text-align: center;}
.article-header h3 {position: relative; padding-bottom: 62px; text-align: center; color: #222; font-weight: 700; font-size: 52px; letter-spacing: -1.04px; line-height: normal; margin-top: 12px;}
.article-header h3::after {position: absolute; content: ''; width: 44px; height: 7px;bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/sub/ico_bar.jpg) 50% 50% no-repeat; background-size: auto;}

.s3 .article-header h3 {padding-bottom: 0;}
.s3 .article-header h3::after {display: none;}
.s3 .article-header p {position: relative; font-size: 22px; color: #767676; margin-top: 20px; padding-bottom: 62px; line-height: 1.6; text-align: center;}
.s3 .article-header p::after {position: absolute; content: ''; width: 44px; height: 7px;bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/sub/ico_bar.jpg) 50% 50% no-repeat; background-size: auto;}

.s4 .article-header h3 {padding-bottom: 0;}
.s4 .article-header h3::after {display: none;}
.s4 .article-header p {position: relative; font-size: 22px; color: #767676; margin-top: 20px; padding-bottom: 62px; line-height: 1.6; text-align: center;}
.s4 .article-header p::after {position: absolute; content: ''; width: 44px; height: 7px;bottom: 0; left: 50%; transform: translateX(-50%); background: url(../images/sub/ico_bar.jpg) 50% 50% no-repeat; background-size: auto;}



/* s1 */
.s1_1 .arti01 {padding: 145px 0 195px; width: 100%; background: url(../images/sub/bg_s101.jpg) 50% 50% no-repeat; background-size: cover;}
.s1_1 .arti01 h4 {text-align: center; font-size: 40px; color: #767676; font-weight: 300; line-height: 1.77; margin-top: 70px;}
.s1_1 .arti01 h4 > strong {display: block; font-size: 44px; color: #444; font-weight: 700; margin-top: 4px; line-height: normal;}
.s1_1 .arti01 .greeting {width: 100%; display: flex; gap: 84px; margin-top: 125px; align-items: flex-end;}
.s1_1 .arti01 .greeting > figure {max-width: 780px; width: 100%; border-radius: 0 160px 0 0; overflow: hidden;}
.s1_1 .arti01 .greeting > figure img {display: block; max-width: 100%;}
.s1_1 .arti01 .greeting .txt {width: 100%; max-width: 830px; position: relative; padding-right: 15px;}
.s1_1 .arti01 .greeting .txt p {font-size: 18px; font-weight: 500; line-height: 1.61; letter-spacing: -.36px; color: #767676;}
.s1_1 .arti01 .greeting .txt p > span {font-size: 20px; font-weight: 700; letter-spacing: -.4px; color: #0157d6;}
.s1_1 .arti01 .greeting .txt p ~ p {margin-top: 40px;}
.s1_1 .arti01 .greeting .txt h5 {margin-top: 33px; font-size: 27px; color: #222; font-weight: 600; line-height: 1.19; letter-spacing: -.54px;}
.s1_1 .arti01 .greeting .txt dl {margin-top: 55px; line-height: 1.7;}
.s1_1 .arti01 .greeting .txt dl dt {font-size: 18px; font-weight: 500; letter-spacing: -.36px; color: #222;}
.s1_1 .arti01 .greeting .txt dl dd {font-size: 22px; color: #222; letter-spacing: -.44px; font-weight: 600;}
.s1_1 .arti01 .greeting .txt > figure {position: absolute; bottom: -25px; left: 182px;}

.s1_1 .arti02 {padding-top: 130px;}
.s1_1 .arti02 .cnt {margin-top: 75px; width: 100%; height: 692px; background: url(../images/sub/bg_s10102.jpg) 50% 50% no-repeat; background-size: cover;}
.s1_1 .arti02 .cnt .inner {display: flex; justify-content: right; gap: 105px; align-items: center;}
.s1_1 .arti02 .cnt .inner .vision {position: relative; max-width: 248px; width: 100%; border-radius: 69px; height: 248px; padding: 0 45px; display: flex; flex-direction: column; align-items: center; justify-content: center; background:linear-gradient(0deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.10) 100%), rgba(25, 100, 0, 0.69); box-shadow: 0 4px 0 0 #225E0E; backdrop-filter: blur(4.900000095367432px);}
.s1_1 .arti02 .cnt .inner .vision::after {position: absolute; content: ''; width: 21px; height: 29px; background: url(../images/sub/ico_vision.png) 50% 50% no-repeat; background-size: auto; top: 50%; right: -32px; transform: translateY(-50%);}
.s1_1 .arti02 .cnt .inner .vision h5 {font-size: 34px; font-weight: 600; line-height: normal; letter-spacing: -.68px; color: #fff; text-align: center; font-family: 'Poppins';}
.s1_1 .arti02 .cnt .inner .vision p {font-size: 20px; color: #fff; font-weight: 600; line-height: normal; letter-spacing: -.4px; margin-top: 20px; text-align: center;}
.s1_1 .arti02 .cnt .inner .mission {position: relative; padding: 106px 0 86px; max-width: 760px; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), rgba(78, 147, 55, 0.06); backdrop-filter: blur(11.949999809265137px);}
.s1_1 .arti02 .cnt .inner .mission .txt {border-left: 1px solid #fff; position: relative; padding: 57px 0;}
.s1_1 .arti02 .cnt .inner .mission .txt::before {position: absolute; content: ''; width: 11px; height: 11px; border-radius: 50%; background-color: #fff; top: 0; left: -6px;}
.s1_1 .arti02 .cnt .inner .mission .txt::after {position: absolute; content: ''; width: 11px; height: 11px; border-radius: 50%; background-color: #fff; bottom: 0; left: -6px;}
.s1_1 .arti02 .cnt .inner .mission .txt dl {display: flex; gap: 19px; align-items: center; margin-left: -37.5px;}
.s1_1 .arti02 .cnt .inner .mission .txt dl ~ dl {margin-top: 30px;}
.s1_1 .arti02 .cnt .inner .mission .txt dl dt {max-width: 74px; width: 100%; border-radius: 50%; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);}
.s1_1 .arti02 .cnt .inner .mission .txt dl dt img {display: block; max-width: 100%;}
.s1_1 .arti02 .cnt .inner .mission .txt dl dd {font-size: 18px; color: #fff; line-height: 1.79; letter-spacing: -.36px; font-weight: 500;}
.s1_1 .arti02 .cnt .inner .mission .txt dl dd > strong {display: block; font-size: 18px; font-weight: 700; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.25); margin-bottom: 6px; font-family: 'Poppins';}

.s1_1 .arti03 {width: 100%; padding: 130px 0 145px; background: url(../images/sub/bg_s10103.jpg) 50% 50% no-repeat; background-size: cover;}
.s1_1 .arti03 figure {width: 100%; margin-top: 35px;}
.s1_1 .arti03 figure img {display: block; max-width: 100%; margin: 0 auto;}

.s1_1 .arti04 {padding: 135px 0 215px; background: url(../images/sub/bg_s10104_.jpg) 50% 50% no-repeat; background-size: cover;}
.s1_1 .arti04 .brand {margin-top: 70px; width: 100%; height: 556px; background:url(../images/sub/img_s10103_.jpg) 50% 50% no-repeat; background-size: cover;}
.s1_1 .arti04 figure {margin-top: 130px;}
.s1_1 .arti04 figure img {max-width: 100%; display: block; margin: 0 auto;}


/* .s1_1 .arti04 .inner {position: relative; margin-top: 85px; padding-bottom: 212px;}
.s1_1 .arti04 figure {width: 100%; border-radius: 100px 100px 0 0; overflow: hidden;}
.s1_1 .arti04 figure img {display: block; max-width: 100%; margin: 0 auto;} 

.s1_1 .arti04 .inner ul {position: absolute; width: calc(100% - 210px); display: flex; gap: 57px; align-items: center; bottom: 0; left: 50%; transform: translateX(-50%);}
.s1_1 .arti04 .inner ul li {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; max-width: 372px; height: 372px; border-radius: 50%; background: linear-gradient(218deg, #3C8AFF 15.49%, #0049B5 87.24%);}
.s1_1 .arti04 .inner ul li .item {width: calc(100% - 22px); height: calc(100% - 22px); border-radius: 50%; background-color: #fff; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.s1_1 .arti04 .inner ul li .item .logo {position: relative; padding-bottom: 24px;}
.s1_1 .arti04 .inner ul li .item .logo::after {position: absolute; content: ''; width: 25px; height: 3px; background-color: #0157d6; bottom: 0; left: 50%; transform: translateX(-50%);}
.s1_1 .arti04 .inner ul li .item .logo img {display: block; max-width: 100%; margin: 0 auto;}
.s1_1 .arti04 .inner ul li .item dl {margin-top: 24px;}
.s1_1 .arti04 .inner ul li .item dl dt {font-size: 20px; color: #222; font-weight: 700; line-height: 1.61; letter-spacing: -.4px; text-align: center;}
.s1_1 .arti04 .inner ul li .item dl dd {margin-top: 3px; text-align: center;}
.s1_1 .arti04 .inner ul li .item dl dd p {position: relative; padding-left: 15px; display: inline-block; font-size: 18px; font-weight: 500; line-height: 1.79; letter-spacing: -.36px; color: #555;}
.s1_1 .arti04 .inner ul li .item dl dd p::before {position: absolute; content: ''; width: 4px; height: 4px; border-radius: 50%; left: 0;top: 13px; background-color: #555;}
 */
.s2 {padding: 145px 0 305px;}
.s2_1 article > h4 {margin-top: 68px; width: 100%; text-align: center; font-size: 40px; font-weight: 600; color: #222; line-height: 1.77;}
.s2_1 article > p {font-size: 20px; color: #767676; margin-top: 6px; text-align: center; line-height: 1.79; letter-spacing: -.4px; font-weight: 400;}
.s2_1 article .item {margin-top: 125px; display: flex; align-items: center; gap: 73px; background:linear-gradient(93deg, #F4F7FB 54.83%, #EDF5FF 99.15%); border-radius: 163px; overflow: hidden;}
.s2_1 article .item ~ .item {margin-top: 70px;}
.s2_1 article .item figure {max-width: 730px; width: 100%; border-radius: 163px; box-shadow: 6px 0 8px 0 rgba(0, 0, 0, 0.15); overflow: hidden;}
.s2_1 article .item figure img {display: block; max-width: 100%;}
.s2_1 article .item .txt {width: 1%; flex: 1 1 auto; padding-right: 135px;}
.s2_1 article .item .txt h5 {display: flex; gap: 20px; align-items: flex-start; font-size: 24px; font-weight: 600; line-height: 1.34; letter-spacing: -.48px; color: #0157d6;}
.s2_1 article .item .txt h5 img {display: block; max-width: 100%;}
.s2_1 article .item .txt p {margin-top: 20px; font-size: 18px; font-weight: 500; line-height: 1.79; letter-spacing: -.36px; color: #555;}
.s2_1 article .item.rev {flex-direction: row-reverse;}
.s2_1 article .item.rev figure {box-shadow:  -6px 0 8px 0 rgba(0, 0, 0, 0.15);;}
.s2_1 article .item.rev .txt {padding-right: 0; padding-left: 135px;}