@charset "utf-8";
/* CSS Document */
/* 작업자 : Lena_2023_05 */

@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUITE/fonts/static/woff2/SUITE.css");
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard-dynamic-subset.css");
@font-face {font-family: 'KyoboHand'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/KyoboHand.woff') format('woff'); font-weight: normal; font-style: normal;}

/* 공통설정 */
* {font-family: 'SUITE', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing:-0.01em;}
.font_pre {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.font_pre_del {font-family: 'SUITE', -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; letter-spacing:-0.01em;}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: "Open Sans", sans-serif;
  color: #444444;
}

a {
  color: #47b2e4;
  text-decoration: none;
}

a:hover {
  color: #73c5eb;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
/*  font-family: "Jost", sans-serif;*/
}
iframe {
  border: 1px solid black;
  width: 100%; /* takes precedence over the width set with the HTML width attribute */
}
/* 기타 클래스 */
.app_service {}
.app_service ul {list-style: none; padding-left:0;}
.app_service ul li {border-bottom:1px solid #ccc; padding:30px 0; position: relative;}
.app_service ul li dl dt { color:#bbb; font-size:20px;display: flex; align-items: center; margin-bottom:10px;}
.app_service ul li dl dt strong { color:#712CFC; font-size:30px; padding-left:10px; font-weight: 800}
.app_service ul li dl dd {color:#000; font-size:20px; padding-left:33px; margin-bottom:0;}

.app_service ul li:nth-child(1) {background:url(../img/service_01.svg) no-repeat right bottom; height: 420px;}
.app_service ul li:nth-child(2) {background:url(../img/service_02.svg) no-repeat calc(100% - 90px) calc(50% - 5px);}
.app_service ul li:nth-child(3) {background:url(../img/service_03.svg) no-repeat calc(100% - 50px) calc(50%);}
.app_service ul li:nth-child(4) {background:url(../img/service_04.svg) no-repeat calc(100% - 130px) calc(50%);}
.app_service ul li:nth-child(5) {background:url(../img/service_05.svg) no-repeat calc(100% - 115px) calc(50%);}
.app_service ul li:nth-child(6) {background:url(../img/service_06.svg) no-repeat calc(100% - 110px) calc(50%);}
.app_service ul li:nth-child(7) {background:url(../img/service_07.svg) no-repeat calc(100% - 110px) calc(50%);}

.app_service ul li dl.talk {display: inline-block; margin-bottom:0; padding-right:43px; background:url(../img/bg_yellow.svg) no-repeat right center; position: absolute; top: 160px; left: 280px;}
.app_service ul li dl.talk dt { color:#FF4A0C; font-size:20px;display: flex; align-items: center; margin-bottom:10px;}
.app_service ul li dl.talk dd:nth-child(2) {color:#3F1B00; font-size:20px; padding:25px 30px; margin-bottom:0; background:#FFE16E; border-radius: 40px; font-weight: bold;}
@media (max-width: 1400px) {
    .app_service ul li dl.talk {left:80px;}
}
@media (max-width: 1200px) {
    .app_service ul li:nth-child(1) {background-size: 40%; height: 420px;}
    .app_service ul li dl.talk {left:120px; top:200px}
    .app_service ul li dl.talk dt {font-size:16px;}
    .app_service ul li dl.talk dd:nth-child(2) {font-size:16px;}
    
    .app_service ul li:nth-child(2) {background-position: right;}
    .app_service ul li:nth-child(3) {background-position: right;}
    .app_service ul li:nth-child(4) {background-position: right;}
    .app_service ul li:nth-child(5) {background-position: right;}
    .app_service ul li:nth-child(6) {background-position: right;}
    .app_service ul li:nth-child(7) {background-position: right;}
}
@media (max-width: 991px) {
    .app_service ul li:nth-child(1) {background-size: 80%; background-position: center bottom; height: 740px;}
    
    .app_service ul li dl dt strong { font-size:24px;}
    .app_service ul li dl dd {font-size:18px; }
    
    
    .app_service ul li dl.talk {position:relative; top:0; left:0; margin:0 33px; 0 33px; background:none; display: block; padding-right:0;}
    .app_service ul li dl.talk dd:nth-child(2) {border-radius: 5px; width:100%; padding:20px; background:#FFE16ECC;}
    .app_service ul li dl.talk dd:nth-child(2) br {display: inline-block; content: " "; padding: 0;}
    
    .app_service ul li:nth-child(2) {background-size: 25%;}
    .app_service ul li:nth-child(3) {background-size: 25%;}
    .app_service ul li:nth-child(4) {background-size: 12%;}
    .app_service ul li:nth-child(5) {background-size: 12%;}
    .app_service ul li:nth-child(6) {background-size: 12%;}
    .app_service ul li:nth-child(7) {background-size: 12%;}

}

@media (max-width: 768px) {
    .app_service ul li:nth-child(1) {background-size: 80%; background-position: center bottom; height: 670px;}
    
    .app_service ul li dl dt {font-size:14px; margin-bottom:5px;}
    .app_service ul li dl dt strong {font-size:20px;}
    .app_service ul li dl dd {font-size:15px; padding-left:28px; line-height:1.3;}
    
}

@media (max-width: 500px) {

    .app_service ul li:nth-child(2) {background-position: right 95%; background-size: 25%;}
    .app_service ul li:nth-child(3) {background-position: right 95%; background-size: 35%;}
    .app_service ul li:nth-child(4) {background-position: 98% 95%;}
    .app_service ul li:nth-child(5) {background-position: right bottom;}
    .app_service ul li:nth-child(6) {background-position: right 95%;}
    .app_service ul li:nth-child(7) {background-position: right bottom;}
    
    

}

@media (max-width: 394px) {

    .app_service ul li:nth-child(2) {background-position: right bottom; background-size: 30%;}
    .app_service ul li:nth-child(4) { background-size:16%;}
    .app_service ul li:nth-child(5) { background-size:16%;}
    .app_service ul li:nth-child(6) { background-size:16%;}
    .app_service ul li:nth-child(7) { background-size:16%;}
}

.download_area {background:#FAFAFA;}
.downList {display: flex; align-items: center; justify-content: center;}
.downList ul { list-style: none; margin:0; padding:0;}
.downList ul li.down_google a dl {background-image:url(../img/down_gg.svg), url(../img/down_qr_android_woojoojoocha.svg); background-repeat: no-repeat, no-repeat; background-position: left center, right center; background-size: auto, 50px; padding-left:60px; padding-right:100px;}
.downList ul li.down_apple a dl {background-image:url(../img/down_ap.svg), url(../img/down_qr_apple_woojoojoocha.svg); background-repeat: no-repeat, no-repeat; background-position: left center, right center; background-size: auto, 50px; padding-left:60px; padding-right:100px;}
.downList ul li a {background:#fff; border:1px solid #E0E0E0; border-radius: 10px; display: block; padding: 25px 40px; margin:0 0 20px 0;}
.downList ul li a:hover,
.downList ul li a:focus,
.downList ul li a:active {border:1px solid #712CFC;}
.downList ul li a dl { margin:0;}
.downList ul li a dl dt { margin:0; font-size:20px; color:#000; font-weight: 800;}
.downList ul li a dl dd { margin:0; font-size:16px; color:#000;}


.section-title h2 {font-size:30px;}
.section-title p {font-size:20px; margin-top:20px; margin-bottom:30px; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; }

@media (max-width: 991px) {
    .section-title {padding-top: 30px !important; padding-bottom:20px !important;}
    .section-title h2  {text-align: center;}
    .section-title p {text-align: center; font-size:18px; }

    .downList {flex-direction: column;}
    .downList>div {width:26%;}
    .downList>div>img {width:100%; max-width:185px;}
    .downList ul li.down_google a dl {background-image:url(../img/down_gg.svg); background-repeat: no-repeat; background-position: left center; padding-left:60px; padding-right:0;}   
    .downList ul li.down_apple a dl {background-image:url(../img/down_ap.svg); background-repeat: no-repeat; background-position: left center; padding-left:60px; padding-right:0;}
}

@media (max-width: 500px) {
    
    .section-title p {font-size:16px;}
    
    .downList {flex-direction: column;}
    .downList ul {width:100%;}
    .downList ul li a {margin-bottom:5px;}
}



#woojoo_visual {height:896px; background:url(../img/sensor_big_img.svg) no-repeat calc(50% + 600px) 205px;}
#woojoo_visual .container {position:relative;}

#woojoo_visual .text_01 {}
#woojoo_visual .text_01 dl {background:#9B65E5; position: absolute; top:170px; left:-160px; display: flex; margin:0; align-items: center; padding-left:160px;}
#woojoo_visual .text_01 dl dt {color:#fff; font-size:30px; padding:40px; text-align: center; line-height: 1.2; font-weight: 800;}
#woojoo_visual .text_01 dl dd {color:#fff; font-size:63px; padding:40px; text-align: center; line-height: 1.2; font-weight: 800; margin:0;}

#woojoo_visual .text_02 {}
#woojoo_visual .text_02 dl {background:#FEE26ECC; position: absolute; top:358px; left:30px; display: flex; margin:0; flex-direction: column; padding:40px 50px; }
#woojoo_visual .text_02 dl dt {color:#6A4600; font-size:24px; line-height: 1.2; font-weight: 800;}
#woojoo_visual .text_02 dl dd {color:#6A4600; font-size:64px; line-height: 1.2; font-weight: 800; margin:0;}

#woojoo_visual .text_03 {position:absolute; top:620px; left:0; display: flex; align-items: center; }
#woojoo_visual .text_03 .text_03_img {background:url(../img/bg_glay.svg) no-repeat right center; padding-right: 50px;}
#woojoo_visual .text_03 p {background:#F0F0F0CC; color:#712CFC; font-size:30px; padding:24px 80px; border-radius: 40px; margin-bottom:0;}
#woojoo_visual .text_03 p strong {font-size:38px;}
@media (max-width:991px){
    #woojoo_visual {background-size:130%; background-position: calc(100% - 210%) 210px; height:700px;}
    #woojoo_visual .text_01 dl dt {font-size:20px; padding:20px}
    #woojoo_visual .text_01 dl dd {font-size:40px; padding:30px}
    #woojoo_visual .text_02 dl {padding: 20px 40px; top:282px; left:10px;}
    #woojoo_visual .text_02 dl dt {font-size:16px;}
    #woojoo_visual .text_02 dl dd {font-size:40px;}
    #woojoo_visual .text_03 {top:500px;}
    #woojoo_visual .text_03 img {max-width:200px;}
    #woojoo_visual .text_03 .text_03_img {width:250px;background:url(../img/bg_glay.svg) no-repeat right center; padding-right: 50px;}
    #woojoo_visual .text_03 p {font-size:20px; font-weight: 700; padding: 14px 40px; border-radius: 20px;}
}

@media (max-width:768px){
    #woojoo_visual {height: 800px;}
    #woojoo_visual .text_03 {top:500px; flex-direction: column;left:calc(50% - 110px);}
    #woojoo_visual .text_03 img {max-width:200px;}
    #woojoo_visual .text_03 .text_03_img {width:200px;background:none; padding-right:none;}
    #woojoo_visual .text_03 p {padding: 10px 0; border-radius:0; background: none;}
    
}

@media (max-width:640px){
    #woojoo_visual  {height: 720px;}
    #woojoo_visual .text_01 dl {left:-120px;}
}

@media (max-width:500px){
    #woojoo_visual .text_01 dl {left:-100px;}
    #woojoo_visual .text_02 dl {left:30px; right:0;}
    #woojoo_visual .text_02 dl dd {font-size:34px;}
    #woojoo_visual {background-position: calc(100% - 130%) 380px;}
}
@media (max-width:371px){
    #woojoo_visual .text_02 dl {padding:20px;}
    #woojoo_visual .text_02 dl dd {font-size:28px;}
}

.technical {display: flex;    justify-content: space-evenly;}
.technical div dl dt {padding-top:160px; text-align: center;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; color:#6C00FF; padding-bottom:10px;}
.technical div dl dd {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; text-align: center;}
.technical div dl dd span {display: block;}
.technical div dl.strength_01 {background: url(../img/icon_strength_01.svg) no-repeat center top; }
.technical div dl.strength_02 {background: url(../img/icon_strength_02.svg) no-repeat center top; }
.technical div dl.strength_03 {background: url(../img/icon_strength_03.svg) no-repeat center top; }

.economic dl {margin-left:100px; margin-bottom:30px;}
.economic dl dt {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; color:#6C00FF; padding-bottom:10px;}
.economic dl dd {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; color:#000; padding-bottom:3px; padding-left:15px; background:url(../img/icon_dot.svg) no-repeat left center;}

@media (max-width:991px){
    .technical {    flex-direction: column;}
    .technical div{ display: flex;align-items: center;min-height: 100px;}
    .technical div dl {display: flex; align-items: flex-start; flex-direction: column;        justify-content: center; min-height: 100px;}
    .technical div dl dt {padding:0 0 0 130px; width:100%; text-align: justify;}
    .technical div dl dd {padding:0 0 0 130px; width:100%; text-align: justify;}
    .technical div dl dd span {display: inline; padding-left:5px;}
    
    .technical div dl.strength_01 {background-size:100px; background-position: left center; }
    .technical div dl.strength_02 {background-size:100px; background-position: left center; }
    .technical div dl.strength_03 {background-size:100px; background-position: left center; }
    
    .economic dl {margin-left:0;}
    .economic dl dd {background-position: left 13px;}
}
@media (max-width:768px){
    .economic dl dt {font-size:18px;}
    .economic dl dd {font-size:17px; line-height: 1.2;}
}

@media (max-width:500px){
    
    .technical div dl dt {padding:0 0 0 100px; width:100%; font-size:18px;}
    .technical div dl dd {padding:0 0 0 100px; width:100%; font-size:18px;}
    .technical div dl.strength_01 {background-size:80px; }
    .technical div dl.strength_02 {background-size:80px; }
    .technical div dl.strength_03 {background-size:80px; }
    }



.design_area .part {display: flex;    align-items: center;}
.design_area .part .part_01 {width:40%; text-align: center;}
.design_area .part .part_01 p {text-align: center;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; color:#6C00FF; font-weight: bold; margin-bottom:40px;}
.design_area .part .part_02 {width:60%; text-align: right;}
.design_area .part .part_02 h3 {font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;  font-size:20px; color:#6C00FF; font-weight: bold;}


.design_area .part .part_02 h3 {text-align: justify;}
.design_area .part .part_02 table {border-top:1px solid #bbb; width:100%; margin:10px 0;text-align: justify;}
.design_area .part .part_02 table tbody tr th {border-bottom:1px solid #fff; text-align: center; font-weight: normal; background:#A363FF; color:#fff; font-size:20px; padding:10px;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.design_area .part .part_02 table tbody tr td {border-bottom:1px solid #bbb; padding:10px; font-size:20px; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.design_area .part .part_02 table tbody tr td strong {font-weight: 900; color:#A363FF;}
.design_area .part .part_02 table tbody tr:nth-child(2) td:nth-child(2) {text-align: center;}
.design_area .part .part_02 table tbody tr td:nth-child(3) {border-left:1px solid #bbb; text-align: center;}


.system_area .part {display: flex; justify-content: space-around; align-items: flex-end;}
.system_area .part .part_01 dl dt {font-size:20px; color:#B8B8B8;  font-weight: 600; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.system_area .part .part_01 dl dd {margin:-17px 0 30px 0; font-size:30px; color:#000;  font-weight: 700; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.system_area .part .part_01 dl dd strong {color:#712CFC; font-size:40px;}
.system_area .part .part_01 dl dd:nth-child(3) {margin:0; text-align: center;}


.system_area .part .part_02 dl dt {font-size:20px; color:#B8B8B8;  font-weight: 600; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.system_area .part .part_02 dl dd {margin:-17px 0 30px 0; font-size:30px; color:#000;  font-weight: 700; font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.system_area .part .part_02 dl dd strong {color:#712CFC; font-size:40px;}
.system_area .part .part_02 dl dd:nth-child(3) {margin:0; text-align: center;}

.system_area .part .char_area {text-align: right; padding-right:30px; background: url(../img/bg_glay_down.svg) no-repeat 65px calc(50% + 20px);}
.system_area .part .char_area ul {background:#f0f0f0; list-style: none; margin:0; padding:30px; border-radius: 30px;}
.system_area .part .char_area ul li {color:#505050; font-size:18px; text-align: justify; font-weight: 700; }
.system_area .part .char_area ul li:first-child {margin-bottom:15px;} 
.system_area .part .char_area ul li span {display: block;}
.system_area .part .char_area ul li strong {color:#712CFC;}

.system_area .part .char_area_mobile {display: none;}


@media (max-width:1200px){
    .design_area .part .part_01 {width:35%;}
    .design_area .part .part_01 p img {width:100%; max-width:396px;}
    .design_area .part .part_02 {width:65%}
    
    .system_area .part {justify-content: space-between; align-items: flex-start;}
    .system_area .part .part_01 {width:50%;}
    .system_area .part .part_01 dl dt {font-size:14px; margin-bottom:10px;}
    .system_area .part .part_01 dl dd {font-size:20px;}
    .system_area .part .part_01 dl dd strong {font-size:24px;}
    .system_area .part .part_01 dl dd img {width:100%; max-width: 351px;}
    
    .system_area .part .part_02 {width:50%;}
    .system_area .part .part_02 dl dt {font-size:14px; margin-bottom:10px;}
    .system_area .part .part_02 dl dd {font-size:20px;}
    .system_area .part .part_02 dl dd strong {font-size:24px;}
    .system_area .part .part_02 dl dd img {width:100%; max-width: 422px;}
    
    .system_area .part .char_area {display: none;}
    
}
@media (max-width:991px){
    .design_area .part {flex-direction: column; align-items: center;}
    .design_area .part .part_01 {width:100%;}
    .design_area .part .part_01 p img {width:100%; max-width:100%;}
    .design_area .part .part_02 {width:100%}
    
    .system_area .part{align-items: center; flex-direction: column;}
    .system_area .part .part_01 {width:80%;}
    .system_area .part .part_02 {width:80%; padding-top:30px;}
}

@media (max-width:600px){
    .design_area .part .part_02 h3 {font-size:18px;}
    .design_area .part .part_02 table tbody tr th {font-size:14px; padding:6px;}
    .design_area .part .part_02 table tbody tr td {font-size:14px; padding:6px;}
}

#footer {background:#fff;padding: 60px 0 30px 0; height:500px;}
.footer_cs {display: flex;}
.footer_cs div:nth-child(1) {width:25%;}
.footer_cs div:nth-child(1) h3 img {width:100%; max-width:225px;} 
.footer_cs div:nth-child(2) {width:45%;}
.footer_cs div:nth-child(2) h4 {color:#712CFC; font-size:14px; font-weight: 700;}
.footer_cs div:nth-child(2) ul {list-style: none; padding-left:0;}
.footer_cs div:nth-child(2) ul li {font-size:14px;font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}
.footer_cs div:nth-child(3) {width:30%;}
.footer_cs div:nth-child(3) p {text-align: center;}
.footer_cs div:nth-child(3) a {display: block; font-size:50px; color:#333; letter-spacing: -2px;text-align: center;}
.footer_cs div:nth-child(3) a span {color:#A363FF;}


@media (max-width:991px){
    .footer_cs {display:block;}
    .footer_cs div:nth-child(1) {width:33%;}
    .footer_cs div:nth-child(1) h3 img {width:100%; max-width:225px;float:left;} 
    .footer_cs div:nth-child(2) {float: left; padding-left:30px; width:63%;}
    .footer_cs div:nth-child(3) {clear:both; width:100%; padding-top:50px;}
    .footer_cs div:nth-child(3) p {margin:-10px;}
}

@media (max-width:768px){
    .footer_cs {display: flex; flex-direction: column; align-items: flex-start;}
    .footer_cs div:nth-child(1) {width:100%;}
    .footer_cs div:nth-child(1) h3 img {width:100%; max-width:225px;float:none;} 
    .footer_cs div:nth-child(2) {float:none; padding-left:100px; padding-top:10px;width:100%;}
    .footer_cs div:nth-child(3) {padding-left:100px; text-align: left; padding-top:20px;}
    .footer_cs div:nth-child(3) a {display: flex;}
    .footer_cs div:nth-child(3) p {display: flex; margin-left:0;}
    

}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
/*
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #37517e;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #37517e;
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1s linear infinite;
}
*/

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #A363FF;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6bc1e9;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  transition: all 0.5s;
  z-index: 997;
  padding: 15px 0;
}

#header.header-scrolled,
#header.header-inner-pages {
  background: rgba(255, 255, 255, 0.9);
}

#header .logo {
  padding: 10px 0 0 0;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}

#header .logo a {
  color: #fff;
}

#header .logo img {
  max-height: 40px;
}

@media (max-width: 499px) {
    #header .logo img {max-height:32px;}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 18px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: #6A46DB;
}

.navbar .getstarted,
.navbar .getstarted:focus {
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 50px;
  color: #fff;
  font-size: 14px;
  border: 2px solid #47b2e4;
  font-weight: 600;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  color: #fff;
  background: #31a9e1;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 14px;
  text-transform: none;
  font-weight: 500;
  color: #0c3c53;
}

.navbar .dropdown ul a i {
  font-size: 12px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover>a {
  color: #47b2e4;
}

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  /*color: #fff;*/
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(163, 99, 255, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 10px;
  /*background-color: #fff;*/
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #fff;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #fff;
    font-weight: 800;
    text-decoration: underline;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
  color: #37517e;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #47b2e4;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
  visibility: visible !important;
}

/*--------------------------------------------------------------
# hello Section
--------------------------------------------------------------*/
#hello {
  width: 100%;
  height: 740px /*50vh*/;
  background-image: url("../img/main_bg_violet.png"), url("../img/main_car.svg"), url("../img/main_sensor.svg");
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-position: 0 346px, calc(50% - 635px) 505px, calc(50% + 960px) 515px;

}

@media (max-width: 1600px) {
    #hello { background-position: 0 346px, calc(50% - 635px) 505px, calc(50% + 730px) 515px; }
}




#hello .container {
  padding-top: 72px;
}

#hello .row {align-items: flex-start;}
#hello h1 {
  margin: 134px 0 10px 50px;
  font-size: 50px;
  font-weight: 600;
  color: #000;
    margin-bottom:20px;
}
#hello h1 strong {
  margin: 0 0 10px 0;
  font-size: 50px;
  font-weight: 900;
  color: #000;
}

#hello h2 {
  color: #fff;
    margin:30px 0 30px 50px;
  font-size: 25px;
    line-height: 1.3;
    text-align: justify;
    
}
.col-lg-6.order-1.hello-img.aos-init.aos-animate {text-align: right;}


#hello .btn-get-started {
  font-family: "Jost", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 28px 11px 28px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px 0 0 0;
  color: #fff;
  background: #47b2e4;
}

#hello .btn-get-started:hover {
  background: #209dd8;
}

#hello .btn-watch-video {
  font-size: 16px;
  display: flex;
  align-items: center;
  transition: 0.5s;
  margin: 10px 0 0 25px;
  color: #fff;
  line-height: 1;
}

#hello .btn-watch-video i {
  line-height: 0;
  color: #fff;
  font-size: 32px;
  transition: 0.3s;
  margin-right: 8px;
}

#hello .btn-watch-video:hover i {
  color: #47b2e4;
}

#hello .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 991px) {
    
  #hello {
    height: 100vh;
    text-align: center;
      /*height:930PX;*/
  }
    #hello { background-position: 0 346px, calc(50% - 635px) 505px, calc(50% + 480px) 515px; }
    #hello h1 {font-size:30px;}
    #hello h1 strong {font-size:30px;}
  #hello .animated {
    animation: none;
  }

  #hello .hello-img {
    text-align: center;
  }

  #hello .hello-img img {
    width: 50%;
  }
    #hello h1 {margin:30px 0 0 0; text-align: center;}
    #hello h2 {color:#666; font-size:20px; text-align: center; margin-left:0;}
    
}

@media (max-width: 768px) {
  #hello h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hello h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  #hello .hello-img img {
    width: 70%;
  }
}

@media (max-width: 575px) {
    #hello {
        background-position: 0 186px, calc(50% - 255px) 505px, calc(50% + 280px) 515px;
        background-size: auto, 80%, 50%;
    }
    #hello h1 {font-size:24px;}
    #hello h1 strong {font-size:24px;}
    #hello h2 {font-size:14px;}
  #hello .hello-img img {
    width: 50%;
  }

  #hello .btn-get-started {
    font-size: 16px;
    padding: 10px 24px 11px 24px;
  }
}

@media (max-width: 470px) {
    #hello {
        background-position: 0 186px, calc(50% - 0px) 585px, calc(50% + 0px) 705px;
        height:780px;
    }
    
} 

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

@media (max-width: 991px) {
    section {padding: 30px 0 ;}
}



.section-bg {
  background-color: #f3f5fa;
}

.section-title {
  padding-top:50px;
  padding-bottom: 35px;
}

.section-title h2 {
  font-size: 30px;
  font-weight: 800;
  color: #000;
    margin-bottom: 0;
}

/*
.section-title h2::before {
  content: "";
  position: absolute;
  display: block;
  width: 120px;
  height: 1px;
  background: #ddd;
  bottom: 1px;
  left: calc(50% - 60px);
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 40px;
  height: 3px;
  background: #47b2e4;
  bottom: 0;
  left: calc(50% - 20px);
}
*/

.section-title p {
  margin-bottom: 0;
}




/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
  padding: 12px 0;
  text-align: center;
}

.clients img {
  max-width: 45%;
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 15px 0;
  filter: grayscale(100);
}

.clients img:hover {
  filter: none;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .clients img {
    max-width: 40%;
  }
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/
.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li+li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: #47b2e4;
  line-height: 1;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .btn-learn-more {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 4px;
  transition: 0.3s;
  line-height: 1;
  color: #47b2e4;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid #47b2e4;
}

.about .content .btn-learn-more:hover {
  background: #47b2e4;
  color: #fff;
  text-decoration: none;
}

/*--------------------------------------------------------------
# Why Us
--------------------------------------------------------------*/
.why-us .content {
  padding: 60px 100px 0 100px;
}

.why-us .content h3 {
  font-weight: 400;
  font-size: 34px;
  color: #37517e;
}

.why-us .content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-top: 5px;
}

.why-us .content p {
  font-size: 15px;
  color: #848484;
}

.why-us .img {
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}

.why-us .accordion-list {
  padding: 0 100px 60px 100px;
}

.why-us .accordion-list ul {
  padding: 0;
  list-style: none;
}

.why-us .accordion-list li+li {
  margin-top: 15px;
}

.why-us .accordion-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
}

.why-us .accordion-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding-right: 30px;
  outline: none;
  cursor: pointer;
}

.why-us .accordion-list span {
  color: #47b2e4;
  font-weight: 600;
  font-size: 18px;
  padding-right: 10px;
}

.why-us .accordion-list i {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.why-us .accordion-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.why-us .accordion-list .icon-show {
  display: none;
}

.why-us .accordion-list a.collapsed {
  color: #343a40;
}

.why-us .accordion-list a.collapsed:hover {
  color: #47b2e4;
}

.why-us .accordion-list a.collapsed .icon-show {
  display: inline-block;
}

.why-us .accordion-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1024px) {

  .why-us .content,
  .why-us .accordion-list {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 992px) {
  .why-us .img {
    min-height: 400px;
  }

  .why-us .content {
    padding-top: 30px;
  }

  .why-us .accordion-list {
    padding-bottom: 30px;
  }
}

@media (max-width: 575px) {
  .why-us .img {
    min-height: 200px;
  }
}

/*--------------------------------------------------------------
# Skills
--------------------------------------------------------------*/
.skills .content h3 {
  font-weight: 700;
  font-size: 32px;
  color: #37517e;
  font-family: "Poppins", sans-serif;
}

.skills .content ul {
  list-style: none;
  padding: 0;
}

.skills .content ul li {
  padding-bottom: 10px;
}

.skills .content ul i {
  font-size: 20px;
  padding-right: 4px;
  color: #47b2e4;
}

.skills .content p:last-child {
  margin-bottom: 0;
}

.skills .progress {
  height: 60px;
  display: block;
  background: none;
  border-radius: 0;
}

.skills .progress .skill {
  padding: 0;
  margin: 0 0 6px 0;
  text-transform: uppercase;
  display: block;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  color: #37517e;
}

.skills .progress .skill .val {
  float: right;
  font-style: normal;
}

.skills .progress-bar-wrap {
  background: #e8edf5;
  height: 10px;
}

.skills .progress-bar {
  width: 1px;
  height: 10px;
  transition: 0.9s;
  background-color: #4668a2;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  padding: 50px 30px;
  transition: all ease-in-out 0.4s;
  background: #fff;
}

.services .icon-box .icon {
  margin-bottom: 10px;
}

.services .icon-box .icon i {
  color: #47b2e4;
  font-size: 36px;
  transition: 0.3s;
}

.services .icon-box h4 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 24px;
}

.services .icon-box h4 a {
  color: #37517e;
  transition: ease-in-out 0.3s;
}

.services .icon-box p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .icon-box:hover {
  transform: translateY(-10px);
}

.services .icon-box:hover h4 a {
  color: #47b2e4;
}

/*--------------------------------------------------------------
# Cta
--------------------------------------------------------------*/
.cta {
  background: linear-gradient(rgba(40, 58, 90, 0.7), rgba(40, 58, 90, 0.4)), url("../img/cta-bg.png") fixed center center;
  background-size: cover;
  padding: 120px 0;
}

.cta h3 {
  color: #fff;
  font-size: 28px;
  font-weight: 700;
}

.cta p {
  color: #fff;
}

.cta .cta-btn {
  /*font-family: "Jost", sans-serif;*/
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid #fff;
  color: #fff;
}

.cta .cta-btn:hover {
  background: #47b2e4;
  border: 2px solid #47b2e4;
}

@media (max-width: 1024px) {
  .cta {
    background-attachment: scroll;
  }
}

@media (min-width: 769px) {
  .cta .cta-btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
  list-style: none;
  margin-bottom: 20px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  margin: 10px 5px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  color: #444444;
  transition: all 0.3s;
  padding: 8px 20px;
  border-radius: 50px;
  font-family: "Poppins", sans-serif;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  background: #47b2e4;
  color: #fff;
}

.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio .portfolio-item .portfolio-img {
  overflow: hidden;
}

.portfolio .portfolio-item .portfolio-img img {
  transition: all 0.6s;
}

.portfolio .portfolio-item .portfolio-info {
  opacity: 0;
  position: absolute;
  left: 15px;
  bottom: 0;
  z-index: 3;
  right: 15px;
  transition: all 0.3s;
  background: rgba(55, 81, 126, 0.8);
  padding: 10px 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0px;
}

.portfolio .portfolio-item .portfolio-info p {
  color: #f9fcfe;
  font-size: 14px;
  margin-bottom: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
  position: absolute;
  right: 40px;
  font-size: 24px;
  top: calc(50% - 18px);
  color: #fff;
  transition: 0.3s;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
  color: #47b2e4;
}

.portfolio .portfolio-item .portfolio-info .details-link {
  right: 10px;
}

.portfolio .portfolio-item:hover .portfolio-img img {
  transform: scale(1.15);
}

.portfolio .portfolio-item:hover .portfolio-info {
  opacity: 1;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #47b2e4;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #47b2e4;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(55, 81, 126, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  position: relative;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  border-radius: 5px;
  background: #fff;
  transition: 0.5s;
  height: 100%;
}

.team .member .pic {
  overflow: hidden;
  width: 180px;
  border-radius: 50%;
}

.team .member .pic img {
  transition: ease-in-out 0.3s;
}

.team .member:hover {
  transform: translateY(-10px);
}

.team .member .member-info {
  padding-left: 30px;
}

.team .member h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  color: #37517e;
}

.team .member span {
  display: block;
  font-size: 15px;
  padding-bottom: 10px;
  position: relative;
  font-weight: 500;
}

.team .member span::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: #cbd6e9;
  bottom: 0;
  left: 0;
}

