:root {
  --pure-white: #ffffff;
  --main-color: #9a776f;
  --main-dark: #694e49;
  --main-light: #ffd7cd;
  --main-bg:#e3bcb3;
  --main-svgline:#ffe668;
  --font-en:'El Messiri', sans-serif;
}
.disclaimer{
 display: none !important;
}
html {
  color: var(--main-color);
  font-family: 'El Messiri','Noto Serif TC', serif !important;
  line-height: 1.5;
  background-color: var(--main-bg);
  overflow-y: overlay;
  overflow-x: hidden !important;
  transition: all linear 0.5s;
}
.htmlbg{
  background-color: #f1f1f1;
}
.htmlbg1{
  background-color: #ffb9b9;
}
.htmlbg2{
  background-color: #303030;
}
.htmlbg3{
  background: var(--main-color);
}
body{
  overflow-x: hidden;
}
/* add custom styling to the scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #00000000;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: var(--main-svgline);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--main-color);
}
/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .cck-overlay a {
     font-size: 20px
 }
  .cck-overlay .closebtn {
      font-size: 40px;
      top: 15px;
      right: 35px;
 }
}
/**/
:root {
  font-size: 16px 
}
@media (max-width: 500px) {
  :root {
      font-size: 14px 
 }
}
* {
  margin: 0px;
  padding: auto 0px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -msbox-sizing: border-box;
  cursor: default;
}

a,button{
  cursor: pointer;
}


h1 {
  font-size: 5rem 
}
h2 {
  font-size: 2rem 
}
ul {
  padding-left: 1rem;
  list-style: none;
}
header {
 height: 100vh
}
footer {
 height: 50vh
}
:any-link {
  color: var(--main-svgline);
}
.df {
 display: flex
}
.aic {
 align-items: center
}
.jcc {
 justify-content: center
}
.loader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--main-color);
  color: white;
  z-index: 999999;
 /* Sit on top */
}

.wrapper {
  display: flex;
}
.wrapper.text{
  padding-top: 20px;
  line-height: 1.0;
  font-size: clamp(50px, 10rem, 13rem);
  letter-spacing: 10px;
  white-space:nowrap;
}
.wrapper.text.outter{
  -webkit-text-stroke: 1.8px var(--pure-white);
  color: #00000000;
}
.demo-gallery:not(.last) {
  padding-bottom: 1rem;
}
/* cck */
.cck-row{
  display: flex;
  flex-wrap: wrap;
}
.cck-1{
  width: 10% !important;
}
.cck-2{
  width: 20% !important;
}
.cck-25-percent{
  width: 25% !important;
}
.cck-3{
  width: 30% !important;
}
.cck-4{
  width: 40% !important;
}
.cck-5{
  width: 50% !important;
}
.cck-6{
  width: 60% !important;
}
.cck-7{
  width: 70% !important;
}
.cck-8{
  width: 80% !important;
}
.cck-9{
  width: 90% !important;
}
.cck-10{
  width: 100% !important;
}
.cck-full-h{
  min-height: 100vh !important;
}
.cck-half-h{
  min-height: 100vh !important;
}
.cck-block{
  margin: 30px;
  vertical-align: middle;
}
.cck-img{
  margin: 10px 15px;
  width: 30vw;
  min-width: 250px;
  border: 2rem solid var(--pure-white);
  border-bottom: 8rem solid var(--pure-white);
  box-shadow: 0px 8px 25px -8px #00000041;
}
.-light-bg{
  background-color: var(--main-light);
}
.-bg-bg{
  background: var(--main-bg);
}
.cck-scroll-container{
  white-space: nowrap;
  padding: 5px 70px 5px 20px;
  background: transparent;
  height: 100%;
  border-radius:15px;
}
.cck-gridscroll{
  display:inline-block;
}
.cck-gridscroll img {
  margin-right:15px;
}
.cck-logo{
  margin-top: 15px;
  width: 2rem;
  min-width: 40px;
}

.cck-web-logo{
  position: fixed;
  left: 15px;
  margin-top: 15px;
  padding: 13px 14px;
  padding-top: 14px;
  width: 60px;
  border: 2px solid var(--main-color);
  background: var(--main-bg);
  border-radius: 50px;
  line-height: 1.0;
  z-index: 1050;
}

