@media screen and (min-width: 801px) {
  .hover-under-line {
    content: "";
    width: 100%;
    height: 1px;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
  }
}
@media screen and (max-width: 800px) {
  .content-width {
    max-width: 84vw;
    margin: 0 auto;
    position: relative;
  }
}
@-webkit-keyframes hover-underline {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50.1% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes hover-underline {
  0% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  50% {
    -webkit-transform-origin: right;
            transform-origin: right;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  50.1% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  100% {
    -webkit-transform-origin: left;
            transform-origin: left;
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@media screen and (min-width: 801px) {
  .remodal-wrapper {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .remodal-wrapper::-webkit-scrollbar {
    display: none;
  }
  .heading {
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    line-height: 1.33;
    margin-bottom: 58px;
  }
  .main__box {
    height: 146px;
  }
  .main__box .main-title {
    padding-top: 5px;
  }
  .videos {
    padding: 67px 0 0;
  }
  .videos__inner {
    width: 462px;
    margin: 0 auto 100px;
  }
  .graphics {
    text-align: right;
  }
  .graphics__inner {
    width: 460.5px;
    margin: 0 auto;
  }
  .graphics__image {
    margin-bottom: 28px;
  }
  .graphics__image a {
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  .graphics__image a:hover {
    opacity: 0.8;
  }
  .graphics .btn-zoom {
    margin-bottom: 60px;
    position: relative;
  }
  .category-title {
    line-height: 1.363;
    margin-bottom: 34px;
  }
  section {
    overflow: hidden;
  }
  .movie {
    position: relative;
    padding-top: 56.3%;
    margin-bottom: 60px;
  }
  .movie.player1, .movie.player9 {
    padding-top: 83.6%;
    width: 47%;
    margin: 0 auto 60px;
  }
  .movie.player1 .thumb, .movie.player9 .thumb {
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .movie.player1 .thumb::before, .movie.player9 .thumb::before {
    z-index: 3;
  }
  .movie.player1 .thumb img, .movie.player9 .thumb img {
    width: auto;
    max-width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
  }
  .movie.player1 iframe, .movie.player9 iframe {
    z-index: 1;
  }
  .movie.player1 body, .movie.player9 body {
    background: none;
  }
  .movie .thumb {
    position: absolute;
    top: 0;
    cursor: pointer;
    z-index: 1;
  }
  .movie .thumb:hover::before {
    background: url(../img/common/btn_play_wh_on.svg) no-repeat;
    background-size: contain;
  }
  .movie .thumb::before {
    content: "";
    display: block;
    width: 65px;
    height: 65px;
    background: url(../img/common/btn_play_wh.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}
@media screen and (max-width: 800px) {
  .heading {
    font-size: 6.9333333333vw;
    font-weight: bold;
    line-height: 1.46;
    text-align: center;
    margin-bottom: 9.5vw;
  }
  .main__box {
    height: 48.5333333333vw;
  }
  .main__box .sub-title {
    margin-bottom: 8.2vw;
    margin-left: 5vw;
  }
  .main__image {
    position: relative;
  }
  .movie {
    position: relative;
    padding-top: 56.3%;
    margin-bottom: 11vw;
  }
  .movie.player1, .movie.player9 {
    padding-top: 84%;
    width: 47.4%;
    margin: 0 auto 11vw;
  }
  .movie.player1 .thumb, .movie.player9 .thumb {
    width: 100%;
    height: 100%;
    z-index: 2;
  }
  .movie.player1 .thumb::before, .movie.player9 .thumb::before {
    z-index: 3;
  }
  .movie.player1 .thumb img, .movie.player9 .thumb img {
    width: auto;
    max-width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
  }
  .movie.player1 iframe, .movie.player9 iframe {
    z-index: 1;
  }
  .movie .thumb {
    position: absolute;
    top: 0;
    cursor: pointer;
    z-index: 1;
  }
  .movie .thumb:hover::before {
    background: url(../img/common/btn_play_wh_on.svg) no-repeat;
    background-size: contain;
  }
  .movie .thumb::before {
    content: "";
    display: block;
    width: 16.8vw;
    height: 16.8vw;
    background: url(../img/common/btn_play_wh.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 3;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  .movie iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
  .category-title {
    line-height: 1.3125;
    margin-bottom: 5vw;
  }
  .videos {
    padding-top: 17vw;
  }
  .videos__inner {
    width: 84vw;
    margin: 0 auto 18vw;
  }
  .graphics {
    text-align: right;
  }
  .graphics__inner {
    width: 84vw;
    margin: 0 auto;
  }
  .graphics .btn-zoom {
    margin-top: 4.3vw;
    display: inline-block;
    font-size: 3.2vw;
    font-weight: bold;
    width: 12.2666666667vw;
    height: 5.8666666667vw;
    margin-right: 4.8vw;
    text-align: center;
    margin-bottom: 11vw;
    position: relative;
  }
  .graphics .btn-zoom a {
    display: block;
    width: 100%;
    height: 100%;
    padding-right: 0;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
  .graphics .btn-zoom a::before {
    content: "";
    display: block;
    width: 3.7333333333vw;
    height: 4vw;
    background: url(../img/common/icon_zoom.svg) no-repeat;
    background-size: contain;
    position: absolute;
    top: 0.5vw;
    right: -4.8vw;
  }
  .graphics .btn-zoom a::after {
    content: "";
    width: 100%;
    height: 1px;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
  }
  .graphics .btn-zoom a:hover::after {
    -webkit-animation-name: hover-underline;
            animation-name: hover-underline;
    -webkit-animation-duration: 0.6s;
            animation-duration: 0.6s;
    -webkit-animation-timing-function: linear;
            animation-timing-function: linear;
  }
  .remodal .modalCloseTop {
    width: 6.9333333333vw;
    position: absolute;
    right: 0;
    top: -10.6666666667vw;
    margin-top: 0;
  }
}
@media screen and (min-width: 801px) and (max-width: 1280px) {
  .videos__inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
  .graphics__inner {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}