/* ==========================================================================
   Global styles
   ========================================================================== */

html { font-size: 62.5%; }
body { font-size: 10px; font-size: 1.0rem; overflow-x: hidden; }
li   { font-size: 14px; font-size: 1.4rem; }

h1, h2, h3, h4, h5, h6, p, .btn, .navbar-nav a, .form-control, .list-inline, small, #pricing {
  font-family: 'Montserrat', sans-serif;
}

p, .lead {
	font-family: 'Raleway', sans-serif;
}

h1 {
  font-size: 55px;
  line-height: 55px;
  letter-spacing: -1px;
  color: #ffffff;
  font-weight: 700;
}

h2 {
  font-size: 3.4rem;
  line-height: 40px;
  letter-spacing: -0.5px;
  color: #ffffff;
  font-weight: 700;
}

h3 {
  font-size: 2rem;
  line-height: 30px;
  letter-spacing: 0px;
  color: #231f20;
  font-weight: 700;
}


p {
  font-size: 1.2rem;
  line-height: 2rem;
  color: #929496;
  font-weight: 400;
}

/*------------------Utilities---------------------*/
a {
  color: inherit;
  font-weight: inherit;
  font-size: inherit;
  text-decoration: none;
}

a:hover, a:focus {
  text-decoration: none;
  color: #231f20;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -10%;
}

::selection {
	background: #231f20; /* Safari */
	color: #FFFFFF;
}
::-moz-selection {
	background: #231f20; /* Firefox */
	color: #FFFFFF;
}



/*------------------Buttons---------------------*/
.btn:focus {
  outline: 0px auto -webkit-focus-ring-color;
  outline: none;
}

.btn {
  text-transform: uppercase;
  border-radius: 4px;
  border: none;
}

.btn-lg {
  font-size: 13px;
  line-height: 1.33;
  padding: 22px 30px;
  font-weight: 400;
  letter-spacing: 1px;
}

.btn-sm {
  font-size: 11px;
  line-height: 1.33;
  padding: 10px 18px;
  font-weight: 400;
}

.btn-wide {
  width: 100%;
  font-size: 13px;
  line-height: 1.33;
  padding: 18px 28px;
  font-weight: 400;
  letter-spacing: 1px;
}

.btn-primary {
  background-color:#ab94e4;
  color: #ffffff;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: #8be2e5;
  color: #ffffff;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}

.btn-secondary {
  background-color: #ffffff;
  color: #231f20;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active {
  background-color: #ededed;
  color: #231f20;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}


/*-----------------Margins------------------*/
.margin-0 {
    margin-bottom: 0 !important;
}
.margin-10 {
    margin-bottom: 10px !important;
}
.margin-15 {
    margin-bottom: 15px !important;
}
.margin-20 {
    margin-bottom: 20px !important;
}
.margin-30 {
    margin-bottom: 30px !important;
}
.margin-40 {
    margin-bottom: 40px !important;
}
.margin-50 {
    margin-bottom: 50px !important;
}
.margin-60 {
    margin-bottom: 60px !important;
}
.margin-70 {
    margin-bottom: 70px !important;
}
.margin-80 {
    margin-bottom: 80px !important;
}
.margin-90 {
    margin-bottom: 90px !important;
}
.margin-100 {
    margin-bottom: 100px !important;
}
.mt-20 {
  margin-top: 20px;
}
.mt-30 {
  margin-top: 30px;
}
.mt-50 {
  margin-top: 50px;
}
.inline-block {
  display: inline-block;
}

@media (max-width: 480px) { 
  .mt-20-sp {
    margin-top: 20px;
  }
}

/*-----------------Colors------------------*/

.black {
  color: #231f20;
}

.blue {
  color: #70cbce;
}

.white {
  color: #ffffff;
}

.black-bg {
  background: #231f20;
}

.blue-bg {
  background: #ab94e4;
}

.white-bg {
  background: #ffffff;
}

.purple-bg {
	background: #6d3f96;
}



/* ==========================================================================
   Nav Styles
   ========================================================================== */

.navbar {
    border: 0px solid rgba(0, 0, 0, 0);
    margin: auto;
    min-height: 60px;
    padding-top: 8px;
    position: fixed;
    top: -60px;
    transition: top 0.4s ease 0s;
    
  /* background: -moz-linear-gradient(left, #753fa9 0%, #ff0762 100%);
  background: -webkit-linear-gradient(left, #753fa9 0%, #ff0762 100%);
  background: linear-gradient(to right, #753fa9 0%, #ff0762 100%); 
  animation: huerotator 10s infinite alternate;*/
  background: -moz-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: -webkit-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: linear-gradient(to right,  rgba(255,201,38,0.8) 0%,rgba(255,147,38,0.8) 100%);
  

}

.navbar.open {
    top: 0;
}

.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
      color: #333;
    font-size: 14px;
    letter-spacing: 1px;
}

.navbar-inverse .navbar-nav > li > a:hover {
    color: #ffffff;
    opacity: 0.6;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 10px;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
    border-color: rgba(255,255,255,0.2);
}

.navbar-inverse .navbar-toggle {
    border-color: transparent;
}

.navbar .logo img{
  width: 41%;
  margin-top: 6px;
    }


/* ==========================================================================
   Main styles
   ========================================================================== */
header {
  
  width: 100%;
  padding: 20px 10px 60px 10px;
  /* height: 100vh; */
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background: url(../img/Bg_web.png) bottom left,-moz-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: url(../img/Bg_web.png) bottom left,-webkit-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: url(../img/Bg_web.png) bottom left,linear-gradient(to right, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  /* animation: huerotator 10s infinite alternate; */
  background-size:70%,cover,cover;
  background-repeat: no-repeat;


}

@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(100deg);
    filter: hue-rotate(100deg);
  }
}



