@charset "utf-8";
html, body {word-break: keep-all;font-size:17px;}

/* Business Area  */
#page3 .cts {position:relative; margin-top:40px;}
#page3 .cts ul.fullArea {position:relative; overflow: hidden;}
#page3 .cts ul.fullArea li {width:33.3%; padding-bottom:23.3%; height:0;  float:left; position:relative; cursor:pointer;}
#page3 .cts ul.fullArea li:nth-child(3n) {width:33.4%;}
#page3 .cts ul.fullArea li h3{font-family:'Sen', 'sans-serif;'; font-size:2rem; font-weight:bold; color:#fff;  }
#page3 .cts ul.fullArea li p { font-family: 'Noto Sans Korean', sans-serif;  color:#fff ; font-weight: 200; margin-top:5px; font-size:1.2rem; }
#page3 .cts ul.fullArea li p:last-child {margin-top:22px; font-size:0.95rem;}
#page3 .cts ul.fullArea li .black {  background-color: rgba( 0, 0, 0, 0.5 ); position:absolute; left:0; top:0; width:100%; height:100%; }
#page3 .cts ul.fullArea li .msg {position:absolute; top:22%; left:8%; width:100%; height:100%;}

#page3 .cts ul.fullArea li:hover {background-size:130% 130% !important; -webkit-transition:all 0.3s; transition:all 0.3s; }
#page3 .cts ul.fullArea li:hover .black { background-color: rgba( 0, 0, 0, 0.8 ); -webkit-transition:all 0.3s; transition:all 0.3s;}

/* Portfolio  */
#page4 .wrap1200{max-width:1100px;}
#page4 .head { text-align:right; margin:0 auto; }
#page4 .head a {
    font-family: 'Sen', sans-serif;position:relative;overflow:hidden;display:inline-block;cursor:pointer;margin-right:22px;
}
#page4 .head a:after {
    content:'';height:2px;background:#00a4ef;position:absolute;margin:auto;width:0; /* top:0; */ bottom:5px; left:0;right:0;transition:all 500ms;
}

#page4 .head a.active {font-weight:bold;}
#page4 .head a:hover:after,
#page4 .head a.active:after {width:100%;}
#page4 .head a:nth-child(1) {animation:section-04-down 1000ms both 1000ms;}
#page4 .head a:nth-child(2) {animation:section-04-down 1000ms both 1100ms;}
#page4 .head a:nth-child(3) {animation:section-04-down 1000ms both 1200ms;}
#page4 .head a:nth-child(4) {animation:section-04-down 1000ms both 1300ms;}
#page4 .head a:nth-child(5) {animation:section-04-down 1000ms both 1400ms;}
#page4 .head a:nth-child(6) {animation:section-04-down 1000ms both 1500ms;}
#page4 .head a:nth-child(7) {animation:section-04-down 1000ms both 1600ms;}
#page4 .head a:nth-child(8) {animation:section-04-down 1000ms both 1700ms;}

#page4 .section{background:#f3f4f5; overflow:hidden;}
#page4 .section .wrap1200{max-width:1100px; width:90%; background:#fff; box-shadow:14px 0 27px rgba(0,0,0,0.3); margin:100px auto; padding:98px 80px; }
#page4 .section .wrap1200 ul{}
#page4 .section .wrap1200 ul li{border-bottom:1px solid #ddd; padding:45px 0; overflow:hidden;}
#page4 .section .wrap1200 .txtx{width:40%; float:left; margin-top: 18px;}
#page4 .section .wrap1200 .txtx h4{font-size:34px; font-weight:700;  line-height:1.2; position:relative; word-break:break-all; }
#page4 .section .wrap1200 .txtx h4:before{content: '';  width:45px; border-top:4px solid #000;  position:absolute; top:-18px; left:0;}
#page4 .section .wrap1200 .txtx table{margin-top: 50px;}
#page4 .section .wrap1200 .txtx table caption{display:none;}
#page4 .section .wrap1200 .txtx table th{padding:6px 2px; position:relative; letter-spacing:0.1rem;}
#page4 .section .wrap1200 .txtx table th span{position:relative;}
#page4 .section .wrap1200 .txtx table th:before{ content: ''; width: 58px;  height:6px; background:#c2f4ff;  position:absolute; top: 17px;}
#page4 .section .wrap1200 .txtx table td{padding-left:18px; word-break: break-all;}
#page4 .section .wrap1200 .innerImg{background-size:100% auto !important; float:right; width: 530px; height: 400px; box-shadow: -5px 5px 12px rgba(0,0,0,0.2);}
#page4 .btn-list-return,
#page4 .btn-view-detail {cursor:pointer; user-select:none;}
#page4 #portfolio-view .view_p{display:flex; flex-wrap:wrap; justify-content:space-between;border-bottom:1px solid #000;}
#page4 #portfolio-view h4{font-size:34px; font-weight:700;  line-height:1.2; position:relative; word-break:break-all; }
#page4 #portfolio-view h4:before{content: '';  width:45px; border-top:4px solid #000;  position:absolute; top:-18px; left:0;}
#page4 #portfolio-view .txtx{ float:unset; margin-top:0; margin-bottom:50px;} 
#page4 #portfolio-view table{margin-top:0; } 

