@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC&family=Titillium+Web&display=swap');

html, body {
  font-family: '微軟正黑體',sans-serif;
}
.en-text {
  font-family: 'Titillium web', sans-serif ;
}
.row {
  margin: 0;
  padding: 0;
}
/*side-icon*/
.left-side {
  position: fixed;
  top: 292px;
  left: 39px;
  z-index: 99;
}
.left-side p {
  font-size: 14px;
  font-family: 'Titillium web', sans-serif ;
  writing-mode: vertical-rl;
  padding: 0;
  margin: 0;
}
.left-side ul {
  list-style-type: none;
  padding: 0;
  margin-top: 26px;
}
.left-side ul li {
  text-align: center;
  margin-bottom: 18px;
}
.left-side ul li a{
  font-size: 25px;
  color: #676767;
}
.left-side ul li .fb-icon:hover {
  color: rgb(28, 108, 199);
}
.left-side ul li .line-icon:hover {
  color: rgb(55, 202, 80);
}
.right-side {
  position: fixed;
  right: 42px;
  z-index: 99;
  top: 50%;
  transform: translateY(-50%);
}
.right-side ul {
  list-style-type: none;
  padding: 0;
  margin-top: 26px;
}
.right-side ul li {
  text-align: center;
  margin-bottom: 18px;
  writing-mode: vertical-rl;
}
.right-side ul li a{
  font-size: 15px;
  color: #707070;
}
.right-side ul li a:hover{
  text-decoration: none;
  color: #E37D7D;
}
.right-side ul li .space{
  margin-top: 30px;
  margin-bottom: 10px;
}
.scroll {
  position: fixed;
  right: 42px;
  bottom: 5%;
  z-index: 99;
}
.scroll a {
  font-size: 20pt;
  color: #E37D7D;
  transition: .2s ease-in-out;
  animation: zoom 3s infinite ease-in-out;
  text-shadow: 0 3px 5px rgba(0, 0, 0,.1);
  text-decoration: none;
}
.scroll a:hover {
  font-size: 20pt;
  color: rgb(236, 76, 65);
  animation: unset;
}
@keyframes zoom{
  0% {
      transform: scale(0.8);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@media (max-width:1200px) {
  .right-side {
    display: none;
  }
  .left-side {
    display: none;
  }
}
/*navbar*/
.main-nav .logo img {
  width: 52px;
  max-width: 52px;
  float: left;
  margin-right: 9px;
}
.main-nav .logo a {
  font-size: 30px;
  color: #707070;
}
.main-nav .logo {
  position: fixed;
  padding-top: 10px;
  padding-left:37px;
  padding-bottom: 10px;
  top: 0;
  width: 100%;
  z-index: 9999;
  background-color: white;
}
.main-nav .logo a {
  text-decoration: none;
}
.main-nav .mb-contact {
  margin-top: 90px;
}
.main-nav .mb-contact p {
  text-align: center;
}
.main-nav .mb-contact ul {
  position: relative;
}
.main-nav .mb-contact ul li {
  float: center;
}
/**/
.disableAnimation {
  animation: none !important;
}
.iconWrapper {
  position: fixed;
  top: 24px;
  right: 42px;
  z-index: 99999;
}
.iconWrapper svg {
  width: 40px;
  fill: #616161;
  transform-origin: center;
}
.iconWrapper svg .one,
.iconWrapper svg .two,
.iconWrapper svg .three {
  transform-origin: center;
}
.iconWrapper svg .one {
  animation: firstLineShow 0.5s ease-in-out;
}
.iconWrapper svg .two {
  animation: secondLineReverse 0.5s ease-in-out;
}
.iconWrapper svg .three {
  animation: thirdLineShow 0.5s ease-in-out;
}
.iconWrapper.open .one {
  transform: rotate(45deg) translate(8px, 38px);
  animation: firstLineAnimation 0.5s ease-in-out;
}
.iconWrapper.open .two {
  transform: scale(0);
  animation: secondLineAnimation 0.5s ease-in-out;
}
.iconWrapper.open .three {
  transform: rotate(135deg) translate(15px, 0);
  animation: thirdLineHide 0.5s ease-in-out;
}
.navigationWrapper {
  opacity: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100vh;
  background-color: white;
}
.navigationWrapper .nav-box {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 100%;

}
.navigationWrapper ul {
  list-style-type: none;
  width: 100%;
  text-align: center;
  padding: 0;
}
.navigationWrapper ul li {
  text-align: center;
  text-transform: uppercase;
  padding: 0 10px;
  margin: 5px 0;
  font-size: 20px;
  cursor: pointer;
}
.navigationWrapper ul li a:hover {
  color: #E37D7D;
}
.navigationWrapper ul li a {
  margin: 0 20px;
  color: rgb(66, 66, 66);
  text-decoration: none;
}
.navigationWrapper.open {
  opacity: 1;
  pointer-events: auto;
  transition: all 0.5s ease-in-out;

}
.waveWrapper .open{
  position: fixed;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  z-index: 999;
}
.waveWrapper .wrapper {
  position: absolute;
}
.waveWrapper .wrapper .box {
  background-color: #292929;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  animation: boxReverse 0.8s forwards linear;
}
.waveWrapper .wrapper .box.open {
  animation: box 0.8s forwards 0.3s linear;
}

.author {
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  position: absolute;
  left: calc(50% - 96px);
  bottom: 0;
  font-style: italic;
  font-size: 12px;
  color: #212121;
  background-color: white;
  padding: 10px 20px;
  border-radius: 5px 5px 0 0;
  box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
}

@keyframes firstLineAnimation {
  0% {
  transform: rotate(0deg) translateY(0);
  }
  50% {
  transform: rotate(0deg) translateY(0);
  }
  100% {
  transform: rotate(45deg) translate(8px, 38px);
  }
}
@keyframes firstLineShow {
  0% {
  transform: rotate(45deg) translate(8px, 38px);
  }
  50% {
  transform: rotate(0deg) translateY(0);
  }
  100% {
  transform: rotate(0deg) translateY(0);
  }
}
@keyframes secondLineAnimation {
  0% {
  transform: scale(1);
  }
  50%,
  100% {
  transform: scale(0);
  }
}
@keyframes secondLineReverse {
  0%,
  50% {
  transform: scale(0);
  }
  100% {
  transform: scale(1);
  }
}
@keyframes thirdLineShow {
  0% {
  transform: rotate(135deg) translate(15px, 0);
  }
  50% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(0deg);
  }
}
@keyframes thirdLineHide {
  0% {
  transform: rotate(0deg);
  }
  50% {
  transform: rotate(0deg);
  }
  100% {
  transform: rotate(135deg) translate(15px, 0);
  }
}
@keyframes box {
  0% {
  height: 0;
  }
  100% {
  height: 120vh;
  }
}
@keyframes boxReverse {
  100% {
  height: 0;
  }
  0% {
  height: 120vh;
  }
}
/**/
header {
  overflow: hidden;
}
header .carousel-inner {
  position: relative;
}
header .carousel-inner .title {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50% , -45%);
  width: 60;
}
header .carousel-inner .title h2 {
  color: white;
  font-size: 45px;
  text-shadow: 0 3px 6px rgba(0, 0, 0, .6);
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px;
}
header .bannerbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  max-width:1620px ;
  max-height:846px ;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
