@charset "UTF-8";

@font-face {
    font-family: 'GmarketSans';
    font-weight: 300;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 500;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansMedium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot');
    src: url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff2') format('woff2'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.woff') format('woff'),
         url('https://cdn.jsdelivr.net/gh/webfontworld/gmarket/GmarketSansBold.ttf') format("truetype");
    font-display: swap;
}

/*페이지 전체 영역 설정*/
.moveScroll { width: 105px; cursor: pointer; position: relative; height: 65px; margin-bottom: 60px; border: 0; background: url('../images/scrollBtn.png') no-repeat center 80%; animation: upDown3 3s 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
/*page이동 버튼*/
.radioCon { display: flex; flex-direction: column; position: fixed; bottom: 45%; left: 20px; height: 160px; justify-content: space-between; z-index: 99;}
input[type="radio"] { appearance: none; -moz-appearance: none; /* Firefox */ -webkit-appearance: none; /* Safari and Chrome */ border-radius:50%;  outline: 0; cursor: pointer; }
input[type="radio"] { display:inline-block; width:15px; height:15px; vertical-align:middle;  border: 1px solid #6BBFF8; }
input[type="radio"] { border: 1px solid #6BBFF8;}
input[type="radio"]:checked { display:inline-block; width:15px; height:15px; vertical-align:middle; border: 1px solid #6BBFF8; background: rgba(107,191,248,1); }

/*scroll*/

 body::-webkit-scrollbar { width: 7px; }
 body::-webkit-scrollbar-thumb { background-color: #1A2675; border-radius: 10px; background-clip: padding-box; border: 1px solid transparent; }
 body::-webkit-scrollbar-track { background-color: rgba(255,255,255,0.2); border-radius: 10px; }

/*header*/
.header > .menu { display: none; }
.header { display: flex; justify-content: space-between; background: rgb(15 27 60 / 80%); height: 65px; position: fixed; top:0; width: 100%; padding: 0 40px; box-sizing: border-box; transition: top 0.2s ease-in-out; z-index: 100; }
.header > h1 { font-size: 12px; display: flex; align-items: center; }
.header > h1 > a > img { width: 100px; }
.header ul { margin: 0; padding: 0; height: 65px; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; }
.header ul > li { margin: 0 25px; }
.header ul > li:last-child { margin-right: 0; }
.header ul > li > a::after { display:block; content: ''; border-bottom: 2px solid #40B2FF; transform: scaleX(0); transition: transform 250ms ease-in-out; }
.header ul > li > .fromLeft:after{ transform-origin: 100% 50%; }
.header ul > li > .fromLeft:hover:after{ transform: scaleX(1); transform-origin: 0% 50%; }
.header ul > li > .fromLeft { color: #fff; font-size: 17px; font-weight: 600; text-transform:uppercase; font-family: auto; }
.header ul > li > .fromLeft:hover, .header ul > li > .fromLeft.active {  color: #40B2FF; font-weight: 600; font-size: 17px; font-weight: 600; transition: all 0.5s; border-bottom: 2px solid #40B2FF; }
.langHeaderBox { background-color: white; border-radius: 50px; display: flex; align-items: center; }
.langHeaderBox > a { border: 0; color: #000; font-weight: bold; padding: 7px 12px; margin: 0 4px; font-size: 12px; }
.langHeaderBox > a:hover { color: #868686; }
.langHeaderBox > span { width: 1px; height: 15px; background-color: #000; display: inline-block; }

#slide { display: none; }

.navDown { top: 0; }
.navUp { top: -65px; }

/*slider*/
.swiper { width: 100%; height: 100%; }
.swiper-slide { text-align: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mySwiper .swiper-button-next,
.mySwiper .swiper-button-prev { width: 70px; height: 70px; z-index: 9; position: absolute; top: 85%; }

.mySwiper .swiper-button-prev { transform:translateX(35%); background: url('../images/prev.png') no-repeat center; }
.mySwiper .swiper-button-next { transform:translateX(-35%); background: url('../images/next.png') no-repeat center; }

/*content*/

.content { scroll-behavior: smooth; position: sticky; }

/*wraper1*/
.wraper1 { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100vh; background: linear-gradient( rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7) ),url('../images/main_bg.jpg') no-repeat center; background-size: cover; }
.wraper1 > .conCol { animation: slide-up 2s; height: 50vh; z-index: 10; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90%; margin: 10% auto; }
.wraper1 > .conCol > img { width: 430px; height: auto; }
.wraper1 > .conCol > .langBox { border: 2px solid #fff; width: 150px; margin-top: 55px; padding: 16px; border-radius: 50px; }
.wraper1 > .conCol > .langBox > a { font-size: 20px; font-weight: 400; margin: 0 15px; }
.wraper1 > .conCol > .langBox > a:hover, .wraper1 > .conCol > .langBox > a.active { color: rgba(255,255,255,0.5); }
.wraper1 > .conCol > .langBox > span { width: 1px; height: 15px; background-color: white; display: inline-block; }


.aniBox .circle { border-radius: 50%; display: block; position: absolute; z-index: 1; }
.aniBox .circleBrd { border-color: #f5f2f0; border-radius: 50%; position: absolute; border-style: solid; }
.aniBox .circle.sml { width: 14px; height: 14px; }
.aniBox .circle.mid { width: 28px; height: 28px; }
.aniBox .circle.big { width: 42px; height: 42px; }

.wraper1 .circleTopBdr1 { width: 370px; height: 370px; right: 60px; top: -194px; border-width: 10px; z-index: -1; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circleTopBdr2 { border-width: 5px; right: 178px; top: 157px; width: 62px; height: 62px; z-index: -1; animation: upDown1 5s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite;}
.wraper1 .circle1 { left: 114px; bottom: 83px; background-color: #6BBFF8; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle2 { bottom: 210px; left: 116px; border: 3px solid #6BBFF8; animation: upDown1 5s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle2-1 { width: 270px !important; height: 270px !important; bottom: -80px; left: 230px; border: 9px solid  #f5f2f0; animation: upDown1 5s 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle3 { left: 280px; bottom: 334px; background: #4162D2; animation: upDown2 5s 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle4 { left: 193px; bottom: 246px; background: #1139a1; animation: upDown2 5s 0.16s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle5 { left: 154px; bottom: 161px; background: #1d62b7; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .circle6 { right: 195px; top: 211px; background: #1d62b7; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper1 .plane { position: absolute; width: 200px; height: 70px; }
.wraper1 .plane.rotate { right: 0; top: 350px; background: url('../images/airplane2.png') no-repeat; animation: plane 10s linear infinite; transform-origin: 100% 50%; }

.wraper2 {  }
@keyframes upDown1{
  0% { -webkit-transform: translateY(0); transform: translateY(0); }
  50% { -webkit-transform: translateY(20px); transform: translateY(20px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes upDown2{
  from { transform: translatey(0px); }
  to { transform: translatey(-30px); }
  0% { -webkit-transform: translateY(30px); transform: translateY(30px); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(30px); transform: translateY(30px); }
}

@keyframes upDown3{
  from { transform: translatey(0px); }
  to { transform: translatey(-15px); }
  0% { -webkit-transform: translateY(15px); transform: translateY(15px); }
  50% { -webkit-transform: translateY(0); transform: translateY(0); }
  100% { -webkit-transform: translateY(15px); transform: translateY(15px); }
}


@keyframes plane {
  100% { transform: translateX(0px) translateY(200px) rotate(0deg); opacity: 90%; }
  30% { transform: translateX(-500px) translateY(0px) rotate(0deg); opacity: 80%; }
  50% { transform: translateX(-800px) translateY(0px) rotate(0deg); opacity: 50%; }
  100% { transform: translateX(-1500px) translateY(-200px) rotate(20deg); opacity: 10%; }
}

@keyframes slide-up {
  0% {transform: translateY(100px); opacity: 0.2; }
  100% {transform: translateY(0); opacity: 1; }
}

@keyframes slide-up2 {

from { opacity: 0.2; line-height: 150px; }
to { opacity: 1; line-height: 35px; }

}

@keyframes slide-up-m {

from { opacity: 0.2; line-height: 50px; }
to { opacity: 1; line-height: 30px; }

}


/*wraper2 - about*/
.wraper2 { display: flex; flex-direction: column; align-items: center; width: 100%; height: 100vh; background: linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3) ) ,url('../images/wrap2bg.jpg') no-repeat center; background-size: cover; }
.wraper2 > .conCol { z-index: 10; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 90%; margin: 10% auto; }
.wraper2 > .conCol > img { animation: slide-up 1s;  }
.wraper2 > .conCol > .col { display: flex; margin-top: 22%; flex-direction: column; }
.wraper2 > .conCol > .col > p { animation: slide-up2 6s; color: white; font-size: 22px; padding: 0; margin: 10px 0 0 0; line-height: 35px; }
.wraper2 > .conCol > .col > h4 { animation: slide-up 4s;  color: white; font-size: 35px; display: flex; justify-content: center; margin-bottom: 30px; }
.wraper2 > .conCol > .col > h4 > span {  display: inline-block; width: 190px; background: rgba(255,228,0, 0.5); position: absolute; height: 17px; margin-top: 22px; }

@keyframes textLine {

0% { transform-origin:  0% 50%; background: transparent; opacity: 0; }
50% { transform-origin:  0% 60%; opacity: 0.5; }
100% { transform-origin:  0% 100%; opacity: 1; }

}

/*wraper3 - what we do*/
.wraper3 { display: flex; position: relative; flex-direction: column; align-items: center; width: 100%; height: 100vh; background: url('../images/rbBg.png') no-repeat left bottom; }
.wraper3 > .conCol { z-index: 10; height: 100vh; text-align: center; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto; }
.wraper3 > .conCol > .col { display: flex; flex-direction: row; justify-content: inherit; width: 70%; margin-top: 10px; }
.wraper3 > .conCol > .col > .btnWrap { display: flex; flex-direction: column; padding: 0; margin: 0; align-items: center; justify-content: center; }
.wraper3 > .conCol > .col > .btnWrap > li { width: 200px; height: 116px; color: #818181; cursor: pointer; border: 0; margin: 55px 0; }
.wraper3 > .conCol > .col > .btnWrap > li > span { font-weight: bold; width: 100%; height: 116px; margin-top: 128px; font-size: 22px; display: inline-block; margin-bottom: 15px; }
.wraper3 > .conCol > .col > .btnWrap > li:hover, .wraper3 > .conCol > .col > .btnWrap > li.active { color: #000; }
.wraper3 > .conCol > .col > .btnWrap > li::after { content: ''; width: 1px; height: 59px; margin: 165px -100px; z-index: -1; display: inline-block; background: #c6c6c6; position: absolute;; }
.wraper3 > .conCol > .col > .btnWrap > li.airTrans::after { width: 0 !important; }
.program { background: url('../images/icon0.png') no-repeat center; background-size: 115px; transition: .5s;}
.program:hover, .program.active{ background: url('../images/icon0_s.png') no-repeat center; background-size: 115px; }

.system { background: url('../images/icon1.png') no-repeat center; background-size: 115px; transition: .5s; }
.system:hover, .system.active { background: url('../images/icon1_s.png') no-repeat center; background-size: 115px; }

.airTrans { background: url('../images/icon2.png') no-repeat center; background-size: 115px; transition: .5s; }
.airTrans:hover, .airTrans.active { background: url('../images/icon2_s.png') no-repeat center; background-size: 115px; }

#weDoRespon { display: none; }

.wraper3 > .conCol > .col > .contentBox { border-radius: 50px 0 0 50px; background: url('../images/ulbg.png') white no-repeat right bottom; box-shadow: -5px 0 10px rgba(0,0,0,0.3); border: 1px solid #8ca7ff; transition: 1s; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; height: 80vh; }
.wraper3 > .conCol > .col > .contentBox > ul { padding: 0; margin: 0; display: none; animation: slide-up 2s; width: 90%; }
.wraper3 > .conCol > .col > .contentBox > ul > li { padding: 35px; text-align: left; font-size: 22px; letter-spacing: -1px; border-bottom: 1px solid #f1f1f1; }
.wraper3 > .conCol > .col > .contentBox > ul > li:last-child { border-bottom: 0; }
.wraper3 > .conCol > .col > .contentBox > ul > li > span { padding: 5px; width: 40px; height: 40px; line-height: 40px; margin-right: 15px; border-radius: 50%; background: #6879B5; color: white; text-align: center; display: inline-block; }

.wraper3 > .conCol > .col > .contentBox_en { border-radius: 50px 0 0 50px; background: url('../images/ulbg.png') white no-repeat right bottom; box-shadow: -5px 0 10px rgba(0,0,0,0.3); border: 1px solid #8ca7ff; transition: 1s; right: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80%; height: 80vh; }
.wraper3 > .conCol > .col > .contentBox_en > ul { padding: 0; margin: 0; display: none; animation: slide-up 2s; width: 95%; }
.wraper3 > .conCol > .col > .contentBox_en > ul > li { padding: 35px 20px; text-align: left; font-size: 22px; letter-spacing: -1px; border-bottom: 1px solid #f1f1f1; }
.wraper3 > .conCol > .col > .contentBox_en > ul > li:last-child { border-bottom: 0; }
.wraper3 > .conCol > .col > .contentBox_en > ul > li > span { padding: 5px; width: 40px; height: 40px; line-height: 40px; margin-right: 15px; border-radius: 50%; background: #6879B5; color: white; text-align: center; display: inline-block; }

.wraper3 > .conCol > .title { display: flex; align-items: center; justify-content: center; width: 30%; }
.wraper3 > .conCol > .title > h1 { color: #000; font-size: 35px; font-weight: bold; }
.wraper3 > .aniBox { z-index: -1; display: flex; flex-direction: column; left: 70px; }
.wraper3 .circleTopDash1 { width: 596px; height: 596px; position: relative; background: url('../images/dashCircle.png') no-repeat; left: 20px; top: -364px; border-width: 10px; z-index: -1; animation: spin 15s linear infinite; }
.wraper3 .circleTopBdr2 { border-width: 12px; border-color: rgba(52,109,185,0.1); left: 415px; top: -488px; width: 125px; height: 125px; position: relative; z-index: -1; animation: upDown1 5s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }

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

/*wraper4*/

.wraper4 { height: 130vh; width: 100%; margin: 0 auto; overflow: hidden; position: relative; }
.wraper4 > .conCol { z-index: 10; text-align: center; display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: 85vh; width: 90%; margin: 0 auto; background: url('../images/wrap4Bg.png') no-repeat right bottom; }
.wraper4 > .conCol > .col { text-align: left; display: flex; flex-direction: column; justify-content: inherit; width: 65%; }
.wraper4 > .conCol > .col > h1 { color: #000; font-size: 35px !important; font-weight: bold; }
.wraper4 > .conCol > .col > p { color: #000; font-size: 22px; line-height: 35px; margin-top: 45px; }
.whoWeWork { display: flex; justify-content: center; align-items: center; padding: 10px; height: 13vh; border-top: 1px solid #e1e1e1; background: url('../images/comlogo.png') rgba(255,255,255,0.8) no-repeat 90% center; background-size: 60%; }
.whoWeWork_en { display: flex; justify-content: center; align-items: center; padding: 10px; height: 13vh; border-top: 1px solid #e1e1e1; background: url('../images/comlogo_en.png') rgba(255,255,255,0.8) no-repeat 90% center; background-size: 60%; }

.whoWeWork > div { width: 90%; margin: 0 auto; justify-content: space-between; display: flex; align-items: center; }
.whoWeWork > div > h1 { font-size: 30px; }

.whoWeWork_en > div { width: 90%; margin: 0 auto; justify-content: space-between; display: flex; align-items: center; }
.whoWeWork_en > div > h1 { font-size: 30px; }



.wraper4 > .conCol > .aniBox { z-index: -1; display: flex; flex-direction: column; right: 70px; position: absolute; height: 75vh; top: -webkit calc(190/1060*100%);  top: calc(190/1060*100%);}
/*.wraper4 > .aniBox > .img { width: 1000px; height: 480px; top: 122px; position: absolute; z-index: 4; background: url('../images/wrap4Bg.png') no-repeat right; }*/
.wraper4 > .conCol > .aniBox > .bg1 { width: 1060px; height: 640px; z-index: 2; background: url('../images/wrap4Bg2.png') no-repeat bottom; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper4 > .conCol > .aniBox > .bg2 { width: 760px; height: 690px; position: absolute; bottom: 200px; right: -10px; background: url('../images/wrap4Bg3.png') no-repeat; animation: upDown2 3s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper4 > .conCol > .aniBox > .setting1 { width: 200px; height: 200px; z-index: 3; position: absolute; bottom: 450px; right: 230px; background: url('../images/setting1.png') no-repeat center; animation: spin 10s infinite; }
.wraper4 > .conCol > .aniBox > .setting2 { width: 110px; height: 150px; z-index: 3; position: absolute; bottom: 380px; right: 200px; background: url('../images/setting2.png') no-repeat center; animation: spin 15s infinite; }
/*
.wraper4 > .workshop { width: 4550px; height: 280px; margin: 0 0 80px 0; position: absolute; }
.wraper4 > .workshop > img { height: 280px; width: 470px; object-fit: cover; position: absolute; }
*/

/*
.wraper4 > .aniBox {position : relative; max-width:1200px;}
.wraper4 > .aniBox::before {content: ""; display: block; padding-top: calc(860/1200*100%);  padding-top: -webkit calc(860/1200*100%); } 
.wraper4 > .aniBox > .img {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 4; background: url('../images/wrap4Bg.png') no-repeat right;}
.wraper4 > .aniBox > .bg1 {position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 2; background: url('../images/wrap4Bg2.png') no-repeat; animation: upDown1 5s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite; }
.wraper4 > .aniBox > .bg2 {position: absolute; left: 0; top: 0; bottom: 200px; right: -10px; background: url('../images/wrap4Bg3.png') no-repeat; animation: upDown2 3s 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.84) infinite;}
.wraper4 > .aniBox > .setting1 {position: absolute; left: 0; top: 0; z-index: 3; bottom: 450px; right: 250px; background: url('../images/setting1.png') no-repeat center; animation: spin 10s infinite; }
.wraper4 > .aniBox > .setting2 {position: absolute; left: 0; top: 0; z-index; bottom: 380px; right: 200px; background: url('../images/setting2.png') no-repeat center; animation: spin 15s infinite;}
*/

/*wraper5*/

.wraper5 { height: 120vh; width: 100%; max-width: 100%; margin: 5px auto 0 auto;}
/*.wraper5 > .workshop > ul > li > img { height: 240px; width: 470px; object-fit: cover; }*/
/*
.wraper5 > .workshop  { width: 4550px; left: -500px; height: 240px; margin: 0 0 80px 0; position: absolute; }
.wraper5 > .workshop > img {transition: all 1s ease; height: 240px; width: 470px; object-fit: cover; }
.wraper5 > .workshop > img:hover { transform: scale(1.1); cursor: pointer; box-shadow: 0px 3px 5px rgba(0,0,0,0.2); }
.first { animation: workshopMove 45s linear infinite; } */

.wraper5 > .contactInfo { display: flex; padding: 20px; justify-content: space-around; margin: 90px auto 35px auto; width: 80%; }
.wraper5 > .contactInfo > .col { width: 33.3%; padding: 25px;  border-right: 1px solid #e1e1e1; align-self: flex-start; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.wraper5 > .contactInfo > .col:last-child { border-right: 0; }
.wraper5 > .contactInfo > .col > img { width: 97px; height: auto; }
.wraper5 > .contactInfo > .col > h2 { padding:0; margin: 19px auto 13px auto; }
.wraper5 > .contactInfo > .col > p { color: #626262; font-size: 18px; padding: 0; margin: 0; word-break: keep-all; text-align: center; }
.map { width: 100%; height: 65vh; background: url('../images/map.png') no-repeat center; background-size: contain; margin-bottom: 40px; }
.map_en { width: 100%; height: 65vh; background: url('../images/map_en.png') no-repeat center; background-size: contain; margin-bottom: 40px; }

@keyframes workshopMove {
 0% { margin-left: 0px; }
 100% { margin-left: -2125px; }
}

#m_footer { display: none; }
.footer { background: #303131; padding: 20px; height: 25vh; display: flex; align-items: center; flex-direction: column; justify-content: center; z-index: 99;}
.footer > .textArea { display: flex; flex-direction: column; align-items: center; }
.footer > .textArea > span { font-weight: bold; color: white; margin: 0 10px; font-size: 18px; }
.footer > .textArea > p { color: white; border-right: 1px solid #e1e1e1; padding-right: 10px; }
.footer > .textArea > div  { display: flex; margin-bottom: -12px; align-items: center; flex-direction: row; align-self: center; }
.footer > .textArea > div > span { font-weight: bold; color: white; margin: 0 10px; font-size: 18px; }
.footer > .textArea > div > p { color: white; border-right: 1px solid #e1e1e1; padding-right: 10px; }