hr{
  background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
  opacity: 0.5;
  animation: huerotator 1s infinite alternate;
}

@keyframes huerotator {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }

  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }


}

.header-info {
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  margin-left: 0px;
  margin-bottom: 12%;
}

.signin {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 9px;
}


.mouse-icon {
    border: 2px solid #fff;
    border-radius: 16px;
    display: block;
    height: 50px;
    margin: -100px auto 50px;
    position: relative;
    width: 30px;
    z-index: 10;
}
.mouse-icon .scroll {
    animation-delay: 0s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-name: scrolling;
    animation-play-state: running;
    animation-timing-function: linear;
}
.mouse-icon .scroll {
    background: #fff none repeat scroll 0 0;
    border-radius: 10px;
    height: 10px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top: 4px;
    width: 4px;
}
@keyframes scrolling {
0% {
    opacity: 0;
    top: 5px;
}
30% {
    opacity: 1;
    top: 10px;
}
100% {
    opacity: 0;
    top: 25px;
}
}

.pad-xl {
	padding: 100px 0px;
}

.pad-lg {
	padding: 160px 0px;
}

.pad-sm {
	padding: 80px 0px;
}

.pad-xs {
	padding: 30px 0px;
}

/* #be-the-first {
  background: url(../img/be-the-first-bg.jpg) #231f20 no-repeat center center fixed;
  min-height: 300px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
} */

hr.line {
	width: 100%;
	border: 2px solid;
}

.purple {
	border-color: #6d3f96;
	color: #6d3f96;
}

.blue {
	border-color: #70cbce;
	color: #70cbce
}

.yellow {
	border-color: #fdc05d;
	color: #fdc05d;
}

.iphone {
    position: relative;
    height: 230px;
}
@media (max-width: 480px) { 
  .iphone {
    height: 190px;
  }
}
.iphone img {
    margin: 0 auto;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 440px;
}


#invite {
  padding: 6% 0;
}

.fa-envelope-o {
  color: #4ec3cd;
  font-size: 22px;
  display: block;
  padding-top: 15px;
  width: 60px;
  height: 60px;
  border: 2px solid #4ec3cd;
  -moz-border-radius: 30px;
  -o-border-radius: 30px;
  -webkit-border-radius: 30px;
  border-radius: 30px;
  margin: auto;
}

.news-container {
  padding: 10px 0px 20px;
  border-bottom: 1px dotted #d9d9d9;
}

.news-img {
  padding-right: 20px;
}

footer {
  background: #ffffff;
  padding: 40px 0px;
}

.social li a:hover {
  opacity: 0.5;
}

.notes {
  font-size: 1.2rem;
  color: #000;
}
/*---------------Pricing Tables-------------------*/


#pricing {
  background: #fff7fc;
  padding: 4% 0 3% 0;
}

.pricing-container {
  padding-left: 0px;
  padding-right: 0px;
}