header .bannerbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-indicators {
  bottom: 5%;
}
@media (min-width:1500px) {
  header .img {
    height: 100vh;
    position: relative;
  }
  header img {
    max-width:1620px ;
    max-height:846px ;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50% , -50%);
  }
  .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23E37D7D' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e");
  }
  
  .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23E37D7D' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e");
  }
  .carousel-control-prev {
    left: -20px;
  }
  .carousel-control-next {
    right: -20px;
  }
}
@media (max-width:1800px) {
  header img {
    padding: 50px 100px;
  }
}
@media (max-width:1500px) {
  header {
    margin-top: 70px;
  }
}
@media (max-width:1200px) {
  header {
    margin-top: 70px;
  }
  header img {
    padding: 0;
  }
}
@media (max-width:991px) {
  header .carousel-inner .title h2 {
    font-size: 30px;
    background-color: rgba(0, 0, 0, 0.3);
  }
  .carousel-indicators {
    display: none;
  }
}
@media (max-width:600px) {
  header .carousel-inner .title h2 {
    font-size: 20px;
  }
}
/*
@media (max-width:1300px) {
  header {
    margin-top: 100px;
    position: relative;
    height: 70vh;
  }
}
@media (max-width:900px) {
  header {
    margin-top: 100px;
    position: relative;
    height: 40vh;
  }
  header .bannerbox img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}
@media (min-width:600px) {
  header .mb {
    display: none;
  }
}
@media (max-width:599px) {
  header .pc {
    display: none;
  }
}*/
.mp-inf {
  color: #707070;
}
.mp-inf .line {
  width: 94px;
  height: 1px;
  fill: #707070;
}
.mp-inf .title-box{
  position: relative;
}
.mp-inf .title-box .inner-box {
  position: absolute;
  right: 44px;
}    
.mp-inf .title-box .svg-container {
  float: right;
  padding-left: 44px;
}
.mp-inf .title-box .inner-box .svg-container svg {
  width: 94px;
}
.mp-inf .title-box .inner-box h2 {
  font-size: 30px;
  font-family: 'Titillium web', sans-serif;
  float: left;
}
.mp-inf img {
  width: 94px;
  height: 1px;
}
.mp-inf ul {
  list-style-type: none;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-top: 10px;
  margin: 0;
}
.mp-inf ul li {
  margin-bottom: 39px;
  width: 80%;
  text-align: justify;
}
.mp-inf ul li .date {
  float: left;
  margin-right: 66px;
}
.mp-inf ul li p {
  color: #d36565;
  font-size: 13px;
  font-style: italic;
}
.mp-inf ul li a {
  color: #858585;
  font-size: 16px;
}
.mp-inf .btn-box {
  position: unset;
  width: 148px;
  height: 50px;
  border: 1px rgb(29, 29, 29) solid;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  transform: unset;
  margin: 0 auto;
  border-radius: 6px;
  color: #707070;
  text-decoration: none;
  margin-bottom: 15px;
  transition: .3s ease-in-out;
}
.mp-inf .btn-box:hover {
  box-shadow: 0 3px 5px rgba(0, 0, 0, .1);
  background-color: rgb(49, 49, 49);
  color: white;
}
.mp-inf .btn-box i {
  margin-left: 16px;
  color: #E37D7D;
  transition: .3s ease-in-out;
}
.mp-inf .btn-box:hover i {
  color: rgb(255, 255, 255);
  transition: .3s ease-in-out;
  transform: translateX(10px);
}
@media (max-height:990px) {
  .mp-inf {
    margin-top: 46px;
  }
}
@media (max-width:1200px) {
  .mp-inf .title-box .inner-box {
    position: unset;
  }   
  .mp-inf .title-box .inner-box h2 {
    float: unset;
    text-align: center;
  }
  .mp-inf .title-box .inner-box svg {
    margin: 0 auto;
  }
  .mp-inf .title-box .svg-container {
    position: relative;
    float: unset;
  }
  .mp-inf .title-box .inner-box svg {
    width: 94px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .mp-inf ul {
    width: 60%;
    padding-top: 30px;
    margin: 0 auto;
  }
  .mp-inf ul li {
    width: 100%;
  }
  .mp-inf ul li .date {
    float: unset;
    margin-right: 0;
  }
  .mp-inf .btn-box i {
    display: none;
  }
}
@media (max-width:960px) {
  .mp-inf ul {
    width: 80%;
  }
  .mp-inf ul li a {
    font-size: 16px;
  }
}

/*step-1*/
.step-container {
  position: relative;
}
.step-container .bg-title {
  position: absolute;
  top: 70px;
  left: 138px;
  font-size: 150px;
  color: #E8E8E8;
  font-family: 'Titillium web', sans-serif;
  line-height: 334px;
  z-index: -1;
}
.step-container .title {
  padding-left: 304px;
}
.step-container .title h2 {
  padding-top: 302px;
  font-size: 40px;
  line-height: 60px;
}
.step-container .title h2 .el-color {
  color: #E37D7D;
}
.step-container p {
  font-size: 18px;
  color: #484848;
  padding: 0 460px;
  margin-top: 52px;
  text-align: justify;
}
@media (max-width:1400px) {
  .step-container .bg-title {
    font-size: 180px;
  }
  .step-container .title {
    padding-left: 20%;
  }
  .step-container p {
    padding: 0 20%;
  }
}
@media (max-width:960px) {
  .step-container .title {
    padding-left: 10%;
  }
  .step-container .title h2 {
    font-size: 35px;
    line-height: 45px;
  }
  .step-container p {
    font-size: 16px;
    padding: 0 10%;
  }
  .step-container .bg-title {
    left: 10%;
  }
}
@media (max-width:650px) {
  .step-container .bg-title {
    font-size: 120px;
  }
  .step-container .title h2 {
    font-size: 30px;
    line-height: 45px;
    text-align: center;
    padding-top: 250px;
  }
  .step-container .title {
    padding: 0 5px;
  }
}
@media (max-width:400px) {
  .step-container .bg-title {
    font-size: 70px;
    top: -10px;
  }
  .step-container .title h2 {
    font-size: 25px;
    line-height: 30px;
    padding-top: 180px;
  }
  .step-container p {
    margin-top: 10px;
  }
}
/*step-2*/
.step2-container {
  position: relative;
}
.step2-container .bg-title {
  position: absolute;
  top: 103px;
  left: 138px;
  font-size: 150px;
  color: #E8E8E8;
  font-family: 'Titillium web', sans-serif;
  line-height: 334px;
  z-index: -1;
}
.step2-container .title {
  padding-left: 304px;
}
.step2-container .title h2 {
  padding-top: 306px;
  font-size: 40px;
  line-height: 100px;
}
.step2-container .title h2 .el-color {
  color: #E37D7D;
}
.step2-container p {
  font-size: 18px;
  color: #484848;
  padding: 0 460px;
  margin-top: 52px;
  text-align: justify;
}
@media (max-width:1400px) {
  .step2-container .bg-title {
    font-size: 180px;
  }
  .step2-container .title {
    padding-left: 20%;
  }
}
@media (max-width:960px) {
  .step2-container .title {
    padding-left: 10%;
  }
  .step2-container .title h2 {
    font-size: 35px;
    line-height: 45px;
    padding-top: 250px;
  }
  .step2-container p {
    font-size: 18px;
    padding: 0 10%;
  }
  .step2-container .bg-title {
    left: 10%;
    top: 53px;
  }
}
@media (max-width:650px) {
  .step2-container .bg-title {
    font-size: 120px;
  }
}
@media (max-width:400px) {
  .step2-container .bg-title {
    font-size: 70px;
    top: -40px;
  }
  .step2-container .title h2 {
    font-size: 25px;
    line-height: 35px;
    padding-top: 150px;
  }
  .step2-container p {
    margin-top: 10px;
  }
}
/*step-3*/
.step3-container {
  position: relative;
}
.step3-container .bg-title {
  position: absolute;
  top: 103px;
  left: 138px;
  font-size: 150px;
  color: #E8E8E8;
  font-family: 'Titillium web', sans-serif;
  line-height: 334px;
  z-index: -1;
}
.step3-container .area-box,.step3-container .area-box2 {
  padding-top: 221px;
  position: relative;
}
.step3-container .area-box .text-box,.step3-container .area-box2 .text-box {
  padding-top: 89px;
  padding-right: 83px;
}
.step3-container .area-box .text-box {
  text-align: end;
}
.step3-container .area-box .text-box .title p,.step3-container .area-box2 .text-box .title p {
  font-size: 18px;
  padding-bottom: 0;
  margin-bottom: 0;
  padding-top: 20px;
  color: #646464;
}
.step3-container .area-box .text-box .title h2,.step3-container .area-box2 .text-box .title h2 {
  font-size: 40px;
  font-weight: bold;
  color: #464646;
}
.step3-container .area-box .text-box .content,.step3-container .area-box2 .text-box .content {
  font-size: 18px;
  width: 400px;
  padding-top: 25px;
}
.step3-container .area-box .text-box .content {
  margin-left: auto;
}
.step3-container img {
  width: 100%;
  max-width: 680px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  margin: 0 auto;
}
.step3-container .area-box2 .img {
  text-align: right;
}
@media (max-width:1400px) {
  .step3-container .bg-title {
    font-size: 180px;
  }
}
@media (max-width:1200px) {
  .step3-container .bg-title {
    top: -160px;
    left: 10%;
  }
  .step3-container .first {
    margin-top: 400px;
  }
  .step3-container .area-box,.step3-container .area-box2 {
    padding-top: 50px;
  }
  .step3-container .area-box .text-box,.step3-container .area-box2 .text-box {
    padding-top: 40px;
    padding-right: 25px;
  }
  .step3-container .area-box .text-box .title p,.step3-container .area-box2 .text-box .title p {
    font-size: 18px;
  }
  .step3-container .area-box .text-box .title h2,.step3-container .area-box2 .text-box .title h2 {
    font-size: 30px;
  }
  .step3-container .area-box .text-box .content,.step3-container .area-box2 .text-box .content {
    font-size: 16px;
    padding-top: 20px;
  }
  .step3-container img {
    width: 90%;
  }
}
@media (min-width:992px) {
  .step3-container .mb {
    display: none;
  }
}
@media (max-width:991px) {
  .step3-container .pc {
    display: none;
  }
  .step3-container .area-box .text-box,.step3-container .area-box2 .text-box, .step3-container .area-box .text-box .content,.step3-container .area-box2 .text-box .content {
    text-align: center;
    width: 100%;
  }
  .step3-container .area-box2 .img,  .step3-container .area-box .img {
    text-align: center;
  }
  .step3-container img {
    width: 80%;
  }
  .step3-container .area-box .text-box .content,.step3-container .area-box2 .text-box .content {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
  }
  .step3-container .area-box .text-box .title h2,.step3-container .area-box2 .text-box .title h2 {
    margin-top: 15px;
  }
}
@media (max-width:650px) {
  .step3-container .bg-title {
    font-size: 120px;
    top: -100px;
  }
  .step3-container .first {
    margin-top: 200px;
  }
}
@media (max-width:400px) {
  .step3-container .bg-title {
    font-size: 70px;
    top: -100px;
  }
  .step3-container .first {
    margin-top: 50px;
  }
}
/*ad-container*/
.ad-container {
  height: 733px;
  width: 100%;
  background-image: url(../image/ad-bg.jpg);
  margin-top: 154px;
  position: relative;
}
.ad-container .box {
  padding-top: 120px;
}
.ad-container .text-container h2 {
  font-size: 40px;
}
.ad-container .text-container .text-box {
  margin-top: 63.5px;
  padding-right: 116px;
}
.ad-container .text-container .text-box p {
  font-size: 18px;
  text-align: justify;
}
.ad-container .btn-box {
  position: absolute;
  right: 116px;
  width: 148px;
  height: 50px;
  border: 1px rgb(29, 29, 29) solid;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  margin-top: 59px;
  border-radius: 15px;
  color: #707070;
  text-decoration: none;
  transition: .3s ease-in-out;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}
.ad-container .btn-box:hover {
  background-color: rgb(49, 49, 49);
  color: white;
}
@media (max-width:1200px) {
  .ad-container .text-container .text-box {
    padding: 0 10%;
  }
  .ad-container .text-container h2 {
    text-align: center;
  }
  .ad-container .btn-box {
    position: unset;
    margin: 0 auto;
  }
}
@media (max-width:1200px) {
  .ad-container {
    margin-top: 104px;
  }
}

@media (max-width:650px) {
  .ad-container .text-container .text-box p {
    font-size: 16px;
  }
  .ad-container .text-container h2 {
    font-size: 35px;
  }
}
@media (max-width:400px) {
  .ad-container .text-container h2 {
    font-size: 25px;
  }
}
/*footer*/
footer {
  margin-top: 216px;
  height: 527px;
  background-image: url(../image/footer.jpg);
  position: relative;
}
footer .contact-box {
  height: 300px;
  background-color: #464646;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -79px;
}
footer .target {
  font-family: 'Titillium web', sans-serif ;
  color: white;
  font-size: 65px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 50%;
  width: 80%;
  text-align: center;
}
footer h2 {
  color: white;
  font-size: 20px;
  width: 100%;
}
footer img {
  width: 100px;
  height: 6px;
  display: block;
  float: right;
  margin-top: 5px;
}
@media (max-width:1200px) {
  footer {
    margin-top: 316px;
  }
}
@media (max-width:900px) {
  footer {
    margin-top: 216px;
  }
}
@media (max-width:576px) {
  footer .target {
    font-size: 40px;
    width: 90%;
  }
  footer img {
    float: unset;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;
  }
  footer {
    height: 300px;
  }
}
/*copyright*/
.copyright {
  text-align: center;
  height: 330px;
  position: relative;
}
.copyright .box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: #858585;
}
@media (max-width:576px) {
  .copyright .box {
    width: 80%;
  }
}
@media (min-width:576px) {
  .copyright .mp-br {
    display: none;
  }
}
/*sec-page*/
.sec-container {
  width: 90%;
  box-shadow: 0 0px 6px rgba(0, 0, 0, 0.16);
  margin-right: auto;
  margin-left: auto;
  margin-top: 100px;
  padding: 100px 0;
}
.sec-container .title {
  text-align: center;
}
.sec-container h1 {
  font-size: 40px;
}
.sec-container .text-box {
  text-align: justify;
}
.sec-container .text-box a {
  color: rgb(63, 112, 202);
}
.sec-container .text-box ul {
  list-style-type: none;
  padding: 0;
}
.sec-container .text-box ul li {
  margin-bottom: 50px;
}
.sec-container .text-box ul h2 {
  font-size: 25px;
  margin-bottom: 20px;
  margin-top: 0px;
  color: rgb(68, 68, 68);
  font-weight: bold;
}
.sec-container .text-box ul p {
  font-size: 18px;
  margin-bottom: 20px;
}
.sec-container img {
  width: 100%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
.sec-container .text-container {
  margin-top: 70px;
}
.sec-container .sec-title {
  text-align: center;
  margin-top: 200px;
}
.sec-container .sec-title h2 {
  font-size: 40px;
}
@media (max-width:1200px) {
  .sec-container {
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width:576px) {
  .sec-container .text-box ul h2 {
    font-size: 20px;
    margin-bottom: 20px;
    margin-top: 40px;
  }
  .sec-container h1 {
    font-size: 35px;
  }
  .sec-container .sec-title h2 {
    font-size: 35px;
  }
  .sec-container .sec-title {
    margin-top: 100px;
  }
  .sec-container .text-container {
    margin-top: 20px;
  }
}
.mind-box .card {
  height: 250px;
  margin-top: 50px;
  margin-bottom: 5px;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.06);
  padding: 15px;
}
@media (max-width:991px) {
  .mind-box .card {
    height: unset;
  }
}
/*qa*/
.qa-box .card button {
  color: #ffffff;
}
.qa-box .card .card-header {
  background-color: rgb(95, 95, 95);
}
/*contact*/
.info-container {
  margin-top: 100px;
}
.info-container .inf-texbox .textbox-inner {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0,.2);
  border-radius: 6px;
  padding: 20px 20px 20px 20px ;
  box-shadow: 0 3px 6px rgba(0, 0, 0,.08);
}
.info-container .inf-texbox .textbox-inner:first-child{
  margin-bottom: 20px;
}
.info-container .inf-texbox .textbox-inner h2 {
  font-size: 20pt;
}
.info-container iframe {
  border: 1px solid rgba(0, 0, 0,.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0,.08);
  border-radius: 6px;
}
@media (min-width:1200px) {
  .info-container .inf-texbox .textbox-inner .mb {
    display: none;
  }
}
@media (max-width:1200px) {
  .info-container .inf-texbox .textbox-inner .mb {
    display: none;
  }
  .info-container .map {
    height: 500px;
    margin-top: 50px;
  }
}
@media (max-width:576px) {
  .info-container .map {
    height: 250px;
  }
}
.contact-container {
  margin-top: 200px;
}
.contact-container h2 {
  font-size: 22pt;
  margin-bottom: 20px;
  color: #3d3d3d;
}
.contact-container .textbox {
  margin-bottom: 20px;  
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0,.2);
  outline: none;
  line-height: 50px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0,.05);
}
.contact-container .depictionbox {
  padding-top: 20px;
  margin-bottom: 20px;  
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0,.2);
  outline: none;
  height: 150px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0,.05);
}
.contact-container .button {
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(0, 0, 0,.2);
  outline: none;
  padding: 0 25px;
  height: 50px;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0, 0, 0,.05);
  transition: .2s ease-in-out;
}
.contact-container .button:hover {
  background-color: rgb(228, 136, 94);
  border: 1px solid rgb(228, 136, 94);
  color: white;
}
/*dseign*/
.select-btn>a{
  display: inline-block;
  padding: 7px 10px;
  border: solid 1px rgb(207, 207, 207);
  color: #333;
  margin-top: 20px;
  text-decoration: none;
  border-radius: 8px;
}
.select-btn {
  text-align: center;
  margin-bottom: 40px;
}
.select-btn>a:hover{
  background: #333;
  color: #fff;
}
#combo>div{
  /*overflow: hidden;*/
  padding-top: 20px;
  margin-bottom: 40px;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 8px;
}
#combo>a:hover{
  text-decoration: none;
}
#combo a h2 {
  font-size: 18pt;
  font-weight: bold;
  color: #ee6a59;
  margin-top: 10px;
}
#combo a p {
  text-align: right;
  color: #7c7c7c;
  font-style: italic;
}
#combo a p:hover {
  text-align: right;
  color: #ffffff;
  font-style: italic;
}
#combo .ds:hover a h2, #combo .ds:hover a p {
  color: #ffffff;
}
#combo .ds a {
  text-decoration: none;
}
.ds {
  -lifekit-transform: scale(0);
  transform: scale(0);
  -lifekit-transition: all 350ms ease;
  transition: all 350ms ease;
  box-shadow: 0 0px 6px rgba(0, 0, 0,.2);
}
.ds:hover {
  background-color: rgb(63, 63, 63)
}
.scale {
  transform: scale(.9);
}
/* Slider */
.slick-list
{
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}
.slick-list:focus
{
  outline: none;
}
.slick-list.dragging
{
  cursor: pointer;
  cursor: hand;
}
.slick-track:before,
.slick-track:after
{
  display: table;
  content: '';
}
.slick-track:after
{
  clear: both;
}
.slick-loading .slick-track
{
  visibility: hidden;
}
.slick-slide
{
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}
[dir='rtl'] .slick-slide
{
  float: right;
}
.slick-slide img
{
  display: block;
}
.slick-slide.slick-loading img
{
  display: none;
}
.slick-slide.dragging img
{
  pointer-events: none;
}
.slick-initialized .slick-slide
{
  display: block;
}
.slick-loading .slick-slide
{
  visibility: hidden;
}
.slick-vertical .slick-slide
{
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}
.slider img {
  width: 100%;
  max-width: 350px;
}
@media (max-width:1200px) {
  .slider {
    padding-top: 60px;
  }
  .slider .imgbox {
    margin: 0 25px;
  }
}