/**/
#portfolio {}
#portfolio div {opacity:0; position:relative; left:20px;}
#portfolio .website .innerImg{ border-radius:4px; }
#portfolio-view .btn-list-return{background:#000;color:#fff;}
#portfolio-view .content{margin-top:80px;}
#portfolio-view .content p img{width:100%; height:auto;}


/* company Info */
#page5 img {max-width:100%;}
#page5 h3 { font-size: 2.8em; letter-spacing: 2px; font-weight: bold; font-family:'Sen', 'sans-serif';  }
#page5 .ani1 { text-align: center; padding-top:70px; padding-bottom:150px; }
#page5 .ani1 .mainImg {overflow: hidden;}
#page5 .ani1 .mainImg img {transform: scale(1.2);}
#page5 .ani1 .mainImg.on img {transform: scale(1.0);  -webkit-transition:all 1.2s 0.2s; transition:all 1.2s 0.2s; }
#page5 .ani1 .wrap {position: relative; overflow: hidden;}
#page5 .ani1 .msg { color:#171a1c; font-family: 'Noto Sans Korean', sans-serif; margin-top:125px; margin-right:10%; text-align:right; }
#page5 .ani1 .msg h3 {opacity:0 ; position: relative; top:30px; }
#page5 .ani1 .msg p {margin-top:40px;  line-height:33px; max-width:750px; width:80%; float:right; opacity:0 ; position: relative; top:30px; }

#page5 .ani1.active .msg h3 {opacity: 1; top:0; -webkit-transition:all 0.3s 0.1s; transition:all 0.3s 0.1s;}
#page5 .ani1.active .msg p { opacity: 1; top:0; -webkit-transition:all 0.3s 0.2s; transition:all 0.3s 0.2s;}

#page5 .ani2 {background:#ebebeb; padding-top:70px; padding-bottom:150px; clear: both; }
#page5 .ani2 h3 {text-align:center;}
#page5 .ani2 ul {position: relative; overflow: hidden; width:fit-content; margin:0 auto; margin-top:90px; }
#page5 .ani2 ul li {width:300px; height:450px; float:left; margin-left:10px; text-align: center; color:#171a1c;  margin-bottom:10px; opacity: 0; position: relative; left:250px; }
#page5 .ani2 ul li:first-child {margin-left:0;}
#page5 .ani2 ul li:nth-child(1) { background:url('../../images/contents/com_icon1.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(2) { background:url('../../images/contents/com_icon2.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(3) { background:url('../../images/contents/com_icon3.png') center 255px no-repeat #fff;  }
#page5 .ani2 ul li:nth-child(4) { background:url('../../images/contents/com_icon4.png') center 255px no-repeat #fff;  }

#page5 .ani2.active ul li:nth-child(1) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.4s; transition:all 0.4s 0.4s; }
#page5 .ani2.active ul li:nth-child(2) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.6s; transition:all 0.4s 0.6s; }
#page5 .ani2.active ul li:nth-child(3) { opacity: 1; left: 0;  -webkit-transition:all 0.4s 0.8s; transition:all 0.4s 0.8s; }
#page5 .ani2.active ul li:nth-child(4) { opacity: 1; left: 0;   -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s; }


#page5 .ani2 ul li h4 {margin-top:100px; font-family:'Sen', 'sans-serif';  ; font-weight: bold; font-size:1.3em;}
#page5 .ani2 ul li p {margin-top:30px;}

