:root {
}
* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
 }
.story_banner {
 height: 817px;
 }
body > section {
 position: relative;
 }
body > section:hover {
  }
.content {
 max-width: 1328px;
 margin: 0px auto;
 position: relative;
 }
.story_banner .content, .story_banner .content > .flex {
 height: 100%;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.flex {
 display: flex;
 }
.flex_middle {
 align-items: center;
 }
.story_banner .content > .flex .head {
 color: rgb(255, 255, 255);
 }
.ovo-regular {
 font-family: Ovo, serif;
 font-weight: 400;
 }
.story_banner .content > .flex .head h1 {
 font-size: 108px;
 }
.fadeInLeft {
 animation-name: fadeInLeft;
 }
.story_banner .content > .flex .head p {
 font-size: 22px;
 max-width: 500px;
 margin-top: 1.2rem;
 }
button, input, textarea {
 outline: none;
 border: none;
 font-family: unset;
 }
input[type="submit"], button {
 cursor: pointer;
 }
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_banner .content > .flex .head h1{
    font-size: 30px;
    line-height: 1.5;
 }
 .story_banner .content > .flex .head p{
    font-size: 0.9rem;
    line-height: 1.5rem;
    margin-top: 0;
 }
 .story_banner{
    height: auto;
    padding: 5rem 0;
 }
}
.story_collection {
 padding: 160px 0px;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.story_collection > .content > .flex {
 gap: 5rem;
 }
.story_collection .left {
 max-width: 500px;
 }
.story_collection .left strong {
 display: block;
 line-height: 26px;
 font-size: 17px;
 margin-bottom: 3rem;
 }
a {
 color: rgb(0, 0, 0);
 text-decoration: none;
 font-size: 1rem;
 }
.button_t {
 background-color: rgb(0, 0, 0);
 font-size: 13px;
 border: 2px solid rgb(0, 0, 0);
 border-radius: 5px;
 color: rgb(255, 255, 255);
 display: inline-block;
 transition: all 0.3s ease 0s;
 padding: 13px 26px;
 }
.button_t:hover {
 background-color: transparent;
 color: rgb(0, 0, 0);
 }
.story_collection .right {
 position: relative;
 }
.story_collection .right .images1 {
 position: absolute;
 top: 0px;
 left: 100px;
 z-index: 9;
 transition: all 1s ease 0s;
 }
.story_collection .right .images2 {
 position: absolute;
 top: 55px;
 z-index: 8;
 transition: all 1s ease 0s;
 }
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_collection > .content > .flex{
    flex-flow: wrap;
    gap: 3rem;
 }
 .story_collection > .content > .flex .left{
    width: 100%;
 }
 .story_collection > .content > .flex .right{
    width: 100%;
 }
 .story_collection .right .images2{
    max-width: 100%;
    position: unset;
    aspect-ratio: 1/1;
 }
 .story_collection .right img{
    max-width: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .story_collection .left strong{
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 1rem;
 }
 .story_collection{
    padding: 3rem 0;
 }
 .story_collection .button_t{
    padding: 0.6rem 1.5rem;
    font-size: 0.8rem;
 }
 .story_collection .right .images1{
    position: unset;
    aspect-ratio: 1/1;
 }
}
.story_quality {
 height: 1047px;
 background-size: cover;
 background-repeat: no-repeat;
 }
.story_quality .content, .story_quality .content > .flex {
 height: 100%;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.flex_center {
 justify-content: center;
 }
.story_quality .content > .flex .head {
 text-align: center;
 color: rgb(255, 255, 255);
 }
.head h2 {
 font-size: 3rem;
 font-weight: 700;
 line-height: 59px;
 }
.story_quality .content > .flex .head h2 {
 font-weight: 400;
 font-size: 50px;
 }
.fadeInUp {
 animation-name: fadeInUp;
 }
.story_quality .content > .flex .head strong {
 display: block;
 margin-top: 2rem;
 font-weight: 600;
 }
 
@media screen and (max-width: 786px){

.content {
     padding: 0px 1.2rem;
 }
 .story_quality{
    height: auto;
    padding: 5rem 0;
 }
 .story_quality .content > .flex .head h2{
    font-size: 25px;
    line-height: 1.5;
 }
 .story_quality .content > .flex .head strong{
    font-size: 0.9rem;
 }
}
.story_premium {
 padding: 150px 0px;
 }
ul {
 list-style: none;
 }
.story_premium .story_premium_list ul {
 gap: 0px 172px;
 }
.story_premium .story_premium_list ul {
 margin-bottom: 140px;
 }
.flex1 {
 flex: 1 1 0%;
 }
.fadeIn {
 animation-name: fadeIn;
 }
.story_premium .story_premium_list ul li strong {
 font-size: 22px;
 display: block;
 margin-bottom: 40px;
 font-weight: 600;
 }
.story_premium .story_premium_list ul li p {
 font-weight: 600;
 font-size: 17px;
 line-height: 26px;
 }
.story_premium .story_premium_list .image_box {
 max-width: 938px;
 overflow: hidden;
 }
.story_premium .story_premium_list .image_box img {
 transition: all 0.5s ease 0s;
 }
.story_premium .story_premium_list .image_box img:hover {
 transform: scale(1.02);
 }
.story_premium .story_premium_list .button_action {
 margin-top: 60px;
 }

 
@media screen and (min-width: 786px) and (max-width: 1600px){
  .content {
    padding: 0px 1.2rem;
   }
}

@media screen and (min-width: 786px) and (max-width: 1200px){
  .story_premium .story_premium_list ul{
    justify-content: space-between;
    gap: 1rem;
  }
}
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_premium{
    padding: 2rem 0;
 }
 .story_premium .story_premium_list ul{
    gap: 1rem;
    flex-direction: column;
    margin-bottom: 1.5rem;
 }
 .story_premium .story_premium_list ul li strong{
    font-size: 18px;
    margin-bottom: 0.5rem;
 }
 .story_premium .story_premium_list ul li p{
    font-size: 0.9rem;
    line-height: 1.5rem;
 }
 .story_premium .story_premium_list .image_box img{
    width: 100%;
    height: auto;
 }
 .story_premium .button_t{
    padding: 0.6rem 1.5rem;
    font-size: 0.8rem;
 }
 .story_premium .story_premium_list .button_action{
    margin-top: 1rem;
 }
}
 .story_masterpiece{
  overflow: hidden;
 }
.story_masterpiece .content {
 max-width: 1380px;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.center {
 text-align: center;
 }
.story_masterpiece .content .head {
 max-width: 800px;
 margin-bottom: 115px;
 }
.story_masterpiece .content .head h2 {
 font-size: 22px;
 font-weight: 600;
 }
.story_masterpiece .content .head p {
 font-weight: 500;
 line-height: 26px;
 }
.story_masterpiece .story_masterpiece_box {
 position: relative;
 padding-bottom: 15rem;
 }
.story_masterpiece .story_masterpiece_box .image1 {
 max-width: 1103px;
 position: relative;
 z-index: 2;
 transition: all 1s ease 0s;
 }
.story_masterpiece .story_masterpiece_box .image1 img {
 width: 100%;
 }
.story_masterpiece .story_masterpiece_box .image2 {
 position: absolute;
 top: 15%;
 z-index: 9;
 left: 52%;
 max-width: 666px;
 transition: all 1s ease 0s;
 }
.story_masterpiece .story_masterpiece_box .image3 {
 position: absolute;
 max-width: 718px;
 bottom: 0px;
 left: 28%;
 z-index: 1;
 transition: all 1s ease 0s;
 }
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_masterpiece .content .head h2{
    line-height: 1.5;
    margin: 1rem 0;
 }
 .story_masterpiece .content .head p{
    font-size: 0.9rem;
    line-height: 1.5rem;
 }
 .story_masterpiece .content .head{
    margin-bottom: 1rem;
 }
 .story_masterpiece .story_masterpiece_box{
    padding-bottom: 0;
 }

 .story_masterpiece .story_masterpiece_box >div{
    position: unset !important;
    aspect-ratio: 1/1;
    transform: none !important;
 }
 .story_masterpiece .story_masterpiece_box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
 .story_masterpiece .story_masterpiece_box .image2{
    margin-bottom: 1rem;
    margin-top: 1rem;
 }
}
.story_engraved {
 padding: 120px 0px;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.story_engraved > .content > .head {
 margin-bottom: 6rem;
 }
.story_engraved > .content > .head h2 {
 font-size: 22px;
 }
.story_engraved > .content > .head p {
 max-width: 280px;
 margin: 1rem auto 0px;
 font-weight: 600;
 line-height: 26px;
 }
.story_engraved > .content .story_engraved_box {
 overflow: hidden;
 }
.story_engraved > .content .story_engraved_box img:hover {
 transform: scale(1.01);
 }
.story_engraved > .content .story_engraved_box img {
 max-width: 1328px;
 vertical-align: top;
 transition: all 0.5s ease 0s;
 }
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_engraved{
    padding: 2rem 0;
 }
 .story_engraved > .content > .head h2{
    line-height: 1.4;
 }
 .story_engraved > .content > .head p{
    max-width: 100%;
    line-height: 1.5rem;
    font-size: 0.9rem;
 }
 .story_engraved > .content > .head{
    margin-bottom: 2rem;
 }
 .story_engraved > .content .story_engraved_box{
    aspect-ratio: 1/1;
 }
 .story_engraved > .content .story_engraved_box img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
 }
}
.story_strongest {
 padding-bottom: 12rem;
 }
@media screen and (min-width: 786px) and (max-width: 1600px){
.content {
 padding: 0px 1.2rem;
 }}
.story_strongest .head h2 {
 font-size: 35px;
 font-weight: 500;
 margin-bottom: 2.5rem;
 }
 
@media screen and (max-width: 786px){

.content {
 padding: 0px 1.2rem;
 }
 .story_strongest .head h2{
    font-size: 22px;
    line-height: 1.5;
    margin-bottom: 1.5rem;
 }
 .story_strongest .button_t{
    padding: 0.6rem 1.5rem;
 }
}