.pricing-table {
  background: transparent;
  margin-bottom: 50px;
  margin-top: 0px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.pricing-table.active {
  box-shadow: 0px 0px 12px rgba(41,46,50,0.6); 
  position: absolute;
  margin: auto;
  z-index: 200;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.pricing-table:hover {
  margin-top: -10px;
  -webkit-transition: all 0.25s ease-in-out;
  -moz-transition: all 0.25s ease-in-out;
  -o-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}

.pricing-table li {
  padding-left: 20px;
  padding-right: 20px;
}

.headline {
  background: #231f20;
  color: #FFFFFF;
  padding: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.price {
    background: none repeat scroll 0 0 #565656;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 30px;
}
.price .sm {
  display: block;
  font-size: 50%;
  font-weight: normal;
}
.pricing-table  li{
    font-weight: 100;
}

.pricing-table:hover li.price  {
  background: #303236;
  -webkit-transition: all 0.85s ease-in-out;
  -moz-transition: all 0.85s ease-in-out;
  -o-transition: all 0.85s ease-in-out;
  transition: all 0.85s ease-in-out;
}

.price small {
  font-weight: 300;
  color: #929496;
}

.info {
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 300;
  font-size: 13px;
  color: #929496;
  background: #ffffff;
}

.features {
  display: flex;
  align-items: center;
  color: #231f20;
  font-weight: bold;
  padding-top: 12px;
  padding-bottom: 15px;
  border-bottom: 1px dotted #E8EAEA;
  background: #ffffff
}
.features .bgRound {
  flex-shrink: 0;
}

.features.first {
  border-top: 1px dotted #E8EAEA;
}

.features.last {
    padding-top: 47px;
    padding-bottom: 50px;
}
.features.last a {
    /* border: 2px solid #000; */
    color: #ffffff;
    border-radius: 7px;
    background-color: #000;
    font-size: 14px;
    padding: 1% 4%;
    letter-spacing: 1px;
}

.pricing-container .btn {
    border-radius: 0;
}




/* ==========================================================================
   Form styles
   ========================================================================== */
.form-control {
    background-color: #FFFFFF;
    background-image: none;
    border: 0px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    color: #929496;
    display: block;
    font-size: 15px;
    height: 60px;
    line-height: 1.42857;
    padding: 6px 12px;
    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}

.form-control::-moz-placeholder {
    color: #d9d9d9;
    font-size: 15px;
    opacity: 1;
}

.form-control::-webkit-placeholder, .form-control::-o-placeholder {
    color: #d9d9d9;
    font-size: 15px;
    opacity: 1;
}

.form-control::-o-placeholder {
    color: #d9d9d9;
    font-size: 15px;
    opacity: 1;
}

.support {
  background: #fdf2f2;
  padding: 5rem 0 8rem;
}
.support h3 {
  line-height: 1.6;
  margin-bottom: 3rem;
}
.support h3 .num {
  font-size: 2.8rem;
  line-height: 1;
  margin-right: 1rem;
}
.support .img-box {
  margin-bottom: 2rem;
}
.support .img-box img {
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.1);
}
.support .name {
  display: block;
  font-size: 1.6rem;
  font-weight: bold;
  margin-bottom: .5rem;
}
@media (max-width: 767px) { 
  .support .img-box img {
    margin: 0 auto;
  }
}
/* ==========================================================================
   Mobile styles
   ========================================================================== */
/* Landscape phones and down */
@media (max-width: 480px) { 

.btn-lg {
  font-size: 12.5px;
  line-height: 1.33;
  padding: 16px 13px;
  letter-spacing: 0px;
}


.btn-wide {
  width: 100%;
  font-size: 12.5px;
  line-height: 1.33;
  padding: 16px 13px;
  letter-spacing: 0px;
}

#be-the-first { 
      background-attachment: scroll;
  }

}


/* Landscape phone to portrait tablet */
@media (min-width: 481px) and (max-width: 767px) { 

#be-the-first { 
      background-attachment: scroll;
  }

}


/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 991px) {

#be-the-first { 
      background-attachment: scroll;
  }
  
}



/* Desktops and laptops ----------- */
@media (min-width: 992px) and (max-width: 1199px) {

}
     


/* Large screens ----------- */
@media (min-width: 1200px) and (max-width: 3000px) {

}   



/* ADD MAIN ----------- */
.prt01{
  position: absolute;
  top: 20%;
  left:10%;
}


.prt02{
  position: absolute;
  top:70%;
  left:20%;
}

.prt03{
  position: absolute;
  top:80%;
  left:90%;
}


.prt01 img{
  width: 70px;
  height: auto;
}

.prt02 img{
  width: 50px;
  height: auto;
}

.prt03 img{
  width: 100px;
  height: auto;
}


.load01{
  top: 40%;
  left:20%;
}

.load02{
  top: 50%;
  left:70%;
}

.load03{
   top: 80%;
  left:80%;
}

.load img{
  width: 30px;
  height: 30px;
}
.load {
  position: absolute;
  width: 20px;
  height: 20px;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}





.scale01{
  position: absolute;
  top:30%;
  left: 30%;
}

.scale01 img{
  width: 420px;
  height: auto;
}
.scale01{
  animation:move 7s ease 0s 3 normal;   
  -webkit-animation:move 7s ease 0s 3 normal;   
}


.scale02{
  animation:move 15s ease 0s 3 normal;   
  -webkit-animation:move 15s ease 0s 3 normal;   
}

.scale02 img{
  width: 500px;
  height: auto;
}