.cck-bling{
  position:fixed;
  padding: 0px 10px;
  width: 50px;
  min-width: 20px;
  border-radius: 100px;
  animation: cck-pulse 1500ms linear infinite;
}
.cck-bling.a {
  padding: 0px 19px;
  width: 110px;
  top: 42vh;
  right: 2vw;
  z-index: 1020;
}
.cck-bling.b{
  padding: 0px 10px;
  width: 50px;
  top: 24vh;
  right: 26vw;
  z-index: 1030;
}
.cck-bling.c{
  padding: 0px 10px;
  width: 50px;
  top: 74vh;
  right: 11vw;
  z-index: 1030;
}
.cck-bling.d{
  padding: 0px 16px;
  width: 84px;
  top: 31vh;
  left: 6vw;
  z-index: 1031;
}
.cck-bling.e{
  padding: 0px 10px;
  width: 50px;
  top: 7vh;
  left: 20vw;
  z-index: 1020;
}
.cck-bling.f{
  padding: 0px 10px;
  width: 50px;
  top: 98vh;
  left: 49.5vw;
  z-index: 0;
}
.ig-block{
  padding: 100px;
  position: relative;
  display: block;
}
.cck-p{
  margin-top: 30px;
  padding-left: 30px;
  border-left: 1px solid var(--main-color);
  font-size: 1.5em;
  letter-spacing: 5px;
  color: var(--main-color);
  z-index: 1050s;
}
/* The Overlay (background) */
.cck-overlay {
 /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: 0%;
  width: 100%;
  position: fixed;
 /* Stay in place */
  z-index: 999999;
 /* Sit on top */
  left: 0;
  top: 0;
  color:var(--pure-white);
  background-color: var(--main-color);
 /* Black fallback color */
  overflow-y: hidden;
 /* Disable horizontal scroll */
  overflow-x: hidden;
 /* Disable horizontal scroll */
  transition: 0.5s;
 /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
/* Position the content inside the overlay */
.cck-overlay-content {
  position: relative;
  top: 25%;
 /* 25% from the top */
  width: 100%;
 /* 100% width */
  color:var(--pure-white);
  text-align: center;
 /* Centered text/links */
  overflow-y: hidden;
 /* Disable horizontal scroll */
  overflow-x: hidden;
 /* Disable horizontal scroll */
  margin-top: 30px;
 /* 30px top margin to avoid conflict with the close button on smaller screens */
}
/* The navigation links inside the overlay */
.cck-overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color:var(--pure-white);
  letter-spacing: 5px;
  font-style: italic;
  display: block;
 /* Display block instead of inline */
  transition:all ease 0.3s;
 /* Transition effects on hover (color) */
}
/* When you mouse over the navigation links, change their color */
.cck-overlay a:hover, .cck-overlay a:focus {
  color:var(--main-light);
  letter-spacing: 8px;
}
/* Position the close button (top right corner) */
.cck-overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
  font-style: normal;
}
.ccktextsection{
  margin-top: 15px;
  padding: 15px 0px;
  line-height: 1.0;
  color: var(--main-color);
}
.cck-border-full{
  border: 1px solid var(--main-color);
}
.cck-border-up-down{
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}
.cck-info{
  padding-top: 8vh;
  height: 100vh;
  text-align: center;
  background-attachment:fixed;
  background-image:linear-gradient(0deg, currentColor 0px, currentColor 0.6px, transparent 0, transparent 80%);
  background-size:5px 5px;
  z-index: 0;
}
.cck-main-pattern{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000 !important;
}
.cck-main-title{
  position: absolute;
  top: 53.5vh;
  left: 7.5vw;
  font-size: clamp(1.0rem, 10vw, 10rem);
  line-height: 1;
  font-weight: 900;
  z-index: 1025;
  letter-spacing: 20px;
}
.cck-main-title::after{
  mix-blend-mode: difference;
}
.cck-left-title{
  position: absolute;
  top: 42vh;
  left: -192px;
  color: var(--main-dark);
  line-height: 1;
  font-size: 18px;
  letter-spacing: 20px;
  transform: rotate(270deg);
  z-index: 1028;
}

