:root {
  --full-bgcolor:#fff;
  --text-navfont:20px;
  --color-loading:#f90000;
  --color-main:#00b48d;
  --color-light:#fff;
  --color-dark:#222;
  --border-radius:100px;
  --border-radius1:1rem;
  --border-radius2:2rem;
  --srtoke-width:2px;
  --srtoke-width2:-2px;
  --srtoke-outine:var(--srtoke-width2) 0px #fff, 0px var(--srtoke-width) #fff, var(--srtoke-width) 0px #fff, 0px var(--srtoke-width2) #fff;
  --shadow-size:12px;
  --shadow-color:#5d6b89;
  --box-shadow1:0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);
  --fontSize-sss:1.1rem;
  --fontSize-ss:1.2rem;
  --fontSize-s:1.4rem;
  --fontSize-n:1.6rem;
  --fontSize-b:2rem;
  --fontSize-bb:3.2rem;
  --fontSize-x:4rem;
  --fontSize-xx:5.6rem;
  --fontSize-xxx:6.2rem;
  --pd-sss:0.4rem;
  --pd-ss:1rem;
  --pd-s:1.6rem;
  --pd-n:2rem;
  --pd-b:3rem;
  --pd-bb:4rem;
  --pd-bbb:5rem;
  --pd-x:6rem;
  --pd-xx:8rem;
  --pd-xxx:12rem;
  --side-pd:2.8rem;
}
@font-face {
  font-family: 'ONE-Mobile-Title';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

body,h1,h2,h3,h4,h5,h6 {font-family: 'ONE-Mobile-Title'}
p {font-family: 'SUIT-Regular'}
li {list-style: none}

.seo_text {font-size: 0;color:transparent;overflow: hidden; position: absolute; bottom: 0;right: 0;width: 0;height: 0;line-height: 0}

html {font-size:62.5%; }
body {font-size:var(--fontSize-n); background: #fff;color:var(--color-dark)}
* {margin:0;padding:0;box-sizing: border-box;}

#root {background: var(--full-bgcolor); overflow: hidden;}
#root > header {position: fixed;top:0;left: 0;right: 0;display: flex;flex-direction: row;align-items: center;justify-content:  flex-start;padding:0 var(--pd-ss); z-index: 9999; margin:10px 0;
/*  backdrop-filter: blur(3px)*/
}


a {text-decoration: none;}

#gnb {background:rgba(256,256,256,0.9); backdrop-filter:blur(30px); border-radius:50px; margin-left:40px}
#gnb nav > ul {display: flex;}
#gnb nav > ul > li {padding:0px 0;}
#gnb nav > ul > li > a {padding:var(--pd-s) 4vh; display: block;color:#222; font-size: var(--text-navfont);transition:color 0.3s ease}
#gnb nav > ul > li > ul {display: none;}
#gnb nav > ul > li > a:hover {color:#1393ff}

.menuBtn {position: absolute; top:0rem; right: var(--pd-ss);  z-index: 99999}
.menuBtn button {background: transparent; color:transparent; cursor: pointer; border:0;width: 50px;height: 50px; background: #fc2323;border-radius: 50%}
.menuBtn:before,
.menuBtn button:after,
.menuBtn button:before {display: block; content: '';background: #fff;border-radius: 10px; height: 4px; position: absolute; width: 28px;left:50%; margin-left: -14px; transition: all 0.2s ease}
.menuBtn:before {top:14px;}
.menuBtn button:after {top:50%; margin-top:-2px}
.menuBtn button:before {bottom:14px}

body.menuOn .menuBtn:before {transform: rotate(45deg);width: 20px;
  left: 50%;
  margin-left: -4px;
  top: 18px;
  margin-top: -1px}
  body.menuOn .menuBtn button:before {transform: rotate(-45deg);width: 20px;
    left: 50%;
    margin-left: -4px;
    top: 31px;
    margin-top: -1px
  }

  #sitemap {position: fixed; top:0;right: 0;bottom:0; z-index: 999;

background: rgba(93,107,137,0.8);
   backdrop-filter: blur(10px);
display: flex;justify-content: center; width: 100%; overflow: hidden;transition: all 0.3s ease; align-items: center; transform: translateX(100%);
}
body.menuOn #sitemap {
transform: translateX(0);
}
#sitemap header {display: none}
#sitemap ul li {list-style: none;border-bottom: 1px solid rgba(256,256,256,0); overflow: hidden; }
body.menuOn #sitemap ul li {border-bottom: 1px solid rgba(256,256,256,0.3);transition: border 0.2s 0.2s ease}
#sitemap ul li a {color:#fff; font-size: var(--fontSize-x);  padding:1rem 0;display: block; transform: translateY(var(--fontSize-xx));}
body.menuOn #sitemap  ul li:nth-child(1) a {transition: all 0.3s 0.3s ease}
body.menuOn #sitemap  ul li:nth-child(2) a {transition: all 0.3s 0.5s ease}
body.menuOn #sitemap  ul li:nth-child(3) a {transition: all 0.3s 0.7s ease}
body.menuOn #sitemap  ul li:nth-child(4) a {transition: all 0.3s 0.9s ease}
body.menuOn #sitemap  ul li:nth-child(5) a {transition: all 0.3s 1.1s ease}
body.menuOn #sitemap  ul li:nth-child(6) a {transition: all 0.3s 1.3s ease}
body.menuOn #sitemap  ul li:nth-child(7) a {transition: all 0.3s 1.5s ease}
body.menuOn #sitemap  ul li:nth-child(8) a {transition: all 0.3s 1.7s ease}
body.menuOn #sitemap  ul li a {transform: translateY(0rem); text-shadow: 0 4px 8px rgba(0,0,0,0.2)}


#mainVisuarl {background-size: cover; height: 100vh}

#root > header.light #logo{
 background: #fff;
}
#root > header.light #gnb nav > ul > li > a{
 color:#fff;
}