#page5 .ani3 { padding-top:120px; padding-bottom:120px; position: relative; overflow: hidden; }
#page5 .ani3 .bg {height:700px; width:95%; max-width:1865px; float:right; background:url('../../images/contents/company_bg02.jpg') left center no-repeat}
#page5 .ani3 .bg h3 {margin-top:155px; margin-left:222px; font-weight: 800; color:#fff; opacity: 0;}
#page5 .ani3 .bg .inner {max-width:1160px; margin-top:95px; position: relative; overflow: hidden; margin-left:222px; opacity: 0;}
#page5 .ani3 .bg .inner .line {border-top:2px solid #fff; width:10%; float:left; margin-top:14px;}
#page5 .ani3 table {width:86%; float:left; margin-left:4%;}
#page5 .ani3 table caption {display: none;}
#page5 .ani3 table th , #page5 .ani3 table td {color:#fff;}
#page5 .ani3 table th {font-weight:500; height:32px;}
#page5 .ani3 table td {font-weight:100;}

#page5 .ani3.active .bg h3 { opacity: 1; -webkit-transition:all 0.4s 0.9s; transition:all 0.4s 0.9s; }
#page5 .ani3.active .bg .inner {opacity: 1; -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s;}


#page5 .ani4 { padding-top:120px; padding-bottom:170px; position: relative; overflow: hidden; }
#page5 .ani4 .bg {background:url(/images/contents/logo_big.png) right 90px bottom -7px no-repeat #ebebeb; width:95%; max-width:1865px; float:left;  height:700px; }
#page5 .ani4 .bg h3{margin-left:10%; margin-top:105px;}
#page5 .ani4 .bg ul { margin-left:10%; position: relative; overflow: hidden; margin-top:58px; width:80%; }
#page5 .ani4 .bg ul li {min-width:255px; padding-bottom:30px; width:33%;  float:left; box-sizing: border-box;     border-width:0 0 0 0px; border-style: solid;-webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00a4ef), to( #3d4ed1 )) 1 100%;-webkit-border-image: -webkit-linear-gradient(#00a4ef, #3d4ed1) 1 100%;-moz-border-image: -moz-linear-gradient(#00a4ef,#3d4ed1) 1 100%;-o-border-image: -o-linear-gradient(#00a4ef, #3d4ed1) 1 100%;border-image: linear-gradient(to bottom, #00a4ef, #3d4ed1) 1 100%; }
#page5 .ani4 .bg ul li div {margin-left:50px; color:#171a1c; margin-top:25px; opacity: 0; position: relative; top:20px;}
#page5 .ani4 .bg ul li div:first-child {margin-top:-15px;}
#page5 .ani4 .bg ul li div p {font-weight: bold; font-size:2.2rem; font-family: 'Sen', 'sans-serif';}
#page5 .ani4 .bg ul li div span{font-size:0.9rem; font-weight: 100;}



#page5 .ani4.active .bg ul li:nth-child(1) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 0.7s; transition:all 0.4s 0.7s;  }
#page5 .ani4.active .bg ul li:nth-child(2) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 1.0s; transition:all 0.4s 1.0s;  }
#page5 .ani4.active .bg ul li:nth-child(3) {border-width:0 0 0 17px; -webkit-transition:all 0.4s 1.2s; transition:all 0.4s 1.2s;}

#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.3s; transition:all 0.4s 0.7s;  }
#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.4s; transition:all 0.4s 0.8s;  }
#page5 .ani4.active .bg ul li:nth-child(1) div:nth-child(3) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.5s; transition:all 0.4s 0.9s;  }

#page5 .ani4.active .bg ul li:nth-child(2) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.6s; transition:all 0.4s 1.0s;  }
#page5 .ani4.active .bg ul li:nth-child(2) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.7s; transition:all 0.4s 1.1s;  }

#page5 .ani4.active .bg ul li:nth-child(3) div:nth-child(1) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.8s; transition:all 0.4s 1.2s;  }
#page5 .ani4.active .bg ul li:nth-child(3) div:nth-child(2) {  opacity: 1; top:0; -webkit-transition:all 0.4s 0.9s; transition:all 0.4s 1.3s;  }



@keyframes section-04-down {
    0% { opacity:0; transform:translateY(-20px); }
    100% { opacity:1; transform:none; }
}





