* {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}
@font-face {
   font-family: "huninn";
   src: url("jf-openhuninn-1.1.ttf") format("truetype")
}
body {
   color: #426ab3;
   font-family: "huninn", Arial, "微軟正黑體";
   font-size: 16px;
   background: #eaf3ff
}
i {
   font-style: italic
}
.center {
   text-align: center
}
.bold {
   font-weight: bold
}
button {
   appearance: none;
   -moz-appearance: none;
   -webkit-appearance: none;
   border: none;
   outline: none
}
.btn-group{
	padding: 10px;
	float: right;
	valign:center;
}

.btn-group .button1{
  background-color:rgba(0,0,0,0);
  border: none;
	border-radius: 5px;
  color:#032A5F;
  padding: 4px;
	font-weight: bold;
	margin-right: 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
  float: left;
}
.btn-group .button2{
  background-color:rgba(0,0,0,0);
  border: none;
	border-radius: 5px;
  color:#032A5F;
  padding: 5px;
	margin-right: 1px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  float: left;
}
.btn-group .button1:hover {
  background-color: #E1ECFF;
}
.btn-group .button2:hover {
  background-color:rgba(0,0,0,0);
}

ul.drop-down-menu {
	width:100px;
	position: absolute;
	right: 0px;
/*  border: #ccc 1px solid;*/
  display: inline-block;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 13px;
}

ul.drop-down-menu li {
  position: relative;
  white-space: nowrap;
  border-right: #ccc 1px solid;
}

ul.drop-down-menu>li:last-child {
  border-right: none;
}

ul.drop-down-menu>li {
  float: right;
  /* 只有第一層是靠左對齊*/
}

ul.drop-down-menu a {
  background-color: #FF8B26;
  color: #FFFFFF;
  display: block;
  padding: 0 10px;
  text-decoration: none;
  line-height: 40px;
	width: 100%;
}

ul.drop-down-menu a:hover {
  /* 滑鼠滑入按鈕變色*/
  background-color:  #225BA9;
  color: #fff;
}

ul.drop-down-menu li:hover>a {
  /* 滑鼠移入次選單上層按鈕保持變色*/
  background-color:  #225BA9;
  color: #fff;
}

ul.drop-down-menu ul {
  border: #ccc 1px solid;
/*  position: absolute;*/
  z-index: 99;
  left: -1px;
  top: 100%;
/*  min-width: 180px;*/
}

ul.drop-down-menu ul li {
  border-bottom: #ccc 1px solid;
}

ul.drop-down-menu ul li:last-child {
  border-bottom: none;
}

ul.drop-down-menu ul ul {
  /*第三層以後的選單出現位置與第二層不同*/
  z-index: 999;
  top: 10px;
  left: 90%;
}

ul.drop-down-menu ul {
  /*隱藏次選單*/
  display: none;
}

ul.drop-down-menu li:hover>ul {
  /* 滑鼠滑入展開次選單*/
  display: block;
}

@media screen and (max-width: 600px) {
   .btn-group {
     display: none;
   }
	ul.drop-down-menu{
		 display: inline;
	}
}
@media screen and (min-width: 599px) {
	.btn-group {
     display: inline;
   }
   ul.drop-down-menu {
     display: none;
   }
}

/*注意事項彈跳視窗*/
.overlay {
	position: absolute;
  left: 0;
  right: 0;
	transition: opacity 200ms;
  visibility: hidden;
	opacity: 0;
	z-index: 999;
	
}
.overlay:target{
	
    visibility: visible;
    opacity: 1;
  }
	


.popup {
	height:600px;
	padding: 20px;
	background: #0C76A1;
	border-radius: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	position: relative;
  
}
.close {
    position: absolute;
    right: 30px;
    font-size: 13px;
	font-weight: 900;
	width:23px;
	height:23px;
    padding: 5px;
/*	border: 1px solid #929292;*/
	background-color: #FFFFFF;
	border-radius: 5px;
  }
.close:hover{
	 opacity: 1;
}
  .content1{
	  width:295px;
    max-height: 564px;
    overflow: auto;
	  margin-left: auto;
	  margin-right: auto;
  }




/*注意事項*/