#logo {}
#logo a {display: block; border-radius: 50%; width: 50px; height: 50px;  text-align: center; padding: 10px 0; background: rgba(256,256,256,0.9); backdrop-filter: blur(3px); transition: all 0.3s}
#logo img {height: 100%}
body.fixon #logo {width: 50px; height: 50px;}
#bg {width: 100%;height: 100vh; position: fixed ; z-index: -1}
.footer.main-section {position: relative;z-index: 2;}
.footer header {padding:0 0 2rem; border-bottom: 1px solid rgba(256,256,256,0.1);}
.footer header h3 {color:#fff; font-size: var(--fontSize-b); opacity: 0.4}
.footer-info {color:rgba(256,256,256,0.6);  text-align: left; background: #172935;padding: 2rem 0}
.footer-info span {display: block; line-height: 1.8;font-size: var(--fontSize-ss); word-break: keep-all;}
.flogo {display: flex; color:#fff; font-size: var(--fontSize-x);align-items:center;
  justify-content: center; border-bottom: 1px solid rgba(256,256,256,0.1);border-top: 1px solid rgba(256,256,256,0.1); padding: 2rem 0}
  .flogo img {max-width: 60px}
  .flogo span {display: block;padding-left: 1.4rem}
  .flogo span sub {display: block; font-size: var(--fontSize-ss);padding-top:0.2em;color:#1393ff}

  .flex-col {display: flex;    justify-content: space-between;}
  .fnb {padding:2rem 0 }
  .fnb li {padding:0.5rem}
  .fnb li a {display: block; color:#fff; font-size: var(--fontSize-b);}
  .fnb:last-child li a {font-size: var(--fontSize-ss)}
  .fnb li span {vertical-align: middle; font-size: var(--fontSize-ss)}
  #works-root {height: 100vh;display: flex;justify-content: center;align-items: center;}


  .card-item {display: flex; align-items: center; height: 100%;  padding:2rem var(--side-pd);   position: relative;background:#222 }
/*.card-item:after {position: absolute; content: ''; width: 44px; height: 1px; background: var(--color-light); top:50%;right: -28px; display: block;}*/
li.active .card-item:after {right: -8px}
.card-item .preview {display: block;  overflow: hidden; width: 200px;  border:1px solid var(--color-light); text-align: center;}
.card-item .preview img {width: 100%;}
.card-item .description {padding:0 var(--side-pd); text-align: left; width: 100%}
.card-item .description h3 {font-size: var(--fontSize-x);padding-bottom: 0.75rem;word-break: keep-all;  -webkit-text-stroke:1px var(--color-light);
  text-fill-color:transparent;-webkit-text-fill-color:transparent;}
  .card-item .description p {font-size: var(--fontSize-ss);color:var(--color-light); padding-bottom: 1rem; word-break: keep-all; font-weight: normal; font-weight: 100}
  .card-item .description .skill_tag {display: flex; display: none}
  .card-item .description .skill_tag span {display: block; background:var(--color-main);color:var(--color-light); padding:4px 6px;  font-size: var(--fontSize-ss); border-right: 1px solid rgba(256,256,256,0.3)}
  .card-item .description .skill_tag > span:first-child {border-radius:var(--border-radius1) 0 0 var(--border-radius1);}
  .card-item .description .skill_tag > span:last-child {border-radius:0 var(--border-radius1) var(--border-radius1) 0; border-right: 0}
  .card-item .description > .btn {display: inline-block; color:var(--color-light); padding:10px var(--side-pd); border-radius: 20px; font-size: var(--fontSize-s); border:1px solid var(--color-light)}
  .card-item .description > .btn span {color:var(--color-light); background: transparent; font-size:var(--fontSize-ss); vertical-align:-2px; margin-left: 8px}

  .typing-area {white-space: pre-line;}
  .typing-area:not(.typing-area-end):after {
    font-size: var(--fontSize-n);
    font-weight: bold;
    text-align: left;
    display: inline-block;
    content: '|';
    color: black;
/*  border-right: 2px solid black; */
animation: blink 0.5s infinite; /* 커서가 깜빡이는 애니메이션 */
}

@keyframes blink {
  0% {
    opacity: 1; /* 테두리가 보이는 상태 */
  }
  50% {
    opacity: 0; /* 테두리가 안 보이는 상태 */
  }
  100% {
    opacity: 1; /* 테두리가 보이는 상태 */
  }
}


.outline-text {
  font-size: 5em;
/*    text-shadow: -1px -1px 0 yellow, 1px -1px 0 yellow, -1px 1px 0 yellow, 1px 1px 0 yellow; */
-webkit-text-fill-color: transparent; 
-webkit-text-stroke: 2px red; 
}

.shine-text {
  font-size: 5em;
  font-weight: bold;
  text-align: center;
  color: transparent; /* 텍스트의 색상을 투명하게 함 */
  background-clip: text; /* 텍스트의 채우기 영역을 텍스트 자체로 제한함 */
  background-image: url(/asset/images/sample2.jpg); /* 텍스트의 배경 이미지를 설정함 */
  animation: shine 3s infinite; /* 텍스트에 shine이라는 애니메이션을 적용함 */
}

@keyframes shine {
  0% {
    background-position: left top; /* 배경 이미지의 위치를 왼쪽 상단으로 설정함 */
  }
  50% {
    background-position: right bottom; /* 배경 이미지의 위치를 오른쪽 하단으로 설정함 */
  }
  100% {
    background-position: left top; /* 배경 이미지의 위치를 왼쪽 상단으로 설정함 */
  }
}




/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/asset/font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--fontSize-b);
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}



@media screen and (max-width: 800px){
  #gnb {display: none}
}



* {word-break: keep-all;}
/* main */
/*#mainVisuarl {height: 100vh; background: #fff url(/asset/images/m1d.jpg) no-repeat 100% 95%; overflow: hidden; position: relative; background-size:auto 70%; z-index: 1}*/
#mainVisuarl {overflow:hidden; position: relative}
.svgtext {background: #fc2323; border-radius: 0 50px 50px 0; padding:0.5rem var(--side-pd) 0.5rem; display: inline-block;}
.mainSlogan h2 {font-size: var(--fontSize-x);  font-weight: 800; text-shadow: var(--srtoke-outine);padding-bottom: 0.6rem;}
.mainSlogan p {font-size: var(--fontSize-b); font-weight: 800;padding-bottom: 0.6rem;  text-shadow: var(--srtoke-outine); word-break: keep-all;}
.mainSlogan svg {width: 100%; height: 3.5rem}
.mainSlogan svg text {font-size: var(--fontSize-b)}
.mainSlogan {position: absolute; top:auto; left:0; color:#202020; z-index: 3; bottom:0; right:0;}
.slogantext { padding:var(--pd-xx) var(--side-pd);}

p.fn {font-size: var(--fontSize-b)}
p.ss {font-size: var(--fontSize-ss)}
.p-col {color:#1393ff}
.bg-obj1 {position: absolute; bottom:-150px; left:0; height: 300px; width: 300px; background: #1393ff;display: block; border-radius:50%;opacity: 0}
.bg-obj1:after {content: ''; display: block; background: #fff;border-radius: 50%; width: 200px; height: 200px; top:50px; left:50px; position: absolute;}
.bg-obj2 {position: absolute; top:-5vh; right: 5vh; height: 50vh; width: 20vh; background: #fc2323;display: block; border-radius: 0 0 10vh 10vh; transform: rotate(30deg);z-index: 1; }
.bg-obj2:before {position: absolute; top:-15vh; right: 20vh; height: 50vh; width: 20vh; background: #f4f4f4;display: block; border-radius: 0 0 10vh 10vh;  content: '';z-index: -1;animation: hani 5s infinite;}
.bg-obj2:after {position: absolute; top:10vh; right: -20vh; height: 40vh; width: 20vh; background: #f4f4f4;display: block; border-radius: 0 0 10vh 10vh;  content: '';z-index: -1;animation: hani2 5s infinite;}

.main-section header {padding-bottom: 2rem;}
.main-section header h2 {font-size: var(--fontSize-bb); padding-bottom: 0.2rem;position: relative; font-weight:400; text-align:center;padding-bottom: 1rem;}
.main-section header h2 a {color:#222; margin-left: 0.6rem}
.main-section header p {font-size: var(--fontSize-n);padding-bottom: 1rem; text-align:center}
.main-section header.w h2,
.main-section header.w h2 a,
.main-section header.w p {color:#fff}
.main-section {position: relative; padding: var(--pd-xx) var(--side-pd);}
/*.main-section:before {position: absolute; left:0;right: 0; border-radius: 50%; height: 12rem;  content: '';display: block;top:-6rem; transition: all 0.7s 0.1s}*/

.main-section.nth-1:before {background: #fff;}
.main-section.nth-1,
.main-section.nth-2:before {background: #edefff;}

.main-section.nth-2,
.main-section.nth-3:before {background: #141517;}

.main-section.nth-3 {background: #f4f6fa;}
/*.main-section.nth-4:before {background: #f4f6fa;}*/

.main-section.nth-4 {background: #172935}

.scrollon.main-section:before {
  border-radius: 0;height: 0;
}

.inbox {width: 100%}
.inbox .slick-list {overflow: visible !important;}
.inbox .slick-list .ac_box,
.inbox .slick-list .cardbox {margin-right: 1rem}
.cardlist-x {}
.cardbox {border-radius: 2rem; overflow: hidden; display: block;}

.ac_box {background: #fff; display: block; border-radius: var(--border-radius2);box-shadow: var(--box-shadow1);padding:2rem 0; position: relative; margin-bottom: 2rem;}
.ac_box header {border-bottom: 1px solid #edefff; padding:1rem var(--side-pd) 0.5rem}
.ac_box header h2 {font-size:2.4rem; text-align:left;padding-bottom: 0.6rem;}
.ac_box header p {padding-bottom: 1rem; text-align:left}
.ac_box .img {display:block; margin-bottom:10px; border-radius:20px; overflow:hidden; max-width:420px;}
.nth-1 .ac_box header:before,
.nth-3 .ac_box header:before  {content: ''; display: block; width: 3rem; height: 3rem; border-radius: 50%; background: #edefff; position: absolute; top:10px; left: 10px; }
.ac_box h2 {font-size: var(--fontSize-b); font-weight: 800; padding-bottom: 0.4em}
.ac_box {}
.ac_box > div {font-size: var(--fontSize-s); font-weight: 400; padding:var(--pd-s) var(--pd-b); line-height: 1.6;color:#555;}
.ac_box > div p {font-size: var(--fontSize-s); }
.ac_box footer {border-top:1px solid #edefff; padding:1rem var(--side-pd) 0; font-size: var(--fontSize-sss);color:#1393ff}

.nth-3 .ac_box {border-radius: var(--border-radius1);}
.nth-3 .ac_box header:before {background: #fc2323; width: 14px; height: 14px; top:14px; left: 14px}
.nth-3 .ac_box > div { padding:1rem var(--side-pd) 0}
.nth-3 .ac_box > div img {margin-bottom: 1rem}
.nth-3 .ac_box > div p {font-size: var(--fontSize-n)}

.textani {opacity: 0; transition: all 1s ease}
.textani[eff=blur] {filter: blur(8px);}
.textani[role=up] {transform: translate(0) scale(0.7);}
.textani[delay=a] {transition-delay: 0.1s}
.textani[delay=b] {transition-delay: 0.2s}
.textani[delay=c] {transition-delay: 0.3s}
.textani[role=upro30] {transform: translate(0,2rem) rotate(-30deg);}
.textani.scrollon {opacity: 1; transform: translate(0) rotate(0deg) scale(1);filter: blur(0px);}


.moveTop {background:#fc2323; width: 100px; height: 100px; border-radius: 50%; position: absolute; bottom:-50px;left:50%; margin-left: -50px; text-align: center;}
.moveTop a span {color:#fff; font-size: var(--fontSize-xx)}

@keyframes hani {
  0% {height: 45vh}
  50% {height: 40vh}
  100% {height: 45vh}
}
@keyframes hani2 {
  0% {height: 40vh}
  50% {height: 45vh}
  100% {height: 40vh}
}

.sub-section {min-height: 100vh; position: relative;}
.sub-section > header {min-height: 50vh;display: flex;    align-items: flex-end;justify-content: flex-start; padding: var(--side-pd)}
.sub-section > header h2 {font-size: var(--fontSize-x); position: relative;}
.sub-section > header h2:before {content: ''; display: block; width: 8px; height: 24px; border-radius: 20px; background: #fc2323; position: absolute; top:0;left:0;transform: rotate(30deg) translate(-10px, -10px);}
/*.sub-section > header h2:after {content: '';display: block; width: 50px; height: 50px; border-radius: 50%; background: #fc2323; position: absolute; top:-30%;right:-10px; mix-blend-mode: screen; transition: all 0.4s ease}*/
.subImg1 {background: url(/asset/images/about.jpg) no-repeat 50% 50%; height: 50vh;overflow: hidden; position: relative; z-index: 3}
.subImg2 {background: url(/asset/images/bg1.jpg) no-repeat 50% 50%; height: 50vh}
.subImg3 {background: url(/asset/images/bg2.jpg) no-repeat 50% 50%; height: 50vh}
.subImg4 {background: url(/asset/images/bg3.jpg) no-repeat 50% 50%; height: 50vh}
.subImg5 {background: url(/asset/images/bg5.jpg) no-repeat 50% 50%; height: 50vh}

.sub-contents h2 {font-size: var(--fontSize-x); padding-bottom: var(--pd-n);font-weight: 100; letter-spacing: -0.08rem}
.sub-contents p {font-size: var(--fontSize-s); line-height: 1.4;color:#444;font-weight: 100;padding: 1rem 0}

.formArea {background:#fff; border-radius:1rem; padding:var(--pd-b)}
.formArea > div {padding-bottom:2rem}
.formArea > div > .label {font-size:1.6rem; padding-bottom:0.8rem}

.sub-set {background: #edefff; min-height: 100vh;padding:var(--pd-xx) var(--side-pd);position: relative ;z-index: 2;}
.sub-set.d {background: #141517}
.w {color:#fff}
.sub-set .ac_box {}
.sub-set .ac_box h3 {padding-bottom: 1rem; font-size: var(--fontSize-b)}
.sub-set .ac_box p {line-height: 1.4;color:#444;padding: 0}
.sub-set .ac_box i {
  --ani-sec:15s;
  display: block; text-align: center; padding: var(--pd-b) 0 1.8rem; border-radius: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(216deg, #1393ff, #fc2323);
  background-size: 400% 400%;

  -webkit-animation: changeBg var(--ani-sec) ease infinite;
  -moz-animation: changeBg var(--ani-sec) ease infinite;
  -o-animation: changeBg var(--ani-sec) ease infinite;
  animation: changeBg var(--ani-sec) ease infinite;
}
.sub-set .ac_box i span {font-size: var(--fontSize-xx); color:#fff; font-weight: 100;}
.sub-set .ac_box:nth-child(odd) i {
  --ani-sec:15s;
  background: linear-gradient(216deg, #fc2323, #1393ff);
  background-size: 400% 400%;

  -webkit-animation: changeBg var(--ani-sec) ease infinite;
  -moz-animation: changeBg var(--ani-sec) ease infinite;
  -o-animation: changeBg var(--ani-sec) ease infinite;
  animation: changeBg var(--ani-sec) ease infinite;
}
.inner {padding:0 var(--side-pd)}
.sub-contents .inner {padding:var(--pd-xxx) var(--side-pd)}
.circle {display: block; width: 200px;height: 200px; border-radius: 50%; background: #1393ff;position: fixed; left:-5vh; bottom: -400px;z-index: 1; mix-blend-mode: screen;
  animation: bubble 3s 0s ease infinite;}
  .circle.c-1 {left: 10vh;width: 200px;height: 200px; animation: bubble 4s 1s ease infinite;}
  .circle.c-2 {left: 15vh;width: 240px;height: 240px; animation: bubble 5.5s 1.5s ease infinite;}
  .circle.c-3 {left: 20vh;width: 180px;height: 180px; animation: bubble 5s 2s ease infinite;}
  .circle.c-4 {left: 30vh;width: 300px;height: 300px; animation: bubble 6s 1s ease infinite;}

  .prz1 {position: relative; z-index: 2; padding: 2rem 0}

.pc-col3 {display:flex; gap:4%; justify-content:flex-start;align-items: stretch; padding-top:20px; flex-wrap: wrap;}
.pc-col3 > article {width:48%}

@media screen and (min-width:980px){
  :root{
    --side-pd:50px;
  }
  .ac_box header,
  .nth-3 .ac_box > div {padding:1rem 2.8rem;}
  .pc-col3 {display:flex; gap:20px; justify-content:center;align-items: stretch; padding-top:20px; flex-wrap: nowrap;}
  .pc-col3 > article {width:360px;}
  .mainSlogan {padding:40px;max-width:920px}
  .mainSlogan h2 {font-size:100px}
  .main-section header p,
  .ac_box > div p,
  .sub-contents p {font-size:16px;}
  .bg-obj2 {transform:rotate(40deg) scale(1.6) translate(-20px,50px);}
  .main-section {padding:140px var(--side-pd)}
  .main-section header h2 {font-size:42px}
  .main-section .ac_box header h2 {font-size:24px}
  .ac_box .img {max-width:320px;}
}
@media screen and (max-width:639px){
  .pc-col3 > article {width:100%}
}

  @keyframes bubble {
    0% {transform: translateY(0px) scale(1.0); opacity: 1}
  /*25% {transform: translateY(-50px) scale(0.9); opacity: 0.7}
  50% {transform: translateY(-80px) scale(1.0); opacity: 0.5}
  75% {transform: translateY(-100px) scale(0.6); opacity: 0.2}*/
  100% {transform: translateY(-650px) scale(0); opacity: 1}
}


@-webkit-keyframes changeBg {
  0%{background-position:82% 0%}
  50%{background-position:19% 100%}
  100%{background-position:82% 0%}
}
@-moz-keyframes changeBg {
  0%{background-position:82% 0%}
  50%{background-position:19% 100%}
  100%{background-position:82% 0%}
}
@-o-keyframes changeBg {
  0%{background-position:82% 0%}
  50%{background-position:19% 100%}
  100%{background-position:82% 0%}
}
@keyframes changeBg {
  0%{background-position:82% 0%}
  50%{background-position:19% 100%}
  100%{background-position:82% 0%}
}

#progress-bg {
  content: '';
  background: #1393ff;
  top:0;
  left:0;
  width: 100%;
  position: fixed;
  z-index: 99998;
  height: 3px;
  display: block;
}
#progress {
  position: fixed;
  left: 0; top: 0;
  width: 0%; height: 3px;
  background: rgb(19,147,255);
  background: linear-gradient(90deg, rgba(19,147,255,1) 58%, rgba(252,35,35,1) 100%);
  z-index: 99999;
}

.sub-section {font-size: var(--fontSize-n)}
.allcenter {display: flex; justify-content: center;
    align-items: center; overflow: hidden;}
.allcenter > div.cc {position: relative; width: 100%}

.slick-arrow {position: absolute; top:50%; transform: translateY(-25px);z-index: 99; background: rgba(256,256,256,0.4);box-shadow: 0 0 8px rgba(50,50,53,0.2);border:0;border-radius: 50%; width: 50px; height: 50px; color:rgba(50,50,53,0.6); padding-top: 8px; font-size: 2.4rem;cursor: pointer; opacity: 0.5}
.slick-arrow:hover {opacity: 1}
.slick-prev {left: -22px}
 .slick-next {right: -22px}
 .slick-disabled {display: none !important;}
 .nth-2 .slick-arrow {color:rgba(256,256,256,0.6); }