@media screen and (max-width:1325px) {
    #page4 .section .wrap1200{padding:60px 80px;}
    #page5 .ani1{padding-top:40px; padding-bottom:80px;}
    #page5 .ani1 .msg {margin-top:60px;}
    #page5 .ani2{padding-bottom:80px;}
    #page5 .ani2 ul li:nth-child(3) {margin-left:0; clear: both; }
    #page5 .ani3{padding-top:90px; padding-bottom:20px;}
    #page5 .ani4{padding-top:70px; padding-bottom:90px;}
    #page5 .ani4 .bg h3{margin-top:80px;}
    

}

@media screen and (max-width:1170px) {
    #page4 .wrap1200{max-width:100%;}
    #page4 .section .wrap1200 .innerImg{width:55%;}
    #page5 .ani3 .bg .inner{max-width:100%;}
    
}

@media screen and (max-width:1100px) {
    .container-section {padding:75px 0 0 0;}
    #page4 .head{text-align:center; margin:40px 0 20px 0;}
    #page4 .head a{margin-right:0; width:80%; border:1px solid #00a4ef; border-radius:7px; padding:10px 0; margin:4px 0; font-weight:bold;}
    #page4 .head a:after{display:none;}
    #page4 .head a.active {color:#fff; background:#00a4ef; text-transform:uppercase;}
    

    #page5 .ani1 .msg {margin-right: 5%;}
    #page5 .ani2 ul{margin-top:40px;}
    #page5 .ani4 .bg h3 {margin-left:5%;}
    #page5 .ani4 .bg ul {width:95%; margin-left:5%; margin-top:6%;}
    

}


@media screen and (max-width:1085px) {

    #page3 .cts ul.fullArea li {width:50%; padding-bottom:34.3%}
    #page3 .cts ul.fullArea li:nth-child(3n) { width:50%;}
}


@media screen and (max-width:900px) {
    #page4 .section .wrap1200{padding:60px 30px;}
    #page4 .section .wrap1200 .txtx{width:100%;}
    #page4 .section .wrap1200 .innerImg{ width: 100%;  height:0; padding-bottom:75%;  margin-top: 20px;}
}
   

@media screen and (max-width:870px) {

    #page5 .ani3 .bg h3 {margin-left:80px;}
    #page5 .ani3 .bg .inner {margin-left:80px;}

    #page5 .ani4 .bg {height: auto; padding-bottom:30px;}
    #page5 .ani4 .bg ul li {width:100%; margin:0; border-left:0 solid #00a4ef;  border-image: none; }

}


@media screen and (max-width:767px) {
    #page5 h3{font-size:2.2em;}
    #page5 .ani1 .msg p{max-width:100%;}
    #page5 .ani4 .bg ul li div:first-child {margin-top:-8px;}
    
}

@media screen and (max-width:665px) {
    #page3 .cts {margin-top:20px;}
    #page4 .head {margin:20px 0 20px 0;}
    #page4 .head a{font-size:14px; padding:7px 0;}
    #page4 .section .wrap1200 {padding:20px 30px; margin: 60px auto;}
    #page4 .section .wrap1200 ul li{padding:35px 0;}
    #page4 .section .wrap1200 .txtx h4{font-size:26px;}
    #page4 .section .wrap1200 .txtx h4:before{content:''; width:30px; height:2px; border-top:2px solid #000; position:absolute; top:-12px; left:0;}
    #page4 .section .wrap1200 .txtx table{margin-top:0;}
	#page4 #portfolio-view h4{font-size:26px;}
	#page4 #portfolio-view h4:before{content:''; width:30px; height:2px; border-top:2px solid #000; position:absolute; top:-12px; left:0;}
	#portfolio-view .content{margin-top:60px;}
    #page5 h3{font-size:27px;}
    #page5 .ani1{padding-bottom:40px;}
    #page5 .ani1.active .msg{margin-right:0; margin-top: 30px;}
    #page5 .ani1.active .msg h3{line-height:1;}
    #page5 .ani1.active .msg h3, #page5 .ani1.active .msg p{text-align:center; float:inherit; margin:0 auto;}
    #page5 .ani1.active .msg p{line-height:1.5; font-size:16px; padding-top:10px;}
    #page5 .ani2{padding-bottom:40px; padding-top:40px;}
    #page5 .ani2 ul li {clear: both; margin-left:0; height:340px;}
    #page5 .ani2 ul li h4{margin-top:30px; color:#00a4ef;}
    #page5 .ani2 ul li:nth-child(1){background: url(../../images/contents/com_icon1.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(2){background: url(../../images/contents/com_icon2.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(3){background: url(../../images/contents/com_icon3.png) center 166px no-repeat #fff;}
    #page5 .ani2 ul li:nth-child(4){background: url(../../images/contents/com_icon4.png) center 166px no-repeat #fff;}
    #page5 .ani3 .bg {width:100%;}
    #page5 .ani3 .bg h3 {margin-left:3%;}
    #page5 .ani3 .bg .inner {margin-left:3%;}
    #page5 .ani3 .bg .inner .line {display:none;}
    #page5 .ani3 table {width:98%; margin-left:0%;}
    #page5 .ani4 {padding:40px;}
    #page5 .ani4 .bg ul li div p{font-size:1.5rem;}
}