/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('../fonts/slick.eot');
    src: url('../fonts/slick.eot?#iefix') format('embedded-opentype'), url('../fonts/slick.woff') format('woff'), url('../fonts/slick.ttf') format('truetype'), url('../fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    bottom: -50px;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: rgb(241, 98, 98);

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: 0px;
}
[dir='rtl'] .slick-prev
{
    right: 0px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    left: 50px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: 50px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

    position: absolute;
    top: 0;
    left: 0;

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/*==============      text-animation     =============================
<!-- text animation-->
<script src="js/jquery.scrollex.min.js"></script>
<script src="js/browser.min.js"></script>
<script src="js/breakpoints.min.js"></script>
<script src="js/main.js?v=11"></script>
==================================================================*/
/*left*/
.ani-left > .animate {
  -moz-transition:  1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
  -ms-transition:  1s all ease-in-out;
  transition: 1s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-left > .animate2 {
  -moz-transition:  2s all ease-in-out;
  -webkit-transition: 2s all ease-in-out;
  -ms-transition:  2s all ease-in-out;
  transition: 2s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-left.inactive> .animate,
.ani-left.inactive> .animate2 {
  -moz-transform: translateX(-50vh);
  -webkit-transform: translateX(-50vh);
  -ms-transform: translateX(-50vh);
  transform: translateX(-50vh);
  opacity: 0;
}
/*right*/
.ani-right,
.ani-left,
.ani-up {
  overflow: hidden;

}
.ani-right > .animate {
  -moz-transition:  1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
  -ms-transition:  1s all ease-in-out;
  transition: 1s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-right > .animate2 {
  -moz-transition:  2s all ease-in-out;
  -webkit-transition: 2s all ease-in-out;
  -ms-transition:  2s all ease-in-out;
  transition: 2s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-right.inactive> .animate,
.ani-right.inactive> .animate2 {
  -moz-transform: translateX(50vh);
  -webkit-transform: translateX(50vh);
  -ms-transform: translateX(50vh);
  transform: translateX(50vh);
  opacity: 0;
}
/*up*/
.ani-up > .animate{
  -moz-transition:  1s all ease-in-out;
  -webkit-transition: 1s all ease-in-out;
  -ms-transition:  1s all ease-in-out;
  transition: 1s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-up > .animate2{
  -moz-transition:  2s all ease-in-out;
  -webkit-transition: 2s all ease-in-out;
  -ms-transition:  2s all ease-in-out;
  transition: 2s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-up > .animate3{
  -moz-transition:  3s all ease-in-out;
  -webkit-transition: 3s all ease-in-out;
  -ms-transition:  3s all ease-in-out;
  transition: 3s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-up > .animate4{
  -moz-transition:  4s all ease-in-out;
  -webkit-transition: 4s all ease-in-out;
  -ms-transition:  4s all ease-in-out;
  transition: 4s all ease-in-out;
  -moz-transform: translateZ(0);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  position: relative;
  opacity: 1;
}
.ani-up.inactive> .animate,
.ani-up.inactive> .animate2,
.ani-up.inactive> .animate3,
.ani-up.inactive> .animate4 {
  -moz-transform: translateY(200px);
  -webkit-transform: translateY(200px);
  -ms-transform: translateY(200px);
  transform: translateY(200px);
  opacity: 0;
}