@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-tit {position:relative; font-size:28px; font-weight:bold; line-height:1.500em; letter-spacing:-0.04em; color:#2c2c2c; padding-left:40px; margin-bottom:40px;}
.doc-tit:before {content:""; position:absolute; width:25px; height:25px; background:url("/images/sub/tit_icon.png") no-repeat 50% 50%; top:7px; left:0;}

.doc-cnt {margin-bottom:100px;}
.doc-cnt:last-child {margin-bottom:0;}


/*about*/
.about {display:flex; background:#fafafa;}
.about .img {width:50%; margin-right:45px;}
.about .txt-wrap {width:46.25%; padding:45px 0 85px 0; background:url("/images/sub/about_bg2.png") no-repeat 100% 100%/contain;}
.about .txt-wrap p {font-size:18px; font-weight:500; line-height:1.8em; letter-spacing:-0.04em; color:#505050; margin-bottom:25px;}
.about .txt-wrap p:last-child {margin-bottom:0;}
.about .txt-wrap .txt-green {font-weight:600; color:#38b449;}

/*history*/
.history {position:relative; border-top:2px solid #38b449; padding-top:70px;}
.history:before{content:""; position:absolute; width:1px; height:80px; background:#dfdfdf; top:0; left:50%;}
.history .group {position:relative; padding-bottom:80px;}
.history .cnt {display:flex; align-items:center;}
.history .group.right .cnt {flex-direction: row-reverse;}
.history .group.right .img {text-align:right; padding-right:92px;}

.history .cnt .img {width:50%;}

.history .group:last-child::before {display:none;}
.history .group:before {content:""; position:absolute; height:calc(100% + 18px); width:1px; background:#dfdfdf; top:0; left:50%;}
.history .group .year {position:relative; font-size:32px; font-weight:700; line-height:1.4em; color:#38b449; margin-bottom:25px; padding-left:calc(50% + 50px);}
.history .group .year:after {content:""; position:absolute; width:18px; height:18px; border:4px solid #38b449; background:#fff; border-radius:100%; top:13px;left:50%; margin-left:-9px;}

.history .group ul {width:50%; padding-left:50px;}
.history .group ul li {position:relative; font-size:18px; font-weight:500; line-height:1.667em; letter-spacing:-.04em; color:#2c2c2c; padding-left:21px; margin-bottom:20px;}
.history .group ul li:before {content:""; position:absolute; width:6px; height:6px; background:#0072bc; border-radius:100%; top:12px; left:0;}
.history .group ul li:last-child {margin-bottom:0;}


/* .history .group:last-child .year:after {margin-left:-135px;} */
.history .group.left .year {padding-left:0; padding-right:calc(50% + 50px); text-align:right;}
/* .history .group.left .year:after {margin-left:38px;} */
.history .group.left .cnt {text-align:right;}

.history .group.left .img {text-align:left; padding-right:0; padding-left:92px;}
.history .group.left ul {padding-left:0; padding-right:50px;}
.history .group.left ul li:before {left:unset; right:-18px;}

.history .group ul .txt-wrap {font-size:16px; line-height:1.625em; color:#505050;}



/*leader*/
.leader ul {display:flex; flex-wrap:wrap; margin-left:-60px; margin-bottom:-60px;}
.leader ul li {width:calc(33.333333% - 60px);  margin-left:60px; margin-bottom:60px;  border:1px solid #dfdfdf; padding:49px 35px; text-align:center;  transition: all 0.2s ease-in-out;}
.leader ul li .name {font-size:20px; font-weight:bold; line-height:1.4em; letter-spacing:-0.04em; color:#2c2c2c; margin:26px 0;}
.leader ul li .more {display:inline-block;padding:0 26px; font-size:14px; font-weight:500; line-height:30px; letter-spacing:-0.04em; color:#38b449; border:2px solid #38b449; transition: all 0.2s ease-in-out;}
.leader ul li:hover  {border:1px solid #38b449;}
.leader ul li:hover .more {background:#38b449; color:#fff;}

.layer_popup {display:none; max-width:800px !important; width:100%; position:relative; z-index:100 !important;}
.layer_popup > div {display:flex; align-items: center; padding:35px 0 30px 0;}
.layer_popup .info-box {width:35%; margin-right:3.75%; text-align:center;}
.layer_popup .tit {font-size:20px; font-weight:bold; line-height:1.4em; letter-spacing:-0.04em; color:#2c2c2c; margin:25px 0 5px 0;}
.layer_popup .txt {font-size:16px; font-weight:500; line-height:1.4em; letter-spacing:-0.04em; color:#505050;}

.layer_popup .cnt-tit {font-size:16px; font-weight:600; line-height:1.66em; letter-spacing:-0.04em; color:#2c2c2c; margin-bottom:10px;}
.layer_popup ul li {position:relative;font-size:16px; font-weight:500; line-height:1.875em; letter-spacing:-0.04em; padding-left:17px;}
.layer_popup ul li:before {content:""; position:absolute; width:6px; height:6px; border-radius:100%; background:#127cc1; top:10px; left:0;}



/*science*/
.science .section {margin-bottom: 100px;}
.science .green-txt {color:#38b449 !important;}
.science .blue-txt {color:#0072bc !important;}
.science .under {text-decoration:underline !important;}
.science .bold-under {font-weight:700 !important; text-decoration:underline !important;}
.science .img {margin-bottom:38px; margin-top:15px;}
.science ul li {position:relative; font-size:18px; font-weight:500; line-height:1.667em; letter-spacing:-.04em; padding-left:20px; margin-bottom:20px;}
.science ul li:last-child {margin-bottom:0;}
.science ul li:before {content:""; position:absolute; width:6px; height:6px; background:#0072bc; border-radius:100%; top:12px; left:0;}
.science .big {font-size:20px; font-weight:600; color:#2c2c2c; line-height:1.5em; letter-spacing:-0.04em; margin-bottom:26px;}
.science .b-big {font-weight:700 !important;}
.science .doc-cnt .tit {font-size:24px; font-weight:600; line-height:2.143em; letter-spacing:-0.04em; color:#38b449; margin-bottom:15px;}

.science .doc-cnt .cnt ul {margin-bottom:25px;}
.science .doc-cnt .txt {font-size:18px; font-weight:600; line-height:1.667em; letter-spacing:-.04em; color:#2c2c2c;}

/*pipeline*/
.pipeline .txt p {font-size:22px; font-weight:500; line-height:1.545em; letter-spacing:-0.04em;}
.pipeline .txt{margin-bottom:35px;}
.pipeline table{width:100%; border-collapse:collapse;}
.pipeline table th {font-size:16px; font-weight:600; line-height:1.4em; letter-spacing:-0.04em; color:#fff; background:#38b449; padding:20px 5px;border-right:1px solid #dfdfdf;}


.pipeline table td {font-size:16px; font-weight:500; line-height:1.4em; letter-spacing:-0.04em; color:#2c2c2c; padding:25px 5px; border-bottom:1px solid #dfdfdf; border-right:1px solid #dfdfdf;}
.pipeline table td:first-child {padding:5px;}
.pipeline table .pipe{padding:0;}
.pipeline table .pipe .bar { position:relative; width:0; height:30px; background: linear-gradient(-90deg, #4ebb5e, #9cdaa5);}
.pipeline table .pipe .bar:after {content:""; position:absolute; width:17px; height:30px; background:url("/images/sub/pipeline_arw.png") no-repeat 50% 50%; left:100%; top:50%; margin-top:-15px;}

/*.pipeline table .pipe.on .bar1 {width: calc(230% - 17px) !important;  transition:all 1s ease-in-out;}
.pipeline table .pipe.on .bar2 {width: calc(200% - 17px) !important; transition:all 1s ease-in-out 0.2s;}
.pipeline table .pipe.on .bar3 {width: calc(158% - 17px) !important; transition:all 1s ease-in-out 0.3s;}
.pipeline table .pipe.on .bar4 {width: calc(158% - 17px) !important; transition:all 1s ease-in-out 0.4s;}
.pipeline table .pipe.on .bar5 {width: calc(88% - 17px) !important; transition:all 1s ease-in-out 0.5s;}
.pipeline table .pipe.on .bar6 {width: calc(235% - 17px) !important; transition:all 1s ease-in-out 0.6s;}
.pipeline table .pipe.on .bar7 {width: calc(70% - 17px) !important; transition:all 1s ease-in-out 0.7s;}*/
.pipeline table .pipe.on .bar1 {width: calc(240% - 17px) !important;  transition:all 1s ease-in-out;}
.pipeline table .pipe.on .bar2 {width: calc(197% - 17px) !important; transition:all 1s ease-in-out 0.2s;}
.pipeline table .pipe.on .bar3 {width: calc(200% - 17px) !important; transition:all 1s ease-in-out 0.3s;}
.pipeline table .pipe.on .bar5 {width: calc(158% - 17px) !important; transition:all 1s ease-in-out 0.4s;}
.pipeline table .pipe.on .bar6 {width: calc(90% - 17px) !important; transition:all 1s ease-in-out 0.5s;}
.pipeline table .pipe.on .bar7 {width: calc(145% - 17px) !important; transition:all 1s ease-in-out 0.6s;}
/* .pipeline table .pipe.on .bar8 {width: calc(51% - 17px) !important; transition:all 1s ease-in-out 0.8s;} */



.pipeline table thead .ds {border-right:1px dashed #dfdfdf;}
.pipeline table tbody .ds {background:#f1fdf3; border-right:1px dashed #dfdfdf;}
.pipeline table th:last-child,
.pipeline table td:last-child {border-right:0;}


.m-pipeline .tab {margin-bottom:40px;}
.m-pipeline .tab ul {display:flex; flex-wrap: wrap;}
.m-pipeline .tab ul li{display:flex; align-items: center; justify-content: center; width:50%; border:1px solid #dfdfdf; border-left:0;font-size:14px; font-weight:500; line-height:1.4em; letter-spacing:0.04em; color:#878787;  padding:5px;}
.m-pipeline .tab ul li.active{background:#38b449; border:1px solid #38d449; color:#fff;}
.m-pipeline .tab ul li:nth-child(1),
.m-pipeline .tab ul li:nth-child(3) {border-left:1px solid #dfdfdf;}
.m-pipeline .tab ul li:nth-child(3) {border-top:0;}
.m-pipeline .group {margin-bottom:40px;}
.m-pipeline .group:last-child {margin-bottom:0;}
.m-pipeline .group .tit {position:relative; font-size:20px; font-weight:bold; letter-spacing:-0.04em; color:#2c2c2c; margin-bottom:15px; padding-left:15px;}
.m-pipeline .group .tit:before {content:""; position:absolute; width:3px; height:20px; background:#38b449; top:4px; left:0;}
.m-pipeline .group p {font-size:18px; font-weight:500; line-height:1.4em; letter-spacing:-0.04em; color:#505050; margin-bottom:15px;}
.m-pipeline .group p span {color:#38b449; font-weight:600; margin-right:20px;}
.m-pipeline .group ul {display:flex; flex-wrap: wrap; margin-left:-5px; margin-bottom:-5px;}
.m-pipeline .group li {position:relative; display:flex; align-items: center; justify-content: center; width:calc(50% - 5px); margin-left:5px; margin-bottom:5px; padding:10px 5px; font-size:16px; letter-spacing:-0.04em; color:#fff; background:#cccccc;}
.m-pipeline .group li span {position:relative;}
.m-pipeline .bar:before {content:""; position:absolute; width:0; height:100%; left:0; background: linear-gradient(-90deg, #4ebb5e, #9cdaa5);}

.m-pipeline .bar1 li:nth-child(1):before {width:100%;}
.m-pipeline .bar1 li:nth-child(2):before {width:100%;}
.m-pipeline .bar1 li:nth-child(3):before {width:20%;}

.m-pipeline .bar2 li:nth-child(1):before {width:100%;}
.m-pipeline .bar2 li:nth-child(2):before {width:100%;}
.m-pipeline .bar2 li:nth-child(3):before {width:20%;}

.m-pipeline .bar3 li:nth-child(1):before {width:100%;}
.m-pipeline .bar3 li:nth-child(2):before {width:50%;}

.m-pipeline .bar4 li:nth-child(1):before {width:90%;}
/*.m-pipeline .bar4 li:nth-child(2):before {width:50%;}*/

.m-pipeline .bar5 li:nth-child(1):before {width:100%;}
.m-pipeline .bar5 li:nth-child(2):before {width:40%;}

.m-pipeline .bar6 li:nth-child(1):before {width:100%;}
.m-pipeline .bar6 li:nth-child(2):before {width:100%;}
.m-pipeline .bar6 li:nth-child(3):before {width:30%;}

.m-pipeline .bar7 li:nth-child(1):before {width:50%;}

/*careers*/
.careers .process {display:flex; flex-wrap:wrap; justify-content:center; margin:0 -40px -40px;}
.careers .process li {position:relative; font-size:18px; font-weight:500; line-height:1.4em; letter-spacing:-.04em; color:#38b449;  padding:0 40px;  margin-bottom:40px; text-align:center;}
.careers .process li:after {content:""; position:absolute; width:13px; height:16px; background:url("/images/sub/careers_next_arw.png") no-repeat 50% 50%; top:50%; margin-top:-8px; left:-10px;}
.careers .process li:first-child::after {display:none;}
.careers .process li div {display:flex; flex-direction: column; align-items: center; justify-content: center; width:176px; height:176px; border:1px solid #38b449; border-radius:100%;}
.careers .process li div img {margin-bottom:12px;}
.careers .process li div p {margin-bottom:0;}
.careers .process span {display:block; position:absolute; width:45px; height:45px; line-height:45px; background:#38b449; font-family:'Noto Sans KR'; font-size:16px; font-weight:bold; color:#fff; border-radius:100%; top:0; left:40px;}
.careers .doc-cnt p {font-size:18px; font-weight:400; line-height:1.667em; letter-spacing:-0.04em; margin-bottom:30px;}
.careers .doc-cnt div {text-align:center;}
.careers .doc-cnt a {position:relative; display:inline-block; font-size:16px; font-weight:400; line-height:30px; letter-spacing:-0.04em; color:#fff; padding: 10px 26px 10px 48px; background:#0072bc;}
.careers .doc-cnt a:after {content:""; position:absolute; width:22px; height:18px; background:url("/images/sub/mail_icon.png") no-repeat 50% 50%; top:50%; left:0; margin:-9px 0 0 22px;}

/*contact*/

.location .map {width:100% !important; height:500px !important; margin-bottom:50px;}
.location  ul {display:flex;}
.location ul li {flex:1; text-align:center; font-size:20px; font-weight:500; line-height:1.300em; color:#505050; width:25%; border-right:1px solid #dfdfdf; padding:95px 5px 10px 5px; margin-bottom:100px; background-repeat: no-repeat; background-position:50% 8px;}
.location ul li:first-child {font-size:16px;}
.location ul li:last-child {border-right:0;}
.location .icon1 {background-image:url("/images/sub/contact_icon1.png");}
.location .icon2 {background-image:url("/images/sub/contact_icon2.png");}
.location .icon3 {background-image:url("/images/sub/contact_icon3.png");}
.location .icon4 {background-image:url("/images/sub/contact_icon4.png");}

.location ul .tit {display:block; font-size:18px; font-weight:bold; line-height:1.556em; letter-spacing:-.04em; margin-bottom:15px;}
.location ul .tit.txt-green {color:#38b449;}
.location ul .tit.txt-blue {color:#0072bc;}

/*partner*/
.partner .txt-wrap {position:relative; top:-80px; text-align:center; background:#fff; width:83.33%; margin:0 auto -40px auto; padding:55px 5px;}
.partner .txt-wrap .tit {font-size:44px; font-weight:bold; line-height:1.3em; letter-spacing:-0.04em; color:#2c2c2c;}
.partner .txt-wrap .green-txt {color:#38b449;}
.partner .txt-wrap p {font-size:22px; font-weight:600; line-height:2.182em; color:#2c2c2c;}
.partner .txt-wrap p:last-child {font-size:20px; font-weight:500; color:#505050;}
.partner .txt-wrap a {color:#0072bc;}

.partner .doc-cnt {display:none;}
.partner ul {display:flex; flex-wrap: wrap; margin:-40px -20px 0 -20px;}
.partner ul li {width:25%; padding:0 20px; margin-top:40px;}