.scale02{
  position: absolute;
  top:40%;
  left: 40%;
}
.scale02 img{
   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
@keyframes move {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-webkit-keyframes move {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}
/* .hdr-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pc-logo {
  width: 200px;
} */
.DHlogo img {
  width: 40%;
}
@media (max-width: 992px) { 
  .DHlogo img {
    width: 80%;
  }
}
@media (max-width: 480px) { 
  .DHlogo img {
    width: 100%;
  }
  }
.navapply {
  max-width: 180px;
  width: 100%;
  margin-right: 1rem;
  text-align: center;
}

.navapply a{
    width: 100%;
    display: inline-block;
    padding: 15px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    background: #ff4000;
    color: #fff;
    box-sizing: border-box;
    box-shadow: 1px 1px 3px rgba(0,0,0,.4);
    line-height: 1.2;
    border-radius: 3px;
    vertical-align: top;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;}

.mainV {
  position: relative;
  width: 100%;
  height: 100%;
}
/* .mainV h2{
  font-size: 3rem;
  font-weight: 700;
} */
.mainV h3{
  /* color: #fff; */
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
}
/* .mainV .mv-catch {
  position: absolute;
  left: 12%;
  top: -5%;
  color: #fff;
  font-size: 3rem;
  font-weight: bold;
  text-align: left;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  z-index: 1;
} */
.mainV .mv-img {
  max-width: 800px;
  width: 100%;
  margin: 5% auto 0;
  position: relative;
}
/* .mainV .mv-img::before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10vw 10vw 0 0;
  border-color: rgba(230, 89, 138, .4) transparent transparent transparent;
  position: absolute;
  left: -2rem;
  top: -2rem;
}
.mainV .mv-img::after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10vw 10vw;
  border-color: transparent transparent rgba(144, 92, 186, .4) transparent;
  position: absolute;
  right: -2rem;
  bottom: -2rem;
} */
.mainV .mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mainLogo  {
    margin: auto;
    width: 24%;
    margin-top: 7%;
    position: relative;
    z-index: 10;
}
.mainTtl {
    margin: 10% auto 4rem;
}
.mainTtl span {
    display: block;
    color: #ffcf08;
    font-size: 52px;
    line-height: 1.2;
    position: relative;
}
.announce-box {
  width: clamp(300px, 600/768*100vw, 650px);
  margin: 2em auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  padding: 2em 2em 1em;
  text-align: left;
}
.announce-box img {
  width: 100%;
  height: auto;
}
.announce-box p {
  color: #231f20;
  font-size: clamp(1rem, 1.6vw ,1.4rem);
  line-height: 1.6;
}
.announce-box .link {
  display: inline-block;
  text-decoration: underline;
  padding-left: 0.8em;
  position: relative;
  transition: .3s all;
}
.announce-box .link::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  border-style: solid;
  border-top: 0.3em solid transparent;
  border-bottom: 0.4em solid transparent;
  border-left: 0.4em solid currentColor;
  border-right: 0;
  transform: translateY(-50%);
}
.announce-box .link:hover {
  opacity: .7;
  transition: .3s all;
}
.reskilling-logo {
  width: clamp(250px, 500/768*100vw, 564px);
  margin: 0 auto 2em;
}
@media (max-width: 1140px) {
  /* .mainV h2 {
    font-size: 2.8vw;
  } */
  .mainV h3 {
    font-size: 2vw;
  }
  .mainV .mv-catch {
    left: 5vw;
    font-size: 1.9vw;
  }
}
@media (max-width: 768px) {
  .mainV .mv-img { 
    width: 100%;
    margin-bottom: 3rem;
  } 
  /* .mainV .mv-img::before {
    left: -.5rem;
    top: -.5rem;
  }
  .mainV .mv-img::after {
    right: -.5rem;
    bottom: -.5rem;
  } */
  /* .mainV h2 {
    font-size: 2.8vw;
    line-height: 1.4;
    margin-top: 4rem;
  } */
  .mainV h3 {
    font-size: 2vw;
  }
  .mainTtl {
    margin: 10% auto 3rem;
  }
  .mainTtl span {
    font-size: 8vw;
    padding: 1rem 1.5rem 1rem;
  }
  .mainV .mv-catch {
    top:0;
    left: 0;
    font-size: 3.8vw;
  }
}
/* @media (max-width: 480px) { 
  .mainTtl {
    margin: 30% auto 5rem;
  }
} */

.mainLogo  img{
  width: 100%;
}

#be-the-first .sub{
    font-size: 3.4rem;
    line-height: 40px;
    letter-spacing: 2rem;
    color: #ffffff;
    font-weight: 700;
}
#be-the-first h2 {
  text-align: center;
}
#be-the-first h2 span {
  display: inline-block;
}
@media (max-width: 480px) { 
  #be-the-first h2 span {
    font-size: 6vw;
  }
}
.aboutLogo {
  width: 50%;
  padding: 3% 0 5% 0;
}

.abouttxt{
  color: #fff;
  font-size: 2.5rem;
  margin-bottom: 6%;
}

.main-info h2{
  color: #000;
  text-align: center;
  margin-bottom: 5rem;
  line-height: 1.4;
}

