@import url('https://fonts.googleapis.com/css2?family=Gideon+Roman&display=swap');
.roman {font-family: 'Gideon Roman', cursive;}

#brandStory.story .shop_banner {width: 100%; height: 100vh;}
#brandStory.story .shop_banner {background: url(https://www.innovad.co.kr/theme/innovad_v2/img/sub01/story_banner.jpg) no-repeat center center; background-size: cover;}

.story_title_wrap {text-align: center;}
.story_title_wrap .title {font-size: 5.3125em; font-weight: 100;}
.story_title_wrap .desc {font-size: 1.5em;}
.story_title_wrap .desc::after {content: ""; display: block; width: 40px; height: 1px; background: #222; margin: 60px auto;}
.story_title_wrap .cont {font-size: 1.5em; font-weight: 300; line-height: 165%;}
.story_title_wrap .cont p:not(:last-child) {margin-bottom: 40px;}

.storySec1 .story_title_wrap {margin: 160px 0 150px; padding: 0 20px;}
.storySec2 .story_title_wrap {margin: 320px 0 120px; padding: 0 20px;}
.storySec3 .story_title_wrap {margin: 230px 0 80px;}
.storySec4 .story_title_wrap {margin: 230px 0 80px;}

.story_img_box {display: flex; align-items: flex-end;}
.story_img_box:not(:last-child) {margin-bottom: 160px;}
.story_img_box .content {width: 75%; position: relative; padding-top: 16%;/* padding-top: 300px; */}
.story_img_box .color_box {width: 100%; height: 0; padding-top: 39.717%; /* height: 560px; */ background: #222; display: flex; align-items: flex-end;}
.story_img_box.lt .color_box {padding-right: 120px; justify-content: flex-end;}
.story_img_box.rt .color_box {padding-left: 120px; justify-content: flex-start;}
.story_img_box .color_box .img_info {padding-bottom: 50px; font-size: 1.3125em; display: flex; align-items: center; color: #fff;}
.story_img_box .color_box .line {width: 160px; height: 1px; background: #fff; margin: 0 35px;}
.story_img_box.rt .color_box .img_info {color: #222;}
.story_img_box.rt .color_box {background: #ff9900; color: #222;}
.story_img_box.rt .color_box .line {background: #222;}
.story_img_box .img_box {position: absolute; right: 120px; bottom: 120px; width: 75.178%; height: 0; padding-bottom: 52.483%;}
.story_img_box .img_box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.story_img_box.rt .img_box {right: auto; left: 120px;}
.story_img_box .keyword {width: 25%;}
.story_img_box .rotate_txt {font-family: 'Gideon Roman', cursive; font-size: 6.625em; font-weight: bold; text-shadow: -1px -1px 0 #ccc, 1px -1px 0 #ccc, -1px 1px 0 #ccc, 1px 1px 0 #ccc; color: #fffcf5; writing-mode: vertical-rl; padding-left: 100px;}
.story_img_box.rt .rotate_txt {margin-left: auto; transform: rotate(180deg);}
.storySec1 .story_title_wrap .cont:not(:last-child) {margin-bottom: 40px;}
.storySec1 .story_title_wrap .plus_btn {display: none; margin: 30px auto 0;}

.storySec2 .story_title_wrap .cont {margin-top: 60px;}
.storySec2 .story_video_wrap {margin-bottom: 125px;}
.storySec2 .story_video_wrap .video_thumb {position: relative; height: 0; padding-bottom: 56.25%;}
.storySec2 .story_video_wrap .video_thumb img.thumb {position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; z-index: 2;}
.storySec2 .story_video_wrap .video_thumb img.play_btn {cursor: pointer; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3;}
.storySec2 .story_video_wrap .video_thumb.play img.thumb {visibility: hidden;}
.storySec2 .story_video_wrap .video_thumb.play img.play_btn {visibility: hidden;}
.storySec2 .story_video_wrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}

.storySec2 .herman_box_wrap {display: flex; column-gap: 40px;}
.storySec2 .herman_box_wrap li {width: calc((100% - 80px)/3);}
.storySec2 .herman_box_wrap li .img_box img {filter: grayscale(1); transition: filter .3s;}
.storySec2 .herman_box_wrap li:hover .img_box img {filter:grayscale(0);}
.storySec2 .herman_box_wrap li .txt_box {padding: 50px 0 40px; border-bottom: 1px solid #ccc; height: calc(100% - 600px);}
.storySec2 .herman_box_wrap li .txt_box .title {font-size: 2.625em; font-weight: 500; margin-bottom: 35px;}
.storySec2 .herman_box_wrap li .txt_box .cont {font-size: 1.25em; font-weight: 300; line-height: 155%;}

.storySec3 .g_m_badge {background: #222; color: #fff; font-size: 1.625em; padding: 25px 65px; width: fit-content;}
.storySec3 .w_badge {font-size: 1.325em; font-weight: 300; padding: 25px 110px; background: #fff; position: absolute; right: 0; bottom: -35px;}
.storySec3 .view_btn {font-size: 1.325em; font-weight: 300; border: 1px solid #ccc; padding: 25px 85px; margin: 75px auto 0; width: fit-content; transition: background .3s, color .3s;}
.storySec3 .view_btn:hover {background: #ccc; color: #fff;}
.storySec3 .gallery_wrap {margin-bottom: 200px;}
.storySec3 .gallery_wrap .storyGallerySwiper_wrap {position: relative;}
.storySec3 .gallery_wrap .swiper-button-prev {width: 110px; height: 111px; left: 0; margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)) !important;}
.storySec3 .gallery_wrap .swiper-button-next {width: 110px; height: 111px; right: 0; margin-top: calc(0px - (var(--swiper-navigation-size)/ 2)) !important;}
.storySec3 .gallery_wrap .swiper {padding-bottom: 35px;}
.storySec3 .gallery_wrap .view_btn {margin-top: 15px;}
.storySec3 .magazine_wrap .magazine_box_wrap {display: flex; column-gap: 40px;}
.storySec3 .magazine_wrap .magazine_box_wrap li {width: calc((100% - 80px)/3); position: relative;}
.storySec3 .magazine_wrap .magazine_box_wrap li .img_box {position: relative; height: 0; padding-bottom: 145.682%; overflow: hidden;}
.storySec3 .magazine_wrap .magazine_box_wrap li .img_box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s, filter .3s;}
.storySec3 .magazine_wrap .magazine_box_wrap li:hover .img_box img {transform: scale(1.05); filter: brightness(0.8);}

.storySec4 .news_wrap {margin-bottom: 80px;}
.storySec4 .news_list li:not(:last-child) {margin-bottom: 45px;}
.storySec4 .news_wrap .plus_btn {margin-top: 60px;}

.storySec4 .partner_wrap {<!-- margin-bottom: 80px; -->}
.storySec4 .partner_wrap .partner_title {font-size: 2.625em; font-weight: 500; margin-bottom: 120px;}
.storySec4 .partner_wrap ul {display: flex; flex-wrap: wrap; <!-- row-gap: 50px; -->}
.storySec4 .partner_wrap ul li {width: 26.5%; display: flex; justify-content: center; align-items: center; padding: 15px;}
.storySec4 .partner_wrap ul li img {object-fit: cover; max-width: 85%;}
.storySec4 .partner_wrap ul li:nth-child(4n-3) {width: 20.5%; justify-content: flex-start;}



@media screen and (max-width: 1440px) {
  .story_title_wrap .title {font-size: 4.75em;}
  .story_title_wrap .desc {font-size: 1.4em;}
  .story_title_wrap .cont {font-size: 1.25em;}
  .story_title_wrap .cont p:not(:last-child) {margin-bottom: 35px;}
  .storySec1 .story_title_wrap .cont:not(:last-child) {margin-bottom: 35px;}

  .storySec2 .herman_box_wrap li .txt_box {height: auto;}
  .storySec2 .herman_box_wrap li .txt_box .title {font-size: 2.325em; margin-bottom: 25px;}
  .storySec2 .herman_box_wrap li .txt_box .cont {font-size: 1.125em;}
  .storySec2 .herman_box_wrap li .txt_box .cont br {display: none;}
}


@media screen and (max-width: 1240px) {
  .story_img_box:not(:last-child) {margin-bottom: 16%;}
  .story_img_box .content {width: 85%; padding-top: 15%;}
  .story_img_box .keyword {width: 15%;}
  .story_img_box .rotate_txt {font-size: 6vw; margin: 0 auto; padding: 0;}
  .story_img_box .img_box {width: 90%; padding-bottom: 50%; right: 5%; bottom: 16%;}
  .story_img_box.rt .img_box {left: 5%;}
  .story_img_box.lt .color_box {padding-right: 5%;}
  .story_img_box.rt .color_box {padding-left: 5%;}
  .story_img_box .color_box .img_info {width: 100%; font-size: 1.875vw; padding-bottom: 3%; justify-content: flex-end;}
  .story_img_box.rt .color_box .img_info {justify-content: flex-start;}
  .story_img_box .color_box .line {width: 12%; margin: 0 4%;}

  .storySec3 .magazine_box_wrap .w_badge {padding: 25px 0; width: 80%; text-align: center;}
}


@media screen and (max-width: 1024px) {
  .storySec1 .story_title_wrap {margin: 16% 0 15%;}
  .story_title_wrap .title {font-size: 4.25em;}
  .story_title_wrap .desc {font-size: 1.25em;}
  .story_title_wrap .desc::after {margin: 50px auto;}
  .story_title_wrap .cont {font-size: 1.125em;}
  .story_title_wrap .cont br {display: none;}

  .storySec2 .story_title_wrap {margin: 30% 0 12%;}
  .storySec2 .story_title_wrap .cont {margin-top: 6%;}
  .storySec2 .story_video_wrap {margin-bottom: 12%;}
  .storySec2 .herman_box_wrap {column-gap: 30px;}
  .storySec2 .herman_box_wrap li {width: calc((100% - 60px)/3);}
  .storySec2 .herman_box_wrap li .txt_box {padding: 40px 0 30px;}
  .storySec2 .herman_box_wrap li .txt_box .title {font-size: 2em; margin-bottom: 20px;}
  .storySec2 .herman_box_wrap li .txt_box .cont {font-size: 1.05em;}

  .storySec3 .gallery_wrap {margin-bottom: 20%;}
  .storySec3 .story_title_wrap {margin: 23% 0 8%;}
  .storySec3 .gallery_wrap .swiper-button-next {width: 70px; height: 71px;}
  .storySec3 .gallery_wrap .swiper-button-prev {width: 70px; height: 71px;}
  .storySec3 .g_m_badge {font-size: 1.325em; padding: 20px 50px;}
  .storySec3 .w_badge {font-size: 1.25em; padding: 16px 80px; bottom: -30px;}
  .storySec3 .gallery_wrap .swiper {padding-bottom: 30px;}
  .storySec3 .view_btn {font-size: 1.125em; padding: 15px 60px;}
  .storySec3 .gallery_wrap .view_btn {margin-top: 25px;}
  .storySec3 .magazine_box_wrap .w_badge {width: 90%; font-size: 1.125em; padding: 16px 0;}

  .storySec4 .story_title_wrap {margin: 23% 0 8%;}

  .storySec4 .partner_wrap .partner_title {font-size: 2.325em; margin-bottom: 8%;}
  .storySec4 .partner_wrap {margin-bottom: 8%;}
  .storySec4 .partner_wrap ul {row-gap: 20px;}
  .storySec4 .partner_wrap ul:not(:last-child) {margin-bottom: 20px;}
  .storySec4 .partner_wrap ul li {width: 26.5%;}
  .storySec4 .partner_wrap ul li:nth-child(4n-3) {width: 20.5%;}
}


@media screen and (max-width: 768px) {
  #brandStory.story .shop_banner {height: 75vh;}

  .storySec1 .story_title_wrap {margin: 20% 0;}
  .story_title_wrap .title {font-size: 3.5em;}
  .story_title_wrap .desc {font-size: 1.125em;}
  .story_title_wrap .cont br {display: none;}
  .story_title_wrap .cont p:not(:last-child) {margin-bottom: 30px;}
  .storySec1 .story_title_wrap .cont:not(:last-child) {margin-bottom: 30px;}

  .story_img_box .keyword {width: 100%; text-align: center;}
  .story_img_box {flex-direction: column-reverse;}
  .story_img_box.rt {flex-direction: column;}
  .story_img_box .rotate_txt {transform: none; writing-mode: initial; font-size: 5em; margin-bottom: 3%;}
  .story_img_box.rt .rotate_txt {transform: none;}
  .story_img_box .content {width: 100%; padding-top: 35%;}
  .story_img_box .img_box {left: 50%; right: auto; padding-bottom: 60%; transform: translateX(-50%); bottom: 20%;}
  .story_img_box.rt .img_box {left: 50%;}
  .story_img_box.rt .color_box {padding-left: 0;}
  .story_img_box.lt .color_box {padding-right: 0;}
  .story_img_box .color_box {padding-top: 40%;}
  .story_img_box .color_box .line {display: none;}
  .story_img_box .color_box .img_info {font-size: 1.125em; justify-content: center; padding-bottom: 6%;}
  .story_img_box.rt .color_box .img_info {justify-content: center;}

  .storySec2 .story_video_wrap {margin-bottom: 15%;}
  .storySec2 .herman_box_wrap {display: block;}
  .storySec2 .herman_box_wrap li {width: 100%; display: flex; align-items: flex-end; column-gap: 30px;}
  .storySec2 .herman_box_wrap li:not(:last-child) {margin-bottom: 30px;}
  .storySec2 .herman_box_wrap li .img_box {width: 250px;}
  .storySec2 .herman_box_wrap li .txt_box {width: calc(100% - 280px); padding-top: 0;}
  .storySec2 .herman_box_wrap li .txt_box .title {margin-bottom: 3%;}

  .storySec3 .story_title_wrap {margin: 25% 0 10%;}
  .storySec3 .gallery_wrap .swiper-button-next {width: 50px; height: 51px;}
  .storySec3 .gallery_wrap .swiper-button-prev {width: 50px; height: 51px;}
  .storySec3 .g_m_badge {font-size: 1.25em; padding: 15px 40px;}
  .storySec3 .w_badge {font-size: 1.125em; padding: 16px 60px;}
  .storySec3 .view_btn {font-size: 1.05em; padding: 12px 50px;}
  .storySec3 .view_btn {margin: 50px auto 0;}
  .storySec3 .gallery_wrap .view_btn {margin-top: 25px;}
  .storySec3 .magazine_wrap .magazine_box_wrap {column-gap: 20px;}
  .storySec3 .magazine_wrap .magazine_box_wrap li {width: calc((100% - 40px)/3);}
  .storySec3 .magazine_box_wrap .w_badge {font-size: 1.05em; padding: 12px 0; bottom: -22px;}

  .storySec4 .story_title_wrap {margin: 25% 0 10%;}
  .storySec4 .news_list li:not(:last-child) {margin-bottom: 5%;}
  .storySec4 .news_wrap .plus_btn {margin-top: 6%;}

  .storySec4 .partner_wrap {margin-bottom: 6%;}
  .storySec4 .partner_wrap .partner_title {font-size: 2.25em; margin-bottom: 10%;}

}

@media screen and (max-width: 540px) {
  #brandStory.story .shop_banner {height: 50vh;}

  .storySec1 .story_title_wrap {margin: 25% 0 20%;}
  .story_title_wrap .title {font-size: 3.25em; line-height: 110%}
  .story_title_wrap .desc {margin-top: 10px;}
  .story_title_wrap .desc::after {margin: 35px auto; width: 30px;}
  .story_title_wrap .cont br {display: none;}
  .storySec1 .story_title_wrap .cont.mo_none {display: none;}
  .storySec1 .story_title_wrap .plus_btn {display: flex;}
  .story_img_box.rt .color_box .img_info {text-align: center;}
  .story_img_box.story_img_box2.rt .color_box .img_info {padding-bottom: 3%;}

  .story_img_box .img_box {width: 80%;} 
  .story_img_box .color_box .img_info {font-size: 14px;}
  .story_img_box .rotate_txt {font-size: 13vw; margin-bottom: 10px;}

  .storySec2 .story_video_wrap {margin-bottom: 20%;}
  .storySec2 .story_title_wrap {margin: 35% 0 15%;}
  .storySec2 .story_title_wrap .cont {margin-top: 8%;}
  .storySec2 .herman_box_wrap li {display: block;}
  .storySec2 .herman_box_wrap li:not(:last-child) {margin-bottom: 20%;}
  .storySec2 .herman_box_wrap li .img_box {width: 100%;}
  .storySec2 .herman_box_wrap li .img_box img {width: 100%;}
  .storySec2 .herman_box_wrap li .txt_box {width: 100%; margin-top: 8%; padding: 0 0 6%;}
  .storySec2 .herman_box_wrap li .txt_box .title {margin-bottom: 5%;}

  .storySec3 .story_title_wrap {margin: 35% 0 10%;}
  .storySec3 .gallery_wrap {margin-bottom: 25%;}
  .storySec3 .gallery_wrap .swiper-button-next {width: 35px; height: 36px;}
  .storySec3 .gallery_wrap .swiper-button-prev {width: 35px; height: 36px;}
  .storySec3 .g_m_badge {font-size: 1.125em; padding: 10px 30px;}
  .storySec3 .w_badge {font-size: 1em; padding: 10px 40px; bottom: -20px;}
  .storySec3 .view_btn {font-size: 1em; padding: 10px 40px;}
  .storySec3 .gallery_wrap .swiper {padding-bottom: 20px;}
  .storySec3 .magazine_wrap .magazine_box_wrap {flex-wrap: wrap; row-gap: 40px;}
  .storySec3 .magazine_wrap .magazine_box_wrap li {width: calc(50% - 10px);}


  .storySec4 .story_title_wrap {margin: 35% 0 10%;}
  .storySec4 .news_list li:not(:last-child) {margin-bottom: 10%;}
  .storySec4 .news_wrap .plus_btn {margin-top: 8%;}

  .storySec4 .partner_wrap {margin-bottom: 7%;}
  .storySec4 .partner_wrap .partner_title {font-size: 2em; margin-bottom: 12%;}
  .storySec4 .partner_wrap ul {row-gap: 10px;}
  .storySec4 .partner_wrap ul:not(:last-child) {margin-bottom: 10px;}
  .storySec4 .partner_wrap ul li {padding: 3px 5px;}
}

@media screen and (max-width: 375px) {
  .story_img_box .color_box .img_info {font-size: 12px;}

}