.cck-left-title .left-title-text::before, .cck-left-title .left-title-text::after{
  content: ' ';
  line-height: 1;
  min-width: 50px;
  border-top:1px solid var(--main-color);
  display: inline-block;
}
.cck-main-pic{
  position: absolute;
  margin-top: 3vh;
  height: 75vh;
  min-height: 500px;
  width: 30%;
  right: 35%;
  left: 35%;
  border: 8px solid var(--main-color);
  border-radius: 500px;
  background-attachment: fixed ;
  background: url("../images/main.jpg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
  z-index: 1021;
}

.cck-his-block img:hover {
  transform: rotateX(20deg) rotateY(-20deg);
}
.cck-his-block img:hover ~ .cck-his-block img:before {
  transform: translateY(20%);
}


.cck-thatpeople-pic{
  position: absolute;
  top: 33vh;
  right: 32%;
  width: 20vw;
  min-width: 250px;
  z-index: 1023;
  filter: contrast(80%);
  display: none;
}
.cck-header-svg{
  position: absolute;
  top: 60vh;
  right: 30vw;
  width: 10vw;
  z-index: 1024;
  animation: rotation 8s infinite linear;
}
.cck-header-svg.dot{
  margin-top: -2vw;
  width: 3vw;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1024;
  animation: none;
}
.ccksvg {
  position: absolute;
  top: 25vh;
  right: 5vw;
  width: 35vw;
  stroke:#fff4bc;
  z-index: 1021;
}
.cckpath {
  mix-blend-mode:color-dodge;
  stroke-dasharray: 1000;
  stroke-dashoffset: 0;
  animation: dash 7s linear;
}

.cck-bg.history1{
  background-attachment: fixed;
  background: linear-gradient(0deg, var(--main-bg) 0%, rgba(225, 225, 225, 0.4) 25%, rgba(225, 225, 225, 0.4) 75%, var(--main-bg) 100%), url("../images/2020_1.jpeg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
}
.cck-bg.history2{
  background-attachment: fixed;
  background: linear-gradient(0deg, var(--main-bg) 0%, rgba(225, 225, 225, 0.4) 25%, rgba(225, 225, 225, 0.4) 75%, var(--main-bg) 100%), url("../images/2021_1.jpeg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
}
.cck-bg.history3{
  background-attachment: fixed;
  background: linear-gradient(0deg, var(--main-bg) 0%, rgba(225, 225, 225, 0.4) 25%, rgba(225, 225, 225, 0.4) 75%, var(--main-bg) 100%), url("../images/2022_1.jpeg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
}
.cck-story-info{
  min-height: 100vh;
}
.cck-story-content{
  position: relative;
  display: flex;
}
.cck-story-content .cck-logo{
  position: absolute;
  top: 15vh;
  left: 24%;
  z-index: 1025;
}
.cck-story-content .cck-p{
  position: absolute;
  top: 20vh;
  left: 24%;
  z-index: 1025;
}
.cck-story-content .cck-img{
  position: absolute;
  top: 10vh;
  right: 24%;
  z-index: 1024;
  transform: rotate3d(1, 1, 1, 0deg);
  transition: all linear 0.5s;
}
.cck-story-content .cck-img.inView{
  top: 5vh;
  transform: rotate3d(0.5, 1, 0.2, 50deg) !important;
}
.cck-history-info{
  min-height: 100vh;
  min-width: auto;
}
.cck-hiscontainer {
  width: 100%;
  height: 100vh;
  display: initial;
}
.cck-his-block{
  min-width: 100vw;
  padding: 30px;
  padding-top: 15vh;
  text-align: left;
  display: flex;
}

.his-title{
  font-size: 3rem;
}

.cck-his{
  position:relative;
  padding-top:15px;
  padding-left: 30px;
}
.his-year{

  margin:40px 0px;
  line-height: 1.0;
  letter-spacing: 5px;
  border-radius: 50px;
  font-size: clamp(16px, 2rem, 72px) ;
  text-align: center;
  display: block;
}

.his-year label{
  padding: 10px 20px;
  padding-top: 15px;
  width: auto;
  color: var(--main-color);
  background: var(--pure-white);
  box-shadow: 0px 8px 25px -8px #9a776f40;
  border-radius: 50px;
  text-align: center;
}

.his-content{
  margin-top: 80px;
 /* font-size: clamp(16px, 2rem, 48px) ;
  */
  color: var(--main-color);
  line-height: 1.5;
  letter-spacing: 5px;
  text-align: left;
  display: inline-block;
}
.his-img{
  width: 80%;
  min-width: 250px;
  border-radius: 10px;
  box-shadow: 0px 46px 35px -20px #22222240;
}

.cck-apply-block{
  min-height: 100vh;
  width: 100vw;
}
.cck-apply-block.applybg1{
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(0deg, var(--main-bg) 0%, #e3bcb399 50%, var(--main-bg) 100%),url("../images/applybg1.jpg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
}
.cck-apply-block.applybg2{
  top: 0;
  left: 0;
  min-width: 100vw;
  min-height: 100vh;
  background: linear-gradient(0deg, var(--main-bg) 0%, #e3bcb399 50%, var(--main-bg) 100%),url("../images/applybg2.jpg");
 /* The image used */
  background-position: center;
 /* Center the image */
  background-repeat: no-repeat;
 /* Do not repeat the image */
  background-size: cover;
 /* Resize the background image to cover the entire container */
}

.apply-title{
  margin-top: 8vh;
  color:var(--main-color);
  text-align: center;
  font-size: clamp(16px, 5rem, 150px) ;
  font-style: italic;
  letter-spacing: 10px;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}
.apply-title i{
  opacity: 0.6;
  font-size: clamp(12px, 3rem, 100px) ;
}

.cck-step-block{
  margin: 30px;
  padding: 30px;
  min-height: 100%;
  color: var(--pure-white);
  background: rgba(0, 0, 0, 0.1);
  box-shadow: 0px 30px 30px -10px #00000030;
  border-radius: 10px;
  text-align: center;
  font-size: clamp(16px, 1.5rem, 20px) ;
  line-height: 2.0;
  letter-spacing: 5px;
}

.cck-step-block i{
  margin: 45px 0px;
  color:var(--main-light);
  font-size: clamp(12px, 15rem, 80px) ;
}

.cck-step-block .step-title{
  padding-bottom: 30px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--main-bg);
}

.cck-step-block .step-content{
  padding-top: 30px;
  width: 100%;
  text-align: left;
  font-size: clamp(16px, 1.2rem, 16px) ;
}

.p-subt{
  padding-top: 15px;
  text-align: center;
  letter-spacing: 10px;
}
.circle-number{
  margin-right: 15px;
  padding: 0px 0px 0px 5px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  color: var(--pure-white);
  border:1px solid var(--pure-white);
  text-align: center;
  display: inline-block;
}
.cck-endslogan-block{
  position: relative;
  min-height: 150vh;
  overflow-x:hidden;
  overflow-y:hidden;
}
.endslogan-title{
  margin-top: 10vh;
  margin-bottom: 5vh;
  width: 100%;
  text-align: center;
  font-size: clamp(16px, 5rem, 150px) ;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: 30px;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
}
.endslogan-title.white{
  margin-top: 5vh;
  margin-bottom: 10vh;
  width: 100%;
  text-align: center;
  font-size: clamp(20px, 7rem, 180px) ;
  color: var(--pure-white);
  -webkit-text-stroke: 1.8px var(--main-color);
 /* width and color */
}
.cck-footer-block{
  position: relative;
  min-width: 100vw;
  min-height: 100vh;
  padding: 10vh 5vw;
  color: var(--pure-white);
  display: block;
}
.cck-footer-Link{
  padding: 10px 0px;
  color: var(--pure-white);
  outline: none;
  text-decoration: none;
  font-size: 18px ;
  line-height: 1.2;
  letter-spacing: 5px;
  display: block;
}
.cck-footer-block a{
  padding-top: 7px;
  padding-left: 10px;
  color: var(--pure-white);
  outline: none;
  text-decoration: none;
  line-height: 1.0;
  border-left:1px solid var(--main-color);
  transition: all linear 0.2s;
}
.cck-footer-block a:hover{
  color: var(--main-light);
  outline: none;
  text-decoration: none;
  border-left:15px solid var(--main-light);
}
.cck-footer-title{
  margin: 10px;
  margin-top: 30px;
  padding-bottom: 15px;
  color: var(--main-light);
  font-size: 24px ;
  letter-spacing: 5px;
  border-bottom:1px solid var(--main-bg);
}
.cck-footer-title i{
  font-size: 32px;
}
.cck-footer-Link i{
  min-width: 30px;
}
.cck-footer-title img{
  width: 80px;
  height: 80px;
  border-radius: 26px;
  float: right;
  margin-right: -5px;
  margin-top: -12px;
  border:2px solid var(--main-color);
}
#pariod{
  filter: contrast(75%);
}

#ball {
  width: 50px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffe66870;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1055;
  filter: blur(0px);
  display: none;
  transition: all linear 0.5s;
  transition-property: filter, width, height;
}

#ball.active{
  width: 350px;
  height: 350px;
  background: #fff4bc80;
  filter: blur(100px);
}

#ball.active2{
  width: 550px;
  height: 550px;
  background: var(--main-bg);
  filter: blur(200px);
}
.cck-gobacktotop{
  position: fixed;
  margin: auto;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  color:var(--main-color);
  background: var(--main-bg);
  border: 2px solid var(--main-color);
  border-radius: 50px;
  text-align: center;
  animation: cck-pulse2 1500ms linear infinite;
  z-index: 1040;
}
.cck-gobacktotop i{
  line-height: 2.3;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
  pointer-events: none;
}

.cck-glass{
  background: var(--main-color);
/*   -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px); */
}

/*//////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/* Mobile Devices */
@media (max-width: 480px) {
  #pariod{
      display: none;
 }
  .wrapper.text {
      padding-top: 10px;
      line-height: 1.0;
      font-size: 16px;
      letter-spacing: 5px;
 }
  .cck-row {
      display: block;
 }
  .cck-1{
      min-width: 100% !important;
 }
  .cck-2{
      min-width: 100% !important;
 }
 .cck-25-percent{
  width: 100% !important;
}
  .cck-3{
      min-width: 100% !important;
 }
  .cck-4{
      min-width: 100% !important;
 }
  .cck-5{
      min-width: 100% !important;
 }
  .cck-6{
      min-width: 100% !important;
 }
  .cck-7{
      min-width: 100% !important;
 }
  .cck-8{
      min-width: 100% !important;
 }
  .cck-9{
      min-width: 100% !important;
 }
  .cck-10{
      min-width: 100% !important;
 }
  .cck-p{
      font-size: 16px;
      letter-spacing: 1px;
 }
  .cck-header-svg{
      top: 67vh;
      right: 5vw;
      width: 30vw;
 }
  .cck-thatpeople-pic{
      position: absolute;
      top: 145px;
      right: calc(-1vw - 1px);
      width: 445px;
      z-index: 1023;
      filter: contrast(80%);
      display: block;
 }
  .cck-main-title{
      left: 25%;
      font-weight: 900;
      letter-spacing: 10px;
      mix-blend-mode:normal;
      color: var(--pure-white);
 }
  .cck-main-pic{
      width: 78%;
      right: 11%;
      left: 11%;
      border: 5px solid var(--main-color);
 }
  .cck-left-title {
      top: 46vh;
      left: -208px;
 }
  .ccksvg {
      top: 61vh;
      right: 23vw;
      width: 50vw;
      stroke-width:1px;
      transform: rotate(-6deg);
      z-index: 1028;
      stroke:var(--main-svgline);
 }
  .cckpath {
      mix-blend-mode:normal;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear infinite;
 }
  .cck-story-info{
      width: auto;
      min-height: unset;
 }
  .cck-story-content .cck-logo{
      position: absolute;
      top: 8vh;
      left: 1vh;
      z-index: 1030;
 }
  .cck-story-content .cck-p{
      position: sticky;
      margin-top: 8vh;
      padding: 30px 20px;
      min-width: 100%;
      top: unset;
      left: unset;
      font-size: 18px;
      color: var(--main-dark);
      background-attachment: fixed;
      background: linear-gradient(180deg, rgba(225, 225, 225, 0.7) 0%, var(--main-bg) 100%), url("../images/2022ps/bg/bg4.jpg");
     /* The image used */
      background-position: center;
     /* Center the image */
      background-repeat: no-repeat;
     /* Do not repeat the image */
      background-size: cover;
     /* Resize the background image to cover the entire container */
      border:30px solid var(--pure-white);
      border-bottom:120px solid var(--pure-white);
      box-shadow: 0px 8px 25px -8px #00000041;
 }
  .cck-story-content .cck-img{
      position: absolute;
      top: 10%;
      right: 5%;
      transform: none !important;
 }
  .cck-story-content .cck-img.inView{
      opacity: 1;
      transform: none !important;
 }
  .cck-his-block {
      padding-top: 12vh;
      display: block;
 }
  .cck-his{
      padding-left: 0;
 }
  .his-year label{
    color: var(--main-color);
    background: var(--main-bg);
    box-shadow: 8px 8px 25px -8px #9a776f70,-8px -8px 25px -8px #ffe4de80;
  }
  .his-content {
      margin-top: 20px;
      margin-left: 4rem;
      min-width: 100%;
      font-size: 16px;
      display: inline-block;
 }
  .his-img {
      width: 65%;
      min-width: unset;
      border-radius: 10px;
 }
  .apply-title{
      margin-top: 8vh;
      padding-left: 0;
      font-size: 40px;
      text-align: center;
 }
  .endslogan-title{
      font-size: 48px;
      line-height: 1.2;
      letter-spacing: 10px;
 }
  .endslogan-title.white{
      font-size: 60px;
 }
 .cck-step-block i{
  font-size: clamp(12px, 15rem, 60px) ;
}
.cck-step-block .step-content{
  font-size: 12px;
}
}
/* Low resolution Tablets and iPads */
@media (min-width: 481px) and (max-width: 767px) {
  #pariod{
      display: none;
 }
  .wrapper.text {
      padding-top: 15px;
      line-height: 1.0;
      font-size: 36px;
      letter-spacing: 8px;
 }
  .cck-row {
      display: block;
 }
  .cck-1{
      min-width: 100% !important;
 }
  .cck-2{
      min-width: 100% !important;
 }
 .cck-25-percent{
  width: 100% !important;
}
  .cck-3{
      min-width: 100% !important;
 }
  .cck-4{
      min-width: 100% !important;
 }
  .cck-5{
      min-width: 100% !important;
 }
  .cck-6{
      min-width: 100% !important;
 }
  .cck-7{
      min-width: 100% !important;
 }
  .cck-8{
      min-width: 100% !important;
 }
  .cck-9{
      min-width: 100% !important;
 }
  .cck-10{
      min-width: 100% !important;
 }
  .cck-p{
      font-size: 16px;
      letter-spacing: 3px;
 }
  .cck-header-svg{
      top: 67vh;
      right: 4vw;
      width: 30vw;
 }
  .cck-thatpeople-pic{
      position: absolute;
      top: 145px;
      right: calc(-1vw - 1px);
      width: 445px;
      z-index: 1023;
      filter: contrast(80%);
      display: block;
 }
  .cck-main-title{
      left: 25%;
      font-weight: 900;
      letter-spacing: 10px;
      mix-blend-mode:normal;
      color: var(--pure-white);
 }
  .cck-main-pic{
      width: 60%;
      right: 20%;
      left: 20%;
      border: 5px solid var(--main-color);
 }
  .ccksvg {
      top: 61vh;
      right: 23vw;
      width: 50vw;
      stroke-width:1px;
      transform: rotate(-6deg);
      z-index: 1028;
      stroke:var(--main-svgline);
 }
  .cckpath {
      mix-blend-mode:normal;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: dash 10s linear infinite;
 }
  .cck-story-info{
      width: auto;
      min-height: unset;
 }
  .cck-story-content .cck-logo{
      position: absolute;
      top: 8vh;
      left: 1vh;
      z-index: 1030;
 }
  .cck-story-content .cck-p{
      position: relative;
      margin-top: 8vh;
      padding: 30px 20px;
      min-width: 100%;
      top: unset;
      left: unset;
      font-size: 18px;
      color: var(--main-dark);
      background-attachment: fixed;
      background: linear-gradient(180deg, rgba(225, 225, 225, 0.7) 0%, var(--main-bg) 100%), url("../images/2022ps/bg/bg4.jpg");
     /* The image used */
      background-position: center;
     /* Center the image */
      background-repeat: no-repeat;
     /* Do not repeat the image */
      background-size: cover;
     /* Resize the background image to cover the entire container */
      border:30px solid var(--pure-white);
      border-bottom:120px solid var(--pure-white);
      box-shadow: 0px 8px 25px -8px #00000041;
 }
  .cck-story-content .cck-img{
      position: absolute;
      top: 10%;
      right: 5%;
      transform: none !important;
 }
  .cck-story-content .cck-img.inView{
      opacity: 1;
      transform: none !important;
 }
  .cck-his-block {
      padding-top: 12vh;
      display: block;
 }
  .cck-his{
      padding-left: 0;
 }
 .his-year label{
  color: var(--main-color);
  background: var(--main-bg);
  box-shadow: 8px 8px 25px -8px #9a776f70,-8px -8px 25px -8px #ffe4de80;
}
  .his-content{
      margin-top: 20px;
      margin-left: 6rem;
      min-width: 100%;
      font-size: 18px;
      display: inline-block;
 }
  .his-img{
      max-width: 350px;
 }
  .apply-title{
      margin-top: 8vh;
      padding-left: 0;
      font-size: 40px;
      text-align: center;
 }
  .endslogan-title{
      font-size: 48px;
      line-height: 1.2;
      letter-spacing: 10px;
 }
  .endslogan-title.white{
      font-size: 60px;
 }
}
/* Tablets iPads (Portrait) */
@media (min-width: 768px) and (max-width: 1024px){
   .cck-row {
      display: block;
 }
  .cck-1{
      min-width: 20% !important;
 }
 .cck-25-percent{
  width: 100% !important;
}
  .cck-2{
      min-width: 50% !important;
 }
  .cck-3{
      min-width: 100% !important;
 }
  .cck-4{
      min-width: 50% !important;
 }
 .cck-main-pic{
  width: 60%;
  right: 20%;
  left: 20%;
  border: 5px solid var(--main-color);
 }
 .cck-header-svg {
  top: 73vh;
  right: 20vw;
  width: 25vw;
  animation: rotation 8s infinite linear;
}
  .cck-his-block {
      padding-top: 12vh;
      display: block;
 }
  .cck-his{
      padding-left: 0;
 }
 .his-year label{
  color: var(--main-color);
  background: var(--main-bg);
  box-shadow: 8px 8px 25px -8px #9a776f70,-8px -8px 25px -8px #ffe4de80;
}
  .his-content{
      margin-top: 20px;
      margin-left: 10rem;
      min-width: 100%;
      font-size: 1.5rem;
      display: inline-block;
 }
  .his-img{
      max-width: 350px;
 }
 .cck-step-block i{
  font-size: clamp(12px, 15rem, 60px) ;
}
.cck-step-block .step-content{
  font-size: 12px;
}
}
/* Laptops and Desktops */
@media screen and (min-width: 1025px) and (max-width: 1280px){
  .cck-1{
      min-width: 20% !important;
 }
  .cck-2{
      min-width: 50% !important;
 }
  .cck-3{
      min-width: 50% !important;
 }
  .cck-4{
      min-width: 50% !important;
 }
  .cck-header-svg {
      top: 71vh;
      right: 23vw;
      width: 16vw;
      animation: rotation 8s infinite linear;
 }
  .cck-hiscontainer {
      min-width: 300%;
      height: 100vh;
      display: flex;
      flex-wrap: nowrap;
 }
 .his-year label{
  color: var(--main-color);
  background: var(--main-bg);
  box-shadow: 8px 8px 25px -8px #9a776f70,-8px -8px 25px -8px #ffe4de80;
}
  .his-content {
      margin-top: 20px;
      margin-left: 20px;
      min-width: 100%;
      font-size: 1.5rem;
      display: inline-block;
 }
  .cck-main-pic {
    width: 50%;
    right: 25%;
    left: 25%;
 }
  .apply-title {
      margin-top: 12vh;
      font-size: 60px;
 }
  .his-img{
      max-width: 500px;
 }
  .cck-bg.story{
      background-attachment:fixed;
      background: linear-gradient(180deg, rgba(225, 225, 225, 0.7) 0%, var(--main-bg) 100%), url("../images/2022ps/bg/bg4.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
 }
 #ball {
  display: unset;
}
}
/* Big boi Monitors */
@media screen and (min-width: 1281px) {
  .his-content {
      margin-top: 80px;
      font-size: 1.5rem;
      color: var(--main-color);
      line-height: 1.5;
      letter-spacing: 5px;
      text-align: left;
      display: inline-block;
 }
  .cck-hiscontainer {
      min-width: 300%;
      height: 100vh;
      display: flex;
      flex-wrap: nowrap;
 }
  .his-img{
      max-width: 500px;
 }
  .cck-bg.story{
      background-attachment:fixed;
      background: linear-gradient(180deg, rgba(225, 225, 225, 0.7) 0%, var(--main-bg) 100%), url("../images/2022ps/bg/bg4.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
 }

 #ball {
  display: unset;
}
}