.main-info h3{
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.main-info h3 br{
  display: none;
}
.main-info .title-catch {
  color: #231f20;
  font-size: clamp(1.2rem, 1.4vw ,1.6rem);
  font-weight: bold;
  text-align: center;
  margin-top: 3.2em;
}
.main-info .title-catch + h2 {
  padding-top: 0;
}
@media (max-width: 1024px) { 
  .main-info h3 br{
    display: block;
  }
}
@media (max-width: 768px) { 
  .main-info h3{
    font-size: 1.6rem;
  }
  .main-info h3 br{
    display: none;
  }
}

.lead {
  line-height: 3rem;
  font-size: 2rem;
  color: #ffffff;
  font-weight: 400;
}




.firstttl{
  margin: 18% 0 3% 0;
}
   

.hop{
    margin-bottom: 5%;
    background-color: #fdf2f2;
    padding: 2rem 0 4rem 0;
}

.hoptext {
font-weight: bold;
font-size: 1.6rem;
line-height: 2.4rem;
}


.adobe {
  width: 80%;
  margin: 2% auto;
}

.graduate {
  background-color: #defffe;
  margin-bottom: 5%;
  background: repeating-linear-gradient(-45deg, #bde9ff, #bde9ff 16px, #fff 0, #fff 40px);
}
.graduate ul li{
    list-style: none;
    padding: .25em 0 .25em .55em;
    border-left: 6px solid #333;
    font-size: 2rem;
    line-height: 12px;
    font-weight: bold;
    margin-bottom: 22px;
}


.graduate ul li small{
    color: #333;
    margin-left: 2%;
    font-weight: 500;
}

.graduate ul{
    width: 60%;
    margin: 5% auto;}



/* people ----------- */

/* #main-info h2 {
    padding-top: 4%;} */
.main-info h2 {
  padding-top: 4%;}    
/* people ----------- */
.voiceContents h4{
  margin-top: 5%;
  }
.voiceContents h4 span{
    background-color: aliceblue;
    padding: 1%;
    letter-spacing: 1rem;
    font-size: 1.4rem;
    font-weight: 700;
  }   
.voiceContents  h5{
  font-weight: bold;
  margin: 3% auto;
  }

.voiceContents .btn01 {
  max-width: 460px;
  font-size: 1.8rem;
  margin: 1rem auto 0;
}  


.people .works img{
  width: 100%;

}

.webbtn{
    background-color: #ab94e4;
    color: #ffffff;
    width: 20%;
    padding: 2%;
    text-align:center;
    margin: 2% auto;
}

.people .face img{
  width: 100%;
  margin: 10% 0 0 10%;
}

.face{
    margin-top: -1.2%;
}

figure {
  position: relative;
  overflow: hidden;
}
figcaption {
  position: absolute;
  bottom: 30px;
  right: 40px;
  z-index: 2;
  width: 100%;
  height: 55px;
  background: black;
  -webkit-transition: .3s;
  transition: .3s;
}
/* figure:hover figcaption {
  right: 100%;
} */


.people .name{
  color: white;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: 1rem;
  padding: 1%;
  z-index: 10;
  margin-left: 12%;
  margin-top: 2%;
  position: absolute;
}


.clear{
  clear: both;
}

.pplsecond{
 margin-top: 6%;
}


.studystyle h2{font-size: 2rem;}

.stylestext{
 margin-top: 10px;
 padding-left: 0;   
}
.stylestext li{
  list-style: none;
  color: #000;
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 22px;
  text-indent: -1em;
  padding-left: 1em;
}
.stylestext li::before{
  content: "・";
}
.plus{
  color: #333;
  font-size: 13rem;
  margin-top: 90%;
  text-align: center;
  }

.firstplus{
  color: #333;
  font-size: 10rem;
  margin-top: 57%;
  text-align: center;
  }



.point {
    text-align: center;
    background-color: #e13985;
    color: #fff;
    padding: 1% 3%;
    width: 27%;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: bold;
    margin-right: 2%;
}




/* schedule ----------- */

.schedule {
  padding: 5rem 0 8rem;
  /* padding-bottom: 10%; */
}


.schedule img{
  width: 100%;
}

.scheduleImg{
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
}
.scheduleImg + .scheduleImg {
  margin-top: 20px;
}

.prof{
    width: 80%;
    margin: 12% auto 0 auto;
    text-align: center;
}
.prof img {
    border-radius: 150px;
    -moz-border-image: border-radius: 150px;
    -webkit-border-image: border-radius: 150px;
}

.prof img {
    border-radius: 150px;
    -moz-border-image: border-radius: 150px;
    -webkit-border-image: border-radius: 150px;
}

.works img{width: 100%;}


.intxt {
  font-size: 1.3rem;
    line-height: 22px;
    color: #000;
    font-weight: 400;
}

.MessageBg{
    background-color: black;
    color: white;
    padding: 2%;
    font-size: 1.5rem;
}


.messagetxt{
  width: 90%;
  margin: 5% auto 10% auto;


}

.gray{background-color: #f2f2f2;}
/*.wow p{
    margin: 0 3% ;
    font-size: 14px;
    line-height: 23px;
    letter-spacing: 0px;
    color: #231f20;
    font-weight: 500;}*/

.h3bg{
    margin: 1% 0 1% 0% ;
  }


#pricing h2 {
    color: #000;
    text-align: center;
}

#pricing h3 {
text-align: center;}

#pricing .subttls{
text-align: center;
font-size: 1.8rem;
font-weight: 200;
padding-bottom: 1%;
 }


.bgRound{
    background-color: rgba(35, 31, 32, 0.18);
    color: #777;
    border-radius: 6px;
    width: 14%;
    margin:  0 3%  0 3%;
    float: left;
    font-weight: 500;
    padding: 1%;
    line-height: 2rem;
}
.features{
  padding-top: 35px;
  padding-bottom: 35px;}

.map{
    padding-bottom: 10%;
}
.map h3 a{
  display: inline-block;
  text-decoration: underline;
  line-height: 1.4;
}
.map h3 a:hover{
  text-decoration: none;
  opacity: .7;
  transition: .2s all ease-in;
}
.map h4{
    margin-top: 24px;
    margin-bottom: 0px;
}

.map img{
  width: 100%;
}

.map-wrap {
  height: 0;
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
}
.map-wrap iframe {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}





#btnlast {
  padding: 5% 0;
  background-color: #eee;}
.btn-last{
    width: 30%;
    height: 69px;
    text-align: center;
    vertical-align: middle;
    background-color: #ab94e4;
    color: #ffffff;
    font-size: 2rem;
    font-weight: 600;}

