add video property in json

css/style.css

@@ -1,746 +0,0 @@
-body {
-  font-family: 'Helvetica Neue'; }
-
-.sec-00__slider {
-  width: 100%;
-  height: 100%; }
-  .sec-00__slider-1, .sec-00__slider-2, .sec-00__slider-3, .sec-00__slider-4, .sec-00__slider-5 {
-    height: 110px;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat; }
-
-.navbar {
-  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  -webkit-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
-  padding-top: 5px;
-  padding-bottom: 5px;
-  background-color: white !important;
-  z-index: 99; }
-  .navbar-toggler {
-    padding-left: 0;
-    border-color: transparent !important; }
-    .navbar-toggler:focus {
-      box-shadow: none; }
-  .navbar-toggler-icon {
-    display: flex;
-    justify-items: center; }
-    .navbar-toggler-icon i {
-      font-size: 25px;
-      line-height: 30px;
-      display: inline-block; }
-  .navbar-search {
-    padding-right: 2px; }
-  .navbar-brand {
-    font-size: 1.5rem; }
-
-.navbar-main.sticky {
-  position: fixed;
-  top: 0;
-  width: 100%; }
-
-.navbar-main.sticky + .sec-01 {
-  padding-top: 68px; }
-
-.sec-01 {
-  padding: 0 1.5rem;
-  margin-top: 1.5rem; }
-  @media screen and (max-width: 385px) {
-    .sec-01 {
-      padding: 0 1rem; } }
-  .sec-01 .col {
-    text-align: center;
-    vertical-align: bottom;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center; }
-    @media screen and (max-width: 385px) {
-      .sec-01 .col {
-        /* padding: 0 .3rem;
-            &.special {
-                padding-left: 0;
-            } */ } }
-    .sec-01 .col img {
-      margin: 0 auto;
-      margin-bottom: 0;
-      vertical-align: baseline; }
-  .sec-01 .slick-dots {
-    width: 16%;
-    margin: 0 auto;
-    margin-top: 1.5rem;
-    height: 5px;
-    background-color: #d6d6d6;
-    border-radius: 2rem;
-    display: flex;
-    position: static; }
-    .sec-01 .slick-dots li {
-      margin: 0px;
-      width: 50%; }
-      .sec-01 .slick-dots li.slick-active button {
-        background-color: #EE7800; }
-      .sec-01 .slick-dots li button {
-        padding: 0;
-        width: 100%;
-        height: 5px;
-        border-radius: 2rem; }
-        .sec-01 .slick-dots li button::before {
-          opacity: 0; }
-  .sec-01 .slick-dotted.slick-slider {
-    margin-bottom: 0; }
-
-.sec-02 {
-  margin: 1.5rem 0;
-  margin-bottom: 2rem; }
-  .sec-02__slider {
-    width: 100%;
-    height: 100%; }
-    .sec-02__slider-1, .sec-02__slider-2, .sec-02__slider-3, .sec-02__slider-4, .sec-02__slider-5, .sec-02__slider-6 {
-      height: 32vh;
-      background-position: center center;
-      background-size: cover;
-      background-repeat: no-repeat; }
-
-.sec-03 {
-  margin-bottom: .8rem; }
-  .sec-03__tabdiv {
-    box-sizing: content-box;
-    border-bottom: 3px solid rgba(221, 221, 221, 0.863);
-    padding-left: .9rem;
-    padding-right: .9rem;
-    align-items: center;
-    justify-content: space-between; }
-    .sec-03__tabdiv .more {
-      padding-bottom: .4rem; }
-    .sec-03__tabdiv .nav-item {
-      position: relative;
-      padding-right: 6px;
-      padding-left: 6px; }
-      .sec-03__tabdiv .nav-item::after {
-        position: absolute;
-        content: " ";
-        width: 100%;
-        height: 60%;
-        left: 0;
-        top: 5px;
-        background-color: transparent;
-        border-right: 1px solid #b3b3b3;
-        z-index: -1; }
-      .sec-03__tabdiv .nav-item:nth-of-type(3)::after {
-        display: none; }
-    .sec-03__tabdiv .nav-item-link {
-      color: black;
-      font-weight: 400;
-      font-size: 1.2rem;
-      padding-bottom: .35rem;
-      border: none;
-      position: relative; }
-      @media screen and (max-width: 385px) {
-        .sec-03__tabdiv .nav-item-link {
-          font-size: 1.1rem; } }
-      .sec-03__tabdiv .nav-item-link.active {
-        color: #EE7800; }
-      .sec-03__tabdiv .nav-item-link::before {
-        position: absolute;
-        content: " ";
-        width: 101%;
-        height: 100%;
-        left: -2px;
-        top: 3px;
-        background-color: transparent;
-        border-bottom: 3px solid #EE7800;
-        opacity: 0; }
-    .sec-03__tabdiv .nav-item-link.active::before {
-      opacity: 1; }
-  .sec-03 .tab-content {
-    padding: .8rem 0; }
-  .sec-03 .tab-pane {
-    height: 100%; }
-  .sec-03 .tabpar {
-    min-width: 100%;
-    height: 100%;
-    overflow-x: auto;
-    display: flex;
-    padding: 0 12px;
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none; }
-    .sec-03 .tabpar::-webkit-scrollbar {
-      display: none; }
-    .sec-03 .tabpar__card {
-      margin: 3px;
-      display: inline-block;
-      min-width: 340px;
-      position: relative;
-      font-size: 14px; }
-      .sec-03 .tabpar__card__imgfr {
-        width: 100%;
-        height: 28vh;
-        overflow: hidden; }
-      .sec-03 .tabpar__card__img {
-        width: 100%;
-        height: 100%; }
-      .sec-03 .tabpar__card__play {
-        position: absolute;
-        right: 1rem;
-        bottom: 5rem;
-        width: 2.5rem; }
-
-.sec-04 {
-  background-color: #F4F4F4;
-  padding: 1.5rem 1rem; }
-  .sec-04 .card {
-    box-shadow: 1px 2px 8px 1px #d6d6d6;
-    text-decoration: none; }
-    .sec-04 .card-title {
-      font-size: 1.1rem;
-      line-height: 1.6rem;
-      color: #4C4C4C;
-      font-weight: 500; }
-    .sec-04 .card__imgfr {
-      width: 100%; }
-      .sec-04 .card__imgfr img {
-        width: 100%;
-        height: 100%; }
-
-.sec-05__video {
-  width: 100%;
-  height: 32vh;
-  position: relative; }
-  .sec-05__video__play {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    width: 3.5rem;
-    height: 3.5rem; }
-  .sec-05__video__img {
-    width: 100%;
-    height: 100%; }
-
-.sec-05 p {
-  font-size: 14px;
-  text-align: center; }
-
-.sec-06 .carousel {
-  height: 32vh; }
-  .sec-06 .carousel-inner {
-    height: 100%;
-    overflow: hidden; }
-  .sec-06 .carousel-item {
-    height: 100%;
-    width: 100%;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center; }
-  .sec-06 .carousel-control-next-icon, .sec-06 .carousel-control-prev-icon {
-    width: 2.5rem;
-    height: 2.5rem; }
-
-.sec-07__slider {
-  width: 100%; }
-
-.sec-07__imgfr {
-  width: 100%;
-  height: 28vh;
-  overflow: hidden; }
-  .sec-07__imgfr img {
-    width: 100%; }
-
-.sec-07__cardtxt {
-  font-size: 14px;
-  padding-right: .6rem; }
-
-.sec-07 .slick-dots {
-  width: 15%;
-  margin: 0 auto;
-  margin-top: 1.5rem;
-  height: 5px;
-  background-color: #d6d6d6;
-  border-radius: 1rem;
-  display: flex;
-  position: static; }
-  .sec-07 .slick-dots li {
-    margin: 0px;
-    width: 33.33%; }
-    .sec-07 .slick-dots li.slick-active button {
-      background-color: #EE7800; }
-    .sec-07 .slick-dots li button {
-      padding: 0;
-      width: 100%;
-      height: 5px;
-      border-radius: 1rem; }
-      .sec-07 .slick-dots li button::before {
-        opacity: 0; }
-
-.sec-07 .slick-dotted.slick-slider {
-  margin-bottom: 0; }
-
-.sec-08__slider {
-  height: 100%; }
-  .sec-08__slider-1, .sec-08__slider-2, .sec-08__slider-3 {
-    height: 28vh;
-    background-position: center center;
-    background-size: contain;
-    background-repeat: no-repeat; }
-
-.sec-09 {
-  margin-bottom: 1rem; }
-  .sec-09__cardgrp {
-    min-width: 100%;
-    height: 20vh;
-    overflow-x: auto;
-    display: flex;
-    box-shadow: 0 4px 2px -2px #d8d8d8;
-    -webkit-box-shadow: 0 4px 2px -2px #d8d8d8;
-    -moz-box-shadow: 0 4px 2px -2px #d8d8d8;
-    -ms-overflow-style: none;
-    /* IE and Edge */
-    scrollbar-width: none; }
-    .sec-09__cardgrp::-webkit-scrollbar {
-      display: none; }
-  .sec-09__card {
-    margin: 5px;
-    display: inline-block;
-    min-width: 35vw; }
-    .sec-09__card__imgfr {
-      width: 100%; }
-      .sec-09__card__imgfr img {
-        width: 100%;
-        height: 100%; }
-    .sec-09__card p {
-      font-size: 12.5px;
-      margin-top: .5rem; }
-
-.sec-10 {
-  margin-bottom: 1.5rem;
-  /* &__imgfr {
-        width: 100%;
-        height: 100%;
-        img{ 
-            width: 100%;
-        }
-    } */ }
-  .sec-10__slider {
-    width: 100%; }
-    .sec-10__slider-1, .sec-10__slider-2, .sec-10__slider-3, .sec-10__slider-4, .sec-10__slider-5, .sec-10__slider-6 {
-      height: 28vh;
-      background-position: center center;
-      background-size: cover;
-      background-repeat: no-repeat; }
-  .sec-10__cardtxt {
-    font-size: 14px; }
-
-.sec-11__slider {
-  width: 100%; }
-  .sec-11__slider-1, .sec-11__slider-2, .sec-11__slider-3, .sec-11__slider-4, .sec-11__slider-5, .sec-11__slider-6 {
-    height: 28vh;
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat; }
-
-.sec-11__imgfr {
-  width: 100%;
-  height: 100%; }
-  .sec-11__imgfr img {
-    width: 100%; }
-
-.sec-11__cardtxt {
-  font-size: 14px; }
-
-.morelink {
-  text-decoration: none;
-  color: #EE7800; }
-  .morelink:hover {
-    color: #EE7800; }
-
-.fixed_menu {
-  height: 82px;
-  position: fixed;
-  z-index: 4;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  background-color: #fff;
-  box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  -webkit-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 3px 14px 2px rgba(0, 0, 0, 0.12); }
-
-.sec-menu {
-  display: none;
-  z-index: 105;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-size: 14px; }
-  .sec-menu-block {
-    padding-top: 61px;
-    margin: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 100%;
-    overflow-y: scroll;
-    max-width: 100%;
-    background-color: white; }
-  .sec-menu-list {
-    background: white;
-    margin-bottom: 0; }
-    .sec-menu-list .navbar-nav {
-      padding: 0 2rem;
-      width: 100%; }
-      .sec-menu-list .navbar-nav .dropdown-menu {
-        border: none;
-        padding: 0;
-        height: 0;
-        opacity: 0;
-        transition: all 1s; }
-        .sec-menu-list .navbar-nav .dropdown-menu.show {
-          height: fit-content;
-          opacity: 1; }
-        .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item {
-          padding-left: 3rem; }
-          .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item.active, .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:focus {
-            background-color: white; }
-          .sec-menu-list .navbar-nav .dropdown-menu .dropdown-item:hover {
-            background-color: white; }
-        .sec-menu-list .navbar-nav .dropdown-menu .sub-menu .dropdown-item {
-          padding-left: 6rem; }
-    .sec-menu-list .nav-item {
-      font-size: 17px;
-      display: block;
-      width: 100%; }
-    .sec-menu-list .nav-link {
-      padding-top: 11px;
-      padding-bottom: 8px;
-      color: #707070;
-      position: relative; }
-      .sec-menu-list .nav-link .link_div {
-        width: 25px; }
-      .sec-menu-list .nav-link a {
-        color: #707070;
-        text-decoration: none; }
-      .sec-menu-list .nav-link.show i {
-        transform: rotate(-180deg); }
-      .sec-menu-list .nav-link .expand {
-        position: absolute;
-        right: 10px; }
-        .sec-menu-list .nav-link .expand i {
-          font-size: 11px;
-          color: #D3D3D3;
-          transition: all .5s; }
-      .sec-menu-list .nav-link.text-main {
-        color: #EE7800; }
-    .sec-menu-list .sub-link .expand {
-      position: absolute;
-      right: 20px;
-      top: 8px;
-      width: 1.5rem;
-      text-align: center; }
-    .sec-menu-list .sub-menu {
-      display: none; }
-    .sec-menu-list .sub-menu.show {
-      display: block; }
-    .sec-menu-list hr {
-      margin: 3px 0;
-      background-color: #bbbbbb; }
-  .sec-menu-follows {
-    padding: 2rem 2.5rem;
-    background-color: #e6e6e6ef;
-    margin-top: -9px; }
-    .sec-menu-follows-title {
-      color: #797979;
-      font-size: 14px; }
-  .sec-menu-links {
-    margin-bottom: 2.5rem; }
-    .sec-menu-links a {
-      color: #797979;
-      text-decoration: none;
-      display: inline-block;
-      padding: 1px 0;
-      border-bottom: 1px solid #acacac;
-      margin: 0 .6rem;
-      flex-wrap: nowrap; }
-      @media screen and (max-width: 385px) {
-        .sec-menu-links a {
-          margin: 0 .4rem; } }
-  .sec-menu .follows-fp {
-    color: #797979;
-    text-decoration: none;
-    font-weight: 400;
-    display: block;
-    padding-left: .5rem; }
-    .sec-menu .follows-fp:nth-of-type(1) {
-      margin-bottom: .6rem; }
-  .sec-menu .copyright {
-    color: #797979;
-    font-size: 13px; }
-
-.sec-search {
-  display: none;
-  z-index: 107;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-size: 14px; }
-  .sec-search-block {
-    padding-top: 61px;
-    margin: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100;
-    height: 100%;
-    overflow-y: scroll;
-    background-color: rgba(0, 0, 0, 0.774); }
-  .sec-search-list {
-    background-color: #F3F3F3;
-    padding: 1rem;
-    padding-bottom: 1.4rem; }
-    .sec-search-list hr {
-      background-color: #aaaaaa; }
-  .sec-search-form {
-    width: 100%; }
-  .sec-search .searchBar {
-    font-size: 17px;
-    padding: .5rem .3rem;
-    display: inline-block;
-    width: 88%;
-    outline: none;
-    border: 2px solid #EE7800;
-    border-radius: 5px; }
-  .sec-search .searchBtn {
-    outline: none;
-    border: none;
-    background-color: transparent;
-    display: inline-block;
-    width: 10%; }
-  .sec-search-hots {
-    padding: 1rem;
-    background-color: white;
-    box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
-    .sec-search-hots__title {
-      color: #AAAAAA;
-      font-size: 18px;
-      font-weight: 400;
-      padding-top: .5rem; }
-    .sec-search-hots__link {
-      display: inline-block;
-      text-decoration: none;
-      color: #797979;
-      border: 1px solid #797979;
-      border-radius: 3rem;
-      padding: .3rem .5rem;
-      margin-right: .8rem;
-      margin-bottom: .8rem; }
-      .sec-search-hots__link:hover {
-        color: #797979; }
-
-.sec-login {
-  display: none;
-  z-index: 109;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-size: 14px; }
-  .sec-login-block {
-    padding-top: 61px;
-    margin: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100;
-    height: 100%;
-    overflow-y: hidden;
-    background-color: #F3F3F3; }
-  .sec-login-list {
-    background-color: #F3F3F3;
-    padding: 1rem;
-    padding-bottom: 1.4rem; }
-    .sec-login-list hr {
-      background-color: #aaaaaa; }
-  .sec-login-btns {
-    padding: 1rem;
-    background-color: white;
-    box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
-
-.sec-favor {
-  display: block;
-  z-index: 111;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  font-size: 14px; }
-  .sec-favor-title {
-    color: #4C4C4C;
-    font-size: 18px; }
-  .sec-favor-block {
-    padding-top: 61px;
-    margin: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    width: 100;
-    height: 100%;
-    overflow-y: auto;
-    background-color: #F3F3F3; }
-  .sec-favor-list {
-    background-color: #F3F3F3;
-    padding: 1rem;
-    padding-bottom: 1.4rem; }
-    .sec-favor-list hr {
-      background-color: #aaaaaa; }
-  .sec-favor-form .form-user, .sec-favor-checklist .form-user {
-    width: 50%;
-    color: #707070;
-    font-size: 16px; }
-  .sec-favor-form .form-progressbar, .sec-favor-checklist .form-progressbar {
-    width: 50%;
-    display: flex;
-    justify-content: space-between; }
-    .sec-favor-form .form-progressbar li, .sec-favor-checklist .form-progressbar li {
-      width: 1.6rem;
-      height: 1.6rem;
-      border-radius: 50%;
-      border: 2px solid #D3D3D3;
-      line-height: 1.4rem;
-      display: flex;
-      justify-content: center;
-      position: relative;
-      color: #D3D3D3;
-      background-color: #F3F3F3;
-      z-index: 2; }
-      .sec-favor-form .form-progressbar li.active, .sec-favor-checklist .form-progressbar li.active {
-        border: 2px solid #EE7800;
-        color: #EE7800; }
-        .sec-favor-form .form-progressbar li.active::before, .sec-favor-checklist .form-progressbar li.active::before {
-          border-top: 2px solid #EE7800; }
-      .sec-favor-form .form-progressbar li::before, .sec-favor-checklist .form-progressbar li::before {
-        position: absolute;
-        content: " ";
-        width: 4rem;
-        height: 0;
-        border-top: 2px dashed #D3D3D3;
-        right: 100%;
-        top: 50%;
-        z-index: 1; }
-      .sec-favor-form .form-progressbar li:nth-of-type(1)::before, .sec-favor-checklist .form-progressbar li:nth-of-type(1)::before {
-        display: none; }
-  .sec-favor-form .form-step, .sec-favor-checklist .form-step {
-    background-color: white;
-    border-radius: 3px;
-    padding: 1.5rem 1rem;
-    padding-bottom: 1.5rem;
-    box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61);
-    overflow: visible; }
-    .sec-favor-form .form-step .next, .sec-favor-checklist .form-step .next {
-      padding: .6rem 5rem;
-      background-color: #EE7800;
-      border-radius: 3px;
-      color: white;
-      border: none;
-      outline: none; }
-  .sec-favor-form .form-step1, .sec-favor-checklist .form-step1 {
-    display: block; }
-  .sec-favor-form .form-step2, .sec-favor-checklist .form-step2 {
-    display: none; }
-  .sec-favor-form .form-step3, .sec-favor-checklist .form-step3 {
-    display: none;
-    position: relative;
-    padding-bottom: 1.5rem; }
-  .sec-favor-form input[type="checkbox"], .sec-favor-form input[type="radio"], .sec-favor-checklist input[type="checkbox"], .sec-favor-checklist input[type="radio"] {
-    display: none; }
-  .sec-favor-form .imgfr, .sec-favor-checklist .imgfr {
-    background-image: url("../images/2_2.webp");
-    background-position: center center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    width: 100%;
-    height: 4.5rem;
-    border-radius: 8px;
-    border: 2px solid transparent; }
-  .sec-favor-form h4, .sec-favor-checklist h4 {
-    color: #AAAAAA;
-    font-size: 15px;
-    font-weight: 400; }
-  .sec-favor-form input[type="checkbox"]:checked + .fs-label-info .imgfr, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-info .imgfr {
-    border: 2px solid #EE7800; }
-  .sec-favor-form input[type="checkbox"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="checkbox"]:checked + .fs-label-chbox {
-    border: 1px solid #EE7800;
-    color: #EE7800; }
-  .sec-favor-form input[type="radio"]:checked + .fs-label-chbox, .sec-favor-checklist input[type="radio"]:checked + .fs-label-chbox {
-    border: 1px solid #EE7800;
-    color: #EE7800; }
-  .sec-favor-form .step3-block, .sec-favor-checklist .step3-block {
-    margin-bottom: 1rem; }
-    .sec-favor-form .step3-block:nth-of-type(3), .sec-favor-checklist .step3-block:nth-of-type(3) {
-      margin-bottom: 0; }
-    .sec-favor-form .step3-block-title, .sec-favor-checklist .step3-block-title {
-      color: #AAAAAA;
-      display: block;
-      margin-bottom: .5rem;
-      font-size: 1rem; }
-    .sec-favor-form .step3-block .radio, .sec-favor-checklist .step3-block .radio {
-      display: inline-block;
-      padding: .25rem .7rem;
-      margin-right: .4rem;
-      border: 1px solid #707070;
-      border-radius: 2rem;
-      color: #797979;
-      margin-bottom: .5rem; }
-  .sec-favor-form .skip, .sec-favor-checklist .skip {
-    padding: .3rem 1rem;
-    color: #AAAAAA;
-    border: none;
-    outline: none;
-    background-color: transparent; }
-  .sec-favor-form .btngrp, .sec-favor-checklist .btngrp {
-    /* position: absolute;
-            left: 50%;
-            transform: translateX(-50%);
-            bottom: -6rem; */
-    display: flex;
-    flex-direction: column;
-    align-items: center; }
-    .sec-favor-form .btngrp .next, .sec-favor-checklist .btngrp .next {
-      transform: translateY(0rem); }
-  .sec-favor-checklist .form-user {
-    margin: 0 auto;
-    text-align: center;
-    margin-bottom: 1rem; }
-  .sec-favor-btns {
-    padding: 1rem;
-    background-color: white;
-    box-shadow: 0 0 15px 2px rgba(190, 190, 190, 0.61); }
-
-.text-main {
-  color: #EE7800; }
-
-.text-phone {
-  color: #EA068C;
-  text-decoration: none; }
-
-#videoModal .modal-content {
-  background-color: transparent;
-  border: none; }
-
-.fixed-btn {
-  position: fixed;
-  right: 15px;
-  bottom: 8rem; }
-  .fixed-btn .btn-gotop {
-    padding: 1.2rem .8rem;
-    background-color: rgba(255, 255, 255, 0.897);
-    display: flex;
-    align-items: center;
-    box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    -webkit-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
-    -moz-box-shadow: 1px 1px 1px -3px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12); }

index.html

@@ -265,16 +265,16 @@
       <div class="container-fluid" style="padding:0;margin:0;">
         <div class="sec-05__video mb-2" data-bs-toggle="modal" data-bs-target="#videoModal">
           <img src="images/Play-Button.png" alt="" class="sec-05__video__play">
-          <img src="images/maxresdefault.jpeg" alt="" class="sec-05__video__img">
+          <div class="sec-05__video__imgfr"></div>
         </div>
-        <p class="px-2">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</p>
+        <p class="px-2 sec-05__video__txt">EP.2 永久棟距開闊視野生態濕地公園首排連呼吸都療癒</p>
       </div>
     </section>
     <div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-body text-center">
-            <iframe width="340" height="230"></iframe>
+            <iframe width="340" height="230" allow="autoplay;"></iframe>
           </div>
         </div>
       </div>

js/getData.js

@@ -1,33 +0,0 @@
-let result;
-$.ajax({
-    method: "GET",
-    url: "../json/data.json",
-    dataType: "json",
-}).done(function (msg) {
-    result = [...msg];
-    console.log(result);
-    renderSec00(result);
-    renderSec02(result);
-});
-
-function renderSec00(data) {
-    let temp = data[0]['data'];
-    let str = '';
-    for(let i = 0; i < temp.length; i++){
-        console.log(temp[i]['imgUrl']);
-        str+= `<div class="sec-00__slider-${i+1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
-    }
-    $('.sec-00__slider').html(str);
-    console.log(str);
-}
-
-function renderSec02(data) {
-    let temp = data[1]['data'];
-    let str = '';
-    for(let i = 0; i < temp.length; i++){
-        console.log(temp[i]['imgUrl']);
-        str+= `<div class="sec-02__slider-${i+1}" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
-    }
-    $('.sec-02__slider').html(str);
-    console.log(str);
-}

js/index.js

@@ -11,7 +11,6 @@ $(".sec-01__slider").slick({
           dataType: "json",
       }).done(function (msg) {
           result = [...msg];
-          console.log(result);
           renderSec00(result);
           renderSec02(result);
           renderSec03(result);
@@ -21,13 +20,13 @@ $(".sec-01__slider").slick({
           renderSec09(result);
           renderSec10(result);
           renderSec11(result);
+          renderVideo(result);
       });
 
       function renderSec00(data) {
           let temp = data[0]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              console.log(temp[i]['imgUrl']);
               str+= `<div class="sec-00__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
           }
           $('.sec-00__slider').html(str);
@@ -42,7 +41,6 @@ $(".sec-01__slider").slick({
           let temp = data[1]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              console.log(temp[i]['imgUrl']);
               str+= `<div class="sec-02__slider-${i+1} slide-item" onclick="window.open('${temp[i]['link']}');" style="background-image: url('${temp[i]['imgUrl']}');"></div>`
           }
           $('.sec-02__slider').html(str);
@@ -111,7 +109,6 @@ $(".sec-01__slider").slick({
           let temp = data[3]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              console.log(temp[i]['imgUrl']);
               if(i === 0) {
                 str+= `<div class="carousel-item active" onclick="window.open('${temp[i]['link']}');"
                   style="background-image: url('${temp[i]['imgUrl']}');">
@@ -129,7 +126,6 @@ $(".sec-01__slider").slick({
           let temp = data[4]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              console.log(temp[i]['imgUrl']);
               str+= `
               <div class="sec-07__slider-${i+1} sec-07__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                 <div class="sec-07__imgfr mb-2"><img src="${temp[i]['imgUrl']}" alt=""></div>
@@ -185,10 +181,17 @@ $(".sec-01__slider").slick({
           let temp = data[7]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
-              str+= `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
+            if(temp[i].video == 'true') {
+              str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-10__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-10__card__play" src="images/Play-Button.png"></div>
+                    <p class="sec-10__cardtxt">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
+              str += `<div class="sec-10__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                     <div class="sec-10__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                     <p class="sec-10__cardtxt">${temp[i]['description']}</p>
-                    </div>`
+                    </div>`;
+            }
           }
           $('.sec-10__slider').html(str);
           $(".sec-10__slider").slick({
@@ -204,10 +207,17 @@ $(".sec-01__slider").slick({
           let temp = data[8]['data'];
           let str = '';
           for(let i = 0; i < temp.length; i++){
+            if(temp[i].video == 'true') {
+              str+= `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
+                    <div class="sec-11__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"><img class="sec-11__card__play" src="images/Play-Button.png"></div>
+                    <p class="sec-11__cardtxt">${temp[i]['description']}</p>
+                    </div>`;
+            } else {
               str+= `<div class="sec-11__card col-12 mx-1" onclick="window.open('${temp[i]['link']}');">
                     <div class="sec-11__slider-${i+1} mb-2 slide-item" style="background-image: url('${temp[i]['imgUrl']}');"></div>
                     <p class="sec-11__cardtxt">${temp[i]['description']}</p>
-                    </div>`
+                    </div>`;
+            }
           }
           $('.sec-11__slider').html(str);
           $(".sec-11__slider").slick({
@@ -219,6 +229,17 @@ $(".sec-01__slider").slick({
             centerPadding: '12px'
           });
       }
+      function renderVideo(data) {
+        let temp = data[9];
+        $('.sec-05__video__txt').text(temp['title']);
+        $('.sec-05__video__imgfr').css('background-image', `url(https://img.youtube.com/vi/${temp['yt']}/hqdefault.jpg)`);
+        $('#videoModal').on('shown.bs.modal', function () {
+            $('#videoModal iframe').attr('src', `https://www.youtube.com/embed/${temp['yt']}?controls=0&autoplay=1&amp;enablejsapi=1&amp;origin=https%3A%2F%2Fm.hhh.com.tw&amp;widgetid=1`);
+        });
+        $('#videoModal').on('hidden.bs.modal', function () {
+          $('#videoModal iframe').removeAttr('src');
+        });
+      }
     
     window.addEventListener('scroll', fixedOnScroll);
     
@@ -289,12 +310,10 @@ const searchHotLink = document.querySelectorAll('.sec-search-hots__link');
 searchBtn.addEventListener('click', search);
 searchBar.addEventListener('keyup', pressSearch);
 function search() {
-  console.log(searchBar.value);
   if(searchBar.value == '') {
     window.location.href = 'https://m.hhh.com.tw/search/lists/case/';
   } else {
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`;
-    console.log(`https://m.hhh.com.tw/search/lists/case/${searchBar.value}-keyword/`)
   }
 }
 
@@ -306,7 +325,6 @@ function pressSearch(e) {
 }
 
 searchHotLink.forEach((item, i) => {
-  console.log(item.textContent);
   item.addEventListener('click', function() {
     window.location.href = `https://m.hhh.com.tw/search/lists/case/${this.textContent}-keyword/`;
   })

json/data.json

@@ -214,27 +214,32 @@
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer355_14_02.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/13369/",
-                "description": "被落羽松環繞 都市裡的日式步調"
+                "description": "被落羽松環繞 都市裡的日式步調",
+                "video": "false"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_12994_20210202192001.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/12994/",
-                "description": "奔跑吧親子宅 我家比公園好玩"
+                "description": "奔跑吧親子宅 我家比公園好玩",
+                "video": "true"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13584_20210816172801.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/13584/",
-                "description": "又見單寧！歲月沉澱後的退休生活"
+                "description": "又見單寧！歲月沉澱後的退休生活",
+                "video": "false"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer432_42_03.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/12999/",
-                "description": "混搭風│極簡無印"
+                "description": "混搭風│極簡無印",
+                "video": "false"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcolumn_orig/point02_134_01.jpg",
                 "link": "https://m.hhh.com.tw/columns/detail/5436/",
-                "description": "憂慮「醛」消失！拭除疲憊的馨暖和風"
+                "description": "憂慮「醛」消失！拭除疲憊的馨暖和風",
+                "video": "false"
             }
         ]
     },
@@ -245,28 +250,39 @@
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/designer738_04_03.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/13071/",
-                "description": "木質系灰藍曲調｜英式混搭寓所｜小坪數"
+                "description": "木質系灰藍曲調｜英式混搭寓所｜小坪數",
+                "video": "false"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/name_11746_20191015155016.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/11746/",
-                "description": "跳脫傳統設計 斜角開創通透大空間"
+                "description": "跳脫傳統設計 斜角開創通透大空間",
+                "video": "false"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_13125_20210319112543.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/13125/",
-                "description": "馨暖木韻蔓延 藝術家的舒心逸境｜現代風｜3房、2廳、2衛｜25坪"
+                "description": "馨暖木韻蔓延 藝術家的舒心逸境｜現代風｜3房、2廳、2衛｜25坪",
+                "video": "true"
             },
             {
                 "imgUrl": "https://images.hhh.com.tw/uploads/_hcase_orig/name_12523_20200717134716.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/12523/",
-                "description": "變形與組合──複合式的空間設計（中）"
+                "description": "變形與組合──複合式的空間設計（中）",
+                "video": "false"
             },
             {
                 "imgUrl": "https://cloud.hhh.com.tw/upload/_hcase_img_orig/name_12835_20201204092123.jpg",
                 "link": "https://m.hhh.com.tw/cases/detail/12835/",
-                "description": "風華英倫、意境品味"
+                "description": "風華英倫、意境品味",
+                "video": "false"
             }
         ]
+    },
+    {
+        "id": 9,
+        "block": "video",
+        "title": "不是寵物是家人 毛小孩專屬智能宅",
+        "yt": "IIV2ZvIojc4"
     }
 ]

sass/main.css

@@ -267,7 +267,6 @@ body {
   margin: 3px;
   display: inline-block;
   min-width: 340px;
-  position: relative;
   font-size: 14px;
 }
 
@@ -275,17 +274,20 @@ body {
   width: 100%;
   height: 28vh;
   overflow: hidden;
+  position: relative;
 }
 
 .sec-03 .tabpar__card__img {
   width: 100%;
-  height: 100%;
+  height: 140%;
+  -webkit-transform: translateY(-15%);
+          transform: translateY(-15%);
 }
 
 .sec-03 .tabpar__card__play {
   position: absolute;
-  right: 1rem;
-  bottom: 5rem;
+  right: 1.2rem;
+  bottom: 1rem;
   width: 2.5rem;
 }
 
@@ -318,7 +320,7 @@ body {
 
 .sec-05__video {
   width: 100%;
-  height: 32vh;
+  height: 30vh;
   position: relative;
 }
 
@@ -332,9 +334,12 @@ body {
   height: 3.5rem;
 }
 
-.sec-05__video__img {
+.sec-05__video__imgfr {
   width: 100%;
-  height: 100%;
+  height: 30vh;
+  background-position: center center;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .sec-05 p {
@@ -495,6 +500,15 @@ body {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
+  position: relative;
+}
+
+.sec-10__card__play {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
 }
 
 .sec-10__cardtxt {
@@ -510,6 +524,7 @@ body {
   background-position: center center;
   background-size: cover;
   background-repeat: no-repeat;
+  position: relative;
 }
 
 .sec-11__imgfr {
@@ -521,6 +536,14 @@ body {
   width: 100%;
 }
 
+.sec-11__card__play {
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  width: 2.5rem;
+  height: 2.5rem;
+}
+
 .sec-11__cardtxt {
   font-size: 14px;
 }

sass/main.scss

@@ -214,21 +214,22 @@ body {
             margin: 3px;
             display: inline-block;
             min-width: 340px;
-            position: relative;
             font-size: 14px;
             &__imgfr {
                 width: 100%;
                 height: 28vh;
                 overflow: hidden;
+                position: relative;
             }
             &__img {
                 width: 100%;
-                height: 100%;
+                height: 140%;
+                transform: translateY(-15%);
             }
             &__play {
                 position: absolute;
-                right: 1rem;
-                bottom: 5rem;
+                right: 1.2rem;
+                bottom: 1rem;
                 width: 2.5rem;
             }
         }
@@ -260,7 +261,7 @@ body {
 .sec-05 {
     &__video {
         width: 100%;
-        height: 32vh;
+        height: 30vh;
         position: relative;
         &__play {
             position: absolute;
@@ -270,10 +271,14 @@ body {
             width: 3.5rem;
             height: 3.5rem;
         }
-        &__img {
+        &__imgfr {
             width: 100%;
-            height: 100%;
+            height: 30vh;
+            background-position: center center;
+            background-size: cover;
+            background-repeat: no-repeat;
         }
+        
     }
     p {
         font-size: 14px;
@@ -409,6 +414,7 @@ body {
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
+            position: relative;
         }
     }
     /* &__imgfr {
@@ -418,6 +424,13 @@ body {
             width: 100%;
         }
     } */
+    &__card__play {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        width: 2.5rem;
+        height: 2.5rem;
+    }
     &__cardtxt {
         font-size: 14px;
     }
@@ -431,6 +444,7 @@ body {
             background-position: center center;
             background-size: cover;
             background-repeat: no-repeat;
+            position: relative;
         }
     }
     &__imgfr {
@@ -440,6 +454,13 @@ body {
             width: 100%;
         }
     }
+    &__card__play {
+        position: absolute;
+        right: 1rem;
+        bottom: 1rem;
+        width: 2.5rem;
+        height: 2.5rem;
+    }
     &__cardtxt {
         font-size: 14px;
     }