.team .member p {
  margin: 10px 0 0 0;
  font-size: 14px;
}

.team .member .social {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.team .member .social a {
  transition: ease-in-out 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  width: 32px;
  height: 32px;
  background: #eff2f8;
}

.team .member .social a i {
  color: #37517e;
  font-size: 16px;
  margin: 0 2px;
}

.team .member .social a:hover {
  background: #47b2e4;
}

.team .member .social a:hover i {
  color: #fff;
}

.team .member .social a+a {
  margin-left: 8px;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .row {
  padding-top: 40px;
}

.pricing .box {
  padding: 60px 40px;
  box-shadow: 0 3px 20px -2px rgba(20, 45, 100, 0.1);
  background: #fff;
  height: 100%;
  border-top: 4px solid #fff;
  border-radius: 5px;
}

.pricing h3 {
  font-weight: 500;
  margin-bottom: 15px;
  font-size: 20px;
  color: #37517e;
}

.pricing h4 {
  font-size: 48px;
  color: #37517e;
  font-weight: 400;
  font-family: "Jost", sans-serif;
  margin-bottom: 25px;
}

.pricing h4 sup {
  font-size: 28px;
}

.pricing h4 span {
  color: #47b2e4;
  font-size: 18px;
  display: block;
}

.pricing ul {
  padding: 20px 0;
  list-style: none;
  color: #999;
  text-align: left;
  line-height: 20px;
}

.pricing ul li {
  padding: 10px 0 10px 30px;
  position: relative;
}

.pricing ul i {
  color: #28a745;
  font-size: 24px;
  position: absolute;
  left: 0;
  top: 6px;
}

.pricing ul .na {
  color: #ccc;
}

.pricing ul .na i {
  color: #ccc;
}

.pricing ul .na span {
  text-decoration: line-through;
}

.pricing .buy-btn {
  display: inline-block;
  padding: 12px 35px;
  border-radius: 50px;
  color: #47b2e4;
  transition: none;
  font-size: 16px;
  font-weight: 500;
  font-family: "Jost", sans-serif;
  transition: 0.3s;
  border: 1px solid #47b2e4;
}

.pricing .buy-btn:hover {
  background: #47b2e4;
  color: #fff;
}

.pricing .featured {
  border-top-color: #47b2e4;
}

.pricing .featured .buy-btn {
  background: #47b2e4;
  color: #fff;
}

.pricing .featured .buy-btn:hover {
  background: #23a3df;
}

@media (max-width: 992px) {
  .pricing .box {
    max-width: 60%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 767px) {
  .pricing .box {
    max-width: 80%;
    margin: 0 auto 30px auto;
  }
}

@media (max-width: 420px) {
  .pricing .box {
    max-width: 100%;
    margin: 0 auto 30px auto;
  }
}

/*--------------------------------------------------------------
# Frequently Asked Questions
--------------------------------------------------------------*/
.faq .faq-list {
  padding: 0 100px;
}

.faq .faq-list ul {
  padding: 0;
  list-style: none;
}

.faq .faq-list li+li {
  margin-top: 15px;
}

.faq .faq-list li {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  position: relative;
}

.faq .faq-list a {
  display: block;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  padding: 0 30px;
  outline: none;
  cursor: pointer;
}

.faq .faq-list .icon-help {
  font-size: 24px;
  position: absolute;
  right: 0;
  left: 20px;
  color: #47b2e4;
}

.faq .faq-list .icon-show,
.faq .faq-list .icon-close {
  font-size: 24px;
  position: absolute;
  right: 0;
  top: 0;
}

.faq .faq-list p {
  margin-bottom: 0;
  padding: 10px 0 0 0;
}

.faq .faq-list .icon-show {
  display: none;
}

.faq .faq-list a.collapsed {
  color: #37517e;
  transition: 0.3s;
}

.faq .faq-list a.collapsed:hover {
  color: #47b2e4;
}

.faq .faq-list a.collapsed .icon-show {
  display: inline-block;
}

.faq .faq-list a.collapsed .icon-close {
  display: none;
}

@media (max-width: 1200px) {
  .faq .faq-list {
    padding: 0;
  }
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info {
  border-top: 3px solid #47b2e4;
  border-bottom: 3px solid #47b2e4;
  padding: 30px;
  background: #fff;
  width: 100%;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.1);
}

.contact .info i {
  font-size: 20px;
  color: #47b2e4;
  float: left;
  width: 44px;
  height: 44px;
  background: #e7f5fb;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  transition: all 0.3s ease-in-out;
}

.contact .info h4 {
  padding: 0 0 0 60px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #37517e;
}

.contact .info p {
  padding: 0 0 10px 60px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #6182ba;
}

.contact .info .email p {
  padding-top: 5px;
}

.contact .info .social-links {
  padding-left: 60px;
}

.contact .info .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #333;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
  margin-right: 10px;
}

.contact .info .social-links a:hover {
  background: #47b2e4;
  color: #fff;
}

.contact .info .email:hover i,
.contact .info .address:hover i,
.contact .info .phone:hover i {
  background: #47b2e4;
  color: #fff;
}

.contact .php-email-form {
  width: 100%;
  border-top: 3px solid #47b2e4;
  border-bottom: 3px solid #47b2e4;
  padding: 30px;
  background: #fff;
  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.12);
}

.contact .php-email-form .form-group {
  padding-bottom: 8px;
}

.contact .php-email-form .validate {
  display: none;
  color: red;
  margin: 0 0 15px 0;
  font-weight: 400;
  font-size: 13px;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .error-message br+br {
  margin-top: 25px;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form .form-group {
  margin-bottom: 20px;
}

.contact .php-email-form label {
  padding-bottom: 8px;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 4px;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #47b2e4;
}

.contact .php-email-form input {
  height: 44px;
}

.contact .php-email-form textarea {
  padding: 10px 12px;
}

.contact .php-email-form button[type=submit] {
  background: #47b2e4;
  border: 0;
  padding: 12px 34px;
  color: #fff;
  transition: 0.4s;
  border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
  background: #209dd8;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #f3f5fa;
  min-height: 40px;
  margin-top: 72px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 68px;
  }
}

.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 600;
  color: #37517e;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #4668a2;
  content: "/";
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
  /*font-size: 14px;
  background: #37517e;
*/
}

#footer .footer-newsletter {
  padding: 50px 0;
  background: #f3f5fa;
  text-align: center;
  font-size: 15px;
  color: #444444;
}

#footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0 0 20px 0;
  padding: 0;
  line-height: 1;
  font-weight: 600;
  color: #37517e;
}

#footer .footer-newsletter form {
  margin-top: 30px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.06);
  text-align: left;
}

#footer .footer-newsletter form input[type=email] {
  border: 0;
  padding: 4px 8px;
  width: calc(100% - 100px);
}

#footer .footer-newsletter form input[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 20px;
  background: #47b2e4;
  color: #fff;
  transition: 0.3s;
  border-radius: 50px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

#footer .footer-newsletter form input[type=submit]:hover {
  background: #209dd8;
}

#footer .footer-top {
  padding: 60px 0 30px 0;
  background: #fff;
        height:500px;
}

#footer .footer-top .footer-contact {
  margin-bottom: 30px;
}

#footer .footer-top .footer-contact h3 {
  font-size: 28px;
  margin: 0 0 10px 0;
  padding: 2px 0 2px 0;
  line-height: 1;
  text-transform: uppercase;
  font-weight: 600;
  color: #37517e;
}

#footer .footer-top .footer-contact p {
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Jost", sans-serif;
  color: #5e5e5e;
}

#footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #37517e;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top .footer-links {
  margin-bottom: 30px;
}

#footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #47b2e4;
  font-size: 18px;
  line-height: 1;
}

#footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

#footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

#footer .footer-top .footer-links ul a {
  color: #777777;
  transition: 0.3s;
  display: inline-block;
  line-height: 1;
}

#footer .footer-top .footer-links ul a:hover {
  text-decoration: none;
  color: #47b2e4;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: #47b2e4;
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: #209dd8;
  color: #fff;
  text-decoration: none;
}

#footer .footer-bottom {
  padding-top: 30px;
  padding-bottom: 30px;
  color: #fff;
}

#footer .copyright {
  float: left;
}

#footer .credits {
  float: right;
  font-size: 13px;
}

#footer .credits a {
  transition: 0.3s;
}

@media (max-width: 768px) {
  #footer .footer-bottom {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  #footer .copyright,
  #footer .credits {
    text-align: center;
    float: none;
  }

  #footer .credits {
    padding-top: 4px;
  }
}