@media (max-width: 480px) {
  #btnlast {
    padding: 10% 0 10%;
  }
}    
/* <- Demo Stuff Start */



.btncontainer {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  width: 80%;
  margin: 0 auto;
}
@media (max-width: 480px) {
  .btncontainer {
    width: 100%;
  }
}
.btnn {
  flex: 1 1 auto;
  margin: 10px;
  padding: 25px;
  font-size: 2.6rem;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2); */
  border-radius: 10px;
  color: #333;
  font-weight: bold;
  background: #ff4000;
  border: 2px solid #ff4000;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, .2);
  color: #fff;
}
.btnn:hover {
  color: #ff4000;
  background: #fff;
  transition: all .4s;
}
.btn01 {
  max-width: 580px;
  display: block;
  padding: 5px 20px 10px;
  background: #000;
  border: 2px solid #000;
  color: #fff;
  font-size: 2.2rem;
}

.btn01:hover {
  background: #fff;
  color: #000;
}
.btn01 .catch {
  display: inline-block;
  font-size: 70%;
  font-weight: normal;
}
.btn01 .catch i {
  font-style: normal;
}
.btn01 .catch i:nth-child(1) {
  padding-right: .5rem;
}
.btn01 .catch i:nth-child(2) {
  padding-left: .5rem;
}
@media (max-width: 767px) {
.btnn {
  font-size: 4.1vw;
}
}

.btnb {
  flex: 1 1 auto;
  margin: 10px;
  padding: 25px;
  font-size: 1.6rem;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2); */
  border-radius: 10px;
  color: #fff;
  font-weight: bold;
  background: #000;
 }



/* Demo Stuff End -> */

/* <- Magic Stuff Start */

.btnn:hover {
  background-position: right center; /* change the direction of the change here */
}






.be{
   font: 400 12px/1 'Montserrat', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: -webkit-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Chrome 10+, Saf5.1+ */
  background:    -moz-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* FF3.6+ */
  background:     -ms-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* IE10 */
  background:      -o-linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* Opera 11.10+ */
  background:         linear-gradient(90deg, #4CB8C4 10%, #3CD3AD 90%); /* W3C */   
padding-bottom: 5%;
}
.page{
  margin:0 auto;
  padding-top:6em;
  width: 800px;
}
#home-news{
  font-size: 40px;
  text-align:center;
  color:#464646;
  height: 45px;
  line-height: 45px;
  overflow:hidden;
  position:relative;
}.home_header {
  position:absolute;
  width:100%;
  z-index:99;
  color:#000;
  
}
.home_header_on {
  z-index:100;
}.home_header strong {
  color: white;
}.home_header span, .home_header strong {
  position:relative;
  top:-50px;
}.home_header_on *:nth-child(1) {
   top: 0;
  -webkit-transition: top .6s ease-in-out;
  -moz-transition: top .6s ease-in-out;
   transition: top .6s ease-in-out;
}.home_header_on *:nth-child(2) {
  top: 0;
  -webkit-transition: top .6s ease-in-out .15s;
  -moz-transition: top .6s ease-in-out .15s;
  transition: top .6s ease-in-out .15s;
}.home_header_on *:nth-child(3) {
  top: 0;
  -webkit-transition: top .6s ease-in-out .3s;
  -moz-transition: top .6s ease-in-out .3s;
  transition: top .6s ease-in-out .3s;
}.home_header_out *:nth-child(1) {
  top: 50px;
  -webkit-transition: top .6s ease-in-out;
  -webkit-transition: top .6s ease-in-out;
  -moz-transition: top .6s ease-in-out;
}.home_header_out *:nth-child(2) {
  top: 50px;
  -webkit-transition: top .6s ease-in-out .15s;
  -moz-transition: top .6s ease-in-out .15s;
  transition: top .6s ease-in-out .15s;
}.home_header_out *:nth-child(3) {
  top: 50px;
  -webkit-transition: top .6s ease-in-out .3s;
  -moz-transition: top .6s ease-in-out .3s;
  transition: top .6s ease-in-out .3s;
}

.base{
  background: none repeat scroll 0 0 #99c9de;
}




.close_bg h3 a {
  color: #393939;
}
.close_bg h3 span {
  margin-left: .5rem;
}
.close_bg h3 span img{
  width:2.5%;
}

@media (min-width: 480px) { 
  .close_bg h3 span {
    vertical-align: top;
  }
}


/*--add20180612--*/


.navapplybk a {
    color: #fff;
    background-color:#000;
    display: inline-block;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: bold;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 3px;
    vertical-align: top;
    box-shadow: 1px 1px 3px rgba(0,0,0,.4);
  }






/*---------recruit--------*/


 .cf:before, .cf:after {
    content: "";
    display: table;
}


.rec_car input[type="checkbox"].on-off{
    display: none;
}

 .rec_car input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}

.rec_car input[type="checkbox"].on-off:checked + ul{
    height: 100%;
}


.close_bg{
    background-color: #fff7fc;;
    padding: 40px;
    display: block;
    margin-top: 20px;
    font-weight: bold;
}

.close_bg p{
    font-size: 1.3rem;
    line-height: 22px;
    color: #000;
    font-weight: 400;
}