.container {
   width: 1280px;
   max-width: 1280px;
   margin: auto;
   padding-left: 0;
   padding-right: 0
}
.slogan img {
    margin-bottom: -20px;
    width: 70px;
    height: 70px;
}
@media screen and (max-width: 1280px) {
   .container {
      width: 100%;
      padding: 0 40px
   }
}
@media screen and (max-width: 576px) {
   .container {
      width: 100%;
      padding: 0 10px
   }
   .slogan img {
    margin-bottom: -10px;
    width: 35px;
    height: 35px;
}
}
.container-ss {
   width: 1000px;
   max-width: 1000px
}
@media screen and (max-width: 1280px) {
   .container-ss {
      width: calc(100% - 40px)
   }
}
@media screen and (max-width: 820px) {
   .container-ss {
      width: 100%
   }

}
.d-flex {
   display: flex
}
.d-flex .flex {
   flex: 1
}
.d-flex .flex:first-child {
   margin-left: 0 !important
}
.d-flex .flex:last-child {
   margin-right: 0 !important
}
img {
   max-width: 100%
}
a {
   text-decoration: none;
   color: inherit
}
.desktop {
   display: block
}
@media screen and (max-width: 1024px) {
   .desktop {
      display: none
   }
}
@media screen and (min-width: 1025px) {
   .pad {
      display: none
   }
}
@media screen and (max-width: 576px) {
   .pad {
      display: none
   }
}
@media screen and (min-width: 577px) {
   .mobile {
      display: none
   }
}
.go {
   display: flex;
   width: 120px;
   height: 120px;
   align-items: center;
   justify-content: center;
   color: #fff;
   background: #fc7318;
   box-shadow: 10px 10px 0 #ffc198;
   position: fixed;
   top: 50%;
   transform: translateY(-50%);
   right: 40px;
   border-radius: 50%;
   z-index: 2;
   font-size: 20px;
   line-height: 28px
}
@media screen and (max-width: 820px) {
   .go {
      width: 90px;
      height: 90px;
      font-size: 16px;
      line-height: 24px;
      box-shadow: 5px 5px 0 #ffc198
   }
}
@media screen and (max-width: 576px) {
   .go {
      top: auto;
      transform: none;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 40px;
      box-shadow: none;
      border-radius: 0
   }
}
.go span {
   display: block
}
@media screen and (max-width: 576px) {
   .go span {
      display: inline
   }
}
header {
   padding: 0;
   height: 80px;
   background: url(../img/bg_flower.jpg) right center no-repeat #fff;
   display: flex;
}
@media screen and (max-width: 820px) {
   header {
      height: 50px;
      text-align: center
   }
   header img {
      height: 57px;
      margin-top: -4px
   }
	header img.search {
     height: 100%;
      margin-top: -4px
   }
.award {
    display: none;
  
}
}
article {
   min-height: 100vh;
   padding-top: 80px;
   overflow-x: hidden
}
@media screen and (max-width: 820px) {
   article {
      padding-top: 50px
   }
}
article section {
   padding: 60px 0
}
@media screen and (max-width: 820px) {
   article section {
      padding: 30px 0
   }
}
@media screen and (max-width: 576px) {
   article section {
      padding: 15px 0
   }
}
article section.main {
   height: calc(100vh - 80px);
   background: url(../img/bg_wave_light.svg) no-repeat #fff;
   background-size: cover;
   display: flex;
   align-items: center;
   position: relative
}
@media screen and (max-width: 820px) {
   article section.main {
      text-align: center;
      height: calc(100vh - 50px)
   }
}
@media screen and (max-width: 576px) {
   article section.main {
      background-position: center bottom;
      background-size: 250%
   }
}
article section.main h1 img {
   width: 285px;
   margin-right: 30px
}
@media screen and (max-width: 576px) {
   article section.main h1 img {
      width: 50%;
      margin-right: 0;
      padding: 10px 0
   }
}
article section.main p.slogan {
   font-size: 40px;
   color: #0056d3;
   padding: 60px 0;
   position: relative;
   line-height: 60px;
   margin-bottom: 60px
}
@media screen and (max-width: 820px) {
   article section.main p.slogan {
      margin-bottom: 0;
      padding: 40px 0
   }
}
@media screen and (max-width: 576px) {
   article section.main p.slogan {
      font-size: 22px;
      line-height: 40px;
      padding: 20px 0
   }
}
article section.main p.slogan::after {
   content: "";
   display: block;
   width: 140px;
   height: 1px;
   background: #0056d3;
   position: absolute;
   bottom: 0;
   left: 0
}
@media screen and (max-width: 820px) {
   article section.main p.slogan::after {
      display: none
   }
}
article section.main p.slogan span {
   font-size: 60px;
   vertical-align: text-bottom;
   margin: 0 5px
}
@media screen and (max-width: 820px) {
   article section.main p.slogan span {
      font-size: 40px
   }
}
article section.main img.kv {
   position: absolute;
   right: 0;
   top: 55%;
   transform: translateY(-50%);
   width: 50%
}
@media screen and (max-width: 820px) {
   article section.main img.kv {
      position: relative;
      right: auto;
      top: auto;
      transform: none;
      margin-top: 60px
   }
}
@media screen and (max-width: 576px) {
   article section.main img.kv {
      width: 80%;
      margin-top: 40px
   }
}
article section.main .feature-content {
   width: 50%
}
@media screen and (max-width: 820px) {
   article section.main .feature-content {
      width: 100%;
      justify-content: center
   }
}
@media screen and (max-width: 576px) {
   article section.main .feature-content {
      margin-top: 10px
   }
}
article section.main .feature-info {
   font-style: italic;
   color: #0056d3;
   margin-right: 50px
}
@media screen and (max-width: 576px) {
   article section.main .feature-info {
      margin-right: 0
   }
}
@media screen and (max-width: 576px) {
   article section.main .feature-info:first-child {
      margin-right: 20px
   }
}
article section.main .feature-info img {
   width: 50px;
   margin-right: 10px
}
@media screen and (max-width: 576px) {
   article section.main .feature-info img {
      width: 25px
   }
}
article section.main .feature-info p {
   line-height: 32px
}
@media screen and (max-width: 576px) {
   article section.main .feature-info p {
      font-size: 16px;
      line-height: 22px;
      text-align: left
   }
}
article section h2.title {
   text-align: center;
   padding: 30px 0;
   margin-bottom: 0px
}
@media screen and (max-width: 820px) {
   article section h2.title {
      padding: 15px 0
   }
}
@media screen and (max-width: 576px) {
   article section h2.title {
      font-size: 18px;
      line-height: 26px;
      margin-bottom: 15px
   }
}
article section h2.title p {
   padding: 10px 30px;
   border-radius: 100px;
   background: #0d62df;
   color: #fff;
   display: inline-flex;
   align-items: center;
   justify-content: center
}
@media screen and (max-width: 576px) {
   article section h2.title p {
      padding: 10px 20px
   }
}
article section h2.title p img {
   width: 30px;
   margin-right: 10px
}
@media screen and (max-width: 576px) {
   article section h2.title p img {
      width: 20px;
      margin-right: 8px
   }
}
article section.hot {
   margin-bottom: 30px;
   position: relative
}
@media screen and (max-width: 576px) {
   article section.hot {
      margin-bottom: 10px
   }
}
article section.hot .deco {
   z-index: -1;
   position: absolute;
   right: -5%;
   bottom: -40%;
   width: 400px
}
@media screen and (max-width: 820px) {
   article section.hot .deco {
      width: 200px;
      bottom: -70%;
      right: -20%
   }
}
@media screen and (max-width: 576px) {
   article section.hot .cards {
      display: block;
      padding: 0 15px
   }
}
article section.hot .card {
   border-radius: 5px;
   background: #fff;
   position: relative;
   margin: 0 25px
}
@media screen and (max-width: 820px) {
   article section.hot .card {
      margin: 0 15px
   }
}
@media screen and (max-width: 576px) {
   article section.hot .card {
      margin: 0 0 20px 0
   }
}
article section.hot .card::after {
   content: "";
   position: absolute;
   top: 10px;
   left: 10px;
   display: block;
   width: 100%;
   height: 100%;
   background: #c3daf3;
   z-index: -1;
   border-radius: 10px
}
article section.hot .card .title {
   background: #044096;
   color: #fff;
   border-radius: 10px 10px 0 0;
   padding: 15px 20px;
   font-size: 22px;
   line-height: 1em;
}
@media screen and (max-width: 820px) {
   article section.hot .card .title {
      font-size: 18px
   }
}
@media screen and (max-width: 576px) {
   article section.hot .card .title {
      padding: 10px 15px
   }
}
article section.hot .card .title span {
   font-weight: bold;
   color: #ffe400;
   margin-right: 10px
}
article section.hot .card .content {
   border-radius: 0 0 10px 10px;
   padding: 20px
}
@media screen and (max-width: 820px) {
   article section.hot .card .content {
      padding: 10px
   }
}
article section.hot .card .content .desc {
   padding: 10px 0
}
@media screen and (max-width: 576px) {
   article section.hot .card .content .desc {
      padding: 0
   }
}
article section.hot .card .content .detail {
   padding: 20px 0;
   color: #1862cd
}
@media screen and (max-width: 576px) {
   article section.hot .card .content .detail {
      padding: 10px 0
   }
}
article section.hot .card .content .detail .flex {
   padding-top: 5px;
   padding-right: 10px
}
article section.hot .card .content .detail .flex:last-child {
   padding-left: 20px;
   border-left: 1px solid #c3daf3
}
@media screen and (max-width: 820px) {
   article section.hot .card .content .detail .flex:last-child {
      padding-left: 10px
   }
}
article section.hot .card .content .date {
   color: #99bbde
}
article section.activity {
   position: relative
}
@media screen and (max-width: 576px) {
   article section.activity {
      padding-top: 55px
   }
}
article section.activity .deco {
   z-index: -1;
   position: absolute;
   left: -3%;
   bottom: -40%;
   width: 375px
}
@media screen and (max-width: 820px) {
   article section.activity .deco {
      width: 250px;
      bottom: 0
   }
}
article section.activity .content {
   align-items: center;
   justify-content: center
}
@media screen and (max-width: 820px) {
   article section.activity .content {
      display: block
   }
}
article section.activity .coupon {
   margin-right: 60px;
   max-width: 60%
}
@media screen and (max-width: 820px) {
   article section.activity .coupon {
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      max-width: 80%
   }
}
@media screen and (max-width: 576px) {
   article section.activity .coupon {
      max-width: 95%
   }
}
article section.activity .coupon .card {
   background: #fff;
   padding: 30px;
   padding-left: 40px;
   overflow: hidden;
   position: relative;
   border-radius: 10px;
   margin: 40px 0
}
@media screen and (max-width: 820px) {
   article section.activity .coupon .card {
      display: inline-flex;
      align-items: center;
      margin: 0 0 20px 0;
      padding: 20px 30px
   }
}
article section.activity .coupon .card .tag {
   background: #ff9218;
   color: #fff;
   position: absolute;
   top: -28px;
   left: -45px;
   padding: 55px 30px 5px 30px;
   transform: rotate(-45deg);
   font-size: 16px
}
@media screen and (max-width: 576px) {
   article section.activity .coupon .card .tag {
      font-size: 13px
   }
}
article section.activity .coupon .card .detail {
   color: #426ab3;
   padding-top: 5px;
   text-align: left
}
@media screen and (max-width: 576px) {
   article section.activity .coupon .card .detail {
      font-size: 16px;
      line-height: 26px
   }
}
article section.activity .coupon .card .detail p.special {
   border-radius: 100px;
   background: #426ab3;
   color: #fff;
   font-weight: bold;
   display: inline-block;
   padding: 0 15px;
   font-size: 16px;
   margin-bottom: 7px;
   transform: translateX(-15px)
}
@media screen and (max-width: 576px) {
   article section.activity .coupon .card .detail p.special {
      font-size: 13px
   }
}
article section.activity .coupon .card .detail p span {
   color: #ff9218;
   font-weight: bold
}
article section.activity .coupon .card img {
   width: 115px;
   margin-left: 30px
}
@media screen and (max-width: 576px) {
   article section.activity .coupon .card img {
      width: 80px;
      margin-left: 15px
   }
}
article section.activity .steps {
   width: 300px;
   text-align: center
}
@media screen and (max-width: 820px) {
   article section.activity .steps {
      margin: 10px auto
   }
}
article section.activity .steps p {
   margin-bottom: 30px
}
@media screen and (max-width: 820px) {
   article section.activity .steps p {
      margin: 15px
   }
}
article section.activity .steps p span {
   margin-right: 10px
}
article section.activity .steps img {
   width: 200px;
   display: inline-block
}
article section.merit .content {
   text-align: center;
   padding-top: 50px
}
@media screen and (max-width: 820px) {
   article section.merit .content {
      padding-top: 0
   }
}
@media screen and (max-width: 576px) {
   article section.merit .content {
      display: block;
      padding: 0 15px
   }
   article section.merit .content .flex {
      display: flex;
      align-items: center;
      margin-bottom: 15px
   }
}
article section.merit .content img {
   padding: 40px;
   border-radius: 50%;
   background: #cee5ff;
   width: 180px
}
@media screen and (max-width: 576px) {
   article section.merit .content img {
      width: 100px;
      padding: 15px
   }
}
article section.merit .content p {
   padding: 25px
}
@media screen and (max-width: 820px) {
   article section.merit .content p {
      padding: 0 10px;
      margin: 15px 0
   }
}
@media screen and (max-width: 576px) {
   article section.merit .content p {
      text-align: left;
      padding-left: 20px
   }
}
article section.merit .content p a {
   font-size: 16px;
   line-height: 22px;
   padding: 2px 12px;
   border: 2px solid #769adb;
   display: inline-block;
   border-radius: 100px;
   margin-top: 5px
}
article section.steps {
   background: url(../img/bg_wave.svg) no-repeat left bottom;
   padding-bottom: 350px
}
@media screen and (max-width: 820px) {
   article section.steps {
      padding-bottom: 280px
   }
}
@media screen and (max-width: 576px) {
   article section.steps {
      padding-bottom: 100px
   }
}
article section.steps .step-line {
   display: flex;
   align-items: center;
   justify-content: center;
   color: #acd3fe;
   padding: 20px 0;
   margin-bottom: 40px
}
@media screen and (max-width: 820px) {
   article section.steps .step-line {
      padding: 0;
      margin-bottom: 30px
   }
}
article section.steps .step-line .step {
   display: flex;
   align-items: center;
   text-align: center
}
article section.steps .step-line .step span {
   display: block
}
@media screen and (max-width: 576px) {
   article section.steps .step-line .step span {
      font-size: 12px;
      line-height: 18px
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-line .step p {
      font-size: 16px;
      line-height: 22px
   }
}
article section.steps .step-line .step.active {
   color: #426ab3
}
article section.steps .step-line .step.active .line {
   background: #426ab3
}
article section.steps .step-line .line {
   margin: 0 25px;
   width: 100px;
   height: 2px;
   background: #acd3fe
}
@media screen and (max-width: 820px) {
   article section.steps .step-line .line {
      width: 60px
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-line .line {
      width: 35px;
      margin: 0 12px
   }
}
article section.steps .step-content {
   padding: 0 80px
}
@media screen and (max-width: 820px) {
   article section.steps .step-content {
      padding: 0 40px
   }
}
article section.steps .step-content .slick {
   background: #fff;
   border-radius: 10px;
   padding: 40px 0;
   display: flex;
   justify-content: center;
   align-items: center
}
@media screen and (max-width: 820px) {
   article section.steps .step-content .slick {
      padding: 30px 0
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-content .slick {
      display: block;
      padding: 20px
   }
}
@media screen and (max-width: 820px) {
   article section.steps .step-content .slick .flex {
      flex: auto
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-content .slick .flex {
      text-align: center
   }
}
article section.steps .step-content .slick .img {
   width: 240px;
   height: 240px;
   border-radius: 50%;
   background: #cee5ff;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: auto
}
@media screen and (max-width: 820px) {
   article section.steps .step-content .slick .img {
      width: 160px;
      height: 160px
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-content .slick .img {
      margin-bottom: 15px
   }
}
article section.steps .step-content .slick .img img {
   max-width: 70%
}
article section.steps .step-content .slick p {
   padding: 30px 0
}
@media screen and (max-width: 820px) {
   article section.steps .step-content .slick p {
      padding: 15px 0
   }
}
article section.steps .step-content .slick .app img {
   display: inline-block;
   height: 35px;
   margin-right: 10px
}
@media screen and (max-width: 820px) {
   article section.steps .step-content .slick .app img {
      margin-right: 5px
   }
}
@media screen and (max-width: 576px) {
   article section.steps .step-content .slick .app img {
      height: 30px
   }
}
article section.qa {
   background: #deedff
}
@media screen and (max-width: 576px) {
   article section.qa {
      padding: 15px
   }
}
article section.qa .container {
   margin-top: -300px
}
@media screen and (max-width: 576px) {
   article section.qa .container {
      margin-top: -80px
   }
}
article section.qa .title {
   font-size: 32px;
   padding: 60px 0;
   text-align: center
}
@media screen and (max-width: 820px) {
   article section.qa .title {
      padding-bottom: 30px
   }
}
@media screen and (max-width: 576px) {
   article section.qa .title {
      font-size: 18px;
      padding-bottom: 20px
   }
}
article section.qa .content {
   border: 2px solid #769adb;
   border-radius: 10px;
   padding: 20px 40px;
   margin-bottom: 40px
}
@media screen and (max-width: 820px) {
   article section.qa .content {
      padding: 10px 30px
   }
}
@media screen and (max-width: 576px) {
   article section.qa .content {
      padding: 10px 20px
   }
}
article section.qa .content .qaList {
   padding: 40px 0
}
@media screen and (max-width: 820px) {
   article section.qa .content .qaList {
      padding: 25px 0
   }
}
@media screen and (max-width: 576px) {
   article section.qa .content .qaList {
      padding: 15px 0
   }
}
article section.qa .content .qaList:not(:last-child) {
   border-bottom: 1px solid #aec4ec
}
article section.qa .content .qaList .qa-no {
   min-width: -webkit-max-content;
   min-width: -moz-max-content;
   min-width: max-content;
   margin-right: 10px;
   font-weight: bold
}
article section.qa .content .qaList .qa-content {
   width: 100%
}
article section.qa .content .qaList .qa-content .que {
   cursor: pointer;
   position: relative;
   padding-right: 20px;
   font-weight: bold
}
article section.qa .content .qaList .qa-content .que img {
   width: 10px;
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%) rotate(90deg)
}
@media screen and (max-width: 820px) {
   article section.qa .content .qaList .qa-content .que img {
      width: 8px
   }
}
@media screen and (max-width: 576px) {
   article section.qa .content .qaList .qa-content .que img {
      width: 6px
   }
}
article section.qa .content .qaList .qa-content .que img.active {
   transition: all .2s ease-in-out;
   transform: rotate(-90deg) translateX(10px)
}
article section.qa .content .qaList .qa-content .ans {
   margin-top: 10px
}
@media screen and (max-width: 820px) {
   article section.qa .content .qaList .qa-content .ans {
      margin-top: 15px
   }
}
@media screen and (max-width: 576px) {
   article section.qa .content .qaList .qa-content .ans {
      margin-top: 7px
   }
}
article section.qa .content .qaList .qa-content .ans p {
   padding-top: 5px
}
article section.qa .content .qaList .qa-content .ans table {
   width: calc(100% - 20px);
   border-spacing: 2px;
   border-collapse: separate;
   margin-top: 20px
}
@media screen and (max-width: 820px) {
   article section.qa .content .qaList .qa-content .ans table {
      margin-top: 10px
   }
}
@media screen and (max-width: 576px) {
   article section.qa .content .qaList .qa-content .ans table {
      font-size: 14px
   }
}
article section.qa .content .qaList .qa-content .ans table td {
   background: #f3f8ff;
   padding: 10px;
   text-align: center
}
footer {
   background: #4793ee;
   color: #fff;
   padding: 80px 0;
   font-size: 16px;
   line-height: 26px
}

@media screen and (max-width: 820px) {
   footer {
      padding: 20px 0
   }
}
footer p {
   margin-top: 30px
}
footer ul {
   list-style: decimal;
   padding-left: 30px
}
footer ul.main {
   list-style: disc
}
.slick-track {
   display: flex;
   align-items: center
}
div.slick-track {
   display: flex;
   align-items: center
}
button.slick-arrow {
   display: block;
   width: 30px;
   height: 30px;
   background: red;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: url(../img/icon_arrow.svg) no-repeat center center;
   background-size: 10px auto;
   cursor: pointer;
   z-index: 1
}
button.slick-prev {
   left: 0;
   transform: translateY(-50%) rotate(180deg)
}
button.slick-next {
   right: 0
}
.hot_more {
   text-align: center;
}
.hot_more p {
   color: #0D62DF;
   border: 2px solid #0D62DF;
   border-radius: 10px;
   display: inline-flex;
   text-align: center;
   margin-top: 40px;
   margin-right: auto;
   margin-left: auto;
   padding-top: 15px;
   padding-right: 55px;
   padding-bottom: 15px;
   padding-left: 55px;
   font-size: 1.5em;
}
.space {
   display: block;
   width: 100%;
   height: 10%;
   margin-top: 40px;
}

}