@media screen and (max-width:645px) {
    #page3 .cts ul.fullArea li {width:100%; padding-bottom:65.3%}
    #page3 .cts ul.fullArea li:nth-child(3n) {width:100%;}
    #page3 .cts ul.fullArea li h3{font-size:1.5rem;}
    #page4 .section .wrap1200 .txtx h4{font-size:20px; font-weight:bold;}
	#page4 #portfolio-view .view_p{margin-top:35px;}
	#page4 #portfolio-view h4{font-size:20px; font-weight:bold;}
    #page5 .ani1 {padding-top:20px;}
    #page5 .ani3{padding-top:0;}
    #page5 .ani3 .bg{height:100%; max-width:100%; }
    #page5 .ani3 .bg .inner{margin:3rem 0 5rem 3%;}
    #page5 .ani3 .bg h3 {margin-top:5rem;}
    #page5 .ani3 table tbody tr{font-size:16px;}
    #page5 .ani3 table th{padding-right:10px;}
    #page5 .ani4{padding-top:0;}
}

/**/
.card-area {position:relative;}
.card-area .card-area-head {
    font-weight:bold; color:#5d84f4; /*color:#527978;*/ text-align:center; font-size:20px; line-height:50px;
    border-radius:15px 15px 0 0; background:#efefef; padding:0 0 20px 0;
}
.card-area .card-area-head.fc {color:#527978;}
.card-area .card-area-body {
    background:#527978; color:#fff; border-radius:15px; padding:40px; transform:translateY(-20px);
}
.card-area .box-white {
    color:#000; text-align:center; background:#fff; padding:10px; display:block;
}
.card-area .box-white.box-mini {width:100px; display:inline-block;}
.card-area ul {}
.card-area ul li {padding-left:20px; position:relative; line-height:28px;}
.card-area ul li::before {
    content:''; display:block; width:4px; height:4px; background:#fff; position:absolute;
    top:13px; left:8px;
}
.card-gray {background:#efefef; border-radius:15px; padding:40px;}
.arrow {position:relative;}
.arrow-bottom {margin-bottom:70px;}
.arrow::after {
    content:''; display:block; position:absolute; width:96px; height:57px; margin:auto;

}
.arrow-right::after {top:0; right:0; bottom:0; left:auto; transform:translateX(68%); background:url(/images/contents/p10_01.png) no-repeat;}
.arrow-bottom::after {top:auto; right:0; bottom:0; left:0; transform:translateY(110%) rotate(90deg); background:url(/images/contents/p10_01.png) no-repeat;}

#page_10 {background:#f3f4f5;}
#page_10 section {margin-bottom:60px;}
#page_10 section:last-child {margin-bottom:0;}
#page_10 .wrap {padding:95px 0 70px 0; max-width:1400px;}
#page_10 .wrap > .rect {background:#fff; padding:70px 40px 100px 40px;}
#page_10 section {}
#page_10 section h2 {font-size:35px; position:relative; margin-bottom:30px;}
#page_10 section h2::before {
    content:''; display:block; position:absolute; top:-10px; left:0; width:45px; height:3px; background:#000;
}
#page_10 section h3 {color:#527978; font-weight:bold; text-align:center; margin-bottom:15px;}
#page_10 .arrow.arrow-right:after {top:180px; bottom:auto;}
@media(max-width:768px){
    #page_10 .wrap {padding-top:20px;}
    #page_10 .wrap > .rect {padding:30px 10px;}
}

#platform-configuration {}
#platform-configuration > .flex {display:flex; flex-direction:row; justify-content:space-between;}
#platform-configuration > .flex > div {width:32%; flex:0 0 32%; max-width:32%;}
#card-area-01 {z-index:3;}
#card-area-01 .flex {display:flex; flex-direction:row; flex-wrap:nowrap;}
#card-area-01 .flex > div {height:180px;}
#card-area-01 .flex > div:nth-child(1) {}
#card-area-01 .flex > div:nth-child(1) img {transform:translateY(25px);}
#card-area-01 .flex > div:nth-child(2) {width:100%; padding:25px 0 0 15px;}
#card-area-02 {z-index:2;}
#card-area-02 .card-area-body {padding-bottom:60px;}
#card-area-02 .flex {display:flex;}
#card-area-02 .flex > div {padding-top:25px;}
#card-area-02 .flex > div:nth-child(1) {}
#card-area-02 .flex > div:nth-child(2) {width:100%;padding-left:15px;}
#card-area-03 {z-index:1;}
@media (max-width:1300px){
    #card-area-02.card-area .card-area-head {white-space:nowrap; font-size:15px; }
    #card-area-02 .flex {flex-direction:column;}
    #card-area-02 .flex > div:nth-child(1) {text-align:center;}
    #card-area-02 .flex > div:nth-child(2) {padding-left:0;}
}
@media (max-width:1200px){
    /* js 로 arrow 클래스 제어함 */
    #platform-configuration > .flex {display:block;}
    #platform-configuration > .flex > div {width:100%; flex:0 0 100%; max-width:600px; margin:auto;}
    #card-area-02.arrow-bottom::after,
    #card-area-03.arrow-bottom::after {bottom:30px;}
}

#system-configuration {}
#system-configuration .card-gray {}
#system-configuration .card-gray .bg {
    background-image:url(/images/contents/p10_07.jpg); background-repeat:no-repeat; background-size:100%;
    background-position:center center; height:748px; position:relative;
}
#system-configuration .box-1,
#system-configuration .box-2 {
    background:#527978; border-radius:15px; position:absolute; text-align:center; color:#fff; padding:30px 60px;
    font-size:17px; font-weight:300;
}
#system-configuration .box-1 {top:0; left:0;}
#system-configuration .box-2 {bottom:0; right:0;}
#app-key-functions .flex {display:flex; max-width:900px; margin:auto; flex-direction:row;}
#app-key-functions .flex > div {}
#app-key-functions .flex > div:nth-child(1) {}
#app-key-functions .flex > div:nth-child(2) {width:100%;padding-left:50px;}
#app-key-functions ul {margin:20px 0;}
#app-key-functions ul li {
    position:relative; border:4px solid #9e9286; border-radius:20px; padding:15px 60px; margin-bottom:20px;
    min-height:90px; display:flex; align-items:center;
}
#app-key-functions ul li::before {
    content:'00'; display:block; position:absolute; top:-20px; left:-20px; border-radius:100%; background:#9e9286;
    width:55px; height:55px; border:4px solid #efefef; color:#fff; text-align:center; font-weight:bold;
    line-height:45px; font-size:21px;
}
#app-key-functions ul li:nth-child(1):before {content:'01';}
#app-key-functions ul li:nth-child(2) {border-color:#fdb947;}
#app-key-functions ul li:nth-child(2):before {content:'02'; background:#fdb947;}
#app-key-functions ul li:nth-child(3) {border-color:#e76a4e;}
#app-key-functions ul li:nth-child(3):before {content:'03'; background:#e76a4e;}
#app-key-functions ul li:nth-child(4) {}
#app-key-functions ul li:nth-child(4):before {content:'04';}
#app-key-functions ul li:nth-child(5) {}
#app-key-functions ul li:nth-child(5):before {content:'05';}
@media (max-width:768px){
    #app-key-functions .flex {flex-direction:column;}
    #app-key-functions .flex > div {width:100%; flex:0 0 100%; max-width:100%;}
    #app-key-functions .flex > div:nth-child(1) {text-align:center;}
    #app-key-functions .flex > div:nth-child(2) {padding:0;}
}