.close_bg .col-sm-6 img{
  padding: 3%;
}
.QA{
  overflow-x: hidden;
}
@media (max-width: 480px) { 
  .close_bg{
    padding: 5px 20px 10px;
  }
}
 .QA{
  padding: 5% 0;
 }

#ex2 img {
    width: 80%;
}

.txt-link {
  font-size: 1.4rem;
  text-decoration: underline;
}
.txt-link:hover {
  opacity: .7;
}

.btn-box {
  margin: 6rem auto 5rem;
}


/*-------SP-------*/
@media (max-width: 1024px) {
  /* header {
    height: 700px;
  } */
}

@media (max-width: 767px) {
  .firstplus {
    margin-top: 0;
  }

}

@media (min-width: 480px) { 

.sp{display: none;}
}


@media (max-width: 480px) { 

.pc{display: none;}

header {
  width: 100%;
  padding: 20px 10px 20px 10px;
  height: auto;
  overflow: hidden;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background: url(../img/Bg_web.png) bottom left,-moz-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: url(../img/Bg_web.png) bottom left,-webkit-linear-gradient(left, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  background: url(../img/Bg_web.png) bottom left,linear-gradient(to right, rgba(255,201,38,0.8) 0%, rgba(255,147,38,0.8) 100%);
  /* animation: huerotator 10s infinite alternate; */
  background-size:100%,379%,cover;
  background-repeat: no-repeat;
  position: relative;
  /* z-index: -10; */
}

h3 {
    font-size: 1.4rem;}

/* ADD MAIN ----------- */
.bganimation{display: none;}

.mainV h2 {
    font-size: 2.2rem;
    font-weight: 700;
}

.mainV h3 {
    /* color: #fff; */
    font-size: 1.5rem;
    /* font-weight: 200; */
    line-height: 1.4;
}

.load01{
  top: 20%;
  left:20%;
}

.load02{
  top: 60%;
  left:70%;
}

.load03{
   top: 80%;
  left:30%;
}

.load img{
  width: 30px;
  height: 30px;
}
.load {
  position: absolute;
  width: 20px;
  height: 20px;
    -webkit-animation: spin 1.5s linear infinite;
    -moz-animation: spin 1.5s linear infinite;
    -ms-animation: spin 1.5s linear infinite;
    -o-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}

@-webkit-keyframes spin {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-ms-keyframes spin {
  0% {-ms-transform: rotate(0deg);}
  100% {-ms-transform: rotate(360deg);}
}
@-o-keyframes spin {
  0% {-o-transform: rotate(0deg);}
  100% {-o-transform: rotate(360deg);}
}
@keyframes spin {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}





.scale01{
  position: absolute;
  top:30%;
  left: 20%;
}

.scale01 img{
  width: 220px;
  height: auto;
}
.scale01{
  animation:move 7s ease 0s 3 normal;   
  -webkit-animation:move 7s ease 0s 3 normal;   
}


.scale02{
  animation:move 15s ease 0s 3 normal;   
  -webkit-animation:move 15s ease 0s 3 normal;   
}

.scale02 img{
  width: 300px;
  height: auto;
}


.scale02{
  position: absolute;
  top:40%;
  left: 40%;
}
.scale02 img{
   -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
@keyframes move {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@-webkit-keyframes move {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}


.navwhite{
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0.2rem;
    margin: 1% 2% 0 0;
}

.signin {
    padding-top: 0px;
}

.navbar-nav {
    margin: 0px;
}




.mainLogo {
    margin: auto;
    width: 54%;
    margin-top: 7%;
    position: relative;
    z-index: 10;
}

/*mainvisual*/

.mainLogo  img{
  width: 100%;
}

/* .DHlogo img {
    width: 40%;
}
@media (max-width: 768px) { 
  .DHlogo img {
    width: 30%;
  }
} */

.aboutLogo {
    width: 70%;}


.navbar .logo img {
    width: 39%;
    margin-top: 0px;
    margin-left: 3%;

}

.navbar-inverse .navbar-nav > li > a, .navbar-nav a {
  color: #fff;
  background:rgba(0,0,0,0);
}
.sp-btn {
  background: #ff4000;
  color: #fff;
  border-radius: 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,.4);
  padding: 1rem;
  z-index: 1;
}
.navapply a {
    display: inline-block;
    padding: 15px 20px;
    font-size: 14px;
    font-weight: 700;
    color: #333;
    background: #ff4000;
    color: #fff;
    box-sizing: border-box;
    line-height: 1.2;
    border-radius: 3px;
    vertical-align: top;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
}



.abouttxt {
    color: #fff;
    font-size: 1.9rem;
    margin-bottom: 6%;
}

.lead {
  margin: 7% 0;
  font-size: 1.3rem;}
  .lead br {display: none;}

.martop10{
  margin-top: 2%;
}



.firstttl {
    margin: 70% 0 3% 0;
}
.main-info h2 {
  margin-bottom: 1rem;
}
.main-info h2.name01 {
  font-size: 6vw;
  margin-bottom: 0;
}
.main-info h3.name02 {
  font-size: 4vw;
  margin: 0;
}
.jah2{
    font-size: 6vw;}

.adobe {
    width: 93%;
    margin: 2% auto;
}

.adobe img {
  width: 600px;
}

/* .adobe img{
zoom: 1.5;
} */


.hoptext {
    font-weight: 100;
    font-size: 1.1rem;
    margin-bottom: 6%;
}


.graduate ul {
    width: 100%;
    margin: 5% auto;
    padding: 3% 0 2% 0;
}


.graduate h2{
  line-height: 3rem;
}



.graduate ul li {
    list-style: none;
    padding: .25em 0 .25em .55em;
    border-left: 6px solid #333;
    font-size: 1.2rem;
    line-height: 12px;
    font-weight: bold;
    margin-bottom: 22px;
}



.pad-xl {
    padding: 12% 0px;
}

.pointTxt {
    font-size: 2rem;
  }

.webbtn {
    background-color: #ab94e4;
    color: #ffffff;
    width: 51%;
    padding: 4%;
    text-align: center;
    margin: 4% auto;
}
.voiceContents h3{
    font-size: 1.4rem;
    line-height: 24px;
  }

.voiceContents h4{
    margin-top: 5%;
    }

.voiceContents h4 span{
    display: inline-block;
    background-color: aliceblue;
    padding: 2%;
    letter-spacing: 1.2rem;
    font-weight: 700;
    font-size: 1.4rem;
}

  .voiceContents  h5{
    font-weight: bold;
    margin: 3% auto;
    }

    figcaption {
    position: absolute;
    bottom: 16px;
    right: 60px;
    z-index: 2;
    width: 100%;
    height: 31px;
    background: black;
    -webkit-transition: .3s;
    transition: .3s;
}
.people:not(:last-of-type) {
  margin: 5rem 0;
}
.people .name {
  letter-spacing: 0.2rem;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    padding: 1%;
    position: absolute;
    z-index: 10;
    margin-left: 24%;
    margin-top: -1%;
    position: absolute;
}

.people .face img {
  margin: 0;
}



.page {
    margin: 0 auto;
    padding-top: 4em;
    width: 100%;
}

#home-news {
    font-size: 2rem;
    text-align: center;
    color: #464646;
    height: 45px;
    line-height: 25px;
    overflow: hidden;
    position: relative;
}


.prof img{
  width: 80%;
  height: 80%;
}
.pointTxt {
    font-size: 1.2rem;}

.plus {
    font-size: 6rem;
    margin-top: 0%; 
    text-align: center;
}


.firstplus{
  font-size: 6rem;
  margin-top: 0%;
  text-align: center;
}

.height130{
    height: 210px;
  }


.height30{
  height: 180px;
}  
.pricing-table li{
  padding-left: 10px;
  padding-right: 10px;
}
.spwid{
    display: block;
    width: 180px;
    float: left;
    height: 110px;
    margin-left: 0px;}

.price{
    font-size: 2rem;}


#pricing .subttls {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 200;
    padding-bottom: 1%;
}

.pricing-container{
        width: 96%;
    visibility: visible;
    margin: 0 auto;}


    .features.last a {
    padding: 4% 8%;
  }

.features {
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}


.splongtxt{
    padding: 0 4%;
    display: block;
    font-size: 1.3rem;
    line-height: 2rem;

}

    .bgRound {
    font-size: 1.3rem;
    background-color: rgba(35, 31, 32, 0.18);
    border-radius: 18px;
    width: 28%;
    margin: 0 4% 0 3%;
    float: left;
    color: #777;
    font-weight: 500;
    padding: 1% 1% 1% 2%;
    line-height: 177%;
}

.btn-last {
    width: 54%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    background-color: #ab94e4;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 600;
}
.map{
  margin-right: 15px;
  margin-left: 15px;
}

.hoptext {
font-weight: bold;
}


/* .navbar-toggle .sp{color: #fff;} */

.close_bg h3 span img {
    width: 7%;
}




.point {
    text-align: center;
    background-color: #e13985;
    color: #fff;
    padding: 1%;
    width: 16%;
    border-radius: 20px;
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 2%;
}



#ex2 img {
    width: 100%;
}


.scheduleImg01 {
  margin-bottom: 10px;
}
.scheduleImg01 img{
  width: 600px;
}
.sp-scroll {
  overflow: auto;
}

.support {
  padding: 3rem 0 5rem;
}
.schedule {
  padding: 3rem 0 1rem;
}
.support h3 {
  min-height: auto;
}
.support .img-box img {
  margin: auto;
}
.studystyle {
  margin-bottom: 5rem;
}
    
}

.fourimg {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 4%;
  justify-content: center;
}
.fourimg-col {
  width: 30%;
}
@media (max-width: 767px) {
  .fourimg-col {
    width: 42%;
  }
}

.link-btn {
  display: inline-block;
  width: min(300px, 100%);
  border: 2px solid currentColor;
  background: #fff;
  text-align: center;
  padding: .4em .6em .4em 0;
  margin-top: .5em;
  position: relative;
}
.link-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  position: absolute;
  right: .5em;
  top: 50%;
  border-top: solid 2px currentColor;
  border-right: solid 2px currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.link-btn:hover {
  opacity: .7;
  transition: .2s ease-in;
}