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

/* 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: 440px; background: url() 50% 50% no-repeat; background-size: cover;}
.page-header > .container {padding-top: 250px;}
.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.type10 {height: 0; padding-top: 150px;}
.page-header.type10 > .container {padding-top: 0;}

.page-header .container h2 {font-size: 50px; font-weight: 700; color: #fff; text-align: center; line-height: 1.4;}

.lnb {position: relative;width: 100%; background-color: #fff; border-bottom: 1px solid #eee;}
.lnb ul {width: 100%; display: table; table-layout:fixed;}
.lnb ul li {display: table-cell; position: relative;}
.lnb ul li::after {position: absolute; content:''; width: 1px; height: 20px; top: 50%; right: 0; transform: translateY(-50%); background-color: #d9d9d9;}
.lnb ul li:last-child::after {display: none;}
.lnb ul li a {position: relative; display: block; width: 100%; text-align: center; font-size: 22px; color: #666; line-height: 72px; font-weight: 400; transition: all .3s linear; z-index: 2;} 
.lnb ul li a:after {position: absolute; content:''; width: 100%; height: 1px; background-color: #139D85; bottom: -1px; left: 0; opacity: 0;}
.lnb ul li.active a {color: #139D85; font-weight: 700;}
.lnb ul li.active a:after {opacity: 1;}

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

section {padding: 80px 0 200px;}
.section-header h3 {font-size: 36px; color: #222; font-weight: 700; line-height: 1.4;}

/* s1 */
.s1 .tab-btn {margin-top: 30px; width: 100%; display: flex;}
.s1 .tab-btn > a {display: block; flex: 1 1 auto; width: 1%; font-size: 20px; color: #666; font-weight: 400; text-align: center; line-height: 58px; border-top: 2px solid #F4F4F4; background-color: #F4F4F4; box-shadow: 4px 0 20px 0 rgba(0, 0, 0, 0.05) inset;}
.s1 .tab-btn > a.on {background-color: #fff; border-color: #84C03A; color: #84C03A; font-weight: 700; box-shadow: none;}

/* s1_1 */
.s1_1 {padding-bottom: 0;}
.s1_1 .arti1 .container > figure {margin-top: 80px;}
.s1_1 .cnt {margin-top: 80px; width: 100%; display: flex; align-items: flex-start;}
.s1_1 .cnt ~ .cnt {margin-top: 80px;}
.s1_1 .cnt .tit {max-width: 290px; width: 100%; font-size: 32px; color: #222; font-weight: 700;}
.s1_1 .cnt .detail {width: 1%; flex: 1 1 auto; }
.s1_1 .cnt .detail dl {width: 100%; padding: 23px 0; display: flex; align-items: flex-start; gap: 60px; border-bottom: 1px solid #ddd;}
.s1_1 .cnt .detail dl:nth-of-type(1) {border-top: 2px solid #666;}
.s1_1 .cnt .detail dl dt {max-width: 220px; text-align: center; width: 100%; font-size: 20px; font-weight: 600; color: #222; line-height: 1.4;}
.s1_1 .cnt .detail dl dd {font-size: 20px; font-weight: 400; line-height: 1.4; color: #666;}
.s1_1 .cnt .detail figure {margin-top: 0;}

.s1_1 .cnt3  {width: 100%; margin-top: 80px; background: url(../images/sub/bg_s11_02.jpg) 50% 50% no-repeat; background-size: cover; padding: 75px 0 200px;}
.s1_1 .cnt3  h5 {font-size: 32px; font-weight: 700; color: #fff;}
.s1_1 .cnt3  .certi {margin-top: 88px; width: 100%;}
.s1_1 .cnt3  .certi ul {width: 100%; gap: 62px; display: flex; justify-content: space-between;}
.s1_1 .cnt3  .certi ul li {flex: 1 1 auto; }
.s1_1 .cnt3  .certi ul li figure {width: 100%;}
.s1_1 .cnt3  .certi ul li figure img {max-width: 100%; display: block; margin: 0 auto; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); border-radius: 2px;}
.s1_1 .cnt3  .certi ul li figure figcaption {margin-top: 24px; width: 100%;}
.s1_1 .cnt3  .certi ul li figure figcaption span {font-size: 22px; font-weight: 600; line-height: 1.4; color: #84C03A;}
.s1_1 .cnt3  .certi ul li figure figcaption p {font-size: 24px; font-weight: 600; color: #fff; margin-top: 8px;}

.s1_1 .arti2 {padding-top: 80px;}
.s1_1 .arti2 .container > h4 {font-size: 32px; font-weight: 700; color: #222; text-align: center;}
.s1_1 .arti2 .history-wrap {margin-top: 80px; width: 100%; display: flex; gap: 180px;}
.s1_1 .arti2 .history-wrap .tit {max-width: 515px; width: 100%; text-align: right;}
.s1_1 .arti2 .history-wrap .tit h5 {font-size: 32px; color: #139d85; font-weight: 700;}
.s1_1 .arti2 .history-wrap .tit p {font-size: 18px; font-weight: 400; line-height: 1.44; margin-top: 14px;}
.s1_1 .arti2 .history-wrap .tit figure {width: 100%;}
.s1_1 .arti2 .history-wrap .tit figure > img {max-width: 100%; display: block; margin-left: auto; margin-top: 30px;}
.s1_1 .arti2 .history-wrap .history {width: 1%; flex:  1 1 auto;}
.s1_1 .arti2 .history-wrap .history dl {position: relative; width: 100%; display: flex; gap: 55px; align-items: flex-start;}
.s1_1 .arti2 .history-wrap .history dl::before {position: absolute; content: ''; width: 1px; height: 100%; left: 0; top: 20px; background-color: #ddd;}
.s1_1 .arti2 .history-wrap .history dl dt {position: relative; padding-left: 120px; max-width: 240px; width: 100%; font-size: 36px; font-weight: 600; line-height: 1.22; color: #84C03A;}
.s1_1 .arti2 .history-wrap .history dl dt::before {position: absolute; content: ''; width: 20px; height: 20px; border-radius: 50%; top: 50%; transform: translateY(-50%); left: -10px; background: url(../images/sub/ico_dot.png) 50% 50% no-repeat; background-size: auto;}
.s1_1 .arti2 .history-wrap .history dl dt::after {position: absolute; content: ''; width: 100px; height: 1px; background-color: #ddd; left: 0; top: 50%; transform: translateY(-50%); z-index: -1;}
.s1_1 .arti2 .history-wrap .history dl dd {width: 1%; flex: 1 1 auto; padding-bottom: 40px;}
.s1_1 .arti2 .history-wrap .history dl dd p {font-size: 20px; color: #666; line-height: 1.9;}
.s1_1 .arti2 .history-wrap .history dl:last-child dd {padding-bottom: 175px;}

/* s1_2 */
.s1_2 figure {width: 100%; margin-top: 30px;}
.s1_2 figure img {max-width: 100%; display: block; margin: 0 auto;}
.s1_2 .cnt {width: 100%; display: flex; align-items: flex-start; margin-top: 75px; padding-bottom: 80px;}
.s1_2 .cnt ~ .cnt {padding-top: 60px; border-top: 1px solid #ddd;}
.s1_2 .cnt .tit {font-size: 28px; font-weight: 600; line-height: 1.42; color: #139D85; max-width: 290px; width: 100%;}
.s1_2 .cnt .txt {width: 1%; flex: 1 1 auto;}
.s1_2 .cnt .txt h5 {font-size: 24px; font-weight: 600; color: #222; line-height: 1.4;}
.s1_2 .cnt .txt p {font-size: 20px; line-height: 1.6; letter-spacing: -.4px; margin-top: 20px; color: #666;}
.s1_2 .cnt .txt p strong {color: #333; font-weight: 500;}
.s1_2 .cnt .txt p ~ p {margin-top: 40px;}
.s1_2 .cnt .txt dl {display: flex; justify-content: right; align-items: center; margin-top: 28px;}
.s1_2 .cnt .txt dl dt {font-size: 20px; font-weight: 500; color: #444; letter-spacing: -.4px;}
.s1_2 .cnt .txt dl dd {font-size: 20px; color: #000; font-weight: 600; letter-spacing: -.4px; margin-left: 5px;}

/* s1_3 */
.s1_3 article {width: 100%; padding-top: 80px; display: flex; gap: 80px; align-items: center;}
.s1_3 article .map {max-width: 784px; width: 100%; height: 524px; position:relative;}
.root_daum_roughmap {width: 100% !important; height: 100% !important;}
.root_daum_roughmap .map_border {display: none;}
.s1_3 article .info {width: 1%; flex: 1 1 auto;}
.s1_3 article .info h5 {font-size: 36px;font-weight: 700; line-height: 1.4; margin-bottom: 25px; color: #222;}
.s1_3 article .info dl {width: 100%; display: flex; flex-wrap: wrap; align-items: flex-start; border-bottom: 1px solid #ddd; padding: 20px 0;}
.s1_3 article .info dl dt {position: relative; padding-left: 40px; font-size: 22px; font-weight: 500; line-height: 1.4; color: #139D85;}
.s1_3 article .info dl dd {font-size: 22px; font-weight: 500; line-height: 1.4; margin-top: 5px; width: 100%; padding-left: 40px; color: #222;}
.s1_3 article .info dl dd a {color: inherit; display: inline-block;}
.s1_3 article .info dl:nth-of-type(2) dt, 
.s1_3 article .info dl:nth-of-type(3) dt {max-width: 95px; width: 100%;}
.s1_3 article .info dl:nth-of-type(2) dd,
.s1_3 article .info dl:nth-of-type(3) dd {width: 1%; flex: 1 1 auto; padding-left: 0; margin-top: 0;}
.s1_3 article .info dl dt::before {position: absolute; content: ''; width: 24px; height: 24px; top: 50%; transform: translateY(-50%); left: 0; background: url() 50% 50% no-repeat; background-size: auto;}
.s1_3 article .info dl:nth-of-type(1) dt::before {background-image: url(../images/sub/ico_map1.png);}
.s1_3 article .info dl:nth-of-type(2) dt::before {background-image: url(../images/sub/ico_map2.png);}
.s1_3 article .info dl:nth-of-type(3) dt::before {background-image: url(../images/sub/ico_map3.png);}
.s1_3 article .info dl:nth-of-type(4) dt::before {background-image: url(../images/sub/ico_map4.png);}


/* s2 */
.s2 .banner {margin-top: 25px; display: flex; width: 100%; min-height: 328px; height: 100%;}
.s2 .banner figure:nth-of-type(1) {width: 1%; flex: 1 1 auto; position: relative;}
.s2 .banner figure:nth-of-type(2) {max-width: 642px; width: 100%;}
.s2 .banner figure img {display: block; max-width: 100%; width: 100%; height: 100%;}
.s2 .banner figcaption {position: absolute; bottom: 40px; left: 40px; font-size: 32px; font-weight: 700; color: #fff; line-height: 1.4;}

.s2 article {position: relative; margin-top: 80px; min-height: 1385px; height: 100%; display: flex; align-items: flex-start; gap: 95px;}
.s2 .cnt-wrap {width: 1%; flex: 1 1 auto;}
.s2 .cnt {padding-left: 145px; position: relative; padding-bottom: 50px;}
.s2 .cnt:last-child {padding-bottom: 0;}
.s2 .cnt h5 {font-size: 32px; font-weight: 700; line-height: 1.4; color: #000;}
.s2 .cnt p {font-size: 22px; color: #444; font-weight: 400; line-height: 1.6; margin-top: 15px;}
.s2 .cnt ~ .cnt h5 {padding-top: 80px; border-top: 1px solid #eee;}
.s2 .cnt::before {position: absolute; content: ''; width: 100px; height: 100px; left: 0; top: 96px; background: url(../images/sub/ico_s22_01.png) 50% 50% no-repeat; background-size: auto;}
.s2 #cnt1::before {top: 16px;}
.s2 #cnt2::before {background-image: url(../images/sub/ico_s22_02.png);}
.s2 #cnt3::before {background-image: url(../images/sub/ico_s22_03.png);}
.s2 #cnt4::before {background-image: url(../images/sub/ico_s22_04.png);}

.s2 .cnt > ul {width: calc(100% + 20px); display: flex; margin: 50px -10px auto;}
.s2 .cnt > ul.col3 li {width: 33.3333%; padding: 0 10px;}
.s2 .cnt > ul.col4 li {width: 25%; padding: 0 10px;}
.s2 .cnt > ul.col5 {flex-wrap: wrap; justify-content: center;}
.s2 .cnt > ul.col5 li {width: 33.3333%; padding: 0 10px;}
.s2 .cnt > ul.col5 li:nth-of-type(3) ~ li {margin-top: 20px;}
.s2 .cnt > ul li dl {position: relative; border: 6px solid #eee; width: 100%; min-height: 200px; padding: 34px 15px;  text-align: center; height: 100%;}
.s2 .cnt > ul li dl::before {position: absolute; content: ''; width: 20px; height: 6px; background-color: #84C03A;top: -6px; left: -6px;}
.s2 .cnt > ul li dl::after {position: absolute; content: ''; width: 6px; height: 20px; background-color: #84C03A; top: -6px; left: -6px;}
.s2 .cnt > ul li dl dt {font-size: 22px; font-weight: 700; line-height: 1.6; color: #222;}
.s2 .cnt > ul li dl dd {font-size: 18px; color: #444; line-height: 1.6; font-weight: 400; margin-top: 12px;}

.s2 .side {max-width: 184px; width: 100%;}
.s2 .side.on {position: sticky; z-index: 50; top: 150px;}
.s2 .side ul {width: 100%;}
.s2 .side ul li {width: 100%;}
.s2 .side ul li a {display: block; width: 100%; line-height: 51px; font-size: 18px; font-weight: 400; color: #444; padding: 0 18px; background-color: #F8F8F8; transition: all .2s linear; border-left: 4px solid #F8F8F8;}
.s2 .side ul li ~ li  {border-top: 1px solid #eee;}
.s2 .side ul li.active a {background-color: #555; border-left: 4px solid #84C03A; color: #fff;}

.s2_1 #cnt5 ul li dl {min-height: 120px;}
.s2_1 #cnt5 ul li dl dd {display: none;}

.s2_1 #cnt1::before {background-image: url(../images/sub/ico_s21_01.png);}
.s2_1 #cnt2::before {background-image: url(../images/sub/ico_s21_02.png);}
.s2_1 #cnt3::before {background-image: url(../images/sub/ico_s21_03.png);}
.s2_1 #cnt4::before {background-image: url(../images/sub/ico_s21_04.png);}
.s2_1 #cnt5::before {background-image: url(../images/sub/ico_s21_05.png);}

/* s2_3 */
.s2_3 article {min-height: auto; margin-top: 60px;}
.s2_3 .marketing {width: 100%;}
.s2_3 .marketing ul {width: 100%; display: flex; justify-content: space-between; gap: 38px;}
.s2_3 .marketing ul li {width: 1%; flex: 1 1 auto;}
.s2_3 .marketing ul li figure img {max-width: 100%; display: block; margin-right: auto;}
.s2_3 .marketing ul li figure figcaption {padding-top: 20px; border-top: 1px solid #eee; font-size: 24px; font-weight: 700; color: #000; line-height: 1.4;}

/* s3_2 s3_3 */
.s3_2 figure {margin-top: 30px;}
.s3_2 figure > img {max-width: 100%; display: block; margin: 0 auto;}
.s3_2 .cnt {margin-top: 80px; width: 100%; display: flex; align-items: flex-start;}
.s3_2 .cnt .tit {max-width: 290px; width: 100%; font-size: 32px; color: #000; font-weight: 700; line-height: 0.93; letter-spacing: -.64px;}
.s3_2 .cnt .txt {width: 1%; flex:  1 1 auto;}
.s3_2 .cnt .txt p {font-size: 22px; color: #666; font-weight: 500; line-height: 1.54;}
.s3_2 .cnt .txt .gray_box {margin-top: 40px; padding: 40px; border-radius: 20px; background-color: #FCFCFC; border-radius: 20px;}
.s3_2 .cnt .txt .gray_box h5 {font-size: 24px; font-weight: 700; line-height: 1.4; color: #222;}
.s3_2 .cnt .txt .gray_box p {font-size: 20px; font-weight: 400; line-height: 1.7; margin-top: 8px; color: #444; margin-bottom: 15px;}
.s3_2 .cnt .txt .gray_box dl {padding: 30px 20px 24px; width: 100%; display: flex; align-items: center; gap: 24px;}
.s3_2 .cnt .txt .gray_box dl ~ dl {border-top: 1px solid #eee;}
.s3_2 .cnt .txt .gray_box dl dt {max-width: 88px; width: 100%;}
.s3_2 .cnt .txt .gray_box dl dt img {max-width: 100%; display: block; margin: 0 auto; border-radius: 50%;}
.s3_2 .cnt .txt .gray_box dl dd {width: 1%; flex: 1 1 auto;}
.s3_2 .cnt .txt .gray_box dl dd span {font-size: 20px; font-weight: 700; color: #222; line-height: 1.6;}
.s3_2 .cnt .txt .gray_box dl dd p {font-size: 18px; color: #666; line-height: 1.6; font-weight: 400;}
.s3_2 .cnt3 .txt {border-top: 2px solid #666;}
.s3_2 .cnt3 .txt dl {width: 100%; display: flex; align-items: flex-start; gap: 60px; padding: 20px 0; border-bottom: 1px solid #ddd;}
/* .s3_2 .cnt3 .txt dl:nth-of-type(1) {padding-bottom: 35px;} */
.s3_2 .cnt3 .txt dl dt {max-width: 220px; width: 100%; text-align: center; font-size: 20px; font-weight: 600; line-height: 1.4; color: #222;}
.s3_2 .cnt3 .txt dl dd {width: 1%; flex: 1 1 auto; line-height: 1.4;}
.s3_2 .cnt3 .txt dl dd p {font-size: 20px; color: #666; font-weight: 400; line-height: 1.4;}
.s3_2 .cnt3 .txt dl dd a {color: #666; display: inline-block; font-size: 20px;}
.s3_2 .cnt3 .txt dl dd a.down-btn {display: inline-block; max-width: 170px; width: 100%; line-height: 38px; border: 1px solid #84C03A; background-color: #84C03A; border-radius: 50px; font-size: 18px; color: #f4f4f4; text-align: center; font-weight: 600; transition: all .2s linear; box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.07); margin-top: 20px;}
.s3_2 .cnt3 .txt dl dd a.down-btn ~ a.down-btn {margin-left: 14px;}
.s3_2 .cnt3 .txt dl dd a.down-btn:hover {background-color: #fff; color: #84C03A;}

/* s3_3 */
.s3_3 .cnt .txt .gray_box ~ .gray_box {margin-top: 20px;}
.s3_3 .cnt .txt .gray_box dl {align-items: flex-start; gap: 43px;}
.s3_3 .cnt .txt .gray_box dl dd span {font-size: 24px;}
.s3_3 .cnt .txt .gray_box dl dd span > i {font-size: 18px; color: #666; letter-spacing: -.36px; font-style: normal; font-weight: 600;}
.s3_3 .cnt .txt .gray_box dl dd p {font-size: 20px; color: #444;}
.s3_3 .cnt .txt .gray_box dl dd > small {display: block; font-size: 18px; color: #666; font-weight: 400; line-height: 1.6; margin-top: 30px;}